diff --git a/components/Input/CurrencyFormField.tsx b/components/Input/CurrencyFormField.tsx index 08d374ec4..5e60f057e 100644 --- a/components/Input/CurrencyFormField.tsx +++ b/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) => { setFieldValue(name, item.baseObject, true) }, [name, direction, toCurrency, fromCurrency, from, to]) diff --git a/components/Input/TransferCEX.tsx b/components/Input/TransferCEX.tsx index 831503d3c..4eb0c5063 100644 --- a/components/Input/TransferCEX.tsx +++ b/components/Input/TransferCEX.tsx @@ -20,7 +20,7 @@ const TransferCEX: FC = ({ 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 (
diff --git a/components/Input/dynamic/MinMax.tsx b/components/Input/dynamic/MinMax.tsx index 79981963a..2a941fadb 100644 --- a/components/Input/dynamic/MinMax.tsx +++ b/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,7 +13,7 @@ const MinMax = ({ onAddressGet }: { onAddressGet: (address: string) => void }) = const { values, setFieldValue } = useFormikContext(); 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() @@ -21,7 +21,7 @@ const MinMax = ({ onAddressGet }: { onAddressGet: (address: string) => void }) = 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) diff --git a/components/LayerswapMenu/MenuList.tsx b/components/LayerswapMenu/MenuList.tsx index 3256cc4c9..c89e86639 100644 --- a/components/LayerswapMenu/MenuList.tsx +++ b/components/LayerswapMenu/MenuList.tsx @@ -94,16 +94,16 @@ const MenuList: FC<{ goToStep: (step: MenuStep, path: string) => void }> = ({ go } > Docs for Users - } > + } > Docs for Partners - } > + } > Privacy Policy - } > + } > Terms of Service @@ -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) => , className: 'plausible-event-name=Roadmap' }, diff --git a/components/Swap/Form/index.tsx b/components/Swap/Form/index.tsx index cfb6fa3d1..13676bce5 100644 --- a/components/Swap/Form/index.tsx +++ b/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]) diff --git a/components/Swap/Withdraw/Coinbase/Authorize.tsx b/components/Swap/Withdraw/Coinbase/Authorize.tsx index c0a82f559..d04197cc9 100644 --- a/components/Swap/Withdraw/Coinbase/Authorize.tsx +++ b/components/Swap/Withdraw/Coinbase/Authorize.tsx @@ -180,7 +180,7 @@ const Authorize: FC = ({ onAuthorized, hideHeader }) => {

Even after authorization Layerswap can't initiate a withdrawal without your explicit confirmation.  - Learn more

+ Learn more

diff --git a/components/Swap/Withdraw/Failed.tsx b/components/Swap/Withdraw/Failed.tsx index 55c74f5b0..f94cbdbc7 100644 --- a/components/Swap/Withdraw/Failed.tsx +++ b/components/Swap/Withdraw/Failed.tsx @@ -70,7 +70,7 @@ const Delay: FC = () => { return (

This usually means that the exchange needs additional verification. - Learn More

  • Check your email for details from Coinbase
    • diff --git a/components/Swap/Withdraw/Wallet/ImtblxWalletWithdrawStep.tsx b/components/Swap/Withdraw/Wallet/ImtblxWalletWithdrawStep.tsx index b4a3ddf7c..eb3c41b34 100644 --- a/components/Swap/Withdraw/Wallet/ImtblxWalletWithdrawStep.tsx +++ b/components/Swap/Withdraw/Wallet/ImtblxWalletWithdrawStep.tsx @@ -63,7 +63,7 @@ const ImtblxWalletWithdrawStep: FC = ({ amount, depositAddres Learn how to send from - + { imxAccount && diff --git a/components/Swap/Withdraw/Wallet/ZKsyncWalletWithdraw.tsx b/components/Swap/Withdraw/Wallet/ZKsyncWalletWithdraw.tsx index d0cbfa855..b0e592f06 100644 --- a/components/Swap/Withdraw/Wallet/ZKsyncWalletWithdraw.tsx +++ b/components/Swap/Withdraw/Wallet/ZKsyncWalletWithdraw.tsx @@ -182,7 +182,7 @@ const ZkSyncWalletWithdrawStep: FC = ({ amount, depositAddres

    You can learn more about account activation and the associated fee

    - in the zkSync Lite FAQ + in the zkSync Lite FAQ

    } />

    diff --git a/components/SwapHistory/HistoryComponent/History.tsx b/components/SwapHistory/HistoryComponent/History.tsx index f43b699ce..b0fdb0e38 100644 --- a/components/SwapHistory/HistoryComponent/History.tsx +++ b/components/SwapHistory/HistoryComponent/History.tsx @@ -228,7 +228,7 @@ const HistoryList: FC = ({ componentType = 'page', onSwapSettled, onN
{ = ({ 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)
+ {/* Refuel */} + { + refuel &&
+
+
+ +

Refuel

+
+ + +
+ +

{truncatedRefuelAmount} {nativeCurrency?.symbol}

+
+ {/*

${refuelAmountInUsd}

*/} + + +
+

Conversion rate

+
+

{quote.refuel_in_source} {source_token.symbol}

+ +

{refuel.amount} {refuel.token.symbol}

+
+
+ + +
+
+ } - {/* Refuel */} - { - refuel &&
-
-

Refuel

-
-

{truncatedRefuelAmount} {nativeCurrency?.symbol}

-

${refuelAmountInUsd}

-
-
-
- } - {/* Fees */}
{ @@ -208,7 +226,7 @@ console.log('swap', quote)
Fees - {displayLayerswapFeeInUsd} + {displayCalculatedFeeAmountInUsd}
@@ -220,13 +238,13 @@ console.log('swap', quote)

{displayLayerswapFeeInUsd}

- {/*
+
Gas Fee

{inputTransactionFee?.toFixed(swapInputTransaction?.fee_token?.precision)} {swapInputTransaction?.fee_token?.symbol}

{displayInputFeeInUsd}

-
*/} +
diff --git a/components/VerifyEmailCode.tsx b/components/VerifyEmailCode.tsx index 9853a39ae..7176e4216 100644 --- a/components/VerifyEmailCode.tsx +++ b/components/VerifyEmailCode.tsx @@ -56,8 +56,8 @@ const VerifyEmailCode: FC = ({ 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 diff --git a/components/WalletProviders/SolanaProvider.tsx b/components/WalletProviders/SolanaProvider.tsx index cd48e0cfa..3a62710c6 100644 --- a/components/WalletProviders/SolanaProvider.tsx +++ b/components/WalletProviders/SolanaProvider.tsx @@ -30,7 +30,7 @@ function SolanaProvider({ children }: { children: ReactNode }) { metadata: { name: 'Layerwap', description: 'Layerswap App', - url: 'https://layerswap.io/app', + url: 'https://layerswap.io/app/', icons: ['https://www.layerswap.io/app/symbol.png'], }, }, diff --git a/components/globalFooter.tsx b/components/globalFooter.tsx index 92897e152..09fc521ae 100644 --- a/components/globalFooter.tsx +++ b/components/globalFooter.tsx @@ -11,37 +11,37 @@ const GLobalFooter = () => { const footerNavigation = { main: [ { name: 'Product', href: '/' }, - { name: 'Company', href: '/company' }, - { name: 'FAQ', href: '/faq' }, - { name: 'Privacy Policy', href: 'https://docs.layerswap.io/information/privacy-policy' }, - { name: 'Terms of Services', href: 'https://docs.layerswap.io/information/terms-of-services' }, + { name: 'Company', href: '/company/' }, + { name: 'FAQ', href: '/faq/' }, + { name: 'Privacy Policy', href: 'https://docs.layerswap.io/user-docs/more-information/privacy-policy/' }, + { name: 'Terms of Services', href: 'https://docs.layerswap.io/user-docs/more-information/terms-of-services/' }, { name: 'Docs', href: 'https://docs.layerswap.io/onboarding-sdk/' }, ], social: [ { name: 'Twitter', - href: 'https://twitter.com/layerswap', + href: 'https://twitter.com/layerswap/', icon: () => (