address comments

Author: MananTank

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

@@ -1,39 +1,4 @@
-const CURRENCIES = [
-  "USD",
-  "EUR",
-  "GBP",
-  "JPY",
-  "KRW",
-  "CNY",
-  "INR",
-  "NOK",
-  "SEK",
-  "CHF",
-  "AUD",
-  "CAD",
-  "NZD",
-  "MXN",
-  "BRL",
-  "CLP",
-  "CZK",
-  "DKK",
-  "HKD",
-  "HUF",
-  "IDR",
-  "ILS",
-  "ISK",
-] as const;
-
-export type SupportedFiatCurrency = (typeof CURRENCIES)[number] | (string & {});
-
-export function getFiatSymbol(showBalanceInFiat: SupportedFiatCurrency) {
-  if (currencySymbol[showBalanceInFiat]) {
-    return currencySymbol[showBalanceInFiat];
-  }
-  return "$";
-}
-
-const currencySymbol: Record<SupportedFiatCurrency, string> = {
+const currencySymbol = {
   USD: "$",
   EUR: "€",
   GBP: "£",
@@ -57,4 +22,10 @@ const currencySymbol: Record<SupportedFiatCurrency, string> = {
   IDR: "Rp",
   ILS: "₪",
   ISK: "kr",
-};
+} as const;
+
+export type SupportedFiatCurrency = keyof typeof currencySymbol;
+
+export function getFiatSymbol(showBalanceInFiat: SupportedFiatCurrency) {
+  return currencySymbol[showBalanceInFiat] || "$";
+}

packages/thirdweb/src/react/web/ui/Bridge/payment-selection/FiatProviderSelection.tsx

@@ -159,7 +159,7 @@ export function FiatProviderSelection({
                       style={{ fontWeight: 500 }}
                     >
                       {formatCurrencyAmount(
-                        currency || "US",
+                        currency || "USD",
                         quote.currencyAmount,
                       )}
                     </Text>

packages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsx

@@ -155,18 +155,6 @@ export type SwapWidgetProps = {
   };
 };
 
-export function SwapWidget(props: SwapWidgetProps) {
-  return (
-    <SwapWidgetContainer
-      theme={props.theme}
-      style={props.style}
-      className={props.className}
-    >
-      <SwapWidgetContent {...props} />
-    </SwapWidgetContainer>
-  );
-}
-
 /**
  * A widget for swapping tokens with cross-chain support
  *
@@ -237,7 +225,21 @@ export function SwapWidget(props: SwapWidgetProps) {
  * }} />
  * ```
  *
- * @returns
+ */
+export function SwapWidget(props: SwapWidgetProps) {
+  return (
+    <SwapWidgetContainer
+      theme={props.theme}
+      style={props.style}
+      className={props.className}
+    >
+      <SwapWidgetContent {...props} />
+    </SwapWidgetContainer>
+  );
+}
+
+/**
+ * @internal
  */
 export function SwapWidgetContainer(props: {
   theme: SwapWidgetProps["theme"];

packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-chain.tsx

@@ -23,6 +23,9 @@ type SelectBuyTokenProps = {
   selectedChain: BridgeChain | undefined;
 };
 
+/**
+ * @internal
+ */
 export function SelectBridgeChain(props: SelectBuyTokenProps) {
   const chainQuery = useBridgeChains(props.client);
 
@@ -36,6 +39,9 @@ export function SelectBridgeChain(props: SelectBuyTokenProps) {
   );
 }
 
+/**
+ * @internal
+ */
 export function SelectBridgeChainUI(
   props: SelectBuyTokenProps & {
     isPending: boolean;

packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsx

@@ -32,6 +32,9 @@ import {
   useTokens,
 } from "./use-tokens.js";
 
+/**
+ * @internal
+ */
 type SelectTokenUIProps = {
   onBack: () => void;
   client: ThirdwebClient;
@@ -47,6 +50,9 @@ function getDefaultSelectedChain(
   return chains.find((chain) => chain.chainId === (activeChainId || 1));
 }
 
+/**
+ * @internal
+ */
 export function SelectToken(props: SelectTokenUIProps) {
   const chainQuery = useBridgeChains(props.client);
   const [search, setSearch] = useState("");
@@ -267,8 +273,10 @@ function SelectTokenUI(
                       client={props.client}
                       onSelect={props.setSelectedToken}
                       isSelected={
-                        props.selectedToken?.tokenAddress.toLowerCase() ===
-                        token.token_address.toLowerCase()
+                        !!props.selectedToken &&
+                        props.selectedToken.tokenAddress.toLowerCase() ===
+                          token.token_address.toLowerCase() &&
+                        token.chain_id === props.selectedToken.chainId
                       }
                     />
                   ))}

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

@@ -108,6 +108,9 @@ function useTokenPrice(options: {
   });
 }
 
+/**
+ * @internal
+ */
 export function SwapUI(props: SwapUIProps) {
   const [modalState, setModalState] = useState<
     "select-buy-token" | "select-sell-token" | undefined

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

@@ -9,11 +9,11 @@ import type { SiweAuthOptions } from "../../../../core/hooks/auth/useSiweAuth.js
 import type { ConnectButton_connectModalOptions } from "../../../../core/hooks/connection/ConnectButtonProps.js";
 
 /**
- * Connection options for the `BuyWidget` component
+ * Connection options for the `SwapWidget` component
  *
  * @example
  * ```tsx
- * <BuyWidget client={client} connectOptions={{
+ * <SwapWidget client={client} connectOptions={{
  *    connectModal: {
  *      size: 'compact',
  *      title: "Sign in",
@@ -61,7 +61,6 @@ export type SwapWidgetConnectOptions = {
    * If you want to disable autoConnect, set this prop to `false`.
    *
    * If you want to customize the timeout, you can assign an object with a `timeout` key to this prop.
-   * ```
    */
   autoConnect?:
     | {
@@ -134,12 +133,18 @@ export type SwapWidgetConnectOptions = {
   auth?: SiweAuthOptions;
 };
 
+/**
+ * @internal
+ */
 export type ActiveWalletInfo = {
   activeChain: Chain;
   activeWallet: Wallet;
   activeAccount: Account;
 };
 
+/**
+ * @internal
+ */
 export type TokenSelection = {
   tokenAddress: string;
   chainId: number;

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

@@ -40,7 +40,7 @@ export function useTokens(options: {
 export type TokenBalance = {
   balance: string;
   chain_id: number;
-  decimals: 1;
+  decimals: number;
   name: string;
   icon_uri: string;
   price_data: {

packages/thirdweb/src/react/web/ui/ConnectWallet/icons/WalletDotIcon.tsx

@@ -1,5 +1,8 @@
 import type { IconFC } from "./types.js";
 
+/**
+ * @internal
+ */
 export const WalletDotIcon: IconFC = (props) => {
   return (
     <svg

packages/thirdweb/src/react/web/ui/components/Img.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import type { ThirdwebClient } from "../../../../client/client.js";
 import { resolveScheme } from "../../../../utils/ipfs.js";
 import { radius, type Theme } from "../../../core/design-system/index.js";
@@ -25,6 +25,7 @@ export const Img: React.FC<{
   const [_status, setStatus] = useState<"pending" | "fallback" | "loaded">(
     "pending",
   );
+  const imgRef = useRef<HTMLImageElement>(null);
 
   const propSrc = props.src;
 
@@ -52,6 +53,26 @@ export const Img: React.FC<{
 
   const isLoaded = status === "loaded";
 
+  useEffect(() => {
+    const imgEl = imgRef.current;
+    if (!imgEl) {
+      return;
+    }
+    if (imgEl.complete) {
+      setStatus("loaded");
+    } else {
+      function handleLoad() {
+        setStatus("loaded");
+      }
+      imgEl.addEventListener("load", handleLoad);
+      return () => {
+        imgEl.removeEventListener("load", handleLoad);
+      };
+    }
+
+    return;
+  }, []);
+
   return (
     <div
       style={{