feat: init transaction context

Author: 0xjojo1

features/transactions/components/AssertSelect.tsx

@@ -0,0 +1,69 @@
+import { Select, SelectItem, SelectContent, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { useSafeAccountBalance } from '@/features/safe-sdk/hooks/use-safe-account-balance';
+import { formatEther } from 'viem';
+
+interface AssertSelectProps {
+  value: string;
+  onChange: (value: string) => void;
+}
+
+export function AssertSelect({ value, onChange }: AssertSelectProps) {
+  const { balances } = useSafeAccountBalance();
+
+  const getTokenInfo = (balance: any) => {
+    if (balance.tokenAddress === null && balance.token === null) {
+      return {
+        address: 'eth',
+        name: 'ETH',
+        symbol: 'ETH',
+        logoUri: null,
+      };
+    }
+
+    return {
+      address: balance.tokenAddress,
+      name: balance.token?.name || 'Unknown Token',
+      symbol: balance.token?.symbol || '???',
+      logoUri: balance.token?.logoUri,
+    };
+  };
+
+  const formatBalance = (balance: string) => {
+    try {
+      const formatted = formatEther(BigInt(balance));
+      return parseFloat(formatted)
+        .toFixed(6)
+        .replace(/\.?0+$/, '');
+    } catch (error) {
+      console.warn('Error formatting balance:', error);
+      return '0';
+    }
+  };
+
+  return (
+    <Select value={value} onValueChange={onChange}>
+      <SelectTrigger className='w-full'>
+        <SelectValue placeholder='Select asset' />
+      </SelectTrigger>
+      <SelectContent>
+        {balances.map((balance, index) => {
+          const tokenInfo = getTokenInfo(balance);
+          const formattedBalance = formatBalance(balance.balance);
+          return (
+            <SelectItem key={tokenInfo.address || index} value={tokenInfo.address}>
+              <div className='flex items-center gap-2'>
+                <div>
+                  <div className='font-medium'>{tokenInfo.symbol}</div>
+                  <div className='text-xs text-muted-foreground'>
+                    {tokenInfo.name !== tokenInfo.symbol && <span>{tokenInfo.name} • </span>}
+                    Balance: {formattedBalance}
+                  </div>
+                </div>
+              </div>
+            </SelectItem>
+          );
+        })}
+      </SelectContent>
+    </Select>
+  );
+}