[Portal] Logic Enhancement (#1956)

* refactor: extract type for utxo/inscriptions component * chore: stashed the `filter all accounts` * chore: update the address display * chore * refactor: update the filter logic
rooch-network · Jun 20, 2024 · 3175d8f · 3175d8f
1 parent 5e4f42a
commit 3175d8f
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 33 deletions.
diff --git a/infra/rooch-portal/src/common/interface.ts b/infra/rooch-portal/src/common/interface.ts
@@ -1,5 +1,6 @@
 // Copyright (c) RoochNetwork
 // SPDX-License-Identifier: Apache-2.0
+import { IndexerStateID } from '@roochnetwork/rooch-sdk'
 import { LucideIcon } from 'lucide-react'
 
 export interface WalletsMaterialProps {
@@ -76,3 +77,5 @@ export type TabItem = {
   label: string
   available: boolean
 }
+
+export type CursorType = IndexerStateID | null
diff --git a/...tal/src/pages/assets/assets-details/tabs/bitcoin-assets/components/bitcoin-assets-btc.tsx b/...tal/src/pages/assets/assets-details/tabs/bitcoin-assets/components/bitcoin-assets-btc.tsx
@@ -1,59 +1,54 @@
 // Copyright (c) RoochNetwork
 // SPDX-License-Identifier: Apache-2.0
 import { useMemo, useRef, useState } from 'react'
-import {
-  useCurrentAccount,
-  // useCurrentAccount,
-  useRoochClientQuery,
-} from '@roochnetwork/rooch-sdk-kit'
+import { useCurrentAccount, useRoochClientQuery } from '@roochnetwork/rooch-sdk-kit'
+
+import { AlertCircle, Wallet } from 'lucide-react'
+import { CursorType } from '@/common/interface'
+import type { IndexerStateID } from '@roochnetwork/rooch-sdk'
 
 import { NoData } from '@/components/no-data.tsx'
 import CustomPagination from '@/components/custom-pagination.tsx'
-
 import { Card, CardContent, CardHeader } from '@/components/ui/card'
-import { AlertCircle, Wallet } from 'lucide-react'
-
-// test address
-// const testAddress = ''
 
-export const BitcoinAssetsBtc = () => {
+export const BitcoinAssetsBtc: React.FC = () => {
   const account = useCurrentAccount()
 
   // ** PAGINATION
   const [paginationModel, setPaginationModel] = useState({ page: 0, pageSize: 1 })
-  const mapPageToNextCursor = useRef<{ [page: number]: string | null }>({})
+  const mapPageToNextCursor = useRef<{ [page: number]: CursorType }>({})
+
   const handlePageChange = (selectedPage: number) => {
-    if (selectedPage < 0) {
-      return
-    }
+    if (selectedPage < 0) return
+
     setPaginationModel({
       page: selectedPage,
       pageSize: paginationModel.pageSize,
     })
   }
+
   const queryOptions = useMemo(
     () => ({
-      cursor: mapPageToNextCursor.current[paginationModel.page - 1],
+      cursor: mapPageToNextCursor.current[paginationModel.page - 1] || null,
       pageSize: paginationModel.pageSize,
     }),
     [paginationModel],
   )
 
-  // TODO: 1, loading, 2 pagination
   const {
     data: result,
     isLoading,
     isError,
   } = useRoochClientQuery('queryUTXOs', {
     filter: {
-      owner: 'bcrt1p79ruqzh9hmmhvaz7x3up3t6pdrmz5hmhz3pfkddxqnfzg0md7upq3jjjev',
+      owner: account?.address || '',
     },
-    // TODO: 待解决的类型问题
-    // @ts-ignore
-    cursor: queryOptions.cursor,
+    cursor: queryOptions.cursor as IndexerStateID | null,
     limit: queryOptions.pageSize,
   })
 
+  console.log('result of UTXOs', result)
+
   if (!account) {
     return (
       <div className="flex flex-col items-center justify-center text-center p-40">

diff --git a/...al/src/pages/assets/assets-details/tabs/bitcoin-assets/components/bitcoin-assets-ordi.tsx b/...al/src/pages/assets/assets-details/tabs/bitcoin-assets/components/bitcoin-assets-ordi.tsx
@@ -8,10 +8,9 @@ import CustomPagination from '@/components/custom-pagination.tsx'
 import { hexToString } from '@/utils/format.ts'
 import { AlertCircle, Wallet } from 'lucide-react'
 
+import { CursorType } from '@/common/interface'
 import type { IndexerStateID } from '@roochnetwork/rooch-sdk'
 
-type CursorType = IndexerStateID | null
-
 export const BitcoinAssetsOrdi: React.FC = () => {
   const account = useCurrentAccount()
 
@@ -42,7 +41,7 @@ export const BitcoinAssetsOrdi: React.FC = () => {
     isError,
   } = useRoochClientQuery('queryInscriptions', {
     filter: {
-      owner: 'tb1pr6mdxnc348lua02c32ad4uyyaw3kavjz4c8jzkh5ffvuq4ryvxhs70g2gm',
+      owner: account?.address || '',
     },
     cursor: queryOptions.cursor as IndexerStateID | null,
     limit: queryOptions.pageSize,

diff --git a/infra/rooch-portal/src/pages/settings/components/rooch-address.tsx b/infra/rooch-portal/src/pages/settings/components/rooch-address.tsx
@@ -60,15 +60,7 @@ export const RoochAddress = () => {
         </Button>
       </div>
       <div className="w-full bg-zinc-100 dark:bg-zinc-700 rounded-lg p-4 flex items-center justify-between">
-        <span className="text-zinc-900 dark:text-white truncate md:hidden flex items-center justify-start">
-          <img
-            src="/rooch_white_logo.svg"
-            alt="rooch logo"
-            className="w-4 h-4 rounded-full bg-zinc-900 p-0.5 mr-2"
-          />
-          {/*{formatAddress(account.getBech32RoochAddress())}*/}
-        </span>
-        <span className="text-zinc-900 dark:text-white truncate hidden md:flex items-center justify-start">
+        <span className="text-zinc-900 dark:text-white truncate flex items-center justify-start">
           <img
             src="/rooch_white_logo.svg"
             alt="rooch logo"