thirdweb 5.69.1-nightly-f368793375d099eec53569330af7a083e558e483-20241120000334 → 5.70.0-nightly-ecaa304a812188da3c81888bb52ca6064093c139-20241121000332

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

@@ -15,6 +15,7 @@ import type { Chain } from "../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../client/client.js";
 import { getContract } from "../../../../contract/contract.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";
@@ -67,10 +68,7 @@ import type {
   SupportedTokens,
 } from "../../../core/utils/defaultTokens.js";
 import { hasSmartAccount } from "../../../core/utils/isSmartWallet.js";
-import {
-  useConnectedWalletDetails,
-  useWalletInfo,
-} from "../../../core/utils/wallet.js";
+import { useWalletInfo } from "../../../core/utils/wallet.js";
 import { WalletUIStatesProvider } from "../../providers/wallet-ui-states-provider.js";
 import { ChainIcon } from "../components/ChainIcon.js";
 import { CopyIcon } from "../components/CopyIcon.js";
@@ -86,8 +84,13 @@ import { Button, IconButton } from "../components/buttons.js";
 import { Link, Text } from "../components/text.js";
 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 { AccountBlobbie } from "../prebuilt/Account/blobbie.js";
+import { AccountName } from "../prebuilt/Account/name.js";
+import { AccountProvider } from "../prebuilt/Account/provider.js";
 import type { LocaleId } from "../types.js";
-import { Blobbie } from "./Blobbie.js";
 import { MenuButton, MenuLink } from "./MenuButton.js";
 import { ScreenSetupContext, useSetupScreen } from "./Modal/screen.js";
 import {
@@ -140,18 +143,10 @@ export const ConnectedWalletDetails: React.FC<{
   connectOptions: DetailsModalConnectOptions | undefined;
 }> = (props) => {
   const { connectLocale: locale, client } = props;
-
   const setRootEl = useContext(SetRootElementContext);
   const activeAccount = useActiveAccount();
   const walletChain = useActiveWalletChain();
 
-  const { pfp, name, balanceQuery } = useConnectedWalletDetails(
-    client,
-    walletChain,
-    activeAccount,
-    props.detailsButton?.displayBalanceToken,
-  );
-
   function closeModal() {
     setRootEl(null);
   }
@@ -199,8 +194,6 @@ export const ConnectedWalletDetails: React.FC<{
     );
   }
 
-  const avatarSrc = props.detailsButton?.connectedAccountAvatarUrl || pfp;
-
   const combinedClassName = `${TW_CONNECTED_WALLET} ${props.detailsButton?.className || ""}`;
 
   return (
@@ -219,10 +212,10 @@ export const ConnectedWalletDetails: React.FC<{
           height: "35px",
         }}
       >
-        {avatarSrc ? (
+        {props.detailsButton?.connectedAccountAvatarUrl ? (
           <img
             alt=""
-            src={avatarSrc}
+            src={props.detailsButton.connectedAccountAvatarUrl}
             style={{
               height: "100%",
               width: "100%",
@@ -230,7 +223,16 @@ export const ConnectedWalletDetails: React.FC<{
             }}
           />
         ) : (
-          activeAccount && <Blobbie address={activeAccount.address} size={35} />
+          activeAccount && (
+            <AccountAvatar
+              loadingComponent={<AccountBlobbie size={35} />}
+              fallbackComponent={<AccountBlobbie size={35} />}
+              queryOptions={{
+                refetchOnWindowFocus: false,
+                refetchOnMount: false,
+              }}
+            />
+          )
         )}
       </Container>
       <Container
@@ -243,29 +245,47 @@ export const ConnectedWalletDetails: React.FC<{
         }}
       >
         {/* Address */}
-        <Text
-          size="xs"
-          color="primaryText"
-          weight={500}
-          className={`${TW_CONNECTED_WALLET}__address`}
-        >
-          {props.detailsButton?.connectedAccountName ?? name}
-        </Text>
-
-        {/* Balance */}
-        {balanceQuery.data ? (
+        {props.detailsButton?.connectedAccountName ? (
           <Text
-            className={`${TW_CONNECTED_WALLET}__balance`}
             size="xs"
-            color="secondaryText"
-            weight={400}
+            color="primaryText"
+            weight={500}
+            className={`${TW_CONNECTED_WALLET}__address`}
           >
-            {formatBalanceOnButton(Number(balanceQuery.data.displayValue))}{" "}
-            {balanceQuery.data.symbol}
+            {props.detailsButton.connectedAccountName}
           </Text>
         ) : (
-          <Skeleton height={fontSize.xs} width="70px" />
+          <Text
+            size="xs"
+            color="primaryText"
+            weight={500}
+            className={`${TW_CONNECTED_WALLET}__address`}
+          >
+            <AccountName
+              loadingComponent={<AccountAddress formatFn={shortenAddress} />}
+              fallbackComponent={<AccountAddress formatFn={shortenAddress} />}
+            />
+          </Text>
         )}
+
+        <Text
+          className={`${TW_CONNECTED_WALLET}__balance`}
+          size="xs"
+          color="secondaryText"
+          weight={400}
+        >
+          <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)
+              ]
+            }
+          />
+        </Text>
       </Container>
     </WalletInfoButton>
   );
@@ -295,12 +315,6 @@ function DetailsModal(props: {
   const { client, locale } = props;
   const walletChain = useActiveWalletChain();
   const activeAccount = useActiveAccount();
-  const { pfp, name, balanceQuery } = useConnectedWalletDetails(
-    client,
-    walletChain,
-    activeAccount,
-    props.displayBalanceToken,
-  );
   const theme = parseTheme(props.theme);
 
   const activeWallet = useActiveWallet();
@@ -363,12 +377,15 @@ function DetailsModal(props: {
         <Text color="primaryText" size="md" multiline>
           {chainNameQuery.name || `Unknown chain #${walletChain?.id}`}
           <Text color="secondaryText" size="xs">
-            {balanceQuery.data ? (
-              formatNumber(Number(balanceQuery.data.displayValue), 9)
-            ) : (
-              <Skeleton height="1em" width="100px" />
-            )}{" "}
-            {balanceQuery.data?.symbol}
+            <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)]
+              }
+            />
           </Text>
         </Text>
       )}
