@layerswap/widget 0.1.17 → 0.1.20

package/dist/components/Input/Amount/Balance.js

@@ -9,9 +9,9 @@ const Balance = ({ values, direction }) => {
     const token = direction === 'from' ? fromCurrency : toCurrency;
     const network = direction === 'from' ? from : to;
     const address = direction === 'from' ? selectedSourceAccount?.address : destination_address;
-    const { balance, isBalanceLoading, isError } = useSWRBalance(address, network);
+    const { balance, isBalanceLoading } = useSWRBalance(address, network);
     const tokenBalance = balance?.find(b => b?.network === from?.name && b?.token === token?.symbol);
-    const truncatedBalance = tokenBalance?.amount && truncateDecimals(tokenBalance?.amount, token?.precision);
+    const truncatedBalance = tokenBalance?.amount !== undefined ? truncateDecimals(tokenBalance.amount, token?.precision) : '';
     const previouslySelectedSource = useRef(from);
     useEffect(() => {
         previouslySelectedSource.current = from;
@@ -21,9 +21,8 @@ const Balance = ({ values, direction }) => {
         previouslySelectedDestination.current = to;
     }, [to, destination_address]);
     if (isBalanceLoading)
-        return _jsx("div", { className: 'h-[10px] w-10 inline-flex bg-gray-500 rounded-sm animate-pulse' });
-    return (_jsx(_Fragment, { children: (network && token && network) &&
-            (truncatedBalance !== undefined && !isNaN(truncatedBalance)) &&
-            _jsx("span", { children: truncatedBalance > 0 ? truncatedBalance.toFixed(token?.precision) : truncatedBalance }) }));
+        return _jsx("div", { className: 'h-[10px] w-10 inline-flex bg-gray-500 rounded-sm animate-pulse pl-2 ml-2' });
+    return (_jsx(_Fragment, { children: network && token && truncatedBalance &&
+            _jsx("span", { className: "pl-2", children: truncatedBalance }) }));
 };
 export default Balance;

package/dist/components/Pages/SwapPages/Form/FeeDetails/DetailedEstimates.js

@@ -2,19 +2,27 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useFormikContext } from "formik";
 import { useFee } from "../../../../../context/feeContext";
 import AverageCompletionTime from "../../../../Common/AverageCompletionTime";
+import { truncateDecimals } from "../../../../utils/RoundDecimals";
 const DetailedEstimates = () => {
     const { values } = useFormikContext();
     const { fromCurrency } = values;
     const { fee, isFeeLoading } = useFee();
-    const fee_amount = fee?.quote.total_fee;
-    const parsedFee = fee && parseFloat(Number(fee_amount).toFixed(fromCurrency?.precision));
+    const feeDiscount = fee?.quote?.fee_discount || 0;
+    const feeDiscountInUsd = feeDiscount * (fee?.quote.source_token?.price_in_usd || 0);
+    const fee_amount = fee?.quote.total_fee && fee.quote.total_fee - feeDiscount;
+    const fullFeeAmount = fee?.quote.total_fee || 0;
+    const fullParsedFeeAmount = fullFeeAmount && parseFloat(Number(fullFeeAmount).toFixed(fromCurrency?.precision));
+    const parsedFee = fee && truncateDecimals(Number(fee_amount), fromCurrency?.precision);
     const currencyName = fromCurrency?.symbol || " ";
-    const feeAmountInUsd = fee?.quote.total_fee_in_usd;
-    const displayFee = parsedFee?.toFixed(fromCurrency?.precision);
+    const feeAmountInUsd = fee?.quote.total_fee_in_usd && (fee?.quote.total_fee_in_usd - feeDiscountInUsd);
     const displayFeeInUsd = feeAmountInUsd ? (feeAmountInUsd < 0.01 ? '<$0.01' : `$${feeAmountInUsd?.toFixed(2)}`) : null;
     return _jsxs("div", { className: "flex flex-col w-full gap-2", children: [fee && fee.quote.avg_completion_time !== '00:00:00' ?
                 _jsx("div", { className: "flex justify-between w-full items-center", children: _jsxs("div", { className: "flex items-baseline w-full justify-between gap-1", children: [_jsx("label", { className: "inline-flex items-center text-left text-primary-buttonTextColor", children: "Estimated time" }), _jsx("div", { className: "text-right text-secondary-text", children: _jsx(AverageCompletionTime, { avgCompletionTime: fee.quote.avg_completion_time }) })] }) })
                 :
-                    _jsx(_Fragment, {}), _jsx("div", { className: "flex justify-between w-full items-center", children: _jsxs("div", { className: "flex items-baseline w-full justify-between gap-1", children: [_jsx("label", { className: "inline-flex items-center text-left text-primary-buttonTextColor", children: "Fee" }), _jsx("div", { className: "text-right text-secondary-text ", children: isFeeLoading ? (_jsx("div", { className: 'h-[10px] w-16 inline-flex bg-gray-500 rounded-sm animate-pulse' })) : (_jsxs("div", { children: [_jsxs("span", { children: [displayFee || '-', " "] }), _jsx("span", { children: parsedFee ? currencyName : '' }), displayFeeInUsd !== undefined && (_jsxs("span", { className: "text-xs ml-1 font-medium", children: ["(", displayFeeInUsd, ")"] }))] })) })] }) })] });
+                    _jsx(_Fragment, {}), _jsx("div", { className: "flex justify-between w-full items-center", children: _jsxs("div", { className: "flex items-baseline w-full justify-between gap-1", children: [_jsx("label", { className: "inline-flex items-center text-left text-primary-buttonTextColor", children: "Fee" }), _jsx("div", { className: "text-right text-secondary-text ", children: isFeeLoading ? (_jsx("div", { className: 'h-[10px] w-16 inline-flex bg-gray-500 rounded-sm animate-pulse' })) : (_jsxs("div", { children: [feeDiscount > 0 ?
+                                        _jsxs("span", { className: "ml-1", children: [_jsxs("span", { className: "line-through", children: [_jsx("span", { children: fullParsedFeeAmount || '-' }), " ", _jsx("span", { children: fee_amount == 0 ? currencyName : '' })] }), _jsxs("span", { className: "ml-1", children: [_jsx("span", { children: fee_amount && fee_amount > 0 ? parsedFee : 'Free' }), " ", _jsx("span", { children: fee_amount && fee_amount > 0 ? currencyName : '' })] })] })
+                                        :
+                                            _jsxs("span", { children: [parsedFee || '-', " "] }), _jsx("span", { children: (parsedFee && !feeDiscount) ? currencyName : '' }), displayFeeInUsd !== undefined && fee_amount ? (_jsxs("span", { className: "text-xs ml-1 font-medium", children: ["(", displayFeeInUsd, ")"] }))
+                                        : null] })) })] }) })] });
 };
 export default DetailedEstimates;

