@layerswap/widget 0.1.20 → 1.0.0-alpha0.1

package/dist/components/Pages/Swap/Withdraw/Wallet/WithdrawalProviders/BitcoinWalletWithdraw/transactionBuilder/types.d.ts

@@ -0,0 +1,21 @@
+import { JsonRpcClient } from "../../../../../../../../lib/apiClients/jsonRpcClient";
+import { BtcRpcRequestFn, Chain, Client, Transport } from "@bigmi/core";
+export type TransactionBuilderParams = {
+    amount: number;
+    depositAddress: string;
+    userAddress: string;
+    memo: string;
+    feeRate?: number;
+    version: 'mainnet' | 'testnet';
+    publicClient?: Client<Transport<string, Record<string, any>, BtcRpcRequestFn>, Chain>;
+    rpcClient: JsonRpcClient;
+};
+export interface Utxo {
+    txid: string;
+    vout: number;
+    value: number;
+    status: {
+        confirmed: boolean;
+        block_height?: number;
+    };
+}

package/dist/components/Pages/Swap/Withdraw/Wallet/WithdrawalProviders/BitcoinWalletWithdraw/transactionBuilder/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Pages/Swap/Withdraw/Wallet/WithdrawalProviders/EVMWalletWithdraw/TransferToken.d.ts

@@ -0,0 +1,10 @@
+import { FC } from "react";
+import { SwapBasicData } from "../../../../../../../lib/apiClients/layerSwapApiClient";
+type Props = {
+    savedTransactionHash?: string;
+    chainId?: number;
+    swapData: SwapBasicData;
+    refuel: boolean;
+};
+declare const TransferTokenButton: FC<Props>;
+export default TransferTokenButton;

package/dist/components/Pages/Swap/Withdraw/Wallet/WithdrawalProviders/EVMWalletWithdraw/TransferToken.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
+import { useConfig, } from "wagmi";
+import { parseEther } from 'viem';
+import WalletIcon from "../../../../../../../components/Icons/WalletIcon";
+import TransactionMessage from "./transactionMessage";
+import { SendTransactionButton } from "../../Common/buttons";
+import { sendTransaction } from '@wagmi/core';
+import useWallet from "../../../../../../../hooks/useWallet";
+import { useSelectedAccount } from "../../../../../../../context/balanceAccounts";
+import { isMobile } from "../../../../../../../lib/isMobile";
+const TransferTokenButton = ({ savedTransactionHash, chainId, swapData, refuel }) => {
+    const [buttonClicked, setButtonClicked] = useState(false);
+    const config = useConfig();
+    const [error, setError] = useState();
+    const [loading, setLoading] = useState(false);
+    const { provider } = useWallet(swapData.source_network, "withdrawal");
+    const selectedSourceAccount = useSelectedAccount("from", provider?.name);
+    const clickHandler = useCallback(async ({ amount, callData, depositAddress }) => {
+        setButtonClicked(true);
+        setError(undefined);
+        setLoading(true);
+        try {
+            if (!depositAddress)
+                throw new Error('Missing deposit address');
+            if (amount == undefined)
+                throw new Error('Missing amount');
+            if (!selectedSourceAccount?.address)
+                throw new Error('No selected account');
+            const tx = {
+                chainId,
+                to: depositAddress,
+                value: parseEther(amount?.toString()),
+                gas: undefined,
+                data: callData,
+                account: selectedSourceAccount.address
+            };
+            if (isMobile() && selectedSourceAccount.wallet?.metadata?.deepLink) {
+                window.location.href = selectedSourceAccount.wallet.metadata?.deepLink;
+                await new Promise(resolve => setTimeout(resolve, 100));
+            }
+            const hash = await sendTransaction(config, tx);
+            if (hash) {
+                return hash;
+            }
+        }
+        catch (e) {
+            setLoading(false);
+            setError(e);
+            throw e;
+        }
+    }, [config, chainId, selectedSourceAccount?.address]);
+    const transaction = {
+        error: error,
+        isError: !!error,
+        isPending: loading,
+    };
+    return _jsxs("div", { className: "w-full space-y-3 flex flex-col justify-between h-full text-primary-text", children: [buttonClicked &&
+                _jsx(TransactionMessage, { transaction: transaction, applyingTransaction: !!savedTransactionHash, activeAddress: selectedSourceAccount?.address, selectedSourceAddress: selectedSourceAccount?.address }), !loading &&
+                _jsx(SendTransactionButton, { onClick: clickHandler, icon: _jsx(WalletIcon, { className: "stroke-2 w-6 h-6" }), error: !!error && buttonClicked, swapData: swapData, refuel: refuel })] });
+};
+export default TransferTokenButton;

