feat: add queue page

0xjojo1 · 0xjojo1 · commit 33a255e674c1 · 2025-08-22T14:04:49.000+08:00
diff --git a/app/transactions/queue/page.tsx b/app/transactions/queue/page.tsx
@@ -1,3 +1,42 @@
+'use client';
+
+import { PageContainer } from '@/components/Layout/PageContainer';
+import { TransactionsQueue } from '@/components/Transactions/TransactionsQueue';
+import { useSelectedSafeAddress } from '@/providers/SafeProvider';
+import { Card, CardContent } from '@/components/ui/card';
+import { Clock } from 'lucide-react';
+
 export default function TransactionsQueuePage() {
-  return <div>TransactionsQueuePage</div>;
+  const { selectedSafeAddress } = useSelectedSafeAddress();
+
+  if (!selectedSafeAddress) {
+    return (
+      <PageContainer>
+        <Card>
+          <CardContent className='flex items-center justify-center py-12'>
+            <div className='text-center'>
+              <Clock className='h-12 w-12 text-muted-foreground mx-auto mb-4' />
+              <h3 className='text-lg font-medium mb-2'>No Safe Selected</h3>
+              <p className='text-muted-foreground'>Please select a Safe to view its pending transactions</p>
+            </div>
+          </CardContent>
+        </Card>
+      </PageContainer>
+    );
+  }
+
+  return (
+    <PageContainer>
+      <div className='space-y-6'>
+        <div>
+          <h1 className='text-2xl font-bold tracking-tight'>Transaction Queue</h1>
+          <p className='text-muted-foreground'>
+            Review and manage pending transactions that require confirmation or execution.
+          </p>
+        </div>
+
+        <TransactionsQueue />
+      </div>
+    </PageContainer>
+  );
 }
