thirdweb 5.64.1 → 5.64.3-nightly-ddec3dadcc260e0d4d0ed2b43c502e0915a14203-20241029000326

package/src/extensions/unstoppable-domains/read/resolveName.test.ts

@@ -5,21 +5,24 @@ import { resolveName } from "./resolveName.js";
 
 // Double check: https://unstoppabledomains.com/d/thirdwebsdk.unstoppable
 
-describe("Unstoppable Domain: resolve name", () => {
-  it("should resolve name", async () => {
-    expect(
-      await resolveName({
-        address: "0x12345674b599ce99958242b3D3741e7b01841DF3",
-        client: TEST_CLIENT,
-      }),
-    ).toBe("thirdwebsdk.unstoppable");
-  });
+describe.runIf(process.env.TW_SECRET_KEY)(
+  "Unstoppable Domain: resolve name",
+  () => {
+    it("should resolve name", async () => {
+      expect(
+        await resolveName({
+          address: "0x12345674b599ce99958242b3D3741e7b01841DF3",
+          client: TEST_CLIENT,
+        }),
+      ).toBe("thirdwebsdk.unstoppable");
+    });
 
-  it("should throw error on addresses that dont own any UD", async () => {
-    await expect(() =>
-      resolveName({ client: TEST_CLIENT, address: TEST_ACCOUNT_D.address }),
-    ).rejects.toThrowError(
-      `Failed to retrieve domain for address: ${TEST_ACCOUNT_D.address}. Make sure you have set the Reverse Resolution address for your domain at https://unstoppabledomains.com/manage?page=reverseResolution&domain=your-domain`,
-    );
-  });
-});
+    it("should throw error on addresses that dont own any UD", async () => {
+      await expect(() =>
+        resolveName({ client: TEST_CLIENT, address: TEST_ACCOUNT_D.address }),
+      ).rejects.toThrowError(
+        `Failed to retrieve domain for address: ${TEST_ACCOUNT_D.address}. Make sure you have set the Reverse Resolution address for your domain at https://unstoppabledomains.com/manage?page=reverseResolution&domain=your-domain`,
+      );
+    });
+  },
+);

package/src/extensions/vote/{read/proposalExists.test.ts → vote.test.ts}

@@ -3,22 +3,22 @@ import { ANVIL_CHAIN } from "~test/chains.js";
 import { TEST_CONTRACT_URI } from "~test/ipfs-uris.js";
 import { TEST_CLIENT } from "~test/test-clients.js";
 import { TEST_ACCOUNT_C } from "~test/test-wallets.js";
