From ff0147101dab7e0c9be7aeca28239fb187d40ac3 Mon Sep 17 00:00:00 2001
From: Joaquim Verges <joaquim.verges@gmail.com>
Date: Thu, 13 Feb 2025 10:42:19 +1300
Subject: [PATCH] [SDK] fix: Hide dollar values for wallet balances

---
 .changeset/gentle-boats-grin.md               |  5 ++++
 .../extensions/erc1155/drops/read/canClaim.ts | 18 ++++++++++++
 .../extensions/erc20/drops/read/canClaim.ts   | 17 +++++++++++
 .../extensions/erc721/drops/read/canClaim.ts  | 17 +++++++++++
 .../screens/Buy/WalletSelectorButton.tsx      | 28 ++++++++++++++-----
 .../screens/Buy/swap/BuyTokenInput.tsx        |  8 +++++-
 .../screens/Buy/swap/FiatValue.tsx            | 10 ++-----
 7 files changed, 88 insertions(+), 15 deletions(-)
 create mode 100644 .changeset/gentle-boats-grin.md

diff --git a/.changeset/gentle-boats-grin.md b/.changeset/gentle-boats-grin.md
new file mode 100644
index 00000000000..56d4701dcdb
--- /dev/null
+++ b/.changeset/gentle-boats-grin.md
@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Dont display dollar and token values for wallet balances
diff --git a/packages/thirdweb/src/extensions/erc1155/drops/read/canClaim.ts b/packages/thirdweb/src/extensions/erc1155/drops/read/canClaim.ts
index 7861f883b60..e96723039bb 100644
--- a/packages/thirdweb/src/extensions/erc1155/drops/read/canClaim.ts
+++ b/packages/thirdweb/src/extensions/erc1155/drops/read/canClaim.ts
@@ -16,6 +16,24 @@ export type CanClaimResult = {
   reason?: string;
 };
 
+/**
+ * Check if a user can claim a drop.
+ *
+ * @param options - The options for the transaction.
+ * @returns Whether the user can claim the drop.
+ *
+ * @example
+ * ```ts
+ * const claimResult = await canClaim({
+ *   contract: contract,
+ *   claimer: "0x1234567890123456789012345678901234567890",
+ *   quantity: "1",
+ *   tokenId: 0n,
+ * });
+ * ```
+ *
+ * @extension ERC1155
+ */
 export async function canClaim(
   options: BaseTransactionOptions<CanClaimParams>,
 ): Promise<CanClaimResult> {
diff --git a/packages/thirdweb/src/extensions/erc20/drops/read/canClaim.ts b/packages/thirdweb/src/extensions/erc20/drops/read/canClaim.ts
index 71f65215a9b..8d6a6c2928e 100644
--- a/packages/thirdweb/src/extensions/erc20/drops/read/canClaim.ts
+++ b/packages/thirdweb/src/extensions/erc20/drops/read/canClaim.ts
@@ -15,6 +15,23 @@ export type CanClaimResult = {
   reason?: string;
 };
 
+/**
+ * Check if a user can claim a drop.
+ *
+ * @param options - The options for the transaction.
+ * @returns Whether the user can claim the drop.
+ *
+ * @example
+ * ```ts
+ * const claimResult = await canClaim({
+ *   contract: contract,
+ *   claimer: "0x1234567890123456789012345678901234567890",
+ *   quantity: "1",
+ * });
+ * ```
+ *
+ * @extension ERC20
+ */
 export async function canClaim(
   options: BaseTransactionOptions<CanClaimParams>,
 ): Promise<CanClaimResult> {
diff --git a/packages/thirdweb/src/extensions/erc721/drops/read/canClaim.ts b/packages/thirdweb/src/extensions/erc721/drops/read/canClaim.ts
index f0624d0a059..aebeda246ec 100644
--- a/packages/thirdweb/src/extensions/erc721/drops/read/canClaim.ts
+++ b/packages/thirdweb/src/extensions/erc721/drops/read/canClaim.ts
@@ -15,6 +15,23 @@ export type CanClaimResult = {
   reason?: string;
 };
 
+/**
+ * Check if a user can claim a drop.
+ *
+ * @param options - The options for the transaction.
+ * @returns Whether the user can claim the drop.
+ *
+ * @example
+ * ```ts
+ * const claimResult = await canClaim({
+ *   contract: contract,
+ *   claimer: "0x1234567890123456789012345678901234567890",
+ *   quantity: "1",
+ * });
+ * ```
+ *
+ * @extension ERC721
+ */
 export async function canClaim(
   options: BaseTransactionOptions<CanClaimParams>,
 ): Promise<CanClaimResult> {
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
index a183a509a0d..26d89094e3b 100644
--- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/WalletSelectorButton.tsx
+++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/WalletSelectorButton.tsx
@@ -23,6 +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";
 
@@ -116,13 +117,26 @@ function TokenBalanceRow(props: {
         </Container>
       </Container>
       <Container flex="row" center="y" gap="3xs" color="secondaryText">
-        <FiatValue
-          tokenAmount={tokenBalance.balance.displayValue}
-          token={tokenBalance.token}
-          chain={tokenBalance.chain}
-          client={client}
-          size="xs"
-        />
+        <Container
+          flex="column"
+          color="secondaryText"
+          gap="3xs"
+          style={{
+            justifyContent: "flex-end",
+            alignItems: "flex-end",
+          }}
+        >
+          <Text size="xs" color="primaryText">
+            {formatTokenBalance(tokenBalance.balance, true, 2)}
+          </Text>
+          <FiatValue
+            tokenAmount={tokenBalance.balance.displayValue}
+            token={tokenBalance.token}
+            chain={tokenBalance.chain}
+            client={client}
+            size="xs"
+          />
+        </Container>
         <ChevronRightIcon width={iconSize.md} height={iconSize.md} />
       </Container>
     </StyledButton>
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/BuyTokenInput.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/BuyTokenInput.tsx
index ed6c6d9583d..8e3a65fff7a 100644
--- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/BuyTokenInput.tsx
+++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/BuyTokenInput.tsx
@@ -122,7 +122,13 @@ export function BuyTokenInput(props: {
         </Container>
       </div>
 
-      <Container flex="row" center="both">
+      <Container
+        flex="row"
+        center="both"
+        style={{
+          height: fontSize.xl,
+        }}
+      >
         <FiatValue
           tokenAmount={props.value}
           token={props.token}
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/FiatValue.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/FiatValue.tsx
index d8d40582c31..cbf49da86ea 100644
--- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/FiatValue.tsx
+++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/FiatValue.tsx
@@ -41,11 +41,7 @@ export function FiatValue(
     return <Skeleton width={"50px"} height={fontSize.lg} />;
   }
 
-  return (
-    <Text {...props}>
-      {cryptoToFiatQuery.data?.result
-        ? `$${formatNumber(cryptoToFiatQuery.data.result, 2)}`
-        : "-"}
-    </Text>
-  );
+  return cryptoToFiatQuery.data?.result ? (
+    <Text {...props}>${formatNumber(cryptoToFiatQuery.data.result, 2)}</Text>
+  ) : null;
 }