package/dist/components/Pages/SwapPages/Form/SecondaryComponents/ReserveGasNote.js

@@ -18,11 +18,11 @@ const ReserveGasNote = ({ onSubmit }) => {
         && minAllowedAmount
         && walletBalance.amount > minAllowedAmount
         && !(maxAllowedAmount && (walletBalance.amount > (maxAllowedAmount + networkGas))));
-    const gasToReserveFormatted = mightBeOutOfGas ? truncateDecimals(networkGas, values?.fromCurrency?.precision) : 0;
-    return (_jsx(_Fragment, { children: mightBeOutOfGas && gasToReserveFormatted > 0 &&
+    const gasToReserveFormatted = mightBeOutOfGas ? truncateDecimals(networkGas, values?.fromCurrency?.precision) : '';
+    return (_jsx(_Fragment, { children: mightBeOutOfGas && gasToReserveFormatted &&
             ((Number(walletBalance.amount) < Number(networkGas)) ?
                 _jsx(WarningMessage, { messageType: "warning", className: "mt-4", children: _jsx("div", { className: "font-normal text-primary-text", children: "You don't have enough funds to cover gas fees." }) })
                 :
-                    _jsx(WarningMessage, { messageType: "warning", className: "mt-4", children: _jsxs("div", { className: "font-normal text-primary-text", children: [_jsx("div", { children: "You might not be able to complete the transaction." }), _jsxs("div", { onClick: () => onSubmit(walletBalance, networkGas), className: "cursor-pointer border-b border-dotted border-primary-text w-fit hover:text-primary hover:border-primary text-primary-text", children: [_jsx("span", { children: "Reserve" }), " ", _jsx("span", { children: gasToReserveFormatted.toFixed(values.fromCurrency?.precision) }), " ", _jsx("span", { children: values?.fromCurrency?.symbol }), " ", _jsx("span", { children: "for gas." })] })] }) })) }));
+                    _jsx(WarningMessage, { messageType: "warning", className: "mt-4", children: _jsxs("div", { className: "font-normal text-primary-text", children: [_jsx("div", { children: "You might not be able to complete the transaction." }), _jsxs("div", { onClick: () => onSubmit(walletBalance, networkGas), className: "cursor-pointer border-b border-dotted border-primary-text w-fit hover:text-primary hover:border-primary text-primary-text", children: [_jsx("span", { children: "Reserve" }), " ", _jsx("span", { children: gasToReserveFormatted }), " ", _jsx("span", { children: values?.fromCurrency?.symbol }), " ", _jsx("span", { children: "for gas." })] })] }) })) }));
 };
 export default ReserveGasNote;

