Merge pull request #3 from 0xjojo1/main

update

Author: 0xjojo1

app/assets/page.tsx

@@ -1,15 +1,15 @@
 'use client';
 
 import { PageContainer } from '@/components/Layout/PageContainer';
-import { useSelectedSafeAddress } from '@/features/safe-account/providers/safe-account-provider';
 import { Card, CardContent } from '@/components/ui/card';
 import { Coins } from 'lucide-react';
 import { AssetsHeader, AssetsList, TopAssets } from '@/components/Assets';
+import { useSafeAccount } from '@/features/safe-sdk/hooks/use-safe-account';
 
 export default function AssertPage() {
-  const { selectedSafeAddress } = useSelectedSafeAddress();
+  const { selectedAddress } = useSafeAccount();
 
-  if (!selectedSafeAddress) {
+  if (!selectedAddress) {
     return (
       <PageContainer>
         <Card>

app/client-layout.tsx

@@ -4,15 +4,15 @@ import { Toaster } from 'sonner';
 import { SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar';
 import { AppSidebar } from '@/components/Sidebar/AppSiderbar';
 import { AppBreadcrumb } from '@/components/Breadcrumb/AppBreadcrumb';
-import { SafeAccountProvider } from '@/features/safe-account/providers/safe-account-provider';
+import { SafeSdkProvider } from '@/features/safe-sdk/providers/safe-sdk-provider';
 import AuthLayout from './auth-layout';
 import Web3Layout from './web3-layout';
 
 const ClientRootLayout = ({ children }: { children: React.ReactNode }) => {
   return (
     <div className='h-full'>
       <Web3Layout>
-        <SafeAccountProvider>
+        <SafeSdkProvider>
           <SidebarProvider>
             <AppSidebar />
             <main className='flex flex-col w-full h-full overflow-hidden relative'>
@@ -26,7 +26,7 @@ const ClientRootLayout = ({ children }: { children: React.ReactNode }) => {
             </main>
           </SidebarProvider>
           <Toaster />
-        </SafeAccountProvider>
+        </SafeSdkProvider>
       </Web3Layout>
     </div>
   );

app/transactions/history/page.tsx

@@ -1,14 +1,15 @@
 'use client';
 
-import { useCurrentSafeClient, useSelectedSafeAddress } from '@/features/safe-account/providers/safe-account-provider';
 import { useEffect, useState, useCallback } from 'react';
 import { DataTable } from '@/components/DataTable/data-table';
 import { transactionColumns } from '@/components/DataTable/transaction-columns';
 import { PageContainer } from '@/components/Layout/PageContainer';
 import { TransactionService } from '@/services/transactions/TransactionService';
-import { UnifiedTransaction } from '@/types/transactions';
+import { UnifiedTransaction } from '@/features/safe-sdk/types/transactions';
 import { Alert, AlertDescription } from '@/components/ui/alert';
 import { Loader2, AlertCircle } from 'lucide-react';
+import { useSafeAccount } from '@/features/safe-sdk/hooks/use-safe-account';
+import { useSafeClient } from '@/features/safe-sdk/hooks/use-safe-client';
 
 export default function TransactionsPage() {
   // State for transaction data, loading, error, and pagination
@@ -21,20 +22,20 @@ export default function TransactionsPage() {
     total: 0,
   });
 
-  const safeClient = useCurrentSafeClient();
-  const { selectedSafeAddress } = useSelectedSafeAddress();
+  const safeClient = useSafeClient();
+  const { selectedSafeAccountAddress } = useSafeAccount();
 
   // Fetch transactions from the API
   const fetchTransactions = useCallback(async () => {
-    if (!safeClient?.apiKit || !selectedSafeAddress) {
+    if (!safeClient?.apiKit || !selectedSafeAccountAddress) {
       return;
     }
 
     setIsLoading(true);
     setError(null);
 
     try {
-      const response = await TransactionService.getAllTransactions(safeClient.apiKit, selectedSafeAddress, {
+      const response = await TransactionService.getAllTransactions(safeClient.apiKit, selectedSafeAccountAddress, {
         limit: pagination.limit,
         offset: pagination.offset,
       });
@@ -51,7 +52,7 @@ export default function TransactionsPage() {
     } finally {
       setIsLoading(false);
     }
-  }, [safeClient?.apiKit, selectedSafeAddress, pagination.limit, pagination.offset]);
+  }, [safeClient?.apiKit, selectedSafeAccountAddress, pagination.limit, pagination.offset]);
 
   // Refetch transactions when dependencies change
   useEffect(() => {
@@ -61,10 +62,10 @@ export default function TransactionsPage() {
   // Reset pagination offset when Safe address changes
   useEffect(() => {
     setPagination((prev) => ({ ...prev, offset: 0 }));
-  }, [selectedSafeAddress]);
+  }, [selectedSafeAccountAddress]);
 
   // Show alert if no Safe wallet is selected
-  if (!selectedSafeAddress) {
+  if (!selectedSafeAccountAddress) {
     return (
       <PageContainer>
         <Alert>

app/transactions/new/page.tsx

@@ -3,13 +3,13 @@
 import { PageContainer } from '@/components/Layout/PageContainer';
 import { Card, CardContent } from '@/components/ui/card';
 import { Coins } from 'lucide-react';
-import { useSelectedSafeAddress } from '@/features/safe-account/providers/safe-account-provider';
 import TransactionStepper from '@/features/transactions/components/TransactionStepper';
+import { useSafeAccount } from '@/features/safe-sdk/hooks/use-safe-account';
 
 export default function NewTransactionPage() {
-  const { selectedSafeAddress } = useSelectedSafeAddress();
+  const { selectedSafeAccountAddress } = useSafeAccount();
 
-  if (!selectedSafeAddress) {
+  if (!selectedSafeAccountAddress) {
     return (
       <PageContainer>
         <Card className='max-w-md mx-auto'>

app/transactions/queue/page.tsx

@@ -2,17 +2,18 @@
 
 import { PageContainer } from '@/components/Layout/PageContainer';
 import { TransactionsQueue } from '@/components/Transactions/TransactionsQueue';
-import { useSelectedSafeAddress } from '@/features/safe-account/providers/safe-account-provider';
 import { Card, CardContent } from '@/components/ui/card';
 import { Clock } from 'lucide-react';
 import { useRouter } from 'next/navigation';
 import { SafeMultisigTransactionResponse } from '@safe-global/types-kit';
+import { useSafeAccount } from '@/features/safe-sdk/hooks/use-safe-account';
 
 export default function TransactionsQueuePage() {
   const router = useRouter();
-  const { selectedSafeAddress } = useSelectedSafeAddress();
 
-  if (!selectedSafeAddress) {
+  const { selectedSafeAccountAddress } = useSafeAccount();
+
+  if (!selectedSafeAccountAddress) {
     return (
       <PageContainer>
         <Card>

app/web3-layout.tsx

@@ -1,20 +1,28 @@
 'use client';
 
-import onboard from '@/lib/onboard';
-import { Web3OnboardProvider } from '@web3-onboard/react';
+import onboard from '@/features/onboard/lib';
+import { useWagmiConfig, Web3OnboardProvider } from '@web3-onboard/react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Config, WagmiProvider } from 'wagmi';
+import { config } from '@/lib/wagmi-config';
 
 const queryClient = new QueryClient();
 
-export default function Web3Layout({ children }: { children: React.ReactNode }) {
-  const wagmiConfig = onboard.state.get().wagmiConfig as Config;
-
+function WagmiGate({ children }: { children: React.ReactNode }) {
+  const cfg = useWagmiConfig();
+  const finalCfg = cfg ?? config;
+  const key = cfg ? 'onboard' : 'readonly';
   return (
-    <WagmiProvider config={wagmiConfig}>
-      <QueryClientProvider client={queryClient}>
-        <Web3OnboardProvider web3Onboard={onboard}>{children}</Web3OnboardProvider>
-      </QueryClientProvider>
+    <WagmiProvider key={key} config={finalCfg as Config}>
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
     </WagmiProvider>
   );
 }
+
+export default function Web3Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <Web3OnboardProvider web3Onboard={onboard}>
+      <WagmiGate>{children}</WagmiGate>
+    </Web3OnboardProvider>
+  );
+}

components/AccountSelect/AccountSelectDialog.tsx

@@ -9,7 +9,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, SelectSe
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import { Loader2, Search, Eye, EyeOff, AlertTriangle, Wallet, X } from 'lucide-react';
 import { AccountTable } from '@/components/AccountSelect/AccountTable';
-import { weiToEth } from '@/services/onboard/account/utils';
+import { weiToEth } from '@/features/onboard/services/account/utils';
 
 import type { ScanAccountsOptions, SelectAccountOptions, Account, AccountsList } from '@web3-onboard/hw-common';
 

components/AccountSelect/AccountTable.tsx

@@ -6,7 +6,7 @@ import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import { Check, Copy, ExternalLink, Circle, CheckCircle2 } from 'lucide-react';
-import { weiToEth } from '@/services/onboard/account/utils';
+import { weiToEth } from '@/features/onboard/services/account/utils';
 import type { Account } from '@web3-onboard/hw-common';
 
 interface AccountTableProps {

components/Assets/AssetCard.tsx

@@ -1,6 +1,6 @@
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Badge } from '@/components/ui/badge';
-import { SafeBalance } from '@/types/extendedSafeTransactionServiceTypes';
+import { SafeBalance } from '@/features/safe-sdk/types/extendedSafeTransactionServiceTypes';
 import { formatBalance, getTokenSymbol, getTokenName, getTokenIcon } from './utils';
 import { ReactNode } from 'react';
 

components/Assets/AssetsHeader.tsx

@@ -2,18 +2,18 @@
 
 import { Button } from '@/components/ui/button';
 import { RefreshCw } from 'lucide-react';
-import { useSelectedSafeAddress } from '@/features/safe-account/providers/safe-account-provider';
-import { useBalance } from '@/hooks/safe/useBalance';
+import { useBalance } from '@/features/safe-sdk/hooks/use-safe-account-balance';
+import { useSafeAccount } from '@/features/safe-sdk/hooks/use-safe-account';
 
 export function AssetsHeader() {
-  const { selectedSafeAddress } = useSelectedSafeAddress();
+  const { selectedSafeAccountAddress } = useSafeAccount();
   const { loading, fetchBalances } = useBalance();
 
   return (
     <div className='flex items-center justify-between'>
       <div>
         <h1 className='text-2xl font-bold'>Assets</h1>
-        <p className='text-muted-foreground'>Safe: {selectedSafeAddress}</p>
+        <p className='text-muted-foreground'>Safe: {selectedSafeAccountAddress}</p>
       </div>
       <Button variant='outline' size='sm' onClick={fetchBalances} disabled={loading}>
         <RefreshCw className={`h-4 w-4 mr-2 ${loading ? 'animate-spin' : ''}`} />