Implement basic fuel wallet withdrawal

components/Swap/Withdraw/Wallet/FuelWalletWithdrawal.tsx

@@ -0,0 +1,75 @@
+import { FC, useCallback, useState } from 'react'
+import toast from 'react-hot-toast';
+import { BackendTransactionStatus } from '../../../../lib/layerSwapApiClient';
+import useWallet from '../../../../hooks/useWallet';
+import { useSwapTransactionStore } from '../../../../stores/swapTransactionStore';
+import WalletIcon from '../../../icons/WalletIcon';
+import { WithdrawPageProps } from './WalletTransferContent';
+import { ButtonWrapper, ConnectWalletButton } from './WalletTransfer/buttons';
+import { useSettingsState } from '../../../../context/settings';
+import {
+    useWallet as useFuelWallet,
+} from '@fuels/react';
+import { bn } from 'fuels';
+
+const FuelWalletWithdrawStep: FC<WithdrawPageProps> = ({ network, callData, swapId, token, amount }) => {
+    const [loading, setLoading] = useState(false);
+    const { setSwapTransaction } = useSwapTransactionStore()
+
+    const { provider } = useWallet(network, 'withdrawal');
+    const { wallet: fuelWallet } = useFuelWallet()
+
+    const wallet = provider?.activeWallet
+    const networkName = network?.name
+
+    const { networks } = useSettingsState()
+    const networkWithTokens = networks.find(n => n.name === networkName)
+
+    const handleTransfer = useCallback(async () => {
+        setLoading(true)
+        try {
+
+            if (!fuelWallet) throw Error("Fuel wallet not connected")
+
+            // The amount of coins to transfer.
+            const bnAmount = bn(amount);
+
+            // Create a transaction request using wallet helper
+            const transactionRequest = token?.contract ? await fuelWallet.createTransfer('0x9E22044B082B1ff5B2b824De1068F9A04A02ff0E1d36807B2b9Dda8bB65071C3', bnAmount, token?.contract) : await fuelWallet.createTransfer('0x9E22044B082B1ff5B2b824De1068F9A04A02ff0E1d36807B2b9Dda8bB65071C3', bnAmount);
+
+            // Broadcast the transaction to the network
+            const transactionResponse = await fuelWallet.sendTransaction(
+                transactionRequest, // The transaction to send
+            )
+
+            if (swapId && transactionResponse) setSwapTransaction(swapId, BackendTransactionStatus.Completed, transactionResponse.id)
+
+        }
+        catch (e) {
+            if (e?.message) {
+                toast(e.message)
+                return
+            }
+        }
+        finally {
+            setLoading(false)
+        }
+    }, [swapId, callData, network, token, amount, fuelWallet])
+
+    if (!fuelWallet) {
+        return <ConnectWalletButton />
+    }
+
+    return (
+        <div className="w-full space-y-5 flex flex-col justify-between h-full text-primary-text">
+            {
+                fuelWallet &&
+                <ButtonWrapper isDisabled={!!loading} isSubmitting={!!loading} onClick={handleTransfer} icon={<WalletIcon className="stroke-2 w-6 h-6" aria-hidden="true" />} >
+                    Send from wallet
+                </ButtonWrapper>
+            }
+        </div>
+    )
+}
+
+export default FuelWalletWithdrawStep;

components/Swap/Withdraw/Wallet/WalletTransferContent.tsx

@@ -10,6 +10,7 @@ import LoopringWalletWithdraw from "./Loopring";
 import { Network, Token } from "../../../../Models/Network";
 import TonWalletWithdrawStep from "./TonWalletWithdraw";
 import ParadexWalletWithdrawStep from "./paradex/index";
+import FuelWalletWithdrawStep from "./FuelWalletWithdrawal";
 
 //TODO have separate components for evm and none_evm as others are sweepless anyway
 export const WalletTransferContent: FC = () => {
@@ -43,6 +44,9 @@ export const WalletTransferContent: FC = () => {
     const sourceIsParadex = source_network_internal_name?.toUpperCase() === KnownInternalNames.Networks.ParadexMainnet?.toUpperCase()
         || source_network_internal_name?.toUpperCase() === KnownInternalNames.Networks.ParadexTestnet?.toUpperCase();
 
+    const sourceIsFuel = source_network_internal_name?.toUpperCase() === KnownInternalNames.Networks.FuelMainnet?.toUpperCase()
+        || source_network_internal_name?.toUpperCase() === KnownInternalNames.Networks.FuelTestnet?.toUpperCase();
+
     const depositAddress = depositActionsResponse?.find(da => true)?.to_address;
     const amount = depositActionsResponse?.find(da => true)?.amount || 0;
     const callData = depositActionsResponse?.find(da => true)?.call_data;
@@ -106,6 +110,15 @@ export const WalletTransferContent: FC = () => {
             swapId={swap?.id}
             callData={callData}
         />;
+    else if (sourceIsFuel)
+        return <FuelWalletWithdrawStep
+            amount={amount}
+            depositAddress={depositAddress}
+            network={swap?.source_network}
+            token={swap?.source_token}
+            swapId={swap?.id}
+            callData={callData}
+        />;
     else
         return <>
             {