diff --git a/packages/bridge-ui-v2/src/components/Bridge/Amount.svelte b/packages/bridge-ui-v2/src/components/Bridge/Amount.svelte index ca2c0071e0..e3c4c29068 100644 --- a/packages/bridge-ui-v2/src/components/Bridge/Amount.svelte +++ b/packages/bridge-ui-v2/src/components/Bridge/Amount.svelte @@ -8,13 +8,12 @@ import { warningToast } from '$components/NotificationToast'; import { checkBalanceToBridge, getMaxAmountToBridge } from '$libs/bridge'; import { InsufficientAllowanceError, InsufficientBalanceError, RevertedWithFailedError } from '$libs/error'; - import { ETHToken, getBalance as getTokenBalance } from '$libs/token'; + import { ETHToken, getBalance as getTokenBalance,TokenType } from '$libs/token'; + import { renderBalance } from '$libs/util/balance'; import { debounce } from '$libs/util/debounce'; import { getLogger } from '$libs/util/logger'; - import { renderBalance } from '$libs/util/renderBalance'; import { uid } from '$libs/util/uid'; import { account } from '$stores/account'; - import { ethBalance } from '$stores/balance'; import { network } from '$stores/network'; import { @@ -102,16 +101,15 @@ $errorComputingBalance = false; try { - $tokenBalance = await getTokenBalance({ - token, - srcChainId, - destChainId, - userAddress, - }); - if (token.name === ETHToken.name) { - $ethBalance = $tokenBalance; + if (token.type !== TokenType.ETH) { + $tokenBalance = await getTokenBalance({ + token, + srcChainId, + destChainId, + userAddress, + }); } else { - $ethBalance = await getTokenBalance({ + $tokenBalance = await getTokenBalance({ token: ETHToken, srcChainId, destChainId, diff --git a/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte b/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte index 98ebca5ee6..02cbe1cd90 100644 --- a/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte +++ b/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte @@ -29,6 +29,7 @@ } from '$libs/error'; import { bridgeTxService } from '$libs/storage'; import { ETHToken, getAddress, isDeployedCrossChain, tokens, TokenType } from '$libs/token'; + import { refreshUserBalance } from '$libs/util/balance'; import { getConnectedWallet } from '$libs/util/getConnectedWallet'; import { type Account, account } from '$stores/account'; import { type Network, network } from '$stores/network'; @@ -247,6 +248,9 @@ // Update balance after bridging amountComponent.updateBalance(); + + // Refresh user's balance + refreshUserBalance(); } catch (err) { console.error(err); diff --git a/packages/bridge-ui-v2/src/components/Bridge/NFTBridge.svelte b/packages/bridge-ui-v2/src/components/Bridge/NFTBridge.svelte index 426dd4d7ce..01b57cbbef 100644 --- a/packages/bridge-ui-v2/src/components/Bridge/NFTBridge.svelte +++ b/packages/bridge-ui-v2/src/components/Bridge/NFTBridge.svelte @@ -18,7 +18,7 @@ let isAddressValid = false; let contractAddress = ''; - let imageUrls = Array(); + let imageUrls = []; $: tokenIds = $tokenIdStore; $: isButtonDisabled = !($tokenIdStore?.length ?? 0); diff --git a/packages/bridge-ui-v2/src/components/Bridge/Recipient.svelte b/packages/bridge-ui-v2/src/components/Bridge/Recipient.svelte index 9623913a1a..028ab7f895 100644 --- a/packages/bridge-ui-v2/src/components/Bridge/Recipient.svelte +++ b/packages/bridge-ui-v2/src/components/Bridge/Recipient.svelte @@ -12,6 +12,12 @@ import AddressInput from './AddressInput.svelte'; import { recipientAddress } from './state'; + // Public API + export const clearRecipient = () => { + addressInput.clear(); // update UI + $recipientAddress = null; // update state + }; + let dialogId = `dialog-${uid()}`; let addressInput: AddressInput; diff --git a/packages/bridge-ui-v2/src/components/ConnectButton/ConnectButton.svelte b/packages/bridge-ui-v2/src/components/ConnectButton/ConnectButton.svelte index 46e565ddef..ac3c3c9994 100644 --- a/packages/bridge-ui-v2/src/components/ConnectButton/ConnectButton.svelte +++ b/packages/bridge-ui-v2/src/components/ConnectButton/ConnectButton.svelte @@ -3,19 +3,14 @@ import { t } from 'svelte-i18n'; import { Button } from '$components/Button'; - import { DesktopOrLarger } from '$components/DesktopOrLarger'; import { EthIcon, Icon } from '$components/Icon'; + import { Spinner } from '$components/Spinner'; import { web3modal } from '$libs/connect'; + import { renderEthBalance } from '$libs/util/balance'; import { noop } from '$libs/util/noop'; - import { renderBalance } from '$libs/util/renderBalance'; import { ethBalance } from '$stores/balance'; - export let connected = false; - // Will help us to programmatically show or hide the balance of - // the web3modal core button - let isDesktopOrLarger: boolean; - let web3modalOpen = false; let unsubscribeWeb3Modal = noop; @@ -35,23 +30,19 @@ onDestroy(unsubscribeWeb3Modal); - - - {#if connected} {:else} -