Detail pages routes

.vscode/settings.json

@@ -2,6 +2,11 @@
   "typescript.tsdk": "node_modules/typescript/lib",
   "npm.packageManager": "pnpm",
   "eslint.useESLintClass": true,
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "always"
+  },
   "eslint.workingDirectories": [
     "./packages/colors",
     "./packages/icons",

apps/portfolio/src/app/[address]/@detail/assets/[ticker]/page.tsx

@@ -2,23 +2,25 @@ import { Suspense } from 'react'
 
 import { Button, Tooltip } from '@status-im/components'
 import { BuyIcon, ReceiveBlurIcon } from '@status-im/icons/20'
-import { StickyHeaderContainer } from '@status-im/wallet/components'
+import {
+  Balance,
+  CurrencyAmount,
+  NetworkBreakdown,
+  StickyHeaderContainer,
+  TokenLogo,
+} from '@status-im/wallet/components'
 import { cx } from 'class-variance-authority'
 import { notFound } from 'next/navigation'
 import { MDXRemote } from 'next-mdx-remote/rsc'
 import { ErrorBoundary } from 'react-error-boundary'
 
 import { getAPIClient } from '../../../../..//data/api'
-import { Balance } from '../../../../_components/balance'
 import { BuyCryptoDrawer } from '../../../../_components/buy-crypto-drawer'
 import { portfolioComponents } from '../../../../_components/content'
-import { CurrencyAmount } from '../../../../_components/currency-amount'
 import { ReceiveCryptoDrawer } from '../../../../_components/receive-crypto-drawer'
 import { TokenAmount } from '../../../../_components/token-amount'
 import { Chart } from '../_components/chart'
 import { Loading } from '../_components/chart/loading'
-import { NetworkBreakdown } from './_components/network-breakdown'
-import { TokenLogo } from './_components/token-logo'
 
 import type { ApiOutput, NetworkType } from '@status-im/wallet/data'
 

apps/portfolio/src/app/[address]/@detail/collectibles/[network]/[contract]/[id]/page.tsx

@@ -3,10 +3,9 @@
 import { Button } from '@status-im/components'
 import { ExternalIcon, OptionsIcon, SadIcon } from '@status-im/icons/20'
 import { OpenseaIcon } from '@status-im/icons/social'
+import { CurrencyAmount, NetworkLogo } from '@status-im/wallet/components'
 
 import { getAPIClient } from '../../../../../../../data/api'
-import { CurrencyAmount } from '../../../../../../_components/currency-amount'
-import { NetworkLogo } from '../../../../../../_components/network-logo'
 import { ImageLightbox } from './_components/image-lightbox'
 import { InfoCard } from './_components/info-card'
 

apps/portfolio/src/app/[address]/@list/@balance/default.tsx

@@ -1,5 +1,6 @@
+import { Balance } from '@status-im/wallet/components'
+
 import { getAPIClient } from '../../../../data/api'
-import { Balance } from '../../../_components/balance'
 
 import type { NetworkType } from '@status-im/wallet/data'
 

apps/portfolio/src/app/[address]/@list/collectibles/_components/collectibles-table.tsx

@@ -5,14 +5,14 @@ import { useMemo } from 'react'
 
 import { Button, Skeleton } from '@status-im/components'
 import { SadIcon } from '@status-im/icons/20'
+import { useInfiniteLoading } from '@status-im/wallet/hooks'
 import { useInfiniteQuery } from '@tanstack/react-query'
 import { cx } from 'class-variance-authority'
 import { usePathname, useSearchParams } from 'next/navigation'
 import { ErrorBoundary } from 'react-error-boundary'
 
 import { Link } from '../../../../_components/link'
 import { DEFAULT_SORT, GRADIENTS } from '../../../../_constants'
-import { useInfiniteLoading } from '../../../../_hooks/use-infinite-loading'
 import { useSearchAndSort } from '../../../../_hooks/use-search-and-sort'
 
 import type { GetCollectiblesProps, GetCollectiblesResponse } from '../_actions'

apps/portfolio/src/app/_components/action-buttons.tsx

@@ -2,11 +2,11 @@
 
 import { Input } from '@status-im/components'
 import { SearchIcon } from '@status-im/icons/20'
+import { DropdownSort } from '@status-im/wallet/components'
 import { useParams, usePathname } from 'next/navigation'
 import { match, P } from 'ts-pattern'
 
 import { useSearchAndSort } from '../_hooks/use-search-and-sort'
-import { AdminDropdownSort } from './dropdown-sort'
 import { TabLink } from './tab-link'
 
 const checkPathnameAndReturnTabValue = (
@@ -54,7 +54,7 @@ const ActionButtons = () => {
           clearable={!!inputValue}
           aria-label="Search"
         />
-        <AdminDropdownSort
+        <DropdownSort
           data={sortOptions}
           onOrderByChange={onOrderByChange}
           orderByColumn={orderByColumn}

apps/portfolio/src/app/_components/detail-drawer.tsx

@@ -31,7 +31,7 @@ const DetailDrawer = (props: Props) => {
       .with(
         P.when(p => {
           const segments = p.split('/').filter(Boolean)
-          return p.includes('/assets/') && segments.length >= 4
+          return p.includes('/assets/') && segments.length === 3
         }),
         () => true
       )

apps/portfolio/src/app/_components/sidenav.tsx

@@ -2,14 +2,14 @@
 
 import { Avatar } from '@status-im/components'
 import { InsightsIcon } from '@status-im/icons/20'
+import { CurrencyAmount } from '@status-im/wallet/components'
 import { cva, cx } from 'class-variance-authority'
 import Link from 'next/link'
 import { usePathname } from 'next/navigation'
 
 import { Tooltip } from '../_components/tooltip'
 import { useMediaQuery } from '../_hooks/use-media-query'
 import { AddAddress } from './add-address'
-import { CurrencyAmount } from './currency-amount'
 import { FeatureEnabled } from './feature-enabled'
 
 import type { CustomisationColorType } from '@status-im/components'

apps/wallet/package.json

@@ -50,8 +50,14 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-hook-form": "^7.54.2",
+    "rehype-react": "^8.0.0",
+    "rehype-stringify": "^10.0.0",
+    "remark-parse": "^11.0.0",
+    "remark-rehype": "^11.0.0",
     "superjson": "^2.2.1",
     "trpc-chrome": "^1.0.0",
+    "ts-pattern": "^5.7.1",
+    "unified": "^11.0.5",
     "vite-plugin-node-polyfills": "^0.23.0",
     "zod": "^3.23.8"
   },

apps/wallet/src/components/action-buttons.tsx

@@ -0,0 +1,70 @@
+'use client'
+
+// import { Input } from '@status-im/components'
+// import { SearchIcon } from '@status-im/icons/20'
+import { DropdownSort } from '@status-im/wallet/components'
+
+// import { match, P } from 'ts-pattern'
+import { TabLink } from './tab-link'
+
+// const checkPathnameAndReturnTabValue = (
+//   pathname: string,
+// ): 'assets' | 'collectibles' => {
+//   return match(pathname)
+//     .with(P.string.includes('/assets'), () => 'assets')
+//     .with(P.string.includes('/collectibles'), () => 'collectibles')
+//     .otherwise(() => 'assets') as 'assets' | 'collectibles'
+// }
+
+// const placeholderText = {
+//   assets: 'Search asset name or symbol',
+//   collectibles: 'Search collection or collectible name',
+// } as const
+
+type Props = {
+  address: string
+  pathname: string
+  searchAndSortValues: {
+    inputValue: string
+    updateSearchParam: (value: string) => void
+    orderByColumn: string
+    ascending: boolean
+    onOrderByChange: (value: string | number, ascending: boolean) => void
+    sortOptions: Record<string, string>
+  }
+}
+
+const ActionButtons = (props: Props) => {
+  //   const { address, pathname, searchAndSortValues } = props
+  const { address, searchAndSortValues } = props
+
+  //   const placeholder = placeholderText[checkPathnameAndReturnTabValue(pathname)]
+
+  return (
+    <div className="flex place-content-between">
+      <div className="flex gap-1.5">
+        <TabLink href={`/${address}/assets`}>Assets</TabLink>
+        <TabLink href={`/${address}/collectibles`}>Collectibles</TabLink>
+      </div>
+      <div className="flex items-center gap-2">
+        {/* <Input
+          placeholder={placeholder}
+          icon={<SearchIcon />}
+          size="32"
+          value={searchAndSortValues.inputValue}
+          onChange={searchAndSortValues.updateSearchParam}
+          clearable={!!searchAndSortValues.inputValue}
+          aria-label="Search"
+        /> */}
+        <DropdownSort
+          data={searchAndSortValues.sortOptions}
+          onOrderByChange={searchAndSortValues.onOrderByChange}
+          orderByColumn={searchAndSortValues.orderByColumn}
+          ascending={searchAndSortValues.ascending}
+        />
+      </div>
+    </div>
+  )
+}
+
+export { ActionButtons }