thirdweb 5.75.0 → 5.76.0-nightly-015293eb826b346871696183e96d49da44f31393-20241209000527

package/src/react/web/ui/ConnectWallet/Details.tsx

@@ -9,15 +9,15 @@ import {
   TextAlignJustifyIcon,
 } from "@radix-ui/react-icons";
 import { useQuery } from "@tanstack/react-query";
-import { type JSX, useContext, useEffect, useState } from "react";
+import { type JSX, useCallback, useContext, useEffect, useState } from "react";
 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";
@@ -144,7 +149,6 @@ export const ConnectedWalletDetails: React.FC<{
 }> = (props) => {
   const { connectLocale: locale, client } = props;
   const setRootEl = useContext(SetRootElementContext);
-  const activeAccount = useActiveAccount();
   const walletChain = useActiveWalletChain();
 
   function closeModal() {
@@ -196,6 +200,9 @@ export const ConnectedWalletDetails: React.FC<{
 
   const combinedClassName = `${TW_CONNECTED_WALLET} ${props.detailsButton?.className || ""}`;
 
+  const tokenAddress =
+    props.detailsButton?.displayBalanceToken?.[Number(walletChain?.id)];
+
   return (
     <WalletInfoButton
       type="button"
@@ -223,16 +230,30 @@ export const ConnectedWalletDetails: React.FC<{
             }}
           />
         ) : (
-          activeAccount && (
-            <AccountAvatar
-              loadingComponent={<AccountBlobbie size={35} />}
-              fallbackComponent={<AccountBlobbie size={35} />}
-              queryOptions={{
-                refetchOnWindowFocus: false,
-                refetchOnMount: false,
-              }}
-            />
-          )
+          <AccountAvatar
+            className={`${TW_CONNECTED_WALLET}__account_avatar`}
+            loadingComponent={
+              <AccountBlobbie
+                size={35}
+                className={`${TW_CONNECTED_WALLET}__account_avatar`}
+              />
+            }
+            fallbackComponent={
+              <AccountBlobbie
+                size={35}
+                className={`${TW_CONNECTED_WALLET}__account_avatar`}
+              />
+            }
+            queryOptions={{
+              refetchOnWindowFocus: false,
+              refetchOnMount: false,
+            }}
+            style={{
+              height: "100%",
+              width: "100%",
+              objectFit: "cover",
+            }}
+          />
         )}
       </Container>
       <Container
@@ -273,25 +294,71 @@ 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={tokenAddress}
+              />
+              <AccountBalance
+                chain={walletChain}
+                tokenAddress={tokenAddress}
+                showBalanceInFiat="USD"
+                formatFn={detailsBtn_formatFiatBalanceForButton}
+                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={detailsBtn_formatTokenBalanceForButton}
+              tokenAddress={tokenAddress}
+            />
+          )}
         </Text>
       </Container>
     </WalletInfoButton>
   );
 };
 
