@layerswap/widget 0.1.18 → 1.0.0-alpha0.1

package/dist/components/Input/Address/AddressPicker/{ConnectedWallets/index.js → ConnectedWallets.js}

@@ -1,30 +1,33 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronDown, Plus, RefreshCw } from "lucide-react";
 import { useState } from "react";
-import ResizablePanel from "../../../../Common/ResizablePanel";
-import WalletIcon from "../../../../Icons/WalletIcon";
-import { WalletItem } from "../../../../Wallet/WalletComponents/WalletsList";
+import ResizablePanel from "../../../../components/Common/ResizablePanel";
+import WalletIcon from "../../../../components/Icons/WalletIcon";
+import { WalletItem } from "../../../../components/Wallet/WalletComponents/WalletsList";
+import { useConnectModal } from "../../../../components/Wallet/WalletModal";
 const ConnectedWallets = ({ provider, wallets, onClick, onConnect, destination, destination_address }) => {
     const [isLoading, setIsLoading] = useState(false);
     const [showIncompatibleWallets, setShowIncompatibleWallets] = useState(false);
+    const { connect } = useConnectModal();
     const connectedWallets = provider.connectedWallets?.filter(wallet => !wallet.isNotAvailable);
-    const connect = async () => {
+    const handleConnect = async () => {
         setIsLoading(true);
-        const result = await provider.connectWallet();
+        const result = await connect(provider);
         if (onConnect && result)
             onConnect(result);
         setIsLoading(false);
     };
     //TODO: should check for real compatibility, in the future network can have wallets from multiple providers
     const notCompatibleWallets = wallets.filter(wallet => wallet.providerName !== provider.name || wallet.isNotAvailable);
-    return _jsxs("div", { className: "space-y-2", children: [connectedWallets && connectedWallets?.length > 0 &&
-                _jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex items-center justify-between w-full", children: [_jsxs("div", { className: "text-sm font-medium text-secondary-text flex items-center space-x-1", children: [_jsx(WalletIcon, { className: "h-4 w-4 stroke-2", "aria-hidden": "true" }), _jsxs("p", { className: "text-sm font-medium text-secondary-text", children: [_jsx("span", { children: "Connected" }), " ", _jsx("span", { children: connectedWallets.length > 1 ? 'Wallets' : 'Wallet' })] })] }), _jsxs("button", { type: "button", onClick: connect, disabled: isLoading, className: "text-secondary-text hover:text-primary-text text-xs rounded-lg flex items-center gap-1.5 transition-colors duration-200", children: [isLoading ?
+    return (notCompatibleWallets?.length || connectedWallets?.length) ? _jsxs("div", { className: "flex flex-col gap-2", children: [connectedWallets && connectedWallets?.length > 0 &&
+                _jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex items-center justify-between w-full", children: [_jsxs("div", { className: "text-sm font-medium text-secondary-text flex items-center space-x-1", children: [_jsx(WalletIcon, { className: "h-4 w-4 stroke-2", "aria-hidden": "true" }), _jsxs("p", { className: "text-sm font-medium text-secondary-text", children: [_jsx("span", { children: "Connected" }), " ", _jsx("span", { children: connectedWallets.length > 1 ? 'Wallets' : 'Wallet' })] })] }), _jsxs("button", { type: "button", onClick: handleConnect, disabled: isLoading, className: "text-secondary-text hover:text-primary-text text-xs rounded-lg flex items-center gap-1.5 transition-colors duration-200", children: [isLoading ?
                                             _jsx(RefreshCw, { className: "h-3 w-auto animate-spin" })
                                             :
                                                 _jsx(Plus, { className: "h-3 w-auto" }), _jsx("p", { children: "Connect new" })] })] }), connectedWallets.map((wallet, index) => {
-                            return _jsx(WalletItem, { wallet: wallet, selectable: true, network: destination, onWalletSelect: onClick, selectedAddress: destination_address }, `${index}${wallet.providerName}`);
+                            return _jsx(WalletItem, { account: wallet, selectable: true, network: destination, onWalletSelect: onClick, selectedAddress: destination_address }, `${index}${wallet.providerName}`);
                         })] }), notCompatibleWallets.length > 0 &&
