Merge branch 'dev' into dev-fuelWallet

components/Input/CurrencyFormField.tsx

@@ -19,6 +19,7 @@ import { resolveNetworkRoutesURL } from "../../helpers/routes";
 import useWallet from "../../hooks/useWallet";
 import { ONE_WEEK } from "./NetworkFormField";
 import RouteIcon from "./RouteIcon";
+import useBalance from "../../hooks/useBalance";
 
 const BalanceComponent = dynamic(() => import("./dynamic/Balance"), {
     loading: () => <></>,
@@ -34,6 +35,7 @@ const CurrencyFormField: FC<{ direction: SwapDirection }> = ({ direction }) => {
     const name = direction === 'from' ? 'fromCurrency' : 'toCurrency';
     const query = useQueryState()
     const { balances } = useBalancesState()
+    const { fetchBalance } = useBalance()
 
     const { getAutofillProvider: getProvider } = useWallet()
 
@@ -140,6 +142,23 @@ const CurrencyFormField: FC<{ direction: SwapDirection }> = ({ direction }) => {
     }, [toCurrency, currencyGroup, name, from, routes, error, isLoading])
 
 
+    const network = direction === 'from' ? from : to
+    const token = direction === 'from' ? fromCurrency : toCurrency
+    useEffect(() => {
+        let balanceGetHandler: any = undefined
+        if (network && token) {
+            (async () => {
+                balanceGetHandler = setInterval(async () => {
+                    await fetchBalance(network, token);
+                }, 60000)
+            })()
+        }
+        return () => {
+            clearInterval(balanceGetHandler)
+        }
+    }, [network, token])
+
+
     const handleSelect = useCallback((item: SelectMenuItem<RouteToken>) => {
         setFieldValue(name, item.baseObject, true)
     }, [name, direction, toCurrency, fromCurrency, from, to])

components/Input/TransferCEX.tsx

@@ -20,7 +20,7 @@ const TransferCEX: FC<Props> = ({ direction }) => {
     const sourceLogo = fromExchange ? fromExchange.logo : from?.logo
     const destinationLogo = toExchange ? toExchange.logo : to?.logo
 
-    const learnMoreUrl = fromExchange ? 'https://docs.layerswap.io/user-docs/layerswap-app/transfer-from-cex' : 'https://docs.layerswap.io/user-docs/layerswap-app/transfer-to-cex'
+    const learnMoreUrl = fromExchange ? 'https://docs.layerswap.io/user-docs/layerswap-app/transfer-from-cex/' : 'https://docs.layerswap.io/user-docs/layerswap-app/transfer-to-cex/'
 
     return (<div className="font-normal flex flex-col w-full relative z-10 my-3 pb-4 border-b-2 border-b-secondary">
         <div className="w-full px-2.5 space-y-2">

components/Input/dynamic/MinMax.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo } from "react"
+import { useCallback, useEffect, useMemo, useState } from "react"
 import useWallet from "../../../hooks/useWallet"
 import SecondaryButton from "../../buttons/secondaryButton"
 import { useFormikContext } from "formik";
@@ -13,15 +13,15 @@ const MinMax = ({ onAddressGet }: { onAddressGet: (address: string) => void }) =
     const { values, setFieldValue } = useFormikContext<SwapFormValues>();
     const { fromCurrency, from, destination_address } = values || {};
     const { minAllowedAmount, maxAllowedAmount: maxAmountFromApi } = useFee()
-    const { balances, gases } = useBalancesState()
+    const { balances, gases, isBalanceLoading, isGasLoading } = useBalancesState()
     const query = useQueryState()
 
     const { getAutofillProvider: getProvider } = useWallet()
     const provider = useMemo(() => {
         return from && getProvider(from)
     }, [from, getProvider])
 
-    const { fetchNetworkBalances, fetchGas } = useBalance()
+    const { fetchBalance, fetchGas } = useBalance()
 
     const wallet = provider?.getConnectedWallet(values.from)
 
@@ -55,13 +55,13 @@ const MinMax = ({ onAddressGet }: { onAddressGet: (address: string) => void }) =
         maxAllowedAmount = Number(maxAmountFromApi) || 0
     }
 
-    const handleSetMaxAmount = useCallback(async () => {
+    const handleSetMaxAmount = async () => {
         setFieldValue('amount', maxAllowedAmount);
-        from && fetchNetworkBalances(from);
-
-        from && fromCurrency && fetchGas(from, fromCurrency, wallet?.address || destination_address || "");
-
-    }, [from, fromCurrency, destination_address, maxAllowedAmount])
+        if (from && fromCurrency) {
+            if (!isBalanceLoading) await fetchBalance(from, fromCurrency);
+            if (!isGasLoading) await fetchGas(from, fromCurrency, destination_address || wallet?.address || "");
+        }
+    }
 
     useEffect(() => {
         wallet?.address && onAddressGet(wallet.address)

components/LayerswapMenu/MenuList.tsx

@@ -94,16 +94,16 @@ const MenuList: FC<{ goToStep: (step: MenuStep, path: string) => void }> = ({ go
                 <Menu.Item pathname='https://docs.layerswap.io/' target="_blank" icon={<BookOpen className="h-5 w-5" />} >
                     Docs for Users
                 </Menu.Item>
-                <Menu.Item pathname='https://docs.layerswap.io/user-docs/partners-and-integrations' target="_blank" icon={<Users className="h-5 w-5" />} >
+                <Menu.Item pathname='https://docs.layerswap.io/user-docs/partners-and-integrations/' target="_blank" icon={<Users className="h-5 w-5" />} >
                     Docs for Partners
                 </Menu.Item>
             </Menu.Group>
 
             <Menu.Group>
-                <Menu.Item pathname='https://docs.layerswap.io/user-docs/information/privacy-policy' target="_blank" icon={<Shield className="h-5 w-5" />} >
+                <Menu.Item pathname='https://docs.layerswap.io/user-docs/more-information/privacy-policy/' target="_blank" icon={<Shield className="h-5 w-5" />} >
                     Privacy Policy
                 </Menu.Item>
-                <Menu.Item pathname='https://docs.layerswap.io/user-docs/information/terms-of-services' target="_blank" icon={<LibraryIcon className="h-5 w-5" />} >
+                <Menu.Item pathname='https://docs.layerswap.io/user-docs/more-information/terms-of-services/' target="_blank" icon={<LibraryIcon className="h-5 w-5" />} >
                     Terms of Service
                 </Menu.Item>
             </Menu.Group>
@@ -177,25 +177,25 @@ const navigation = {
     social: [
         {
             name: 'Twitter',
-            href: 'https://twitter.com/layerswap',
+            href: 'https://twitter.com/layerswap/',
             icon: (props) => TwitterLogo(props),
             className: 'plausible-event-name=Twitter'
         },
         {
             name: 'GitHub',
-            href: 'https://github.com/layerswap/layerswapapp',
+            href: 'https://github.com/layerswap/layerswapapp/',
             icon: (props) => GitHubLogo(props),
             className: 'plausible-event-name=GitHub'
         },
         {
             name: 'Discord',
-            href: 'https://discord.com/invite/KhwYN35sHy',
+            href: 'https://discord.com/invite/KhwYN35sHy/',
             icon: (props) => DiscordLogo(props),
             className: 'plausible-event-name=Discord'
         },
         {
             name: 'YouTube',
-            href: 'https://www.youtube.com/@layerswaphq',
+            href: 'https://www.youtube.com/@layerswaphq/',
             icon: (props) => YoutubeLogo(props),
             className: 'plausible-event-name=Youtube'
         },
@@ -207,7 +207,7 @@ const navigation = {
         },
         {
             name: 'Roadmap',
-            href: 'https://layerswap.ducalis.io/roadmap/summary',
+            href: 'https://layerswap.ducalis.io/roadmap/summary/',
             icon: (props) => <Map {...props}></Map>,
             className: 'plausible-event-name=Roadmap'
         },

components/Swap/Form/index.tsx

@@ -37,6 +37,7 @@ import { AddressGroup } from "../../Input/Address/AddressPicker";
 import { useAsyncModal } from "../../../context/asyncModal";
 import { ValidationProvider } from "../../../context/validationErrorContext";
 import { TrackEvent } from "../../../pages/_document";
+import useBalance from "../../../hooks/useBalance";
 
 type NetworkToConnect = {
     DisplayName: string;
@@ -65,6 +66,7 @@ export default function Form() {
     const { getSourceProvider } = useWallet()
     const addresses = useAddressesStore(state => state.addresses)
     const { getConfirmation } = useAsyncModal();
+    const { fetchBalance } = useBalance()
 
     const settings = useSettingsState();
     const query = useQueryState()
@@ -169,6 +171,9 @@ export default function Form() {
         pollFee(!value)
         setShowSwapModal(value)
         value && swap?.id ? setSwapPath(swap?.id, router) : removeSwapPath(router)
+        if (value === false && swap?.source_network) {
+            fetchBalance(swap?.source_network, swap?.source_token)
+        }
     }, [router, swap])
 
 

components/Swap/Withdraw/Coinbase/Authorize.tsx

@@ -180,7 +180,7 @@ const Authorize: FC<Props> = ({ onAuthorized, hideHeader }) => {
                     <div className="pt-2 font-normal text-xs text-secondary-text">
                         <p className="block font-lighter text-left">
                             <span>Even after authorization Layerswap can&apos;t initiate a withdrawal without your explicit confirmation.&nbsp;</span>
-                            <a target='_blank' href='https://docs.layerswap.io/user-docs/connect-a-coinbase-account' className='text-primary-text underline hover:no-underline decoration-white cursor-pointer'>Learn more</a></p>
+                            <a target='_blank' href='https://docs.layerswap.io/user-docs/connect-a-coinbase-account/' className='text-primary-text underline hover:no-underline decoration-white cursor-pointer'>Learn more</a></p>
                     </div>
                 </div>
             </Widget.Footer>

components/Swap/Withdraw/Failed.tsx

@@ -70,7 +70,7 @@ const Delay: FC = () => {
     return (
         <div>
             <p className='text-md '><span>This usually means that the exchange needs additional verification.</span>
-                <Link target='_blank' href="https://docs.layerswap.io/user-docs/why-is-coinbase-transfer-taking-so-long"
+                <Link target='_blank' href="https://docs.layerswap.io/user-docs/why-is-coinbase-transfer-taking-so-long/"
                     className='disabled:text-opacity-40 disabled:bg-primary-900 disabled:cursor-not-allowed ml-1 underline hover:no-underline cursor-pointer'>Learn More</Link></p>
             <ul className="list-inside list-decimal font-light space-y-1 mt-2 text-left text-primary-text ">
                 <li>Check your email for details from Coinbase</li>

components/Swap/Withdraw/Wallet/ImtblxWalletWithdrawStep.tsx

@@ -63,7 +63,7 @@ const ImtblxWalletWithdrawStep: FC<WithdrawPageProps> = ({ amount, depositAddres
                         <span className='flex-none'>
                             Learn how to send from
                         </span>
-                        <GuideLink text={network?.display_name} userGuideUrl='https://docs.layerswap.io/user-docs/your-first-swap/off-ramp/send-assets-from-immutablex' />
+                        <GuideLink text={network?.display_name} userGuideUrl='https://docs.layerswap.io/user-docs/your-first-swap/off-ramp/send-assets-from-immutablex/' />
                     </WarningMessage>
                     {
                         imxAccount &&

components/Swap/Withdraw/Wallet/ZKsyncWalletWithdraw.tsx

@@ -182,7 +182,7 @@ const ZkSyncWalletWithdrawStep: FC<WithdrawPageProps> = ({ amount, depositAddres
                                                         <p>You can learn more about account activation and the associated fee</p>
                                                     </span>
                                                 </span>
-                                                <a target='_blank' className='text-primary underline hover:no-underline decoration-primary cursor-pointer' href="https://docs.zksync.io/userdocs/faq/#what-is-the-account-activation-fee">in the zkSync Lite FAQ</a>
+                                                <a target='_blank' className='text-primary underline hover:no-underline decoration-primary cursor-pointer' href="https://docs.zksync.io/userdocs/faq/#what-is-the-account-activation-fee/">in the zkSync Lite FAQ</a>
                                             </p>
                                         } />
                                 </p>

components/SwapHistory/HistoryComponent/History.tsx

@@ -228,7 +228,7 @@ const HistoryList: FC<ListProps> = ({ componentType = 'page', onSwapSettled, onN
             </div>
             {
                 <Modal
-                    height="full"
+                    height="80%"
                     show={openSwapDetailsModal}
                     setShow={handleSWapDetailsShow}
                     header='Swap details'

components/SwapHistory/SwapDetailsComponent.tsx

@@ -4,7 +4,7 @@ import Image from 'next/image'
 import shortenAddress, { shortenEmail } from '../utils/ShortenAddress';
 import CopyButton from '../buttons/copyButton';
 import StatusIcon from './StatusIcons';
-import { ExternalLink, RefreshCw } from 'lucide-react';
+import { ArrowRight, ExternalLink, Fuel, Info, RefreshCw } from 'lucide-react';
 import isGuid from '../utils/isGuid';
 import KnownInternalNames from '../../lib/knownIds';
 import { useQueryState } from '../../context/query';
@@ -21,6 +21,7 @@ import { SwapStatus } from '../../Models/SwapStatus';
 import { useRouter } from 'next/router';
 import { resolvePersistantQueryParams } from '../../helpers/querryHelper';
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '../shadcn/accordion';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../shadcn/tooltip';
 
 type Props = {
     swapResponse: SwapResponse
@@ -61,7 +62,7 @@ const SwapDetails: FC<Props> = ({ swapResponse }) => {
     const calculatedFeeAmountInUsd = inputTransactionFeeInUsd ? inputTransactionFeeInUsd + quote?.total_fee_in_usd : quote?.total_fee_in_usd
     const displayCalculatedFeeAmountInUsd = calculatedFeeAmountInUsd ? (calculatedFeeAmountInUsd < 0.01 ? '<$0.01' : `$${calculatedFeeAmountInUsd?.toFixed(2)}`) : null
     const displayLayerswapFeeInUsd = quote?.total_fee_in_usd ? (quote?.total_fee_in_usd < 0.01 ? '<$0.01' : `$${quote?.total_fee_in_usd?.toFixed(2)}`) : null
-console.log('swap', quote)
+
     const nativeCurrency = refuel?.token
     const truncatedRefuelAmount = nativeCurrency && !!refuel ?
         truncateDecimals(refuel.amount, nativeCurrency?.precision) : null
@@ -182,23 +183,40 @@ console.log('swap', quote)
                             </div>
                         </div>
 
+                        {/* Refuel */}
+                        {
+                            refuel && <div className=' bg-secondary-700 rounded-xl py-1.5'>
+                                <div className="flex justify-between items-center text-sm font-normal">
+                                    <div className='inline-flex items-center text-primary-text gap-2'>
+                                        <Fuel className='h-4 w-4' />
+                                        <p className="text-left">Refuel</p>
+                                    </div>
+                                    <Tooltip delayDuration={100}>
+                                        <TooltipTrigger className='flex flex-col items-end'>
+                                            <div className="flex items-center gap-1 text-primary-buttonTextColor">
+                                                <Info className='h-3.5 w-3.5' />
+                                                <p className="text-primary-text text-sm font-normal">{truncatedRefuelAmount} {nativeCurrency?.symbol}</p>
+                                            </div>
+                                            {/* <p className="text-secondary-text text-sm font-normal">${refuelAmountInUsd}</p> */}
+                                        </TooltipTrigger>
+                                        <TooltipContent>
+                                            <div className='flex flex-col gap-2 justify-start text-sm font-normal'>
+                                                <p className='text-secondary-text'>Conversion rate</p>
+                                                <div className="inline-flex gap-2 items-center text-primary-text">
+                                                    <p>{quote.refuel_in_source} {source_token.symbol}</p>
+                                                    <ArrowRight className='h-4 w-4' />
+                                                    <p>{refuel.amount} {refuel.token.symbol}</p>
+                                                </div>
+                                            </div>
+                                        </TooltipContent>
+                                    </Tooltip>
+                                </div>
+                            </div>
+                        }
 
                     </div>
                 </div>
 
-                {/* Refuel */}
-                {
-                    refuel && <div className='p-3 bg-secondary-700 rounded-xl'>
-                        <div className="flex justify-between items-baseline text-sm">
-                            <p className="text-left text-secondary-text">Refuel</p>
-                            <div className="flex flex-col justify-end">
-                                <p className="text-primary-text text-sm font-semibold">{truncatedRefuelAmount} {nativeCurrency?.symbol}</p>
-                                <p className="text-secondary-text text-xs flex justify-end">${refuelAmountInUsd}</p>
-                            </div>
-                        </div>
-                    </div>
-                }
-
                 {/* Fees */}
                 <div className='p-3 bg-secondary-700 rounded-xl'>
                     {
@@ -208,7 +226,7 @@ console.log('swap', quote)
                                     <AccordionTrigger className='w-full'>
                                         <div className="flex justify-between items-baseline text-sm w-full mr-1">
                                             <span className="text-left">Fees</span>
-                                            <span className='font-semibold text-primary-text'>{displayLayerswapFeeInUsd}</span>
+                                            <span className='font-semibold text-primary-text'>{displayCalculatedFeeAmountInUsd}</span>
                                         </div>
                                     </AccordionTrigger>
                                     <AccordionContent >
@@ -220,13 +238,13 @@ console.log('swap', quote)
                                                     <p className="text-secondary-text text-xs flex justify-end">{displayLayerswapFeeInUsd}</p>
                                                 </div>
                                             </div>
-                                            {/* <div className="flex justify-between items-baseline text-sm">
+                                            <div className="flex justify-between items-baseline text-sm">
                                                 <span className="text-left text-secondary-text">Gas Fee</span>
                                                 <div className="flex flex-col items-end justify-end">
                                                     <p className="text-primary-text text-sm font-semibold">{inputTransactionFee?.toFixed(swapInputTransaction?.fee_token?.precision)} {swapInputTransaction?.fee_token?.symbol}</p>
                                                     <p className="text-secondary-text text-xs flex justify-end">{displayInputFeeInUsd}</p>
                                                 </div>
-                                            </div> */}
+                                            </div>
                                         </div>
                                     </AccordionContent>
                                 </AccordionItem>

components/VerifyEmailCode.tsx

@@ -56,8 +56,8 @@ const VerifyEmailCode: FC<VerifyEmailCodeProps> = ({ onSuccessfullVerify, disclo
         setShowDocModal(true)
     }
 
-    const handleOpenTerms = () => openDoc('https://docs.layerswap.io/user-docs/information/terms-of-services')
-    const handleOpenPrivacyPolicy = () => openDoc('https://docs.layerswap.io/user-docs/information/privacy-policy')
+    const handleOpenTerms = () => openDoc('https://docs.layerswap.io/user-docs/information/terms-of-services/')
+    const handleOpenPrivacyPolicy = () => openDoc('https://docs.layerswap.io/user-docs/information/privacy-policy/')
 
     const timerCountdown = userLockedOut ? 600 : 60