@layerswap/widget 0.1.18 → 1.0.0-alpha0.1

package/dist/components/Pages/SwapHistory/SwapDetailsComponent.js

@@ -1,49 +1,68 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState } from 'react';
-import LayerSwapApiClient, { TransactionType } from '../../../lib/layerSwapApiClient';
-import shortenAddress, { shortenEmail } from '../../utils/ShortenAddress';
-import CopyButton from '../../Buttons/copyButton';
+import { TransactionType } from '../../../lib/apiClients/layerSwapApiClient';
+import shortenAddress, { shortenEmail } from '../../../components/utils/ShortenAddress';
+import CopyButton from '../../../components/Buttons/copyButton';
 import StatusIcon from './StatusIcons';
-import { ArrowRight, ExternalLink, Fuel, Info, RefreshCw } from 'lucide-react';
-import isGuid from '../../utils/isGuid';
+import { ExternalLink } from 'lucide-react';
+import isGuid from '../../../components/utils/isGuid';
 import KnownInternalNames from '../../../lib/knownIds';
-import { useQueryState } from '../../../context/query';
-import useSWR from 'swr';
-import { isValidAddress } from '../../../lib/address/validator';
-import { ExtendedAddress } from '../../Input/Address/AddressPicker/AddressWithIcon';
-import { addressFormat } from '../../../lib/address/formatter';
-import { truncateDecimals } from '../../utils/RoundDecimals';
-import calculateDatesDifference from '../../../lib/calculateDatesDifference';
+import { useInitialSettings } from '../../../context/settings';
 import { SwapStatus } from '../../../Models/SwapStatus';
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '../../shadcn/accordion';
-import VaulDrawer from '../../Modal/vaulModal';
-import { Popover, PopoverContent, PopoverTrigger } from '../../shadcn/popover';
+import { getDateDifferenceString } from '../../../components/utils/dateDifference';
+import { useSwapDataUpdate } from '../../../context/swap';
+import { useSettingsState } from '../../../context/settings';
+import { generateSwapInitialValuesFromSwap } from '../../../lib/generateSwapInitialValues';
+import SubmitButton from '../../../components/Buttons/submitButton';
+import SecondaryButton from '../../../components/Buttons/secondaryButton';
 const SwapDetails = ({ swapResponse }) => {
-    const [open, setOpen] = useState(false);
-    const { swap, refuel, quote } = swapResponse;
-    const { source_token, destination_token, destination_address, source_network, destination_network, source_exchange, destination_exchange, requested_amount } = swap;
-    const { hideFrom, hideTo, account, appName } = useQueryState();
-    const layerswapApiClient = new LayerSwapApiClient();
-    const { data: partnerData } = useSWR(appName && `/internal/apps?name=${appName}`, layerswapApiClient.fetcher);
-    const partner = partnerData?.data;
+    const { swap } = swapResponse;
+    const { source_network, destination_network, source_exchange } = swap;
+    const initialSettings = useInitialSettings();
+    const { hideFrom, account, } = initialSettings;
+    const { setSubmitedFormValues, setSwapModalOpen, setSwapId, createSwap } = useSwapDataUpdate();
+    const settings = useSettingsState();
+    const [isRepeatLoading, setIsRepeatLoading] = useState(false);
+    const handleRepeatSwap = async () => {
+        if (isRepeatLoading)
+            return;
+        setIsRepeatLoading(true);
+        try {
+            // Create a new swap based on the current swap data
+            // Determine if this is a cross-chain or exchange swap
+            const swapType = (swap.source_exchange || swap.destination_exchange) ? 'exchange' : 'cross-chain';
+            const newSwapData = generateSwapInitialValuesFromSwap(swap, false, settings, swapType);
+            setSubmitedFormValues(newSwapData);
+            // For wallet deposits, follow the same flow as FormWrapper's handleCreateSwap
+            if (newSwapData.depositMethod === 'wallet') {
+                setSwapId(undefined);
+                setSwapModalOpen(true);
+            }
+            else {
+                // For deposit address method, create the swap first then open modal
+                setSwapId(undefined);
+                const swapResponse = await createSwap(newSwapData, initialSettings, undefined);
+                setSwapId(swapResponse.swap.id);
+                setSwapModalOpen(true);
+            }
+        }
+        catch (error) {
+            // Handle error appropriately
+            console.log('Failed to create swap:', error);
+        }
+        finally {
+            setIsRepeatLoading(false);
+        }
+    };
+    const handleViewCompleteSwap = () => {
+        setSwapId(swap.id);
+        setSwapModalOpen(true);
+    };
     const input_tx_explorer_template = source_network?.transaction_explorer_template;
     const output_tx_explorer_template = destination_network?.transaction_explorer_template;
     const swapInputTransaction = swap?.transactions?.find(t => t.type === TransactionType.Input);
     const swapOutputTransaction = swap?.transactions?.find(t => t.type === TransactionType.Output);
-    const source = (hideFrom && partner && account) ? partner : source_network;
-    const destination = (hideTo && partner && account) ? partner : destination_network;
-    const receive_amount = swapOutputTransaction?.amount ?? quote?.receive_amount;
-    const receiveAmountInUsd = receive_amount ? (destination_token?.price_in_usd * receive_amount).toFixed(2) : undefined;
-    const requestedAmountInUsd = requested_amount && (source_token?.price_in_usd * requested_amount).toFixed(2);
-    const inputTransactionFee = swapInputTransaction?.fee_amount;
-    const inputTransactionFeeInUsd = inputTransactionFee && swapInputTransaction?.fee_token && (swapInputTransaction?.fee_token?.price_in_usd * inputTransactionFee);
-    const displayInputFeeInUsd = inputTransactionFeeInUsd ? (inputTransactionFeeInUsd < 0.01 ? '<$0.01' : `$${inputTransactionFeeInUsd?.toFixed(2)}`) : null;
-    const calculatedFeeAmountInUsd = inputTransactionFeeInUsd ? inputTransactionFeeInUsd + quote?.total_fee_in_usd : quote?.total_fee_in_usd;
-    const displayCalculatedFeeAmountInUsd = calculatedFeeAmountInUsd ? (calculatedFeeAmountInUsd < 0.01 ? '<$0.01' : `$${calculatedFeeAmountInUsd?.toFixed(2)}`) : null;
-    const displayLayerswapFeeInUsd = quote?.total_fee_in_usd ? (quote?.total_fee_in_usd < 0.01 ? '<$0.01' : `$${quote?.total_fee_in_usd?.toFixed(2)}`) : null;
-    const nativeCurrency = refuel?.token;
-    const truncatedRefuelAmount = nativeCurrency && !!refuel ?
-        truncateDecimals(refuel.amount, nativeCurrency?.precision) : null;
+    const refundTransaction = swap?.transactions?.find(t => t.type === TransactionType.Refund);
     let sourceAccountAddress = undefined;
     if (hideFrom && account) {
         sourceAccountAddress = account;
@@ -57,58 +76,26 @@ const SwapDetails = ({ swapResponse }) => {
     else if (source_exchange) {
         sourceAccountAddress = "Exchange";
     }
-    return (_jsxs(_Fragment, { children: [_jsxs(VaulDrawer.Snap, { id: 'item-1', className: 'pb-3 space-y-3', children: [_jsx("div", { className: 'p-3 bg-secondary-700 rounded-xl', children: _jsxs("div", { className: `font-normal flex flex-col w-full relative ${(source_exchange || destination_exchange) ? 'space-y-2' : 'space-y-4'}`, children: [_jsxs("div", { className: 'space-y-1', children: [_jsx("p", { className: 'text-xs font-normal text-secondary-text pl-1', children: "From" }), _jsxs("div", { className: "flex items-center justify-between w-full", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("img", { src: source_exchange?.logo || source.logo, alt: source_exchange?.display_name || source.display_name, width: 32, height: 32, className: "rounded-md w-11 h-11" }), _jsxs("div", { children: [_jsx("p", { className: "text-secondary-text text-base", children: source_exchange ? source_exchange?.display_name : source?.display_name }), sourceAccountAddress &&
-                                                                    (source_exchange ?
-                                                                        _jsx("p", { className: "text-xs text-secondary-text", children: "Exchange" })
-                                                                        : sourceAccountAddress ?
-                                                                            isValidAddress(sourceAccountAddress, source_network) ?
-                                                                                _jsx("div", { className: "group/addressItem text-secondary-text", children: _jsx(ExtendedAddress, { address: addressFormat(sourceAccountAddress, source_network), network: source_network, addressClassNames: 'text-xs' }) })
-                                                                                :
-                                                                                    _jsx("p", { className: "text-xs text-secondary-text", children: sourceAccountAddress })
-                                                                            :
-                                                                                null)] })] }), _jsxs("div", { className: "flex flex-col items-end", children: [(swapInputTransaction?.amount || requested_amount) &&
-                                                            _jsxs("p", { className: "text-primary-text text-base font-semibold", children: [truncateDecimals(swapInputTransaction?.amount || requested_amount, source_token.precision), " ", source_token.symbol] }), _jsxs("p", { className: "text-secondary-text text-sm flex justify-end", children: ["$", swapInputTransaction?.usd_value || requestedAmountInUsd] })] })] })] }), (source_exchange || destination_exchange) &&
-                                    _jsxs("div", { className: 'flex flex-row space-x-2', children: [_jsxs("div", { className: 'flex flex-col gap-1 justify-start items-center w-fit ml-2.5', children: [_jsx("div", { className: "w-0.5 h-2.5 bg-[#d9d9d9] rounded-xs" }), _jsx("img", { src: source_exchange ? source_network?.logo : destination_network?.logo, alt: source_exchange ? source_network?.display_name : destination_network?.display_name, width: 24, height: 24, className: "rounded-md w-6 h-6" }), _jsx("div", { className: "w-0.5 h-2.5 bg-[#d9d9d9] rounded-xs" })] }), _jsx("span", { className: 'text-secondary-text text-sm self-center', children: source_exchange ? source_network?.display_name : destination_network?.display_name })] }), _jsxs("div", { className: 'space-y-1', children: [_jsx("p", { className: 'text-xs font-normal text-secondary-text pl-1', children: "To" }), _jsxs("div", { className: "flex items-center justify-between w-full ", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("img", { src: destination_exchange?.logo || destination.logo, alt: destination_exchange?.display_name || destination.display_name, width: 32, height: 32, className: "rounded-md w-11 h-11" }), _jsxs("div", { className: "group/addressItem text-sm text-secondary-text", children: [_jsx("p", { className: "text-secondary-text text-base", children: destination_exchange ? destination_exchange?.display_name : destination?.display_name }), destination_exchange ?
-                                                                    _jsx("p", { className: "text-xs text-secondary-text", children: "Exchange" })
-                                                                    :
-                                                                        _jsx(ExtendedAddress, { address: addressFormat(destination_address, destination_network), network: destination_network, addressClassNames: 'text-xs' })] })] }), receive_amount != undefined ?
-                                                    _jsxs("div", { className: "flex flex-col justify-end", children: [_jsxs("p", { className: "text-primary-text text-base font-semibold", children: [truncateDecimals(receive_amount, destination_token.precision), " ", destination_token.symbol] }), _jsxs("p", { className: "text-secondary-text text-sm flex justify-end", children: ["$", receiveAmountInUsd] })] })
+    return (_jsxs(_Fragment, { children: [_jsx("section", { className: 'pb-3 space-y-3', children: _jsx("div", { className: 'p-3 bg-secondary-500 rounded-xl', children: _jsxs("div", { className: 'text-sm flex flex-col gap-3', children: [_jsxs("div", { className: "flex justify-between items-center text-sm text-primary-text", children: [_jsx("p", { className: "text-left text-secondary-text", children: "Transaction ID" }), _jsx(CopyButton, { toCopy: swap?.id, iconClassName: 'order-2 ml-1 text-primary-text', children: shortenAddress(swap?.id) })] }), _jsxs("div", { className: "flex justify-between items-baseline", children: [_jsx("span", { className: "text-left text-secondary-text", children: "Date & Time" }), _jsxs("span", { className: 'text-primary-text', children: [(new Date(swap.created_date)).toLocaleString(), " ", _jsx("span", { className: 'text-primary-text-tertiary', children: getDateDifferenceString(new Date(swap.created_date)) })] })] }), _jsxs("div", { className: "flex justify-between p items-baseline", children: [_jsx("span", { className: "text-left text-secondary-text", children: "Status " }), _jsx("span", { className: "text-primary-text", children: _jsx(StatusIcon, { swap: swap }) })] })] }) }) }), _jsx("section", { className: 'pb-2', children: _jsxs("div", { className: 'flex flex-col justify-between w-full h-full gap-3', children: [_jsx("div", { className: 'space-y-3', children: _jsx("div", { className: 'p-3 bg-secondary-500 rounded-xl text-primary-text', children: _jsxs("div", { className: 'text-sm flex flex-col gap-3', children: [_jsxs("div", { className: "flex justify-between items-baseline", children: [_jsx("p", { className: "text-left text-secondary-text", children: "Source transaction" }), swapInputTransaction?.transaction_hash ?
+                                                    _jsxs("a", { target: "_blank", href: input_tx_explorer_template?.replace("{0}", swapInputTransaction.transaction_hash), className: 'flex items-center space-x-1', rel: "noopener noreferrer", children: [_jsx("span", { children: shortenAddress(swapInputTransaction.transaction_hash) }), _jsx(ExternalLink, { className: 'h-4' })] })
                                                     :
-                                                        _jsx(_Fragment, { children: "-" })] })] }), refuel && _jsx("div", { className: ' bg-secondary-700 rounded-xl py-1.5', children: _jsxs("div", { className: "flex justify-between items-center text-sm font-normal", children: [_jsxs("div", { className: 'inline-flex items-center text-primary-text gap-2', children: [_jsx(Fuel, { className: 'h-4 w-4' }), _jsx("p", { className: "text-left", children: "Refuel" })] }), _jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, onMouseEnter: () => setOpen(true), onMouseLeave: () => setOpen(false), onClick: () => setOpen(!open), children: _jsx("div", { className: "flex flex-col items-end cursor-pointer", children: _jsxs("div", { className: "flex items-center gap-1 text-primary-buttonTextColor", children: [_jsx(Info, { className: "h-3.5 w-3.5" }), _jsxs("p", { className: "text-primary-text text-sm font-normal", children: [truncatedRefuelAmount, " ", nativeCurrency?.symbol] })] }) }) }), _jsx(PopoverContent, { onMouseEnter: () => setOpen(true), onMouseLeave: () => setOpen(false), side: "top", className: "w-auto", align: 'end', alignOffset: -20, children: _jsxs("div", { className: "flex flex-col gap-2 justify-start text-sm font-normal", children: [_jsx("p", { className: "text-secondary-text", children: "Conversion rate" }), _jsxs("div", { className: "inline-flex gap-2 items-center text-primary-text", children: [_jsxs("p", { children: [quote.refuel_in_source, " ", source_token.symbol] }), _jsx(ArrowRight, { className: "h-4 w-4" }), _jsxs("p", { children: [refuel.amount, " ", refuel.token.symbol] })] })] }) })] })] }) })] }) }), _jsx("div", { className: 'p-3 bg-secondary-700 rounded-xl', children: (inputTransactionFeeInUsd && !source_exchange) ?
-                            _jsx(Accordion, { type: "single", collapsible: true, children: _jsxs(AccordionItem, { value: "item-1", children: [_jsx(AccordionTrigger, { className: 'w-full', children: _jsxs("div", { className: "flex justify-between items-baseline text-sm w-full mr-1", children: [_jsx("span", { className: "text-left", children: "Fees" }), _jsx("span", { className: 'font-semibold text-primary-text', children: displayCalculatedFeeAmountInUsd })] }) }), _jsx(AccordionContent, { children: _jsxs("div", { className: 'flex flex-col gap-3 mt-4', children: [_jsxs("div", { className: "flex justify-between items-baseline text-sm", children: [_jsx("span", { className: "text-left text-secondary-text", children: "Layerswap Fee" }), _jsxs("div", { className: "flex flex-col items-end justify-end", children: [_jsxs("p", { className: "text-primary-text text-sm font-semibold", children: [swapResponse?.quote.total_fee?.toFixed(source_token?.precision), " ", source_token?.symbol] }), _jsx("p", { className: "text-secondary-text text-xs flex justify-end", children: displayLayerswapFeeInUsd })] })] }), _jsxs("div", { className: "flex justify-between items-baseline text-sm", children: [_jsx("span", { className: "text-left text-secondary-text", children: "Gas Fee" }), _jsxs("div", { className: "flex flex-col items-end justify-end", children: [_jsxs("p", { className: "text-primary-text text-sm font-semibold", children: [inputTransactionFee?.toFixed(swapInputTransaction?.fee_token?.precision), " ", swapInputTransaction?.fee_token?.symbol] }), _jsx("p", { className: "text-secondary-text text-xs flex justify-end", children: displayInputFeeInUsd })] })] })] }) })] }) })
-                            :
-                                _jsxs("div", { className: "flex justify-between items-baseline text-sm w-full", children: [_jsx("p", { className: "text-left", children: "Fees" }), _jsxs("div", { className: "flex flex-col justify-end", children: [_jsxs("p", { className: "text-primary-text text-sm font-semibold", children: [swapResponse?.quote.total_fee?.toFixed(source_token?.precision), " ", source_token?.symbol] }), _jsxs("p", { className: "text-secondary-text text-xs flex justify-end", children: ["$", quote.total_fee_in_usd] })] })] }) }), _jsx("div", { className: 'p-3 bg-secondary-700 rounded-xl', children: _jsxs("div", { className: 'text-sm flex flex-col gap-3', children: [_jsxs("div", { className: "flex justify-between items-center text-sm text-primary-text", children: [_jsx("p", { className: "text-left text-secondary-text", children: "Swap Id" }), _jsx(CopyButton, { toCopy: swap?.id, iconClassName: 'order-2 ml-1', children: shortenAddress(swap?.id) })] }), _jsxs("div", { className: "flex justify-between items-baseline", children: [_jsx("span", { className: "text-left text-secondary-text", children: "Date & Time" }), _jsx("span", { className: 'text-primary-text', children: (new Date(swap.created_date)).toLocaleString() })] }), _jsxs("div", { className: "flex justify-between items-baseline", children: [_jsx("span", { className: "text-left text-secondary-text", children: "Completion Time" }), _jsx("span", { className: 'text-primary-text', children: (swapInputTransaction?.timestamp && swapOutputTransaction?.timestamp) ?
-                                                calculateDatesDifference(swapInputTransaction?.timestamp, swapOutputTransaction?.timestamp)
+                                                        _jsx("span", { children: "-" })] }), _jsx("div", { className: "flex justify-between items-baseline", children: swap.status == SwapStatus.Refunded ?
+                                                _jsxs(_Fragment, { children: [_jsx("p", { className: "text-left text-secondary-text", children: "Refund transaction" }), refundTransaction?.transaction_hash ?
+                                                            ((refundTransaction?.transaction_hash && swap?.destination_exchange?.name === KnownInternalNames.Exchanges.Coinbase && (isGuid(refundTransaction?.transaction_hash))) ?
+                                                                _jsx("span", { children: _jsx(CopyButton, { toCopy: refundTransaction.transaction_hash, iconClassName: "text-primary-text order-2", children: shortenAddress(refundTransaction.transaction_hash) }) })
+                                                                :
+                                                                    _jsxs("a", { target: "_blank", href: output_tx_explorer_template?.replace("{0}", refundTransaction.transaction_hash), className: 'flex items-center space-x-1', rel: "noopener noreferrer", children: [_jsx("span", { children: shortenAddress(refundTransaction.transaction_hash) }), _jsx(ExternalLink, { className: 'h-4' })] }))
+                                                            :
+                                                                _jsx("span", { children: "-" })] })
                                                 :
-                                                    '-' })] }), _jsxs("div", { className: "flex justify-between p items-baseline", children: [_jsx("span", { className: "text-left text-secondary-text", children: "Status " }), _jsx("span", { className: "text-primary-text", children: _jsx(StatusIcon, { swap: swap }) })] })] }) })] }), _jsx(VaulDrawer.Snap, { className: 'pb-3', id: 'item-2', children: _jsxs("div", { className: 'flex flex-col justify-between w-full h-full gap-3', children: [_jsx("div", { className: 'space-y-3', children: _jsx("div", { className: 'p-3 bg-secondary-700 rounded-xl text-primary-text', children: _jsxs("div", { className: 'text-sm flex flex-col gap-3', children: [_jsxs("div", { className: "flex justify-between items-baseline", children: [_jsx("p", { className: "text-left text-secondary-text", children: "Source transaction" }), swapInputTransaction?.transaction_hash ?
-                                                    _jsxs("a", { target: "_blank", href: input_tx_explorer_template?.replace("{0}", swapInputTransaction.transaction_hash), className: 'flex items-center space-x-1', children: [_jsx("span", { children: shortenAddress(swapInputTransaction.transaction_hash) }), _jsx(ExternalLink, { className: 'h-4' })] })
-                                                    :
-                                                        _jsx("span", { children: "-" })] }), _jsxs("div", { className: "flex justify-between items-baseline", children: [_jsx("p", { className: "text-left text-secondary-text", children: "Destination transaction" }), swapOutputTransaction?.transaction_hash ?
-                                                    ((swapOutputTransaction?.transaction_hash && swap?.destination_exchange?.name === KnownInternalNames.Exchanges.Coinbase && (isGuid(swapOutputTransaction?.transaction_hash))) ?
-                                                        _jsx("span", { children: _jsx(CopyButton, { toCopy: swapOutputTransaction.transaction_hash, iconClassName: "text-primary-text order-2", children: shortenAddress(swapOutputTransaction.transaction_hash) }) })
-                                                        :
-                                                            _jsxs("a", { target: "_blank", href: output_tx_explorer_template?.replace("{0}", swapOutputTransaction.transaction_hash), className: 'flex items-center space-x-1', children: [_jsx("span", { children: shortenAddress(swapOutputTransaction.transaction_hash) }), _jsx(ExternalLink, { className: 'h-4' })] }))
-                                                    :
-                                                        _jsx("span", { children: "-" })] })] }) }) }), swap.status === SwapStatus.Completed &&
-                            _jsxs("button", { type: 'button', 
-                                // onClick={() => router.push({
-                                //     pathname: `/`,
-                                //     query: {
-                                //         amount: requested_amount,
-                                //         destAddress: destination_address,
-                                //         from: source_network?.name,
-                                //         to: destination_network?.name,
-                                //         fromAsset: source_token.symbol,
-                                //         toAsset: destination_token.symbol,
-                                //         ...resolvePersistantQueryParams(router.query),
-                                //     }
-                                // }, undefined, { shallow: false })}
-                                className: 'w-full inline-flex items-center gap-2 justify-center py-2.5 px-3 text-xl font-semibold bg-primary-text-placeholder hover:opacity-90 duration-200 active:opacity-80 transition-opacity rounded-lg text-secondary-950', children: [_jsx(RefreshCw, { className: 'h-6 w-6' }), _jsx("p", { children: "Repeat Swap" })] }), (swap.status !== SwapStatus.Completed && swap.status !== SwapStatus.Expired && swap.status !== SwapStatus.Failed) &&
-                            _jsx("button", { type: 'button', 
-                                // onClick={() => router.push({
-                                //     pathname: `/swap/${swap.id}`,
-                                //     query: resolvePersistantQueryParams(router.query),
-                                // }, undefined, { shallow: false })}
-                                className: 'w-full inline-flex items-center gap-2 justify-center py-2.5 px-3 text-xl font-semibold bg-primary hover:opacity-90 duration-200 active:opacity-80 transition-opacity rounded-lg text-primary-text', children: _jsx("p", { children: swap.status == SwapStatus.LsTransferPending ? "View Swap" : "Complete Swap" }) })] }) })] }));
+                                                    _jsxs(_Fragment, { children: [_jsx("p", { className: "text-left text-secondary-text", children: "Destination transaction" }), swapOutputTransaction?.transaction_hash ?
+                                                                ((swapOutputTransaction?.transaction_hash && swap?.destination_exchange?.name === KnownInternalNames.Exchanges.Coinbase && (isGuid(swapOutputTransaction?.transaction_hash))) ?
+                                                                    _jsx("span", { children: _jsx(CopyButton, { toCopy: swapOutputTransaction.transaction_hash, iconClassName: "text-primary-text order-2", children: shortenAddress(swapOutputTransaction.transaction_hash) }) })
+                                                                    :
+                                                                        _jsxs("a", { target: "_blank", href: output_tx_explorer_template?.replace("{0}", swapOutputTransaction.transaction_hash), className: 'flex items-center space-x-1', rel: "noopener noreferrer", children: [_jsx("span", { children: shortenAddress(swapOutputTransaction.transaction_hash) }), _jsx(ExternalLink, { className: 'h-4' })] }))
+                                                                :
+                                                                    _jsx("span", { children: "-" })] }) })] }) }) }), swap.status === SwapStatus.Completed &&
+                            _jsx(SecondaryButton, { type: 'button', size: 'xl', onClick: handleRepeatSwap, isLoading: isRepeatLoading, children: _jsx("p", { children: isRepeatLoading ? 'Creating Swap...' : 'Repeat Swap' }) }), (swap.status !== SwapStatus.Completed && swap.status !== SwapStatus.Expired && swap.status !== SwapStatus.Failed) &&
+                            _jsx(SubmitButton, { type: 'button', onClick: handleViewCompleteSwap, children: _jsx("p", { children: swap.status == SwapStatus.LsTransferPending ? "View Swap" : "Complete Swap" }) })] }) })] }));
 };
 export default SwapDetails;

