Version Packages (#6089 )

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
add billingPlanVersion to TeamResponse (#6084 )
2025-01-28 18:22:36 -08:00 · 2025-01-28 18:20:57 -08:00 · 2025-01-28 17:40:13 -08:00 · 2025-01-28 16:29:50 -08:00 · 2025-01-28 14:21:25 -08:00 · 2025-01-29 09:44:02 +13:00
75 changed files with 6315 additions and 4636 deletions
@@ -1,12 +1,15 @@
---
-title: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"
---
+<!--
+
+## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

 If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

 ## Notes for the reviewer
+
 Anything important to call out? Be sure to also clarify these in your comments.

 ## How to test
+
 Unit tests, playground, etc.

+-->
@@ -31,29 +31,29 @@
    "@marsidev/react-turnstile": "^1.1.0",
    "@n8tb1t/use-scroll-position": "^2.0.3",
    "@radix-ui/react-accordion": "^1.2.2",
-    "@radix-ui/react-alert-dialog": "^1.1.4",
+    "@radix-ui/react-alert-dialog": "^1.1.5",
    "@radix-ui/react-avatar": "^1.1.2",
    "@radix-ui/react-checkbox": "^1.1.3",
-    "@radix-ui/react-dialog": "1.1.4",
-    "@radix-ui/react-dropdown-menu": "^2.1.3",
-    "@radix-ui/react-hover-card": "^1.1.3",
+    "@radix-ui/react-dialog": "1.1.5",
+    "@radix-ui/react-dropdown-menu": "^2.1.5",
+    "@radix-ui/react-hover-card": "^1.1.5",
    "@radix-ui/react-label": "^2.1.1",
-    "@radix-ui/react-popover": "^1.1.3",
+    "@radix-ui/react-popover": "^1.1.5",
    "@radix-ui/react-progress": "^1.1.1",
    "@radix-ui/react-radio-group": "^1.2.2",
-    "@radix-ui/react-select": "^2.1.3",
+    "@radix-ui/react-select": "^2.1.5",
    "@radix-ui/react-separator": "^1.1.1",
    "@radix-ui/react-slot": "^1.1.1",
    "@radix-ui/react-switch": "^1.1.2",
-    "@radix-ui/react-tooltip": "1.1.5",
-    "@sentry/nextjs": "8.45.1",
-    "@shazow/whatsabi": "^0.18.0",
-    "@tanstack/react-query": "5.62.16",
+    "@radix-ui/react-tooltip": "1.1.7",
+    "@sentry/nextjs": "8.51.0",
+    "@shazow/whatsabi": "^0.19.0",
+    "@tanstack/react-query": "5.65.0",
    "@tanstack/react-table": "^8.20.6",
    "@thirdweb-dev/service-utils": "workspace:*",
    "@vercel/functions": "^1.5.2",
-    "@vercel/og": "^0.6.4",
-    "abitype": "1.0.7",
+    "@vercel/og": "^0.6.5",
+    "abitype": "1.0.8",
    "chakra-react-select": "^4.7.6",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
@@ -62,19 +62,19 @@
    "date-fns": "4.1.0",
    "fetch-event-stream": "0.1.5",
    "flat": "^6.0.1",
-    "framer-motion": "11.15.0",
+    "framer-motion": "12.0.6",
    "fuse.js": "7.0.0",
    "input-otp": "^1.4.1",
    "ioredis": "^5.4.1",
    "ipaddr.js": "^2.2.0",
-    "lucide-react": "0.468.0",
-    "next": "15.1.4",
+    "lucide-react": "0.474.0",
+    "next": "15.1.6",
    "next-plausible": "^3.12.4",
    "next-themes": "^0.4.4",
    "nextjs-toploader": "^1.6.12",
    "openapi-types": "^12.1.3",
    "p-limit": "^6.2.0",
-    "papaparse": "^5.4.1",
+    "papaparse": "^5.5.1",
    "pluralize": "^8.0.0",
    "posthog-js": "1.67.1",
    "qrcode": "^1.5.3",
@@ -87,11 +87,11 @@
    "react-hook-form": "7.54.2",
    "react-markdown": "^9.0.1",
    "react-table": "^7.8.0",
-    "recharts": "2.14.1",
+    "recharts": "2.15.1",
    "remark-gfm": "^4.0.0",
    "server-only": "^0.0.1",
    "shiki": "1.27.0",
-    "sonner": "^1.7.1",
+    "sonner": "^1.7.2",
    "spdx-correct": "^3.2.0",
    "swagger-ui-react": "^5.18.2",
    "tailwind-merge": "^2.6.0",
@@ -103,29 +103,29 @@
  },
  "devDependencies": {
    "@chakra-ui/cli": "^2.4.1",
-    "@chromatic-com/storybook": "3.2.2",
-    "@next/bundle-analyzer": "15.1.4",
-    "@next/eslint-plugin-next": "15.1.4",
-    "@playwright/test": "1.49.1",
-    "@storybook/addon-essentials": "8.4.7",
-    "@storybook/addon-interactions": "8.4.7",
-    "@storybook/addon-links": "8.4.7",
-    "@storybook/addon-onboarding": "8.4.7",
-    "@storybook/addon-viewport": "8.4.7",
-    "@storybook/blocks": "8.4.7",
-    "@storybook/nextjs": "8.4.7",
-    "@storybook/react": "8.5.0",
-    "@storybook/test": "8.4.7",
+    "@chromatic-com/storybook": "3.2.4",
+    "@next/bundle-analyzer": "15.1.6",
+    "@next/eslint-plugin-next": "15.1.6",
+    "@playwright/test": "1.50.0",
+    "@storybook/addon-essentials": "8.5.2",
+    "@storybook/addon-interactions": "8.5.2",
+    "@storybook/addon-links": "8.5.2",
+    "@storybook/addon-onboarding": "8.5.2",
+    "@storybook/addon-viewport": "8.5.2",
+    "@storybook/blocks": "8.5.2",
+    "@storybook/nextjs": "8.5.2",
+    "@storybook/react": "8.5.2",
+    "@storybook/test": "8.5.2",
    "@types/color": "4.2.0",
-    "@types/node": "22.10.2",
+    "@types/node": "22.10.10",
    "@types/papaparse": "^5.3.15",
    "@types/pluralize": "^0.0.33",
    "@types/qrcode": "^1.5.5",
-    "@types/react": "19.0.2",
+    "@types/react": "19.0.8",
    "@types/react-dom": "19.0.3",
    "@types/react-table": "^7.7.20",
    "@types/spdx-correct": "^3.1.3",
-    "@types/swagger-ui-react": "^4.18.3",
+    "@types/swagger-ui-react": "^4.19.0",
    "@typescript-eslint/eslint-plugin": "7.14.1",
    "@typescript-eslint/parser": "7.14.1",
    "autoprefixer": "^10.4.19",
@@ -134,11 +134,11 @@
    "eslint-config-biome": "1.9.4",
    "eslint-plugin-react-compiler": "19.0.0-beta-df7b47d-20241124",
    "eslint-plugin-storybook": "^0.11.1",
-    "knip": "5.41.0",
+    "knip": "5.43.5",
    "next-sitemap": "^4.2.3",
-    "postcss": "8.4.49",
-    "storybook": "8.4.7",
+    "postcss": "8.5.1",
+    "storybook": "8.5.2",
    "tailwindcss": "3.4.17",
-    "typescript": "5.7.2"
+    "typescript": "5.7.3"
  }
 }
@@ -25,7 +25,7 @@ export type Team = {
  billingPlan: "pro" | "growth" | "free" | "starter";
  billingStatus: "validPayment" | (string & {}) | null;
  billingEmail: string | null;
-  growthTrialEligible: boolean | null;
+  growthTrialEligible: false;
  enabledScopes: EnabledTeamScope[];
 };

@@ -1,6 +1,5 @@
 "use client";

