update

Author: kien-ngo

.changeset/fair-plants-pretend.md

@@ -0,0 +1,36 @@
+---
+"thirdweb": minor
+---
+The Connected-details button now shows USD value next to the token balance.
+
+### Breaking change to the AccountBalance
+AccountBalance now supports showing the token balance in fiat value (only USD supported at the moment)
+```tsx
+<AccountBalance 
+  showBalanceInFiat="USD"
+/>
+```
+
+The `formatFn` prop now takes in an object of type `AccountBalanceInfo` and outputs a string
+```tsx
+import { AccountBalance, type AccountBalanceInfo } from "thirdweb/react";
+
+<AccountBalance 
+  formatFn={(props: AccountBalanceInfo) => `${props.balance}---${props.symbol.toLowerCase()}`}
+/>
+
+// Result: 11.12---eth
+```
+
+### Export util functions: 
+formatNumber: Round up a number to a certain decimal place
+```tsx
+import { formatNumber } from "thirdweb/utils";
+const value = formatNumber(12.1214141, 1); // 12.1
+```
+
+shortenLargeNumber: Shorten the string for large value
+```tsx
+import { shortenLargeNumber } from "thirdweb/utils";
+const numStr = shortenLargeNumber(1_000_000_000, )
+```

packages/thirdweb/src/exports/react.ts