@@ -384,8 +401,6 @@ function DetailsModal(props: {
     </MenuButton>
   );
 
-  const avatarSrc = props.detailsModal?.connectedAccountAvatarUrl ?? pfp;
-
   const { hideSendFunds, hideReceiveFunds, hideBuyFunds } =
     props.detailsModal || {};
 
@@ -407,9 +422,9 @@ function DetailsModal(props: {
           overflow: "hidden",
         }}
       >
-        {avatarSrc ? (
+        {props.detailsModal?.connectedAccountAvatarUrl ? (
           <img
-            src={avatarSrc}
+            src={props.detailsModal.connectedAccountAvatarUrl}
             style={{
               height: "100%",
               width: "100%",
@@ -419,9 +434,9 @@ function DetailsModal(props: {
           />
         ) : (
           activeAccount && (
-            <Blobbie
-              address={activeAccount.address}
-              size={Number(iconSize.xxl)}
+            <AccountAvatar
+              loadingComponent={<AccountBlobbie size={Number(iconSize.xxl)} />}
+              fallbackComponent={<AccountBlobbie size={Number(iconSize.xxl)} />}
             />
           )
         )}
@@ -496,9 +511,22 @@ function DetailsModal(props: {
               alignItems: "center",
             }}
           >
-            <Text color="primaryText" weight={500} size="md">
-              {props.detailsModal?.connectedAccountName ?? name}
-            </Text>
+            {props.detailsModal?.connectedAccountName ? (
+              <Text color="primaryText" weight={500} size="md">
+                {props.detailsModal.connectedAccountName}
+              </Text>
+            ) : (
+              <Text color="primaryText" weight={500} size="md">
+                <AccountName
+                  loadingComponent={
+                    <AccountAddress formatFn={shortenAddress} />
+                  }
+                  fallbackComponent={
+                    <AccountAddress formatFn={shortenAddress} />
+                  }
+                />
+              </Text>
+            )}
             <IconButton>
               <CopyIcon
                 text={activeAccount?.address || ""}
@@ -964,7 +992,12 @@ function DetailsModal(props: {
               }
             }}
           >
-            {content}
+            <AccountProvider
+              address={activeAccount?.address || ""}
+              client={client}
+            >
+              {content}
+            </AccountProvider>
           </Modal>
         </ScreenSetupContext.Provider>
       </WalletUIStatesProvider>

package/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx

@@ -177,6 +177,7 @@ import { useSetupScreen } from "./screen.js";
  *
  * @returns A JSX element that renders the <ConnectEmbed> component.
  * @component
+ * @walletConnection
  */
 export function ConnectEmbed(props: ConnectEmbedProps) {
   const activeWallet = useActiveWallet();

package/src/react/web/ui/PayEmbed.tsx

@@ -29,8 +29,7 @@ import type { LocaleId } from "./types.js";
  */
 export type PayEmbedProps = {
   /**
-   * Override the default tokens shown in PayEmbed uI
-   * @component
+   * Override the default tokens shown in PayEmbed UI
    * By default, PayEmbed shows a few popular tokens for Pay supported chains
    * @example
    *
@@ -157,6 +156,7 @@ export type PayEmbedProps = {
  *   }}
  *  />
  * ```
+ * @buyCrypto
  */
 export function PayEmbed(props: PayEmbedProps) {
   const localeQuery = useConnectLocale(props.locale || "en_US");

package/src/react/web/ui/SiteEmbed.tsx

@@ -11,9 +11,9 @@ import { useActiveWallet } from "../../core/hooks/wallets/useActiveWallet.js";
 /**
  * Embeds another thirdweb-supported site for seamless in-app and ecosystem wallet connection.
  *
- * @note Make sure the embedded site includes <AutoConnect /> and supports frame ancestors, see [here](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors) for more information.
+ *  Make sure the embedded site includes <AutoConnect /> and supports frame ancestors, see [here](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors) for more information.
  *
- * @note The embedded site must support the connected wallet (ecosystem or in-app).
+ *  The embedded site must support the connected wallet (ecosystem or in-app).
  *
  * @param {Object} props - The props to pass to the iframe
  * @param {String} props.src - The URL of the site to embed
@@ -26,6 +26,7 @@ import { useActiveWallet } from "../../core/hooks/wallets/useActiveWallet.js";
  *
  * <SiteEmbed src="https://thirdweb.com" client={thirdwebClient} ecosystem={{ id: "ecosystem.thirdweb" }} />
  * ```
+ * @walletConnection
  */
 export function SiteEmbed({
   src,

package/src/react/web/ui/SiteLink.tsx

@@ -11,7 +11,7 @@ import { useActiveWallet } from "../../core/hooks/wallets/useActiveWallet.js";
 /**
  * Creates a link to another thirdweb-supported site with wallet connection parameters.
  *
- * @note The target site must support the connected wallet (ecosystem or in-app).
+ *  The target site must support the connected wallet (ecosystem or in-app).
  *
  * @param {Object} props - The props to pass to the anchor tag
  * @param {String} props.href - The URL of the site to link to
@@ -27,6 +27,7 @@ import { useActiveWallet } from "../../core/hooks/wallets/useActiveWallet.js";
  *   Visit Site
  * </SiteLink>
  * ```
+ * @walletConnection
  */
 export function SiteLink({
   href,

package/src/react/web/ui/TransactionButton/index.tsx

@@ -129,6 +129,7 @@ import { Button } from "../components/buttons.js";
  * </TransactionButton>
  * ```
  * @component
+ * @transaction
  */
 export function TransactionButton(props: TransactionButtonProps) {
   const {

package/src/react/web/ui/prebuilt/Account/address.test.tsx

@@ -0,0 +1,28 @@
+import { describe, expect, it } from "vitest";
+import { render, screen, waitFor } from "~test/react-render.js";
+import { TEST_CLIENT } from "~test/test-clients.js";
+import { shortenAddress } from "../../../../../utils/address.js";
+import { AccountAddress } from "./address.js";
+import { AccountProvider } from "./provider.js";
+
+describe.runIf(process.env.TW_SECRET_KEY)("AccountAddress component", () => {
+  it("should format the address properly", () => {
+    render(
+      <AccountProvider
+        address="0x12345674b599ce99958242b3D3741e7b01841DF3"
+        client={TEST_CLIENT}
+      >
+        <AccountAddress formatFn={shortenAddress} />
+      </AccountProvider>,
+    );
+
+    waitFor(() =>
+      expect(
+        screen.getByText("0x1234...1DF3", {
+          exact: true,
+          selector: "span",
+        }),
+      ).toBeInTheDocument(),
+    );
+  });
+});

package/src/react/web/ui/prebuilt/Account/address.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import { useAccountContext } from "./provider.js";
+
+/**
+ * @component
+ * @account
+ */
+export interface AccountAddressProps
+  extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> {
+  /**
+   * The function used to transform (format) the wallet address
+   * Specifically useful for shortening the wallet.
+   *
+   * This function should take in a string and output a string
+   */
+  formatFn?: (str: string) => string;
+}
+
+/**
+ *
+ * @returns a <span> containing the full wallet address of the account
+ *
+ * @example
+ * ### Basic usage
+ * ```tsx
+ * import { AccountProvider, AccountAddress } from "thirdweb/react";
+ *
+ * <AccountProvider address="0x12345674b599ce99958242b3D3741e7b01841DF3" client={TW_CLIENT}>
+ *   <AccountAddress />
+ * </AccountProvider>
+ * ```
+ * Result:
+ * ```html
+ * <span>0x12345674b599ce99958242b3D3741e7b01841DF3</span>
+ * ```
+ *
+ *
+ * ### Shorten the address
+ * ```tsx
+ * import { AccountProvider, AccountAddress } from "thirdweb/react";
+ * import { shortenAddress } from "thirdweb/utils";
+ *
+ * <AccountProvider address="0x12345674b599ce99958242b3D3741e7b01841DF3" client={TW_CLIENT}>
+ *   <AccountAddress formatFn={shortenAddress} />
+ * </AccountProvider>
+ * ```
+ * Result:
+ * ```html
+ * <span>0x1234...1DF3</span>
+ * ```
+ *
+ * @component
+ * @account
+ * @beta
+ */
+export function AccountAddress({
+  formatFn,
+  ...restProps
+}: AccountAddressProps) {
+  const { address } = useAccountContext();
+  const value = formatFn ? formatFn(address) : address;
+  return <span {...restProps}>{value}</span>;
+}

package/src/react/web/ui/prebuilt/Account/avatar.test.tsx

@@ -0,0 +1,48 @@
+import { describe, expect, it } from "vitest";
+import { render, screen, waitFor } from "~test/react-render.js";
+import { TEST_CLIENT } from "~test/test-clients.js";
+import { TEST_ACCOUNT_A } from "~test/test-wallets.js";
+import { AccountAvatar } from "./avatar.js";
+import { AccountProvider } from "./provider.js";
+
+describe.runIf(process.env.TW_SECRET_KEY)("AccountAvatar component", () => {
+  it("should render an image", () => {
+    render(
+      <AccountProvider
+        address={"0x12345674b599ce99958242b3D3741e7b01841DF3"}
+        client={TEST_CLIENT}
+      >
+        <AccountAvatar />
+      </AccountProvider>,
+    );
+
+    waitFor(() => expect(screen.getByRole("img")).toBeInTheDocument());
+  });
+
+  it("should fallback properly if failed to load", () => {
+    render(
+      <AccountProvider address={TEST_ACCOUNT_A.address} client={TEST_CLIENT}>
+        <AccountAvatar fallbackComponent={<span>oops</span>} />
+      </AccountProvider>,
+    );
+
+    waitFor(() =>
+      expect(
+        screen.getByText("oops", {
+          exact: true,
+          selector: "span",
+        }),
+      ).toBeInTheDocument(),
+    );
+  });
+
+  it("should NOT render anything if fail to resolve avatar", () => {
+    render(
+      <AccountProvider address={"invalid-wallet-address"} client={TEST_CLIENT}>
+        <AccountAvatar />
+      </AccountProvider>,
+    );
+
+    waitFor(() => expect(screen.getByRole("img")).not.toBeInTheDocument());
+  });
+});