package/dist/components/Pages/SwapPages/Withdraw/Summary/Summary.js

@@ -20,7 +20,7 @@ const Summary = ({ sourceAccountAddress, sourceCurrency, destinationCurrency, so
     const nativeCurrency = refuel?.token;
     const truncatedRefuelAmount = nativeCurrency && !!refuel ?
         truncateDecimals(refuel.amount, nativeCurrency?.precision) : null;
-    const refuelAmountInUsd = nativeCurrency && ((nativeCurrency?.price_in_usd || 1) * (truncatedRefuelAmount || 0)).toFixed(2);
+    const refuelAmountInUsd = nativeCurrency && ((nativeCurrency?.price_in_usd || 1) * (Number(truncatedRefuelAmount) || 0)).toFixed(2);
     const destAddress = (hideAddress && hideTo && account) ? account : destinationAddress;
     return (_jsx("div", { children: _jsxs("div", { className: "font-normal flex flex-col w-full relative z-10 space-y-4", children: [_jsxs("div", { className: "flex items-center justify-between w-full", children: [_jsxs("div", { className: "flex items-center gap-3", children: [sourceExchange ?
                                     _jsx("img", { src: sourceExchange.logo, alt: sourceExchange.display_name, width: 32, height: 32, className: "rounded-lg" })

package/dist/components/Pages/SwapPages/Withdraw/WalletTransferContent.js

@@ -19,6 +19,7 @@ const WalletTransferContent = () => {
     const { source_token, source_network: swap_source_network } = swap || {};
     const source_network = swap_source_network && networks.find(n => n.name === swap_source_network?.name);
     const { provider } = useWallet(source_network, 'withdrawal');
+    const availableWallets = provider?.connectedWallets?.filter(c => !c.isNotAvailable) || [];
     const [openModal, setOpenModal] = useState(false);
     const changeWallet = async (wallet, address) => {
         provider?.switchAccount && provider.switchAccount(wallet, address);
@@ -34,15 +35,6 @@ const WalletTransferContent = () => {
                 address: activeWallet.address
             });
         }
-        else if (selectedSourceAccount && activeWallet && !activeWallet.addresses.some(a => a.toLowerCase() === selectedSourceAccount.address.toLowerCase())) {
-            const selectedWalletIsConnected = provider.connectedWallets?.some(w => w.addresses.some(a => a.toLowerCase() === selectedSourceAccount.address.toLowerCase()));
-            if (selectedWalletIsConnected) {
-                provider.switchAccount && provider.switchAccount(selectedSourceAccount.wallet, selectedSourceAccount.address);
-            }
-            else {
-                setSelectedSourceAccount(undefined);
-            }
-        }
     }, [activeWallet?.address, setSelectedSourceAccount, provider, selectedSourceAccount?.address]);
     const { balance, isBalanceLoading } = useSWRBalance(selectedSourceAccount?.address, source_network);
     const walletBalance = source_network && balance?.find(b => b?.network === source_network?.name && b?.token === source_token?.symbol);
@@ -59,10 +51,10 @@ const WalletTransferContent = () => {
     }
     return _jsxs(_Fragment, { children: [_jsx("div", { className: "grid content-end", children: selectedWallet &&
                     source_network &&
-                    _jsxs("div", { onClick: () => setOpenModal(true), className: "cursor-pointer group/addressItem flex rounded-lg justify-between space-x-3 items-center shadow-sm mt-1.5 text-primary-text bg-secondary-700 border-secondary-500 border disabled:cursor-not-allowed h-12 leading-4 font-medium w-full px-3 py-7", children: [_jsx(AddressWithIcon, { addressItem: { address: accountAddress, group: AddressGroup.ConnectedWallet }, connectedWallet: selectedWallet, network: source_network, balance: (walletBalanceAmount !== undefined && source_token) ? { amount: walletBalanceAmount, symbol: source_token?.symbol, isLoading: isBalanceLoading } : undefined }), _jsx(ChevronRight, { className: "h-4 w-4" })] }) }), source_network &&
+                    _jsxs("div", { onClick: () => setOpenModal(true), className: "cursor-pointer group/addressItem flex rounded-lg justify-between space-x-3 items-center shadow-sm mt-1.5 text-primary-text bg-secondary-700 border-secondary-500 border disabled:cursor-not-allowed h-12 leading-4 font-medium w-full px-3 py-7", children: [_jsx(AddressWithIcon, { addressItem: { address: accountAddress, group: AddressGroup.ConnectedWallet }, connectedWallet: selectedWallet, network: source_network, balance: (walletBalanceAmount && source_token) ? { amount: Number(walletBalanceAmount), symbol: source_token?.symbol, isLoading: isBalanceLoading } : undefined }), _jsx(ChevronRight, { className: "h-4 w-4" })] }) }), source_network &&
                 source_token &&
                 provider &&
-                provider.connectedWallets &&
-                _jsx(VaulDrawer, { show: openModal, setShow: setOpenModal, header: `Send from`, modalId: "connectedWallets", children: _jsx(VaulDrawer.Snap, { id: 'item-1', children: _jsx(WalletsList, { network: source_network, token: source_token, onSelect: changeWallet, selectable: true, wallets: provider.connectedWallets, provider: provider }) }) })] });
+                availableWallets &&
+                _jsx(VaulDrawer, { show: openModal, setShow: setOpenModal, header: `Send from`, modalId: "connectedWallets", children: _jsx(VaulDrawer.Snap, { id: 'item-1', children: _jsx(WalletsList, { network: source_network, token: source_token, onSelect: changeWallet, selectable: true, wallets: availableWallets, provider: provider }) }) })] });
 };
 export default WalletTransferContent;

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

@@ -29,7 +29,7 @@ export const WalletItem = ({ selectable, wallet, network, onWalletSelect, token,
     const { balance, isBalanceLoading } = useSWRBalance(wallet.address, networkWithTokens);
     const walletBalance = balance?.find(b => b?.token === token?.symbol);
     const isSelected = selectable && (wallet.addresses.length == 1 && wallet.address == selectedAddress);
-    const walletBalanceAmount = walletBalance?.amount && truncateDecimals(walletBalance?.amount, token?.precision);
+    const walletBalanceAmount = walletBalance?.amount !== undefined ? truncateDecimals(walletBalance.amount, token?.precision) : '';
     return (_jsxs("div", { ...props, className: "rounded-md outline-none text-primary-tex", children: [_jsxs("div", { onClick: () => (selectable && wallet.addresses.length == 1 && onWalletSelect) && onWalletSelect(wallet, wallet.address), className: clsx('w-full relative items-center justify-between gap-2 flex rounded-lg outline-none bg-secondary-700 text-primary-text p-3 group/addressItem', {
                     'hover:bg-secondary-600 cursor-pointer': selectable && wallet.addresses.length == 1,
                     'bg-secondary-800 py-2': wallet.addresses.length > 1
@@ -41,7 +41,7 @@ export const WalletItem = ({ selectable, wallet, network, onWalletSelect, token,
                                 :
                                     _jsxs("div", { className: "w-full inline-flex items-center justify-between grow", children: [_jsxs("div", { children: [!wallet.isLoading && wallet.address &&
                                                         _jsx(ExtendedAddress, { address: wallet.address, network: network, addressClassNames: "font-normal text-sm", onDisconnect: () => wallet && wallet.disconnect() }), _jsx("p", { className: "text-xs text-secondary-text", children: wallet.displayName })] }), walletBalanceAmount !== undefined && token &&
-                                                _jsx("span", { className: "text-sm flex space-x-2 justif-end", children: walletBalanceAmount != undefined && !isNaN(walletBalanceAmount) ?
+                                                _jsx("span", { className: "text-sm flex space-x-2 justif-end", children: walletBalanceAmount ?
                                                         _jsx("div", { className: "text-right text-secondary-text font-normal text-sm", children: isBalanceLoading ?
                                                                 _jsx("div", { className: 'h-[14px] w-20 inline-flex bg-gray-500 rounded-sm animate-pulse' })
                                                                 :
@@ -58,18 +58,11 @@ const NestedWalletAddress = ({ selectable, address, network, onWalletSelect, tok
     const { balance, isBalanceLoading } = useSWRBalance(address, networkWithTokens);
     const isNestedSelected = selectable && address == selectedAddress;
     const nestedWalletBalance = balance?.find(b => b?.token === token?.symbol);
-    const nestedWalletBalanceAmount = nestedWalletBalance?.amount && truncateDecimals(nestedWalletBalance?.amount, token?.precision);
+    const nestedWalletBalanceAmount = nestedWalletBalance?.amount !== undefined ? truncateDecimals(nestedWalletBalance.amount, token?.precision) : '';
     return (_jsxs("div", { ...props, onClick: () => (selectable && onWalletSelect) && onWalletSelect(wallet, address), className: clsx('flex w-full justify-between gap-3 items-center pl-6 pr-4 py-2 group/addressItem', {
             'hover:bg-secondary-600 cursor-pointer': selectable
         }), children: [_jsxs("div", { className: 'flex items-center w-fit gap-3', children: [_jsx("div", { className: "flex bg-secondary-400  items-center justify-center rounded-md h-8 w-8 overflow-hidden", children: _jsx(AddressIcon, { className: "scale-150 h-8 w-8 p-0.5", address: address, size: 32 }) }), _jsx("div", { children: !wallet.isLoading && address &&
-                            _jsx(ExtendedAddress, { address: address, network: network, addressClassNames: "font-normal text-sm", onDisconnect: () => wallet && wallet.disconnect() }) })] }), _jsxs("div", { className: "inline-flex gap-2", children: [nestedWalletBalanceAmount !== undefined && token &&
-                        _jsx("span", { className: "text-sm flex space-x-2 justif-end", children: nestedWalletBalanceAmount != undefined && !isNaN(nestedWalletBalanceAmount) ?
-                                _jsx("div", { className: "text-right text-secondary-text font-normal text-sm", children: isBalanceLoading ?
-                                        _jsx("div", { className: 'h-[14px] w-20 inline-flex bg-gray-500 rounded-sm animate-pulse' })
-                                        :
-                                            _jsxs(_Fragment, { children: [_jsx("span", { children: nestedWalletBalanceAmount }), " ", _jsx("span", { children: token?.symbol })] }) })
-                                :
-                                    _jsx(_Fragment, {}) }), isNestedSelected &&
+                            _jsx(ExtendedAddress, { address: address, network: network, addressClassNames: "font-normal text-sm", onDisconnect: () => wallet && wallet.disconnect() }) })] }), _jsxs("div", { className: "inline-flex gap-2", children: [nestedWalletBalanceAmount && token && (_jsx("span", { className: "text-sm flex space-x-2 justify-end", children: _jsx("div", { className: "text-right text-secondary-text font-normal text-sm", children: isBalanceLoading ? (_jsx("div", { className: "h-[14px] w-20 inline-flex bg-gray-500 rounded-sm animate-pulse" })) : (_jsxs(_Fragment, { children: [_jsx("span", { children: nestedWalletBalanceAmount }), " ", _jsx("span", { children: token?.symbol })] })) }) })), isNestedSelected &&
                         _jsx("div", { className: "flex h-6 items-center", children: _jsx(FilledCheck, {}) })] })] }));
 };
 export default WalletsList;

package/dist/components/utils/RoundDecimals.d.ts

@@ -1,4 +1,4 @@
 export declare function roundDecimals(value: number, decimals: number): number;
-export declare function truncateDecimals(value: number, decimals?: number): number;
+export declare function truncateDecimals(value: number, decimals?: number): string | 0;
 export declare function truncateDecimalsToFloor(number: number, decimalPlaces: number): number;
 export declare function findIndexOfFirstNonZeroAfterComma(number: any): number | null;

package/dist/components/utils/RoundDecimals.js

@@ -4,8 +4,12 @@ export function roundDecimals(value, decimals) {
     }
     return Number(Math.ceil(Number(value + 'e' + decimals)) + 'e-' + decimals);
 }
-export function truncateDecimals(value, decimals) {
-    return Number(value?.toFixed(decimals || 0));
+export function truncateDecimals(value, decimals = 0) {
+    if (value == 0)
+        return 0;
+    const factor = Math.pow(10, decimals);
+    const truncated = Math.trunc(value * factor) / factor;
+    return truncated.toFixed(decimals).replace(/\.?0+$/, '');
 }
 export function truncateDecimalsToFloor(number, decimalPlaces) {
     let factor = Math.pow(10, decimalPlaces);

package/dist/index.css

@@ -2950,6 +2950,9 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
 .layerswap-styles .underline {
   text-decoration-line: underline;
 }
+.layerswap-styles .line-through {
+  text-decoration-line: line-through;
+}
 .layerswap-styles .no-underline {
   text-decoration-line: none;
 }

package/dist/lib/layerSwapApiClient.d.ts

@@ -131,6 +131,7 @@ export type SwapQuote = {
     destination_token?: Token;
     receive_amount: number;
     min_receive_amount: number;
+    fee_discount?: number;
     total_fee: number;
     total_fee_in_usd: number;
     blockchain_fee: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@layerswap/widget",
-  "version": "0.1.17",
+  "version": "0.1.20",
   "description": "Streamline your asset transaction experience with Layerswap Widget across 50+ blockchains and 15+ exchanges.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",