-import { getContract } from "../../../contract/contract.js";
-import { delegate } from "../../../extensions/erc20/__generated__/IVotes/write/delegate.js";
-import { mintTo } from "../../../extensions/erc20/write/mintTo.js";
-import { deployERC20Contract } from "../../../extensions/prebuilts/deploy-erc20.js";
-import { deployVoteContract } from "../../../extensions/prebuilts/deploy-vote.js";
-import { sendAndConfirmTransaction } from "../../../transaction/actions/send-and-confirm-transaction.js";
-import { propose } from "../__generated__/Vote/write/propose.js";
-import { getAll } from "./getAll.js";
-import { proposalExists } from "./proposalExists.js";
+import { getContract } from "../../contract/contract.js";
+import { sendAndConfirmTransaction } from "../../transaction/actions/send-and-confirm-transaction.js";
+import { delegate } from "../erc20/__generated__/IVotes/write/delegate.js";
+import { mintTo } from "../erc20/write/mintTo.js";
+import { deployERC20Contract } from "../prebuilts/deploy-erc20.js";
+import { deployVoteContract } from "../prebuilts/deploy-vote.js";
+import { propose } from "./__generated__/Vote/write/propose.js";
+import { getAll } from "./read/getAll.js";
+import { proposalExists } from "./read/proposalExists.js";
 
 const account = TEST_ACCOUNT_C;
 const client = TEST_CLIENT;
 const chain = ANVIL_CHAIN;
 
 describe.runIf(process.env.TW_SECRET_KEY)("proposal exists", () => {
-  it("should return false if Vote doesn't have any proposal", async () => {
+  it("`proposalExists` and `propose` should work", async () => {
     const tokenAddress = await deployERC20Contract({
       client: TEST_CLIENT,
       chain: ANVIL_CHAIN,
@@ -42,47 +42,16 @@ describe.runIf(process.env.TW_SECRET_KEY)("proposal exists", () => {
         minVoteQuorumRequiredPercent: 51,
       },
     });
-
-    const contract = getContract({
+    const voteContract = getContract({
       address,
       chain,
       client,
     });
-
-    const result = await proposalExists({ contract, proposalId: 0n });
-    expect(result).toBe(false);
-  });
-
-  it("should return true if Vote has the proposal (id)", async () => {
-    const tokenAddress = await deployERC20Contract({
-      client: TEST_CLIENT,
-      chain: ANVIL_CHAIN,
-      account,
-      type: "TokenERC20",
-      params: {
-        name: "Token",
-        contractURI: TEST_CONTRACT_URI,
-      },
-    });
-    const address = await deployVoteContract({
-      account,
-      client: TEST_CLIENT,
-      chain: ANVIL_CHAIN,
-      params: {
-        name: "",
-        contractURI: TEST_CONTRACT_URI,
-        tokenAddress: tokenAddress,
-        initialProposalThreshold: "0.5",
-        initialVotingPeriod: 10,
-        minVoteQuorumRequiredPercent: 51,
-      },
-    });
-
-    const contract = getContract({
-      address,
-      chain,
-      client,
+    const result = await proposalExists({
+      contract: voteContract,
+      proposalId: 0n,
     });
+    expect(result).toBe(false);
 
     const tokenContract = getContract({
       address: tokenAddress,
@@ -105,19 +74,19 @@ describe.runIf(process.env.TW_SECRET_KEY)("proposal exists", () => {
 
     // step 3: create a proposal
     const transaction = propose({
-      contract,
+      contract: voteContract,
       description: "first proposal",
-      targets: [contract.address],
+      targets: [voteContract.address],
       values: [0n],
       calldatas: ["0x"],
     });
     await sendAndConfirmTransaction({ transaction, account });
-    const allProposals = await getAll({ contract });
+    const allProposals = await getAll({ contract: voteContract });
     expect(allProposals.length).toBe(1);
-    const result = await proposalExists({
-      contract,
+    const exists = await proposalExists({
+      contract: voteContract,
       proposalId: allProposals[0]?.proposalId || -1n,
     });
-    expect(result).toBe(true);
+    expect(exists).toBe(true);
   });
 });

package/src/react/core/hooks/transaction/useSendTransaction.ts

@@ -13,6 +13,7 @@ import { resolvePromisedValue } from "../../../../utils/promise/resolve-promised
 import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
 import { getTokenBalance } from "../../../../wallets/utils/getTokenBalance.js";
 import { getWalletBalance } from "../../../../wallets/utils/getWalletBalance.js";
+import { fetchBuySupportedDestinations } from "../../../web/ui/ConnectWallet/screens/Buy/swap/useSwapSupportedChains.js";
 import type { LocaleId } from "../../../web/ui/types.js";
 import type { Theme } from "../../design-system/index.js";
 import type { SupportedTokens } from "../../utils/defaultTokens.js";
@@ -164,10 +165,39 @@ export function useSendTransactionCore(args: {
 
         (async () => {
           try {
-            const [_nativeValue, _erc20Value] = await Promise.all([
-              resolvePromisedValue(tx.value),
-              resolvePromisedValue(tx.erc20Value),
-            ]);
+            const [_nativeValue, _erc20Value, supportedDestinations] =
+              await Promise.all([
+                resolvePromisedValue(tx.value),
+                resolvePromisedValue(tx.erc20Value),
+                fetchBuySupportedDestinations(tx.client).catch(() => null),
+              ]);
+
+            if (!supportedDestinations) {
+              // could not fetch supported destinations, just send the tx
+              sendTx();
+              return;
+            }
+
+            if (
+              !supportedDestinations
+                .map((x) => x.chain.id)
+                .includes(tx.chain.id) ||
+              (_erc20Value &&
+                !supportedDestinations.some(
+                  (x) =>
+                    x.chain.id === tx.chain.id &&
+                    x.tokens.find(
+                      (t) =>
+                        t.address.toLowerCase() ===
+                        _erc20Value.tokenAddress.toLowerCase(),
+                    ),
+                ))
+            ) {
+              // chain/token not supported, just send the tx
+              sendTx();
+              return;
+            }
+
             const nativeValue = _nativeValue || 0n;
             const erc20Value = _erc20Value?.amountWei || 0n;
 

package/src/react/web/ui/ConnectWallet/screens/Buy/BuyScreen.tsx

@@ -1,7 +1,5 @@
-import { IdCardIcon } from "@radix-ui/react-icons";
 import { useQueryClient } from "@tanstack/react-query";
 import { useCallback, useMemo, useState } from "react";
-import { trackPayEvent } from "../../../../../../analytics/track/pay.js";
 import type { Chain } from "../../../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../../../client/client.js";
 import { NATIVE_TOKEN_ADDRESS } from "../../../../../../constants/addresses.js";
@@ -14,7 +12,6 @@ import type { Account } from "../../../../../../wallets/interfaces/wallet.js";
 import type { WalletId } from "../../../../../../wallets/wallet-types.js";
 import {
   type Theme,
-  iconSize,
   spacing,
 } from "../../../../../core/design-system/index.js";
 import type {
@@ -44,7 +41,6 @@ import { Text } from "../../../components/text.js";
 import { TokenSymbol } from "../../../components/token/TokenSymbol.js";
 import { ConnectButton } from "../../ConnectButton.js";
 import { ChainButton, NetworkSelectorContent } from "../../NetworkSelector.js";
-import { CoinsIcon } from "../../icons/CoinsIcon.js";
 import type { ConnectLocale } from "../../locale/types.js";
 import { TokenSelector } from "../TokenSelector.js";
 import { WalletSwitcherConnectionScreen } from "../WalletSwitcherConnectionScreen.js";
@@ -54,7 +50,6 @@ import { EstimatedTimeAndFees } from "./EstimatedTimeAndFees.js";
 import { PayTokenIcon } from "./PayTokenIcon.js";
 import { PayWithCreditCard } from "./PayWIthCreditCard.js";
 import { TransactionModeScreen } from "./TransactionModeScreen.js";
-import { WalletSelectorButton } from "./WalletSelectorButton.js";
 import { CurrencySelection } from "./fiat/CurrencySelection.js";
 import { FiatFlow } from "./fiat/FiatFlow.js";
 import type { CurrencyMeta } from "./fiat/currencies.js";
@@ -71,10 +66,10 @@ import {
 import { openOnrampPopup } from "./openOnRamppopup.js";
 import { BuyTokenInput } from "./swap/BuyTokenInput.js";
 import { FiatFees, SwapFees } from "./swap/Fees.js";
-import { PayWithCrypto } from "./swap/PayWithCrypto.js";
+import { PayWithCryptoQuoteInfo } from "./swap/PayWithCrypto.js";
+import { PaymentSelectionScreen } from "./swap/PaymentSelectionScreen.js";
 import { SwapFlow } from "./swap/SwapFlow.js";
 import { TransferFlow } from "./swap/TransferFlow.js";
-import { WalletSwitcherDrawerContent } from "./swap/WalletSwitcherDrawerContent.js";
 import { addPendingTx } from "./swap/pendingSwapTx.js";
 import {
   type SupportedChainAndTokens,
@@ -222,7 +217,6 @@ function BuyScreenContent(props: BuyScreenContentProps) {
   });
 
   const payDisabled =
-    enabledPaymentMethods.showPaymentSelection === false &&
     enabledPaymentMethods.buyWithCryptoEnabled === false &&
     enabledPaymentMethods.buyWithFiatEnabled === false;
 
@@ -515,7 +509,6 @@ function BuyScreenContent(props: BuyScreenContentProps) {
         )}
 
         {(screen.id === "select-payment-method" ||
-          screen.id === "select-wallet" ||
           screen.id === "buy-with-crypto" ||
           screen.id === "buy-with-fiat") &&
           payer && (
@@ -527,44 +520,43 @@ function BuyScreenContent(props: BuyScreenContentProps) {
               client={client}
               onBack={() => {
                 if (
-                  enabledPaymentMethods.showPaymentSelection &&
-                  (screen.id === "select-wallet" ||
-                    screen.id === "buy-with-fiat")
+                  enabledPaymentMethods.buyWithCryptoEnabled &&
+                  screen.id === "buy-with-fiat"
                 ) {
                   setScreen({ id: "select-payment-method" });
                 } else if (screen.id === "buy-with-crypto") {
-                  setScreen({ id: "select-wallet" });
+                  setScreen({ id: "select-payment-method" });
                 } else {
                   setScreen({ id: "main" });
                 }
               }}
             >
               {screen.id === "select-payment-method" && (
-                <PaymentMethodSelection
-                  mode={payOptions.mode}
-                  client={client}
-                  walletAddress={payer.account.address}
-                  walletType={payer.wallet.id}
-                  setScreen={(id) => setScreen({ id })}
-                />
-              )}
-
-              {screen.id === "select-wallet" && (
-                <WalletSwitcherDrawerContent
+                <PaymentSelectionScreen
                   client={client}
+                  mode={payOptions.mode}
+                  sourceSupportedTokens={sourceSupportedTokens}
                   hiddenWallets={props.hiddenWallets}
-                  onSelect={(w) => {
-                    const chain = w.getChain();
+                  payWithFiatEnabled={props.payOptions.buyWithFiat !== false}
+                  toChain={toChain}
+                  toToken={toToken}
+                  tokenAmount={tokenAmount}
+                  onSelect={(w, token, chain) => {
                     const account = w.getAccount();
-                    if (chain && account) {
+                    if (account) {
                       setPayer({
                         account,
                         chain,
                         wallet: w,
                       });
+                      setFromToken(token);
+                      setFromChain(chain);
                       setScreen({ id: "buy-with-crypto" });
                     }
                   }}
+                  onSelectFiat={() => {
+                    setScreen({ id: "buy-with-fiat" });
+                  }}
                   showAllWallets={!!props.connectOptions?.showAllWallets}
                   wallets={props.connectOptions?.wallets}
                   onBack={() => {
@@ -574,11 +566,10 @@ function BuyScreenContent(props: BuyScreenContentProps) {
                     setScreen({
                       id: "connect-payer-wallet",
                       backScreen: {
-                        id: "select-wallet",
+                        id: "select-payment-method",
                       },
                     });
                   }}
-                  selectedAddress={payer.account.address}
                 />
               )}
 
@@ -736,8 +727,7 @@ function MainScreen(props: {
     enabledPaymentMethods,
   } = props;
 
-  const { showPaymentSelection, buyWithCryptoEnabled, buyWithFiatEnabled } =
-    enabledPaymentMethods;
+  const { buyWithCryptoEnabled, buyWithFiatEnabled } = enabledPaymentMethods;
   const disableContinue = !tokenAmount;
 
   switch (payOptions.mode) {
@@ -755,15 +745,10 @@ function MainScreen(props: {
             setFromChain(toChain);
             setFromToken(toToken);
             setToToken(toToken);
-            if (showPaymentSelection) {
-              props.setScreen({ id: "select-payment-method" });
-            } else if (buyWithCryptoEnabled) {
-              props.setScreen({ id: "select-wallet" });
-            } else if (buyWithFiatEnabled) {
+            if (buyWithFiatEnabled && !buyWithCryptoEnabled) {
               props.setScreen({ id: "buy-with-fiat" });
             } else {
-              // default to buy with crypto with connected wallet if chain not supported by pay
-              props.setScreen({ id: "select-wallet" });
+              props.setScreen({ id: "select-payment-method" });
             }
           }}
         />
@@ -783,15 +768,10 @@ function MainScreen(props: {
             setFromChain(toChain);
             setFromToken(toToken);
             setToToken(toToken);
-            if (showPaymentSelection) {
-              props.setScreen({ id: "select-payment-method" });
-            } else if (buyWithCryptoEnabled) {
-              props.setScreen({ id: "buy-with-crypto" });
-            } else if (buyWithFiatEnabled) {
+            if (buyWithFiatEnabled && !buyWithCryptoEnabled) {
               props.setScreen({ id: "buy-with-fiat" });
             } else {
-              // default to buy with crypto with connected wallet if chain not supported by pay
-              props.setScreen({ id: "select-wallet" });
+              props.setScreen({ id: "select-payment-method" });
             }
           }}
         />
@@ -846,14 +826,10 @@ function MainScreen(props: {
                 disabled={disableContinue}
                 data-disabled={disableContinue}
                 onClick={() => {
-                  if (showPaymentSelection) {
-                    props.setScreen({ id: "select-payment-method" });
-                  } else if (buyWithCryptoEnabled) {
-                    props.setScreen({ id: "buy-with-crypto" });
-                  } else if (buyWithFiatEnabled) {
+                  if (buyWithFiatEnabled && !buyWithCryptoEnabled) {
                     props.setScreen({ id: "buy-with-fiat" });
                   } else {
-                    console.error("No payment method enabled");
+                    props.setScreen({ id: "select-payment-method" });
                   }
                 }}
               >
@@ -909,87 +885,6 @@ function TokenSelectedLayout(props: {
   );
 }
 
-function PaymentMethodSelection(props: {
-  client: ThirdwebClient;
-  walletAddress: string;
-  walletType: string;
-  setScreen: (screenId: "select-wallet" | "buy-with-fiat") => void;
-  mode?: "transaction" | "direct_payment" | "fund_wallet";
-}) {
-  return (
-    <Container animate="fadein">
-      {/* Credit Card */}
-      <Container flex="column" gap="sm">
-        <Button
-          variant="outline"
-          bg="tertiaryBg"
-          onClick={() => {
-            trackPayEvent({
-              event: `pay_with_credit_card_${props.mode || "unknown"}_mode`,
-              client: props.client,
-              walletAddress: props.walletAddress,
-              walletType: props.walletType,
-            });
-            props.setScreen("buy-with-fiat");
-          }}
-          gap="sm"
-          style={{
-            justifyContent: "flex-start",
-            textAlign: "left",
-          }}
-        >
-          <Container color="secondaryText" flex="row" center="both">
-            <IdCardIcon
-              style={{
-                width: iconSize.md,
-                height: iconSize.md,
-              }}
-            />
-          </Container>
-
-          <Container flex="column" gap="xxs">
-            <Text size="md" color="primaryText">
-              Credit Card
-            </Text>
-            <Text size="xs">Securely pay with credit card</Text>
-          </Container>
-        </Button>
-
-        {/* Crypto */}
-        <Button
-          variant="outline"
-          bg="tertiaryBg"
-          onClick={() => {
-            trackPayEvent({
-              event: `pay_with_crypto_${props.mode || "unknown"}_mode`,
-              client: props.client,
-              walletAddress: props.walletAddress,
-              walletType: props.walletType,
-            });
-
-            props.setScreen("select-wallet");
-          }}
-          style={{
-            justifyContent: "flex-start",
-          }}
-          gap="sm"
-        >
-          <Container color="secondaryText" flex="row" center="both">
-            <CoinsIcon size={iconSize.md} />
-          </Container>
-
-          <Container flex="column" gap="xxs">
-            <Text size="md" color="primaryText">
-              Crypto
-            </Text>
-            <Text size="xs">Pay with your connected wallet</Text>
-          </Container>
-        </Button>
-      </Container>
-    </Container>
-  );
-}
-
 function SwapScreenContent(props: {
   setScreen: (screen: SelectedScreen) => void;
   tokenAmount: string;
@@ -1020,7 +915,6 @@ function SwapScreenContent(props: {
     toToken,
     fromChain,
     fromToken,
-    showFromTokenSelector,
     payOptions,
     disableTokenSelection,
   } = props;
@@ -1194,22 +1088,8 @@ function SwapScreenContent(props: {
 
       {/* Quote info */}
       <div>
-        <WalletSelectorButton
-          client={props.client}
-          onClick={() => {
-            setScreen({ id: "select-wallet" });
-          }}
-          address={props.payer.account.address}
-          walletId={props.payer.wallet.id}
-          containerStyle={{
-            borderBottomRightRadius: 0,
-            borderBottomLeftRadius: 0,
-          }}
-        />
-
-        <PayWithCrypto
+        <PayWithCryptoQuoteInfo
           value={sourceTokenAmount || ""}
-          onSelectToken={showFromTokenSelector}
           chain={fromChain}
           token={fromToken}
           isLoading={quoteQuery.isLoading && !sourceTokenAmount}
@@ -1550,6 +1430,13 @@ function createSupportedTokens(
 
   for (const x of data) {
     tokens[x.chain.id] = x.tokens.filter((t) => {
+      // for source tokens, data is not provided, so we include all of them
+      if (
+        t.buyWithCryptoEnabled === undefined &&
+        t.buyWithFiatEnabled === undefined
+      ) {
+        return true;
+      }
       // it token supports both - include it
       if (t.buyWithCryptoEnabled && t.buyWithFiatEnabled) {
         return true;

package/src/react/web/ui/ConnectWallet/screens/Buy/TransactionModeScreen.tsx

@@ -6,23 +6,32 @@ import { formatNumber } from "../../../../../../utils/formatNumber.js";
 import { toTokens } from "../../../../../../utils/units.js";
 import type { Account } from "../../../../../../wallets/interfaces/wallet.js";
 import { useCustomTheme } from "../../../../../core/design-system/CustomThemeProvider.js";
-import { iconSize, spacing } from "../../../../../core/design-system/index.js";
+import { fontSize, spacing } from "../../../../../core/design-system/index.js";
 import type { PayUIOptions } from "../../../../../core/hooks/connection/ConnectButtonProps.js";
 import { useChainMetadata } from "../../../../../core/hooks/others/useChainQuery.js";
+import { useWalletBalance } from "../../../../../core/hooks/others/useWalletBalance.js";
+import { useActiveAccount } from "../../../../../core/hooks/wallets/useActiveAccount.js";
 import { useActiveWallet } from "../../../../../core/hooks/wallets/useActiveWallet.js";
 import { hasSponsoredTransactionsEnabled } from "../../../../../core/utils/wallet.js";
 import { LoadingScreen } from "../../../../wallets/shared/LoadingScreen.js";
 import type { PayEmbedConnectOptions } from "../../../PayEmbed.js";
 import { ChainIcon } from "../../../components/ChainIcon.js";
 import { Img } from "../../../components/Img.js";
+import { Skeleton } from "../../../components/Skeleton.js";
 import { Spacer } from "../../../components/Spacer.js";
 import { TokenIcon } from "../../../components/TokenIcon.js";
-import { WalletImage } from "../../../components/WalletImage.js";
 import { Container, Line, ModalHeader } from "../../../components/basic.js";
 import { Button } from "../../../components/buttons.js";
 import { Text } from "../../../components/text.js";
+import { TokenSymbol } from "../../../components/token/TokenSymbol.js";
 import { ConnectButton } from "../../ConnectButton.js";
-import type { ERC20OrNativeToken } from "../nativeToken.js";
+import { formatTokenBalance } from "../formatTokenBalance.js";
+import {
+  type ERC20OrNativeToken,
+  NATIVE_TOKEN,
+  isNativeToken,
+} from "../nativeToken.js";
+import { WalletRow } from "./WalletSelectorButton.js";
 import { useTransactionCostAndData } from "./main/useBuyTxStates.js";
 import type { SupportedChainAndTokens } from "./swap/useSwapSupportedChains.js";
 
@@ -54,8 +63,22 @@ export function TransactionModeScreen(props: {
   });
   const theme = useCustomTheme();
   const activeWallet = useActiveWallet();
+  const activeAccount = useActiveAccount();
   const sponsoredTransactionsEnabled =
     hasSponsoredTransactionsEnabled(activeWallet);
+  const balanceQuery = useWalletBalance(
+    {
+      address: activeAccount?.address,
+      chain: payUiOptions.transaction.chain,
+      tokenAddress: isNativeToken(transactionCostAndData?.token || NATIVE_TOKEN)
+        ? undefined
+        : transactionCostAndData?.token.address,
+      client: props.client,
+    },
+    {
+      enabled: !!transactionCostAndData,
+    },
+  );
 
   if (!transactionCostAndData || !chainData) {
     return <LoadingScreen />;
@@ -74,39 +97,47 @@ export function TransactionModeScreen(props: {
             style={{
               width: "100%",
               borderRadius: spacing.md,
+              border: `1px solid ${theme.colors.borderColor}`,
               backgroundColor: theme.colors.tertiaryBg,
             }}
           />
-        ) : activeWallet ? (
-          <Container
-            flex="row"
-            center="both"
-            style={{
-              padding: spacing.md,
-              marginBottom: spacing.md,
-              borderRadius: spacing.md,
-              backgroundColor: theme.colors.tertiaryBg,
-            }}
-          >
-            <WalletImage
-              size={iconSize.xl}
-              id={activeWallet.id}
-              client={client}
-            />
-            <div
+        ) : activeAccount ? (
+          <Container flex="column" gap="sm">
+            <Text size="sm" color="danger" style={{ textAlign: "center" }}>
+              Insufficient funds
+            </Text>
+            <Container
+              flex="row"
               style={{
-                flexGrow: 1,
-                borderBottom: "6px dotted",
-                borderColor: theme.colors.secondaryIconColor,
-                marginLeft: spacing.md,
-                marginRight: spacing.md,
+                justifyContent: "space-between",
+                padding: spacing.sm,
+                marginBottom: spacing.sm,
+                borderRadius: spacing.md,
+                backgroundColor: theme.colors.tertiaryBg,
+                border: `1px solid ${theme.colors.borderColor}`,
               }}
-            />
-            <ChainIcon
-              client={client}
-              size={iconSize.xl}
-              chainIconUrl={chainData.icon?.url}
-            />
+            >
+              <WalletRow
+                address={activeAccount?.address}
+                iconSize="md"
+                client={client}
+              />
+              {balanceQuery.data ? (
+                <Container flex="row" gap="3xs" center="y">
+                  <Text size="xs" color="secondaryText" weight={500}>
+                    {formatTokenBalance(balanceQuery.data, false, 3)}
+                  </Text>
+                  <TokenSymbol
+                    token={transactionCostAndData.token}
+                    chain={payUiOptions.transaction.chain}
+                    size="xs"
+                    color="secondaryText"
+                  />
+                </Container>
+              ) : (
+                <Skeleton width="70px" height={fontSize.xs} />
+              )}
+            </Container>
           </Container>
         ) : null}
         <Spacer y="md" />