Merge branch 'dev-multiwallet-form' into dev-multiwallet-form-tronWal…

…letConnect

Models/Balance.ts

@@ -17,7 +17,6 @@ export type GasProps = {
     token: Token,
     address?: `0x${string}`,
     recipientAddress?: string,
-    isSweeplessTx?: boolean,
     wallet?: Wallet
 }
 

Models/WalletProvider.ts

@@ -15,7 +15,7 @@ export type Wallet = {
     // TODO: might be unused and unnecessary check
     isActive: boolean;
     address: string | `0x${string}`;
-    addresses: string[] | `0x${string}`[];
+    addresses: string[];
     providerName: string
     icon: (props: any) => React.JSX.Element;
     //TODO: this is name of the connector, should be changed to connectorId
@@ -27,20 +27,23 @@ export type Wallet = {
     chainId?: string | number,
     isLoading?: boolean,
     disconnect: () => Promise<void> | undefined | void;
-    connect: () => Promise<void> | undefined | void;
+    connect: () => Promise<Wallet | undefined>;
     isNotAvailable?: boolean;
+    //TODO: refactor
+    withdrawalSupportedNetworks?: string[],
+    asSourceSupportedNetworks?: string[],
+    autofillSupportedNetworks?: string[],
 }
 
 
 export type WalletProvider = {
-    connectWallet: (props?: { chain?: string | number | undefined | null, destination?: RouteNetwork }) => Promise<void> | undefined | void,
-    connectConnector?: (props?: { connector: InternalConnector }) => Promise<void> | undefined
+    connectWallet: (props?: { chain?: string | number | undefined | null, destination?: RouteNetwork }) => Promise<Wallet | undefined>,
+    connectConnector?: (props?: { connector: InternalConnector }) => Promise<Wallet | undefined> | undefined
     disconnectWallets: () => Promise<void> | undefined | void,
     switchAccount?: (connector: Wallet, address: string) => Promise<void>
     availableWalletsForConnect?: InternalConnector[],
     connectedWallets: Wallet[] | undefined,
     activeWallet: Wallet | undefined,
-    activeAccountAddress: string | undefined,
     autofillSupportedNetworks?: string[],
     withdrawalSupportedNetworks?: string[],
     asSourceSupportedNetworks?: string[],

components/FeeDetails/DepositMethod/index.tsx

@@ -54,7 +54,7 @@ const DepositMethodComponent: FC = () => {
             setFieldValue(name, defaultMethod?.id, true)
             return
         }
-        else {
+        else if (!(menuItems?.find(i => i.id === depositMethod))) {
             setFieldValue(name, first, true)
             return
         }

components/FeeDetails/Refuel.tsx

@@ -3,10 +3,9 @@ import { useFormikContext } from "formik";
 import { SwapFormValues } from "../DTOs/SwapFormValues";
 import { FC, useEffect, useRef } from "react";
 import { Info } from "lucide-react";
-import useBalance from "../../hooks/useBalance";
 import { isValidAddress } from "../../lib/address/validator";
-import { useBalancesState } from "../../context/balances";
 import ResizablePanel from "../ResizablePanel";
+import useSWRBalance from "../../lib/newbalances/useSWRBalance";
 
 type RefuelProps = {
     onButtonClick: () => void
@@ -20,21 +19,13 @@ const RefuelToggle: FC<RefuelProps> = ({ onButtonClick }) => {
     } = useFormikContext<SwapFormValues>();
     const { toCurrency, to, destination_address, refuel } = values
 
-    const { fetchBalance } = useBalance()
-    const { balances } = useBalancesState()
+    const { balance } = useSWRBalance(destination_address, to)
 
-    const destinationNativeBalance = destination_address && balances[destination_address]?.find(b => (b.token === to?.token?.symbol) && (b.network === to.name))
+    const destinationNativeBalance = destination_address && balance?.find(b => (b.token === to?.token?.symbol) && (b.network === to.name))
     const needRefuel = toCurrency && toCurrency.refuel && to && to.token && isValidAddress(destination_address, to) && destinationNativeBalance && destinationNativeBalance?.amount == 0 && !refuel
     const precviouslySelectedDestination = useRef(to)
 
     useEffect(() => {
-
-        if (toCurrency && toCurrency.refuel && to && to.token && isValidAddress(destination_address, to)) {
-            (async () => {
-                to.token && await fetchBalance(to, to.token, destination_address)
-            })()
-        }
-
         if (to && precviouslySelectedDestination.current !== to && !!refuel) {
             setFieldValue('refuel', false)
         }

components/FeeDetails/RefuelModal.tsx

@@ -1,14 +1,15 @@
 import { SwapFormValues } from '../DTOs/SwapFormValues';
 import { Dispatch, FC, SetStateAction } from 'react';
 import useWallet from '../../hooks/useWallet';
-import { useBalancesState } from '../../context/balances';
 import Modal from '../modal/modal';
 import { Fuel } from 'lucide-react';
 import { roundDecimals, truncateDecimals } from '../utils/RoundDecimals';
 import SubmitButton from '../buttons/submitButton';
 import SecondaryButton from '../buttons/secondaryButton';
 import { useFormikContext } from 'formik';
 import { useFee } from '../../context/feeContext';
+import useSWRBalance from '../../lib/newbalances/useSWRBalance';
+import { useSwapDataState } from '../../context/swap';
 
 type RefuelModalProps = {
     openModal: boolean,
@@ -23,14 +24,13 @@ const RefuelModal: FC<RefuelModalProps> = ({ openModal, setOpenModal }) => {
 
     const { to, toCurrency, refuel, destination_address } = values || {};
 
-    const { provider } = useWallet(to, "autofil")
-    const { balances } = useBalancesState()
     const { fee } = useFee()
 
     const nativeAsset = to?.token
     const token_usd_price = fee?.quote?.destination_network?.token?.price_in_usd || nativeAsset?.price_in_usd
-    const connectedWallet = provider?.activeWallet
-    const destNativeTokenBalance = balances[destination_address || (connectedWallet?.address || '')]?.find(b => b.token === nativeAsset?.symbol && b.network === to?.name)
+
+    const { balance } = useSWRBalance(destination_address, to)
+    const destNativeTokenBalance = balance?.find(b => b.token === nativeAsset?.symbol && b.network === to?.name)
     const amountInUsd = (destNativeTokenBalance && token_usd_price) ? (destNativeTokenBalance.amount * token_usd_price).toFixed(2) : undefined
 
     const closeModal = () => {

components/HeaderWithMenu/index.tsx

@@ -8,7 +8,7 @@ import dynamic from "next/dynamic"
 import LayerswapMenu from "../LayerswapMenu"
 import { useQueryState } from "../../context/query"
 
-const WalletsHeader = dynamic(() => import("../ConnectedWallets").then((comp) => comp.WalletsHeader), {
+const WalletsHeader = dynamic(() => import("../Wallet/ConnectedWallets").then((comp) => comp.WalletsHeader), {
    loading: () => <></>
 })
 

components/Input/Address/AddressPicker/AddressBook.tsx

@@ -7,6 +7,7 @@ import { FC } from "react";
 import AddressWithIcon from "./AddressWithIcon";
 import { Partner } from "../../../../Models/Partner";
 import { Wallet } from "../../../../Models/WalletProvider";
+import { BookOpen } from "lucide-react";
 
 type AddressBookProps = {
     addressBook: AddressItem[];
@@ -24,15 +25,18 @@ const AddressBook: FC<AddressBookProps> = ({ addressBook, onSelectAddress, desti
                 <CommandList>
                     <CommandGroup
                         heading={
-                            <p className="text-sm text-secondary-text">Address Book</p>
+                            <div className="flex items-center space-x-1">
+                                <BookOpen className="h-4 w-4 stroke-2" aria-hidden="true" />
+                                <p className="text-sm text-secondary-text">Address Book</p>
+                            </div>
                         }
                         className="[&_[cmdk-group-heading]]:!pb-1 [&_[cmdk-group-heading]]:!px-0 !py-0 !px-0"
                     >
                         <div className="space-y-0 w-full flex flex-col items-stretch max-h-[200px] overflow-y-auto styled-scroll">
                             {addressBook.sort(sortingByDate).map(item => {
                                 const isSelected = addressFormat(item.address, destination!) === addressFormat(destination_address!, destination!)
                                 return (
-                                    <button type="button" key={item.address} onClick={() => onSelectAddress(item.address, item.wallet)} className={`group/addressItem px-3 py-3 rounded-md hover:bg-secondary-700 w-full transition duration-200 ${isSelected && 'bg-secondary-800'}`}>
+                                    <button type="button" key={item.address} onClick={() => onSelectAddress(item.address, item.wallet)} className={`group/addressItem px-3 py-3 rounded-lg hover:bg-secondary-600 w-full transition duration-200 bg-secondary-700 ${isSelected && 'bg-secondary-800'}`}>
                                         <div className={`flex items-center justify-between w-full`}>
                                             <AddressWithIcon addressItem={item} partner={partner} network={destination} connectedWallet={item.wallet} />
                                             <div className="flex h-6 items-center px-1">

components/Input/Address/AddressPicker/AddressWithIcon.tsx

@@ -2,7 +2,7 @@ import { FC, useState } from "react"
 import { AddressGroup, AddressItem } from ".";
 import AddressIcon from "../../../AddressIcon";
 import shortenAddress from "../../../utils/ShortenAddress";
-import { History, ExternalLink, Copy, Check, ChevronDown, WalletIcon, Pencil, Link2 } from "lucide-react";
+import { History, ExternalLink, Copy, Check, ChevronDown, WalletIcon, Pencil, Link2, Power } from "lucide-react";
 import Image from "next/image";
 import { Partner } from "../../../../Models/Partner";
 import { Network } from "../../../../Models/Network";
@@ -117,11 +117,12 @@ const AddressWithIcon: FC<Props> = ({ addressItem, connectedWallet, partner, net
 
 type ExtendedAddressProps = {
     address: string;
-    network: Network;
+    network?: Network;
     addressClassNames?: string;
+    onDisconnect?: () => void;
 }
 
-export const ExtendedAddress: FC<ExtendedAddressProps> = ({ address, network, addressClassNames }) => {
+export const ExtendedAddress: FC<ExtendedAddressProps> = ({ address, network, addressClassNames, onDisconnect }) => {
     const [isCopied, setCopied] = useCopyClipboard()
     const [isPopoverOpen, setPopoverOpen] = useState(false)
 
@@ -156,12 +157,24 @@ export const ExtendedAddress: FC<ExtendedAddressProps> = ({ address, network, ad
                                 : <Copy className="w-4 h-4" />
                         }
                     </div>
-                    <Link href={network?.account_explorer_template?.replace('{0}', address)} target="_blank" className="hover:text-primary-text px-2 py-1.5 hover:bg-secondary-600 rounded transition-all duartion-200 flex items-center justify-between gap-5 w-full">
-                        <p>
-                            Open in explorer
-                        </p>
-                        <ExternalLink className="w-4 h-4" />
-                    </Link>
+                    {
+                        network &&
+                        <Link href={network?.account_explorer_template?.replace('{0}', address)} target="_blank" className="hover:text-primary-text px-2 py-1.5 hover:bg-secondary-600 rounded transition-all duartion-200 flex items-center justify-between gap-5 w-full">
+                            <p>
+                                Open in explorer
+                            </p>
+                            <ExternalLink className="w-4 h-4" />
+                        </Link>
+                    }
+                    {
+                        onDisconnect &&
+                        <div onClick={(e) => { e.stopPropagation(), onDisconnect() }} className="hover:text-primary-text px-2 py-1.5 hover:bg-secondary-600 rounded transition-all duartion-200 flex items-center justify-between gap-5 w-full">
+                            <p>
+                                Disconnect
+                            </p>
+                            <Power className="w-4 h-4" />
+                        </div>
+                    }
                 </PopoverContent>
             </Popover>
         </div>

components/Input/Address/AddressPicker/ConnectedWallets/ConnectWalletButton.tsx

@@ -2,11 +2,11 @@ import { RefreshCw } from "lucide-react";
 import { ResolveConnectorIcon } from "../../../../icons/ConnectorIcons";
 import { Network } from "../../../../../Models/Network";
 import { FC, useState } from "react";
-import { WalletProvider } from "../../../../../Models/WalletProvider";
+import { Wallet, WalletProvider } from "../../../../../Models/WalletProvider";
 
 type Props = {
     provider: WalletProvider,
-    onConnect?: () => void,
+    onConnect?: (wallet: Wallet) => void,
     destination: Network,
 }
 
@@ -16,8 +16,8 @@ const ConnectWalletButton: FC<Props> = ({ provider, onConnect, destination }) =>
 
     const connect = async () => {
         setIsLoading(true)
-        await provider.connectWallet({ chain: destination.chain_id })
-        if (onConnect) onConnect()
+        const result = await provider.connectWallet({ chain: destination.chain_id })
+        if (onConnect && result) onConnect(result)
         setIsLoading(false)
     }