-function DetailsModal(props: {
+/**
+ * @internal Exported for tests
+ */
+export function detailsBtn_formatFiatBalanceForButton(
+  props: AccountBalanceInfo,
+) {
+  return ` (${formatAccountFiatBalance({ ...props, decimals: 0 })})`;
+}
+
+/**
+ * @internal Exported for test
+ */
+export function detailsBtn_formatTokenBalanceForButton(
+  props: AccountBalanceInfo,
+) {
+  return `${formatAccountTokenBalance({ ...props, decimals: props.balance < 1 ? 5 : 4 })}`;
+}
+
+/**
+ * @internal Exported for tests only
+ */
+export function DetailsModal(props: {
   client: ThirdwebClient;
   locale: ConnectLocale;
   detailsModal?: ConnectButton_detailsModalOptions;
@@ -307,6 +374,7 @@ function DetailsModal(props: {
   displayBalanceToken?: Record<number, string>;
   connectOptions: DetailsModalConnectOptions | undefined;
   assetTabs?: AssetTabs[];
+  showBalanceInFiat?: SupportedFiatCurrency;
 }) {
   const [screen, setScreen] = useState<WalletDetailsModalScreen>("main");
   const { disconnect } = useDisconnect();
@@ -330,12 +398,12 @@ function DetailsModal(props: {
     wallets: activeWallet ? [activeWallet] : [],
   });
 
-  function closeModal() {
+  const closeModal = useCallback(() => {
     setIsOpen(false);
     onModalUnmount(() => {
       props.closeModal();
     });
-  }
+  }, [props.closeModal]);
 
   function handleDisconnect(info: { wallet: Wallet; account: Account }) {
     setIsOpen(false);
@@ -343,6 +411,12 @@ function DetailsModal(props: {
     props.onDisconnect(info);
   }
 
+  useEffect(() => {
+    if (!activeAccount) {
+      closeModal();
+    }
+  }, [activeAccount, closeModal]);
+
   const networkSwitcherButton = (
     <MenuButton
       type="button"
@@ -377,15 +451,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 +540,11 @@ function DetailsModal(props: {
             <AccountAvatar
               loadingComponent={<AccountBlobbie size={Number(iconSize.xxl)} />}
               fallbackComponent={<AccountBlobbie size={Number(iconSize.xxl)} />}
+              style={{
+                height: "100%",
+                width: "100%",
+                objectFit: "cover",
+              }}
             />
           )
         )}
@@ -470,7 +578,7 @@ function DetailsModal(props: {
   );
 
   let content = (
-    <div>
+    <div className={`${TW_CONNECTED_WALLET}__default_modal_screen`}>
       <Spacer y="xs" />
       <Container
         px="lg"
@@ -691,20 +799,6 @@ function DetailsModal(props: {
             <Text color="primaryText">{props.locale.manageWallet.title}</Text>
           </MenuButton>
 
-          {/* Switch to Personal Wallet  */}
-          {/* {personalWallet &&
-            !props.detailsModal?.hideSwitchToPersonalWallet && (
-              <AccountSwitcher
-                wallet={personalWallet}
-                name={locale.personalWallet}
-              />
-            )} */}
-
-          {/* Switch to Smart Wallet */}
-          {/* {smartWallet && (
-            <AccountSwitcher name={locale.smartWallet} wallet={smartWallet} />
-          )} */}
-
           {/* Request Testnet funds */}
           {(props.detailsModal?.showTestnetFaucet ?? false) &&
             (chainFaucetsQuery.faucets.length > 0 ||
@@ -993,12 +1087,11 @@ function DetailsModal(props: {
               }
             }}
           >
-            <AccountProvider
-              address={activeAccount?.address || ""}
-              client={client}
-            >
-              {content}
-            </AccountProvider>
+            {activeAccount?.address && (
+              <AccountProvider address={activeAccount.address} client={client}>
+                {content}
+              </AccountProvider>
+            )}
           </Modal>
         </ScreenSetupContext.Provider>
       </WalletUIStatesProvider>
@@ -1006,10 +1099,6 @@ function DetailsModal(props: {
   );
 }
 
-function formatBalanceOnButton(num: number) {
-  return formatNumber(num, num < 1 ? 5 : 4);
-}
-
 const WalletInfoButton = /* @__PURE__ */ StyledButton((_) => {
   const theme = useCustomTheme();
   return {
@@ -1045,7 +1134,10 @@ const StyledChevronRightIcon = /* @__PURE__ */ styled(
   };
 });
 
-function ConnectedToSmartWallet(props: {
+/**
+ * @internal Exported for test
+ */
+export function ConnectedToSmartWallet(props: {
   client: ThirdwebClient;
   connectLocale: ConnectLocale;
 }) {
@@ -1104,7 +1196,10 @@ function ConnectedToSmartWallet(props: {
   return null;
 }
 
-function InAppWalletUserInfo(props: {
+/**
+ * @internal Exported for tests
+ */
+export function InAppWalletUserInfo(props: {
   client: ThirdwebClient;
   locale: ConnectLocale;
 }) {
@@ -1191,13 +1286,19 @@ function InAppWalletUserInfo(props: {
     );
   }
 
-  return <Skeleton width="50px" height="10px" />;
+  return (
+    <Skeleton
+      width="50px"
+      height="10px"
+      className="InAppWalletUserInfo__skeleton"
+    />
+  );
 }
 
 /**
- * @internal
+ * @internal Exported for tests
  */
-function SwitchNetworkButton(props: {
+export function SwitchNetworkButton(props: {
   style?: React.CSSProperties;
   className?: string;
   switchNetworkBtnTitle?: string;
@@ -1507,6 +1608,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;
 };
 
 /**

package/src/react/web/ui/ConnectWallet/screens/PrivateKey.test.tsx

@@ -0,0 +1,54 @@
+import { describe, expect, it } from "vitest";
+import { render } from "~test/react-render.js";
+import { TEST_CLIENT } from "~test/test-clients.js";
+import { createWallet } from "../../../../../wallets/create-wallet.js";
+import en from "../locale/en.js";
+import { PrivateKey } from "./PrivateKey.js";
+
+const client = TEST_CLIENT;
+
+describe("PrivateKey screen", () => {
+  it("should render the iframe", () => {
+    const { container } = render(
+      <PrivateKey
+        onBack={() => {}}
+        client={client}
+        connectLocale={en}
+        theme="dark"
+        wallet={createWallet("io.metamask")}
+      />,
+    );
+
+    const iframe = container.querySelector("iframe");
+    expect(iframe).not.toBe(null);
+  });
+
+  it("should throw an error if no wallet is specified", () => {
+    expect(() =>
+      render(
+        <PrivateKey
+          onBack={() => {}}
+          client={client}
+          connectLocale={en}
+          theme="dark"
+        />,
+      ),
+    ).toThrowError("[PrivateKey] No wallet found");
+  });
+
+  it("should render the modal title", () => {
+    const { container } = render(
+      <PrivateKey
+        onBack={() => {}}
+        client={client}
+        connectLocale={en}
+        theme="dark"
+        wallet={createWallet("io.metamask")}
+      />,
+    );
+
+    const element = container.querySelector("h2");
+    expect(element).not.toBe(null);
+    expect(element?.innerHTML).toBe(en.manageWallet.exportPrivateKey);
+  });
+});

package/src/react/web/ui/ConnectWallet/screens/ReceiveFunds.test.tsx

@@ -0,0 +1,37 @@
+import { describe, expect, it } from "vitest";
+import { render } from "~test/react-render.js";
+import { TEST_CLIENT } from "~test/test-clients.js";
+import en from "../locale/en.js";
+import { ReceiveFunds } from "./ReceiveFunds.js";
+
+const client = TEST_CLIENT;
+
+describe("ReceiveFunds screen", () => {
+  it("should render a title with locale.title", () => {
+    const { container } = render(
+      <ReceiveFunds onBack={() => {}} client={client} connectLocale={en} />,
+    );
+    const element = container.querySelector("h2");
+    expect(element).not.toBe(null);
+    expect(element?.innerHTML).toBe(en.receiveFundsScreen.title);
+  });
+
+  it("should render a span with locale.instruction", () => {
+    const { container } = render(
+      <ReceiveFunds onBack={() => {}} client={client} connectLocale={en} />,
+    );
+    const element = container.querySelector(
+      "span.receive_fund_screen_instruction",
+    );
+    expect(element).not.toBe(null);
+    expect(element?.innerHTML).toBe(en.receiveFundsScreen.instruction);
+  });
+
+  it("should render the CopyIcon", () => {
+    const { container } = render(
+      <ReceiveFunds onBack={() => {}} client={client} connectLocale={en} />,
+    );
+    const element = container.querySelector("svg.tw-copy-icon");
+    expect(element).not.toBe(null);
+  });
+});

package/src/react/web/ui/ConnectWallet/screens/ReceiveFunds.tsx

@@ -70,7 +70,12 @@ export function ReceiveFunds(props: {
 
       <Spacer y="lg" />
 
-      <Text multiline center balance>
+      <Text
+        multiline
+        center
+        balance
+        className="receive_fund_screen_instruction"
+      >
         {locale.instruction}
       </Text>
     </Container>

package/src/react/web/ui/ConnectWallet/screens/SendFunds.test.tsx

@@ -0,0 +1,67 @@
+import { describe, expect, it, vi } from "vitest";
+import { render } from "~test/react-render.js";
+import { TEST_CLIENT } from "~test/test-clients.js";
+import { TEST_ACCOUNT_A } from "~test/test-wallets.js";
+import { base } from "../../../../../chains/chain-definitions/base.js";
+import { useActiveWalletChain } from "../../../../../react/core/hooks/wallets/useActiveWalletChain.js";
+import en from "../locale/en.js";
+import { SendFundsForm } from "./SendFunds.js";
+
+const client = TEST_CLIENT;
+
+describe("SendFunds screen", () => {
+  it("should render a title with locale.title", () => {
+    vi.mock(
+      "../../../../../react/core/hooks/wallets/useActiveWalletChain.js",
+      () => ({
+        useActiveWalletChain: vi.fn(),
+      }),
+    );
+    vi.mocked(useActiveWalletChain).mockReturnValue(base);
+    const { container } = render(
+      <SendFundsForm
+        token={{ nativeToken: true }}
+        onTokenSelect={() => {}}
+        receiverAddress={TEST_ACCOUNT_A.address}
+        setReceiverAddress={() => {}}
+        amount={"1"}
+        setAmount={() => {}}
+        onBack={() => {}}
+        client={client}
+        connectLocale={en}
+      />,
+    );
+    const element = container.querySelector("h2");
+    expect(element).not.toBe(null);
+    expect(element?.innerHTML).toBe(en.sendFundsScreen.title);
+    vi.resetAllMocks();
+  });
+
+  it("SendFundsForm should render the send button", () => {
+    vi.mock(
+      "../../../../../react/core/hooks/wallets/useActiveWalletChain.js",
+      () => ({
+        useActiveWalletChain: vi.fn(),
+      }),
+    );
+    vi.mocked(useActiveWalletChain).mockReturnValue(base);
+    const { container } = render(
+      <SendFundsForm
+        token={{ nativeToken: true }}
+        onTokenSelect={() => {}}
+        receiverAddress={TEST_ACCOUNT_A.address}
+        setReceiverAddress={() => {}}
+        amount={"1"}
+        setAmount={() => {}}
+        onBack={() => {}}
+        client={client}
+        connectLocale={en}
+      />,
+    );
+    const element = container.querySelector(
+      "button.tw-sendfunds-screen-send-button",
+    );
+    expect(element?.innerHTML).toBe(en.sendFundsScreen.submitButton);
+    vi.resetAllMocks();
+  });
+});

package/src/react/web/ui/ConnectWallet/screens/SendFunds.tsx

@@ -107,9 +107,9 @@ export function SendFunds(props: {
 }
 
 /**
- * @internal
+ * @internal Exported for tests
  */
-function SendFundsForm(props: {
+export function SendFundsForm(props: {
   onTokenSelect: () => void;
   token: ERC20OrNativeToken;
   receiverAddress: string;
@@ -321,6 +321,7 @@ function SendFundsForm(props: {
           fullWidth
           variant="accent"
           type="submit"
+          className="tw-sendfunds-screen-send-button"
           onClick={async () => {
             if (!receiverAddress || !amount) {
               return;

package/src/react/web/ui/ConnectWallet/screens/StartScreen.test.tsx

@@ -0,0 +1,71 @@
+import { describe, expect, it } from "vitest";
+import { render } from "~test/react-render.js";
+import { TEST_CLIENT } from "~test/test-clients.js";
+import en from "../locale/en.js";
+import { StartScreen } from "./StartScreen.js";
+
+const client = TEST_CLIENT;
+
+describe("StartScreen", () => {
+  it("should render an image for the welcome screen", () => {
+    const { container } = render(
+      <StartScreen
+        connectLocale={en}
+        client={client}
+        welcomeScreen={{
+          img: {
+            src: "https://cat.png",
+            width: 100,
+            height: 100,
+          },
+        }}
+        meta={{
+          showThirdwebBranding: false,
+          termsOfServiceUrl: "https://cat.com",
+          privacyPolicyUrl: "https://privacy.com",
+        }}
+      />,
+    );
+
+    const img = container.querySelector("img");
+    expect(img).not.toBe(null);
+    expect(img?.src).toBe("https://cat.png/");
+    expect(img?.width).toBe(100);
+  });
+
+  it("should render new-to-wallet link", () => {
+    const { container } = render(
+      <StartScreen
+        connectLocale={en}
+        client={client}
+        welcomeScreen={undefined}
+        meta={{
+          showThirdwebBranding: false,
+          termsOfServiceUrl: "https://cat.com",
+          privacyPolicyUrl: "https://privacy.com",
+        }}
+      />,
+    );
+
+    const a = container.querySelector("a");
+    expect(a).not.toBe(null);
+    expect(a?.href).toBe("https://blog.thirdweb.com/web3-wallet/");
+  });
+
+  it("should render an svg icon if a custom image is not passed", () => {
+    const { container } = render(
+      <StartScreen
+        connectLocale={en}
+        client={client}
+        welcomeScreen={undefined}
+        meta={{
+          showThirdwebBranding: false,
+          termsOfServiceUrl: "https://cat.com",
+          privacyPolicyUrl: "https://privacy.com",
+        }}
+      />,
+    );
+    const svg = container.querySelector("svg");
+    expect(svg).not.toBe(null);
+  });
+});