Fix portal 0.5 (#1805)

* fix portal 5.0 bugs

* fix sdk session key parseScopes

* fix

* fix version

* finish

* fmt

infra/rooch-portal/.env.development

@@ -1 +1 @@
-VITE_ROOCH_OPERATING_ADDRESS=0xb7ac336861ff431cf867400a1eaa9708b5666954b5268486e6bd2e948aab1a42
+VITE_ROOCH_OPERATING_ADDRESS=0xf2a1a62242eaa7551a5af8f55e8f91c3285f4bd7d03d8b69944a2fb468b73f20

infra/rooch-portal/.env.production

@@ -1 +1 @@
-VITE_ROOCH_OPERATING_ADDRESS=0xb7ac336861ff431cf867400a1eaa9708b5666954b5268486e6bd2e948aab1a42
+VITE_ROOCH_OPERATING_ADDRESS=0xf2a1a62242eaa7551a5af8f55e8f91c3285f4bd7d03d8b69944a2fb468b73f20

infra/rooch-portal/package.json

@@ -30,8 +30,8 @@
     "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-toast": "^1.1.5",
     "@radix-ui/react-tooltip": "^1.0.7",
-    "@roochnetwork/rooch-sdk": "0.1.5",
-    "@roochnetwork/rooch-sdk-kit": "0.1.5",
+    "@roochnetwork/rooch-sdk": "0.1.8",
+    "@roochnetwork/rooch-sdk-kit": "0.1.8",
     "@tanstack/react-query": "^5.0.0",
     "@tanstack/react-table": "^8.11.8",
     "class-variance-authority": "^0.7.0",

infra/rooch-portal/src/components/banner.tsx

@@ -18,12 +18,12 @@ export const Banner: React.FC<BannerProps> = ({ onClose }) => {
             <span className="sr-only">Rooch</span>
           </span>
           <span>
-            Learn more about{' '}
+            Rooch Portal is at the beta testing version. Learn More about {' '}
             <a
-              href="https://rooch.network/"
+              href="https://rooch.network/learn/miscellaneous/portal"
               className="inline font-medium text-blue-600 underline dark:text-blue-500 underline-offset-2 decoration-600 dark:decoration-500 decoration-solid hover:text-blue-500 dark:hover:text-blue-400 transition-all"
             >
-              Rooch
+              Rooch Portal
             </a>
             .
           </span>

infra/rooch-portal/src/locales/en.json

@@ -17,5 +17,31 @@
     "connectWallet": "Connect Wallet",
     "connectWalletOnMobile": "Connect",
     "connectWalletTip": "Connect to your Rooch wallet"
+  },
+  "Mint": {
+    "title": "Mint",
+    "subTitle": "Deploy and mint Bitcoin assets."
+  },
+  "Trade": {
+    "title": "Trade",
+    "subTitle": "Trade your Bitcoin assets with ease."
+  },
+  "Leap": {
+    "title": "Leap",
+    "subTitle": "Leap your assets on/off the Bitcoin network."
+  },
+  "Transactions": {
+    "title": "Transactions",
+    "subTitle": "Browse your account activity history."
+  },
+  "Apps": {
+    "title": "Apps",
+    "subTitle": "Explore Bitcoin applications powered by Rooch."
+  },
+  "Settings": {
+    "address": "Rooch Address",
+    "addressSubTitle": "Use Rooch address in the application and smart contract development.",
+    "session": "Session Keys",
+    "sessionSubTitle": "Manage the site that your account has authorized session keys."
   }
 }

infra/rooch-portal/src/locales/zh.json