-import {} from "@/components/ui/alert";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
@@ -27,9 +27,10 @@ export function OnboardingChoosePlan(props: {
          billingPlan="starter"
          teamSlug={props.teamSlug}
          cta={{
-            title: "Get started for free",
+            title: "Get Started for free",
            tracking: {
              category: "account",
+              label: "starterPlan",
            },
          }}
          redirectPath={props.redirectPath}
@@ -40,15 +41,14 @@ export function OnboardingChoosePlan(props: {
          billingPlan="growth"
          teamSlug={props.teamSlug}
          cta={{
-            title: "Claim your 1-month free",
-            hint: "Your free trial will end after 30 days.",
+            title: "Get Started with Growth",
            tracking: {
              category: "account",
              label: "growthPlan",
            },
            variant: "default",
          }}
-          canTrialGrowth={props.canTrialGrowth}
+          canTrialGrowth={false}
          highlighted
          redirectPath={props.redirectPath}
          redirectToCheckout={props.redirectToCheckout}
@@ -1,6 +1,5 @@
 import { CopyTextButton } from "@/components/ui/CopyTextButton";
 import { Spinner } from "@/components/ui/Spinner/Spinner";
-import {} from "@/components/ui/accordion";
 import { Button } from "@/components/ui/button";
 import { CodeClient } from "@/components/ui/code/code.client";
 import type { Account as TWAccount } from "@3rdweb-sdk/react/hooks/useApi";
@@ -1,5 +1,8 @@
 import type { Range } from "components/analytics/date-range-selector";
 import { InAppWalletAnalytics } from "components/embedded-wallets/Analytics";
+import { notFound } from "next/navigation";
+import { getProject } from "../../../../../../@/api/projects";
+import { getAPIKeyForProjectId } from "../../../../../api/lib/getAPIKeys";

 export default async function Page(props: {
  params: Promise<{ team_slug: string; project_slug: string }>;
@@ -27,9 +30,19 @@ export default async function Page(props: {
    ? (searchParams.interval as "day" | "week")
    : "week";

+  const project = await getProject(params.team_slug, params.project_slug);
+  if (!project) {
+    notFound();
+  }
+
+  const apiKey = await getAPIKeyForProjectId(project.id);
+  if (!apiKey) {
+    notFound();
+  }
+
  return (
    <InAppWalletAnalytics
-      clientId={params.project_slug}
+      clientId={apiKey.key}
      interval={interval}
      range={range as Range}
    />
@@ -60,6 +60,16 @@ function Story() {
          payConfig: "/payConfig",
        }}
        onKeyUpdated={undefined}
+        rotateSecretKey={async () => {
+          await new Promise((resolve) => setTimeout(resolve, 1000));
+          return {
+            data: {
+              secret: new Array(86).fill("x").join(""),
+              secretHash: new Array(64).fill("x").join(""),
+              secretMasked: "123...4567",
+            },
+          };
+        }}
        showNebulaSettings={false}
      />

@@ -1,12 +1,21 @@
 "use client";

+import { apiServerProxy } from "@/actions/proxies";
 import { DangerSettingCard } from "@/components/blocks/DangerSettingCard";
 import { SettingsCard } from "@/components/blocks/SettingsCard";
 import { CopyTextButton } from "@/components/ui/CopyTextButton";
 import { DynamicHeight } from "@/components/ui/DynamicHeight";
+import { Spinner } from "@/components/ui/Spinner/Spinner";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
 import { Checkbox, CheckboxWithLabel } from "@/components/ui/checkbox";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
 import { Form } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
@@ -14,13 +23,14 @@ import { Switch } from "@/components/ui/switch";
 import { Textarea } from "@/components/ui/textarea";
 import { ToolTipLabel } from "@/components/ui/tooltip";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
+import { cn } from "@/lib/utils";
 import type { ApiKey, UpdateKeyInput } from "@3rdweb-sdk/react/hooks/useApi";
 import {
  useRevokeApiKey,
  useUpdateApiKey,
 } from "@3rdweb-sdk/react/hooks/useApi";
 import { zodResolver } from "@hookform/resolvers/zod";
-import type { UseMutationResult } from "@tanstack/react-query";
+import { type UseMutationResult, useMutation } from "@tanstack/react-query";
 import { SERVICES } from "@thirdweb-dev/service-utils";
 import {
  type ServiceName,
@@ -28,8 +38,13 @@ import {
 } from "@thirdweb-dev/service-utils";
 import { format } from "date-fns";
 import { useTrack } from "hooks/analytics/useTrack";
-import { ExternalLinkIcon } from "lucide-react";
+import {
+  CircleAlertIcon,
+  ExternalLinkIcon,
+  RefreshCcwIcon,
+} from "lucide-react";
 import Link from "next/link";
+import { useState } from "react";
 import { type UseFormReturn, useForm } from "react-hook-form";
 import { type FieldArrayWithId, useFieldArray } from "react-hook-form";
 import { toast } from "sonner";
@@ -47,11 +62,20 @@ type EditProjectUIPaths = {
  afterDeleteRedirectTo: string;
 };

+type RotateSecretKeyAPIReturnType = {
+  data: {
+    secret: string;
+    secretMasked: string;
+    secretHash: string;
+  };
+};
+
 export function ProjectGeneralSettingsPage(props: {
  apiKey: ApiKey;
  paths: EditProjectUIPaths;
  onKeyUpdated: (() => void) | undefined;
  showNebulaSettings: boolean;
+  projectId: string;
 }) {
  const updateMutation = useUpdateApiKey();
  const deleteMutation = useRevokeApiKey();
@@ -64,6 +88,24 @@ export function ProjectGeneralSettingsPage(props: {
      paths={props.paths}
      onKeyUpdated={props.onKeyUpdated}
      showNebulaSettings={props.showNebulaSettings}
+      rotateSecretKey={async () => {
+        const res = await apiServerProxy<RotateSecretKeyAPIReturnType>({
+          pathname: "/v2/keys/rotate-secret-key",
+          method: "POST",
+          body: JSON.stringify({
+            projectId: props.projectId,
+          }),
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+
+        if (!res.ok) {
+          throw new Error(res.error);
+        }
+
+        return res.data;
+      }}
    />
  );
 }
@@ -84,6 +126,7 @@ interface EditApiKeyProps {
  paths: EditProjectUIPaths;
  onKeyUpdated: (() => void) | undefined;
  showNebulaSettings: boolean;
+  rotateSecretKey: () => Promise<RotateSecretKeyAPIReturnType>;
 }

 type UpdateAPIForm = UseFormReturn<ProjectSettingsPageFormSchema>;
@@ -216,7 +259,10 @@ export const ProjectGeneralSettingsPageUI: React.FC<EditApiKeyProps> = (
            handleSubmit={handleSubmit}
          />

-          <APIKeyDetails apiKey={apiKey} />
+          <APIKeyDetails
+            apiKey={apiKey}
+            rotateSecretKey={props.rotateSecretKey}
+          />

          <AllowedDomainsSetting
            form={form}
@@ -609,10 +655,13 @@ function EnabledServicesSetting(props: {

 function APIKeyDetails({
  apiKey,
+  rotateSecretKey,
 }: {
+  rotateSecretKey: () => Promise<RotateSecretKeyAPIReturnType>;
  apiKey: ApiKey;
 }) {
  const { createdAt, updatedAt, lastAccessedAt } = apiKey;
+  const [secretKeyMasked, setSecretKeyMasked] = useState(apiKey.secretMasked);

  return (
    <div className="flex flex-col gap-6 rounded-lg border border-border bg-card px-4 py-6 lg:px-6">
@@ -632,7 +681,7 @@ function APIKeyDetails({
      </div>

      {/* NOTE: for very old api keys the secret might be `null`, if that's the case we skip it */}
-      {apiKey.secretMasked && (
+      {secretKeyMasked && (
        <div>
          <h3>Secret Key</h3>
          <p className="mb-2 text-muted-foreground text-sm">
@@ -641,8 +690,17 @@ function APIKeyDetails({
            the time of creation for the full secret key.
          </p>

-          <div className="max-w-[350px] rounded-lg border border-border bg-background px-4 py-3 font-mono text-sm">
-            {apiKey.secretMasked}
+          <div className="flex flex-col gap-3 lg:flex-row lg:items-center">
+            <div className="rounded-lg border border-border bg-background px-4 py-3 font-mono text-sm lg:w-[350px]">
+              {secretKeyMasked}
+            </div>
+
+            <RotateSecretKeyButton
+              rotateSecretKey={rotateSecretKey}
+              onSuccess={(data) => {
+                setSecretKeyMasked(data.data.secretMasked);
+              }}
+            />
          </div>
        </div>
      )}
@@ -726,3 +784,214 @@ function DeleteProject(props: {
    />
  );
 }
+
+function RotateSecretKeyButton(props: {
+  rotateSecretKey: () => Promise<RotateSecretKeyAPIReturnType>;
+  onSuccess: (data: RotateSecretKeyAPIReturnType) => void;
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [isModalCloseAllowed, setIsModalCloseAllowed] = useState(true);
+  return (
+    <Dialog
+      open={isOpen}
+      onOpenChange={(v) => {
+        if (!isModalCloseAllowed) {
+          return;
+        }
+        setIsOpen(v);
+      }}
+    >
+      <DialogTrigger asChild>
+        <Button
+          variant="outline"
+          className="h-auto gap-2 rounded-lg bg-background px-4 py-3"
+          onClick={() => setIsOpen(true)}
+        >
+          <RefreshCcwIcon className="size-4" />
+          Rotate Secret Key
+        </Button>
+      </DialogTrigger>
+
+      <DialogContent
+        className="overflow-hidden p-0"
+        dialogCloseClassName={cn(!isModalCloseAllowed && "hidden")}
+      >
+        <RotateSecretKeyModalContent
+          rotateSecretKey={props.rotateSecretKey}
+          closeModal={() => {
+            setIsOpen(false);
+            setIsModalCloseAllowed(true);
+          }}
+          disableModalClose={() => setIsModalCloseAllowed(false)}
+          onSuccess={props.onSuccess}
+        />
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+type RotateSecretKeyScreen =
+  | { id: "initial" }
+  | { id: "save-newkey"; secretKey: string };
+
+function RotateSecretKeyModalContent(props: {
+  rotateSecretKey: () => Promise<RotateSecretKeyAPIReturnType>;
+  closeModal: () => void;
+  disableModalClose: () => void;
+  onSuccess: (data: RotateSecretKeyAPIReturnType) => void;
+}) {
+  const [screen, setScreen] = useState<RotateSecretKeyScreen>({
+    id: "initial",
+  });
+
+  if (screen.id === "save-newkey") {
+    return (
+      <SaveNewKeyScreen
+        secretKey={screen.secretKey}
+        closeModal={props.closeModal}
+      />
+    );
+  }
+
+  if (screen.id === "initial") {
+    return (
+      <RotateSecretKeyInitialScreen
+        rotateSecretKey={props.rotateSecretKey}
+        onSuccess={(data) => {
+          props.disableModalClose();
+          props.onSuccess(data);
+          setScreen({ id: "save-newkey", secretKey: data.data.secret });
+        }}
+        closeModal={props.closeModal}
+      />
+    );
+  }
+
+  return null;
+}
+
+function RotateSecretKeyInitialScreen(props: {
+  rotateSecretKey: () => Promise<RotateSecretKeyAPIReturnType>;
+  onSuccess: (data: RotateSecretKeyAPIReturnType) => void;
+  closeModal: () => void;
+}) {
+  const [isConfirmed, setIsConfirmed] = useState(false);
+  const rotateKeyMutation = useMutation({
+    mutationFn: props.rotateSecretKey,
+    onSuccess: (data) => {
+      props.onSuccess(data);
+    },
+    onError: (err) => {
+      console.error(err);
+      toast.error("Failed to rotate secret key");
+    },
+  });
+  return (
+    <div>
+      <div className="flex flex-col p-6">
+        <DialogHeader>
+          <DialogTitle>Rotate Secret Key</DialogTitle>
+        </DialogHeader>
+
+        <div className="h-6" />
+
+        <Alert variant="destructive">
+          <CircleAlertIcon className="size-5" />
+          <AlertTitle>Current secret key will stop working</AlertTitle>
+          <AlertDescription>
+            Rotating the secret key will invalidate the current secret key and
+            generate a new one. This action is irreversible.
+          </AlertDescription>
+        </Alert>
+
+        <div className="h-4" />
+
+        <CheckboxWithLabel className="text-foreground">
+          <Checkbox
+            checked={isConfirmed}
+            onCheckedChange={(v) => setIsConfirmed(!!v)}
+          />
+          I understand the consequences of rotating the secret key
+        </CheckboxWithLabel>
+      </div>
+
+      <div className="flex justify-end gap-3 border-t bg-card p-6">
+        <Button variant="outline" onClick={props.closeModal}>
+          Close
+        </Button>
+        <Button
+          variant="destructive"
+          className="gap-2"
+          disabled={!isConfirmed || rotateKeyMutation.isPending}
+          onClick={() => {
+            rotateKeyMutation.mutate();
+          }}
+        >
+          {rotateKeyMutation.isPending ? (
+            <Spinner className="size-4" />
+          ) : (
+            <RefreshCcwIcon className="size-4" />
+          )}
+          Rotate Secret Key
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+function SaveNewKeyScreen(props: {
+  secretKey: string;
+  closeModal: () => void;
+}) {
+  const [isSecretStored, setIsSecretStored] = useState(false);
+  return (
+    <div className="flex min-w-0 flex-col">
+      <div className="flex flex-col p-6">
+        <DialogHeader>
+          <DialogTitle>Save New Secret Key</DialogTitle>
+        </DialogHeader>
+
+        <div className="h-6" />
+
+        <CopyTextButton
+          textToCopy={props.secretKey}
+          className="!h-auto w-full justify-between bg-card px-3 py-3 font-mono"
+          textToShow={props.secretKey}
+          copyIconPosition="right"
+          tooltip="Copy Secret Key"
+        />
+        <div className="h-4" />
+
+        <Alert variant="destructive">
+          <AlertTitle>Do not share or expose your secret key</AlertTitle>
+          <AlertDescription>
+            <div className="mb-5">
+              Secret keys cannot be recovered. If you lose your secret key, you
+              will need to rotate the secret key or create a new Project.
+            </div>
+            <CheckboxWithLabel className="text-foreground">
+              <Checkbox
+                checked={isSecretStored}
+                onCheckedChange={(v) => {
+                  setIsSecretStored(!!v);
+                }}
+              />
+              I confirm that I've securely stored my secret key
+            </CheckboxWithLabel>
+          </AlertDescription>
+        </Alert>
+      </div>
+
+      <div className="flex justify-end gap-3 border-t bg-card p-6">
+        <Button
+          variant="outline"
+          className="gap-2"
+          disabled={!isSecretStored}
+          onClick={props.closeModal}
+        >
+          Close
+        </Button>
+      </div>
+    </div>
+  );
+}
@@ -9,9 +9,10 @@ export function ProjectGeneralSettingsPageForTeams(props: {
  team: Team;
  project_slug: string;
  apiKey: ApiKey;
+  projectId: string;
 }) {
  const router = useDashboardRouter();
-  const { team, project_slug, apiKey } = props;
+  const { team, project_slug, apiKey, projectId } = props;
  const projectLayout = `/team/${team.slug}/${project_slug}`;

  // TODO - add a Project Image form field on this page
@@ -19,6 +20,7 @@ export function ProjectGeneralSettingsPageForTeams(props: {
  return (
    <ProjectGeneralSettingsPage
      apiKey={apiKey}
+      projectId={projectId}
      paths={{
        aaConfig: `${projectLayout}/connect/account-abstraction/settings`,
        inAppConfig: `${projectLayout}/connect/in-app-wallets/settings`,
@@ -31,6 +31,7 @@ export default async function Page(props: {
    <ProjectGeneralSettingsPageForTeams
      apiKey={apiKey}
      project_slug={project_slug}
+      projectId={project.id}
      team={team}
    />
  );
@@ -20,7 +20,10 @@ export async function InAppWalletAnalytics({
    from: range.from,
    to: range.to,
    period: interval,
-  }).catch(() => null);
+  }).catch((error) => {
+    console.error(error);
+    return [];
+  });

  return (
    <div>
@@ -57,20 +57,18 @@ export const BillingPricing: React.FC<BillingPricingProps> = ({
  }, [validTeamPlan]);

  const growthCardCta: CtaLink | undefined = useMemo(() => {
-    const trialTitle = "Claim your 1-month free";
-
    switch (validTeamPlan) {
      // free > growth
      case "free": {
        return {
-          label: team.growthTrialEligible ? trialTitle : "Get started",
+          label: "Get started",
        };
      }

      // starter > growth
      case "starter": {
        return {
-          label: team.growthTrialEligible ? trialTitle : "Upgrade",
+          label: "Upgrade",
        };
      }

@@ -87,7 +85,7 @@ export const BillingPricing: React.FC<BillingPricingProps> = ({
        };
      }
    }
-  }, [team, validTeamPlan]);
+  }, [validTeamPlan]);

  const proCta: CtaLink | undefined = useMemo(() => {
    // pro > pro
@@ -138,20 +136,16 @@ export const BillingPricing: React.FC<BillingPricingProps> = ({
                title: growthCardCta.label,
                tracking: {
                  category: "account",
-                  label: team.growthTrialEligible
-                    ? "claimGrowthTrial"
-                    : "growthPlan",
+                  label: "growthPlan",
                },
                variant: "default",
-                hint: team.growthTrialEligible
-                  ? "Your free trial will end after 30 days."
-                  : undefined,
+                hint: undefined,
              }
            : undefined
        }
-        canTrialGrowth={team.growthTrialEligible || false}
+        canTrialGrowth={false}
        // upsell growth plan if user is on free plan
-        highlighted={validTeamPlan === "free"}
+        highlighted={validTeamPlan === "free" || validTeamPlan === "starter"}
        teamSlug={team.slug}
        redirectToCheckout={redirectToCheckout}
      />
@@ -1,10 +1,8 @@
 import { redirectToBillingPortal, redirectToCheckout } from "@/actions/billing";
 import type { Team } from "@/api/team";
 import type { TeamSubscription } from "@/api/team-subscription";
-import {} from "@/components/ui/alert";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
-import {} from "@chakra-ui/react";
 import { AlertCircleIcon } from "lucide-react";
 import Link from "next/link";
 import { PlanInfoCard } from "../../../../app/team/[team_slug]/(team)/~/settings/billing/components/PlanInfoCard";
@@ -486,7 +486,7 @@ function APIKeyDetails(props: {
          <AlertDescription>
            <div className="mb-5">
              Secret keys cannot be recovered. If you lose your secret key, you
-              will need to create a project
+              will need to rotate the secret key or create a new Project.
            </div>
            <CheckboxWithLabel className="text-foreground">
              <Checkbox
@@ -42,7 +42,7 @@ export function teamStub(id: string, billingPlan: Team["billingPlan"]): Team {
    createdAt: new Date().toISOString(),
    updatedAt: new Date().toISOString(),
    billingEmail: "[email protected]",
-    growthTrialEligible: true,
+    growthTrialEligible: false,
    enabledScopes: [
      "pay",
      "storage",
@@ -14,27 +14,27 @@
  },
  "dependencies": {
    "@abstract-foundation/agw-client": "^1.3.0",
-    "@abstract-foundation/agw-react": "^1.4.1",
+    "@abstract-foundation/agw-react": "^1.4.2",
    "@radix-ui/react-accordion": "^1.2.2",
    "@radix-ui/react-checkbox": "^1.1.3",
-    "@radix-ui/react-dialog": "1.1.4",
-    "@radix-ui/react-dropdown-menu": "^2.1.3",
+    "@radix-ui/react-dialog": "1.1.5",
+    "@radix-ui/react-dropdown-menu": "^2.1.5",
    "@radix-ui/react-label": "^2.1.1",
-    "@radix-ui/react-popover": "^1.1.3",
+    "@radix-ui/react-popover": "^1.1.5",
    "@radix-ui/react-radio-group": "^1.2.2",
    "@radix-ui/react-scroll-area": "^1.2.2",
-    "@radix-ui/react-select": "^2.1.3",
+    "@radix-ui/react-select": "^2.1.5",
    "@radix-ui/react-separator": "^1.1.1",
    "@radix-ui/react-slot": "^1.1.1",
    "@radix-ui/react-switch": "^1.1.2",
    "@radix-ui/react-tabs": "^1.1.2",
-    "@radix-ui/react-tooltip": "1.1.5",
-    "@tanstack/react-query": "5.62.16",
-    "@thirdweb-dev/engine": "^0.0.17",
+    "@radix-ui/react-tooltip": "1.1.7",
+    "@tanstack/react-query": "5.65.0",
+    "@thirdweb-dev/engine": "^0.0.18",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
-    "lucide-react": "0.468.0",
-    "next": "15.1.4",
+    "lucide-react": "0.474.0",
+    "next": "15.1.6",
    "next-themes": "^0.4.4",
    "prettier": "3.3.3",
    "react": "19.0.0",
@@ -48,15 +48,15 @@
    "use-debounce": "^10.0.4"
  },
  "devDependencies": {
-    "@types/node": "22.10.2",
-    "@types/react": "19.0.2",
+    "@types/node": "22.10.10",
+    "@types/react": "19.0.8",
    "@types/react-dom": "19.0.3",
    "eslint": "8.57.0",
-    "eslint-config-next": "15.1.4",
+    "eslint-config-next": "15.1.6",
    "eslint-plugin-react-compiler": "19.0.0-beta-df7b47d-20241124",
-    "postcss": "8.4.49",
+    "postcss": "8.5.1",
    "tailwindcss": "3.4.17",
    "tailwindcss-animate": "^1.0.7",
-    "typescript": "5.7.2"
+    "typescript": "5.7.3"
  }
 }
@@ -21,21 +21,21 @@
    "@dirtycajunrice/klee": "^1.0.6",
    "@mdx-js/loader": "^2.3.0",
    "@mdx-js/react": "^2.3.0",
-    "@next/mdx": "15.1.4",
-    "@radix-ui/react-dialog": "1.1.4",
-    "@radix-ui/react-dropdown-menu": "^2.1.3",
-    "@radix-ui/react-select": "^2.1.3",
+    "@next/mdx": "15.1.6",
+    "@radix-ui/react-dialog": "1.1.5",
+    "@radix-ui/react-dropdown-menu": "^2.1.5",
+    "@radix-ui/react-select": "^2.1.5",
    "@radix-ui/react-slot": "^1.1.1",
    "@radix-ui/react-tabs": "^1.1.2",
-    "@tanstack/react-query": "5.62.16",
+    "@tanstack/react-query": "5.65.0",
    "@tryghost/content-api": "^1.11.21",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "date-fns": "4.1.0",
    "flexsearch": "^0.7.43",
    "github-slugger": "^2.0.0",
-    "lucide-react": "0.468.0",
-    "next": "15.1.4",
+    "lucide-react": "0.474.0",
+    "next": "15.1.6",
    "nextjs-toploader": "^1.6.12",
    "node-html-parser": "^6.1.13",
    "posthog-js": "1.67.1",
@@ -53,11 +53,11 @@
    "typedoc-better-json": "0.9.4"
  },
  "devDependencies": {
-    "@next/eslint-plugin-next": "15.1.4",
+    "@next/eslint-plugin-next": "15.1.6",
    "@types/flexsearch": "^0.7.6",
    "@types/mdx": "^2.0.13",
-    "@types/node": "22.10.2",
-    "@types/react": "19.0.2",
+    "@types/node": "22.10.10",
+    "@types/react": "19.0.8",
    "@types/react-dom": "19.0.3",
    "@types/react-html-parser": "^2.0.6",
    "@types/tryghost__content-api": "^1.3.16",
@@ -68,12 +68,12 @@
    "eslint-config-biome": "1.9.4",
    "eslint-plugin-mdx": "^3.1.5",
    "eslint-plugin-svg-jsx": "^1.2.4",
-    "eslint-plugin-tailwindcss": "^3.17.5",
-    "knip": "5.41.0",
+    "eslint-plugin-tailwindcss": "^3.18.0",
+    "knip": "5.43.5",
    "next-sitemap": "^4.2.3",
-    "postcss": "8.4.49",
+    "postcss": "8.5.1",
    "tailwindcss": "3.4.17",
    "tsx": "4.19.2",
-    "typescript": "5.7.2"
+    "typescript": "5.7.3"
  }
 }
@@ -60,13 +60,12 @@ npm install thirdweb
 Setup environmental variables. 

 <Callout variant="warning" title="Storing Secret Keys">
-  Ensure you keep your secret key and private key safe and do not expose it in your codebase. We recommend using a 
+  Ensure you keep your secret key safe and do not expose it in your codebase. We recommend using a 
  secret key manager such as [AWS Secret Manager](https://aws.amazon.com/secrets-manager/) or [Google Secret Manager](https://cloud.google.com/secret-manager).
 </Callout>

 ```jsx
 THIRDWEB_SECRET_KEY=your_thirdweb_secret_key
-EOA_PRIVATE_KEY=your_wallet_private_key
 ```
 </Step>

@@ -88,15 +87,15 @@ import {
 This function processes the API's response and executes blockchain transactions.

 ```jsx
+import { generateAccount } from "thirdweb/wallets";
+
 async function handleNebulaResponse(response) {
  const client = createThirdwebClient({
    secretKey: process.env.THIRDWEB_SECRET_KEY,
  });

-  const account = privateKeyToAccount({
-    client,
-    privateKey: process.env.EOA_PRIVATE_KEY,
-  });
+  // You can use any wallet- see https://portal.thirdweb.com/typescript/v5/supported-wallets
+  const account = await generateAccount({ client });

  if (response.actions && response.actions.length > 0) {
    const action = response.actions[0];
@@ -11,23 +11,22 @@
  },
  "dependencies": {
    "@hookform/resolvers": "^3.9.1",
-    "@noble/curves": "1.7.0",
-    "@radix-ui/react-dialog": "1.1.4",
+    "@radix-ui/react-dialog": "1.1.5",
    "@radix-ui/react-label": "^2.1.1",
-    "@radix-ui/react-popover": "^1.1.3",
+    "@radix-ui/react-popover": "^1.1.5",
    "@radix-ui/react-slot": "^1.1.1",
-    "@tanstack/react-query": "5.62.16",
+    "@tanstack/react-query": "5.65.0",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "^1.0.4",
-    "lucide-react": "0.468.0",
-    "next": "15.1.4",
+    "lucide-react": "0.474.0",
+    "next": "15.1.6",
    "next-themes": "^0.4.4",
    "react": "19.0.0",
    "react-dom": "19.0.0",
    "react-hook-form": "7.54.2",
    "server-only": "^0.0.1",
-    "sonner": "^1.7.1",
+    "sonner": "^1.7.2",
    "tailwind-merge": "^2.6.0",
    "tailwindcss-animate": "^1.0.7",
    "thirdweb": "workspace:*",
@@ -35,19 +34,19 @@
    "zod": "3.24.1"
  },
  "devDependencies": {
-    "@next/eslint-plugin-next": "15.1.4",
-    "@types/node": "22.10.2",
-    "@types/react": "19.0.2",
+    "@next/eslint-plugin-next": "15.1.6",
+    "@types/node": "22.10.10",
+    "@types/react": "19.0.8",
    "@types/react-dom": "19.0.3",
    "@typescript-eslint/eslint-plugin": "7.14.1",
    "@typescript-eslint/parser": "7.14.1",
    "eslint": "8.57.0",
    "eslint-config-biome": "1.9.4",
    "eslint-plugin-react-compiler": "19.0.0-beta-df7b47d-20241124",
-    "knip": "5.41.0",
-    "postcss": "8.4.49",
+    "knip": "5.43.5",
+    "postcss": "8.5.1",
    "postcss-load-config": "^6.0.1",
    "tailwindcss": "3.4.17",
-    "typescript": "5.7.2"
+    "typescript": "5.7.3"
  }
 }
@@ -1,15 +1,13 @@
 "use server";
 import "server-only";
 import { redirect } from "@/lib/redirect";
-import { secp256k1 } from "@noble/curves/secp256k1";
 import { cookies } from "next/headers";
-import { toHex } from "thirdweb";
 import {
  type GenerateLoginPayloadParams,
  type VerifyLoginPayloadParams,
  createAuth,
 } from "thirdweb/auth";
-import { privateKeyToAccount } from "thirdweb/wallets";
+import { privateKeyToAccount, randomPrivateKey } from "thirdweb/wallets";
 import { client } from "./client";

 const privateKey = process.env.THIRDWEB_ADMIN_PRIVATE_KEY;
@@ -20,7 +18,7 @@ const thirdwebAuth = createAuth({
  // Fun little hack to make vercel happy at build time
  adminAccount: privateKeyToAccount({
    client,
-    privateKey: privateKey || toHex(secp256k1.utils.randomPrivateKey()),
+    privateKey: privateKey || randomPrivateKey(),
  }),
 });

@@ -41,11 +41,11 @@
  "devDependencies": {
    "@biomejs/biome": "1.9.4",
    "@changesets/changelog-github": "0.5.0",
-    "@changesets/cli": "2.27.10",
+    "@changesets/cli": "2.27.12",
    "@manypkg/get-packages": "2.2.2",
-    "@types/node": "22.10.2",
-    "turbo": "2.3.3",
-    "typescript": "5.7.2"
+    "@types/node": "22.10.10",
+    "turbo": "2.3.4",
+    "typescript": "5.7.3"
  },
  "pnpm": {
    "overrides": {
@@ -1,5 +1,17 @@
 # @thirdweb-dev/service-utils

+## 0.7.3
+
+### Patch Changes
+
+- [#6084](https://github.com/thirdweb-dev/js/pull/6084) [`b5e327e`](https://github.com/thirdweb-dev/js/commit/b5e327e5ec745ce1beb9a79404fa5b11d0c5588e) Thanks [@jnsdls](https://github.com/jnsdls)! - add `billingPlanVersion` to `TeamResponse`
+
+## 0.7.2
+
+### Patch Changes
+
+- [#6079](https://github.com/thirdweb-dev/js/pull/6079) [`1616b7f`](https://github.com/thirdweb-dev/js/commit/1616b7f6198d43fc48a1269b1cca93958cbf7dba) Thanks [@jnsdls](https://github.com/jnsdls)! - updated dependencies
+
 ## 0.7.1

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@thirdweb-dev/service-utils",
-  "version": "0.7.1",
+  "version": "0.7.3",
  "type": "module",
  "main": "dist/cjs/index.js",
  "module": "dist/esm/index.js",
@@ -50,10 +50,10 @@
    "zod": "3.24.1"
  },
  "devDependencies": {
-    "@cloudflare/workers-types": "4.20241216.0",
-    "@types/node": "22.10.2",
-    "typescript": "5.7.2",
-    "vitest": "2.1.8"
+    "@cloudflare/workers-types": "4.20250124.3",
+    "@types/node": "22.10.10",
+    "typescript": "5.7.3",
+    "vitest": "3.0.4"
  },
  "scripts": {
    "format": "biome format ./src --write",
@@ -45,11 +45,12 @@ export type TeamResponse = {
  slug: string;
  image: string | null;
  billingPlan: "free" | "starter" | "growth" | "pro";
+  billingPlanVersion: number;
  createdAt: Date;
  updatedAt: Date | null;
  billingEmail: string | null;
  billingStatus: "noPayment" | "validPayment" | "invalidPayment" | null;
-  growthTrialEligible: boolean | null;
+  growthTrialEligible: false;
  enabledScopes: ServiceName[];
 };

@@ -42,6 +42,7 @@ export const validTeamResponse: TeamResponse = {
  createdAt: new Date("2024-06-01"),
  updatedAt: new Date("2024-06-01"),
  billingPlan: "free",
+  billingPlanVersion: 1,
  billingEmail: "[email protected]",
  billingStatus: "noPayment",
  growthTrialEligible: false,
@@ -1,5 +1,72 @@
 # thirdweb

+## 5.87.0
+
+### Minor Changes
+
+- [#6082](https://github.com/thirdweb-dev/js/pull/6082) [`4550bb2`](https://github.com/thirdweb-dev/js/commit/4550bb26632b88964a298835575af152a355bccd) Thanks [@joaquim-verges](https://github.com/joaquim-verges)! - Support Account and Wallet headless components in react native
+
+  You can now use the Account and Wallet headless components in react native, this lets you build your own UI, styling it however you want, but letting the components handle the logic.
+
+  Example Account components usage:
+
+  ```tsx
+  <AccountProvider address={account.address} client={client}>
+    /* avatar */
+    <AccountAvatar
+      loadingComponent={
+        <AccountBlobbie size={92} style={{ borderRadius: 100 }} />
+      }
+      fallbackComponent={
+        <AccountBlobbie size={92} style={{ borderRadius: 100 }} />
+      }
+      style={{
+        width: 92,
+        height: 92,
+        borderRadius: 100,
+      }}
+    />
+    /* address */
+    <AccountAddress
+      style={{ fontSize: 16, color: Colors.secondary }}
+      formatFn={shortenAddress}
+    />
+    /* balance */
+    <AccountBalance
+      showBalanceInFiat={"USD"}
+      chain={chain}
+      loadingComponent={
+        <ActivityIndicator size="large" color={Colors.accent} />
+      }
+      fallbackComponent={
+        <Text className="text-primary">Failed to load balance</Text>
+      }
+      style={{
+        color: "white",
+        fontSize: 48,
+        fontWeight: "bold",
+      }}
+    />
+  </AccountProvider>
+  ```
+
+  Example Wallet components usage:
+
+  ```tsx
+  <WalletProvider id={"io.metamask"}>
+    <WalletIcon width={32} height={32} />
+    <WalletName style={{ fontSize: 16, color: Colors.primary }} />
+  </WalletProvider>
+  ```
+
+### Patch Changes
+
+- [#6079](https://github.com/thirdweb-dev/js/pull/6079) [`1616b7f`](https://github.com/thirdweb-dev/js/commit/1616b7f6198d43fc48a1269b1cca93958cbf7dba) Thanks [@jnsdls](https://github.com/jnsdls)! - export `randomPrivateKey` from `thirdweb/wallets`
+
+- [#6076](https://github.com/thirdweb-dev/js/pull/6076) [`1401f8d`](https://github.com/thirdweb-dev/js/commit/1401f8d0393bbea149e9e09ba686416fc0a7b4f3) Thanks [@joaquim-verges](https://github.com/joaquim-verges)! - Fix autoconnection of inapp wallets in react native
+
+- [#6079](https://github.com/thirdweb-dev/js/pull/6079) [`1616b7f`](https://github.com/thirdweb-dev/js/commit/1616b7f6198d43fc48a1269b1cca93958cbf7dba) Thanks [@jnsdls](https://github.com/jnsdls)! - updated dependencies
+
 ## 5.86.6

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "thirdweb",
-  "version": "5.86.6",
+  "version": "5.87.0",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/thirdweb-dev/js.git#main"
@@ -211,22 +211,22 @@
    "@emotion/react": "11.14.0",
    "@emotion/styled": "11.14.0",
    "@google/model-viewer": "2.1.1",
-    "@noble/curves": "1.7.0",
-    "@noble/hashes": "1.6.1",
+    "@noble/curves": "1.8.1",
+    "@noble/hashes": "1.7.1",
    "@passwordless-id/webauthn": "^2.1.2",
-    "@radix-ui/react-dialog": "1.1.4",
+    "@radix-ui/react-dialog": "1.1.5",
    "@radix-ui/react-focus-scope": "1.1.1",
    "@radix-ui/react-icons": "1.3.2",
-    "@radix-ui/react-tooltip": "1.1.5",
-    "@tanstack/react-query": "5.62.16",
-    "@walletconnect/ethereum-provider": "2.17.3",
-    "@walletconnect/sign-client": "2.17.3",
-    "abitype": "1.0.7",
+    "@radix-ui/react-tooltip": "1.1.7",
+    "@tanstack/react-query": "5.65.0",
+    "@walletconnect/ethereum-provider": "2.17.5",
+    "@walletconnect/sign-client": "2.17.5",
+    "abitype": "1.0.8",
    "cross-spawn": "7.0.6",
    "fuse.js": "7.0.0",
    "input-otp": "^1.4.1",
    "mipd": "0.0.7",
-    "ox": "0.4.2",
+    "ox": "0.6.9",
    "uqr": "0.1.2",
    "viem": "2.22.15"
  },
@@ -334,36 +334,36 @@
    "@aws-sdk/client-lambda": "3.592.0",
    "@aws-sdk/credential-providers": "3.592.0",
    "@biomejs/biome": "1.9.4",
-    "@chromatic-com/storybook": "3.2.2",
+    "@chromatic-com/storybook": "3.2.4",
    "@codspeed/vitest-plugin": "4.0.0",
    "@coinbase/wallet-mobile-sdk": "1.1.2",
    "@mobile-wallet-protocol/client": "0.1.2",
    "@react-native-async-storage/async-storage": "2.1.0",
    "@size-limit/preset-big-lib": "11.1.6",
-    "@storybook/addon-essentials": "8.4.7",
-    "@storybook/addon-interactions": "8.4.7",
-    "@storybook/addon-links": "8.4.7",
-    "@storybook/addon-onboarding": "8.4.7",
-    "@storybook/react": "8.5.0",
-    "@storybook/react-vite": "8.4.7",
-    "@storybook/test": "8.4.7",
+    "@storybook/addon-essentials": "8.5.2",
+    "@storybook/addon-interactions": "8.5.2",
+    "@storybook/addon-links": "8.5.2",
+    "@storybook/addon-onboarding": "8.5.2",
+    "@storybook/react": "8.5.2",
+    "@storybook/react-vite": "8.5.2",
+    "@storybook/test": "8.5.2",
    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.1.0",
-    "@testing-library/user-event": "^14.5.2",
+    "@testing-library/react": "^16.2.0",
+    "@testing-library/user-event": "^14.6.1",
    "@types/cross-spawn": "^6.0.6",
-    "@types/react": "19.0.2",
+    "@types/react": "19.0.8",
    "@viem/anvil": "0.0.10",
    "@vitejs/plugin-react": "^4.3.4",
-    "@vitest/coverage-v8": "2.1.8",
-    "@vitest/ui": "2.1.8",
+    "@vitest/coverage-v8": "3.0.4",
+    "@vitest/ui": "3.0.4",
    "dotenv-mono": "^1.3.14",
    "ethers5": "npm:ethers@5",
    "ethers6": "npm:ethers@6",
    "expo-linking": "7.0.3",
    "expo-web-browser": "14.0.1",
-    "happy-dom": "15.11.7",
-    "knip": "5.41.0",
-    "msw": "2.6.9",
+    "happy-dom": "16.7.3",
+    "knip": "5.43.5",
+    "msw": "2.7.0",
    "prettier": "3.3.3",
    "react": "19.0.0",
    "react-dom": "19.0.0",
@@ -375,11 +375,11 @@
    "rimraf": "6.0.1",
    "sharp": "^0.33.5",
    "size-limit": "11.1.6",
-    "storybook": "8.4.7",
-    "typedoc": "0.27.5",
+    "storybook": "8.5.2",
+    "typedoc": "0.27.6",
    "typedoc-better-json": "0.9.4",
-    "typescript": "5.7.2",
+    "typescript": "5.7.3",
    "vite": "6.0.11",
-    "vitest": "2.1.8"
+    "vitest": "3.0.4"
  }
 }
@@ -114,3 +114,50 @@ export type {
  FarcasterProfile,
  LensProfile,
 } from "../social/types.js";
+
+/**
+ * Account
+ */
+export {
+  Blobbie,
+  AccountBlobbie,
+  type BlobbieProps,
+} from "../react/native/ui/prebuilt/Account/blobbie.js";
+export {
+  AccountProvider,
+  type AccountProviderProps,
+} from "../react/core/account/provider.js";
+export {
+  AccountBalance,
+  type AccountBalanceProps,
+} from "../react/native/ui/prebuilt/Account/balance.js";
+export {
+  AccountAddress,
+  type AccountAddressProps,
+} from "../react/native/ui/prebuilt/Account/address.js";
+export {
+  AccountName,
+  type AccountNameProps,
+} from "../react/native/ui/prebuilt/Account/name.js";
+export {
+  AccountAvatar,
+  type AccountAvatarProps,
+} from "../react/native/ui/prebuilt/Account/avatar.js";
+
+/**
+ * Wallet
+ */
+export {
+  WalletProvider,
+  type WalletProviderProps,
+} from "../react/core/wallet/provider.js";
+export {
+  WalletIcon,
+  SocialIcon,
+  type WalletIconProps,
+  type SocialIconProps,
+} from "../react/native/ui/prebuilt/Wallet/icon.js";
+export {
+  WalletName,
+  type WalletNameProps,
+} from "../react/native/ui/prebuilt/Wallet/name.js";
@@ -223,8 +223,8 @@ export {
 export {
  AccountBalance,
  type AccountBalanceProps,
-  type AccountBalanceInfo,
 } from "../react/web/ui/prebuilt/Account/balance.js";
+export type { AccountBalanceInfo } from "../react/core/utils/account.js";
 export {
  AccountName,
  type AccountNameProps,
@@ -233,7 +233,7 @@ export { AccountBlobbie } from "../react/web/ui/prebuilt/Account/blobbie.js";
 export {
  AccountProvider,
  type AccountProviderProps,
-} from "../react/web/ui/prebuilt/Account/provider.js";
+} from "../react/core/account/provider.js";
 export {
  AccountAvatar,
  type AccountAvatarProps,
@@ -278,9 +278,11 @@ export { getLastAuthProvider } from "../react/web/utils/storage.js";
 export {
  WalletProvider,
  type WalletProviderProps,
-} from "../react/web/ui/prebuilt/Wallet/provider.js";
+} from "../react/core/wallet/provider.js";
 export {
  WalletIcon,
+  SocialIcon,
+  type SocialIconProps,
  type WalletIconProps,
 } from "../react/web/ui/prebuilt/Wallet/icon.js";
 export {
@@ -47,6 +47,8 @@ export {
   */
  type PrivateKeyToAccountOptions as PrivateKeyAccountOptions,
 } from "../wallets/private-key.js";
+// generate a random private key
+export { randomPrivateKey } from "ox/Secp256k1";

 export type {
  WalletId,
@@ -1,7 +1,7 @@
 import { describe, expect, it } from "vitest";
 import { render, screen } from "~test/react-render.js";
 import { TEST_CLIENT } from "~test/test-clients.js";
-import { AccountAddress } from "./address.js";
+import { AccountAddress } from "../../web/ui/prebuilt/Account/address.js";
 import { AccountProvider } from "./provider.js";

 describe.runIf(process.env.TW_SECRET_KEY)("AccountProvider component", () => {
@@ -1,10 +1,9 @@
 "use client";

-import type { Address } from "abitype";
 import type React from "react";
 import { createContext, useContext } from "react";
-import type { ThirdwebClient } from "../../../../../client/client.js";
-
+import type { ThirdwebClient } from "../../../client/client.js";
+import { isAddress } from "../../../utils/address.js";
 /**
 * Props for the <AccountProvider /> component
 * @component
@@ -14,7 +13,7 @@ export type AccountProviderProps = {
  /**
   * The user's wallet address
   */
-  address: Address;
+  address: string;
  /**
   * thirdweb Client
   */
@@ -35,7 +34,7 @@ const AccountProviderContext = /* @__PURE__ */ createContext<
 * ```tsx
 * import { AccountProvider, AccountAvatar, AccountName, AccountAddress  } from "thirdweb/react";
 *
- * <AccountProvider>
+ * <AccountProvider address="0x..." client={client}>
 *   <AccountAvatar />
 *   <AccountName />
 *   <AccountAddress />
@@ -54,6 +53,9 @@ export function AccountProvider(
      "AccountProvider: No address passed. Ensure an address is always provided to the AccountProvider",
    );
  }
+  if (!isAddress(props.address)) {
+    throw new Error(`AccountProvider: Invalid address: ${props.address}`);
+  }
  return (
    <AccountProviderContext.Provider value={props}>
      {props.children}
@@ -0,0 +1,146 @@
+import type { Chain } from "../../../chains/types.js";
+import type { ThirdwebClient } from "../../../client/client.js";
+import { NATIVE_TOKEN_ADDRESS } from "../../../constants/addresses.js";
+import { convertCryptoToFiat } from "../../../pay/convert/cryptoToFiat.js";
+import type { SupportedFiatCurrency } from "../../../pay/convert/type.js";
+import { type Address, isAddress } from "../../../utils/address.js";
+import { formatNumber } from "../../../utils/formatNumber.js";
+import { shortenLargeNumber } from "../../../utils/shortenLargeNumber.js";
+import { getWalletBalance } from "../../../wallets/utils/getWalletBalance.js";
+
+export const COLOR_OPTIONS = [
+  ["#fca5a5", "#b91c1c"],
+  ["#fdba74", "#c2410c"],
+  ["#fcd34d", "#b45309"],
+  ["#fde047", "#a16207"],
+  ["#a3e635", "#4d7c0f"],
+  ["#86efac", "#15803d"],
+  ["#67e8f9", "#0e7490"],
+  ["#7dd3fc", "#0369a1"],
+  ["#93c5fd", "#1d4ed8"],
+  ["#a5b4fc", "#4338ca"],
+  ["#c4b5fd", "#6d28d9"],
+  ["#d8b4fe", "#7e22ce"],
+  ["#f0abfc", "#a21caf"],
+  ["#f9a8d4", "#be185d"],
+  ["#fda4af", "#be123c"],
+];
+
+/**
+ * @component
+ * @wallet
+ */
+export type AccountBalanceInfo = {
+  /**
+   * Represents either token balance or fiat balance.
+   */
+  balance: number;
+  /**
+   * Represents either token symbol or fiat symbol
+   */
+  symbol: string;
+};
+
+/**
+ * @internal Exported for tests
+ */
+export async function loadAccountBalance(props: {
+  chain?: Chain;
+  client: ThirdwebClient;
+  address: Address;
+  tokenAddress?: Address;
+  showBalanceInFiat?: SupportedFiatCurrency;
+}): Promise<AccountBalanceInfo> {
+  const { chain, client, address, tokenAddress, showBalanceInFiat } = props;
+  if (!chain) {
+    throw new Error("chain is required");
+  }
+
+  if (
+    tokenAddress &&
+    tokenAddress?.toLowerCase() === NATIVE_TOKEN_ADDRESS.toLowerCase()
+  ) {
+    throw new Error(`Invalid tokenAddress - cannot be ${NATIVE_TOKEN_ADDRESS}`);
+  }
+
+  if (!isAddress(address)) {
+    throw new Error("Invalid wallet address. Expected an EVM address");
+  }
+
+  if (tokenAddress && !isAddress(tokenAddress)) {
+    throw new Error("Invalid tokenAddress. Expected an EVM contract address");
+  }
+
+  const tokenBalanceData = await getWalletBalance({
+    chain,
+    client,
+    address,
+    tokenAddress,
+  }).catch(() => undefined);
+
+  if (!tokenBalanceData) {
+    throw new Error(
+      `Failed to retrieve ${tokenAddress ? `token: ${tokenAddress}` : "native token"} balance for address: ${address} on chainId:${chain.id}`,
+    );
+  }
+
+  if (showBalanceInFiat) {
+    const fiatData = await convertCryptoToFiat({
+      fromAmount: Number(tokenBalanceData.displayValue),
+      fromTokenAddress: tokenAddress || NATIVE_TOKEN_ADDRESS,
+      to: showBalanceInFiat,
+      chain,
+      client,
+    }).catch(() => undefined);
+
+    if (fiatData === undefined) {
+      throw new Error(
+        `Failed to resolve fiat value for ${tokenAddress ? `token: ${tokenAddress}` : "native token"} on chainId: ${chain.id}`,
+      );
+    }
+    const result = {
+      balance: fiatData?.result,
+      symbol: getFiatSymbol(showBalanceInFiat),
+    };
+
+    return result;
+  }
+
+  return {
+    balance: Number(tokenBalanceData.displayValue),
+    symbol: tokenBalanceData.symbol,
+  };
+}
+
+function getFiatSymbol(showBalanceInFiat: SupportedFiatCurrency) {
+  switch (showBalanceInFiat) {
+    case "USD":
+      return "$";
+  }
+}
+
+/**
+ * Format the display balance for both crypto and fiat, in the Details button and Modal
+ * If both crypto balance and fiat balance exist, we have to keep the string very short to avoid UI issues.
+ * @internal
+ * Used internally for the Details button and the Details Modal
+ */
+export function formatAccountTokenBalance(
+  props: AccountBalanceInfo & { decimals: number },
+): string {
+  const formattedTokenBalance = formatNumber(props.balance, props.decimals);
+  return `${formattedTokenBalance} ${props.symbol}`;
+}
+
+/**
+ * Used internally for the Details button and Details Modal
+ * @internal
+ */
+export function formatAccountFiatBalance(
+  props: AccountBalanceInfo & { decimals: number },
+) {
+  const num = formatNumber(props.balance, props.decimals);
+  // Need to keep them short to avoid UI overflow issues
+  const formattedFiatBalance = shortenLargeNumber(num);
+  return `${props.symbol}${formattedFiatBalance}`;
+}
@@ -1,4 +1,8 @@
+import { type UseQueryOptions, useQuery } from "@tanstack/react-query";
+import { getWalletInfo } from "../../../wallets/__generated__/getWalletInfo.js";
 import type { AuthOption } from "../../../wallets/types.js";
+import type { WalletId } from "../../../wallets/wallet-types.js";
+import { useWalletContext } from "../wallet/provider.js";

 // TODO make the social icons usable in RN too
 const googleIconUri =
@@ -106,3 +110,27 @@ export function getSocialIcon(provider: AuthOption | ({} & string)): string {
      return genericWalletIcon;
  }
 }
+
+/**
+ * @internal
+ */
+export function useWalletIcon(props: {
+  queryOptions?: Omit<UseQueryOptions<string>, "queryFn" | "queryKey">;
+}) {
+  const { id } = useWalletContext();
+  const imageQuery = useQuery({
+    queryKey: ["walletIcon", id],
+    queryFn: async () => fetchWalletImage({ id }),
+    ...props.queryOptions,
+  });
+  return imageQuery;
+}
+
+/**
+ * @internal Exported for tests only
+ */
+export async function fetchWalletImage(props: {
+  id: WalletId;
+}) {
+  return getWalletInfo(props.id, true);
+}
@@ -0,0 +1,53 @@
+import { useQuery } from "@tanstack/react-query";
+import type { UseQueryOptions } from "@tanstack/react-query";
+import { getFunctionId } from "../../../utils/function-id.js";
+import { getWalletInfo } from "../../../wallets/__generated__/getWalletInfo.js";
+import type { WalletId } from "../../../wallets/wallet-types.js";
+import { useWalletContext } from "../wallet/provider.js";
+
+/**
+ * @internal
+ */
+export function useWalletName(props: {
+  formatFn?: (str: string) => string;
+  queryOptions?: Omit<UseQueryOptions<string>, "queryFn" | "queryKey">;
+}) {
+  const { id } = useWalletContext();
+  const nameQuery = useQuery({
+    queryKey: getQueryKeys({ id, formatFn: props.formatFn }),
+    queryFn: async () => fetchWalletName({ id, formatFn: props.formatFn }),
+    ...props.queryOptions,
+  });
+  return nameQuery;
+}
+
+/**
+ * @internal Exported for tests only
+ */
+function getQueryKeys(props: {
+  id: WalletId;
+  formatFn?: (str: string) => string;
+}) {
+  if (typeof props.formatFn === "function") {
+    return [
+      "walletName",
+      props.id,
+      { resolver: getFunctionId(props.formatFn) },
+    ] as const;
+  }
+  return ["walletName", props.id] as const;
+}
+
+/**
+ * @internal Exported for tests only
+ */
+async function fetchWalletName(props: {
+  id: WalletId;
+  formatFn?: (str: string) => string;
+}) {
+  const info = await getWalletInfo(props.id);
+  if (typeof props.formatFn === "function") {
+    return props.formatFn(info.name);
+  }
+  return info.name;
+}
@@ -2,7 +2,7 @@

 import type React from "react";
 import { createContext, useContext } from "react";
-import type { WalletId } from "../../../../../wallets/wallet-types.js";
+import type { WalletId } from "../../../wallets/wallet-types.js";

 /**
 * Props for the WalletProvider component
@@ -0,0 +1,65 @@
+"use client";
+
+import { Text, type TextProps } from "react-native";
+import { useAccountContext } from "../../../../core/account/provider.js";
+
+/**
+ * @component
+ * @wallet
+ */
+export interface AccountAddressProps extends Omit<TextProps, "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;
+  className?: 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
+ * @wallet
+ * @beta
+ */
+export function AccountAddress({
+  formatFn,
+  ...restProps
+}: AccountAddressProps) {
+  const { address } = useAccountContext();
+  const value = formatFn ? formatFn(address) : address;
+  return <Text {...restProps}>{value}</Text>;
+}
@@ -0,0 +1,225 @@
+"use client";
+
+import { type UseQueryOptions, useQuery } from "@tanstack/react-query";
+import { Image, type ImageProps } from "react-native";
+import { resolveAvatar } from "../../../../../extensions/ens/resolve-avatar.js";
+import {
+  type ResolveNameOptions,
+  resolveName,
+} from "../../../../../extensions/ens/resolve-name.js";
+import { getSocialProfiles } from "../../../../../social/profiles.js";
+import type { SocialProfile } from "../../../../../social/types.js";
+import { parseAvatarRecord } from "../../../../../utils/ens/avatar.js";
+import { useAccountContext } from "../../../../core/account/provider.js";
+/**
+ * Props for the AccountAvatar component
+ * @component
+ * @wallet
+ */
+export interface AccountAvatarProps
+  extends Omit<ImageProps, "source">,
+    Omit<ResolveNameOptions, "client" | "address"> {
+  /**
+   * Use this prop to prioritize the social profile that you want to display
+   * This is useful for a wallet containing multiple social profiles.
+   * This component inherits all attributes of a HTML's <img />, so you can interact with it just like a normal <img />
+   *
+   * @example
+   * If you have ENS, Lens and Farcaster profiles linked to your wallet
+   * you can prioritize showing the image for Lens by:
+   * ```tsx
+   * <AccountAvatar
+   *   socialType="lens" // Choose between: "farcaster" | "lens" | "ens"
+   * />
+   * ```
+   */
+  socialType?: SocialProfile["type"];
+
+  /**
+   * This component will be shown while the avatar of the account is being fetched
+   * If not passed, the component will return `null`.
+   *
+   * You can pass a loading sign or spinner to this prop.
+   * @example
+   * ```tsx
+   * <AccountAvatar loadingComponent={<Spinner />} />
+   * ```
+   */
+  loadingComponent?: React.ComponentType;
+  /**
+   * This component will be shown if the request for fetching the avatar is done
+   * but could not retreive any result.
+   * You can pass a dummy avatar/image to this prop.
+   *
+   * If not passed, the component will return `null`
+   *
+   * @example
+   * ```tsx
+   * <AccountAvatar fallbackComponent={<DummyImage />} />
+   * ```
+   */
+  fallbackComponent?: React.ComponentType;
+
+  /**
+   * Optional query options for `useQuery`
+   */
+  queryOptions?: Omit<UseQueryOptions<string>, "queryFn" | "queryKey">;
+}
+
+/**
+ * The component for showing the avatar of the account.
+ * If fetches all the social profiles linked to your wallet, including: Farcaster, ENS, Lens (more to be added)
+ * You can choose which social profile you want to display. Defaults to the first item in the list.
+ *
+ * @example
+ * ### Basic usage
+ * ```tsx
+ * import { AccountProvider, AccountAvatar } from "thirdweb/react";
+ *
+ * <AccountProvider address="0x...">
+ *   <AccountAvatar />
+ * </AccountProvider>
+ * ```
+ * Result: An <img /> component, if the avatar is resolved successfully
+ * ```html
+ * <img alt="" src="resolved-url-for-the-avatar" />
+ * ```
+ *
+ * ### Show a loading sign when the avatar is being resolved
+ * ```tsx
+ * import { AccountProvider, AccountAvatar } from "thirdweb/react";
+ *
+ * <AccountProvider address="0x...">
+ *   <AccountAvatar
+ *     loadingComponent={<YourLoadingComponent />}
+ *   />
+ * </AccountProvider>
+ * ```
+ *
+ * ### Fallback to something when the avatar fails to resolve
+ * ```tsx
+ * import { AccountProvider, AccountAvatar } from "thirdweb/react";
+ *
+ * <AccountProvider address="0x...">
+ *   <AccountAvatar
+ *     fallbackComponent={<DummyImage />}
+ *   />
+ * </AccountProvider>
+ * ```
+ *
+ * ### Select a social profile to display
+ * If you wallet associates with more than one social profiles (Lens, Farcaster, ENS, etc.)
+ * You can specify which service you want to prioritize using the `socialType` props
+ * ```tsx
+ * import { AccountProvider, AccountAvatar } from "thirdweb/react";
+ *
+ * <AccountProvider address="0x...">
+ *   <AccountAvatar
+ *     // Choose between: "farcaster" | "lens" | "ens"
+ *     socialType={"ens"}
+ *   />
+ * </AccountProvider>
+ * ```
+ *
+ * ### Custom ENS resolver chain
+ * This component shares the same props with the ENS extension `resolveAvatar`
+ * ```tsx
+ * import { AccountProvider, AccountAvatar } from "thirdweb/react";
+ * import { base } from "thirdweb/chains";
+ *
+ * <AccountProvider address="0x...">
+ *   <AccountAvatar
+ *     resolverAddress={"0x..."}
+ *     resolverChain={base}
+ *   />
+ * </AccountProvider>
+ * ```
+ *
+ * ### Custom query options for useQuery
+ * This component uses `@tanstack-query`'s useQuery internally.
+ * You can use the `queryOptions` prop for more fine-grained control
+ * ```tsx
+ * <AccountAvatar
+ *   queryOptions={{
+ *     enabled: isEnabled,
+ *     retry: 3,
+ *   }}
+ * />
+ * ```
+ * @returns An <img /> if the avatar is resolved successfully
+ * @component
+ * @wallet
+ * @beta
+ */
+export function AccountAvatar({
+  socialType,
+  resolverAddress,
+  resolverChain,
+  loadingComponent,
+  fallbackComponent,
+  queryOptions,
+  ...restProps
+}: AccountAvatarProps) {
+  const { address, client } = useAccountContext();
+  const avatarQuery = useQuery({
+    queryKey: [
+      "account-avatar",
+      address,
+      { socialType },
+      { resolverAddress, resolverChain },
+    ],
+    queryFn: async (): Promise<string> => {
+      const [socialData, ensName] = await Promise.all([
+        getSocialProfiles({ address, client }),
+        resolveName({
+          client,
+          address: address || "",
+          resolverAddress,
+          resolverChain,
+        }),
+      ]);
+
+      const uri = socialData?.filter(
+        (p) => p.avatar && (socialType ? p.type === socialType : true),
+      )[0]?.avatar;
+
+      const [resolvedSocialAvatar, resolvedENSAvatar] = await Promise.all([
+        uri ? parseAvatarRecord({ client, uri }) : undefined,
+        ensName
+          ? resolveAvatar({
+              client,
+              name: ensName,
+            })
+          : undefined,
+      ]);
+
+      // If no social image + ens name found -> exit and show <Blobbie />
+      if (!resolvedSocialAvatar && !resolvedENSAvatar) {
+        throw new Error("Failed to resolve social + ens avatar");
+      }
+
+      // else, prioritize the social image first
+      if (resolvedSocialAvatar) {
+        return resolvedSocialAvatar;
+      }
+
+      if (resolvedENSAvatar) {
+        return resolvedENSAvatar;
+      }
+
+      throw new Error("Failed to resolve social + ens avatar");
+    },
+    retry: false,
+    ...queryOptions,
+  });
+
+  if (avatarQuery.isLoading) {
+    return loadingComponent || null;
+  }
+
+  if (!avatarQuery.data) {
+    return fallbackComponent || null;
+  }
+
+  return <Image source={{ uri: avatarQuery.data }} {...restProps} />;
+}
@@ -0,0 +1,221 @@
+"use client";
+
+import { type UseQueryOptions, useQuery } from "@tanstack/react-query";
+import { Text, type TextProps } from "react-native";
+import type { Chain } from "../../../../../chains/types.js";
+import type { SupportedFiatCurrency } from "../../../../../pay/convert/type.js";
+import { useActiveWalletChain } from "../../../../../react/core/hooks/wallets/useActiveWalletChain.js";
+import { getAddress } from "../../../../../utils/address.js";
+import { useAccountContext } from "../../../../core/account/provider.js";
+import {
+  type AccountBalanceInfo,
+  formatAccountFiatBalance,
+  loadAccountBalance,
+} from "../../../../core/utils/account.js";
+import { formatAccountTokenBalance } from "../../../../core/utils/account.js";
+
+/**
+ * Props for the AccountBalance component
+ * @component
+ * @wallet
+ */
+export interface AccountBalanceProps extends Omit<TextProps, "children"> {
+  /**
+   * The network to fetch balance on
+   * If not passed, the component will use the current chain that the wallet is connected to (`useActiveWalletChain()`)
+   */
+  chain?: Chain;
+  /**
+   * By default this component will fetch the balance for the native token on a given chain
+   * If you want to fetch balance for an ERC20 token, use the `tokenAddress` props
+   */
+  tokenAddress?: string;
+  /**
+   * A function to format the balance's display value
+   * use this function to transform the balance display value like round up the number
+   * Particularly useful to avoid overflowing-UI issues
+   */
+  formatFn?: (props: AccountBalanceInfo) => string;
+  /**
+   * This component will be shown while the balance of the account is being fetched
+   * If not passed, the component will return `null`.
+   *
+   * You can/should pass a loading sign or spinner to this prop.
+   * @example
+   * ```tsx
+   * <AccountBalance
+   *   chain={ethereum}
+   *   loadingComponent={<Spinner />}
+   * />
+   * ```
+   */
+  loadingComponent?: React.ComponentType;
+  /**
+   * This component will be shown if the balance fails to be retreived
+   * If not passed, the component will return `null`.
+   *
+   * You can/should pass a descriptive text/component to this prop, indicating that the
+   * balance was not fetched succesfully
+   * @example
+   * ```tsx
+   * <AccountBalance
+   *   chain={nonExistentChain}
+   *   fallbackComponent={"Failed to load"}
+   * />
+   * ```
+   */
+  fallbackComponent?: React.ComponentType;
+  /**
+   * Optional `useQuery` params
+   */
+  queryOptions?: Omit<
+    UseQueryOptions<AccountBalanceInfo>,
+    "queryFn" | "queryKey"
+  >;
+
+  /**
+   * Show the token balance in a supported fiat currency (e.g "USD")
+   */
+  showBalanceInFiat?: SupportedFiatCurrency;
+}
+
+/**
+ * This component fetches and shows the balance of the wallet address on a given chain.
+ * It inherits all the attributes of a HTML <span> component, hence you can style it just like how you would style a normal <span>
+ *
+ *
+ * @example
+ * ### Basic usage
+ * ```tsx
+ * import { AccountProvider, AccountBalance } from "thirdweb/react";
+ * import { ethereum } from "thirdweb/chains";
+ *
+ * <AccountProvider address="0x...">
+ *   <AccountBalance chain={ethereum} />
+ * </AccountProvider>
+ * ```
+ * Result:
+ * ```html
+ * <span>1.091435 ETH</span>
+ * ```
+ *
+ *
+ * ### Format the balance (round up, shorten etc.)
+ * The AccountBalance component accepts a `formatFn` which takes in an object of type `AccountBalanceInfo` and outputs a string
+ * The function is used to modify the display value of the wallet balance (either in crypto or fiat)
+ *
+ * ```tsx
+ * import type { AccountBalanceInfo } from "thirdweb/react";
+ * import { formatNumber } from "thirdweb/utils";
+ *
+ * const format = (props: AccountInfoBalance):string => `${formatNumber(props.balance, 1)} ${props.symbol.toLowerCase()}`
+ *
+ * <AccountBalance formatFn={format} />
+ * ```
+ *
+ * Result:
+ * ```html
+ * <span>1.1 eth</span> // the balance is rounded up to 1 decimal and the symbol is lowercased
+ * ```
+ *
+ * ### Show a loading sign when the balance is being fetched
+ * ```tsx
+ * import { AccountProvider, AccountBalance } from "thirdweb/react";
+ *
+ * <AccountProvider address="0x...">
+ *   <AccountBalance
+ *     chain={ethereum}
+ *     loadingComponent={<Spinner />}
+ *   />
+ * </AccountProvider>
+ * ```
+ *
+ * ### Fallback to something when the balance fails to resolve
+ * ```tsx
+ * <AccountProvider address="0x...">
+ *   <AccountBalance
+ *     chain={nonExistentChain}
+ *     fallbackComponent={"Failed to load"}
+ *   />
+ * </AccountProvider>
+ * ```
+ *
+ * ### Custom query options for useQuery
+ * This component uses `@tanstack-query`'s useQuery internally.
+ * You can use the `queryOptions` prop for more fine-grained control
+ * ```tsx
+ * <AccountBalance
+ *   queryOptions={{
+ *     enabled: isEnabled,
+ *     retry: 4,
+ *   }}
+ * />
+ * ```
+ *
+ * @component
+ * @wallet
+ * @beta
+ */
+export function AccountBalance({
+  chain,
+  tokenAddress,
+  loadingComponent,
+  fallbackComponent,
+  queryOptions,
+  formatFn,
+  showBalanceInFiat,
+  ...restProps
+}: AccountBalanceProps) {
+  const { address, client } = useAccountContext();
+  const walletChain = useActiveWalletChain();
+  const chainToLoad = chain || walletChain;
+  const balanceQuery = useQuery({
+    queryKey: [
+      "internal_account_balance",
+      chainToLoad?.id || -1,
+      address,
+      { tokenAddress },
+      showBalanceInFiat,
+    ] as const,
+    queryFn: async (): Promise<AccountBalanceInfo> =>
+      loadAccountBalance({
+        chain: chainToLoad,
+        client,
+        address: getAddress(address),
+        tokenAddress: tokenAddress ? getAddress(tokenAddress) : undefined,
+        showBalanceInFiat,
+      }),
+    retry: false,
+    ...queryOptions,
+  });
+
+  if (balanceQuery.isLoading) {
+    return loadingComponent || null;
+  }
+
+  if (balanceQuery.data === undefined) {
+    return fallbackComponent || null;
+  }
+
+  // Prioritize using the formatFn from users
+  if (formatFn) {
+    return <Text {...restProps}>{formatFn(balanceQuery.data)}</Text>;
+  }
+
+  if (showBalanceInFiat) {
+    return (
+      <Text {...restProps}>
+        {formatAccountFiatBalance({ ...balanceQuery.data, decimals: 2 })}
+      </Text>
+    );
+  }
+
+  return (
+    <Text {...restProps}>
+      {formatAccountTokenBalance({
+        ...balanceQuery.data,
+        decimals: balanceQuery.data.balance < 1 ? 3 : 2,
+      })}
+    </Text>
+  );
+}
@@ -0,0 +1,94 @@
+import { hexToNumber } from "@noble/curves/abstract/utils";
+import { useMemo } from "react";
+import { StyleSheet, View, type ViewStyle } from "react-native";
+import { Defs, LinearGradient, Rect, Stop, Svg } from "react-native-svg";
+import { useAccountContext } from "../../../../core/account/provider.js";
+import { COLOR_OPTIONS } from "../../../../core/utils/account.js";
+/**
+ * Props for the Blobbie component
+ * @component
+ */
+export type BlobbieProps = {
+  address: string;
+  size: number;
+  style?: ViewStyle;
+};
+
+/**
+ * A wrapper for the Blobbie component
+ * @param props BlobbieProps
+ * @beta
+ * @wallet
+ */
+export function AccountBlobbie(props: Omit<BlobbieProps, "address">) {
+  const { address } = useAccountContext();
+  return <Blobbie {...props} address={address} />;
+}
+
+/**
+ * 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.style The style for the component
+ * @param props.size The size of each side of the square avatar (in pixels)
+ * @component
+ * @wallet
+ * @example
+ * ```tsx
+ * import { Blobbie } from "thirdweb/react";
+ *
+ * <Blobbie address="0x...." style={{ width: 40, height: 40 }} />
+ * ```
+ */
+export function Blobbie(props: BlobbieProps) {
+  const colors = useMemo(
+    () =>
+      COLOR_OPTIONS[
+        Number(hexToNumber(props.address.slice(2, 4))) % COLOR_OPTIONS.length
+      ] as [string, string],
+    [props.address],
+  );
+
+  const containerStyle = useMemo(() => {
+    const baseStyle = props.style || {};
+    if (props.size) {
+      return {
+        ...baseStyle,
+        width: props.size,
+        height: props.size,
+      };
+    }
+    return baseStyle;
+  }, [props.style, props.size]);
+
+  const gradientUniqueId = `grad${colors[0]}+${colors[1]}`.replace(
+    /[^a-zA-Z0-9 ]/g,
+    "",
+  );
+
+  return (
+    <View style={[styles.container, containerStyle]}>
+      <Svg height="100%" width="100%" style={StyleSheet.absoluteFillObject}>
+        <Defs>
+          <LinearGradient
+            id={gradientUniqueId}
+            x1="0%"
+            y1="100%"
+            x2="100%"
+            y2="0%"
+          >
+            <Stop offset="0" stopColor={colors[0]} />
+            <Stop offset="1" stopColor={colors[1]} />
+          </LinearGradient>
+        </Defs>
+        <Rect width="100%" height="100%" fill={`url(#${gradientUniqueId})`} />
+      </Svg>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    overflow: "hidden",
+  },
+});
@@ -0,0 +1,180 @@
+"use client";
+
+import { type UseQueryOptions, useQuery } from "@tanstack/react-query";
+import { Text, type TextProps } from "react-native";
+import {
+  type ResolveNameOptions,
+  resolveName,
+} from "../../../../../extensions/ens/resolve-name.js";
+import { getSocialProfiles } from "../../../../../social/profiles.js";
+import type { SocialProfile } from "../../../../../social/types.js";
+import { useAccountContext } from "../../../../core/account/provider.js";
+
+/**
+ * Props for the AccountName component
+ * @component
+ * @wallet
+ */
+export interface AccountNameProps
+  extends Omit<TextProps, "children">,
+    Omit<ResolveNameOptions, "client" | "address"> {
+  /**
+   * A function used to transform (format) the name of the account.
+   * it should take in a string and output a string.
+   *
+   * This function is particularly useful
+   */
+  formatFn?: (str: string) => string;
+  /**
+   * Use this prop to prioritize the social profile that you want to display
+   * This is useful for a wallet containing multiple social profiles
+   */
+  socialType?: SocialProfile["type"];
+  /**
+   * This component will be shown while the name of the account is being fetched
+   * If not passed, the component will return `null`.
+   *
+   * You can pass a loading sign or spinner to this prop.
+   * @example
+   * ```tsx
+   * <AccountName loadingComponent={<Spinner />} />
+   * ```
+   */
+  loadingComponent?: React.ComponentType;
+  /**
+   * This component will be shown if the request for fetching the name is done but could not retreive any result.
+   * You can pass the wallet address as the fallback option if that's the case.
+   *
+   * If not passed, the component will return `null`
+   *
+   * @example
+   * ```tsx
+   * <AccountName fallbackComponent={"0x1234....3f3f"} />
+   * ```
+   */
+  fallbackComponent?: React.ComponentType;
+  /**
+   * Optional `useQuery` params
+   */
+  queryOptions?: Omit<UseQueryOptions<string>, "queryFn" | "queryKey">;
+}
+
+/**
+ * This component is used to display the name of the account.
+ * A "name" in this context is the username, or account of the social profiles that the wallet may have.
+ * In case a name is not found or failed to resolve, you can always fallback to displaying the wallet address instead by using the `fallbackComponent` prop.
+ *
+ * This component inherits all attribute of a native HTML <span> element, so you can style it just like how you would style a <span>.
+ *
+ * @param props
+ * @returns A `<span>` containing the name of the account
+ * ```html
+ * <span>{name}</span>
+ * ```
+ *
+ * @example
+ * ### Basic usage
+ * ```tsx
+ * import { AccountProvider, AccountName } from "thirdweb/react";
+ *
+ * <AccountProvider address="0x1234...3f3f" client={client}>
+ *   <AccountName />
+ * </AccountProvider>
+ * ```
+ *
+ * ### Show wallet address while social name is being loaded
+ * ```tsx
+ * <AccountName
+ *   loadingComponent={<AccountAddress />}
+ * />
+ * ```
+ *
+ *
+ * ### Fallback to showing wallet address if fail to resolve social name
+ * ```tsx
+ * <AccountName
+ *   fallbackComponent={<AccountAddress />}
+ * />
+ * ```
+ *
+ * ### Transform the account name using `formatFn` prop
+ * ```tsx
+ * import { isAddress, shortenAddress } from "thirdweb/utils";
+ * import { AccountProvider, AccountName } from "thirdweb/react";
+ *
+ * // Let's say we want the name to be capitalized without using CSS
+ * const formatName = (name: string) => name.toUpperCase();
+ *
+ * return <AccountName formatFn={formatName} />
+ * ```
+ *
+ *
+ * ### Custom query options for useQuery
+ * This component uses `@tanstack-query`'s useQuery internally.
+ * You can use the `queryOptions` prop for more fine-grained control
+ * ```tsx
+ * <AccountName
+ *   queryOptions={{
+ *     enabled: isEnabled,
+ *     retry: 3
+ *   }}
+ * />
+ * ```
+ *
+ * @component
+ * @wallet
+ * @beta
+ */
+export function AccountName({
+  resolverAddress,
+  resolverChain,
+  socialType,
+  formatFn,
+  queryOptions,
+  loadingComponent,
+  fallbackComponent,
+  ...restProps
+}: AccountNameProps) {
+  const { address, client } = useAccountContext();
+  const nameQuery = useQuery({
+    queryKey: [
+      "account-name",
+      address,
+      { socialType },
+      { resolverAddress, resolverChain },
+    ],
+    queryFn: async () => {
+      const [socialData, ensName] = await Promise.all([
+        getSocialProfiles({ address, client }),
+        resolveName({
+          client,
+          address,
+          resolverAddress,
+          resolverChain,
+        }),
+      ]);
+
+      const name =
+        socialData?.filter(
+          (p) => p.name && (socialType ? p.type === socialType : true),
+        )[0]?.name || ensName;
+
+      if (!name) {
+        throw new Error("Failed to resolve account name");
+      }
+      return formatFn ? formatFn(name) : name;
+    },
+    retry: false,
+    ...queryOptions,
+  });
+
+  if (nameQuery.isLoading) {
+    return loadingComponent || null;
+  }
+
+  if (!nameQuery.data) {
+    return fallbackComponent || null;
+  }
+
+  return <Text {...restProps}>{nameQuery.data}</Text>;
+}
@@ -0,0 +1,124 @@
+"use client";
+
+import type { UseQueryOptions } from "@tanstack/react-query";
+import { Image, type ImageProps } from "react-native";
+import { SvgXml, type XmlProps } from "react-native-svg";
+import type { AuthOption } from "../../../../../wallets/types.js";
+import { useWalletIcon } from "../../../../core/utils/walletIcon.js";
+import { getAuthProviderImage } from "../../components/WalletImage.js";
+
+export interface WalletIconProps extends Omit<ImageProps, "uri"> {
+  /**
+   * This component will be shown while the icon of the wallet is being fetched
+   * If not passed, the component will return `null`.
+   *
+   * You can/should pass a loading sign or spinner to this prop.
+   * @example
+   * ```tsx
+   * <WalletIcon loadingComponent={<Spinner />} />
+   * ```
+   */
+  loadingComponent?: React.ComponentType;
+  /**
+   * This component will be shown if the icon fails to be retrieved
+   * If not passed, the component will return `null`.
+   *
+   * You can/should pass a descriptive text/component to this prop, indicating that the
+   * icon was not fetched successfully
+   * @example
+   * ```tsx
+   * <WalletIcon fallbackComponent={<span>Failed to load</span>}
+   * />
+   * ```
+   */
+  fallbackComponent?: React.ComponentType;
+  /**
+   * Optional `useQuery` params
+   */
+  queryOptions?: Omit<UseQueryOptions<string>, "queryFn" | "queryKey">;
+}
+
+/**
+ * This component tries to resolve the icon of a given wallet, then return an image.
+ * @returns an <img /> with the src of the wallet icon
+ *
+ * @example
+ * ### Basic usage
+ * ```tsx
+ * import { WalletProvider, WalletIcon } from "thirdweb/react";
+ *
+ * <WalletProvider id="io.metamask">
+ *   <WalletIcon />
+ * </WalletProvider>
+ * ```
+ *
+ * Result: An <img /> component with the src of the icon
+ * ```html
+ * <img src="metamask-icon.png" />
+ * ```
+ *
+ * ### Show a loading sign while the icon is being loaded
+ * ```tsx
+ * <WalletIcon loadingComponent={<Spinner />} />
+ * ```
+ *
+ * ### Fallback to a dummy image if the wallet icon fails to resolve
+ * ```tsx
+ * <WalletIcon fallbackComponent={<img src="blank-image.png" />} />
+ * ```
+ *
+ * ### Usage with queryOptions
+ * WalletIcon uses useQuery() from tanstack query internally.
+ * It allows you to pass a custom queryOptions of your choice for more control of the internal fetching logic
+ * ```tsx
+ * <WalletIcon queryOptions={{ enabled: someLogic, retry: 3, }} />
+ * ```
+ *
+ * @component
+ * @wallet
+ * @beta
+ */
+export function WalletIcon({
+  loadingComponent,
+  fallbackComponent,
+  queryOptions,
+  ...restProps
+}: WalletIconProps) {
+  const imageQuery = useWalletIcon({ queryOptions });
+  if (imageQuery.isLoading) {
+    return loadingComponent || null;
+  }
+  if (!imageQuery.data) {
+    return fallbackComponent || null;
+  }
+  return <Image source={{ uri: imageQuery.data }} {...restProps} />;
+}
+
+export interface SocialIconProps extends Omit<XmlProps, "xml"> {
+  provider: AuthOption | (string & {});
+}
+
+/**
+ * Social auth provider icon
+ * @returns an <img /> component with the src set to the svg
+ *
+ * @example
+ * ```tsx
+ * import { SocialIcon } from "thirdweb/react";
+ *
+ * <SocialIcon provider="google" />
+ * ```
+ *
+ * Result: An <img /> component with the src of the icon
+ * ```html
+ * <img src="google-icon-svg" />
+ * ```
+ *
+ * @component
+ * @wallet
+ * @beta
+ */
+export function SocialIcon({ provider, ...restProps }: SocialIconProps) {
+  const src = getAuthProviderImage(provider);
+  return <SvgXml xml={src} {...restProps} />;
+}
@@ -0,0 +1,112 @@
+"use client";
+
+import type { UseQueryOptions } from "@tanstack/react-query";
+import { Text, type TextProps } from "react-native";
+import { useWalletName } from "../../../../core/utils/walletname.js";
+/**
+ * Props for the WalletName component
+ * @component
+ * @wallet
+ */
+export interface WalletNameProps extends Omit<TextProps, "children"> {
+  /**
+   * This component will be shown while the name of the wallet name is being fetched
+   * If not passed, the component will return `null`.
+   *
+   * You can/should pass a loading sign or spinner to this prop.
+   * @example
+   * ```tsx
+   * <WalletName loadingComponent={<Spinner />} />
+   * ```
+   */
+  loadingComponent?: React.ComponentType;
+  /**
+   * This component will be shown if the name fails to be retreived
+   * If not passed, the component will return `null`.
+   *
+   * You can/should pass a descriptive text/component to this prop, indicating that the
+   * name was not fetched succesfully
+   * @example
+   * ```tsx
+   * <WalletName fallbackComponent={<span>Failed to load</span>}
+   * />
+   * ```
+   */
+  fallbackComponent?: React.ComponentType;
+  /**
+   * Optional `useQuery` params
+   */
+  queryOptions?: Omit<UseQueryOptions<string>, "queryFn" | "queryKey">;
+  /**
+   * A function to format the name's display value
+   * ```tsx
+   * <WalletName formatFn={(str: string) => doSomething()} />
+   * ```
+   */
+  formatFn?: (str: string) => string;
+}
+
+/**
+ * This component fetches then shows the name of a wallet.
+ * It inherits all the attributes of a HTML <span> component, hence you can style it just like how you would style a normal <span>
+ *
+ * @example
+ * ### Basic usage
+ * ```tsx
+ * import { WalletProvider, WalletName } from "thirdweb/react";
+ *
+ * <WalletProvider id="io.metamask">
+ *   <WalletName  />
+ * </WalletProvider>
+ * ```
+ * Result:
+ * ```html
+ * <span>MetaMask</span>
+ * ```
+ *
+ * ### Show a loading sign when the name is being fetched
+ * ```tsx
+ * import { WalletProvider, WalletName } from "thirdweb/react";
+ *
+ * <WalletProvider {...props}>
+ *   <WalletName loadingComponent={<Spinner />} />
+ * </WalletProvider>
+ * ```
+ *
+ * ### Fallback to something when the name fails to resolve
+ * ```tsx
+ * <WalletProvider {...props}>
+ *   <WalletName fallbackComponent={<span>Failed to load</span>} />
+ * </WalletProvider>
+ * ```
+ *
+ * ### Custom query options for useQuery
+ * This component uses `@tanstack-query`'s useQuery internally.
+ * You can use the `queryOptions` prop for more fine-grained control
+ * ```tsx
+ * <WalletName
+ *   queryOptions={{
+ *     enabled: isEnabled,
+ *     retry: 4,
+ *   }}
+ * />
+ * @component
+ * @beta
+ * @wallet
+ */
+export function WalletName({
+  loadingComponent,
+  fallbackComponent,
+  queryOptions,
+  formatFn,
+  ...restProps
+}: WalletNameProps) {
+  const nameQuery = useWalletName({ queryOptions, formatFn });
+  if (nameQuery.isLoading) {
+    return loadingComponent || null;
+  }
+  if (!nameQuery.data) {
+    return fallbackComponent || null;
+  }
+  return <Text {...restProps}>{nameQuery.data}</Text>;
+}
@@ -1,24 +1,7 @@
 "use client";
 import { hexToNumber } from "@noble/curves/abstract/utils";
 import { useId, useMemo } from "react";
-
-const COLOR_OPTIONS = [
-  ["#fca5a5", "#b91c1c"],
-  ["#fdba74", "#c2410c"],
-  ["#fcd34d", "#b45309"],
-  ["#fde047", "#a16207"],
-  ["#a3e635", "#4d7c0f"],
-  ["#86efac", "#15803d"],
-  ["#67e8f9", "#0e7490"],
-  ["#7dd3fc", "#0369a1"],
-  ["#93c5fd", "#1d4ed8"],
-  ["#a5b4fc", "#4338ca"],
-  ["#c4b5fd", "#6d28d9"],
-  ["#d8b4fe", "#7e22ce"],
-  ["#f0abfc", "#a21caf"],
-  ["#f9a8d4", "#be185d"],
-  ["#fda4af", "#be123c"],
-];
+import { COLOR_OPTIONS } from "../../../core/utils/account.js";

 /**
 * Props for the Blobbie component
@@ -3,6 +3,7 @@
 import styled from "@emotion/styled";
 import { useEffect, useMemo, useState } from "react";
 import { getDefaultWallets } from "../../../../wallets/defaultWallets.js";
+import { AccountProvider } from "../../../core/account/provider.js";
 import { iconSize } from "../../../core/design-system/index.js";
 import { useSiweAuth } from "../../../core/hooks/auth/useSiweAuth.js";
 import type { ConnectButtonProps } from "../../../core/hooks/connection/ConnectButtonProps.js";
@@ -23,7 +24,6 @@ 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 { AccountProvider } from "../prebuilt/Account/provider.js";
 import { ConnectedWalletDetails } from "./Details.js";
 import ConnectModal from "./Modal/ConnectModal.js";
 import { LockIcon } from "./icons/LockIcon.js";
@@ -14,8 +14,8 @@ import { base } from "../../../../chains/chain-definitions/base.js";
 import { ethereum } from "../../../../chains/chain-definitions/ethereum.js";
 import { useActiveAccount } from "../../../../react/core/hooks/wallets/useActiveAccount.js";
 import { useActiveWalletChain } from "../../../../react/core/hooks/wallets/useActiveWalletChain.js";
+import { AccountProvider } from "../../../core/account/provider.js";
 import { ThirdwebProvider } from "../../providers/thirdweb-provider.js";
-import { AccountProvider } from "../prebuilt/Account/provider.js";
 import {
  ConnectedToSmartWallet,
  ConnectedWalletDetails,
@@ -40,6 +40,7 @@ import type {
  EcosystemWalletId,
  WalletId,
 } from "../../../../wallets/wallet-types.js";
+import { AccountProvider } from "../../../core/account/provider.js";
 import {
  CustomThemeProvider,
  parseTheme,
@@ -67,6 +68,11 @@ import { useAdminWallet } from "../../../core/hooks/wallets/useAdminWallet.js";
 import { useDisconnect } from "../../../core/hooks/wallets/useDisconnect.js";
 import { useSwitchActiveWalletChain } from "../../../core/hooks/wallets/useSwitchActiveWalletChain.js";
 import { SetRootElementContext } from "../../../core/providers/RootElementContext.js";
+import {
+  type AccountBalanceInfo,
+  formatAccountFiatBalance,
+  formatAccountTokenBalance,
+} from "../../../core/utils/account.js";
 import type {
  SupportedNFTs,
  SupportedTokens,
@@ -91,15 +97,9 @@ 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,
-  type AccountBalanceInfo,
-  formatAccountFiatBalance,
-  formatAccountTokenBalance,
-} from "../prebuilt/Account/balance.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 { ChainIcon } from "../prebuilt/Chain/icon.js";
 import { ChainName } from "../prebuilt/Chain/name.js";
 import { ChainProvider } from "../prebuilt/Chain/provider.js";
@@ -26,7 +26,7 @@ describe("ManageWalletScreen", () => {
    expect(screen.getByText(en.manageWallet.title)).toBeInTheDocument();
  });

-  it("should render the linked profiles button if allowLinkingProfiles is true", () => {
+  it.skip("should render the linked profiles button if allowLinkingProfiles is true", () => {
    render(
      <ManageWalletScreen
        {...mockProps}
@@ -38,7 +38,7 @@ describe("ManageWalletScreen", () => {
    ).toBeInTheDocument();
  });

-  it("should not render the linked profiles button if allowLinkingProfiles is false", () => {
+  it.skip("should not render the linked profiles button if allowLinkingProfiles is false", () => {
    render(
      <ManageWalletScreen
        {...mockProps}
@@ -50,7 +50,7 @@ describe("ManageWalletScreen", () => {
    ).not.toBeInTheDocument();
  });

-  it("should default to showing linked profiles button", () => {
+  it.skip("should default to showing linked profiles button", () => {
    render(<ManageWalletScreen {...mockProps} />);
    expect(
      screen.getByText(en.manageWallet.linkedProfiles),
@@ -30,6 +30,7 @@ export function ManageWalletScreen(props: {
 }) {
  const adminWallet = useAdminWallet();
  const activeWallet = useActiveWallet();
+  const wallet = adminWallet || activeWallet;

  return (
    <Container
@@ -60,7 +61,7 @@ export function ManageWalletScreen(props: {
          />

          {/* Unified Identity */}
-          {typeof activeWallet !== "undefined" &&
+          {typeof wallet !== "undefined" &&
            props.manageWallet?.allowLinkingProfiles !== false && (
              <MenuButton
                onClick={() => {
@@ -93,9 +94,9 @@ export function ManageWalletScreen(props: {
          </MenuButton>

          {/* Private Key Export (if enabled) */}
-          {adminWallet &&
-            isInAppWallet(adminWallet) &&
-            !adminWallet.getConfig()?.hidePrivateKeyExport && (
+          {wallet &&
+            isInAppWallet(wallet) &&
+            !wallet.getConfig()?.hidePrivateKeyExport && (
              <MenuButton
                onClick={() => {
                  props.setScreen("private-key");
@@ -2,8 +2,8 @@ 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 { AccountProvider } from "../../../../core/account/provider.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", () => {
@@ -1,6 +1,6 @@
 "use client";

-import { useAccountContext } from "./provider.js";
+import { useAccountContext } from "../../../../core/account/provider.js";

 /**
 * @component
@@ -2,8 +2,8 @@ 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 { AccountProvider } from "../../../../core/account/provider.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", () => {
@@ -11,8 +11,7 @@ import {
 import { getSocialProfiles } from "../../../../../social/profiles.js";
 import type { SocialProfile } from "../../../../../social/types.js";
 import { parseAvatarRecord } from "../../../../../utils/ens/avatar.js";
-import { useAccountContext } from "./provider.js";
-
+import { useAccountContext } from "../../../../core/account/provider.js";
 /**
 * Props for the AccountAvatar component
 * @component
@@ -7,13 +7,13 @@ import { ethereum } from "../../../../../chains/chain-definitions/ethereum.js";
 import { sepolia } from "../../../../../chains/chain-definitions/sepolia.js";
 import { defineChain } from "../../../../../chains/utils.js";
 import { NATIVE_TOKEN_ADDRESS } from "../../../../../constants/addresses.js";
+import { AccountProvider } from "../../../../core/account/provider.js";
 import {
-  AccountBalance,
  formatAccountFiatBalance,
  formatAccountTokenBalance,
  loadAccountBalance,
-} from "./balance.js";
-import { AccountProvider } from "./provider.js";
+} from "../../../../core/utils/account.js";
+import { AccountBalance } from "./balance.js";

 const queryClient = new QueryClient();

@@ -95,7 +95,8 @@ describe.runIf(process.env.TW_SECRET_KEY)("AccountBalance component", () => {
    await expect(() =>
      loadAccountBalance({
        client: TEST_CLIENT,
-        address: "haha",
+        // biome-ignore lint/suspicious/noExplicitAny: for the test
+        address: "haha" as any,
        chain: ethereum,
      }),
    ).rejects.toThrowError("Invalid wallet address. Expected an EVM address");
@@ -106,7 +107,8 @@ describe.runIf(process.env.TW_SECRET_KEY)("AccountBalance component", () => {
      loadAccountBalance({
        client: TEST_CLIENT,
        address: VITALIK_WALLET,
-        tokenAddress: "haha",
+        // biome-ignore lint/suspicious/noExplicitAny: for the test
+        tokenAddress: "haha" as any,
        chain: ethereum,
      }),
    ).rejects.toThrowError(
@@ -1,35 +1,19 @@
 "use client";

 import { type UseQueryOptions, useQuery } from "@tanstack/react-query";
-import type { Address } from "abitype";
 import type React from "react";
 import type { JSX } from "react";
 import type { Chain } from "../../../../../chains/types.js";
-import type { ThirdwebClient } from "../../../../../client/client.js";
-import { NATIVE_TOKEN_ADDRESS } from "../../../../../constants/addresses.js";
-import { convertCryptoToFiat } from "../../../../../exports/pay.js";
 import type { SupportedFiatCurrency } from "../../../../../pay/convert/type.js";
 import { useActiveWalletChain } from "../../../../../react/core/hooks/wallets/useActiveWalletChain.js";
-import { isAddress } from "../../../../../utils/address.js";
-import { formatNumber } from "../../../../../utils/formatNumber.js";
-import { shortenLargeNumber } from "../../../../../utils/shortenLargeNumber.js";
-import { getWalletBalance } from "../../../../../wallets/utils/getWalletBalance.js";
-import { useAccountContext } from "./provider.js";
-
-/**
- * @component
- * @wallet
- */
-export type AccountBalanceInfo = {
-  /**
-   * Represents either token balance or fiat balance.
-   */
-  balance: number;
-  /**
-   * Represents either token symbol or fiat symbol
-   */
-  symbol: string;
-};
+import { getAddress } from "../../../../../utils/address.js";
+import { useAccountContext } from "../../../../core/account/provider.js";
+import {
+  type AccountBalanceInfo,
+  formatAccountFiatBalance,
+  loadAccountBalance,
+} from "../../../../core/utils/account.js";
+import { formatAccountTokenBalance } from "../../../../core/utils/account.js";

 /**
 * Props for the AccountBalance component
@@ -199,8 +183,8 @@ export function AccountBalance({
      loadAccountBalance({
        chain: chainToLoad,
        client,
-        address,
-        tokenAddress,
+        address: getAddress(address),
+        tokenAddress: tokenAddress ? getAddress(tokenAddress) : undefined,
        showBalanceInFiat,
      }),
    retry: false,
@@ -237,107 +221,3 @@ export function AccountBalance({
    </span>
  );
 }
-
-/**
- * @internal Exported for tests
- */
-export async function loadAccountBalance(props: {
-  chain?: Chain;
-  client: ThirdwebClient;
-  address: Address;
-  tokenAddress?: Address;
-  showBalanceInFiat?: SupportedFiatCurrency;
-}): Promise<AccountBalanceInfo> {
-  const { chain, client, address, tokenAddress, showBalanceInFiat } = props;
-  if (!chain) {
-    throw new Error("chain is required");
-  }
-
-  if (
-    tokenAddress &&
-    tokenAddress?.toLowerCase() === NATIVE_TOKEN_ADDRESS.toLowerCase()
-  ) {
-    throw new Error(`Invalid tokenAddress - cannot be ${NATIVE_TOKEN_ADDRESS}`);
-  }
-
-  if (!isAddress(address)) {
-    throw new Error("Invalid wallet address. Expected an EVM address");
-  }
-
-  if (tokenAddress && !isAddress(tokenAddress)) {
-    throw new Error("Invalid tokenAddress. Expected an EVM contract address");
-  }
-
-  const tokenBalanceData = await getWalletBalance({
-    chain,
-    client,
-    address,
-    tokenAddress,
-  }).catch(() => undefined);
-
-  if (!tokenBalanceData) {
-    throw new Error(
-      `Failed to retrieve ${tokenAddress ? `token: ${tokenAddress}` : "native token"} balance for address: ${address} on chainId:${chain.id}`,
-    );
-  }
-
-  if (showBalanceInFiat) {
-    const fiatData = await convertCryptoToFiat({
-      fromAmount: Number(tokenBalanceData.displayValue),
-      fromTokenAddress: tokenAddress || NATIVE_TOKEN_ADDRESS,
-      to: showBalanceInFiat,
-      chain,
-      client,
-    }).catch(() => undefined);
-
-    if (fiatData === undefined) {
-      throw new Error(
-        `Failed to resolve fiat value for ${tokenAddress ? `token: ${tokenAddress}` : "native token"} on chainId: ${chain.id}`,
-      );
-    }
-    return {
-      balance: fiatData?.result,
-      symbol:
-        new Intl.NumberFormat("en", {
-          style: "currency",
-          currency: showBalanceInFiat,
-          minimumFractionDigits: 0,
-          maximumFractionDigits: 0,
-        })
-          .formatToParts(0)
-          .find((p) => p.type === "currency")?.value ||
-        showBalanceInFiat.toUpperCase(),
-    };
-  }
-
-  return {
-    balance: Number(tokenBalanceData.displayValue),
-    symbol: tokenBalanceData.symbol,
-  };
-}
-
-/**
- * Format the display balance for both crypto and fiat, in the Details button and Modal
- * If both crypto balance and fiat balance exist, we have to keep the string very short to avoid UI issues.
- * @internal
- * Used internally for the Details button and the Details Modal
- */
-export function formatAccountTokenBalance(
-  props: AccountBalanceInfo & { decimals: number },
-): string {
-  const formattedTokenBalance = formatNumber(props.balance, props.decimals);
-  return `${formattedTokenBalance} ${props.symbol}`;
-}
-
-/**
- * Used internally for the Details button and Details Modal
- * @internal
- */
-export function formatAccountFiatBalance(
-  props: AccountBalanceInfo & { decimals: number },
-) {
-  const num = formatNumber(props.balance, props.decimals);
-  // Need to keep them short to avoid UI overflow issues
-  const formattedFiatBalance = shortenLargeNumber(num);
-  return `${props.symbol}${formattedFiatBalance}`;
-}
@@ -1,7 +1,7 @@
 "use client";

+import { useAccountContext } from "../../../../core/account/provider.js";
 import { Blobbie, type BlobbieProps } from "../../ConnectWallet/Blobbie.js";
-import { useAccountContext } from "./provider.js";

 /**
 * A wrapper for the Blobbie component
@@ -1,8 +1,8 @@
 import { describe, expect, it } from "vitest";
 import { render, screen, waitFor } from "~test/react-render.js";
 import { TEST_CLIENT } from "~test/test-clients.js";
+import { AccountProvider } from "../../../../core/account/provider.js";
 import { AccountName } from "./name.js";
-import { AccountProvider } from "./provider.js";

 describe.runIf(process.env.TW_SECRET_KEY)("AccountName component", () => {
  it("should return the correct social name", () => {
@@ -9,7 +9,7 @@ import {
 } from "../../../../../extensions/ens/resolve-name.js";
 import { getSocialProfiles } from "../../../../../social/profiles.js";
 import type { SocialProfile } from "../../../../../social/types.js";
-import { useAccountContext } from "./provider.js";
+import { useAccountContext } from "../../../../core/account/provider.js";

 /**
 * Props for the AccountName component
@@ -1,4 +1,3 @@
-import {} from "@tanstack/react-query";
 import { getNFT as getNFT721 } from "../../../../../extensions/erc721/read/getNFT.js";
 import { getNFT as getNFT1155 } from "../../../../../extensions/erc1155/read/getNFT.js";
 import type { NFT } from "../../../../../utils/nft/parseNft.js";
@@ -1,6 +1,5 @@
 import { describe, expect, it } from "vitest";
 import { ANVIL_CHAIN } from "~test/chains.js";
-import {} from "~test/react-render.js";
 import { TEST_CLIENT } from "~test/test-clients.js";
 import {
  UNISWAPV3_FACTORY_CONTRACT,
@@ -1,6 +1,5 @@
 import { describe, expect, it } from "vitest";
 import { ANVIL_CHAIN } from "~test/chains.js";
-import {} from "~test/react-render.js";
 import { TEST_CLIENT } from "~test/test-clients.js";
 import {
  UNISWAPV3_FACTORY_CONTRACT,
@@ -1,7 +1,8 @@
 import { describe, expect, it } from "vitest";
 import { render, waitFor } from "~test/react-render.js";
-import { SocialIcon, WalletIcon, fetchWalletImage } from "./icon.js";
-import { WalletProvider } from "./provider.js";
+import { fetchWalletImage } from "../../../../core/utils/walletIcon.js";
+import { WalletProvider } from "../../../../core/wallet/provider.js";
+import { SocialIcon, WalletIcon } from "./icon.js";

 describe("WalletIcon", () => {
  it("should fetch wallet image", async () => {
@@ -1,12 +1,12 @@
 "use client";

-import { type UseQueryOptions, useQuery } from "@tanstack/react-query";
+import type { UseQueryOptions } from "@tanstack/react-query";
 import type { JSX } from "react";
-import { getWalletInfo } from "../../../../../wallets/__generated__/getWalletInfo.js";
 import type { AuthOption } from "../../../../../wallets/types.js";
-import type { WalletId } from "../../../../../wallets/wallet-types.js";
-import { getSocialIcon } from "../../../../core/utils/walletIcon.js";
-import { useWalletContext } from "./provider.js";
+import {
+  getSocialIcon,
+  useWalletIcon,
+} from "../../../../core/utils/walletIcon.js";

 export interface WalletIconProps
  extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, "src"> {
@@ -96,31 +96,7 @@ export function WalletIcon({
  return <img src={imageQuery.data} {...restProps} alt={restProps.alt} />;
 }

-/**
- * @internal
- */
-function useWalletIcon(props: {
-  queryOptions?: Omit<UseQueryOptions<string>, "queryFn" | "queryKey">;
-}) {
-  const { id } = useWalletContext();
-  const imageQuery = useQuery({
-    queryKey: ["walletIcon", id],
-    queryFn: async () => fetchWalletImage({ id }),
-    ...props.queryOptions,
-  });
-  return imageQuery;
-}
-
-/**
- * @internal Exported for tests only
- */
-export async function fetchWalletImage(props: {
-  id: WalletId;
-}) {
-  return getWalletInfo(props.id, true);
-}
-
-interface SocialIconProps
+export interface SocialIconProps
  extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, "src"> {
  provider: AuthOption | string;
 }
@@ -1,8 +1,12 @@
 import { describe, expect, it } from "vitest";
 import { render, waitFor } from "~test/react-render.js";
 import { getFunctionId } from "../../../../../utils/function-id.js";
-import { WalletName, fetchWalletName, getQueryKeys } from "./name.js";
-import { WalletProvider } from "./provider.js";
+import {
+  fetchWalletName,
+  getQueryKeys,
+} from "../../../../core/utils/walletname.js";
+import { WalletProvider } from "../../../../core/wallet/provider.js";
+import { WalletName } from "./name.js";

 describe.runIf(process.env.TW_SECRET_KEY)("WalletName", () => {
  it("fetchWalletName: should fetch wallet name from id", async () => {
@@ -1,11 +1,8 @@
 "use client";

-import { type UseQueryOptions, useQuery } from "@tanstack/react-query";
+import type { UseQueryOptions } from "@tanstack/react-query";
 import type { JSX } from "react";
-import { getFunctionId } from "../../../../../utils/function-id.js";
-import { getWalletInfo } from "../../../../../wallets/__generated__/getWalletInfo.js";
-import type { WalletId } from "../../../../../wallets/wallet-types.js";
-import { useWalletContext } from "./provider.js";
+import { useWalletName } from "../../../../core/utils/walletname.js";

 /**
 * Props for the WalletName component
@@ -115,50 +112,3 @@ export function WalletName({
  }
  return <span {...restProps}>{nameQuery.data}</span>;
 }
-
-/**
- * @internal
- */
-function useWalletName(props: {
-  formatFn?: (str: string) => string;
-  queryOptions?: Omit<UseQueryOptions<string>, "queryFn" | "queryKey">;
-}) {
-  const { id } = useWalletContext();
-  const nameQuery = useQuery({
-    queryKey: getQueryKeys({ id, formatFn: props.formatFn }),
-    queryFn: async () => fetchWalletName({ id, formatFn: props.formatFn }),
-    ...props.queryOptions,
-  });
-  return nameQuery;
-}
-
-/**
- * @internal Exported for tests only
- */
-export function getQueryKeys(props: {
-  id: WalletId;
-  formatFn?: (str: string) => string;
-}) {
-  if (typeof props.formatFn === "function") {
-    return [
-      "walletName",
-      props.id,
-      { resolver: getFunctionId(props.formatFn) },
-    ] as const;
-  }
-  return ["walletName", props.id] as const;
-}
-
-/**
- * @internal Exported for tests only
- */
-export async function fetchWalletName(props: {
-  id: WalletId;
-  formatFn?: (str: string) => string;
-}) {
-  const info = await getWalletInfo(props.id);
-  if (typeof props.formatFn === "function") {
-    return props.formatFn(info.name);
-  }
-  return info.name;
-}
@@ -13,6 +13,9 @@
 * @utils
 */
 export function shortenLargeNumber(value: number) {
+  if (value === 0) {
+    return "0.00";
+  }
  if (value < 1000) {
    return value.toString();
  }
@@ -55,11 +55,11 @@ export const autoConnectCore = async ({
    getStoredActiveWalletId(storage),
  ]);

-  const { authResult, walletId, authProvider, authCookie } = getUrlToken();
-  const wallet = wallets.find((w) => w.id === walletId);
+  const result = getUrlToken();

  // If an auth cookie is found and this site supports the wallet, we'll set the auth cookie in the client storage
-  if (authCookie && wallet) {
+  const wallet = wallets.find((w) => w.id === result?.walletId);
+  if (result?.authCookie && wallet) {
    const clientStorage = new ClientScopedStorage({
      storage,
      clientId: props.client.clientId,
@@ -70,17 +70,17 @@ export const autoConnectCore = async ({
          }
        : undefined,
    });
-    await clientStorage.saveAuthCookie(authCookie);
+    await clientStorage.saveAuthCookie(result.authCookie);
+  }
+  if (result?.walletId) {
+    lastActiveWalletId = result.walletId;
+    lastConnectedWalletIds = lastConnectedWalletIds?.includes(result.walletId)
+      ? lastConnectedWalletIds
+      : [result.walletId, ...(lastConnectedWalletIds || [])];
  }

-  if (walletId) {
-    lastActiveWalletId = walletId;
-    lastConnectedWalletIds = lastConnectedWalletIds?.includes(walletId)
-      ? lastConnectedWalletIds
-      : [walletId, ...(lastConnectedWalletIds || [])];
-  }
-  if (authProvider) {
-    await setLastAuthProvider?.(authProvider, storage);
+  if (result?.authProvider) {
+    await setLastAuthProvider?.(result.authProvider, storage);
  }

  // if no wallets were last connected or we didn't receive an auth token
@@ -105,7 +105,7 @@ export const autoConnectCore = async ({
        wallet: activeWallet,
        client: props.client,
        lastConnectedChain,
-        authResult,
+        authResult: result?.authResult,
      }),
      {
        ms: timeout,
@@ -156,7 +156,7 @@ export const autoConnectCore = async ({
        wallet,
        client: props.client,
        lastConnectedChain,
-        authResult,
+        authResult: result?.authResult,
      });
      manager.addConnectedWallet(wallet);
    } catch {
@@ -1,7 +1,7 @@
 import { afterEach, beforeEach, describe, expect, it } from "vitest";
 import { getUrlToken } from "./get-url-token.js";

-describe("getUrlToken", () => {
+describe.runIf(global.window !== undefined)("getUrlToken", () => {
  let originalLocation: Location;

  beforeEach(() => {
@@ -25,20 +25,20 @@ describe("getUrlToken", () => {
  });

  it("should return an empty object if not in web context", () => {
-    const originalWindow = window;
+    const originalDocument = document;
    // biome-ignore lint/suspicious/noExplicitAny: Test
-    (global as any).window = undefined;
+    (global as any).document = undefined;

    const result = getUrlToken();
    // biome-ignore lint/suspicious/noExplicitAny: Test
-    (global as any).window = originalWindow;
+    (global as any).document = originalDocument;

-    expect(result).toEqual({});
+    expect(result).toEqual(undefined);
  });

  it("should return an empty object if no parameters are present", () => {
    const result = getUrlToken();
-    expect(result).toEqual({});
+    expect(result).toEqual(undefined);
  });

  it("should parse walletId and authResult correctly", () => {
@@ -5,15 +5,17 @@ import type { AuthStoredTokenWithCookieReturnType } from "../../core/authenticat
 /**
 * Checks for an auth token and associated metadata in the current URL
 */
-export function getUrlToken(): {
-  walletId?: WalletId;
-  authResult?: AuthStoredTokenWithCookieReturnType;
-  authProvider?: AuthOption;
-  authCookie?: string;
-} {
-  if (typeof window === "undefined") {
+export function getUrlToken():
+  | {
+      walletId?: WalletId;
+      authResult?: AuthStoredTokenWithCookieReturnType;
+      authProvider?: AuthOption;
+      authCookie?: string;
+    }
+  | undefined {
+  if (typeof document === "undefined") {
    // Not in web
-    return {};
+    return undefined;
  }

  const queryString = window.location.search;
@@ -40,5 +42,5 @@ export function getUrlToken(): {
    );
    return { walletId, authResult, authProvider, authCookie };
  }
-  return {};
+  return undefined;
 }
@@ -1,4 +1,3 @@
-import {} from "viem";
 import { beforeAll, describe, expect, it } from "vitest";
 import { TEST_CLIENT } from "../../../test/src/test-clients.js";
 import { TEST_ACCOUNT_A } from "../../../test/src/test-wallets.js";
@@ -1,5 +1,11 @@
 # @thirdweb-dev/wagmi-adapter

+## 0.2.7
+
+### Patch Changes
+
+- [#6079](https://github.com/thirdweb-dev/js/pull/6079) [`1616b7f`](https://github.com/thirdweb-dev/js/commit/1616b7f6198d43fc48a1269b1cca93958cbf7dba) Thanks [@jnsdls](https://github.com/jnsdls)! - updated dependencies
+
 ## 0.2.6

 ## 0.2.5
@@ -1,6 +1,6 @@
 {
 	"name": "@thirdweb-dev/wagmi-adapter",
-	"version": "0.2.6",
+	"version": "0.2.7",
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/thirdweb-dev/js.git#main"
@@ -28,7 +28,7 @@
 		"src/*"
 	],
 	"devDependencies": {
-		"@wagmi/core": "2.16.0",
+		"@wagmi/core": "2.16.3",
 		"rimraf": "6.0.1",
 		"thirdweb": "workspace:*"
 	},
Author	SHA1	Message	Date
Joaquim Verges GitHubgithub-actions[bot] <github-actions[bot]@users.noreply.github.com>	1cff849b69	Version Packages (#6089 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2025-01-28 18:22:36 -08:00
Jonas DanielsandGitHub	b5e327e5ec	add billingPlanVersion to TeamResponse (#6084 )	2025-01-28 18:20:57 -08:00
Joaquim Verges GitHubgithub-actions[bot] <github-actions[bot]@users.noreply.github.com>	073b25afd7	Version Packages (#6083 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2025-01-28 17:40:13 -08:00
Joaquim VergesandGitHub	4550bb2663	[SDK] feat: Expose Account and Wallet components in React Native (#6082 )	2025-01-28 16:29:50 -08:00
Manan TankandGitHub	f5f8a40320	[TOOL-3251] Dashboard: Add Rotate Secret Key feature in Project Settings page (#6087 )	2025-01-28 14:21:25 -08:00
Joaquim VergesandGitHub	3569763501	[Dashboard] fix: Use API key for in-app wallet analytics (#6086 )	2025-01-29 09:44:02 +13:00
Joaquim VergesandGitHub	1401f8d039	[SDK] fix: Auto-connection of in-app wallets in React Native (#6076 )	2025-01-29 07:13:09 +13:00
Jonas DanielsandGitHub	1616b7f619	update dependencies (#6079 )	2025-01-27 23:08:39 -08:00
saminaandGitHub	aa548a359f	Nebula docs (#6080 )	2025-01-27 19:22:38 -08:00
Jonas DanielsandGitHub	eef52dfa7e	update plan selection copy and tracking (#6078 )	2025-01-27 16:56:30 -08:00
Joaquim VergesandGitHub	19ec571500	chore: Update PR template format (#6077 )	2025-01-28 13:13:07 +13:00
Jonas DanielsandGitHub	47dce2e05c	remove growth trial eligibility (#6070 )	2025-01-27 15:13:51 -08:00