[SDK] fix: show token + dollar values for wallet balances (#6240)

Author: joaquim-verges

.changeset/gentle-boats-grin.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Dont display dollar and token values for wallet balances

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> {

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> {

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> {

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>

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}

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;
 }