@@ -1,12 +1,12 @@
 {
   "Sidebar": {
-    "assets": "投资组合",
+    "assets": "资产",
     "staking": "质押",
     "mint": "铸造",
     "trade": "交易",
     "leap": "跃迁",
     "apps": "应用",
-    "transactions": "交易",
+    "transactions": "历史",
     "settings": "设置"
   },
   "Theme": {
@@ -18,5 +18,31 @@
     "connectWallet": "连接钱包",
     "connectWalletOnMobile": "连接钱包",
     "connectWalletTip": "连接您的 Rooch 钱包"
+  },
+  "Mint": {
+    "title": "铸造",
+    "subTitle": "部署和铸造比特币资产。"
+  },
+  "Trade": {
+    "title": "交易",
+    "subTitle": "交易你的比特币资产。"
+  },
+  "Leap": {
+    "title": "跃迁",
+    "subTitle": "将你的资产转移到或转移出比特币网络。"
+  },
+  "Transactions": {
+    "title": "历史",
+    "subTitle": "查看你账户的历史活动。"
+  },
+  "Apps": {
+    "title": "应用",
+    "subTitle": "探索基于 Rooch 实现的比特币应用。"
+  },
+  "Settings": {
+    "address": "Rooch 地址",
+    "addressSubTitle": "在应用和合约开发中将使用到该 Rooch 地址。",
+    "session": "会话密钥",
+    "sessionSubTitle": "管理您账户授权过会话密钥的网站。"
   }
 }

infra/rooch-portal/src/navigation/index.tsx

