[SDK] Replace internal code with headless UI (1)

packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/BuyScreen.tsx

@@ -12,6 +12,7 @@
 import type { WalletId } from "../../../../../../wallets/wallet-types.js";
 import {
   type Theme,
+  fontSize,
   spacing,
 } from "../../../../../core/design-system/index.js";
 import type {
@@ -33,13 +34,15 @@
   DrawerOverlay,
   useDrawer,
 } from "../../../components/Drawer.js";
+import { Skeleton } from "../../../components/Skeleton.js";
 import { Spacer } from "../../../components/Spacer.js";
 import { Spinner } from "../../../components/Spinner.js";
 import { SwitchNetworkButton } from "../../../components/SwitchNetwork.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 { TokenProvider } from "../../../prebuilt/Token/provider.js";
+import { TokenSymbol } from "../../../prebuilt/Token/symbol.js";
 import { ConnectButton } from "../../ConnectButton.js";
 import { ChainButton, NetworkSelectorContent } from "../../NetworkSelector.js";
 import type { ConnectLocale } from "../../locale/types.js";
@@ -685,18 +688,37 @@
           </Text>
 
           <Container flex="row" gap="xxs" center="y">
-            <TokenSymbol
-              token={props.selectedToken}
-              chain={props.selectedChain}
-              size="md"
-              color="secondaryText"
-            />
-            <PayTokenIcon
+            <TokenProvider
+              address={
+                isNativeToken(props.selectedToken)
+                  ? NATIVE_TOKEN_ADDRESS
+                  : props.selectedToken.address
+              }
               chain={props.selectedChain}
               client={props.client}
-              size="sm"
-              token={props.selectedToken}
-            />
+            >
+              <Text size="md" color="secondaryText">
+                <TokenSymbol
+                  symbolResolver={
+                    isNativeToken(props.selectedToken)
+                      ? undefined
+                      : props.selectedToken.symbol
+                  }
+                  loadingComponent={
+                    <Skeleton width="70px" height={fontSize.md} />
+                  }
+                  fallbackComponent={
+                    <Skeleton width="70px" height={fontSize.md} />
+                  }
+                />
+              </Text>
+              <PayTokenIcon
+                chain={props.selectedChain}
+                client={props.client}
+                size="sm"
+                token={props.selectedToken}
+              />
+            </TokenProvider>
           </Container>
         </Container>
 