diff --git a/components/BlockChainNetworkIcon.tsx b/components/BlockChainNetworkIcon.tsx
@@ -17,38 +17,40 @@ export function getNetworkIcon({
   networkId,
   variant,
   size,
+  color,
 }: {
   networkId: string;
   variant: 'branded' | 'mono' | 'background';
   size: number;
+  color?: string;
 }) {
   switch (networkId) {
     case 'ethereum':
-      return <NetworkEthereum variant={variant} size={size} />;
+      return <NetworkEthereum variant={variant} size={size} color={color} />;
     case 'polygon':
-      return <NetworkPolygon variant={variant} size={size} />;
+      return <NetworkPolygon variant={variant} size={size} color={color} />;
     case 'arbitrum':
-      return <NetworkArbitrumOne variant={variant} size={size} />;
+      return <NetworkArbitrumOne variant={variant} size={size} color={color} />;
     case 'optimism':
-      return <NetworkOptimism variant={variant} size={size} />;
+      return <NetworkOptimism variant={variant} size={size} color={color} />;
     case 'base':
-      return <NetworkBase variant={variant} size={size} />;
+      return <NetworkBase variant={variant} size={size} color={color} />;
     case 'bsc':
-      return <NetworkBinanceSmartChain variant={variant} size={size} />;
+      return <NetworkBinanceSmartChain variant={variant} size={size} color={color} />;
     case 'avalanche':
-      return <NetworkAvalanche variant={variant} size={size} />;
+      return <NetworkAvalanche variant={variant} size={size} color={color} />;
     case 'gnosis':
-      return <NetworkGnosis variant={variant} size={size} />;
+      return <NetworkGnosis variant={variant} size={size} color={color} />;
     case 'hemi':
-      return <NetworkHemi variant={variant} size={size} />;
+      return <NetworkHemi variant={variant} size={size} color={color} />;
     case 'linea':
-      return <NetworkLinea variant={variant} size={size} />;
+      return <NetworkLinea variant={variant} size={size} color={color} />;
     case 'berachain':
-      return <NetworkBerachain variant={variant} size={size} />;
+      return <NetworkBerachain variant={variant} size={size} color={color} />;
     case 'polygon-zkevm':
-      return <NetworkPolygonZkevm variant={variant} size={size} />;
+      return <NetworkPolygonZkevm variant={variant} size={size} color={color} />;
     case 'BaseSepolia':
-      return <NetworkBase variant={variant} size={size} />;
+      return <NetworkBase variant={variant} size={size} color={color} />;
     default:
       return null;
   }
diff --git a/components/Sidebar/AppSiderbarContent.tsx b/components/Sidebar/AppSiderbarContent.tsx
@@ -23,7 +23,6 @@ import {
   Wallet,
 } from 'lucide-react';
 import { usePathname, useRouter } from 'next/navigation';
-import SafeWalletGroup from './SafeWalletGroup';
 
 const baseItems = [
   {
diff --git a/components/Sidebar/AppSiderbarHeader.tsx b/components/Sidebar/AppSiderbarHeader.tsx
@@ -5,7 +5,7 @@ import { SafeWalletSelect } from './SafeWalletSelect';
 
 export function AppSidebarHeader() {
   return (
-    <SidebarHeader className='h-12'>
+    <SidebarHeader>
       <SafeWalletSelect />
     </SidebarHeader>
   );
diff --git a/components/Sidebar/SafeWalletSelect.tsx b/components/Sidebar/SafeWalletSelect.tsx
@@ -1,33 +1,38 @@
 'use client';
 
-import React from 'react';
-import { ChevronDown, Plus, Wallet, Shield } from 'lucide-react';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import { Button } from '@/components/ui/button';
-import { cn } from '@/lib/utils';
+import * as React from 'react';
+import { Check, ChevronsUpDown, Shield, Wallet, Plus, Smile } from 'lucide-react';
 import { useRouter } from 'next/navigation';
-import { useSelectedSafeAddress, useOwnerSafeAddress } from '@/providers/SafeProvider';
+import { cn } from '@/lib/utils';
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  DropdownMenuSeparator,
+} from '@/components/ui/dropdown-menu';
+import { SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
+import { Button } from '@/components/ui/button';
+import { useSelectedSafeAddress, useOwnerSafeAddress, useCurrentChain } from '@/providers/SafeProvider';
 import { useWallet } from '@/hooks/useWallet';
+import { getNetworkIcon } from '@/components/BlockChainNetworkIcon';
 
 export function SafeWalletSelect() {
   const { selectedSafeAddress, setSelectedSafeAddress } = useSelectedSafeAddress();
   const ownerSafeAddress = useOwnerSafeAddress();
-  const { account: eoaAddress, isConnected } = useWallet();
+  const { chainName, chainId } = useCurrentChain();
+  const { account, isConnected } = useWallet();
   const router = useRouter();
 
-  const handleSafeSelect = async (safeAddress: string) => {
+  const handleSafeSelect = (safeAddress: string) => {
     setSelectedSafeAddress(safeAddress);
   };
 
   const handleCreateSafe = () => {
     router.push('/wallets/create');
   };
 
-  const handleConnectWallet = () => {
-    // TODO: Implement wallet connection logic
-    console.log('Connect wallet clicked');
-  };
-
   const formatAddress = (address: string) => {
     return `${address.slice(0, 6)}...${address.slice(-4)}`;
   };
@@ -54,74 +59,140 @@ export function SafeWalletSelect() {
     return address.slice(2, 4).toUpperCase();
   };
 
-  // EOA not connected state
+  const getNetworkId = (chainId: number | null): string => {
+    if (!chainId) return '';
+
+    const networkMap: { [key: number]: string } = {
+      1: 'ethereum',
+      10: 'optimism',
+      56: 'bsc',
+      100: 'gnosis',
+      137: 'polygon',
+      324: 'polygon-zkevm',
+      8453: 'base',
+      42161: 'arbitrum',
+      43114: 'avalanche',
+      84532: 'BaseSepolia',
+      11155111: 'ethereum', // Sepolia uses ethereum icon
+    };
+
+    return networkMap[chainId] || '';
+  };
+
+  // Hardware wallet not connected state
   if (!isConnected) {
     return (
-      <div className='h-14 px-4 flex items-center gap-2'>
-        <Wallet className='w-4 h-4 text-muted-foreground' />
-        <span className='text-sm text-muted-foreground'>Connect Wallet to Continue</span>
-      </div>
+      <SidebarMenu>
+        <SidebarMenuItem>
+          <SidebarMenuButton size='lg' disabled>
+            <div className='bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg'>
+              <Smile className='size-4' />
+            </div>
+            <div className='flex flex-col gap-0.5 leading-none'>
+              <span className='font-medium text-sidebar-muted-foreground'>Hello</span>
+              <span className='text-xs text-sidebar-muted-foreground/70'>Nice to meet you</span>
+            </div>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      </SidebarMenu>
     );
   }
 
   // EOA connected but no Safe wallets
   if (ownerSafeAddress.length === 0) {
     return (
-      <div className='h-14 px-4 flex items-center gap-3'>
-        <div className='flex items-center gap-2'>
-          <Shield className='w-4 h-4 text-muted-foreground' />
-          <span className='text-sm text-muted-foreground'>No Safe Wallets</span>
-        </div>
-        <Button variant='outline' size='sm' onClick={handleCreateSafe} className='h-8 px-3'>
-          <Plus className='w-3 h-3 mr-1' />
-          Create
-        </Button>
-      </div>
+      <SidebarMenu>
+        <SidebarMenuItem>
+          <SidebarMenuButton size='lg' onClick={handleCreateSafe}>
+            <div className='bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg'>
+              <Shield className='size-4' />
+            </div>
+            <div className='flex flex-col gap-0.5 leading-none'>
+              <span className='font-medium'>No Safe Wallets</span>
+              <span className='text-xs text-sidebar-muted-foreground'>Create your first Safe</span>
+            </div>
+            <Plus className='ml-auto size-4' />
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      </SidebarMenu>
     );
   }
 
   // EOA connected and has Safe wallets
+  const currentSafe = selectedSafeAddress || ownerSafeAddress[0];
+
   return (
-    <Select value={selectedSafeAddress || undefined} onValueChange={handleSafeSelect}>
-      <SelectTrigger className='h-14 px-4 w-auto min-w-[200px] border-0 bg-transparent hover:bg-accent transition-colors'>
-        <div className='flex items-center gap-3'>
-          <div
-            className={cn(
-              'w-6 h-6 rounded-full flex items-center justify-center text-xs font-medium text-white',
-              getAddressColor(selectedSafeAddress || ownerSafeAddress[0])
-            )}
-          >
-            {getAddressAvatar(selectedSafeAddress || ownerSafeAddress[0])}
-          </div>
-          <div className='flex flex-col items-start'>
-            <span className='text-sm font-medium'>{formatAddress(selectedSafeAddress || ownerSafeAddress[0])}</span>
-            <span className='text-xs text-muted-foreground'>Safe Wallet</span>
-          </div>
-        </div>
-      </SelectTrigger>
-      <SelectContent>
-        {ownerSafeAddress.map((safeAddr) => (
-          <SelectItem key={safeAddr} value={safeAddr}>
-            <div className='flex items-center gap-3'>
-              <div
-                className={cn(
-                  'w-5 h-5 rounded-full flex items-center justify-center text-xs font-medium text-white',
-                  getAddressColor(safeAddr)
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size='lg'
+              className='data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground'
+            >
+              <div className='flex items-center justify-center '>
+                {getNetworkIcon({
+                  networkId: getNetworkId(chainId),
+                  variant: 'mono',
+                  size: 26,
+                }) || (
+                  <div
+                    className={cn(
+                      'flex aspect-square size-8 items-center justify-center rounded-lg text-white text-xs font-medium',
+                      getAddressColor(currentSafe)
+                    )}
+                  >
+                    {getAddressAvatar(currentSafe)}
+                  </div>
                 )}
+              </div>
+              <div className='flex flex-col gap-0.5 leading-none'>
+                <span className='font-medium'>{formatAddress(currentSafe)}</span>
+                <span className='text-xs text-sidebar-muted-foreground'>{chainName || 'Safe Wallet'}</span>
+              </div>
+              <ChevronsUpDown className='ml-auto size-4' />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent className='w-[280px]' align='start' side='right'>
+            {ownerSafeAddress.map((safeAddr) => (
+              <DropdownMenuItem
+                key={safeAddr}
+                onClick={() => handleSafeSelect(safeAddr)}
+                className='flex items-center gap-3 py-3'
               >
-                {getAddressAvatar(safeAddr)}
+                <div className='flex items-center justify-center'>
+                  {getNetworkIcon({
+                    networkId: getNetworkId(chainId),
+                    variant: 'branded',
+                    size: 30,
+                  }) || (
+                    <div
+                      className={cn(
+                        'flex aspect-square size-6 items-center justify-center rounded-full text-white text-xs font-medium',
+                        getAddressColor(safeAddr)
+                      )}
+                    >
+                      {getAddressAvatar(safeAddr)}
+                    </div>
+                  )}
+                </div>
+                <div className='flex flex-col gap-0.5'>
+                  <span className='font-medium'>{formatAddress(safeAddr)}</span>
+                  <span className='text-xs text-muted-foreground'>{chainName || 'Safe Wallet'}</span>
+                </div>
+                {safeAddr === selectedSafeAddress && <Check className='ml-auto size-4 text-primary' />}
+              </DropdownMenuItem>
+            ))}
+            <DropdownMenuSeparator />
+            <DropdownMenuItem onClick={handleCreateSafe} className='py-3'>
+              <div className='flex aspect-square size-6 items-center justify-center rounded-full bg-sidebar-muted'>
+                <Plus className='size-3' />
               </div>
-              <span>{formatAddress(safeAddr)}</span>
-            </div>
-          </SelectItem>
-        ))}
-        <div className='border-t pt-2 mt-2'>
-          <Button variant='ghost' size='sm' onClick={handleCreateSafe} className='w-full justify-start h-8'>
-            <Plus className='w-3 h-3 mr-2' />
-            Create New Safe
-          </Button>
-        </div>
-      </SelectContent>
-    </Select>
+              <span className='ml-3'>Create New Safe</span>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
   );
 }
diff --git a/components/Transactions/TransactionsQueue.tsx b/components/Transactions/TransactionsQueue.tsx
diff --git a/providers/SafeProvider.tsx b/providers/SafeProvider.tsx

Original file line number	Diff line number	Diff line change
`@@ -23,7 +23,6 @@ import {`
`23`	`23`	`Wallet,`
`24`	`24`	`} from 'lucide-react';`
`25`	`25`	`import { usePathname, useRouter } from 'next/navigation';`
`26`		`-import SafeWalletGroup from './SafeWalletGroup';`
`27`	`26`
`28`	`27`	`const baseItems = [`
`29`	`28`	`{`