Portal 240611 (#1861)

* feat: jazzicon

* feat: add address validation

* feat: enhance transfer

* feat: add error log for remove the seesion key

infra/rooch-portal/package.json

@@ -34,6 +34,7 @@
     "@roochnetwork/rooch-sdk-kit": "0.1.8",
     "@tanstack/react-query": "^5.0.0",
     "@tanstack/react-table": "^8.11.8",
+    "bitcoinjs-lib": "^6.1.6",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "cmdk": "^0.2.1",

infra/rooch-portal/src/components/profile-info.tsx

@@ -16,7 +16,7 @@ export const ProfileInfo = () => {
       <div className="flex items-center justify-start gap-x-3 w-full p-2 rounded-lg hover:bg-accent transition-all">
         <Avatar className="">
           {account ? (
-            <Jazzicon diameter={55} seed={jsNumberForAddress(account.address)} />
+            <Jazzicon diameter={55} seed={jsNumberForAddress(`0x${account.address}`)} />
           ) : (
             <Jazzicon diameter={55} seed={10000000} />
           )}

infra/rooch-portal/src/pages/assets/assets-details/tabs/coin/assets-coin.tsx

@@ -26,6 +26,7 @@ import CustomPagination from '@/components/custom-pagination.tsx'
 import { formatCoin } from '@/utils/format.ts'
 import { useToast } from '@/components/ui/use-toast'
 import { ToastAction } from '@/components/ui/toast'
+import { isValidBitcoinAddress } from '@/utils/addressValidation' // Import the validation function
 
 export const AssetsCoin = () => {
   const account = useCurrentAccount()
@@ -150,18 +151,42 @@ export const AssetsCoin = () => {
   }
 
   const handleTransferCoin = async () => {
+    try {
+      if (!sessionKey || (await sessionKey.isExpired())) {
+        toast({
+          title: 'Session Key Expired',
+          description: 'The session key was expired, please authorize the latest one.',
+          action: <ToastAction altText="Close">Close</ToastAction>,
+        })
+        return
+      }
+    } catch (error) {
+      console.error('Failed to check session key expiration', error)
+      toast({
+        title: 'Error',
+        description: 'An error occurred while checking the session key expiration.',
+        action: <ToastAction altText="Close">Close</ToastAction>,
+      })
+      return
+    }
+
     if (recipient === '' || amount === '0' || !selectedCoin || error) {
       setError('Please enter a valid recipient and amount.')
       return
     }
 
+    if (!isValidBitcoinAddress(recipient)) {
+      setError('Invalid recipient address.')
+      return
+    }
+
     const amountNumber = Math.floor(Number(amount) * 10 ** selectedCoin.decimals)
 
     setTransferLoading(true)
 
     try {
       await transferCoin({
-        account: sessionKey!,
+        account: sessionKey,
         recipient: recipient,
         amount: amountNumber,
         coinType: selectedCoin.coin_type,

infra/rooch-portal/src/pages/assets/profile-card/profile-card.tsx

@@ -2,15 +2,13 @@
 // SPDX-License-Identifier: Apache-2.0
 import toast from 'react-hot-toast'
 // import { RotateCcw } from 'lucide-react'
-
 import { Button } from '@/components/ui/button'
 import { Avatar } from '@/components/ui/avatar'
 import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
 
 import { formatAddress } from '@/utils/format'
 import { useCurrentAccount } from '@roochnetwork/rooch-sdk-kit'
 // import { useNavigate } from 'react-router-dom'
-
 import Jazzicon, { jsNumberForAddress } from 'react-jazzicon'
 
 export const ProfileCard = () => {
@@ -82,7 +80,7 @@ export const ProfileCard = () => {
         <div className="absolute">
           <Avatar className="hidden md:inline">
             {account ? (
-              <Jazzicon diameter={80} seed={jsNumberForAddress(account.address)} />
+              <Jazzicon diameter={80} seed={jsNumberForAddress(`0x${account.address}`)} />
             ) : (
               <Jazzicon diameter={80} seed={10000000} />
             )}

infra/rooch-portal/src/pages/settings/components/manage-sessions.tsx

@@ -57,6 +57,8 @@ export const ManageSessions: React.FC = () => {
           authKey: authKey,
         })
         await refetch()
+      } catch (error) {
+        console.error(error)
       } finally {
         setLoading(null)
       }

infra/rooch-portal/src/utils/addressValidation.ts

@@ -0,0 +1,19 @@
+// Copyright (c) RoochNetwork
+// SPDX-License-Identifier: Apache-2.0
+import * as bitcoin from 'bitcoinjs-lib'
+
+export const isValidBitcoinAddress = (address: string): boolean => {
+  try {
+    // Validate mainnet and testnet Bech32 addresses
+    bitcoin.address.fromBech32(address)
+    return true
+  } catch (e) {
+    try {
+      // Validate mainnet and testnet base58 addresses
+      bitcoin.address.fromBech32(address)
+      return true
+    } catch (e) {
+      return false
+    }
+  }
+}