refactor: improve the UI

rooch-portal-v1/src/App.tsx

@@ -11,6 +11,7 @@ import { WalletProvider, RoochClientProvider, SupportChain } from '@roochnetwork
 
 import { DashboardLayout } from './pages/dashboard-layout'
 import { ToastProvider } from './providers/toast-provider'
+// import { Banner } from './components/banner'
 
 const clientSideEmotionCache = createEmotionCache()
 
@@ -25,6 +26,7 @@ function App() {
             <WalletProvider chain={SupportChain.BITCOIN} autoConnect>
               <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
                 <ToastProvider />
+                {/* <Banner /> */}
                 <DashboardLayout />
               </ThemeProvider>
             </WalletProvider>

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

@@ -0,0 +1,56 @@
+interface BannerProps {
+  onClose: () => void
+}
+
+export const Banner: React.FC<BannerProps> = ({ onClose }) => {
+  return (
+    <div
+      id="sticky-banner"
+      tabIndex={-1}
+      className="fixed top-0 start-0 z-50 flex justify-between w-full p-1 border-b border-zinc-100 bg-zinc-100 dark:bg-zinc-800 dark:border-zinc-800 inset-x-0"
+    >
+      <div className="flex items-center mx-auto">
+        <p className="flex items-center text-sm font-normal text-zinc-500 dark:text-zinc-400">
+          <span className="inline-flex p-1 me-2 bg-zinc-400 rounded-full dark:bg-zinc-600 w-5 h-5 items-center justify-center flex-shrink-0">
+            <img src="/rooch_white_logo.svg" alt="rooc" className="w-3 h-3" />
+            <span className="sr-only">Rooch</span>
+          </span>
+          <span>
+            Rooch BTC Layer2 is comming soon{' '}
+            <a
+              href="https://rooch.network/"
+              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"
+            >
+              Learn more
+            </a>
+            .
+          </span>
+        </p>
+      </div>
+      <div className="flex items-center">
+        <button
+          onClick={onClose}
+          type="button"
+          className="flex-shrink-0 inline-flex justify-center w-7 h-7 items-center text-zinc-400 hover:bg-zinc-200 hover:text-zinc-900 rounded-lg text-sm p-1.5 dark:hover:bg-zinc-600 dark:hover:text-white transition-all"
+        >
+          <svg
+            className="w-2.5 h-2.5"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 14 14"
+          >
+            <path
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"
+            />
+          </svg>
+          <span className="sr-only">Close</span>
+        </button>
+      </div>
+    </div>
+  )
+}

rooch-portal-v1/src/components/ui/progress.tsx

@@ -15,7 +15,7 @@ const Progress = React.forwardRef<
     {...props}
   >
     <ProgressPrimitive.Indicator
-      className="h-full w-full flex-1 bg-gradient-to-r bg-clip-padding font-black from-teal-500 via-purple-500 to-orange-500 transition-all"
+      className="h-full w-full flex-1 bg-blue-500 transition-all"
       style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
     />
   </ProgressPrimitive.Root>

rooch-portal-v1/src/components/wallet-connect.tsx

@@ -59,14 +59,14 @@ export const WalletConnect = () => {
   return (
     <>
       <Button
-        variant="secondary"
+        variant="default"
         size="default"
-        className="md:p-3 rounded-lg ml-2 h-auto md:h-9 p-2"
+        className="rounded-lg ml-2 h-auto shadow-custom bg-white hover:bg-zinc-200 dark:bg-zinc-800 dark:hover:bg-zinc-800/75 dark:shadow-muted/80"
         onClick={handleConnectWallet}
       >
-        <div className="flex items-center justify-center gap-x-2 ">
-          <Wallet className="h-[1rem] w-[1rem] md:h-[1.2rem] md:w-[1.2rem] rotate-0 scale-100 transition-all text-teal-600" />
-          <div className="flex items-center justify-center gap-x-1 bg-gradient-to-r bg-clip-text font-black dark:from-teal-500 dark:via-purple-500 dark:to-orange-500 text-transparent from-teal-600 via-purple-600 to-orange-600">
+        <div className="flex items-center justify-center gap-x-2">
+          <Wallet className="h-[1rem] w-[1rem] md:h-[1.2rem] md:w-[1.2rem] rotate-0 scale-100 transition-all text-teal-600 dark:text-teal-400" />
+          <div className="flex items-center justify-center gap-x-1 bg-gradient-to-r bg-clip-text font-black text-transparent from-teal-600 via-purple-600 to-orange-600 dark:from-teal-400 dark:via-purple-400 dark:to-orange-400">
             {account === null ? 'Connect Wallet' : formatAddress(account?.address)}
           </div>
         </div>

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

@@ -1,4 +1,4 @@
-import { AppItem } from './components/app-item'
+import { AppsItem } from './components/apps-item'
 
 const mockApps = [
   {
@@ -71,7 +71,7 @@ export const AppsLayout = () => {
       {/* AppItem */}
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 w-full place-items-center">
         {mockApps.map((app) => (
-          <AppItem
+          <AppsItem
             key={app.id}
             id={app.id}
             name={app.name}

rooch-portal-v1/src/pages/apps/components/app-item.tsx → rooch-portal-v1/src/pages/apps/components/apps-item.tsx

@@ -13,7 +13,7 @@ import {
 } from '@/components/ui/card'
 import { Send } from 'lucide-react'
 
-export const AppItem = ({ id, name, description, profileUrl, logoUrl, type }: AppItemProps) => {
+export const AppsItem = ({ id, name, description, profileUrl, logoUrl, type }: AppItemProps) => {
   return (
     <Card
       key={id}
@@ -52,11 +52,7 @@ export const AppItem = ({ id, name, description, profileUrl, logoUrl, type }: Ap
         </div>
       </CardContent>
       <CardFooter className="p-4">
-        <Button
-          variant="default"
-          size="default"
-          className="w-full text-white bg-blue-500 hover:bg-blue-600 font-semibold"
-        >
+        <Button variant="default" size="default" className="w-full">
           <div className="flex items-center justify-center gap-x-2">
             <Send className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all" />
             {type}

rooch-portal-v1/src/pages/assets/assets-details/assets-details.tsx

@@ -0,0 +1,58 @@
+import { useState } from 'react'
+import { TabItem } from '@/common/interface'
+import { AssetsCoin } from './tabs/coin/assets-coin'
+import { AssetsNft } from './tabs/nft/assets-nft'
+import { AssetsSft } from './tabs/sft/assets-sft'
+import { AssetsIndexedAssets } from './tabs/indexed-assets/assets-indexed-assets'
+
+const assetsTabItems: TabItem[] = [
+  { id: 'coin', label: 'Coin' },
+  { id: 'nft', label: 'NFT' },
+  { id: 'sft', label: 'SFT' },
+  { id: 'indexed_assets', label: 'Indexed Assets' },
+]
+
+export const AssetsDetails = () => {
+  const [activeId, setActiveId] = useState<string>('coin')
+
+  const handleTabClick = (id: string) => {
+    setActiveId(id)
+  }
+
+  const renderTabContent = () => {
+    switch (activeId) {
+      case 'coin':
+        return <AssetsCoin />
+      case 'nft':
+        return <AssetsNft />
+      case 'sft':
+        return <AssetsSft />
+      case 'indexed_assets':
+        return <AssetsIndexedAssets />
+      default:
+        return <AssetsCoin />
+    }
+  }
+
+  return (
+    <div>
+      <nav className="flex space-x-4 border-b border-accent dark:border-accent/75">
+        {assetsTabItems.map((item) => (
+          <button
+            key={item.id}
+            className={`px-3 py-2 ${
+              activeId === item.id
+                ? 'border-b-2 border-blue-500 text-blue-500'
+                : 'border-b-2 border-transparent text-muted-foreground'
+            } hover:text-blue-500 transition-all`}
+            onClick={() => handleTabClick(item.id)}
+          >
+            <p className="font-semibold text-sm">{item.label}</p>
+          </button>
+        ))}
+      </nav>
+
+      <div className="mt-4">{renderTabContent()}</div>
+    </div>
+  )
+}

rooch-portal-v1/src/pages/assets/components/assets-indexed-assets.tsx → rooch-portal-v1/src/pages/assets/assets-details/tabs/indexed-assets/assets-indexed-assets.tsx

@@ -1,5 +1,5 @@
-import { IndexedAssetsBTC } from './indexed-assets-btc'
-import { IndexedAssetsOrdi } from './indexed-assets-ordi'
+import { IndexedAssetsBTC } from './components/indexed-assets-btc'
+import { IndexedAssetsOrdi } from './components/indexed-assets-ordi'
 
 export const AssetsIndexedAssets = () => {
   return (

rooch-portal-v1/src/pages/assets/components/indexed-assets-btc.tsx → rooch-portal-v1/src/pages/assets/assets-details/tabs/indexed-assets/components/indexed-assets-btc.tsx

@@ -3,15 +3,15 @@ import { Card, CardContent, CardHeader } from '@/components/ui/card'
 export const IndexedAssetsBTC = () => {
   return (
     <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4">
-      <Card className="rounded-lg border border-gray-200 dark:border-gray-700 dark:bg-zinc-800/90 dark:hover:border-primary/20 hover:shadow-md overflow-hidden">
+      <Card className="w-full transition-all border-border/40 dark:bg-zinc-800/90 dark:hover:border-primary/20 hover:shadow-md overflow-hidden">
         <CardHeader className="flex items-center justify-center">
           <h3 className="text-xl md:text-2xl">UTXO #123</h3>
         </CardHeader>
         <CardContent className="flex items-center justify-center text-sm md:text-base">
           Amount 1,234
         </CardContent>
       </Card>
-      <Card className="rounded-lg border border-gray-200 dark:border-gray-700 dark:bg-zinc-800/90 dark:hover:border-primary/20 hover:shadow-md overflow-hidden">
+      <Card className="w-full transition-all border-border/40 dark:bg-zinc-800/90 dark:hover:border-primary/20 hover:shadow-md overflow-hidden">
         <CardHeader className="flex items-center justify-center">
           <h3 className="text-xl md:text-2xl">UTXO #456</h3>
         </CardHeader>

rooch-portal-v1/src/pages/assets/components/indexed-assets-ordi.tsx → rooch-portal-v1/src/pages/assets/assets-details/tabs/indexed-assets/components/indexed-assets-ordi.tsx

@@ -3,15 +3,15 @@ import { Card, CardContent, CardHeader } from '@/components/ui/card'
 export const IndexedAssetsOrdi = () => {
   return (
     <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4">
-      <Card className="rounded-lg border border-gray-200 dark:border-gray-700 dark:bg-zinc-800/90 dark:hover:border-primary/20 hover:shadow-md overflow-hidden">
+      <Card className="w-full transition-all border-border/40 dark:bg-zinc-800/90 dark:hover:border-primary/20 hover:shadow-md overflow-hidden">
         <CardHeader className="flex items-center justify-center">
           <h3 className="text-xl md:text-2xl">UTXO #123</h3>
         </CardHeader>
         <CardContent className="flex items-center justify-center text-sm md:text-base">
           Amount 1,234
         </CardContent>
       </Card>
-      <Card className="rounded-lg border border-gray-200 dark:border-gray-700 dark:bg-zinc-800/90 dark:hover:border-primary/20 hover:shadow-md overflow-hidden">
+      <Card className="w-full transition-all border-border/40 dark:bg-zinc-800/90 dark:hover:border-primary/20 hover:shadow-md overflow-hidden">
         <CardHeader className="flex items-center justify-center">
           <h3 className="text-xl md:text-2xl">UTXO #456</h3>
         </CardHeader>

rooch-portal-v1/src/pages/assets/components/assets-nft.tsx → rooch-portal-v1/src/pages/assets/assets-details/tabs/nft/assets-nft.tsx

@@ -1,4 +1,4 @@
-import { NftCard } from './nft-card'
+import { NftCard } from './components/nft-card'
 
 export const AssetsNft = () => {
   return (

rooch-portal-v1/src/pages/assets/components/nft-card.tsx → rooch-portal-v1/src/pages/assets/assets-details/tabs/nft/components/nft-card.tsx

@@ -15,7 +15,7 @@ import { AspectRatio } from '@/components/ui/aspect-ratio'
 import { ArrowLeft, Copy } from 'lucide-react'
 
 import { nftData } from '@/common/constant'
-import { formatAddress } from '../../../utils/format'
+import { formatAddress } from '../../../../../../utils/format'
 
 export const NftCard = () => {
   const [modalOpen, setModalOpen] = useState(false)

rooch-portal-v1/src/pages/assets/components/assets-sft.tsx → rooch-portal-v1/src/pages/assets/assets-details/tabs/sft/assets-sft.tsx

@@ -1,12 +1,12 @@
-import { SftCard } from './sft-card'
-import { SftTabHeader } from './sft-tab-header'
+import { SftCard } from './components/sft-card'
+// import { SftTabHeader } from './components/sft-tab-header'
 
 export const AssetsSft = () => {
   return (
     <>
-      <div>
+      {/* <div>
         <SftTabHeader />
-      </div>
+      </div> */}
       <div className="grid grid-cols-2 md:grid-cols-2 lg:grid-cols-4 gap-4 w-full place-items-start mt-2">
         <SftCard />
       </div>

rooch-portal-v1/src/pages/assets/components/sft-card-headers.tsx → rooch-portal-v1/src/pages/assets/assets-details/tabs/sft/components/sft-card-header.tsx

@@ -1,6 +1,6 @@
 import { Badge } from '@/components/ui/badge'
 
-export const SftCardHeaders = () => {
+export const SftCardHeader = () => {
   return (
     <div className="flex items-center justify-between">
       <Badge variant="secondary" className="rounded-lg bg-amber-500 text-white hover:bg-amber-500">

rooch-portal-v1/src/pages/assets/components/sft-card.tsx → rooch-portal-v1/src/pages/assets/assets-details/tabs/sft/components/sft-card.tsx

@@ -1,7 +1,7 @@
 import { Card, CardContent, CardFooter, CardHeader } from '@/components/ui/card'
 import { SftCardButtons } from './sft-card-buttons'
 import { SftCardContents } from './sft-card-contents'
-import { SftCardHeaders } from './sft-card-headers'
+import { SftCardHeader } from './sft-card-header'
 
 export const SftCard = () => {
   const cards = [1, 2, 3, 4, 5, 6, 7, 8]
@@ -14,7 +14,7 @@ export const SftCard = () => {
           className="w-full transition-all border-border/40 dark:bg-zinc-800/90 dark:hover:border-primary/20 hover:shadow-md overflow-hidden"
         >
           <CardHeader className="py-4 px-2 md:px-4">
-            <SftCardHeaders />
+            <SftCardHeader />
           </CardHeader>
           <CardContent className="p-0 flex items-center justify-center h-[80px]">
             <SftCardContents />

rooch-portal-v1/src/pages/assets/assets-layout.tsx

@@ -1,11 +1,11 @@
-import { AssetsTabs } from './components/assets-tabs'
-import { ProfileCard } from './components/profile-card'
+import { AssetsDetails } from './assets-details/assets-details'
+import { ProfileCard } from './profile-card/profile-card'
 
 export const AssetsLayout = () => {
   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">
       <ProfileCard />
-      <AssetsTabs />
+      <AssetsDetails />
     </div>
   )
 }

rooch-portal-v1/src/pages/dashboard-layout.tsx

@@ -1,17 +1,34 @@
 import { MainContent } from '../components/main-content'
 import { Navbar } from '../components/navbar'
 import { Sidebar } from '../components/sidebar'
+import { Banner } from '../components/banner'
+import { useState } from 'react'
 
 export const DashboardLayout = () => {
+  const [isBannerVisible, setIsBannerVisible] = useState(true)
+
+  const handleCloseBanner = () => {
+    setIsBannerVisible(false)
+  }
+
   return (
     <div className="h-full scroll-smooth font-sans">
-      <div className="h-[56px] md:h-[64px] md:pl-60 fixed inset-y-0 w-full z-50">
+      {isBannerVisible && <Banner onClose={handleCloseBanner} />}
+      <div
+        className={`fixed inset-x-0 top-0 w-full z-40 ${isBannerVisible ? 'pt-[37px]' : 'pt-0'}`}
+      >
         <Navbar />
       </div>
-      <div className="hidden md:flex h-full w-60 flex-col fixed inset-y-0 z-50">
+      <div
+        className={`hidden md:flex h-full w-60 flex-col fixed inset-y-0 z-50 ${
+          isBannerVisible ? 'pt-[37px]' : 'pt-0'
+        }`}
+      >
         <Sidebar onClose={() => {}} />
       </div>
-      <main className="md:pl-60 pt-[64px] h-full w-full overflow-y-auto">
+      <main
+        className={`md:pl-60 h-full w-full overflow-y-auto ${isBannerVisible ? 'pt-32' : ' pt-20'}`}
+      >
         <MainContent />
       </main>
     </div>