fix: portal search account issue (#2555)

rooch-network · Sep 2, 2024 · 626ba4a · 626ba4a
1 parent 7b93d32
commit 626ba4a
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 10 deletions.
diff --git a/infra/rooch-portal-v2/src/sections/account/view.tsx b/infra/rooch-portal-v2/src/sections/account/view.tsx
@@ -1,29 +1,59 @@
 'use client';
 
+import { useState, useEffect } from 'react';
+import { isValidBitcoinAddress } from '@roochnetwork/rooch-sdk';
 import { useRoochClientQuery } from '@roochnetwork/rooch-sdk-kit';
 
 import { Box, Card, Chip, Stack, CardHeader, CardContent } from '@mui/material';
 
+import { useRouter } from 'src/routes/hooks';
 import { RouterLink } from 'src/routes/components';
 
 import { BitcoinAddressToRoochAddress } from 'src/utils/address';
 
 import { DashboardContent } from 'src/layouts/dashboard';
 
+import { toast } from 'src/components/snackbar';
+
 import AssetsTableCard from '../assets/components/assets-table-card';
 import TransactionsTableCard from '../transactions/components/transactions-table-card';
 
 export function AccountView({ address }: { address: string }) {
+  const [viewAddress, setViewAddress] = useState<string>();
+  const [viewRoochAddress, setViewRoochAddress] = useState<string>();
+
+  const router = useRouter();
+
+  useEffect(() => {
+    if (isValidBitcoinAddress(address)) {
+      setViewAddress(address);
+      try {
+        setViewRoochAddress(BitcoinAddressToRoochAddress(address!).toHexAddress());
+      } catch (error) {
+        toast.error('Invalid query address');
+        router.push('/search');
+      }
+    } else {
+      toast.error('Invalid query address');
+      router.push('/search');
+    }
+  }, [address, router]);
+
   const { data: transactionsList, isPending: isTransactionsPending } = useRoochClientQuery(
     'queryTransactions',
     {
       filter: {
-        sender: BitcoinAddressToRoochAddress(address).toHexAddress(),
+        sender: viewRoochAddress!,
       },
       limit: '5',
-    }
+    },
+    { enabled: !!viewAddress }
   );
 
+  if (!viewAddress) {
+    return null;
+  }
+
   return (
     <DashboardContent maxWidth="xl">
       <Card>
@@ -34,17 +64,17 @@ export function AccountView({ address }: { address: string }) {
               {/* <Box>Bitcoin Address</Box> */}
               <Chip
                 className="w-fit !cursor-pointer"
-                label={address}
+                label={viewAddress}
                 variant="soft"
                 color="secondary"
                 component={RouterLink}
-                href={`/account/${address}`}
+                href={`/account/${viewAddress}`}
               />
             </Stack>
             <Stack direction="row" alignItems="center" spacing={0.5}>
               <Chip
                 className="w-fit"
-                label={BitcoinAddressToRoochAddress(address).toStr()}
+                label={BitcoinAddressToRoochAddress(viewAddress).toStr()}
                 variant="soft"
                 color="default"
               />
@@ -54,10 +84,10 @@ export function AccountView({ address }: { address: string }) {
         </CardContent>
       </Card>
 
-      <AssetsTableCard dense address={address} />
+      <AssetsTableCard dense address={viewAddress} />
       <TransactionsTableCard
         dense
-        address={address}
+        address={viewAddress}
         isPending={isTransactionsPending}
         transactionsList={transactionsList}
       />

diff --git a/infra/rooch-portal-v2/src/sections/search/overview.tsx b/infra/rooch-portal-v2/src/sections/search/overview.tsx
@@ -1,17 +1,20 @@
 'use client';
 
 import { useState } from 'react';
+import { isValidBitcoinAddress } from '@roochnetwork/rooch-sdk';
 
 import { Card, Stack, Button, TextField, CardHeader, CardContent } from '@mui/material';
 
-import { RouterLink } from 'src/routes/components';
+import { useRouter } from 'src/routes/hooks';
 
 import { DashboardContent } from 'src/layouts/dashboard';
 
 const placeholder = 'tb1pjugffa0n2ts0vra032t3phae7xrehdjfzkg284ymvf260vjh225s5u4z76';
 
 export default function SearchView() {
   const [account, setAccount] = useState('');
+  const [errorMsg, setErrorMsg] = useState<string>();
+  const router = useRouter();
 
   return (
     <DashboardContent maxWidth="xl">
@@ -22,17 +25,27 @@ export default function SearchView() {
           sx={{ mb: 2 }}
         />
         <CardContent className="!pt-0">
-          <Stack direction="row" alignItems="center" className="w-full" spacing={2}>
+          <Stack direction="row" alignItems="flex-start" className="w-full" spacing={2}>
             <TextField
               size="small"
               className="w-full"
               value={account}
               placeholder={placeholder}
+              error={Boolean(errorMsg)}
+              helperText={errorMsg}
               onChange={(e) => {
                 setAccount(e.target.value);
               }}
             />
-            <Button component={RouterLink} href={`/account/${account || placeholder}`}>
+            <Button
+              onClick={() => {
+                if (account && !isValidBitcoinAddress(account)) {
+                  setErrorMsg('Invalid address');
+                  return;
+                }
+                router.push(`/account/${account || placeholder}`);
+              }}
+            >
               Search
             </Button>
           </Stack>