Modified exchange deposit details

components/FeeDetails/DepositMethod/index.tsx

@@ -9,6 +9,7 @@ import { motion } from "framer-motion";
 import { useDepositMethod } from "../../../context/depositMethodContext";
 import { useQueryState } from "../../../context/query";
 import KnownInternalNames from "../../../lib/knownIds";
+import { useSwapDataState, useSwapDataUpdate } from "../../../context/swap";
 
 const variants = {
     open: { rotate: 180 },
@@ -33,7 +34,7 @@ const DepositMethodComponent: FC = () => {
         setFieldValue,
     } = useFormikContext<SwapFormValues>();
     const { setShowModal, showModal } = useDepositMethod()
-
+    const { setSelectedSourceAccount } = useSwapDataUpdate()
     const { depositMethod: defaultDepositMethod, hideDepositMethod, appName } = useQueryState()
     const { from, depositMethod, fromExchange } = values
     const name = 'depositMethod'

components/Input/Address/AddressPicker/ExchangeNote.tsx

@@ -9,7 +9,7 @@ const ExchangeNote = ({ destinationAsset, destinationExchange, destination }: {
     if (!destinationAsset || !destinationExchange || !destination) return
 
     return (
-        <div className='text-left p-4 bg-secondary-800 text-primary-text rounded-lg border border-secondary-500 basis-full mt-3 w-full'>
+        <div className='text-left p-4 bg-secondary-800 text-primary-text rounded-lg border border-secondary-500 mt-3 w-full'>
             <div className="flex items-center">
                 <Info className='h-5 w-5 text-primary-600 mr-3' />
                 <label className="block text-sm md:text-base font-medium leading-6">How to find your {destinationExchange.display_name} deposit address</label>

components/Input/Address/AddressPicker/index.tsx

@@ -73,10 +73,13 @@ const AddressPicker: FC<Input> = forwardRef<HTMLInputElement, Input>(function Ad
     //TODO: sort by active wallet
     const defaultWallet = provider?.connectedWallets?.find(w => !w.isNotAvailable)
     const defaultAddress = (selectedSourceAccount && defaultWallet?.addresses.find(a => a == selectedSourceAccount?.address)) || defaultWallet?.address
-    const [isConnecting, setIsConnecting] = useState(false)
     const [manualAddress, setManualAddress] = useState<string>('')
     const [newAddress, setNewAddress] = useState<{ address: string, networkType: NetworkType | string } | undefined>()
 
+    useEffect(() => {
+        setFieldValue("destination_address", undefined)
+    }, [])
+
     useEffect(() => {
         if (destination_address && !isValidAddress(destination_address, destination)) {
             setFieldValue("destination_address", '')
@@ -159,22 +162,16 @@ const AddressPicker: FC<Input> = forwardRef<HTMLInputElement, Input>(function Ad
                 <div className='flex flex-col self-center grow w-full space-y-5 h-full'>
 
                     {
-                        destinationExchange ?
-                            <ExchangeNote
-                                destination={destination}
-                                destinationAsset={destinationAsset}
-                                destinationExchange={destinationExchange}
-                            />
-                            :
-                            !disabled
-                            && destination
-                            && provider
-                            && !defaultWallet &&
-                            <ConnectWalletButton
-                                provider={provider}
-                                onConnect={onConnect}
-                                destination={destination}
-                            />
+                        !destinationExchange &&
+                        !disabled
+                        && destination
+                        && provider
+                        && !defaultWallet &&
+                        <ConnectWalletButton
+                            provider={provider}
+                            onConnect={onConnect}
+                            destination={destination}
+                        />
                     }
 
                     <ManualAddressInput
@@ -190,7 +187,14 @@ const AddressPicker: FC<Input> = forwardRef<HTMLInputElement, Input>(function Ad
                         addresses={groupedAddresses}
                         connectedWallet={connectedWallet}
                     />
-
+                    {
+                        destinationExchange &&
+                        <ExchangeNote
+                            destination={destination}
+                            destinationAsset={destinationAsset}
+                            destinationExchange={destinationExchange}
+                        />
+                    }
                     {
                         !disabled
                         && destination

components/Input/CEXNetworkFormField.tsx

@@ -14,8 +14,10 @@ import { isValidAddress } from "../../lib/address/validator";
 import TransferCEX from "./TransferCEX";
 import Image from 'next/image'
 import Address from "./Address";
-import { SecondDestinationWalletPicker } from "./NetworkFormField";
 import { Partner } from "../../Models/Partner";
+import { ExtendedAddress } from "./Address/AddressPicker/AddressWithIcon";
+import { ChevronRight, PlusIcon } from "lucide-react";
+import AddressIcon from "../AddressIcon";
 
 type SwapDirection = "from" | "to";
 type Props = {
@@ -38,10 +40,8 @@ const CEXNetworkFormField = forwardRef(function CEXNetworkFormField({ direction,
         fromExchange,
         toExchange,
         currencyGroup,
-        destination_address
     } = values
 
-
     const apiClient = new LayerSwapApiClient()
 
     const routesEndpoint = `/${direction === "from" ? `exchange_source_networks?destination_token_group=${currencyGroup?.symbol}&include_unmatched=true` : `exchange_destination_networks?source_token_group=${currencyGroup?.symbol}&include_unmatched=true`}`
@@ -109,7 +109,8 @@ const CEXNetworkFormField = forwardRef(function CEXNetworkFormField({ direction,
         <TransferCEX direction={direction} />
     </div>
 
-    const header = direction === 'from' ? 'Withdrawal network' : 'Deposit network'
+    const header = direction === 'from' ? 'Withdrawal network' : 'Deposit details'
+
 
     return (<div className="p-2 rounded-lg bg-secondary-700 border border-secondary-500 space-y-2">
         <label htmlFor={name} className="font-semibold flex justify-between text-secondary-text text-xs">
@@ -142,14 +143,41 @@ const CEXNetworkFormField = forwardRef(function CEXNetworkFormField({ direction,
             header={header}
         />
         {
-            direction === "to" && !destination_address &&
+            direction === "to" && to &&
             <div className="flex items-center col-span-6">
-                <Address partner={partner} >{SecondDestinationWalletPicker}</Address>
+                <Address partner={partner} >{
+                    ({ destination, disabled, addressItem, connectedWallet, partner }) => <>
+                        {
+                            addressItem ? <>
+                                <AddressButton addressItem={addressItem} network={network} disabled={disabled} />
+                            </>
+                                : <div className=" justify-center w-full pl-3 pr-2 py-2 bg-secondary-600 items-center flex font-light space-x-2 mx-auto rounded-lg focus-peer:ring-primary focus-peer:border-secondary-400 focus-peer:border focus-peer:ring-1 focus:outline-none disabled:cursor-not-allowed relative grow h-12 ">
+                                    <PlusIcon className="stroke-1" /> <span>Destination Address</span>
+                                </div>
+                        }
+                    </>
+                }</Address>
             </div>
         }
     </div>)
 })
 
+const AddressButton = ({ addressItem, network, disabled }) => {
+
+    return <div className="justify-between w-full pl-3 pr-2 py-2 bg-secondary-600 items-center flex font-light space-x-2 mx-auto rounded-lg focus-peer:ring-primary focus-peer:border-secondary-400 focus-peer:border focus-peer:ring-1 focus:outline-none disabled:cursor-not-allowed relative grow h-12 ">
+        <div className="flex items-center gap-3">
+            <div className='flex text-primary-text items-center justify-center rounded-md h-6 overflow-hidden w-6'>
+                <AddressIcon className="scale-150 h-3 w-3" address={addressItem.address} size={36} />
+            </div>
+            <ExtendedAddress address={addressItem.address} network={network} />
+        </div>
+        <span className="ml-3 justify-self-end right-0 flex items-center pr-2 pointer-events-none  text-primary-text">
+            {!disabled && <ChevronRight className="h-4 w-4" aria-hidden="true" />}
+        </span>
+    </div>
+}
+
+
 function GenerateMenuItems(
     historicalNetworks: ExchangeNetwork[],
     routes: NetworkWithTokens[] | undefined,

components/Input/CurrencyFormField.tsx

@@ -32,10 +32,8 @@ const CurrencyFormField: FC<{ direction: SwapDirection }> = ({ direction }) => {
     const query = useQueryState()
     const { selectedSourceAccount } = useSwapDataState()
 
-    const { provider: destinationWalletProvider } = useWallet(to, 'autofil')
-    const { provider: sourceWalletProvider } = useWallet(from, 'autofil')
 
-    const address = direction === 'from' ? (selectedSourceAccount?.address || sourceWalletProvider?.activeWallet?.address) : (destination_address || destinationWalletProvider?.activeWallet?.address)
+    const address = direction === 'from' ? (selectedSourceAccount?.address) : (destination_address)
 
     const { balance } = useSWRBalance(address, direction === 'from' ? from : to)
 

components/Input/NetworkFormField.tsx

@@ -138,9 +138,14 @@ const NetworkFormField = forwardRef(function NetworkFormField({ direction, label
             {
                 direction === "from" ?
                     <SourceWalletPicker />
-                    : <span><Address partner={partner} >{
-                        ({ destination, disabled, addressItem, connectedWallet, partner }) => <DestinationWalletPicker destination={destination} disabled={disabled} addressItem={addressItem} connectedWallet={connectedWallet} partner={partner} />
-                    }</Address></span> //TODO: implement destination hidden
+                    : <>
+                        {
+                            !value?.isExchange &&
+                            <span><Address partner={partner} >{
+                                ({ destination, disabled, addressItem, connectedWallet, partner }) => <DestinationWalletPicker destination={destination} disabled={disabled} addressItem={addressItem} connectedWallet={connectedWallet} partner={partner} />
+                            }</Address></span> //TODO: implement destination hidden
+                        }
+                    </>
             }
         </div>
         <div ref={ref} className="bg-secondary-700 p-3 rounded-xl mt-1 grid grid-flow-row-dense grid-cols-6 items-center gap-2">
@@ -177,7 +182,6 @@ const NetworkFormField = forwardRef(function NetworkFormField({ direction, label
 });
 
 export const SecondDestinationWalletPicker = () => {
-
     return <div className=" justify-center w-full pl-3 pr-2 py-2 bg-secondary-600 items-center flex font-light space-x-2 mx-auto rounded-lg focus-peer:ring-primary focus-peer:border-secondary-400 focus-peer:border focus-peer:ring-1 focus:outline-none disabled:cursor-not-allowed relative grow h-12 ">
         <PlusIcon className="stroke-1" /> <span>Destination Address</span>
     </div>

components/Input/SourceWalletPicker.tsx

@@ -42,7 +42,7 @@ const Component: FC = () => {
                 address: defaultWallet.address
             })
         }
-    }, [defaultWallet, source_addsress, values.depositMethod, destination_address])
+    }, [defaultWallet?.address, source_addsress, values.depositMethod, destination_address])
 
     useEffect(() => {
         if (values.depositMethod === 'deposit_address' || !defaultWallet?.address || (selectedSourceAccount && !wallets.some(w => w?.addresses?.some(a => a === selectedSourceAccount.address)))) {
@@ -51,6 +51,7 @@ const Component: FC = () => {
     }, [values.depositMethod, defaultWallet?.address, wallets.length])
 
 
+
     const handleWalletChange = () => {
         setOpenModal(true)
     }
@@ -139,7 +140,8 @@ export const FormSourceWalletButton: FC = () => {
         setFieldValue
     } = useFormikContext<SwapFormValues>();
 
-    const [mounted, setMounted] = useState<boolean>(false)
+    const { setSelectedSourceAccount } = useSwapDataUpdate()
+
     const [mountWalletPortal, setMounWalletPortal] = useState<boolean>(false)
 
     const walletNetwork = values.fromExchange ? undefined : values.from
@@ -150,18 +152,23 @@ export const FormSourceWalletButton: FC = () => {
     const handleWalletChange = () => {
         setOpenModal(true)
     }
+    const [mounted, setMounted] = useState<boolean>(false)
+
     useEffect(() => {
         setMounted(true)
     }, [])
 
     const handleSelectWallet = (wallet?: Wallet, address?: string) => {
-        setFieldValue('source_wallet', wallet)
-        setFieldValue('source_address', address)
-        if (!wallet) {
-            setFieldValue('depositMethod', 'deposit_address')
+        if (wallet && address) {
+            setSelectedSourceAccount({
+                wallet,
+                address
+            })
+            setFieldValue('depositMethod', 'wallet')
         }
         else {
-            setFieldValue('depositMethod', 'wallet')
+            setSelectedSourceAccount(undefined)
+            setFieldValue('depositMethod', 'deposit_address')
         }
         cancel()
         setOpenModal(false)
@@ -177,7 +184,7 @@ export const FormSourceWalletButton: FC = () => {
         setMounWalletPortal(false)
     }
 
-    if (!mounted || !walletNetwork || !values.fromCurrency) return null
+    if (!walletNetwork || !values.fromCurrency) return null
 
     if (!provider?.connectedWallets?.length && walletNetwork) {
         return <>
@@ -189,7 +196,7 @@ export const FormSourceWalletButton: FC = () => {
                 <Connect />
             </button>
             {
-                mountWalletPortal && values.from?.deposit_methods.includes('deposit_address') && values.depositMethod !== 'deposit_address' &&
+                mountWalletPortal && values.from?.deposit_methods.includes('deposit_address') && values.depositMethod === 'wallet' &&
                 <WalletFooterPortal isWalletModalOpen={isWalletModalOpen}>
                     <div onClick={() => handleSelectWallet()} className="underline text-base text-center text-secondary-text cursor-pointer pt-3">
                         Continue without a wallet
@@ -222,7 +229,7 @@ export const FormSourceWalletButton: FC = () => {
                 </VaulDrawer.Snap>
             </VaulDrawer >
             {
-                mountWalletPortal && values.from?.deposit_methods.includes('deposit_address') && values.depositMethod !== 'deposit_address' &&
+                mountWalletPortal && values.from?.deposit_methods.includes('deposit_address') && values.depositMethod === 'wallet' &&
                 <WalletFooterPortal isWalletModalOpen={isWalletModalOpen}>
                     <div onClick={() => handleSelectWallet()} className="underline text-base text-center text-secondary-text cursor-pointer pt-3">
                         Continue without a wallet

components/Input/dynamic/Balance.tsx

@@ -8,14 +8,10 @@ import useSWRBalance from "../../../lib/newbalances/useSWRBalance";
 const Balance = ({ values, direction }: { values: SwapFormValues, direction: string }) => {
 
     const { to, fromCurrency, toCurrency, from, destination_address } = values
-    const { provider: destinationWalletProvider } = useWallet(to, 'autofil')
     const { selectedSourceAccount } = useSwapDataState()
 
-    const destinationNetworkWallet = destinationWalletProvider?.activeWallet
-
-
     const { balance: sourceBalance, isBalanceLoading: isSourceBalanceLoading } = useSWRBalance(selectedSourceAccount?.address, from)
-    const { balance: destBalance, isBalanceLoading: isDestBalanceLoading } = useSWRBalance(destination_address || (destinationNetworkWallet?.address || ''), to)
+    const { balance: destBalance, isBalanceLoading: isDestBalanceLoading } = useSWRBalance(destination_address, to)
 
     const walletBalance = selectedSourceAccount && sourceBalance?.find(b => b?.network === from?.name && b?.token === fromCurrency?.symbol)
     const destinationBalance = destBalance?.find(b => b?.network === to?.name && b?.token === toCurrency?.symbol)
@@ -37,7 +33,7 @@ const Balance = ({ values, direction }: { values: SwapFormValues, direction: str
 
     useEffect(() => {
         previouslySelectedDestination.current = to
-    }, [to, destination_address, destinationNetworkWallet?.address])
+    }, [to, destination_address])
 
     return (
         <>

components/Swap/Form/Form.tsx

@@ -149,7 +149,6 @@ const SwapForm: FC<Props> = ({ partner }) => {
 
         const oldSourceWalletIsNotCompatible = selectedSourceAccount?.wallet.providerName !== destinationProvider?.name || !(newFrom && selectedSourceAccount?.wallet.withdrawalSupportedNetworks?.some(n => n.toLowerCase() === newFrom.name.toLowerCase()))
 
-
         const changeDestinationAddress = newTo && (oldDestinationWalletIsNotCompatible || oldSourceWalletIsNotCompatible) && destinationAvailableWallets
 
         const newVales: SwapFormValues = {
@@ -162,6 +161,7 @@ const SwapForm: FC<Props> = ({ partner }) => {
             fromExchange: newFromExchange,
             currencyGroup: (fromExchange || toExchange) ? (fromExchange ? newToExchangeToken : newFromExchangeToken) : undefined,
             destination_address: values.destination_address,
+            depositMethod: undefined
         }
 
         if (changeDestinationAddress) {
@@ -170,8 +170,8 @@ const SwapForm: FC<Props> = ({ partner }) => {
 
         setValues(newVales, true);
 
-        const changeSourceAddress = newFrom && values.depositMethod !== 'deposit_address' && destinationProvider && (oldSourceWalletIsNotCompatible || changeDestinationAddress)
-
+        const changeSourceAddress = newFrom && values.depositMethod === 'deposit_address' && destinationProvider && (oldSourceWalletIsNotCompatible || changeDestinationAddress)
+        
         if (changeSourceAddress && values.destination_address) {
             const sourceAvailableWallet = destinationProvider?.connectedWallets?.find(w => w.withdrawalSupportedNetworks?.some(n => n.toLowerCase() === newFrom.name.toLowerCase()) && w.addresses.some(a => a.toLowerCase() === values.destination_address?.toLowerCase()))
             if (sourceAvailableWallet) {
@@ -193,7 +193,7 @@ const SwapForm: FC<Props> = ({ partner }) => {
     }, [values.amount])
 
     const sourceWalletNetwork = values.fromExchange ? undefined : values.from
-    const shoouldConnectWallet = sourceWalletNetwork && values.depositMethod !== 'deposit_address' && !selectedSourceAccount
+    const shoouldConnectWallet = sourceWalletNetwork && values.depositMethod === 'wallet' && !selectedSourceAccount
 
     return <ImtblPassportProvider from={source} to={destination}>
             <Widget className="sm:min-h-[504px] h-full">

components/Swap/Summary/index.tsx

@@ -8,10 +8,10 @@ import useWallet from "../../../hooks/useWallet"
 import { useQueryState } from "../../../context/query"
 
 const SwapSummary: FC = () => {
-    const { swapResponse } = useSwapDataState()
+    const { swapResponse, selectedSourceAccount } = useSwapDataState()
     const { swap, quote: swapQuote, refuel: swapRefuel } = swapResponse || {}
     const { source_network, destination_network, source_token, destination_token } = swap || {}
-    const { provider } = useWallet(source_network, 'withdrawal')
+
     const {
         hideFrom,
         account,
@@ -20,7 +20,6 @@ const SwapSummary: FC = () => {
     const sourceExchange = swap?.source_exchange
     const destExchange = swap?.destination_exchange
 
-    const wallet = provider?.activeWallet
 
     if (!swap || !source_network || !source_token || !destination_token || !destination_network) {
         return <></>
@@ -41,8 +40,8 @@ const SwapSummary: FC = () => {
     else if (swapInputTransaction?.from) {
         sourceAccountAddress = swapInputTransaction?.from;
     }
-    else if (wallet?.address) {
-        sourceAccountAddress = wallet.address;
+    else if (selectedSourceAccount?.address) {
+        sourceAccountAddress = selectedSourceAccount.address;
     }
     else if (source_network?.name === KnownInternalNames.Exchanges.Coinbase && swap?.exchange_account_connected) {
         sourceAccountAddress = shortenEmail(swap?.exchange_account_name, 10);