-                (notCompatibleWallets.length > 1 ? (_jsx(ResizablePanel, { children: _jsxs("div", { className: "flex flex-col gap-2 pl-2", children: [_jsxs("button", { onClick: () => setShowIncompatibleWallets(!showIncompatibleWallets), disabled: isLoading, type: "button", className: "flex items-center justify-between w-full", children: [_jsxs("p", { className: "text-sm font-medium text-secondary-text", children: [_jsx("span", { children: "Not compatible with" }), " ", _jsx("span", { children: destination.display_name })] }), _jsx("div", { className: "text-secondary-text hover:text-primary-text text-xs rounded-lg flex items-center gap-1.5 transition-colors duration-200", children: isLoading ? (_jsx(RefreshCw, { className: "h-3 w-auto animate-spin" })) : (_jsxs("div", { className: "space-x-1 flex", children: [notCompatibleWallets?.map((wallet) => (_jsx("div", { className: "inline-flex items-center relative", children: _jsx(wallet.icon, { className: "w-4 h-4 rounded-sm bg-secondary-800" }) }, wallet.address))), _jsx(ChevronDown, { className: `h-5 w-auto ${showIncompatibleWallets ? 'rotate-180' : ''} transition-all duration-200` })] })) })] }), showIncompatibleWallets &&
-                                notCompatibleWallets.map((wallet, index) => (_jsx("div", { className: "group/addressItem w-full rounded-md hover:!bg-secondary-700 transition duration-200 opacity-50 cursor-not-allowed", children: _jsx(WalletItem, { wallet: wallet, selectable: true, network: destination, selectedAddress: undefined }) }, `${index}${wallet.address}`)))] }) })) : (_jsxs("div", { className: "relative group/notCompatible w-full rounded-md transition duration-200 opacity-50 cursor-not-allowed", children: [_jsxs("div", { className: "absolute right-2 top-1/2 -translate-y-1/2 w-max px-2 py-0.5 text-secondary-text font-medium text-sm rounded-md transition-opacity duration-200 bg-secondary-500 group-hover/notCompatible:opacity-100 opacity-0 max-w-[150px] break-words sm:max-w-none sm:whitespace-nowrap z-20", children: ["Not compatible with ", destination.display_name] }), _jsx("div", { className: "w-full z-10", children: _jsx(WalletItem, { wallet: notCompatibleWallets[0], selectable: true, network: destination, selectedAddress: undefined }) })] })))] });
+                (notCompatibleWallets.length > 1 ? (_jsx(ResizablePanel, { children: _jsxs("div", { className: "flex flex-col gap-2 pl-2", children: [_jsxs("button", { onClick: () => setShowIncompatibleWallets(!showIncompatibleWallets), disabled: isLoading, type: "button", className: "flex items-center justify-between w-full", children: [_jsxs("p", { className: "text-sm font-medium text-secondary-text", children: [_jsx("span", { children: "Not compatible with" }), " ", _jsx("span", { children: destination.display_name })] }), _jsx("div", { className: "text-secondary-text hover:text-primary-text text-xs rounded-lg flex items-center gap-1.5 transition-colors duration-200", children: isLoading ? (_jsx(RefreshCw, { className: "h-3 w-auto animate-spin" })) : (_jsxs("div", { className: "space-x-1 flex", children: [notCompatibleWallets?.map((wallet) => (_jsx("div", { className: "inline-flex items-center relative", children: _jsx(wallet.icon, { className: "w-4 h-4 rounded-xs bg-secondary-800" }) }, wallet.address))), _jsx(ChevronDown, { className: `h-5 w-auto ${showIncompatibleWallets ? 'rotate-180' : ''} transition-all duration-200` })] })) })] }), showIncompatibleWallets &&
+                                notCompatibleWallets.map((wallet, index) => (_jsx("div", { className: "group/addressItem w-full rounded-md hover:bg-secondary-700! transition duration-200 opacity-50 cursor-not-allowed", children: _jsx(WalletItem, { account: wallet, selectable: true, network: destination, selectedAddress: undefined }) }, `${index}${wallet.address}`)))] }) })) : (_jsxs("div", { className: "relative group/notCompatible w-full rounded-md transition duration-200 opacity-50 cursor-not-allowed", children: [_jsxs("div", { className: "absolute right-2 top-1/2 -translate-y-1/2 w-max px-2 py-0.5 text-secondary-text font-medium text-sm rounded-md transition-opacity duration-200 bg-secondary-500 group-hover/notCompatible:opacity-100 opacity-0 max-w-[150px] break-words sm:max-w-none sm:whitespace-nowrap z-20", children: ["Not compatible with ", destination.display_name] }), _jsx("div", { className: "w-full z-10", children: _jsx(WalletItem, { account: notCompatibleWallets[0], selectable: true, network: destination, selectedAddress: undefined }) })] })))] })
+        : null;
 };
 export default ConnectedWallets;

package/dist/components/Input/Address/AddressPicker/ManualAddressInput.d.ts

@@ -1,9 +1,10 @@
 import { FC } from "react";
-import { SwapFormValues } from "../../../Pages/SwapPages/Form/SwapFormValues";
 import { Partner } from "../../../../Models/Partner";
 import { NetworkType } from "../../../../Models/Network";
 import { AddressItem } from ".";
 import { Wallet } from "../../../../Models/WalletProvider";