@@ -221,6 +221,7 @@ export {
 export {
   AccountBalance,
   type AccountBalanceProps,
+  type AccountBalanceInfo,
 } from "../react/web/ui/prebuilt/Account/balance.js";
 export {
   AccountName,

packages/thirdweb/src/exports/utils.ts

@@ -204,3 +204,6 @@ export type {
   AbiConstructor,
   AbiFallback,
 } from "abitype";
+
+export { shortenLargeNumber } from "../utils/shortenLargeNumber.js";
+export { formatNumber } from "../utils/formatNumber.js";

packages/thirdweb/src/pay/convert/cryptoToFiat.ts

@@ -7,6 +7,7 @@ import { getContract } from "../../contract/contract.js";
 import { isAddress } from "../../utils/address.js";
 import { getClientFetch } from "../../utils/fetch.js";
 import { getPayConvertCryptoToFiatEndpoint } from "../utils/definitions.js";
+import type { SupportedFiatCurrency } from "./type.js";
 
 /**
  * Props for the `convertCryptoToFiat` function
@@ -31,7 +32,7 @@ export type ConvertCryptoToFiatParams = {
    * The fiat symbol. e.g "USD"
    * Only USD is supported at the moment.
    */
-  to: "USD";
+  to: SupportedFiatCurrency;
 };
 
 /**

packages/thirdweb/src/pay/convert/fiatToCrypto.ts

@@ -7,6 +7,7 @@ import { getContract } from "../../contract/contract.js";
 import { isAddress } from "../../utils/address.js";
 import { getClientFetch } from "../../utils/fetch.js";
 import { getPayConvertFiatToCryptoEndpoint } from "../utils/definitions.js";
+import type { SupportedFiatCurrency } from "./type.js";
 
 /**
  * Props for the `convertFiatToCrypto` function
@@ -18,7 +19,7 @@ export type ConvertFiatToCryptoParams = {
    * The fiat symbol. e.g: "USD"
    * Currently only USD is supported.
    */
-  from: "USD";
+  from: SupportedFiatCurrency;
   /**
    * The total amount of fiat to convert
    * e.g: If you want to convert 2 cents to USD, enter `0.02`

packages/thirdweb/src/pay/convert/type.ts

@@ -0,0 +1,5 @@
+const SUPPORTED_FIAT_CURRENCIES = ["USD"] as const;
+/**
+ * @internal
+ */
+export type SupportedFiatCurrency = (typeof SUPPORTED_FIAT_CURRENCIES)[number];

packages/thirdweb/src/react/core/hooks/connection/ConnectButtonProps.ts

@@ -3,6 +3,7 @@ import type { Chain } from "../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../client/client.js";
 import type { BuyWithCryptoStatus } from "../../../../pay/buyWithCrypto/getStatus.js";
 import type { BuyWithFiatStatus } from "../../../../pay/buyWithFiat/getStatus.js";
+import type { SupportedFiatCurrency } from "../../../../pay/convert/type.js";
 import type { FiatProvider } from "../../../../pay/utils/commonTypes.js";
 import type { AssetTabs } from "../../../../react/web/ui/ConnectWallet/screens/ViewAssets.js";
 import type { PreparedTransaction } from "../../../../transaction/prepare-transaction.js";
@@ -320,6 +321,12 @@ export type ConnectButton_detailsModalOptions = {
    * Note: If an empty array is passed, the [View Funds] button will be hidden
    */
   assetTabs?: AssetTabs[];
+
+  /**
+   * Show the token balance's value in fiat.
+   * Note: Not all tokens are resolvable to a fiat value. In that case, nothing will be shown.
+   */
+  showBalanceInFiat?: SupportedFiatCurrency;
 };
 
 /**
@@ -377,6 +384,12 @@ export type ConnectButton_detailsButtonOptions = {
    * Use custom avatar URL for the connected wallet image in the `ConnectButton` details button, overriding ENS avatar or Blobbie icon.
    */
   connectedAccountAvatarUrl?: string;
+
+  /**
+   * Show the token balance's value in fiat.
+   * Note: Not all tokens are resolvable to a fiat value. In that case, nothing will be shown.
+   */
+  showBalanceInFiat?: SupportedFiatCurrency;
 };
 
 /**

packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx

@@ -14,10 +14,10 @@ import { trackPayEvent } from "../../../../analytics/track/pay.js";
 import type { Chain } from "../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../client/client.js";
 import { getContract } from "../../../../contract/contract.js";
+import type { SupportedFiatCurrency } from "../../../../pay/convert/type.js";
 import { getLastAuthProvider } from "../../../../react/core/utils/storage.js";
 import { shortenAddress } from "../../../../utils/address.js";
 import { isContractDeployed } from "../../../../utils/bytecode/is-contract-deployed.js";
-import { formatNumber } from "../../../../utils/formatNumber.js";
 import { webLocalStorage } from "../../../../utils/storage/webStorage.js";
 import { isEcosystemWallet } from "../../../../wallets/ecosystem/is-ecosystem-wallet.js";
 import type { Ecosystem } from "../../../../wallets/in-app/core/wallet/types.js";
@@ -86,7 +86,12 @@ import { fadeInAnimation } from "../design-system/animations.js";
 import { StyledButton } from "../design-system/elements.js";
 import { AccountAddress } from "../prebuilt/Account/address.js";
 import { AccountAvatar } from "../prebuilt/Account/avatar.js";
-import { AccountBalance } from "../prebuilt/Account/balance.js";
+import {
+  AccountBalance,
+  type AccountBalanceInfo,
+  formatAccountFiatBalance,
+  formatAccountTokenBalance,
+} from "../prebuilt/Account/balance.js";
 import { AccountBlobbie } from "../prebuilt/Account/blobbie.js";
 import { AccountName } from "../prebuilt/Account/name.js";
 import { AccountProvider } from "../prebuilt/Account/provider.js";
@@ -231,6 +236,11 @@ export const ConnectedWalletDetails: React.FC<{
                 refetchOnWindowFocus: false,
                 refetchOnMount: false,
               }}
+              style={{
+                height: "100%",
+                width: "100%",
+                objectFit: "cover",
+              }}
             />
           )
         )}
@@ -273,18 +283,59 @@ export const ConnectedWalletDetails: React.FC<{
           size="xs"
           color="secondaryText"
           weight={400}
+          style={{
+            display: "flex",
+            gap: "2px",
+            alignItems: "center",
+          }}
         >
-          <AccountBalance
-            chain={walletChain}
-            loadingComponent={<Skeleton height={fontSize.xs} width="70px" />}
-            fallbackComponent={<Skeleton height={fontSize.xs} width="70px" />}
-            formatFn={formatBalanceOnButton}
-            tokenAddress={
-              props.detailsButton?.displayBalanceToken?.[
-                Number(walletChain?.id)
-              ]
-            }
-          />
+          {props.detailsButton?.showBalanceInFiat ? (
+            <>
+              <AccountBalance
+                chain={walletChain}
+                loadingComponent={
+                  <Skeleton height={fontSize.xs} width="50px" />
+                }
+                fallbackComponent={
+                  <Skeleton height={fontSize.xs} width="50px" />
+                }
+                tokenAddress={
+                  props.detailsButton?.displayBalanceToken?.[
+                    Number(walletChain?.id)
+                  ]
+                }
+              />
+              <AccountBalance
+                chain={walletChain}
+                tokenAddress={
+                  props.detailsButton?.displayBalanceToken?.[
+                    Number(walletChain?.id)
+                  ]
+                }
+                showBalanceInFiat="USD"
+                formatFn={(props: AccountBalanceInfo) =>
+                  ` (${formatAccountFiatBalance({ ...props, decimals: 0 })})`
+                }
+                loadingComponent={
+                  <Skeleton height={fontSize.xs} width="20px" />
+                }
+              />
+            </>
+          ) : (
+            <AccountBalance
+              chain={walletChain}
+              loadingComponent={<Skeleton height={fontSize.xs} width="70px" />}
+              fallbackComponent={<Skeleton height={fontSize.xs} width="70px" />}
+              formatFn={(props: AccountBalanceInfo) =>
+                `${formatAccountTokenBalance({ ...props, decimals: props.balance < 1 ? 5 : 4 })}`
+              }
+              tokenAddress={
+                props.detailsButton?.displayBalanceToken?.[
+                  Number(walletChain?.id)
+                ]
+              }
+            />
+          )}
         </Text>
       </Container>
     </WalletInfoButton>
@@ -307,6 +358,7 @@ function DetailsModal(props: {
   displayBalanceToken?: Record<number, string>;
   connectOptions: DetailsModalConnectOptions | undefined;
   assetTabs?: AssetTabs[];
+  showBalanceInFiat?: SupportedFiatCurrency;
 }) {
   const [screen, setScreen] = useState<WalletDetailsModalScreen>("main");
   const { disconnect } = useDisconnect();
@@ -377,15 +429,44 @@ function DetailsModal(props: {
         <Text color="primaryText" size="md" multiline>
           {chainNameQuery.name || `Unknown chain #${walletChain?.id}`}
           <Text color="secondaryText" size="xs">
-            <AccountBalance
-              fallbackComponent={<Skeleton height="1em" width="100px" />}
-              loadingComponent={<Skeleton height="1em" width="100px" />}
-              formatFn={(num: number) => formatNumber(num, 9)}
-              chain={walletChain}
-              tokenAddress={
-                props.displayBalanceToken?.[Number(walletChain?.id)]
-              }
-            />
+            {props.showBalanceInFiat ? (
+              <>
+                <AccountBalance
+                  fallbackComponent={<Skeleton height="1em" width="70px" />}
+                  loadingComponent={<Skeleton height="1em" width="70px" />}
+                  chain={walletChain}
+                  tokenAddress={
+                    props.displayBalanceToken?.[Number(walletChain?.id)]
+                  }
+                  formatFn={(props: AccountBalanceInfo) =>
+                    formatAccountTokenBalance({ ...props, decimals: 7 })
+                  }
+                />{" "}
+                <AccountBalance
+                  loadingComponent={<Skeleton height="1em" width="30px" />}
+                  chain={walletChain}
+                  tokenAddress={
+                    props.displayBalanceToken?.[Number(walletChain?.id)]
+                  }
+                  formatFn={(props: AccountBalanceInfo) =>
+                    ` (${formatAccountFiatBalance({ ...props, decimals: 3 })})`
+                  }
+                  showBalanceInFiat="USD"
+                />
+              </>
+            ) : (
+              <AccountBalance
+                fallbackComponent={<Skeleton height="1em" width="100px" />}
+                loadingComponent={<Skeleton height="1em" width="100px" />}
+                formatFn={(props: AccountBalanceInfo) =>
+                  formatAccountTokenBalance({ ...props, decimals: 7 })
+                }
+                chain={walletChain}
+                tokenAddress={
+                  props.displayBalanceToken?.[Number(walletChain?.id)]
+                }
+              />
+            )}
           </Text>
         </Text>
       )}
@@ -437,6 +518,11 @@ function DetailsModal(props: {
             <AccountAvatar
               loadingComponent={<AccountBlobbie size={Number(iconSize.xxl)} />}
               fallbackComponent={<AccountBlobbie size={Number(iconSize.xxl)} />}
+              style={{
+                height: "100%",
+                width: "100%",
+                objectFit: "cover",
+              }}
             />
           )
         )}
@@ -1006,10 +1092,6 @@ function DetailsModal(props: {
   );
 }
 
-function formatBalanceOnButton(num: number) {
-  return formatNumber(num, num < 1 ? 5 : 4);
-}
-
 const WalletInfoButton = /* @__PURE__ */ StyledButton((_) => {
   const theme = useCustomTheme();
   return {
@@ -1507,6 +1589,12 @@ export type UseWalletDetailsModalOptions = {
    * Note: If an empty array is passed, the [View Funds] button will be hidden
    */
   assetTabs?: AssetTabs[];
+
+  /**
+   * Show the token balance's value in fiat.
+   * Note: Not all tokens are resolvable to a fiat value. In that case, nothing will be shown.
+   */
+  showBalanceInFiat?: SupportedFiatCurrency;
 };
 
 /**