update

Author: kien-ngo

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

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

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

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

packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx

@@ -229,7 +229,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
@@ -419,7 +427,10 @@ function DetailsModal(props: {
           activeAccount && (
             <Blobbie
               address={activeAccount.address}
-              size={Number(iconSize.xxl)}
+              style={{
+                width: `${iconSize.xxl}px`,
+                height: `${iconSize.xxl}px`,
+              }}
             />
           )
         )}

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

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