fix: implement withdrawal functionality

- Add disableForcedWithdrawal, enableForcedWithdrawal, and forcedWithdrawal functions - Update button text and styling for withdrawal actions - Fix loading states and error handling
Uniswap · Dec 7, 2024 · cac7a8d · cac7a8d
1 parent 3f5c60d
commit cac7a8d
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 38 deletions.
diff --git a/frontend/src/components/BalanceDisplay.tsx b/frontend/src/components/BalanceDisplay.tsx
@@ -6,6 +6,8 @@ import { formatUnits } from 'viem';
 import { Transfer } from './Transfer';
 import { InitiateForcedWithdrawalDialog } from './InitiateForcedWithdrawalDialog';
 import { ForcedWithdrawalDialog } from './ForcedWithdrawalDialog';
+import { useCompact } from '../hooks/useCompact';
+import { useNotification } from '../hooks/useNotification';
 
 // Interface for the selected lock data needed by ForcedWithdrawalDialog
 interface SelectedLockData {
@@ -48,14 +50,46 @@ export function BalanceDisplay(): JSX.Element | null {
   const { balances, error, isLoading } = useBalances();
   const { data: resourceLocksData, isLoading: resourceLocksLoading } =
     useResourceLocks();
+  const { disableForcedWithdrawal } = useCompact();
+  const { showNotification } = useNotification();
   const [isWithdrawalDialogOpen, setIsWithdrawalDialogOpen] = useState(false);
   const [isExecuteDialogOpen, setIsExecuteDialogOpen] = useState(false);
   const [selectedLockId, setSelectedLockId] = useState<string>('');
   const [selectedLock, setSelectedLock] = useState<SelectedLockData | null>(
     null
   );
+  const [isWithdrawalLoading, setIsWithdrawalLoading] = useState(false);
   const [, setUpdateTrigger] = useState(0);
 
+  const handleDisableWithdrawal = async (lockId: string) => {
+    if (!lockId) return;
+
+    try {
+      setIsWithdrawalLoading(true);
+      await disableForcedWithdrawal({
+        args: [BigInt(lockId)],
+      });
+
+      showNotification({
+        type: 'success',
+        title: 'Forced Withdrawal Disabled',
+        message: 'Your forced withdrawal has been disabled',
+      });
+    } catch (error) {
+      console.error('Error disabling forced withdrawal:', error);
+      showNotification({
+        type: 'error',
+        title: 'Error',
+        message:
+          error instanceof Error
+            ? error.message
+            : 'Failed to disable forced withdrawal',
+      });
+    } finally {
+      setIsWithdrawalLoading(false);
+    }
+  };
+
   // Update countdown every second
   useEffect(() => {
     const timer = setInterval(() => {
@@ -265,6 +299,7 @@ export function BalanceDisplay(): JSX.Element | null {
                       onDisableForceWithdraw={() => {
                         setSelectedLockId(balance.lockId);
                         setSelectedLock(null);
+                        handleDisableWithdrawal(balance.lockId);
                       }}
                     />
                     {canExecuteWithdrawal && (

diff --git a/frontend/src/components/Transfer.tsx b/frontend/src/components/Transfer.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { useAccount, useChainId } from 'wagmi';
 import { switchNetwork } from '@wagmi/core';
 import { useNotification } from '../hooks/useNotification';
@@ -19,6 +20,7 @@ export function Transfer({
   const { address } = useAccount();
   const currentChainId = useChainId();
   const { showNotification } = useNotification();
+  const [isWithdrawalLoading, setIsWithdrawalLoading] = useState(false);
 
   const handleAction = async (
     action: 'transfer' | 'withdraw' | 'force' | 'disable'
@@ -62,7 +64,9 @@ export function Transfer({
     if (action === 'force') {
       onForceWithdraw();
     } else if (action === 'disable') {
+      setIsWithdrawalLoading(true);
       onDisableForceWithdraw();
+      setIsWithdrawalLoading(false);
     }
   };
 
@@ -92,9 +96,10 @@ export function Transfer({
         {withdrawalStatus !== 0 && (
           <button
             onClick={() => handleAction('disable')}
-            className="mt-2 py-2 px-4 bg-[#3B82F6] text-white rounded-lg font-medium hover:opacity-90 transition-colors"
+            disabled={isWithdrawalLoading}
+            className="mt-2 py-2 px-4 bg-blue-500 text-white rounded-lg font-medium hover:bg-blue-600 transition-colors disabled:opacity-50"
           >
-            Disable Force Withdraw
+            {isWithdrawalLoading ? 'Disabling...' : 'Disable Forced Withdrawal'}
           </button>
         )}
       </div>

diff --git a/frontend/src/hooks/useCompact.ts b/frontend/src/hooks/useCompact.ts
@@ -110,7 +110,7 @@ export function useCompact() {
     }
   };
 
-  const enableForcedWithdrawal = async (params: WithdrawalParams) => {
+  const disableForcedWithdrawal = async ({ args }: WithdrawalParams) => {
     if (!isSupportedChain(chainId)) {
       throw new Error('Unsupported chain');
     }
@@ -123,48 +123,36 @@ export function useCompact() {
     try {
       const hash = await writeContract({
         address: COMPACT_ADDRESS as `0x${string}`,
-        abi: [COMPACT_ABI[2]] as const,
-        functionName: 'enableForcedWithdrawal',
-        args: params.args as [bigint],
-        account: address,
-        chain,
-      });
-
-      return hash;
-    } catch (error) {
-      console.error('Enable forced withdrawal error:', error);
-      throw error;
-    }
-  };
-
-  const disableForcedWithdrawal = async (params: WithdrawalParams) => {
-    if (!isSupportedChain(chainId)) {
-      throw new Error('Unsupported chain');
-    }
-
-    const chain = chains[chainId];
-    if (!chain) {
-      throw new Error('Chain configuration not found');
-    }
-
-    try {
-      const hash = await writeContract({
-        address: COMPACT_ADDRESS as `0x${string}`,
-        abi: [COMPACT_ABI[3]] as const,
+        abi: [
+          COMPACT_ABI.find((x) => x.name === 'disableForcedWithdrawal'),
+        ] as const,
         functionName: 'disableForcedWithdrawal',
-        args: params.args as [bigint],
+        args,
         account: address,
         chain,
       });
-
+      showNotification({
+        type: 'success',
+        title: 'Transaction Submitted',
+        message:
+          'Your disable forced withdrawal transaction has been submitted.',
+      });
       return hash;
     } catch (error) {
       console.error('Disable forced withdrawal error:', error);
+      showNotification({
+        type: 'error',
+        title: 'Error',
+        message:
+          error instanceof Error
+            ? error.message
+            : 'Failed to disable forced withdrawal',
+      });
       throw error;
     }
   };
 
-  const forcedWithdrawal = async (params: WithdrawalParams) => {
+  const forcedWithdrawal = async ({ args }: WithdrawalParams) => {
     if (!isSupportedChain(chainId)) {
       throw new Error('Unsupported chain');
     }
@@ -177,23 +165,34 @@ export function useCompact() {
     try {
       const hash = await writeContract({
         address: COMPACT_ADDRESS as `0x${string}`,
-        abi: [COMPACT_ABI[4]] as const,
+        abi: [COMPACT_ABI.find((x) => x.name === 'forcedWithdrawal')] as const,
         functionName: 'forcedWithdrawal',
-        args: params.args as [bigint, `0x${string}`, bigint],
+        args,
         account: address,
         chain,
       });
-
+      showNotification({
+        type: 'success',
+        title: 'Transaction Submitted',
+        message: 'Your forced withdrawal transaction has been submitted.',
+      });
       return hash;
     } catch (error) {
       console.error('Forced withdrawal error:', error);
+      showNotification({
+        type: 'error',
+        title: 'Error',
+        message:
+          error instanceof Error
+            ? error.message
+            : 'Failed to execute forced withdrawal',
+      });
       throw error;
     }
   };
 
   return {
     deposit,
-    enableForcedWithdrawal,
     disableForcedWithdrawal,
     forcedWithdrawal,
     isSupported: isSupportedChain(chainId),