package/dist/components/Pages/SwapHistory/index.js

@@ -4,6 +4,8 @@ import Content from "./History";
 import Header from "./Header";
 import { LayerswapProvider } from "../../../context/LayerswapProvider";
 import { SwapDataProvider } from "../../../context/swap";
+import { useBackClickCallback } from "../../../context/callbackProvider";
 export const TransactionsHistory = ({ settings, themeData, apiKey }) => {
-    return (_jsx(LayerswapProvider, { apiKey: apiKey, integrator: "experimental", settings: settings, themeData: themeData, children: _jsx(SwapDataProvider, { children: _jsxs("div", { id: "widget", className: 'bg-secondary-900 sm:shadow-card sm:relative rounded-lg w-full text-primary-text overflow-y-auto sm:overflow-hidden max-h-screen h-full sm:h-[650px]', children: [_jsxs("div", { className: "overflow-y-auto flex flex-col h-full z-40 pb-4", children: [_jsx(Header, {}), _jsx("div", { className: "px-6 h-full overflow-y-auto styled-scroll max-h-[80vh]", id: 'virtualListContainer', children: _jsx(Content, {}) })] }), _jsx("div", { id: "widget_root" })] }) }) }));
+    const triggerOnBackClickCallback = useBackClickCallback();
+    return (_jsx(LayerswapProvider, { apiKey: apiKey, integrator: "experimental", settings: settings, themeData: themeData, children: _jsx(SwapDataProvider, { children: _jsxs("div", { id: "widget", className: 'bg-secondary-900 sm:shadow-card sm:relative rounded-lg w-full text-primary-text overflow-y-auto sm:overflow-hidden max-h-screen h-full sm:h-[650px]', children: [_jsxs("div", { className: "overflow-y-auto flex flex-col h-full z-40 pb-4", children: [_jsx(Header, { onBackClick: triggerOnBackClickCallback }), _jsx("div", { className: "px-6 h-full overflow-y-auto styled-scroll max-h-[80vh]", id: 'virtualListContainer', children: _jsx(Content, {}) })] }), _jsx("div", { id: "widget_root" })] }) }) }));
 };

