[MNY-319] SDK: Add token details screen in token selection UI

Author: MananTank

.changeset/two-pandas-knock.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Add token details screen in token selection UI in SwapWidget, BridgeWidget

packages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsx

@@ -213,6 +213,7 @@ export function FundWallet(props: FundWalletProps) {
       >
         <SelectToken
           type="buy"
+          currency={props.currency}
           selections={{
             buyChainId: props.selectedToken?.chainId,
             sellChainId: undefined,

packages/thirdweb/src/react/web/ui/Bridge/common/selected-token-button.tsx

@@ -128,7 +128,15 @@ export function SelectedTokenButton(props: {
             {props.selectedToken?.isFetching ? (
               <Skeleton width="60px" height={fontSize.md} />
             ) : (
-              <Text size="md" color="primaryText" weight={500}>
+              <Text
+                size="md"
+                color="primaryText"
+                weight={500}
+                style={{
+                  whiteSpace: "nowrap",
+                  maxWidth: "200px",
+                }}
+              >
                 {props.selectedToken?.data?.symbol}
               </Text>
             )}
@@ -138,8 +146,6 @@ export function SelectedTokenButton(props: {
                 size="xs"
                 color="secondaryText"
                 style={{
-                  overflow: "hidden",
-                  textOverflow: "ellipsis",
                   whiteSpace: "nowrap",
                 }}
               >

packages/thirdweb/src/react/web/ui/Bridge/swap-widget/hooks.ts

@@ -1,9 +1,12 @@
+import { useQuery } from "@tanstack/react-query";
 import { useMemo } from "react";
+import type { ThirdwebClient } from "../../../../../client/client.js";
+import { getToken } from "../../../../../pay/convert/get-token.js";
 import type { Wallet } from "../../../../../wallets/interfaces/wallet.js";
 import { useActiveAccount } from "../../../../core/hooks/wallets/useActiveAccount.js";
 import { useActiveWallet } from "../../../../core/hooks/wallets/useActiveWallet.js";
 import { useActiveWalletChain } from "../../../../core/hooks/wallets/useActiveWalletChain.js";
-import type { ActiveWalletInfo } from "./types.js";
+import type { ActiveWalletInfo, TokenSelection } from "./types.js";
 
 export function useActiveWalletInfo(
   activeWalletOverride?: Wallet,
@@ -25,3 +28,26 @@ export function useActiveWalletInfo(
       : undefined;
   }, [activeAccount, activeWallet, activeChain, activeWalletOverride]);
 }
+
+export function useTokenPrice(options: {
+  token: TokenSelection | undefined;
+  client: ThirdwebClient;
+}) {
+  return useQuery({
+    queryKey: ["token-price", options.token],
+    enabled: !!options.token,
+    queryFn: () => {
+      if (!options.token) {
+        throw new Error("Token is required");
+      }
+      return getToken(
+        options.client,
+        options.token.tokenAddress,
+        options.token.chainId,
+      );
+    },
+    refetchOnMount: false,
+    retry: false,
+    refetchOnWindowFocus: false,
+  });
+}