+import { FormikHelpers } from "formik";
+import { SwapFormValues } from "../../../../components/Pages/Swap/Form/SwapFormValues";
 type AddressInput = {
     manualAddress: string;
     setManualAddress: (address: string) => void;
@@ -15,7 +16,7 @@ type AddressInput = {
     partner?: Partner;
     name: string;
     inputReference: React.Ref<HTMLInputElement>;
-    setFieldValue: (field: string, value: any) => void;
+    setFieldValue: FormikHelpers<SwapFormValues>['setFieldValue'];
     close: () => void;
     addresses: AddressItem[] | undefined;
     connectedWallet: Wallet | undefined;

package/dist/components/Input/Address/AddressPicker/ManualAddressInput.js

@@ -7,7 +7,7 @@ import { AddressGroup } from ".";
 import { addressFormat } from "../../../../lib/address/formatter";
 import AddressWithIcon from "./AddressWithIcon";
 const ManualAddressInput = ({ manualAddress, setManualAddress, setNewAddress, values, name, inputReference, setFieldValue, close, addresses, connectedWallet, partner }) => {
-    const { to: destination, toExchange: destinationExchange } = values || {};
+    const { to: destination } = values || {};
     const [isFocused, setIsFocused] = useState(false);
     const placeholder = "Enter address";
     const handleRemoveNewDepositeAddress = useCallback(async () => {
@@ -19,9 +19,8 @@ const ManualAddressInput = ({ manualAddress, setManualAddress, setNewAddress, va
     const handleSaveNewAddress = () => {
         if (isValidAddress(manualAddress, destination)) {
             if (destination) {
-                setNewAddress({ address: manualAddress, networkType: destinationExchange ? destinationExchange.name : destination.type });
+                setNewAddress({ address: manualAddress, networkType: destination.type });
             }
-            setFieldValue(name, manualAddress);
             setManualAddress("");
         }
         close();
@@ -31,14 +30,14 @@ const ManualAddressInput = ({ manualAddress, setManualAddress, setNewAddress, va
         errorMessage = `Enter a valid ${values.to?.display_name} address`;
     }
     const addressFromList = destination && addresses?.find(a => addressFormat(a.address, destination) === addressFormat(manualAddress, destination));
-    return (_jsx("div", { className: "text-left", children: _jsxs("div", { className: "flex flex-wrap flex-col md:flex-row items-center", children: [_jsxs("div", { className: "relative flex grow rounded-lg shadow-sm focus-within:ring-0 focus-within:ring-primary focus-within:border-primary w-full lg:w-fit", children: [_jsx("input", { onChange: handleInputChange, value: manualAddress, placeholder: placeholder, autoCorrect: "off", type: "text", name: name, id: name, ref: inputReference, tabIndex: 0, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), onKeyDown: (e) => {
+    return (_jsx("div", { className: "text-left", children: _jsxs("div", { className: "flex flex-wrap flex-col md:flex-row items-center", children: [_jsxs("div", { className: "relative flex grow rounded-lg shadow-xs focus-within:ring-0 focus-within:ring-primary focus-within:border-primary w-full lg:w-fit", children: [_jsx("input", { onChange: handleInputChange, value: manualAddress, placeholder: placeholder, autoCorrect: "off", type: "text", name: name, id: name, ref: inputReference, tabIndex: 0, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), onKeyDown: (e) => {
                                 if (e.key === 'Enter') {
                                     handleSaveNewAddress();
                                 }
-                            }, className: 'pr-12 disabled:cursor-not-allowed grow h-12 border border-secondary-800 focus:border-primary leading-4 placeholder:text-primary-text-placeholder/80 focus:placeholder:text-left placeholder:font-normal focus:placeholder:pl-0 placeholder:pl-8 block font-semibold w-full bg-secondary-700 rounded-lg truncate hover:overflow-x-scroll focus:ring-0 focus:outline-none' }), !isFocused && !manualAddress &&
-                            _jsx(Pencil, { className: "h-5 w-5 text-primary-text-placeholder absolute inset-y-0 top-[calc(50%-10px)] left-4" }), manualAddress &&
+                            }, className: 'pr-12 disabled:cursor-not-allowed grow h-12 border border-secondary-800 focus:border-primary leading-4 placeholder:text-primary-text-tertiary/80 focus:placeholder:text-left placeholder:font-normal focus:placeholder:pl-0 placeholder:pl-8 block font-semibold w-full !bg-secondary-500 rounded-lg truncate hover:overflow-x-scroll focus:ring-0 focus:outline-hidden' }), !isFocused && !manualAddress &&
+                            _jsx(Pencil, { className: "h-5 w-5 text-primary-text-tertiary absolute inset-y-0 top-[calc(50%-10px)] left-4" }), manualAddress &&
                             _jsx("button", { type: "button", className: "absolute top-[calc(50%-10px)] right-4 hover:bg-secondary-400", onClick: handleRemoveNewDepositeAddress, children: _jsx(FilledX, { className: "h-5 w-5" }) })] }), errorMessage &&
                     _jsx("div", { className: "basis-full w-full text-start text-xs text-primary", children: errorMessage }), manualAddress && !errorMessage && destination &&
-                    _jsx("div", { onClick: handleSaveNewAddress, className: `group/addressItem text-left min-h-12 cursor-pointer space-x-2 bg-secondary-800 shadow-xl flex text-sm rounded-md items-center w-full transform hover:bg-secondary-700 transition duration-200 p-3 hover:shadow-xl mt-3`, children: _jsx(AddressWithIcon, { addressItem: addressFromList || { address: manualAddress, group: AddressGroup.ManualAdded }, connectedWallet: connectedWallet, partner: partner, network: destination }) })] }) }));
+                    _jsx("div", { onClick: handleSaveNewAddress, className: `group/addressItem text-left min-h-12 cursor-pointer space-x-2 bg-secondary-600 shadow-xl flex text-sm rounded-md items-center w-full transform hover:bg-secondary-700 transition duration-200 p-3 hover:shadow-xl mt-3`, children: _jsx(AddressWithIcon, { addressItem: addressFromList || { address: manualAddress, group: AddressGroup.ManualAdded }, partner: partner, network: destination }) })] }) }));
 };
 export default ManualAddressInput;

package/dist/components/Input/Address/AddressPicker/index.d.ts

@@ -1,5 +1,5 @@
 import { FC } from "react";
-import { AddressBookItem } from "../../../../lib/layerSwapApiClient";
+import { AddressBookItem } from "../../../../lib/apiClients/layerSwapApiClient";
 import { Partner } from "../../../../Models/Partner";
 import { Network } from "../../../../Models/Network";
 import { Wallet } from "../../../../Models/WalletProvider";

package/dist/components/Input/Address/AddressPicker/index.js

@@ -1,19 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useFormikContext } from "formik";
-import { forwardRef, useCallback, useEffect, useRef, useState } from "react";
+import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { isValidAddress } from "../../../../lib/address/validator";
 import useWallet from "../../../../hooks/useWallet";
 import { addressFormat } from "../../../../lib/address/formatter";
 import ManualAddressInput from "./ManualAddressInput";
-import Modal from "../../../Modal/modal";
-import ConnectWalletButton from "./ConnectedWallets/ConnectWalletButton";
-import ExchangeNote from "./ExchangeNote";
+import Modal from "../../../../components/Modal/modal";
+import ConnectWalletButton from "../../../../components/Common/ConnectWalletButton";
 import AddressBook from "./AddressBook";
 import AddressButton from "./AddressButton";
-import { useQueryState } from "../../../../context/query";
-import { useAddressesStore } from "../../../../stores/addressesStore";
+import { useInitialSettings } from "../../../../context/settings";
 import ConnectedWallets from "./ConnectedWallets";
-import { useSwapDataState } from "../../../../context/swap";
+import { useBalanceAccounts, useUpdateBalanceAccount } from "../../../../context/balanceAccounts";
 export var AddressGroup;
 (function (AddressGroup) {
     AddressGroup["ConnectedWallet"] = "Connected wallet";
@@ -23,108 +21,116 @@ export var AddressGroup;
 })(AddressGroup || (AddressGroup = {}));
 const AddressPicker = forwardRef(function Address({ showAddressModal, setShowAddressModal, name, canFocus, close, address_book, disabled, partner, children }, ref) {
     const { values, setFieldValue } = useFormikContext();
-    const query = useQueryState();
-    const { destination_address, to: destination, toExchange: destinationExchange, toCurrency: destinationAsset } = values;
-    const groupedAddresses = useAddressesStore(state => state.addresses);
-    const setAddresses = useAddressesStore(state => state.setAddresses);
-    const { selectedSourceAccount } = useSwapDataState();
-    const { provider, wallets } = useWallet(destinationExchange ? undefined : destination, 'autofil');
-    const connectedWallets = provider?.connectedWallets;
+    const initialSettings = useInitialSettings();
+    const { destination_address, to: destination } = values;
+    const balanceAccounts = useBalanceAccounts("to");
+    const selectDestinationAccount = useUpdateBalanceAccount("to");
+    const { provider, wallets } = useWallet(destination, 'autofil');
+    const connectedWallets = provider?.connectedWallets?.filter(w => !w.isNotAvailable) || [];
     const connectedWalletskey = connectedWallets?.map(w => w.addresses.join('')).join('');
-    const defaultWallet = provider?.connectedWallets?.sort((x, y) => (x.isActive === y.isActive) ? 0 : x.isActive ? -1 : 1).find(w => !w.isNotAvailable);
-    const defaultAddress = (selectedSourceAccount && defaultWallet?.addresses.find(a => a.toLowerCase() == selectedSourceAccount?.address.toLowerCase())) || defaultWallet?.address;
+    const defaultAccount = useMemo(() => balanceAccounts.find(w => w.provider?.name === provider?.name), [balanceAccounts, provider?.name]);
     const [manualAddress, setManualAddress] = useState('');
     const [newAddress, setNewAddress] = useState();
     useEffect(() => {
-        if (!destination || destinationExchange)
-            setFieldValue("destination_address", undefined);
-    }, [destinationExchange, destination]);
+        if (!destination && destination_address)
+            updateDestAddress('');
+    }, [destination, destination_address]);
     useEffect(() => {
-        if (destination_address && !isValidAddress(destination_address, destination)) {
-            setFieldValue("destination_address", '');
-        }
+        if (destination_address && !isValidAddress(destination_address, destination))
+            updateDestAddress('');
     }, [destination, destination_address]);
     const inputReference = useRef(null);
-    const previouslyAutofilledAddress = useRef(undefined);
-    useEffect(() => {
-        const groupedAddresses = destination && resolveAddressGroups({ address_book, destination, destinationExchange, wallets: connectedWallets, newAddress, addressFromQuery: query.destAddress });
-        if (groupedAddresses)
-            setAddresses(groupedAddresses);
-    }, [address_book, destination, destinationExchange, newAddress, query.destAddress, connectedWalletskey]);
+    const groupedAddresses = useMemo(() => {
+        return resolveAddressGroups({
+            address_book,
+            destination,
+            wallets: connectedWallets,
+            newAddress,
+            addressFromQuery: initialSettings.destination_address
+        });
+    }, [address_book, destination, connectedWallets, newAddress, initialSettings.destination_address, connectedWalletskey]);
     const destinationAddressItem = destination && destination_address ?
-        groupedAddresses?.find(a => a.address.toLowerCase() === destination_address.toLowerCase()) || { address: destination_address, group: AddressGroup.ManualAdded }
+        groupedAddresses?.find(a => a.address.toLowerCase() === destination_address.toLowerCase())
         : undefined;
     const addressBookAddresses = groupedAddresses?.filter(a => a.group !== AddressGroup.ConnectedWallet);
     const connectedWallet = (destination && destination_address) ? connectedWallets?.find(w => w.addresses?.find(a => addressFormat(a, destination) === addressFormat(destination_address, destination))) : undefined;
     const handleSelectAddress = useCallback((address) => {
         const selected = destination && groupedAddresses?.find(a => addressFormat(a.address, destination) === addressFormat(address, destination));
         const formattedAddress = selected?.address;
-        setFieldValue("destination_address", formattedAddress);
-        if (selected?.wallet)
-            previouslyAutofilledAddress.current = selected?.address;
+        updateDestAddress(formattedAddress);
         close();
     }, [close, setFieldValue, groupedAddresses]);
-    const autofillConnectedWallet = useCallback(() => {
-        if (destination_address || !destination)
-            return;
-        setFieldValue("destination_address", defaultAddress);
-        previouslyAutofilledAddress.current = defaultAddress;
-        if (showAddressModal && defaultWallet)
-            setShowAddressModal(false);
-    }, [setFieldValue, setShowAddressModal, showAddressModal, destination, defaultWallet, defaultAddress, destination_address]);
     const onConnect = (wallet) => {
-        previouslyAutofilledAddress.current = wallet.address;
-        setFieldValue("destination_address", wallet.address);
+        setFieldValue('destination_address', wallet.address);
+        selectDestinationAccount({
+            address: wallet.address,
+            id: wallet.id,
+            providerName: wallet.providerName
+        });
         close();
     };
     useEffect(() => {
-        if ((!destination_address || (previouslyAutofilledAddress.current && previouslyAutofilledAddress.current != defaultAddress)) && defaultWallet) {
-            autofillConnectedWallet();
+        if (destinationAddressItem && !defaultAccount?.address && destinationAddressItem?.group == AddressGroup.ConnectedWallet) {
+            updateDestAddress(undefined);
+            return;
         }
-    }, [defaultWallet?.address, destination_address]);
-    useEffect(() => {
-        if (previouslyAutofilledAddress && previouslyAutofilledAddress.current?.toLowerCase() === destination_address?.toLowerCase() && !connectedWallet?.address) {
-            setFieldValue("destination_address", undefined);
+        if (destination_address?.toLowerCase() !== defaultAccount?.address?.toLowerCase() && (!destinationAddressItem || destinationAddressItem?.group === AddressGroup.ConnectedWallet)) {
+            updateDestAddress(defaultAccount?.address);
+            setShowAddressModal(false);
+        }
+    }, [defaultAccount?.address, destinationAddressItem]);
+    const updateDestAddress = useCallback((address) => {
+        const wallet = destination && connectedWallets?.find(w => w.addresses?.find(a => addressFormat(a, destination) === addressFormat(address || '', destination)));
+        setFieldValue('destination_address', address);
+        if (destination && address && provider) {
+            if (wallet)
+                selectDestinationAccount({
+                    address: address,
+                    id: wallet.id,
+                    providerName: wallet.providerName
+                });
+            else
+                selectDestinationAccount({
+                    address: address || "",
+                    id: 'manually_added',
+                    providerName: provider.name,
+                });
         }
-    }, [connectedWallet?.address, previouslyAutofilledAddress]);
+    }, [destination, connectedWallets, provider, selectDestinationAccount]);
     useEffect(() => {
         if (canFocus) {
             inputReference?.current?.focus();
         }
     }, [canFocus]);
-    return (_jsxs(_Fragment, { children: [_jsx(AddressButton, { disabled: disabled, addressItem: destinationAddressItem, openAddressModal: () => setShowAddressModal(true), connectedWallet: connectedWallet, partner: partner, destination: destination, children: children({ destination, disabled, addressItem: destinationAddressItem, connectedWallet: connectedWallet, partner }) }), _jsx(Modal, { header: 'Send To', height: "80%", show: showAddressModal, setShow: setShowAddressModal, modalId: "address", children: _jsx("div", { className: 'w-full flex flex-col justify-between h-full text-primary-text', children: _jsxs("div", { className: 'flex flex-col self-center grow w-full space-y-5 h-full', children: [!destinationExchange &&
-                                !disabled
+    return (_jsxs(_Fragment, { children: [_jsx(AddressButton, { disabled: disabled, addressItem: destinationAddressItem, openAddressModal: () => setShowAddressModal(true), connectedWallet: connectedWallet, partner: partner, destination: destination, children: children({ destination, disabled, addressItem: destinationAddressItem, connectedWallet: connectedWallet, partner }) }), _jsx(Modal, { header: 'Send To', height: "80%", show: showAddressModal, setShow: setShowAddressModal, modalId: "address", children: _jsx("div", { className: 'w-full flex flex-col justify-between h-full text-primary-text', children: _jsxs("div", { className: 'flex flex-col self-center grow w-full space-y-5 h-full', children: [!disabled
                                 && destination
                                 && provider
-                                && !defaultWallet &&
-                                _jsx(ConnectWalletButton, { provider: provider, onConnect: onConnect, destination: destination }), _jsx(ManualAddressInput, { manualAddress: manualAddress, setManualAddress: setManualAddress, setNewAddress: setNewAddress, values: values, partner: partner, name: name, inputReference: inputReference, setFieldValue: setFieldValue, close: close, addresses: groupedAddresses, connectedWallet: connectedWallet }), destinationExchange &&
-                                _jsx(ExchangeNote, { destination: destination, destinationAsset: destinationAsset, destinationExchange: destinationExchange }), !disabled
+                                && !connectedWallets.length &&
+                                _jsx(ConnectWalletButton, { provider: provider, onConnect: onConnect }), _jsx(ManualAddressInput, { manualAddress: manualAddress, setManualAddress: setManualAddress, setNewAddress: (props) => { setNewAddress(props); updateDestAddress(props?.address); }, values: values, partner: partner, name: name, inputReference: inputReference, setFieldValue: setFieldValue, close: close, addresses: groupedAddresses, connectedWallet: connectedWallet }), !disabled
                                 && destination
                                 && provider
-                                && !manualAddress
-                                &&
-                                    _jsx(ConnectedWallets, { provider: provider, wallets: wallets, onClick: (wallet, address) => handleSelectAddress(address), onConnect: onConnect, destination: destination, destination_address: destination_address }), !disabled && addressBookAddresses && addressBookAddresses?.length > 0 && !manualAddress && destination &&
+                                && !manualAddress &&
+                                _jsx(ConnectedWallets, { provider: provider, wallets: wallets, onClick: (props) => handleSelectAddress(props.address), onConnect: onConnect, destination: destination, destination_address: destination_address }), !disabled && addressBookAddresses && addressBookAddresses?.length > 0 && !manualAddress && destination &&
                                 _jsx(AddressBook, { addressBook: addressBookAddresses, onSelectAddress: handleSelectAddress, destination: destination, destination_address: destination_address, partner: partner })] }) }) })] }));
 });
-const resolveAddressGroups = ({ address_book, destination, destinationExchange, wallets, newAddress, addressFromQuery, }) => {
+const resolveAddressGroups = ({ address_book, destination, wallets, newAddress, addressFromQuery, }) => {
     if (!destination)
         return;
-    const filteredAddressBook = address_book?.filter(a => destinationExchange ? a.exchanges.some(e => destinationExchange.name === e) : a.networks?.some(n => destination?.name === n) && isValidAddress(a.address, destination)) || [];
-    const recentlyUsedAddresses = filteredAddressBook.map(ra => ({ address: ra.address, date: ra.date, group: AddressGroup.RecentlyUsed, networkType: destinationExchange ? destinationExchange.name : destination.type }));
-    const networkType = destinationExchange ? destinationExchange.name : destination?.type;
+    const filteredAddressBook = address_book?.filter(a => a.networks?.some(n => destination?.name === n) && isValidAddress(a.address, destination)) || [];
+    const recentlyUsedAddresses = filteredAddressBook.map(ra => ({ address: ra.address, date: ra.date, group: AddressGroup.RecentlyUsed, networkType: destination.type }));
     let addresses = [];
     wallets?.forEach(wallet => {
         if (wallet?.addresses?.length) {
             addresses.push(...(wallet.addresses.map(a => ({ address: a, group: AddressGroup.ConnectedWallet, wallet })) || []));
         }
     });
-    if (addressFromQuery) {
+    if (addressFromQuery && isValidAddress(addressFromQuery, destination)) {
         addresses.push({ address: addressFromQuery, group: AddressGroup.FromQuery });
     }
     if (recentlyUsedAddresses.length > 0) {
         addresses = [...addresses, ...recentlyUsedAddresses];
     }
-    if (newAddress?.address && newAddress.networkType === networkType) {
+    if (newAddress?.address && newAddress.networkType === destination?.type) {
         addresses.push({ address: newAddress.address, group: AddressGroup.ManualAdded });
     }
     const uniqueAddresses = addresses.filter((a, index, self) => self.findIndex(t => addressFormat(t.address, destination) === addressFormat(a.address, destination)) === index);

package/dist/components/Input/Address/index.js

@@ -2,16 +2,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useState } from "react";
 import { useFormikContext } from "formik";
 import AddressPicker from "./AddressPicker";
-import useSWR from "swr";
-import LayerSwapApiClient from "../../../lib/layerSwapApiClient";
-import { useAuthState } from "../../../context/authContext";
 const Address = ({ partner, children }) => {
     const { values, } = useFormikContext();
-    const { authData } = useAuthState();
-    const layerswapApiClient = new LayerSwapApiClient();
-    const address_book_endpoint = authData?.access_token ? `/internal/recent_addresses` : null;
-    const { data: address_book } = useSWR(address_book_endpoint, layerswapApiClient.fetcher, { dedupingInterval: 60000 });
     const [showAddressModal, setShowAddressModal] = useState(false);
-    return (_jsx(AddressPicker, { showAddressModal: showAddressModal, setShowAddressModal: setShowAddressModal, close: () => setShowAddressModal(false), disabled: !values.to, name: "destination_address", partner: partner, address_book: address_book?.data, children: children }));
+    return (_jsx(AddressPicker, { showAddressModal: showAddressModal, setShowAddressModal: setShowAddressModal, close: () => setShowAddressModal(false), disabled: !values.to, name: "destination_address", partner: partner, children: children }));
 };
 export default Address;

package/dist/components/Input/Amount/Balance.d.ts

@@ -1,6 +1,6 @@
-import { SwapFormValues } from "../../Pages/SwapPages/Form/SwapFormValues";
+import { SwapFormValues } from "../../../components/Pages/Swap/Form/SwapFormValues";
 declare const Balance: ({ values, direction }: {
     values: SwapFormValues;
     direction: string;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element | null;
 export default Balance;

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

@@ -1,28 +1,27 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useRef } from "react";
-import { truncateDecimals } from "../../utils/RoundDecimals";
-import { useSwapDataState } from "../../../context/swap";
-import useSWRBalance from "../../../lib/balances/useSWRBalance";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { truncateDecimals } from "../../../components/utils/RoundDecimals";
+import useWallet from "../../../hooks/useWallet";
+import InfoIcon from "../../../components/Icons/InfoIcon";
+import { useSelectedAccount } from "../../../context/balanceAccounts";
+import { useBalance } from "../../../lib/balances/useBalance";
 const Balance = ({ values, direction }) => {
-    const { to, fromCurrency, toCurrency, from, destination_address } = values;
-    const { selectedSourceAccount } = useSwapDataState();
+    const { to, fromAsset: fromCurrency, toAsset: toCurrency, from, destination_address } = values;
+    const { provider } = useWallet(from, "withdrawal");
+    const selectedSourceAccount = useSelectedAccount("from", provider?.name);
     const token = direction === 'from' ? fromCurrency : toCurrency;
     const network = direction === 'from' ? from : to;
     const address = direction === 'from' ? selectedSourceAccount?.address : destination_address;
-    const { balance, isBalanceLoading } = useSWRBalance(address, network);
-    const tokenBalance = balance?.find(b => b?.network === from?.name && b?.token === token?.symbol);
-    const truncatedBalance = tokenBalance?.amount !== undefined ? truncateDecimals(tokenBalance.amount, token?.precision) : '';
-    const previouslySelectedSource = useRef(from);
-    useEffect(() => {
-        previouslySelectedSource.current = from;
-    }, [from, selectedSourceAccount?.address]);
-    const previouslySelectedDestination = useRef(to);
-    useEffect(() => {
-        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 pl-2 ml-2' });
-    return (_jsx(_Fragment, { children: network && token && truncatedBalance &&
-            _jsx("span", { className: "pl-2", children: truncatedBalance }) }));
+    const { balances, isLoading } = useBalance(address, network, { refreshInterval: 20000 });
+    const tokenBalance = balances?.find(b => b?.network === network?.name && b?.token === token?.symbol);
+    const truncatedBalance = tokenBalance?.amount !== undefined ? truncateDecimals(tokenBalance?.amount, token?.precision) : '';
+    if (!isLoading && !(network && token && tokenBalance))
+        return null;
+    return _jsx("div", { className: "min-w-4/5 -top-[1px] p-1 mx-2 relative rounded-b-lg text-center bg-secondary-400 py-0.5 text-xs text-secondary-text leading-[18px] font-normal", children: isLoading ?
+            _jsx("div", { className: 'h-[10px] w-fit px-4 inline-flex bg-gray-500 rounded-xs animate-pulse' })
+            : !truncatedBalance ?
+                _jsxs("div", { className: "flex items-center justify-center gap-1 text-orange-400", children: [_jsx(InfoIcon, { className: 'w-3 h-3' }), _jsx("span", { children: "Network issue" })] })
+                : (network && token && truncatedBalance) ?
+                    _jsx("span", { children: truncatedBalance })
+                    : _jsx("span", {}) });
 };
 export default Balance;

package/dist/components/Input/Amount/MinMax.d.ts

@@ -1,9 +1,11 @@
-import { RouteNetwork, RouteToken } from "../../../Models/Network";
+import { NetworkRoute, NetworkRouteToken } from "../../../Models/Network";
 type MinMaxProps = {
-    fromCurrency: RouteToken;
-    from: RouteNetwork;
-    limitsMaxAmount: number;
-    limitsMinAmount: number;
+    fromCurrency: NetworkRouteToken;
+    from: NetworkRoute;
+    limitsMaxAmount: number | undefined;
+    limitsMinAmount: number | undefined;
+    onActionHover: (value: number | undefined) => void;
+    depositMethod: 'wallet' | 'deposit_address' | undefined;
 };
 declare const MinMax: (props: MinMaxProps) => import("react/jsx-runtime").JSX.Element;
 export default MinMax;

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

@@ -1,32 +1,73 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import SecondaryButton from "../../Buttons/secondaryButton";
 import { useFormikContext } from "formik";
-import useSWRBalance from "../../../lib/balances/useSWRBalance";
 import useSWRGas from "../../../lib/gases/useSWRGas";
-import { useSwapDataState } from "../../../context/swap";
 import { useMemo } from "react";
-import { resolveMacAllowedAmount } from "./helpers";
+import { resolveMaxAllowedAmount } from "./helpers";
+import { updateForm } from "../../../components/Pages/Swap/Form/updateForm";
+import useWallet from "../../../hooks/useWallet";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../../../components/shadcn/tooltip";
+import { useSelectedAccount } from "../../../context/balanceAccounts";
+import { useBalance } from "../../../lib/balances/useBalance";
 const MinMax = (props) => {
     const { setFieldValue } = useFormikContext();
-    const { fromCurrency, from, limitsMinAmount, limitsMaxAmount } = props;
-    const { selectedSourceAccount } = useSwapDataState();
-    const { gas } = useSWRGas(selectedSourceAccount?.address, from, fromCurrency);
-    const { balance, mutate } = useSWRBalance(selectedSourceAccount?.address, from);
-    const gasAmount = gas || 0;
-    const handleSetMinAmount = () => {
-        setFieldValue('amount', limitsMinAmount);
-    };
-    const walletBalance = selectedSourceAccount?.address ? balance?.find(b => b?.network === from?.name && b?.token === fromCurrency?.symbol) : undefined;
-    const native_currency = from?.token;
+    const { fromCurrency, from, limitsMinAmount, limitsMaxAmount, onActionHover, depositMethod } = props;
+    const { provider } = useWallet(from, "withdrawal");
+    const selectedSourceAccount = useSelectedAccount("from", provider?.name);
+    const { gasData } = useSWRGas(selectedSourceAccount?.address, from, fromCurrency);
+    const { balances, mutate: mutateBalances } = useBalance(selectedSourceAccount?.address, from);
+    const walletBalance = useMemo(() => {
+        return selectedSourceAccount?.address ? balances?.find(b => b?.network === from?.name && b?.token === fromCurrency?.symbol) : undefined;
+    }, [selectedSourceAccount?.address, balances, from?.name, fromCurrency?.symbol]);
+    const gasAmount = gasData?.gas || 0;
+    const native_currency = gasData?.token || from?.token;
+    const shouldPayGasWithTheToken = (native_currency?.symbol === fromCurrency?.symbol) || !native_currency;
     let maxAllowedAmount = useMemo(() => {
-        return resolveMacAllowedAmount({ fromCurrency, limitsMinAmount, limitsMaxAmount, walletBalance, gasAmount, native_currency });
-    }, [fromCurrency, limitsMinAmount, limitsMaxAmount, walletBalance, gasAmount, native_currency]);
-    const handleSetMaxAmount = async () => {
-        const updatedBalance = await mutate();
-        const updatedWalletBalance = updatedBalance?.find(b => b?.network === from?.name && b?.token === fromCurrency?.symbol);
-        const maxAllowedAmount = resolveMacAllowedAmount({ fromCurrency, limitsMinAmount, limitsMaxAmount, walletBalance: updatedWalletBalance, gasAmount, native_currency });
-        setFieldValue('amount', maxAllowedAmount);
+        return resolveMaxAllowedAmount({ fromCurrency, limitsMaxAmount, walletBalance, gasAmount, native_currency, depositMethod });
+    }, [fromCurrency, limitsMinAmount, limitsMaxAmount, walletBalance, gasAmount, native_currency, depositMethod]);
+    const handleSetValue = (value) => {
+        mutateBalances();
+        updateForm({
+            formDataKey: 'amount',
+            formDataValue: value,
+            setFieldValue
+        });
+        onActionHover(undefined);
+    };
+    const handleSetMinAmount = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (!limitsMinAmount)
+            throw new Error("Wallet balance is not available");
+        handleSetValue(limitsMinAmount.toString());
+    };
+    const handleSetHalfAmount = async (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (!walletBalance?.amount)
+            throw new Error("Wallet balance is not available");
+        handleSetValue((walletBalance?.amount / 2).toString());
     };
-    return (_jsx("div", { className: "flex flex-col justify-center", children: _jsx("div", { className: "text-xs flex flex-col items-center space-x-1 md:space-x-2 ml-2 md:ml-5 px-2", children: _jsxs("div", { className: "flex", children: [_jsx(SecondaryButton, { disabled: !limitsMinAmount, onClick: handleSetMinAmount, size: "xs", children: "MIN" }), _jsx(SecondaryButton, { disabled: !maxAllowedAmount, onClick: handleSetMaxAmount, size: "xs", className: "ml-1.5", children: "MAX" })] }) }) }));
+    const handleSetMaxAmount = async (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (!maxAllowedAmount)
+            throw new Error("Max amount is not available");
+        handleSetValue(maxAllowedAmount.toString());
+    };
+    const halfOfBalance = (walletBalance?.amount || 0) / 2;
+    const showMaxTooltip = !!(depositMethod === 'wallet' && walletBalance?.amount && shouldPayGasWithTheToken && (!limitsMaxAmount || walletBalance.amount < limitsMaxAmount));
+    return (_jsxs("div", { className: "flex gap-1.5 group text-xs leading-4", onMouseLeave: () => onActionHover(undefined), children: [Number(limitsMinAmount) > 0 ?
+                _jsx(ActionButton, { label: "Min", onMouseEnter: () => onActionHover(limitsMinAmount), onClick: handleSetMinAmount, disabled: !limitsMinAmount })
+                :
+                    null, (depositMethod === 'wallet' && halfOfBalance > 0 && (halfOfBalance < (maxAllowedAmount || Infinity))) ?
+                _jsx(ActionButton, { label: "50%", onMouseEnter: () => onActionHover(halfOfBalance), onClick: handleSetHalfAmount })
+                :
+                    null, Number(maxAllowedAmount) > 0 ?
+                _jsxs(Tooltip, { disableHoverableContent: true, children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(ActionButton, { label: "Max", onMouseEnter: () => onActionHover(maxAllowedAmount), disabled: !maxAllowedAmount, onClick: handleSetMaxAmount }) }), showMaxTooltip ? _jsx(TooltipContent, { className: "pointer-events-none w-80 grow p-2 !border-none !bg-secondary-300 text-xs rounded-xl", side: "top", align: "start", alignOffset: -10, children: _jsx("p", { children: "Max is calculated based on your balance minus gas fee for the transaction" }) }) : null] })
+                :
+                    null] }));
 };
 export default MinMax;
+const ActionButton = ({ label, onClick, onMouseEnter, disabled }) => {
+    return (_jsx("button", { onMouseEnter: onMouseEnter, onClick: onClick, typeof: "button", type: "button", disabled: disabled, className: "px-1.5 py-0.5 rounded-md duration-200 break-keep transition bg-secondary-300 hover:bg-secondary-200 text-secondary-text hover:text-primary-buttonTextColor cursor-pointer enabled:active:animate-press-down", children: label }));
+};

package/dist/components/Input/Amount/ReceiveAmount.d.ts

@@ -0,0 +1,11 @@
+import { FC } from "react";
+import { Token } from "../../../Models/Network";
+import { Quote } from "../../../lib/apiClients/layerSwapApiClient";
+type ReceiveAmountProps = {
+    destination_token: Token | undefined;
+    source_token: Token | undefined;
+    fee: Quote | undefined;
+    isFeeLoading: boolean;
+};
+export declare const ReceiveAmount: FC<ReceiveAmountProps>;
+export {};

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

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import NumberFlow from "@number-flow/react";
+import clsx from "clsx";
+export const ReceiveAmount = ({ source_token, destination_token, fee, isFeeLoading }) => {
+    const receive_amount = fee?.quote.receive_amount;
+    const receiveAmountInUsd = receive_amount && destination_token && fee.quote?.destination_token?.price_in_usd ? (receive_amount * fee.quote.destination_token.price_in_usd).toFixed(2) : undefined;
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: "flex flex-col min-w-0 font-normal border-0 text-[28px] leading-7 text-primary-text w-full relative truncate", children: [_jsx("div", { className: "flex items-center justify-start w-full relative", children: _jsx("div", { className: clsx("w-full flex items-center py-[3px] pr-3", { "animate-pulse-stronger": isFeeLoading }, { "text-secondary-text": !receive_amount }), children: _jsx(NumberFlow, { value: receive_amount || 0, trend: 0, format: { maximumFractionDigits: fee?.quote.destination_token?.decimals || 2 } }) }) }), _jsx("span", { className: "text-base leading-5 font-medium text-secondary-text h-5", children: _jsx(NumberFlow, { className: "p-0", value: receiveAmountInUsd || 0, format: { style: 'currency', currency: 'USD', maximumFractionDigits: receiveAmountInUsd ? 2 : 0 }, trend: 0 }) })] }) }));
+};

package/dist/components/Input/Amount/helpers.d.ts

@@ -1,12 +1,12 @@
-import { Balance } from "../../../Models/Balance";
+import { TokenBalance } from "../../../Models/Balance";
 import { Token } from "../../../Models/Network";
 type ResoleMaxAllowedAmountProps = {
-    limitsMinAmount: number;
-    limitsMaxAmount: number;
-    walletBalance: Balance | undefined;
+    limitsMaxAmount: number | undefined;
+    walletBalance: TokenBalance | undefined;
     gasAmount: number;
     fromCurrency: Token;
     native_currency: Token | undefined;
+    depositMethod: 'wallet' | 'deposit_address' | undefined;
 };
-export declare const resolveMacAllowedAmount: (props: ResoleMaxAllowedAmountProps) => number;
+export declare const resolveMaxAllowedAmount: (props: ResoleMaxAllowedAmountProps) => number | undefined;
 export {};

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

@@ -1,15 +1,10 @@
-export const resolveMacAllowedAmount = (props) => {
-    const { limitsMinAmount, limitsMaxAmount, walletBalance, gasAmount, fromCurrency, native_currency } = props;
-    if (!walletBalance || !isInRange({ value: walletBalance.amount, min: limitsMinAmount, max: limitsMaxAmount }))
+export const resolveMaxAllowedAmount = (props) => {
+    const { limitsMaxAmount, walletBalance, gasAmount, fromCurrency, native_currency, depositMethod } = props;
+    if (!walletBalance || !walletBalance.amount || (limitsMaxAmount && walletBalance.amount > limitsMaxAmount) || depositMethod !== 'wallet')
         return limitsMaxAmount;
-    //calculate balance with reduced gas amount, if it is not in range we do not force the limits api min amount
     const shouldPayGasWithTheToken = (native_currency?.symbol === fromCurrency?.symbol) || !native_currency;
     const payableAmount = walletBalance.amount - gasAmount;
-    const payableIsInRange = isInRange({ value: payableAmount, min: limitsMinAmount, max: limitsMaxAmount });
-    if (!shouldPayGasWithTheToken || !payableIsInRange)
+    if (!shouldPayGasWithTheToken)
         return walletBalance.amount;
     return Number(payableAmount.toFixed(fromCurrency?.decimals));
 };
-const isInRange = ({ value, min, max }) => {
-    return value >= min && value <= max;
-};