@@ -1138,16 +1160,24 @@
       {errorMsg && (
         <div>
           {errorMsg.minAmount && (
-            <Text color="danger" size="sm" center multiline>
-              Minimum amount is {errorMsg.minAmount}{" "}
-              <TokenSymbol
-                token={toToken}
-                chain={toChain}
-                size="sm"
-                inline
-                color="danger"
-              />
-            </Text>
+            <TokenProvider
+              address={
+                isNativeToken(toToken) ? NATIVE_TOKEN_ADDRESS : toToken.address
+              }
+              client={props.client}
+              chain={toChain}
+            >
+              <Text color="danger" size="sm" center multiline>
+                Minimum amount is {errorMsg.minAmount}{" "}
+                <Text color="danger" inline>
+                  <TokenSymbol
+                    symbolResolver={
+                      isNativeToken(toToken) ? undefined : toToken.icon
+                    }
+                  />
+                </Text>
+              </Text>
+            </TokenProvider>
           )}
 
           {errorMsg.msg?.map((msg) => (
@@ -1386,16 +1416,24 @@
       {errorMsg && (
         <div>
           {errorMsg.minAmount && (
-            <Text color="danger" size="sm" center multiline>
-              Minimum amount is {errorMsg.minAmount}{" "}
-              <TokenSymbol
-                token={toToken}
-                chain={toChain}
-                size="sm"
-                inline
-                color="danger"
-              />
-            </Text>
+            <TokenProvider
+              address={
+                isNativeToken(toToken) ? NATIVE_TOKEN_ADDRESS : toToken.address
+              }
+              client={props.client}
+              chain={toChain}
+            >
+              <Text color="danger" size="sm" center multiline>
+                Minimum amount is {errorMsg.minAmount}{" "}
+                <Text color="danger" inline>
+                  <TokenSymbol
+                    symbolResolver={
+                      isNativeToken(toToken) ? undefined : toToken.icon
+                    }
+                  />
+                </Text>
+              </Text>
+            </TokenProvider>
           )}
 
           {errorMsg.msg?.map((msg) => (

packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/pay-transactions/BuyTxHistoryButton.tsx

@@ -1,6 +1,7 @@
 import styled from "@emotion/styled";
 import { getCachedChain } from "../../../../../../../chains/utils.js";
 import type { ThirdwebClient } from "../../../../../../../client/client.js";
+import { TokenProvider } from "../../../../../../../react/web/ui/prebuilt/Token/provider.js";
 import { formatNumber } from "../../../../../../../utils/formatNumber.js";
 import { useCustomTheme } from "../../../../../../core/design-system/CustomThemeProvider.js";
 import { spacing } from "../../../../../../core/design-system/index.js";
@@ -37,73 +38,81 @@
         paddingBlock: spacing.sm,
       }}
     >
-      <Container
-        flex="row"
-        center="y"
-        gap="sm"
-        style={{
-          flex: 1,
-        }}
+      <TokenProvider
+        address={props.txInfo.status.quote.toToken.tokenAddress}
+        client={props.client}
+        chain={getCachedChain(props.txInfo.status.quote.toToken.chainId)}
       >
-        <PayTokenIcon
-          client={props.client}
-          chain={getCachedChain(props.txInfo.status.quote.toToken.chainId)}
-          size="md"
-          token={{
-            address: props.txInfo.status.quote.toToken.tokenAddress,
-          }}
-        />
-
-        <div
+        <Container
+          flex="row"
+          center="y"
+          gap="sm"
           style={{
             flex: 1,
-            display: "flex",
-            flexDirection: "column",
-            justifyContent: "center",
           }}
         >
-          {/* Row 1 */}
-          <Container
-            flex="row"
-            gap="xs"
-            center="y"
-            style={{
-              justifyContent: "space-between",
+          <PayTokenIcon
+            client={props.client}
+            chain={getCachedChain(props.txInfo.status.quote.toToken.chainId)}
+            size="md"
+            token={{
+              address: props.txInfo.status.quote.toToken.tokenAddress,
             }}
-          >
-            <Text size="sm" color="primaryText">
-              Buy{" "}
-              {formatNumber(
-                Number(
-                  props.txInfo.type === "swap"
-                    ? props.txInfo.status.quote.toAmount
-                    : props.txInfo.status.quote.estimatedToTokenAmount,
-                ),
-                6,
-              )}{" "}
-              {props.txInfo.status.quote.toToken.symbol}
-            </Text>
-          </Container>
+          />
 
-          <Spacer y="xxs" />
-
-          {/* Row 2 */}
-          <Container
-            flex="row"
-            center="y"
-            gap="xxs"
+          <div
             style={{
-              justifyContent: "space-between",
+              flex: 1,
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "center",
             }}
           >
-            <ChainName
-              chain={getCachedChain(props.txInfo.status.quote.toToken.chainId)}
-              size="xs"
-              client={props.client}
-            />
-          </Container>
-        </div>
-      </Container>
+            {/* Row 1 */}
+            <Container
+              flex="row"
+              gap="xs"
+              center="y"
+              style={{
+                justifyContent: "space-between",
+              }}
+            >
+              <Text size="sm" color="primaryText">
+                Buy{" "}
+                {formatNumber(
+                  Number(
+                    props.txInfo.type === "swap"
+                      ? props.txInfo.status.quote.toAmount
+                      : props.txInfo.status.quote.estimatedToTokenAmount,
+                  ),
+                  6,
+                )}{" "}
+                {props.txInfo.status.quote.toToken.symbol}
+              </Text>
+            </Container>
+
+            <Spacer y="xxs" />
+
+            {/* Row 2 */}
+            <Container
+              flex="row"
+              center="y"
+              gap="xxs"
+              style={{
+                justifyContent: "space-between",
+              }}
+            >
+              <ChainName
+                chain={getCachedChain(
+                  props.txInfo.status.quote.toToken.chainId,
+                )}
+                size="xs"
+                client={props.client}
+              />
+            </Container>
+          </div>
+        </Container>
+      </TokenProvider>
 
       {/* Status */}
       <Container flex="row" gap="xxs" center="y">