package/dist/components/Pages/Swap/Withdraw/Wallet/WithdrawalProviders/EVMWalletWithdraw/index.d.ts

@@ -0,0 +1,3 @@
+import { FC } from "react";
+import { WithdrawPageProps } from "../../Common/sharedTypes";
+export declare const EVMWalletWithdrawal: FC<WithdrawPageProps>;

package/dist/components/Pages/{SwapPages/Withdraw/Wallet/WalletTransfer → Swap/Withdraw/Wallet/WithdrawalProviders/EVMWalletWithdraw}/index.js

@@ -1,22 +1,24 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 import { useAccount } from "wagmi";
-import { ChangeNetworkButton, ConnectWalletButton } from "./buttons";
+import { ChangeNetworkButton, ConnectWalletButton } from "../../Common/buttons";
 import TransferTokenButton from "./TransferToken";
-import useWallet from "../../../../../../hooks/useWallet";
-import { useSwapDataState } from "../../../../../../context/swap";
-import TransactionMessages from "../../Messages/TransactionMessages";
-import { useQueryState } from "../../../../../../context/query";
-const TransferFromWallet = ({ network, depositAddress, userDestinationAddress, amount, sequenceNumber, swapId, }) => {
-    const { swapResponse, selectedSourceAccount } = useSwapDataState();
-    const { source_network, destination_network, destination_address } = swapResponse?.swap || {};
+import useWallet from "../../../../../../../hooks/useWallet";
+import TransactionMessages from "../../../messages/TransactionMessages";
+import { useInitialSettings } from "../../../../../../../context/settings";
+import { useSelectedAccount } from "../../../../../../../context/balanceAccounts";
+export const EVMWalletWithdrawal = ({ swapBasicData, refuel, swapId }) => {
+    const { source_network, destination_network, destination_address } = swapBasicData;
     const { isConnected, chain: activeChain } = useAccount();
-    const { provider } = useWallet(network, 'withdrawal');
-    const { sameAccountNetwork } = useQueryState();
-    const wallet = provider?.activeWallet;
-    const networkChainId = Number(network?.chain_id) ?? undefined;
+    const { provider } = useWallet(swapBasicData.source_network, "withdrawal");
+    const selectedSourceAccount = useSelectedAccount("from", provider?.name);
+    const { sameAccountNetwork } = useInitialSettings();
+    const wallet = selectedSourceAccount?.wallet;
+    const networkChainId = Number(source_network?.chain_id) ?? undefined;
     const [savedTransactionHash, setSavedTransactionHash] = useState();
     useEffect(() => {
+        if (!swapId)
+            return;
         try {
             const data = JSON.parse(localStorage.getItem('swapTransactions') || "{}");
             const hash = data?.[swapId]?.hash;
@@ -28,10 +30,6 @@ const TransferFromWallet = ({ network, depositAddress, userDestinationAddress, a
             console.error(e.message);
         }
     }, [swapId]);
-    if (!swapId || !sequenceNumber)
-        return null;
-    const hexed_sequence_number = sequenceNumber?.toString(16);
-    const sequence_number_even = (hexed_sequence_number?.length % 2 > 0 ? `0${hexed_sequence_number}` : hexed_sequence_number);
     if ((source_network?.name.toLowerCase() === sameAccountNetwork?.toLowerCase() || destination_network?.name.toLowerCase() === sameAccountNetwork?.toLowerCase())
         && (selectedSourceAccount?.address && destination_address && selectedSourceAccount?.address.toLowerCase() !== destination_address?.toLowerCase())) {
         const network = source_network?.name.toLowerCase() === sameAccountNetwork?.toLowerCase() ? source_network : destination_network;
@@ -40,11 +38,10 @@ const TransferFromWallet = ({ network, depositAddress, userDestinationAddress, a
     if (!isConnected || !wallet) {
         return _jsx(ConnectWalletButton, {});
     }
-    else if (activeChain?.id !== networkChainId && network) {
-        return _jsx(ChangeNetworkButton, { chainId: networkChainId, network: network.display_name });
+    else if (activeChain?.id !== networkChainId && source_network) {
+        return _jsx(ChangeNetworkButton, { chainId: networkChainId, network: source_network });
     }
     else {
-        return _jsx(TransferTokenButton, { swapId: swapId, sequenceNumber: sequence_number_even, amount: amount, chainId: networkChainId, depositAddress: depositAddress, userDestinationAddress: userDestinationAddress, savedTransactionHash: savedTransactionHash });
+        return _jsx(TransferTokenButton, { swapData: swapBasicData, refuel: refuel, chainId: networkChainId, savedTransactionHash: savedTransactionHash });
     }
 };
-export default TransferFromWallet;

package/dist/components/Pages/{SwapPages/Withdraw/Wallet/WalletTransfer → Swap/Withdraw/Wallet/WithdrawalProviders/EVMWalletWithdraw}/resolveError.js

@@ -1,7 +1,7 @@
 import { InsufficientFundsError, EstimateGasExecutionError, UserRejectedRequestError } from 'viem';
 const resolveError = (error) => {
     const isInsufficientFundsError = typeof error?.walk === "function" && error?.walk((e) => (e instanceof InsufficientFundsError)
-        || (e instanceof EstimateGasExecutionError) || e?.['data']?.args?.some((a) => a?.includes("amount exceeds")));
+        || (e instanceof EstimateGasExecutionError) || e?.['data']?.args?.some((a) => a?.includes("amount exceeds")) || error?.["cause"]?.["cause"]?.["cause"]?.["message"]?.includes("amount exceeds"));
     if (isInsufficientFundsError)
         return "insufficient_funds";
     const isUserRejectedRequestError = typeof error?.walk === "function" && error?.walk && error?.walk((e) => e instanceof UserRejectedRequestError) instanceof UserRejectedRequestError;

package/dist/components/Pages/{SwapPages/Withdraw/Wallet/WalletTransfer → Swap/Withdraw/Wallet/WithdrawalProviders/EVMWalletWithdraw}/transactionMessage.d.ts

@@ -1,5 +1,5 @@
 import { FC } from "react";
-import { ActionData } from "./sharedTypes";
+import { ActionData } from "../../Common/sharedTypes";
 type TransactionMessageProps = {
     wait?: ActionData;
     transaction: ActionData;

package/dist/components/Pages/{SwapPages/Withdraw/Wallet/WalletTransfer → Swap/Withdraw/Wallet/WithdrawalProviders/EVMWalletWithdraw}/transactionMessage.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import TransactionMessages from "../../../messages/TransactionMessages";
 import resolveError from "./resolveError";
-// import { datadogRum } from '@datadog/browser-rum';
-import TransactionMessages from "../../Messages/TransactionMessages";
 const TransactionMessage = ({ wait, transaction, applyingTransaction, activeAddress, selectedSourceAddress }) => {
     const transactionResolvedError = resolveError(transaction?.error);
     const hasError = transaction?.isError || wait?.isError;
@@ -17,16 +16,13 @@ const TransactionMessage = ({ wait, transaction, applyingTransaction, activeAddr
     else if (transaction?.isError && transactionResolvedError === "transaction_rejected") {
         return _jsx(TransactionMessages.TransactionRejectedMessage, {});
     }
+    //TODO: this is old we mihght need to remove it, as now the selected account is the active one
     else if (transaction.isError && activeAddress && selectedSourceAddress && (activeAddress?.toLowerCase() !== selectedSourceAddress?.toLowerCase())) {
         return _jsx(TransactionMessages.WaletMismatchMessage, { address: selectedSourceAddress });
     }
     else if (hasError) {
         const unexpectedError = transaction?.error?.['data']?.message || transaction?.error
             || wait?.error;
-        const renderingError = new Error(unexpectedError.message);
-        renderingError.name = `SwapWithdrawalError`;
-        renderingError.cause = unexpectedError;
-        // datadogRum.addError(renderingError);
         return _jsx(TransactionMessages.UexpectedErrorMessage, { message: unexpectedError?.message });
     }
     else

package/dist/components/Pages/Swap/Withdraw/Wallet/WithdrawalProviders/FuelWalletWithdrawal.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { WithdrawPageProps } from '../Common/sharedTypes';
+export declare const FuelWalletWithdrawStep: FC<WithdrawPageProps>;

package/dist/components/Pages/Swap/Withdraw/Wallet/WithdrawalProviders/FuelWalletWithdrawal.js

@@ -0,0 +1,110 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from 'react';
+import useWallet from '../../../../../../hooks/useWallet';
+import WalletIcon from '../../../../../../components/Icons/WalletIcon';
+import { ButtonWrapper, ChangeNetworkMessage, ConnectWalletButton, SendTransactionButton } from '../Common/buttons';
+import { useSelectNetwork, useFuel, useNetwork, } from '@fuels/react';
+import { coinQuantityfy, Provider, ScriptTransactionRequest } from 'fuels';
+import TransactionMessages from '../../messages/TransactionMessages';
+import { useSelectedAccount } from '../../../../../../context/balanceAccounts';
+export const FuelWalletWithdrawStep = ({ swapBasicData, refuel }) => {
+    const [loading, setLoading] = useState(false);
+    const [buttonClicked, setButtonClicked] = useState(false);
+    const [error, setError] = useState();
+    const { source_network, source_token } = swapBasicData;
+    const { provider } = useWallet(source_network, 'withdrawal');
+    const selectedSourceAccount = useSelectedAccount("from", provider?.name);
+    const { network: fuelNetwork, refetch: refetchNetwork } = useNetwork();
+    const networkChainId = Number(source_network?.chain_id);
+    const { fuel } = useFuel();
+    const activeChainId = fuelNetwork?.chainId || (fuelNetwork?.url.includes('testnet') ? 0 : 9889);
+    useEffect(() => {
+        if (selectedSourceAccount && selectedSourceAccount?.address) {
+            provider?.switchAccount && provider?.switchAccount(selectedSourceAccount.wallet, selectedSourceAccount?.address);
+            refetchNetwork();
+        }
+    }, [selectedSourceAccount]);
+    const handleTransfer = useCallback(async ({ amount, callData, depositAddress, swapId }) => {
+        setButtonClicked(true);
+        setError(undefined);
+        try {
+            setLoading(true);
+            if (!source_network)
+                throw Error("Network not found");
+            if (!depositAddress)
+                throw Error("Deposit address not found");
+            if (!source_network.metadata?.watchdog_contract)
+                throw Error("Watchdog contract not found");
+            if (!amount)
+                throw Error("Amount not found");
+            if (!source_token)
+                throw Error("Token not found");
+            if (!callData)
+                throw Error("Call data not found");
+            if (!selectedSourceAccount?.address)
+                throw Error("No selected account");
+            const fuelProvider = new Provider(source_network.node_url);
+            const fuelWallet = await fuel.getWallet(selectedSourceAccount.address, fuelProvider);
+            if (!fuelWallet)
+                throw Error("Fuel wallet not found");
+            var parsedCallData = JSON.parse(callData);
+            var scriptTransaction = ScriptTransactionRequest.from(parsedCallData.script);
+            var quantitiesParsed = parsedCallData.quantities.map(q => coinQuantityfy(q));
+            await scriptTransaction.estimateAndFund(fuelWallet, {
+                quantities: quantitiesParsed
+            });
+            await fuelProvider.simulate(scriptTransaction);
+            const transactionResponse = await fuelWallet.sendTransaction(scriptTransaction);
+            if (swapId && transactionResponse) {
+                return transactionResponse.id;
+            }
+        }
+        catch (e) {
+            setLoading(false);
+            if (e?.message) {
+                setError(e.message);
+            }
+            throw e;
+        }
+    }, [source_network, selectedSourceAccount, source_token, fuel]);
+    if (!selectedSourceAccount) {
+        return _jsx(ConnectWalletButton, {});
+    }
+    else if (source_network && activeChainId !== undefined && networkChainId !== activeChainId) {
+        return _jsx(ChangeNetworkButton, { onChange: refetchNetwork, chainId: networkChainId, network: source_network.display_name });
+    }
+    return (_jsxs("div", { className: "w-full space-y-3 flex flex-col justify-between h-full text-primary-text", children: [buttonClicked &&
+                _jsx(TransactionMessage, { error: error, isLoading: loading }), !loading &&
+                _jsx(SendTransactionButton, { isDisabled: !!loading, isSubmitting: !!loading, onClick: handleTransfer, icon: _jsx(WalletIcon, { className: "stroke-2 w-6 h-6", "aria-hidden": "true" }), swapData: swapBasicData, refuel: refuel })] }));
+};
+const ChangeNetworkButton = ({ chainId, network, onChange }) => {
+    const { selectNetworkAsync, error, isPending, isError } = useSelectNetwork();
+    const clickHandler = useCallback(async () => {
+        await selectNetworkAsync({ chainId });
+        onChange();
+    }, [selectNetworkAsync, chainId]);
+    return _jsxs("div", { className: "w-full space-y-3 flex flex-col justify-between h-full text-primary-text", children: [_jsx(ChangeNetworkMessage, { data: {
+                    isPending: isPending,
+                    isError: isError,
+                    error
+                }, network: network }), !isPending &&
+                _jsx(ButtonWrapper, { onClick: clickHandler, icon: _jsx(WalletIcon, { className: "stroke-2 w-6 h-6" }), children: error ? _jsx("span", { children: "Try again" })
+                        : _jsx("span", { children: "Switch network" }) })] });
+};
+const TransactionMessage = ({ isLoading, error }) => {
+    if (isLoading) {
+        return _jsx(TransactionMessages.ConfirmTransactionMessage, {});
+    }
+    else if (error === "The account(s) sending the transaction don't have enough funds to cover the transaction."
+        || error === "the target cannot be met due to no coins available or exceeding the 255 coin limit.") {
+        return _jsx(TransactionMessages.InsufficientFundsMessage, {});
+    }
+    else if (error === "Request cancelled without user response!" || error === "User rejected the transaction!" || error === "User canceled sending transaction") {
+        return _jsx(TransactionMessages.TransactionRejectedMessage, {});
+    }
+    else if (error) {
+        return _jsx(TransactionMessages.UexpectedErrorMessage, { message: error });
+    }
+    else
+        return _jsx(_Fragment, {});
+};

package/dist/components/Pages/Swap/Withdraw/Wallet/WithdrawalProviders/ImtblxWalletWithdrawStep.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { WithdrawPageProps } from '../Common/sharedTypes';
+export declare const ImtblxWalletWithdrawStep: FC<WithdrawPageProps>;

package/dist/components/Pages/Swap/Withdraw/Wallet/WithdrawalProviders/ImtblxWalletWithdrawStep.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Link, ArrowLeftRight } from 'lucide-react';
+import { useCallback, useState } from 'react';
+import toast from 'react-hot-toast';
+import GuideLink from '../../../../../../components/Common/guideLink';
+import useWallet from '../../../../../../hooks/useWallet';
+import { ConnectWalletButton, SendTransactionButton } from '../Common/buttons';
+import WarningMessage from '../../../../../../components/Common/WarningMessage';
+import { useSelectedAccount } from '../../../../../../context/balanceAccounts';
+export const ImtblxWalletWithdrawStep = ({ swapBasicData, refuel }) => {
+    const [loading, setLoading] = useState(false);
+    const [transferDone, setTransferDone] = useState();
+    const { source_network, source_token } = swapBasicData;
+    const { provider } = useWallet(source_network, 'withdrawal');
+    const selectedSourceAccount = useSelectedAccount("from", provider?.name);
+    const imxAccount = selectedSourceAccount?.wallet;
+    const handleTransfer = useCallback(async ({ amount, depositAddress, swapId }) => {
+        if (!source_network || !depositAddress || !amount)
+            return;
+        setLoading(true);
+        try {
+            const ImtblClient = (await import('../../../../../../lib/imtbl')).default;
+            const imtblClient = new ImtblClient(source_network?.name);
+            if (!source_token) {
+                throw new Error("No source currency could be found");
+            }
+            const res = await imtblClient.Transfer(amount.toString(), source_token, depositAddress);
+            const transactionRes = res?.result?.[0];
+            if (!transactionRes)
+                toast('Transfer failed or terminated');
+            else if (transactionRes.status == "error") {
+                toast(transactionRes.message);
+            }
+            else if (transactionRes && swapId) {
+                setTransferDone(true);
+                return transactionRes.txId.toString();
+            }
+        }
+        catch (e) {
+            setLoading(false);
+            if (e?.message)
+                toast(e.message);
+            throw e;
+        }
+    }, [imxAccount, source_network, source_token]);
+    if (!imxAccount) {
+        return _jsx(ConnectWalletButton, { icon: _jsx(Link, { className: "h-5 w-5 ml-2", "aria-hidden": "true" }) });
+    }
+    return (_jsx(_Fragment, { children: _jsx("div", { className: "w-full space-y-5 flex flex-col justify-between h-full text-secondary-text", children: _jsxs("div", { className: 'space-y-4', children: [_jsxs(WarningMessage, { messageType: 'informing', children: [_jsx("span", { className: 'flex-none', children: "Learn how to send from" }), _jsx(GuideLink, { text: source_network?.display_name, userGuideUrl: 'https://docs.layerswap.io/user-docs/your-first-swap/off-ramp/send-assets-from-immutablex/' })] }), imxAccount &&
+                        _jsx(SendTransactionButton, { isDisabled: !!(loading || transferDone), isSubmitting: !!(loading || transferDone), onClick: handleTransfer, icon: _jsx(ArrowLeftRight, { className: "h-5 w-5 ml-2", "aria-hidden": "true" }), swapData: swapBasicData, refuel: refuel })] }) }) }));
+};

package/dist/components/Pages/Swap/Withdraw/Wallet/WithdrawalProviders/Loopring/ActivationTokentPicker.d.ts

@@ -0,0 +1,11 @@
+import { FeeData } from './hooks';
+import { UserBalanceInfo } from '../../../../../../../lib/loopring/defs';
+type Props = {
+    availableBalances: UserBalanceInfo[] | undefined;
+    defaultValue: UserBalanceInfo | undefined;
+    feeData: FeeData | undefined;
+    onSelect: (v: string | undefined) => void;
+    selectedValue: string | undefined;
+};
+export declare const ActivationTokenPicker: ({ availableBalances, defaultValue, onSelect, feeData, selectedValue }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Pages/Swap/Withdraw/Wallet/WithdrawalProviders/Loopring/ActivationTokentPicker.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useLoopringTokens } from './hooks';
+import formatAmount from '../../../../../../../lib/formatAmount';
+import { useEffect } from 'react';
+import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from '../../../../../../../components/shadcn/select';
+import { ImageWithFallback } from '../../../../../../../components/Common/ImageWithFallback';
+import AppSettings from '../../../../../../../lib/AppSettings';
+export const ActivationTokenPicker = ({ availableBalances, defaultValue, onSelect, feeData, selectedValue }) => {
+    const { tokens } = useLoopringTokens();
+    const resource_storage_url = AppSettings.ResourseStorageUrl;
+    const activationCurrencyValues = tokens && availableBalances?.map(b => {
+        const loopringToken = tokens?.find(t => t.tokenId === b.tokenId);
+        const symbol = loopringToken?.symbol || "-";
+        const decimals = loopringToken?.decimals;
+        const details = _jsx("p", { className: "text-primary-text-tertiary", children: decimals ? `${formatAmount(b.total, decimals)}` : '' });
+        return {
+            id: symbol,
+            name: symbol,
+            isAvailable: true,
+            type: 'currency',
+            imgSrc: `${resource_storage_url}layerswap/currencies/${symbol.toLowerCase()}.png`,
+            baseObject: symbol,
+            details,
+            order: 0,
+        };
+    }) || [];
+    const handleChange = (v) => {
+        onSelect(v);
+    };
+    useEffect(() => {
+        if (!selectedValue && defaultValue && tokens) {
+            const loopringToken = tokens?.find(t => t.tokenId === defaultValue.tokenId);
+            if (loopringToken)
+                handleChange(loopringToken?.symbol);
+        }
+    }, [defaultValue, tokens]);
+    const loopringToken = tokens?.find(t => t.symbol === selectedValue);
+    const decimals = loopringToken?.decimals;
+    const selectedTokenFee = feeData?.fees?.find(f => f.token === selectedValue)?.fee;
+    const formattedFee = selectedTokenFee && decimals && formatAmount(selectedTokenFee, decimals);
+    return _jsxs("p", { className: "break-allspace-x-1 flex mt-4 w-full justify-end items-center text-sm text-secondary-text", children: [_jsx("span", { className: 'font-base sm:inline hidden', children: "One time activation fee" }), _jsx("span", { className: 'text-primary-text text-sm sm:text-base flex items-center', children: _jsx("span", { className: ' text-secondary-text text-sm ml-1', children: activationCurrencyValues.length > 0 ? _jsxs(Select, { onValueChange: handleChange, value: selectedValue, children: [_jsx(SelectTrigger, { className: "w-fit border-none text-primary-text! font-semibold! h-fit! p-0!", children: _jsx(SelectValue, { children: _jsxs("span", { className: 'space-x-1', children: [_jsx("span", { children: formattedFee }), _jsx("span", { children: selectedValue })] }) }) }), _jsx(SelectContent, { children: _jsxs(SelectGroup, { children: [_jsx(SelectLabel, { children: "Fee token" }), activationCurrencyValues?.map(cv => (_jsx(SelectItem, { value: cv.name, children: _jsxs("div", { className: "flex items-center", children: [_jsx("div", { className: "shrink-0 h-5 w-5 relative", children: cv &&
+                                                            _jsx(ImageWithFallback, { src: cv.imgSrc, alt: "From Logo", height: "60", width: "60", className: "rounded-md object-contain" }) }), _jsxs("div", { className: "mx-1 block", children: [_jsx("span", { className: 'text-primary-text', children: cv.name }), " ", _jsx("span", { children: cv.details })] })] }) }, cv.name)))] }) })] })
+                        : _jsx(_Fragment, {}) }) })] });
+};

package/dist/components/Pages/Swap/Withdraw/Wallet/WithdrawalProviders/Loopring/hooks.d.ts

@@ -0,0 +1,40 @@
+import { AccountInfo, TokenInfo, UserBalanceInfo } from "../../../../../../../lib/loopring/defs";
+export declare const useLoopringAccountBalance: (accountId?: number) => {
+    data: [UserBalanceInfo] | undefined;
+    isLoading: boolean;
+};
+export declare const useLoopringTokens: () => {
+    tokens: [TokenInfo] | undefined;
+    isLoading: boolean;
+};
+export declare const useLoopringAccount: ({ address }: {
+    address?: `0x${string}`;
+}) => {
+    account: AccountInfo | undefined;
+    isLoading: boolean;
+    noAccount: boolean;
+    mutate: import("swr").KeyedMutator<AccountInfo>;
+};
+export declare const useActivationData: (accountId?: number) => {
+    availableBalances: UserBalanceInfo[] | undefined;
+    defaultValue: UserBalanceInfo | undefined;
+    loading: boolean;
+    feeData: {
+        fees: {
+            token: string;
+            tokenId: number;
+            fee: string;
+            discount: number;
+        }[];
+        gasPrice: string;
+    } | undefined;
+};
+export type FeeData = {
+    fees: {
+        token: string;
+        tokenId: number;
+        fee: string;
+        discount: number;
+    }[];
+    gasPrice: string;
+};

package/dist/components/Pages/Swap/Withdraw/Wallet/WithdrawalProviders/Loopring/hooks.js

@@ -0,0 +1,46 @@
+import useSWR from "swr";
+import { LoopringAPI } from "../../../../../../../lib/loopring/LoopringAPI";
+import { LOOPRING_URLs, OffchainFeeReqType } from "../../../../../../../lib/loopring/defs";
+const fetcher = (url) => fetch(url).then((res) => res.json());
+export const useLoopringAccountBalance = (accountId) => {
+    const url = `${LoopringAPI.BaseApi}${LOOPRING_URLs.GET_USER_EXCHANGE_BALANCES}?accountId=${accountId}`;
+    const { data, isLoading } = useSWR(accountId ? url : null, fetcher);
+    return { data, isLoading };
+};
+export const useLoopringTokens = () => {
+    const url = `${LoopringAPI.BaseApi}${LOOPRING_URLs.GET_TOKENS}`;
+    const { data: tokens, isLoading } = useSWR(url, fetcher, {
+        dedupingInterval: 500000,
+    });
+    return { tokens, isLoading };
+};
+export const useLoopringAccount = ({ address }) => {
+    const url = `${LoopringAPI.BaseApi}${LOOPRING_URLs.ACCOUNT_ACTION}?owner=${address}`;
+    const { data: accountData, isLoading, mutate } = useSWR(address ? url : null, fetcher, {
+        dedupingInterval: 1000,
+        refreshInterval: (latestData) => latestData?.frozen ? 3000 : 0
+    });
+    const noAccount = accountData?.resultInfo?.code == 101002;
+    const account = noAccount ? undefined : accountData;
+    return { account, isLoading, noAccount, mutate };
+};
+const useAccountActivationFees = (accountId) => {
+    const url = `${LoopringAPI.BaseApi}${LOOPRING_URLs.GET_OFFCHAIN_FEE_AMT}?accountId=${accountId}&requestType=${OffchainFeeReqType.UPDATE_ACCOUNT}`;
+    const { data, isLoading } = useSWR(accountId ? url : null, fetcher, { dedupingInterval: 1000 });
+    return { data, isLoading };
+};
+export const useActivationData = (accountId) => {
+    const { data: loopringBalnce, isLoading: lpBalanceIsLoading } = useLoopringAccountBalance(accountId);
+    const { data: feeData, isLoading: feeDataIsLoading } = useAccountActivationFees(accountId);
+    const availableBalances = feeData && loopringBalnce?.filter(b => {
+        const tfee = feeData?.fees?.find(f => f.tokenId === b.tokenId)?.fee;
+        return Number(b.total) >= Number(tfee);
+    });
+    const defaultValue = availableBalances?.[0];
+    return {
+        availableBalances,
+        defaultValue,
+        loading: lpBalanceIsLoading || feeDataIsLoading,
+        feeData
+    };
+};

package/dist/components/Pages/Swap/Withdraw/Wallet/WithdrawalProviders/Loopring/index.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { WithdrawPageProps } from '../../Common/sharedTypes';
+export declare const LoopringWalletWithdraw: FC<WithdrawPageProps>;