package/dist/components/{Pages/SwapPages/Form/Select → Select}/Command/CommandSelectWrapper.d.ts

@@ -1,6 +1,6 @@
 import { ISelectMenuItem } from '../Shared/Props/selectMenuItem';
 import { SelectMenuItemGroup } from './commandSelect';
-import { LeafletHeight } from '../../../../../Modal/leaflet';
+import { LeafletHeight } from '../../Modal/leaflet';
 type CommandSelectWrapperProps = {
     setValue: (value: ISelectMenuItem) => void;
     values: ISelectMenuItem[];
@@ -9,6 +9,7 @@ type CommandSelectWrapperProps = {
     searchHint: string;
     disabled: boolean;
     valueGrouper: (values: ISelectMenuItem[]) => SelectMenuItemGroup[];
+    groupedCurrencies?: SelectMenuItemGroup[];
     isLoading: boolean;
     modalHeight?: LeafletHeight;
     valueDetails?: React.ReactNode;
@@ -16,6 +17,7 @@ type CommandSelectWrapperProps = {
     modalContent?: React.ReactNode;
     direction?: string;
     header?: string;
+    walletComp?: React.ReactNode;
 };
-export default function CommandSelectWrapper<T>({ setValue, value, disabled, placeholder, searchHint, values, valueGrouper, isLoading, modalHeight, modalContent, header, valueDetails }: CommandSelectWrapperProps): import("react/jsx-runtime").JSX.Element;
+export default function CommandSelectWrapper<T>({ setValue, value, disabled, placeholder, searchHint, values, valueGrouper, isLoading, modalHeight, modalContent, valueDetails, }: CommandSelectWrapperProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Select/Command/CommandSelectWrapper.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useState } from 'react';
+import { ChevronDown } from 'lucide-react';
+import CommandSelect from './commandSelect';
+import { ImageWithFallback } from '../../../components/Common/ImageWithFallback';
+export default function CommandSelectWrapper({ setValue, value, disabled, placeholder, searchHint, values, valueGrouper, isLoading, modalHeight, modalContent, valueDetails, }) {
+    const [showModal, setShowModal] = useState(false);
+    function openModal() {
+        setShowModal(true);
+    }
+    const handleSelect = useCallback((item) => {
+        setValue(item);
+        setShowModal(false);
+    }, [setValue]);
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "flex items-center relative", children: _jsxs("button", { type: "button", onClick: openModal, disabled: disabled, className: "rounded-lg focus-peer:ring-primary focus-peer:border-secondary-400 focus-peer:border focus-peer:ring-1 focus:outline-hidden disabled:cursor-not-allowed relative grow h-12 flex items-center text-left justify-bottom w-full pl-3 pr-2 py-2 bg-secondary-600 font-semibold", children: [_jsxs("span", { className: 'flex grow text-left items-center text-xs md:text-base', children: [value?.imgSrc && _jsx("div", { className: "flex items-center", children: _jsx("div", { className: "shrink-0 h-6 w-6 relative", children: _jsx(ImageWithFallback, { src: value.imgSrc, alt: "Project Logo", height: "40", width: "40", loading: "eager", fetchPriority: 'high', className: "rounded-md object-contain" }) }) }), value ?
+                                    _jsx("span", { className: "ml-3 flex font-medium flex-auto space-x-1 text-primary-buttonTextColor items-center", children: valueDetails || value.name })
+                                    :
+                                        _jsx("span", { className: "block font-medium text-primary-text-tertiary flex-auto items-center", children: placeholder })] }), _jsx("span", { className: "ml-3 right-0 flex items-center pr-2 pointer-events-none  text-primary-text", children: !disabled && _jsx(ChevronDown, { className: "h-4 w-4", "aria-hidden": "true" }) })] }) }), _jsx(CommandSelect, { setShow: setShowModal, setValue: handleSelect, show: showModal, value: value, searchHint: searchHint, valueGrouper: valueGrouper, values: values, isLoading: isLoading, modalHeight: modalHeight, modalContent: modalContent })] }));
+}