@@ -36,7 +36,7 @@ export type NavItemsType = NavLink[]
 
 export const navItems = (): NavItemsType => {
   return [
-    { icon: Bitcoin, label: 'Sidebar.assets', path: '/', auth: true, element: <AssetsLayout /> },
+    { icon: Bitcoin, label: 'Sidebar.assets', path: '/', auth: true,  element: <AssetsLayout /> },
     { icon: Scroll, label: 'Sidebar.mint', path: '/mint', auth: true, element: <MintLayout /> },
     {
       icon: CandlestickChart,

infra/rooch-portal/src/pages/apps/apps-layout.tsx

@@ -3,6 +3,7 @@
 import { useState } from 'react'
 import { AppsItem } from './components/apps-item'
 import { ComingSoon } from '@/components/coming-soon'
+import {useTranslation} from 'react-i18next';
 
 interface App {
   id: number
@@ -72,6 +73,7 @@ const mockApps: App[] = [
 
 export const AppsLayout = () => {
   const [apps] = useState<App[]>(mockApps)
+  const { t } = useTranslation()
 
   const renderContent = () => {
     if (apps.length === 0) {
@@ -98,9 +100,9 @@ export const AppsLayout = () => {
     <div className="h-full flex-1 flex-col space-y-6 flex rounded-lg md:shadow-custom md:p-4 md:dark:shadow-muted">
       <div className="flex items-center justify-between space-y-2">
         <span>
-          <h1 className="text-3xl font-bold tracking-tight">Apps</h1>
+          <h1 className="text-3xl font-bold tracking-tight">{t('Apps.title')}</h1>
           <p className="text-muted-foreground text-wrap">
-            Explore a variety of apps supported by Rooch, enhancing your Bitcoin Layer-2 experience.
+            {t('Apps.subTitle')}
           </p>
         </span>
       </div>

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

@@ -234,7 +234,7 @@ export const AssetsCoin = () => {
             {data?.data.map((coin) => (
               <TableRow key={coin.name}>
                 <TableCell>{coin.name}</TableCell>
-                <TableCell>{formatCoin(Number(coin.balance), coin.decimals)}</TableCell>
+                <TableCell>{formatCoin(Number(coin.balance), coin.decimals, coin.decimals)}</TableCell>
                 <TableCell className="text-right">
                   <Button
                     variant="link"

infra/rooch-portal/src/pages/leap/leap-layout.tsx

@@ -1,15 +1,17 @@
 // Copyright (c) RoochNetwork
 // SPDX-License-Identifier: Apache-2.0
 import { ComingSoon } from '@/components/coming-soon.tsx'
+import {useTranslation} from 'react-i18next';
 
 export const LeapLayout = () => {
+  const { t } = useTranslation()
   return (
     <div className="h-full flex-1 flex-col space-y-6 flex rounded-lg md:shadow-custom md:p-4 md:dark:shadow-muted">
       <div className="flex items-center justify-between space-y-2">
         <span>
-          <h1 className="text-3xl font-bold tracking-tight">Leap</h1>
+          <h1 className="text-3xl font-bold tracking-tight">{t('Leap.title')}</h1>
           <p className="text-muted-foreground text-wrap">
-            Explore a variety of apps supported by Rooch, enhancing your Bitcoin Layer-2 experience.
+            {t('Leap.subTitle')}
           </p>
         </span>
       </div>

infra/rooch-portal/src/pages/mint/mint-layout.tsx

@@ -1,14 +1,16 @@
 // Copyright (c) RoochNetwork
 // SPDX-License-Identifier: Apache-2.0
 import { SftTabs } from './components/sft-tabs'
+import {useTranslation} from 'react-i18next';
 
 export const MintLayout = () => {
+  const { t } = useTranslation()
   return (
     <div className="h-full flex-1 flex-col space-y-6 flex rounded-lg md:shadow-custom md:p-4 md:dark:shadow-muted">
       <div className="flex items-center justify-between space-y-2">
         <span>
-          <h1 className="text-3xl font-bold tracking-tight">Mint</h1>
-          <p className="text-muted-foreground text-wrap">Start your minting tokens journey</p>
+          <h1 className="text-3xl font-bold tracking-tight">{t('Mint.title')}</h1>
+          <p className="text-muted-foreground text-wrap">{t('Mint.subTitle')}</p>
         </span>
       </div>
       <SftTabs />

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

@@ -1,6 +1,6 @@
 // Copyright (c) RoochNetwork
 // SPDX-License-Identifier: Apache-2.0
-import React, { useState, useEffect, useCallback } from 'react'
+import React, { useState, useCallback } from 'react'
 import {
   Table,
   TableBody,
@@ -20,26 +20,10 @@ import { Copy, ChevronDown, ChevronUp, Check, AlertCircle } from 'lucide-react'
 
 import { formatTimestamp } from '@/utils/format.ts'
 
-interface Session {
-  authenticationKey: string
-  appName: string
-  createTime: string
-  lastActiveTime: string
-  maxInactiveInterval: string
-  scopes: string[]
-}
-
-interface SessionInfoResult {
-  authenticationKey: string
-  appName: string
-  createTime: number
-  lastActiveTime: number
-  maxInactiveInterval: number
-  scopes: string[]
-}
+import {SessionInfoResult} from '@roochnetwork/rooch-sdk';
 
 interface ExpandableRowProps {
-  session: Session
+  session: SessionInfoResult
   remove: (authKey: string) => void
 }
 
@@ -61,71 +45,21 @@ export const ManageSessions: React.FC = () => {
     data: sessionKeys,
     isLoading,
     isError,
+    refetch
   } = useRoochClientQuery('querySessionKeys', {
     address: sessionKey?.getAddress() || '',
   })
 
-  const [activeSessions, setActiveSessions] = useState<Session[]>([])
-
   const remove = useCallback(
     async (authKey: string) => {
       await removeSession({
         authKey: authKey,
       })
-      setActiveSessions((prevSessions) =>
-        prevSessions.filter((session) => session.authenticationKey !== authKey),
-      )
+      await refetch()
     },
-    [removeSession],
+    [removeSession, refetch],
   )
 
-  const formatSession = (session: SessionInfoResult): Session => ({
-    ...session,
-    createTime: formatTimestamp(session.createTime),
-    lastActiveTime: formatTimestamp(session.lastActiveTime),
-    maxInactiveInterval: session.maxInactiveInterval.toString(),
-  })
-
-  useEffect(() => {
-    if (sessionKeys?.data.length) {
-      const formattedSessions = sessionKeys.data.map(formatSession)
-      setActiveSessions(formattedSessions)
-    }
-  }, [sessionKeys])
-
-  useEffect(() => {
-    const interval = setInterval(() => {
-      const currentTime = Date.now() / 1000 // 获取当前时间的 Unix 时间戳（以秒为单位）
-      setActiveSessions((prevSessions) =>
-        prevSessions.filter((session) => {
-          const expirationTime =
-            new Date(session.createTime).getTime() / 1000 + parseInt(session.maxInactiveInterval)
-          if (currentTime > expirationTime) {
-            remove(session.authenticationKey)
-            return false
-          }
-          return true
-        }),
-      )
-    }, 1000)
-
-    return () => clearInterval(interval)
-  }, [remove])
-
-  if (!activeSessions.length) {
-    return (
-      <div className="rounded-lg border w-full flex justify-center items-center h-full p-20">
-        <div className="flex flex-col items-center justify-center text-center text-xl text-muted-foreground">
-          <AlertCircle className="w-12 h-12 mb-4 text-zinc-500" />
-          <p className="mb-2 font-semibold">No Data</p>
-          <p className="text-base text-gray-500">
-            No session keys found. Please check again later.
-          </p>
-        </div>
-      </div>
-    )
-  }
-
   if (isLoading || isError) {
     return (
       <div className="relative p-40">
@@ -146,6 +80,20 @@ export const ManageSessions: React.FC = () => {
     )
   }
 
+  if (sessionKeys && sessionKeys.data.length === 0) {
+    return (
+      <div className="rounded-lg border w-full flex justify-center items-center h-full p-20">
+        <div className="flex flex-col items-center justify-center text-center text-xl text-muted-foreground">
+          <AlertCircle className="w-12 h-12 mb-4 text-zinc-500" />
+          <p className="mb-2 font-semibold">No Data</p>
+          <p className="text-base text-gray-500">
+            No session keys found. Please check again later.
+          </p>
+        </div>
+      </div>
+    )
+  }
+
   return (
     <div className="rounded-lg border w-full">
       <Table>
@@ -161,7 +109,7 @@ export const ManageSessions: React.FC = () => {
           </TableRow>
         </TableHeader>
         <TableBody>
-          {activeSessions.map((session: Session) => (
+          {sessionKeys?.data.map((session) => (
             <ExpandableRow key={session.authenticationKey} session={session} remove={remove} />
           ))}
         </TableBody>
@@ -191,7 +139,7 @@ const ExpandableRow: React.FC<ExpandableRowProps> = ({ session, remove }) => {
         <TableCell className="cursor-pointer w-64" onClick={() => setIsExpanded(!isExpanded)}>
           <div className="flex items-center justify-start gap-1 w-full">
             <span className="text-muted-foreground">
-              {isExpanded ? 'Hide Session Keys' : 'Show Session Keys'}
+              {isExpanded ? 'Hide Session Key Scopes' : 'Show Session Key Scopes'}
             </span>
             {isExpanded ? (
               <ChevronUp className="w-4 h-4 text-muted-foreground" />
@@ -200,8 +148,8 @@ const ExpandableRow: React.FC<ExpandableRowProps> = ({ session, remove }) => {
             )}
           </div>
         </TableCell>
-        <TableCell className="text-muted-foreground">{session.createTime}</TableCell>
-        <TableCell className="text-muted-foreground">{session.lastActiveTime}</TableCell>
+        <TableCell className="text-muted-foreground">{formatTimestamp(session.createTime)}</TableCell>
+        <TableCell className="text-muted-foreground">{formatTimestamp(session.lastActiveTime)}</TableCell>
         <TableCell className="text-muted-foreground">{session.maxInactiveInterval}</TableCell>
         <TableCell className="text-center">
           <Button
@@ -210,7 +158,9 @@ const ExpandableRow: React.FC<ExpandableRowProps> = ({ session, remove }) => {
             onClick={() => remove(session.authenticationKey)}
             className="text-red-500 dark:text-red-400 dark:hover:text-red-300 hover:text-red-600"
           >
-            Expired (Clear)
+            {
+              session.lastActiveTime > new Date().getSeconds() ? 'Disconnect' : 'Expired (Clear)'
+            }
           </Button>
         </TableCell>
       </TableRow>