update

kien-ngo · kien-ngo · commit d2b967b02a7b · 2024-11-12T07:19:06.000+07:00
diff --git a/apps/dashboard/src/@/components/blocks/wallet-address.tsx b/apps/dashboard/src/@/components/blocks/wallet-address.tsx
@@ -191,7 +191,13 @@ function WalletAvatar(props: {
           className="size-6"
         />
       ) : (
-        <Blobbie address={props.address} size={24} />
+        <Blobbie
+          address={props.address}
+          style={{
+            width: "24px",
+            height: "24px",
+          }}
+        />
       )}
     </div>
   );
diff --git a/apps/playground-web/src/app/local/page.tsx b/apps/playground-web/src/app/local/page.tsx
@@ -0,0 +1,52 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { THIRDWEB_CLIENT } from "@/lib/client";
+import { Suspense } from "react";
+import { sepolia } from "thirdweb/chains";
+import { Account, Blobbie, ThirdwebProvider } from "thirdweb/react";
+import { shortenAddress } from "thirdweb/utils";
+
+export default function Page() {
+  return (
+    <ThirdwebProvider>
+      <div className="flex h-full w-full flex-col items-center gap-3">
+        <div>
+          <div>Let&apos;s rebuild a basic ConnectButton-details component</div>
+          <BasicConnectedButton />
+        </div>
+      </div>
+    </ThirdwebProvider>
+  );
+}
+
+const BasicConnectedButton = () => {
+  const roundUpBalance = (num: number) => Math.round(num * 10) / 10;
+  return (
+    <Account
+      address="0x12345674b599ce99958242b3D3741e7b01841DF3"
+      client={THIRDWEB_CLIENT}
+    >
+      <Button className="flex h-12 w-40 flex-row justify-start gap-3 px-2">
+        <Suspense
+          fallback={
+            <Blobbie
+              address="0x12345674b599ce99958242b3D3741e7b01841DF3"
+              className="h-10 w-10 rounded-full"
+            />
+          }
+        >
+          <Account.Avatar className="h-10 w-10 rounded-full" />
+        </Suspense>
+        <div className="flex flex-col items-start">
+          <Suspense fallback={<Account.Address formatFn={shortenAddress} />}>
+            <Account.Name />
+          </Suspense>
+          <Suspense fallback={"skeleton"}>
+            <Account.Balance chain={sepolia} formatFn={roundUpBalance} />
+          </Suspense>
+        </div>
+      </Button>
+    </Account>
+  );
+};
diff --git a/packages/thirdweb/src/exports/react.ts b/packages/thirdweb/src/exports/react.ts
@@ -199,3 +199,6 @@ export type {
 // Site Embed and Linking
 export { SiteEmbed } from "../react/web/ui/SiteEmbed.js";
 export { SiteLink } from "../react/web/ui/SiteLink.js";
+
+// Account
+export { Account } from "../react/web/ui/prebuilt/Account/index.js";
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/Blobbie.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/Blobbie.tsx
@@ -25,9 +25,14 @@ const COLOR_OPTIONS = [
  * A unique gradient avatar based on the provided address.
  * @param props The component props.
  * @param props.address The address to generate the gradient with.
- * @param props.size The size of each side of the square avatar (in pixels)
+ * @param props.style The CSS style for the component - excluding `backgroundImage`
+ * @param props.className The className for the component
  */
-export function Blobbie(props: { address: Address; size: number }) {
+export function Blobbie(props: {
+  address: Address;
+  style?: Omit<React.CSSProperties, "backgroundImage">;
+  className?: string;
+}) {
   const id = useId();
   const colors = useMemo(
     () =>
@@ -41,10 +46,10 @@ export function Blobbie(props: { address: Address; size: number }) {
     <div
       id={id}
       style={{
-        width: `${props.size}px`,
-        height: `${props.size}px`,
+        ...props.style,
         backgroundImage: `radial-gradient(ellipse at left bottom, ${colors[0]}, ${colors[1]})`,
       }}
+      className={props.className}
     />
   );
 }
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/ConnectButton.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/ConnectButton.tsx
@@ -23,6 +23,7 @@ import { Spinner } from "../components/Spinner.js";
 import { Container } from "../components/basic.js";
 import { Button } from "../components/buttons.js";
 import { fadeInAnimation } from "../design-system/animations.js";
+import { Account } from "../prebuilt/Account/index.js";
 import { ConnectedWalletDetails } from "./Details.js";
 import ConnectModal from "./Modal/ConnectModal.js";
 import { LockIcon } from "./icons/LockIcon.js";
@@ -531,37 +532,39 @@ function ConnectButtonInner(
   }
 
   return (
-    <ConnectedWalletDetails
-      theme={theme}
-      detailsButton={props.detailsButton}
-      detailsModal={props.detailsModal}
-      supportedTokens={supportedTokens}
-      supportedNFTs={props.supportedNFTs}
-      onDisconnect={(info) => {
-        // logout on explicit disconnect!
-        if (siweAuth.requiresAuth) {
-          siweAuth.doLogout();
-        }
-        props.onDisconnect?.(info);
-      }}
-      chains={props?.chains || []}
-      chain={props.chain}
-      switchButton={props.switchButton}
-      client={props.client}
-      connectLocale={locale}
-      connectOptions={{
-        accountAbstraction: props.accountAbstraction,
-        appMetadata: props.appMetadata,
-        chain: props.chain,
-        chains: props.chains,
-        connectModal: props.connectModal,
-        recommendedWallets: props.recommendedWallets,
-        showAllWallets: props.showAllWallets,
-        walletConnect: props.walletConnect,
-        wallets: props.wallets,
-        hiddenWallets: props.detailsModal?.hiddenWallets,
-      }}
-    />
+    <Account address={activeAccount.address} client={props.client}>
+      <ConnectedWalletDetails
+        theme={theme}
+        detailsButton={props.detailsButton}
+        detailsModal={props.detailsModal}
+        supportedTokens={supportedTokens}
+        supportedNFTs={props.supportedNFTs}
+        onDisconnect={(info) => {
+          // logout on explicit disconnect!
+          if (siweAuth.requiresAuth) {
+            siweAuth.doLogout();
+          }
+          props.onDisconnect?.(info);
+        }}
+        chains={props?.chains || []}
+        chain={props.chain}
+        switchButton={props.switchButton}
+        client={props.client}
+        connectLocale={locale}
+        connectOptions={{
+          accountAbstraction: props.accountAbstraction,
+          appMetadata: props.appMetadata,
+          chain: props.chain,
+          chains: props.chains,
+          connectModal: props.connectModal,
+          recommendedWallets: props.recommendedWallets,
+          showAllWallets: props.showAllWallets,
+          walletConnect: props.walletConnect,
+          wallets: props.wallets,
+          hiddenWallets: props.detailsModal?.hiddenWallets,
+        }}
+      />
+    </Account>
   );
 }
 
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx
@@ -9,7 +9,7 @@ import {
   TextAlignJustifyIcon,
 } from "@radix-ui/react-icons";
 import { useQuery } from "@tanstack/react-query";
-import { type JSX, useContext, useEffect, useState } from "react";
+import { type JSX, Suspense, 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";
@@ -20,7 +20,10 @@ 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";
-import type { Account, Wallet } from "../../../../wallets/interfaces/wallet.js";
+import type {
+  Account as AccountType,
+  Wallet,
+} from "../../../../wallets/interfaces/wallet.js";
 import type { SmartWalletOptions } from "../../../../wallets/smart/types.js";
 import {
   type AppMetadata,
@@ -86,6 +89,7 @@ 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 { Account } from "../prebuilt/Account/index.js";
 import type { LocaleId } from "../types.js";
 import { Blobbie } from "./Blobbie.js";
 import { MenuButton, MenuLink } from "./MenuButton.js";
@@ -125,7 +129,7 @@ const LocalhostChainId = 1337;
 export const ConnectedWalletDetails: React.FC<{
   onDisconnect: (info: {
     wallet: Wallet;
-    account: Account;
+    account: AccountType;
   }) => void;
   detailsButton?: ConnectButton_detailsButtonOptions;
   detailsModal?: ConnectButton_detailsModalOptions;
@@ -145,7 +149,7 @@ export const ConnectedWalletDetails: React.FC<{
   const activeAccount = useActiveAccount();
   const walletChain = useActiveWalletChain();
 
-  const { pfp, name, balanceQuery } = useConnectedWalletDetails(
+  const { pfp, name } = useConnectedWalletDetails(
     client,
     walletChain,
     activeAccount,
@@ -229,7 +233,15 @@ export const ConnectedWalletDetails: React.FC<{
             }}
           />
         ) : (
-          activeAccount && <Blobbie address={activeAccount.address} size={35} />
+          activeAccount && (
+            <Blobbie
+              address={activeAccount.address}
+              style={{
+                width: "35px",
+                height: "35px",
+              }}
+            />
+          )
         )}
       </Container>
       <Container
@@ -250,21 +262,24 @@ export const ConnectedWalletDetails: React.FC<{
         >
           {props.detailsButton?.connectedAccountName ?? name}
         </Text>
-
-        {/* Balance */}
-        {balanceQuery.data ? (
+        <Suspense fallback={<Skeleton height={fontSize.xs} width="70px" />}>
           <Text
             className={`${TW_CONNECTED_WALLET}__balance`}
             size="xs"
             color="secondaryText"
             weight={400}
           >
-            {formatBalanceOnButton(Number(balanceQuery.data.displayValue))}{" "}
-            {balanceQuery.data.symbol}
+            <Account.Balance
+              chain={walletChain}
+              tokenAddress={
+                props.detailsButton?.displayBalanceToken?.[
+                  walletChain?.id || -1
+                ]
+              }
+              formatFn={formatBalanceOnButton}
+            />
           </Text>
-        ) : (
-          <Skeleton height={fontSize.xs} width="70px" />
-        )}
+        </Suspense>
       </Container>
     </WalletInfoButton>
   );
@@ -280,7 +295,7 @@ function DetailsModal(props: {
   closeModal: () => void;
   onDisconnect: (info: {
     wallet: Wallet;
-    account: Account;
+    account: AccountType;
   }) => void;
   chains: Chain[];
   displayBalanceToken?: Record<number, string>;
@@ -294,7 +309,7 @@ function DetailsModal(props: {
   const { client, locale } = props;
   const walletChain = useActiveWalletChain();
   const activeAccount = useActiveAccount();
-  const { pfp, name, balanceQuery } = useConnectedWalletDetails(
+  const { pfp, name } = useConnectedWalletDetails(
     client,
     walletChain,
     activeAccount,
@@ -322,12 +337,14 @@ function DetailsModal(props: {
     });
   }
 
-  function handleDisconnect(info: { wallet: Wallet; account: Account }) {
+  function handleDisconnect(info: { wallet: Wallet; account: AccountType }) {
     setIsOpen(false);
     props.closeModal();
     props.onDisconnect(info);
   }
 
+  const formatBalance = (num: number) => formatNumber(num, 9);
+
   const networkSwitcherButton = (
     <MenuButton
       type="button"
@@ -361,14 +378,23 @@ 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}
-          </Text>
+          <Suspense
+            fallback={
+              <Text color="secondaryText" size="xs">
+                <Skeleton height="1em" width="100px" />
+              </Text>
+            }
+          >
+            <Text color="secondaryText" size="xs">
+              <Account.Balance
+                chain={walletChain}
+                tokenAddress={
+                  props.displayBalanceToken?.[walletChain?.id || -1]
+                }
+                formatFn={formatBalance}
+              />
+            </Text>
+          </Suspense>
         </Text>
       )}
 
@@ -419,7 +445,10 @@ function DetailsModal(props: {
           activeAccount && (
             <Blobbie
               address={activeAccount.address}
-              size={Number(iconSize.xxl)}
+              style={{
+                width: `${iconSize.xxl}px`,
+                height: `${iconSize.xxl}px`,
+              }}
             />
           )
         )}
@@ -1401,7 +1430,7 @@ export type UseWalletDetailsModalOptions = {
    */
   onDisconnect?: (info: {
     wallet: Wallet;
-    account: Account;
+    account: AccountType;
   }) => void;
 
   /**
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
@@ -171,7 +171,10 @@ export function WalletRow(props: {
             border: `1px solid ${theme.colors.borderColor}`,
           }}
         >
-          <Blobbie address={props.address} size={Number(iconSize.md)} />
+          <Blobbie
+            address={props.address}
+            style={{ width: `${iconSize.md}px`, height: `${iconSize.md}px` }}
+          />
         </Container>
       )}
 
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/LinkedProfilesScreen.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/LinkedProfilesScreen.tsx
@@ -148,7 +148,13 @@ function LinkedProfile({
             overflow: "hidden",
           }}
         >
-          <Blobbie address={profile.details.address} size={32} />
+          <Blobbie
+            address={profile.details.address}
+            style={{
+              width: "32px",
+              height: "32px",
+            }}
+          />
         </Container>
       ) : profile.type === "passkey" ? (
         <FingerPrintIcon size={iconSize.lg} />
diff --git a/packages/thirdweb/src/react/web/ui/prebuilt/Account/index.tsx b/packages/thirdweb/src/react/web/ui/prebuilt/Account/index.tsx