package/dist/components/{Pages/SwapPages/Form/Select → Select}/Command/commandSelect.d.ts

@@ -1,7 +1,7 @@
 import { ISelectMenuItem } from '../Shared/Props/selectMenuItem';
 import React from "react";
 import { SelectProps } from '../Shared/Props/SelectProps';
-import { LeafletHeight } from '../../../../../Modal/leaflet';
+import { LeafletHeight } from '../../Modal/leaflet';
 export interface CommandSelectProps extends SelectProps {
     show: boolean;
     setShow: (value: boolean) => void;

package/dist/components/Select/Command/commandSelect.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandWrapper } from '../../shadcn/command';
+import React from "react";
+import useWindowDimensions from '../../../hooks/useWindowDimensions';
+import SelectItem from '../Shared/SelectItem';
+import SpinIcon from '../../Icons/spinIcon';
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '../../shadcn/accordion';
+import VaulDrawer from '../../Modal/vaulModal';
+import { Search } from 'lucide-react';
+export class SelectMenuItemGroup {
+    constructor(init) {
+        Object.assign(this, init);
+    }
+}
+export default function CommandSelect({ values, setValue, show, setShow, searchHint, valueGrouper, isLoading, modalHeight = 'full', modalContent, header }) {
+    const { isDesktop, isMobile, windowSize } = useWindowDimensions();
+    let groups = valueGrouper(values);
+    const inputRef = React.useRef(null);
+    return (_jsx(VaulDrawer, { header: header, show: show, setShow: setShow, modalId: 'comandSelect', onAnimationEnd: () => { isDesktop && show && inputRef.current?.focus(); }, children: _jsx(VaulDrawer.Snap, { id: 'item-1', style: { height: isMobile && windowSize.height ? `${(windowSize.height * 0.8).toFixed()}px` : '' }, openFullHeight: isDesktop || (isMobile && !windowSize.height), children: _jsxs(CommandWrapper, { children: [searchHint &&
+                        _jsx(CommandInput, { autoFocus: isDesktop, placeholder: "Search", children: _jsx("div", { className: "pl-2", children: _jsx(Search, { className: "w-6 h-6 text-secondary-text" }) }) }), modalContent, !isLoading ?
+                        _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: "No results found." }), groups.filter(g => g.items?.length > 0).map((group) => {
+                                    return (_jsx(Group, { group: group }, group.name));
+                                })] })
+                        :
+                            _jsx("div", { className: 'flex justify-center h-full items-center', children: _jsx(SpinIcon, { className: "animate-spin h-5 w-5" }) })] }) }) }));
+}
+const Group = ({ group }) => {
+    const [openValues, setOpenValues] = React.useState([]);
+    const toggleAccordionItem = (value) => {
+        setOpenValues((prev) => prev.includes(value) ? prev.filter((v) => v !== value) : [...prev, value]);
+    };
+    return _jsx(CommandGroup, { heading: _jsx("span", { className: 'text-secondary-text pl-2', children: group.name.toUpperCase() }), children: _jsx(Accordion, { type: "multiple", value: openValues, children: group.items.map((item, index) => {
+                return (_jsx(GroupItem, { item: item, underline: index + 1 < group.items.length, onTriggerSelect: toggleAccordionItem }, item.id));
+            }) }) });
+};
+const GroupItem = ({ item, underline, onTriggerSelect }) => {
+    return (_jsxs(AccordionItem, { value: item.name, children: [_jsx(CommandItem, { value: `${item.name} ${item.subItems?.map(si => si.name).join(" ")}`, onSelect: () => {
+                    onTriggerSelect(item.name);
+                }, children: _jsx(AccordionTrigger, { children: _jsx(SelectItem, { item: item, underline: underline }) }) }, item.id), _jsx(AccordionContent, { className: "rounded-md", children: _jsx("div", { className: 'ml-8 border-l border-secondary-500 my-2', children: item.subItems?.map((subItem, index) => _jsx(CommandItem, { value: `${item.name} ${subItem.name}`, onSelect: () => { }, children: _jsx(SelectItem, { item: subItem }, index) }, subItem.id)) }) })] }));
+};

