feat: add wagmi provider

Author: 0xjojo1

app/client-layout.tsx

@@ -7,29 +7,37 @@ import { AppBreadcrumb } from '@/components/Breadcrumb/AppBreadcrumb';
 import onboard from '@/lib/onboard';
 import { Web3OnboardProvider } from '@web3-onboard/react';
 import { SafeProvider } from '@/providers/SafeProvider';
-import { Separator } from '@/components/ui/separator';
 import AuthLayout from './auth-layout';
+import { config } from '@/lib/wagmi-config';
+import { WagmiProvider } from 'wagmi';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+const queryClient = new QueryClient();
 
 const ClientRootLayout = ({ children }: { children: React.ReactNode }) => {
   return (
     <div className='h-full'>
-      <Web3OnboardProvider web3Onboard={onboard}>
-        <SafeProvider>
-          <SidebarProvider>
-            <AppSidebar />
-            <main className='flex flex-col w-full h-full overflow-hidden relative'>
-              <div className='flex items-center gap-4 p-4 border-b h-12 flex-shrink-0 fixed w-full z-2 bg-background'>
-                <SidebarTrigger />
-                <AppBreadcrumb />
-              </div>
-              <div className='h-[calc(100vh-3rem)] overflow-hidden mt-12'>
-                <AuthLayout>{children}</AuthLayout>
-              </div>
-            </main>
-          </SidebarProvider>
-          <Toaster />
-        </SafeProvider>
-      </Web3OnboardProvider>
+      <WagmiProvider config={config}>
+        <QueryClientProvider client={queryClient}>
+          <Web3OnboardProvider web3Onboard={onboard}>
+            <SafeProvider>
+              <SidebarProvider>
+                <AppSidebar />
+                <main className='flex flex-col w-full h-full overflow-hidden relative'>
+                  <div className='flex items-center gap-4 p-4 border-b h-12 flex-shrink-0 fixed w-full z-2 bg-background'>
+                    <SidebarTrigger />
+                    <AppBreadcrumb />
+                  </div>
+                  <div className='h-[calc(100vh-3rem)] overflow-hidden mt-12'>
+                    <AuthLayout>{children}</AuthLayout>
+                  </div>
+                </main>
+              </SidebarProvider>
+              <Toaster />
+            </SafeProvider>
+          </Web3OnboardProvider>
+        </QueryClientProvider>
+      </WagmiProvider>
     </div>
   );
 };

app/transactions/new/page.tsx

@@ -4,7 +4,6 @@ import { PageContainer } from '@/components/Layout/PageContainer';
 import { Card, CardContent } from '@/components/ui/card';
 import { Coins } from 'lucide-react';
 import { useSelectedSafeAddress } from '@/providers/SafeProvider';
-import { TransactionProcessV2 } from '@/components/Transactions/process-v2/TransactionProcessV2';
 import { TransactionFlow } from '@/components/Transactions/TransactionFlow/TransactionFlow';
 
 export default function NewTransactionPage() {

components/Transactions/TransactionFlow/TransactionExecute.tsx

@@ -6,8 +6,8 @@ import { MetaTransactionData } from '@safe-global/types-kit';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Separator } from '@/components/ui/separator';
-import { useCurrentChain, useCurrentSafeClient } from '@/providers/SafeProvider';
-import { createPublicClient, custom } from 'viem';
+import { useCurrentSafeClient } from '@/providers/SafeProvider';
+import { createPublicClient } from 'viem';
 import { useWallet } from '@/hooks/useWallet';
 import * as chains from 'viem/chains'
 import { extractChain } from 'viem'
@@ -116,7 +116,7 @@ export function TransactionExecute({ transactionData, onComplete, onBack }: Tran
       const txResult = await safeClient.send({
         transactions: [transactionData],
         nonce,
-        gasPrice: gasPrice,
+        gasPrice: gasPrice.toString(),
       });
 
       setSignStatus('Transaction signed successfully!');