[SDK] fix: Polish PayEmbed UI and balance display (#6237)

thirdweb-dev · Feb 12, 2025 · fbafb65 · fbafb65
1 parent 6b286c7
commit fbafb65
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 37 deletions.
diff --git a/.changeset/kind-pets-mate.md b/.changeset/kind-pets-mate.md
@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+PayEmbed UI polish
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/WalletSelectorButton.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/WalletSelectorButton.tsx
@@ -1,4 +1,5 @@
 import styled from "@emotion/styled";
+import { ChevronRightIcon } from "@radix-ui/react-icons";
 import { useState } from "react";
 import type { Chain } from "../../../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../../../client/client.js";
@@ -22,7 +23,7 @@ import { Container } from "../../../components/basic.js";
 import { Button } from "../../../components/buttons.js";
 import { Text } from "../../../components/text.js";
 import { Blobbie } from "../../Blobbie.js";
-import { formatTokenBalance } from "../formatTokenBalance.js";
+import { FiatValue } from "./swap/FiatValue.js";
 import type { TokenBalance } from "./swap/PaymentSelectionScreen.js";
 
 export function WalletRowWithBalances(props: {
@@ -100,23 +101,29 @@ function TokenBalanceRow(props: {
       onClick={() => onClick(tokenBalance.token, wallet)}
       variant="secondary"
     >
-      <TokenIcon
-        token={tokenBalance.token}
-        chain={tokenBalance.chain}
-        size="md"
-        client={client}
-      />
-      <Container flex="column" gap="3xs">
-        <Text size="xs" color="primaryText">
-          {tokenBalance.token.symbol}
-        </Text>
-        {chainInfo && <Text size="xs">{chainInfo.name}</Text>}
+      <Container flex="row" center="y" gap="md">
+        <TokenIcon
+          token={tokenBalance.token}
+          chain={tokenBalance.chain}
+          size="md"
+          client={client}
+        />
+        <Container flex="column" gap="3xs">
+          <Text size="xs" color="primaryText">
+            {tokenBalance.token.symbol}
+          </Text>
+          {chainInfo && <Text size="xs">{chainInfo.name}</Text>}
+        </Container>
       </Container>
-      <div style={{ flex: 1 }} />
-      <Container flex="row" center="y" gap="3xs">
-        <Text size="xs" color="secondaryText">
-          {formatTokenBalance(tokenBalance.balance, true)}
-        </Text>
+      <Container flex="row" center="y" gap="3xs" color="secondaryText">
+        <FiatValue
+          tokenAmount={tokenBalance.balance.displayValue}
+          token={tokenBalance.token}
+          chain={tokenBalance.chain}
+          client={client}
+          size="xs"
+        />
+        <ChevronRightIcon width={iconSize.md} height={iconSize.md} />
       </Container>
     </StyledButton>
   );
@@ -149,7 +156,7 @@ export function WalletRow(props: {
           width={props.iconSize ? iconSize[props.iconSize] : iconSize.md}
           height={props.iconSize ? iconSize[props.iconSize] : iconSize.md}
           style={{
-            borderRadius: "100%",
+            borderRadius: radius.sm,
             overflow: "hidden",
             border: `1px solid ${theme.colors.borderColor}`,
           }}
@@ -166,7 +173,7 @@ export function WalletRow(props: {
           style={{
             width: iconSize.md,
             height: iconSize.md,
-            borderRadius: "100%",
+            borderRadius: radius.sm,
             overflow: "hidden",
             border: `1px solid ${theme.colors.borderColor}`,
           }}
@@ -186,7 +193,7 @@ const StyledButton = /* @__PURE__ */ styled(Button)((_) => {
   const theme = useCustomTheme();
   return {
     background: theme.colors.tertiaryBg,
-    justifyContent: "flex-start",
+    justifyContent: "space-between",
     flexDirection: "row",
     padding: spacing.sm,
     gap: spacing.sm,

diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/PaymentSelectionScreen.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/PaymentSelectionScreen.tsx
@@ -166,25 +166,37 @@ export function PaymentSelectionScreen(props: {
     return <LoadingScreen />;
   }
 
+  const filteredWallets = Array.from(walletsAndBalances.data?.entries() || [])
+    .filter(([w]) => !props.hiddenWallets?.includes(w.id))
+    .filter(([, balances]) => {
+      const hasEnoughBalance = balances.some((b) => b.balance.value > 0);
+      return hasEnoughBalance;
+    });
+
   return (
     <Container>
       <Container flex="column" gap="xs">
-        {Array.from(walletsAndBalances.data?.entries() || [])
-          .filter(([w]) => !props.hiddenWallets?.includes(w.id))
-          .map(([w, balances]) => {
-            const address = w.getAccount()?.address;
-            if (!address) return null;
-            return (
-              <WalletRowWithBalances
-                key={w.id}
-                wallet={w}
-                balances={balances}
-                client={props.client}
-                address={address}
-                onClick={props.onSelect}
-              />
-            );
-          })}
+        {filteredWallets.length === 0 && (
+          <Container flex="column" gap="xs" py="md">
+            <Text size="xs" color="secondaryText" center>
+              <i>Insufficient funds in connected wallets</i>
+            </Text>
+          </Container>
+        )}
+        {filteredWallets.map(([w, balances]) => {
+          const address = w.getAccount()?.address;
+          if (!address) return null;
+          return (
+            <WalletRowWithBalances
+              key={w.id}
+              wallet={w}
+              balances={balances}
+              client={props.client}
+              address={address}
+              onClick={props.onSelect}
+            />
+          );
+        })}
         {!hideConnectButton && (
           <Button
             variant="secondary"

diff --git a/packages/thirdweb/src/react/web/utils/errors.ts b/packages/thirdweb/src/react/web/utils/errors.ts
@@ -13,7 +13,12 @@ export const defaultMessage = "Unable to get price quote";
 // biome-ignore lint/suspicious/noExplicitAny: <explanation>
 export function getErrorMessage(err: any): ApiError {
   if (typeof err.error === "object" && err.error.code) {
-    return err.error;
+    if (err.error.code === "MINIMUM_PURCHASE_AMOUNT") {
+      return {
+        code: "MINIMUM_PURCHASE_AMOUNT",
+        message: "Purchase amount is too low",
+      };
+    }
   }
   return {
     code: "UNABLE_TO_GET_PRICE_QUOTE",