package/dist/components/{Pages/SwapPages/Form/Select → Select}/Popover/PopoverSelect.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { CommandItem, CommandList, CommandWrapper } from '../../../../../shadcn/command';
+import { CommandItem, CommandList, CommandWrapper } from '../../shadcn/command';
 import SelectItem from '../Shared/SelectItem';
 export default function PopoverSelect({ values, value, setValue }) {
     let upperValue = false;
-    return (_jsx(CommandWrapper, { children: _jsx(CommandList, { className: 'max-h-[265px]', children: values.map((item, index) => {
+    return (_jsx(CommandWrapper, { children: _jsx(CommandList, { children: values.map((item, index) => {
                 const shouldGroupped = !upperValue && item.isAvailable && index !== 0;
                 if (shouldGroupped) {
                     upperValue = true;

package/dist/components/Select/Popover/PopoverSelectWrapper.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from 'react';
+import { ChevronDown } from 'lucide-react';
+import { Popover, PopoverContent, PopoverTrigger } from '../../shadcn/popover';
+import PopoverSelect from './PopoverSelect';
+import { ImageWithFallback } from '../../../components/Common/ImageWithFallback';
+export default function PopoverSelectWrapper({ setValue, value, values, placeholder, disabled, }) {
+    const [showModal, setShowModal] = useState(false);
+    const handleSelect = useCallback((item) => {
+        setValue(item);
+        setShowModal(false);
+    }, [setValue]);
+    if (!values?.length)
+        return _jsx(Placeholder, { placeholder: placeholder });
+    return (_jsxs(Popover, { open: showModal, onOpenChange: () => !disabled && setShowModal(!showModal), children: [_jsx(PopoverTrigger, { asChild: true, children: value ?
+                    _jsx("div", { className: "border-secondary-500 rounded-lg border focus-peer:ring-primary focus-peer:border-secondary-400 focus-peer:border focus-peer:ring-1 focus:outline-hidden disabled:cursor-not-allowed relative grow h-12 flex items-center text-left justify-bottom w-full pl-3 pr-2 py-2 bg-secondary-600 font-semibold align-sub", children: _jsxs("button", { type: 'button', className: 'w-full py-0 border-transparent bg-transparent font-semibold rounded-md flex items-center justify-between', children: [_jsxs("span", { className: "flex items-center text-xs md:text-base", children: [_jsx("div", { className: "shrink-0 h-6 w-6 relative", children: value.imgSrc && _jsx(ImageWithFallback, { src: value.imgSrc, alt: "Project Logo", fetchPriority: 'high', height: "40", width: "40", className: "rounded-md object-contain" }) }), _jsx("span", { className: "text-primary-text ml-3 block", children: value.name })] }), _jsx("span", { className: "ml-1 flex items-center pointer-events-none text-primary-text", children: !disabled && _jsx(ChevronDown, { className: "h-4 w-4", "aria-hidden": "true" }) })] }) })
+                    :
+                        _jsx("div", { className: "rounded-lg focus-peer:ring-primary focus-peer:border-secondary-400 focus-peer:border focus-peer:ring-1 focus:outline-hidden disabled:cursor-not-allowed relative grow h-12 flex items-center text-left justify-bottom w-full pl-3 pr-2 py-2 bg-secondary-600 border border-secondary-500 font-semibold align-sub ", children: _jsxs("button", { type: 'button', className: 'w-full py-0 border-transparent bg-transparent font-semibold rounded-md flex items-center justify-between', children: [_jsx("div", { className: "disabled:cursor-not-allowed relative grow flex items-center text-left w-full font-semibold", children: _jsx("span", { className: "flex grow text-left items-center", children: _jsx("span", { className: "block text-xs md:text-base font-medium text-primary-text-tertiary flex-auto items-center", children: placeholder }) }) }), _jsx("span", { className: "ml-1 flex items-center pointer-events-none text-primary-text", children: !disabled && _jsx(ChevronDown, { className: "h-4 w-4", "aria-hidden": "true" }) })] }) }) }), _jsx(PopoverContent, { className: "w-fit", children: _jsx(PopoverSelect, { setValue: handleSelect, value: value, values: values }) })] }));
+}
+const Placeholder = ({ placeholder }) => {
+    return (_jsx("div", { className: "rounded-lg focus-peer:ring-primary focus-peer:border-secondary-400 focus-peer:border focus-peer:ring-1 focus:outline-hidden disabled:cursor-not-allowed relative grow h-12 flex items-center text-left justify-bottom w-full pl-3 pr-2 py-2 bg-secondary-600 border border-secondary-500 font-semibold align-sub ", children: _jsx("div", { className: "disabled:cursor-not-allowed relative grow flex items-center text-left w-full font-semibold", children: _jsx("span", { className: "flex grow text-left items-center", children: _jsx("span", { className: "block text-xs md:text-base font-medium text-primary-text-tertiary flex-auto items-center", children: placeholder }) }) }) }));
+};
+const LockedAsset = ({ value }) => {
+    return (_jsx("div", { className: "rounded-lg focus-peer:ring-primary focus-peer:border-secondary-400 focus-peer:border focus-peer:ring-1 focus:outline-hidden disabled:cursor-not-allowed relative grow h-12 flex items-center text-left justify-bottom w-full pl-3 pr-2 py-2 bg-secondary-600 border border-secondary-500 font-semibold align-sub ", children: _jsx("div", { className: 'w-full border-transparent bg-transparent font-semibold rounded-md', children: _jsxs("span", { className: "flex items-center text-xs md:text-base", children: [_jsx("div", { className: "shrink-0 h-6 w-6 relative", children: value?.imgSrc && _jsx(ImageWithFallback, { src: value?.imgSrc, alt: "Project Logo", fetchPriority: 'high', height: "40", width: "40", className: "rounded-md object-contain" }) }), _jsx("span", { className: "ml-3 block truncate text-primary-text", children: value?.name })] }) }) }));
+};

package/dist/components/Select/Selector/Index.d.ts

@@ -0,0 +1,28 @@
+import { ReactNode } from "react";
+export declare const Selector: ({ children }: {
+    children: any;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const useSelectorState: () => {
+    setIsOpen: (value: import("react").SetStateAction<boolean>) => void;
+    isOpen: boolean;
+    shouldFocus: boolean;
+    setShouldFocus: (value: import("react").SetStateAction<boolean>) => void;
+};
+type ContentChildProps = {
+    closeModal: () => void;
+    shouldFocus: boolean;
+};
+type SelectContentProps = {
+    header?: ReactNode;
+    searchHint?: string;
+    children: ((props: ContentChildProps) => JSX.Element);
+    isLoading: boolean;
+};
+export declare const SelectorContent: (props: SelectContentProps) => import("react/jsx-runtime").JSX.Element;
+type SelectTriggerProps = {
+    disabled: boolean;
+    children: React.ReactNode | React.ReactNode[];
+    className?: string;
+};
+export declare const SelectorTrigger: (props: SelectTriggerProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Select/Selector/Index.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Modal, ModalContent, ModalTrigger, useModalState } from "../../../components/Modal/modalWithoutAnimation";
+export const Selector = ({ children }) => {
+    return (_jsx(Modal, { children: children }));
+};
+export const useSelectorState = () => {
+    return useModalState();
+};
+export const SelectorContent = (props) => {
+    const { children, header } = props;
+    return (_jsx(ModalContent, { header: header, children: children }));
+};
+export const SelectorTrigger = (props) => {
+    return _jsx(ModalTrigger, { ...props });
+};

package/dist/components/Select/Selector/SelectItem.d.ts

@@ -0,0 +1,30 @@
+import { ReactNode } from 'react';
+type SelectItemWrapperProps = {
+    className?: string;
+    children: JSX.Element | JSX.Element[];
+};
+declare const SelectItem: {
+    ({ children, className }: SelectItemWrapperProps): import("react/jsx-runtime").JSX.Element;
+    Logo: ({ imgSrc, altText, className }: SelectItemLogoProps) => import("react/jsx-runtime").JSX.Element;
+    Title: ({ children, className }: SelectItemTitleProps) => import("react/jsx-runtime").JSX.Element;
+    DetailedTitle: ({ children, className, title, secondary, secondaryImageAlt, secondaryLogoSrc, logoClassName }: SelectItemDetailedTitleProps) => import("react/jsx-runtime").JSX.Element;
+};
+type SelectItemLogoProps = {
+    imgSrc?: string;
+    altText: string;
+    className?: string;
+};
+type SelectItemTitleProps = {
+    className?: string;
+    children?: ReactNode;
+};
+type SelectItemDetailedTitleProps = {
+    className?: string;
+    children?: ReactNode;
+    title: ReactNode;
+    secondary: ReactNode;
+    secondaryImageAlt: string;
+    secondaryLogoSrc: string | undefined;
+    logoClassName?: string;
+};
+export { SelectItem };

package/dist/components/Select/Selector/SelectItem.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ImageWithFallback } from '../../../components/Common/ImageWithFallback';
+import clsx from 'clsx';
+const SelectItem = ({ children, className }) => {
+    return _jsx("div", { className: clsx("flex items-center justify-between pl-2 pr-3 overflow-hidden cursor-pointer relative gap-2 py-1.5", className), children: children });
+};
+const Logo = ({ imgSrc, altText, className = 'rounded-md' }) => {
+    return _jsx("div", { className: "shrink-0 relative h-9 w-9", children: imgSrc ? _jsx("div", { className: 'inline-flex relative', children: _jsx(ImageWithFallback, { src: imgSrc, alt: altText, height: "36", width: "36", loading: "eager", className: `${className} object-contain` }) })
+            :
+                _jsx("div", { className: `${className} object-contain bg-gray-200 h-9 w-9 rounded-full` }) });
+};
+const Title = ({ children, className }) => {
+    return _jsx("div", { className: `flex justify-between w-full text-base items-center pb-0.5 ${className}`, children: children });
+};
+const DetailedTitle = ({ children, className, title, secondary, secondaryImageAlt, secondaryLogoSrc, logoClassName }) => {
+    return _jsxs(Title, { className: clsx("w-full grid grid-cols-9", className), children: [_jsxs("div", { className: "col-span-5 sm:col-span-7 truncate flex flex-col gap-1 leading-5 align-middle font-medium", children: [_jsx("span", { className: "align-middle leading-5 text-base", children: title }), _jsxs("div", { className: "flex items-center space-x-1 align-middle", children: [secondaryLogoSrc && _jsx(ImageWithFallback, { src: secondaryLogoSrc, alt: secondaryImageAlt, height: "16", width: "16", loading: "eager", className: clsx("h-4 w-4 object-contain rounded", logoClassName) }), _jsx("span", { className: "text-secondary-text text-xs whitespace-nowrap", children: secondary })] })] }), _jsx("div", { className: 'col-span-4 sm:col-span-2 place-self-end self-center', children: children })] });
+};
+SelectItem.Logo = Logo;
+SelectItem.Title = Title;
+SelectItem.DetailedTitle = DetailedTitle;
+export { SelectItem };

package/dist/components/Select/Shared/Props/SelectProps.js

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

package/dist/components/{Pages/SwapPages/Form/Select → Select}/Shared/Props/selectMenuItem.d.ts

@@ -4,9 +4,14 @@ export declare class SelectMenuItem<T> implements ISelectMenuItem {
     order: number;
     imgSrc: string;
     displayName?: React.ReactNode;
+    logo?: React.ReactNode;
+    noWalletsConnectedText?: React.ReactNode;
+    extendedAddress?: React.ReactNode;
+    subItems?: ISelectMenuItem[];
+    balanceAmount?: React.ReactNode;
     isAvailable: boolean;
     group?: string;
-    details?: JSX.Element | JSX.Element[];
+    details?: JSX.Element | JSX.Element[] | null;
     badge?: JSX.Element | JSX.Element[];
     leftIcon?: JSX.Element | JSX.Element[];
     baseObject: T;
@@ -17,9 +22,14 @@ export interface ISelectMenuItem {
     name: string;
     imgSrc: string;
     displayName?: React.ReactNode;
+    logo?: React.ReactNode;
+    noWalletsConnectedText?: React.ReactNode;
+    extendedAddress?: React.ReactNode;
+    subItems?: ISelectMenuItem[];
+    balanceAmount?: React.ReactNode;
     group?: string;
     isAvailable: boolean;
-    details?: JSX.Element | JSX.Element[];
+    details?: JSX.Element | JSX.Element[] | null;
     badge?: JSX.Element | JSX.Element[];
     leftIcon?: JSX.Element | JSX.Element[];
     order?: number;

package/dist/components/{Pages/SwapPages/Form/Select → Select}/Shared/SelectItem.d.ts

@@ -1,4 +1,5 @@
 import { ISelectMenuItem } from "./Props/selectMenuItem";
-export default function SelectItem({ item }: {
+export default function SelectItem({ item, underline }: {
     item: ISelectMenuItem;
+    underline?: boolean;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/components/Select/Shared/SelectItem.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ImageWithFallback } from "../../../components/Common/ImageWithFallback";
+export default function SelectItem({ item, underline }) {
+    return (_jsx("div", { className: `flex items-center justify-between gap-3 w-full overflow-hidden`, children: _jsxs("div", { className: `gap-4 relative flex items-center w-full`, children: [_jsx("div", { className: "shrink-0", children: _jsx("div", { children: item.leftIcon }) }), _jsx("div", { className: `h-8 w-8 shrink-0 relative`, children: item.imgSrc && (_jsx(ImageWithFallback, { src: item.imgSrc, alt: "Project Logo", height: "40", width: "40", loading: "eager", className: "rounded-md object-contain" })) }), _jsxs("div", { className: `flex justify-between w-full items-center py-3 ${underline ? 'border-b border-secondary-700' : ''}`, children: [_jsx("span", { className: "flex items-center pb-0.5 text-base", children: item.displayName || item.name }), item.badge && _jsx("span", { className: "ml-2", children: item.badge }), _jsx("span", { className: "ml-auto pl-2", children: item.details })] })] }) }));
+}

package/dist/components/Wallet/WalletComponents/ConnectedWallets.d.ts

@@ -1,2 +1,11 @@
 export declare const WalletsHeader: () => import("react/jsx-runtime").JSX.Element;
+type WalletsIconsProps = {
+    wallets: {
+        id: string;
+        displayName?: string;
+        icon: (props: any) => React.JSX.Element;
+    }[];
+};
+export declare const WalletsIcons: ({ wallets }: WalletsIconsProps) => import("react/jsx-runtime").JSX.Element;
 export declare const WalletsMenu: () => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Wallet/WalletComponents/ConnectedWallets.js

@@ -11,33 +11,33 @@ export const WalletsHeader = () => {
     if (wallets.length > 0) {
         return (_jsx(WalletsHeaderWalletsList, { wallets: wallets }));
     }
-    return (_jsx(ConnectButton, { children: _jsx("div", { className: "p-1.5 justify-self-start text-secondary-text hover:bg-secondary-500 hover:text-primary-text focus:outline-none inline-flex rounded-lg items-center", children: _jsx(WalletIcon, { className: "h-6 w-6 mx-0.5", strokeWidth: "2" }) }) }));
+    return (_jsx(ConnectButton, { children: _jsx("div", { className: "p-1.5 max-sm:p-2 active:animate-press-down justify-self-start text-secondary-text hover:bg-secondary-500 max-sm:bg-secondary-500 hover:text-primary-text focus:outline-hidden inline-flex rounded-lg items-center", children: _jsx(WalletIcon, { className: "h-6 w-6 mx-0.5", strokeWidth: "2" }) }) }));
 };
 const WalletsHeaderWalletsList = ({ wallets }) => {
     const [openModal, setOpenModal] = useState(false);
-    return _jsxs(_Fragment, { children: [_jsx("button", { type: "button", onClick: () => setOpenModal(true), className: "p-1.5 justify-self-start text-secondary-text hover:bg-secondary-500 hover:text-primary-text focus:outline-none inline-flex rounded-lg items-center", children: _jsx(WalletsIcons, { wallets: wallets }) }), _jsx(VaulDrawer, { show: openModal, setShow: setOpenModal, header: `Connected wallets`, modalId: "connectedWallets", children: _jsx(VaulDrawer.Snap, { id: "item-1", children: _jsx(WalletsList, { wallets: wallets }) }) })] });
+    return _jsxs(_Fragment, { children: [_jsx("button", { type: "button", onClick: () => setOpenModal(true), className: "p-1.5 max-sm:p-2 justify-self-start text-secondary-text hover:bg-secondary-500 max-sm:bg-secondary-500 hover:text-primary-text focus:outline-hidden inline-flex rounded-lg items-center active:animate-press-down", children: _jsx(WalletsIcons, { wallets: wallets }) }), _jsx(VaulDrawer, { show: openModal, setShow: setOpenModal, header: `Connected wallets`, modalId: "connectedWallets", children: _jsx(VaulDrawer.Snap, { id: "item-1", children: _jsx(WalletsList, { wallets: wallets }) }) })] });
 };
-const WalletsIcons = ({ wallets }) => {
+export const WalletsIcons = ({ wallets }) => {
     const uniqueWallets = wallets.filter((wallet, index, self) => index === self.findIndex((t) => t.id === wallet.id));
     const firstWallet = uniqueWallets[0];
     const secondWallet = uniqueWallets[1];
     return (_jsxs("div", { className: "-space-x-2 flex", children: [firstWallet?.displayName &&
-                _jsx(firstWallet.icon, { className: "rounded-full border-2 border-secondary-600 bg-secondary-700 flex-shrink-0 h-6 w-6" }), secondWallet?.displayName &&
-                _jsx(secondWallet.icon, { className: "rounded-full border-2 border-secondary-600 bg-secondary-700 flex-shrink-0 h-6 w-6" }), uniqueWallets.length > 2 &&
-                _jsx("div", { className: "h-6 w-6 flex-shrink-0 rounded-full justify-center p-1 bg-secondary-600 text-primary-text overlfow-hidden text-xs", children: _jsxs("span", { children: [_jsx("span", { children: "+" }), uniqueWallets.length - 2] }) })] }));
+                _jsx(firstWallet.icon, { className: "rounded-full border-2 border-secondary-600 bg-secondary-700 shrink-0 h-6 w-6" }), secondWallet?.displayName &&
+                _jsx(secondWallet.icon, { className: "rounded-full border-2 border-secondary-600 bg-secondary-700 shrink-0 h-6 w-6" }), uniqueWallets.length > 2 &&
+                _jsx("div", { className: "h-6 w-6 shrink-0 rounded-full justify-center p-1 bg-secondary-600 text-primary-text overlfow-hidden text-xs", children: _jsxs("span", { children: [_jsx("span", { children: "+" }), uniqueWallets.length - 2] }) })] }));
 };
 export const WalletsMenu = () => {
     const { wallets } = useWallet();
     if (wallets.length > 0) {
         return (_jsx(WalletsMenuWalletsList, { wallets: wallets }));
     }
-    return (_jsx(ConnectButton, { children: _jsxs("div", { className: " border border-primary disabled:border-primary-900 items-center space-x-1 disabled:text-opacity-40 disabled:bg-primary-900 disabled:cursor-not-allowed relative w-full flex justify-center font-semibold rounded-md transform hover:brightness-125 transition duration-200 ease-in-out bg-primary py-3 md:px-3 bg-primary/20 border-none !text-primary !px-4", children: [_jsx("span", { className: "order-first absolute left-0 inset-y-0 flex items-center pl-3", children: _jsx(WalletIcon, { className: "h-6 w-6", strokeWidth: "2" }) }), _jsx("span", { className: "grow text-center", children: "Connect a wallet" })] }) }));
+    return (_jsx(ConnectButton, { children: _jsxs("div", { className: "active:animate-press-down border border-primary disabled:border-primary-900 items-center space-x-1 disabled:text-primary/40 disabled:bg-primary-900 disabled:cursor-not-allowed relative w-full flex justify-center font-semibold rounded-xl transform hover:brightness-125 transition duration-200 ease-in-out py-3 md:px-3 bg-primary/20 border-none text-primary! px-4!", children: [_jsx("span", { className: "order-first absolute left-0 inset-y-0 flex items-center pl-3", children: _jsx(WalletIcon, { className: "h-6 w-6", strokeWidth: "2" }) }), _jsx("span", { className: "grow text-center", children: "Connect a wallet" })] }) }));
 };
 const WalletsMenuWalletsList = ({ wallets }) => {
     const wallet = wallets[0];
     const [openModal, setOpenModal] = useState(false);
-    return _jsxs(_Fragment, { children: [_jsx("button", { onClick: () => setOpenModal(true), type: "button", className: "py-3 px-4 bg-secondary-700 flex items-center w-full rounded-md space-x-1 disabled:text-opacity-40 disabled:bg-primary-900 disabled:cursor-not-allowed relative font-semibold transform border border-secondary-500 hover:bg-secondary-600 transition duration-200 ease-in-out", children: wallets.length === 1 ?
-                    _jsxs("div", { className: "flex gap-4 items-start", children: [_jsx(wallet.icon, { className: 'h-5 w-5' }), !wallet.isLoading && wallet.address && _jsx("p", { children: shortenAddress(wallet.address) })] })
+    return _jsxs(_Fragment, { children: [_jsx("button", { onClick: () => setOpenModal(true), type: "button", className: "py-3 px-4 bg-secondary-500 flex items-center w-full rounded-xl space-x-1 disabled:text-secondary-text/40 disabled:bg-primary-900 disabled:cursor-not-allowed relative font-semibold transform border border-secondary-500 hover:bg-secondary-400 transition duration-200 ease-in-out outline-hidden", children: wallets.length === 1 ?
+                    _jsxs("div", { className: "flex gap-4 items-start text-primary-text", children: [_jsx(wallet.icon, { className: 'h-5 w-5' }), !wallet.isLoading && wallet.address && _jsx("p", { children: shortenAddress(wallet.address) })] })
                     :
                         _jsxs(_Fragment, { children: [_jsx("div", { className: "flex justify-center w-full", children: "Connected wallets" }), _jsx("div", { className: "place-items-end absolute left-2.5", children: _jsx(WalletsIcons, { wallets: wallets }) })] }) }), _jsx(VaulDrawer, { show: openModal, setShow: setOpenModal, header: `Connected wallets`, modalId: "connectedWallets", children: _jsx(VaulDrawer.Snap, { id: "item-1", children: _jsx(WalletsList, { wallets: wallets }) }) })] });
 };