Version Packages (#6111 )

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
chore: change to per-product usageV2 topic (#6113 )
2025-01-29 22:45:20 -08:00 · 2025-01-29 22:32:42 -08:00 · 2025-01-30 06:05:07 +00:00 · 2025-01-29 16:59:25 -08:00 · 2025-01-29 16:55:21 -08:00 · 2025-01-29 14:52:28 -08:00
91 changed files with 6979 additions and 5052 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.52.0",
+    "@shazow/whatsabi": "^0.19.0",
+    "@tanstack/react-query": "5.65.1",
    "@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/functions": "^1.6.0",
+    "@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.2",
    "pluralize": "^8.0.0",
    "posthog-js": "1.67.1",
    "qrcode": "^1.5.3",
@@ -83,17 +83,17 @@
    "react-day-picker": "^8.10.1",
    "react-dom": "19.0.0",
    "react-dropzone": "^14.3.5",
-    "react-error-boundary": "^4.1.2",
+    "react-error-boundary": "^5.0.0",
    "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.3",
    "spdx-correct": "^3.2.0",
-    "swagger-ui-react": "^5.18.2",
+    "swagger-ui-react": "^5.18.3",
    "tailwind-merge": "^2.6.0",
    "tailwindcss-animate": "^1.0.7",
    "thirdweb": "workspace:*",
@@ -103,42 +103,42 @@
  },
  "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",
-    "checkly": "^4.18.0",
+    "checkly": "^4.19.1",
    "eslint": "8.57.0",
    "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.6",
    "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[];
 };

@@ -8,7 +8,7 @@ import {
 import { useThirdwebClient } from "@/constants/thirdweb.client";
 import { resolveSchemeWithErrorHandler } from "@/lib/resolveSchemeWithErrorHandler";
 import { useClipboard } from "hooks/useClipboard";
-import { Check, Copy, ExternalLinkIcon } from "lucide-react";
+import { Check, Copy } from "lucide-react";
 import { useMemo } from "react";
 import { type ThirdwebClient, isAddress } from "thirdweb";
 import { ZERO_ADDRESS } from "thirdweb";
@@ -148,21 +148,6 @@ export function WalletAddress(props: {
              );
            })
          )}
-          <Button
-            asChild
-            variant="upsell"
-            className="flex flex-row items-center gap-2 text-sm"
-            size="sm"
-          >
-            <a
-              target="_blank"
-              href="https://blog.thirdweb.com/changelog/introducing-the-social-sdk?ref=dashboard-social-wallet"
-              rel="noreferrer"
-            >
-              Learn more
-              <ExternalLinkIcon className="size-4" />
-            </a>
-          </Button>
        </div>
      </HoverCardContent>
    </HoverCard>
@@ -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.3",
    "@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.1",
+    "@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.1",
    "@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.6",
    "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"
  }
 }
@@ -4,6 +4,11 @@

 We are rolling out Nebula approval in batches daily - stay tuned! 

+### Which contracts does Nebula support?
+Nebula supports the read and write context of any verified contract or any contract on the thirdweb dashboard. For deploying through Nebula, supported contracts include [Token - ERC20](https://thirdweb.com/thirdweb.eth/TokenERC20), [NFT Collection - ERC721](https://thirdweb.com/thirdweb.eth/TokenERC721), [Edition - ERC1155](https://thirdweb.com/thirdweb.eth/TokenERC1155), and [Split](https://thirdweb.com/thirdweb.eth/Split) contracts. 
+
+If you have a published contract you would like to enable for deployment through Nebula, please [contact us](https://thirdweb.com/contact-us). 
+
 ### Does Nebula have memory from past conversations?
 Nebula retains memory within the confines of a session.

@@ -16,4 +21,4 @@ Nebula is not currently open source. We are exploring open sourcing Nebula in th

 ### When will pricing be available for Nebula?

-Pricing options will be available in beta. Nebula is still being tested in alpha.
+Pricing options will be available in beta. Nebula is still being tested in alpha.
@@ -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];
@@ -0,0 +1,40 @@
+# OpenAI
+
+### Chat Completions API
+
+Compatible with OpenAI’s Chat Completion API to process chat history and generate context-aware responses.
+
+```python
+from openai import OpenAI
+
+client = OpenAI(
+	base_url="https://nebula-api.thirdweb.com",
+	api_key="{{THIRDWEB_SECRET_KEY}}",
+)
+chat_completion = client.chat.completions.create(
+	model="t0",
+	messages=[{"role": "user", "content": "Hello Nebula!"}],
+	stream=False,
+    extra_body={ "context": { "wallet_address": "0x..." }}
+)
+
+print(chat_completion)
+```
+
+### Models API
+
+Compatible with OpenAI’s Models API to list out models used. 
+
+```python
+from openai import OpenAI
+
+# https://nebula-api.thirdweb.com/models
+
+client = OpenAI(
+    base_url="https://nebula-api.thirdweb.com/",
+    api_key="",
+)
+
+models = client.models.list()
+print(models)
+```
@@ -2,11 +2,7 @@ import { Callout } from '@doc'

 # Plugins

+- [OpenAI](/nebula/plugins/openai)
+- [Eliza](/nebula/plugins/eliza)

-<Callout variant='info' title='Coming Soon'>
-
-We are actively developing plugins to develop with other frameworks and languages.
-
-If you have a specific request, please [contact us](https://thirdweb.com/contact).
-
- </Callout>
+We are actively adding more integrations, for any specific requests please [contact us](https://thirdweb.com/contact).
@@ -110,10 +110,14 @@ export const sidebar: SideBar = {
      ],
    },
    {
-      name: "Plugins",
+      name: "Plugins & Integrations",
      href: "/nebula/plugins",
      icon: <Blocks />,
      links: [
+        {
+          name: "OpenAI",
+          href: "/nebula/plugins/openai",
+        },
        {
          name: "Eliza",
          href: "/nebula/plugins/eliza",
@@ -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.1",
    "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.3",
    "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.6",
+    "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,35 @@
 # @thirdweb-dev/service-utils

+## 0.8.2
+
+### Patch Changes
+
+- [#6113](https://github.com/thirdweb-dev/js/pull/6113) [`6818cba`](https://github.com/thirdweb-dev/js/commit/6818cbabf25ce73d09dfc971ae793cd9844ceca7) Thanks [@arcoraven](https://github.com/arcoraven)! - Change UsageV2 to per-product topics
+
+## 0.8.1
+
+### Patch Changes
+
+- [#6106](https://github.com/thirdweb-dev/js/pull/6106) [`3361140`](https://github.com/thirdweb-dev/js/commit/33611409b0efd58803be4a96194f5872ddf4bde0) Thanks [@jnsdls](https://github.com/jnsdls)! - updated dependencies
+
+## 0.8.0
+
+### Minor Changes
+
+- [#6101](https://github.com/thirdweb-dev/js/pull/6101) [`e8892b1`](https://github.com/thirdweb-dev/js/commit/e8892b152f70d3024dfbefcddcfa74a69a12bdd0) Thanks [@jnsdls](https://github.com/jnsdls)! - pass `team` instead of `project` to `rateLimit`
+
+## 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.8.2",
  "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.20250129.0",
+    "@types/node": "22.10.10",
+    "typescript": "5.7.3",
+    "vitest": "3.0.4"
  },
  "scripts": {
    "format": "biome format ./src --write",
@@ -1,4 +1,5 @@
-import type { UsageV2Event } from "../core/usageV2.js";
+import type { ServiceName } from "../core/services.js";
+import { type UsageV2Event, getTopicName } from "../core/usageV2.js";

 /**
 * Send events to Kafka.
@@ -19,6 +20,7 @@ export async function sendUsageV2Events(
  events: UsageV2Event[],
  options: {
    environment: "development" | "production";
+    productName: ServiceName;
    serviceKey: string;
  },
 ): Promise<void> {
@@ -27,7 +29,8 @@ export async function sendUsageV2Events(
      ? "https://u.thirdweb.com"
      : "https://u.thirdweb-dev.com";

-  const resp = await fetch(`${baseUrl}/usage-v2/raw-events`, {
+  const topic = getTopicName(options.productName);
+  const resp = await fetch(`${baseUrl}/usage-v2/${topic}`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
@@ -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[];
 };

@@ -163,24 +164,3 @@ export async function fetchTeamAndProject(
    );
  }
 }
-
-export async function updateRateLimitedAt(
-  projectId: string,
-  config: CoreServiceConfig,
-): Promise<void> {
-  const { apiUrl, serviceScope: scope, serviceApiKey } = config;
-
-  const url = `${apiUrl}/usage/rateLimit`;
-
-  await fetch(url, {
-    method: "PUT",
-    headers: {
-      "x-service-api-key": serviceApiKey,
-      "content-type": "application/json",
-    },
-    body: JSON.stringify({
-      apiKeyId: projectId, // projectId is the apiKeyId
-      scope,
-    }),
-  });
-}
@@ -1,8 +1,4 @@
-import {
-  type CoreServiceConfig,
-  type ProjectResponse,
-  updateRateLimitedAt,
-} from "../api.js";
+import type { CoreServiceConfig, TeamResponse } from "../api.js";
 import type { RateLimitResult } from "./types.js";

 const RATE_LIMIT_WINDOW_SECONDS = 10;
@@ -14,7 +10,7 @@ type IRedis = {
 };

 export async function rateLimit(args: {
-  project?: ProjectResponse;
+  team: TeamResponse;
  limitPerSecond: number;
  serviceConfig: CoreServiceConfig;
  redis: IRedis;
@@ -25,13 +21,7 @@ export async function rateLimit(args: {
   */
  sampleRate?: number;
 }): Promise<RateLimitResult> {
-  const {
-    project,
-    limitPerSecond,
-    serviceConfig,
-    redis,
-    sampleRate = 1.0,
-  } = args;
+  const { team, limitPerSecond, serviceConfig, redis, sampleRate = 1.0 } = args;

  const shouldSampleRequest = Math.random() < sampleRate;
  if (!shouldSampleRequest) {
@@ -57,7 +47,7 @@ export async function rateLimit(args: {
  const timestampWindow =
    Math.floor(Date.now() / (1000 * RATE_LIMIT_WINDOW_SECONDS)) *
    RATE_LIMIT_WINDOW_SECONDS;
-  const key = `rate-limit:${serviceScope}:${project?.id}:${timestampWindow}`;
+  const key = `rate-limit:${serviceScope}:${team.id}:${timestampWindow}`;

  // Increment and get the current request count in this window.
  const requestCount = await redis.incr(key);
@@ -71,17 +61,6 @@ export async function rateLimit(args: {
    limitPerSecond * sampleRate * RATE_LIMIT_WINDOW_SECONDS;

  if (requestCount > limitPerWindow) {
-    /**
-     * Report rate limit hits.
-     * Only track rate limit when its hit for the first time.
-     * Not waiting for tracking to complete as user doesn't need to wait.
-     */
-    if (requestCount === limitPerWindow + 1 && project?.id) {
-      updateRateLimitedAt(project.id, serviceConfig).catch(() => {
-        // no-op
-      });
-    }
-
    return {
      rateLimited: true,
      requestCount,
@@ -1,6 +1,5 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import { validProjectResponse, validServiceConfig } from "../../mocks.js";
-import { updateRateLimitedAt } from "../api.js";
+import { validServiceConfig, validTeamResponse } from "../../mocks.js";
 import { rateLimit } from "./index.js";

 const mockRedis = {
@@ -8,11 +7,6 @@ const mockRedis = {
  expire: vi.fn(),
 };

-// Mocking the updateRateLimitedAt function
-vi.mock("../../../src/core/api", () => ({
-  updateRateLimitedAt: vi.fn().mockResolvedValue({}),
-}));
-
 describe("rateLimit", () => {
  beforeEach(() => {
    // Clear mock function calls and reset any necessary state.
@@ -27,7 +21,7 @@ describe("rateLimit", () => {

  it("should not rate limit if service scope is not in rate limits", async () => {
    const result = await rateLimit({
-      project: validProjectResponse,
+      team: validTeamResponse,
      limitPerSecond: 0,
      serviceConfig: validServiceConfig,
      redis: mockRedis,
@@ -44,7 +38,7 @@ describe("rateLimit", () => {
    mockRedis.incr.mockResolvedValue(50); // Current count is 50 requests in 10 seconds.

    const result = await rateLimit({
-      project: validProjectResponse,
+      team: validTeamResponse,
      limitPerSecond: 5,
      serviceConfig: validServiceConfig,
      redis: mockRedis,
@@ -55,7 +49,7 @@ describe("rateLimit", () => {
      requestCount: 50,
      rateLimit: 50,
    });
-    expect(updateRateLimitedAt).not.toHaveBeenCalled();
+
    expect(mockRedis.expire).not.toHaveBeenCalled();
  });

@@ -63,7 +57,7 @@ describe("rateLimit", () => {
    mockRedis.incr.mockResolvedValue(51);

    const result = await rateLimit({
-      project: validProjectResponse,
+      team: validTeamResponse,
      limitPerSecond: 5,
      serviceConfig: validServiceConfig,
      redis: mockRedis,
@@ -77,7 +71,7 @@ describe("rateLimit", () => {
      errorMessage: `You've exceeded your storage rate limit at 5 reqs/sec. To get higher rate limits, contact us at https://thirdweb.com/contact-us.`,
      errorCode: "RATE_LIMIT_EXCEEDED",
    });
-    expect(updateRateLimitedAt).toHaveBeenCalled();
+
    expect(mockRedis.expire).not.toHaveBeenCalled();
  });

@@ -85,7 +79,7 @@ describe("rateLimit", () => {
    mockRedis.incr.mockResolvedValue(1);

    const result = await rateLimit({
-      project: validProjectResponse,
+      team: validTeamResponse,
      limitPerSecond: 5,
      serviceConfig: validServiceConfig,
      redis: mockRedis,
@@ -104,7 +98,7 @@ describe("rateLimit", () => {
    vi.spyOn(global.Math, "random").mockReturnValue(0.08);

    const result = await rateLimit({
-      project: validProjectResponse,
+      team: validTeamResponse,
      limitPerSecond: 5,
      serviceConfig: validServiceConfig,
      redis: mockRedis,
@@ -127,7 +121,7 @@ describe("rateLimit", () => {
    vi.spyOn(global.Math, "random").mockReturnValue(0.15);

    const result = await rateLimit({
-      project: validProjectResponse,
+      team: validTeamResponse,
      limitPerSecond: 5,
      serviceConfig: validServiceConfig,
      redis: mockRedis,
@@ -1,3 +1,5 @@
+import type { ServiceName } from "../node/index.js";
+
 export interface UsageV2Event {
  /**
   * A unique identifier for the event. Defaults to a random UUID.
@@ -8,10 +10,6 @@ export interface UsageV2Event {
   * The event timestamp. Defaults to now().
   */
  created_at?: Date;
-  /**
-   * The source of the event. Example: "storage"
-   */
-  source: string;
  /**
   * The action of the event. Example: "upload"
   */
@@ -49,8 +47,12 @@ export interface UsageV2Event {
   */
  product_version?: string;
  /**
-   * An object of service-specific data. Example: "file_size_bytes"
-   * It is safe to pass any new JSON-serializable data here before updating the usageV2 schema.
+   * An object of arbitrary key-value pairs.
+   * Values can be boolean, number, string, Date, or null.
   */
-  data: Record<string, unknown>;
+  [key: string]: boolean | number | string | Date | null | undefined;
+}
+
+export function getTopicName(productName: ServiceName) {
+  return `usage_v2.raw_${productName}`;
 }
@@ -10,7 +10,7 @@ export type {
  TeamResponse,
 } from "./core/api.js";

-export { fetchTeamAndProject, updateRateLimitedAt } from "./core/api.js";
+export { fetchTeamAndProject } from "./core/api.js";

 export {
  authorizeBundleId,
@@ -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,9 +1,8 @@
 import { randomUUID } from "node:crypto";
 import { checkServerIdentity } from "node:tls";
 import { Kafka, type Producer } from "kafkajs";
-import type { UsageV2Event } from "../core/usageV2.js";
-
-const TOPIC_USAGE_V2 = "usage_v2.raw_events";
+import type { ServiceName } from "../core/services.js";
+import { type UsageV2Event, getTopicName } from "../core/usageV2.js";

 /**
 * Creates a UsageV2Producer which opens a persistent TCP connection.
@@ -21,6 +20,7 @@ const TOPIC_USAGE_V2 = "usage_v2.raw_events";
 export class UsageV2Producer {
  private kafka: Kafka;
  private producer: Producer | null = null;
+  private topic: string;

  constructor(config: {
    /**
@@ -31,6 +31,10 @@ export class UsageV2Producer {
     * The environment the service is running in.
     */
    environment: "development" | "production";
+    /**
+     * The product "source" where usage is coming from.
+     */
+    productName: ServiceName;

    username: string;
    password: string;
@@ -52,6 +56,8 @@ export class UsageV2Producer {
        password: config.password,
      },
    });
+
+    this.topic = getTopicName(config.productName);
  }

  /**
@@ -82,27 +88,18 @@ export class UsageV2Producer {

    const parsedEvents = events.map((event) => {
      return {
+        ...event,
        id: event.id ?? randomUUID(),
        created_at: event.created_at ?? new Date(),
-        source: event.source,
-        action: event.action,
        // Remove the "team_" prefix, if any.
        team_id: event.team_id.startsWith("team_")
          ? event.team_id.slice(5)
          : event.team_id,
-        project_id: event.project_id,
-        sdk_name: event.sdk_name,
-        sdk_platform: event.sdk_platform,
-        sdk_version: event.sdk_version,
-        sdk_os: event.sdk_os,
-        product_name: event.product_name,
-        product_version: event.product_version,
-        data: JSON.stringify(event.data),
      };
    });

    await this.producer.send({
-      topic: TOPIC_USAGE_V2,
+      topic: this.topic,
      messages: parsedEvents.map((event) => ({
        value: JSON.stringify(event),
      })),
@@ -1,5 +1,92 @@
 # thirdweb

+## 5.87.2
+
+### Patch Changes
+
+- [#6104](https://github.com/thirdweb-dev/js/pull/6104) [`bf43196`](https://github.com/thirdweb-dev/js/commit/bf431961ec685deefc0089b8d644c35f849fbf86) Thanks [@MananTank](https://github.com/MananTank)! - Fix thirdweb Pay Modal logging react-query error when opened
+
+## 5.87.1
+
+### Patch Changes
+
+- [#6106](https://github.com/thirdweb-dev/js/pull/6106) [`3361140`](https://github.com/thirdweb-dev/js/commit/33611409b0efd58803be4a96194f5872ddf4bde0) Thanks [@jnsdls](https://github.com/jnsdls)! - updated dependencies
+
+- [#6105](https://github.com/thirdweb-dev/js/pull/6105) [`ab55aec`](https://github.com/thirdweb-dev/js/commit/ab55aec10ccb078add40bd774d157bc0f19ab0bf) Thanks [@joaquim-verges](https://github.com/joaquim-verges)! - Allow connecting wallets without setting them as active with useConnect
+
+## 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
+
+- [#6074](https://github.com/thirdweb-dev/js/pull/6074) [`94e2d5b`](https://github.com/thirdweb-dev/js/commit/94e2d5b8ddd90c0eaa985d02b08b9afa9f8e6676) Thanks [@joaquim-verges](https://github.com/joaquim-verges)! - Fix account linking for ecosystem smart wallets
+
 ## 5.86.5

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "thirdweb",
-  "version": "5.86.5",
+  "version": "5.87.2",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/thirdweb-dev/js.git#main"
@@ -211,24 +211,24 @@
    "@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.1",
+    "@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"
+    "viem": "2.22.17"
  },
  "peerDependencies": {
    "@aws-sdk/client-lambda": "^3",
@@ -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.6",
+    "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"
  }
 }
@@ -83,7 +83,7 @@ export function prepareDirectDeployTransaction(
 * ## Deploying a regular contract from ABI and bytecode
 *
 * ```ts
- * import { deployContract } from "thirdweb/deployContract";
+ * import { deployContract } from "thirdweb/deploys";
 *
 * const address = await deployContract({
 *  client,
@@ -101,7 +101,7 @@ export function prepareDirectDeployTransaction(
 * ## Deploying a contract deterministically
 *
 * ```ts
- * import { deployContract } from "thirdweb/deployContract";
+ * import { deployContract } from "thirdweb/deploys";
 *
 * const address = await deployContract({
 *  client,
@@ -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,8 @@
 "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";
 /**
 * Props for the <AccountProvider /> component
 * @component
@@ -14,7 +12,7 @@ export type AccountProviderProps = {
  /**
   * The user's wallet address
   */
-  address: Address;
+  address: string;
  /**
   * thirdweb Client
   */
@@ -35,7 +33,7 @@ const AccountProviderContext = /* @__PURE__ */ createContext<
 * ```tsx
 * import { AccountProvider, AccountAvatar, AccountName, AccountAddress  } from "thirdweb/react";
 *
- * <AccountProvider>
+ * <AccountProvider address="0x..." client={client}>
 *   <AccountAvatar />
 *   <AccountName />
 *   <AccountAddress />
@@ -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
+ */
+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;
+}
@@ -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";
@@ -7,6 +7,7 @@ import { isEcosystemWallet } from "../../../../../wallets/ecosystem/is-ecosystem
 import type { Wallet } from "../../../../../wallets/interfaces/wallet.js";
 import type { EcosystemWalletId } from "../../../../../wallets/wallet-types.js";
 import { iconSize } from "../../../../core/design-system/index.js";
+import { useActiveWallet } from "../../../../core/hooks/wallets/useActiveWallet.js";
 import { useActiveWalletChain } from "../../../../core/hooks/wallets/useActiveWalletChain.js";
 import { useAdminWallet } from "../../../../core/hooks/wallets/useAdminWallet.js";
 import EcosystemWalletConnectUI from "../../../wallets/ecosystem/EcosystemWalletConnectUI.js";
@@ -28,20 +29,23 @@ export function LinkProfileScreen(props: {
  client: ThirdwebClient;
  walletConnect: { projectId?: string } | undefined;
 }) {
-  const activeWallet = useAdminWallet();
+  const adminWallet = useAdminWallet();
+  const activeWallet = useActiveWallet();
  const chain = useActiveWalletChain();
  const queryClient = useQueryClient();

-  if (!activeWallet) {
+  const wallet = adminWallet || activeWallet;
+
+  if (!wallet) {
    return <LoadingScreen />;
  }

-  if (activeWallet.id === "inApp") {
+  if (wallet.id === "inApp") {
    return (
      <Suspense fallback={<LoadingScreen />}>
        <InAppWalletConnectUI
          walletConnect={props.walletConnect}
-          wallet={activeWallet as Wallet<"inApp">}
+          wallet={wallet as Wallet<"inApp">}
          done={() => {
            setTimeout(() => {
              queryClient.invalidateQueries({ queryKey: ["profiles"] });
@@ -63,11 +67,11 @@ export function LinkProfileScreen(props: {
    );
  }

-  if (isEcosystemWallet(activeWallet)) {
+  if (isEcosystemWallet(wallet)) {
    return (
      <Suspense fallback={<LoadingScreen />}>
        <EcosystemWalletConnectUI
-          wallet={activeWallet as Wallet<EcosystemWalletId>}
+          wallet={wallet as Wallet<EcosystemWalletId>}
          done={() => {
            setTimeout(() => {
              queryClient.invalidateQueries({ queryKey: ["profiles"] });
@@ -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");
@@ -37,7 +37,9 @@ export function TransactionModal(props: ModalProps) {
  useQuery({
    queryKey: ["transaction-modal-event"],
    queryFn: () => {
-      if (!account || !wallet) return;
+      if (!account || !wallet) {
+        throw new Error(); // never happens, because enabled is false
+      }
      trackPayEvent({
        client: props.client,
        walletAddress: account.address,
@@ -45,8 +47,10 @@ export function TransactionModal(props: ModalProps) {
        dstChainId: props.tx.chain.id,
        event: "open_pay_transaction_modal",
      });
+
+      return null;
    },
-    enabled: !!wallet,
+    enabled: !!wallet && !!account,
  });

  return (
@@ -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;
 }
@@ -24,6 +24,7 @@ export type ConnectionManager = ReturnType<typeof createConnectionManager>;
 export type ConnectManagerOptions = {
  client: ThirdwebClient;
  accountAbstraction?: SmartWalletOptions;
+  setWalletAsActive?: boolean;
  onConnect?: (wallet: Wallet) => void;
 };

@@ -146,7 +147,9 @@ export function createConnectionManager(storage: AsyncStorage) {
    // add personal wallet to connected wallets list even if it's not the active one
    addConnectedWallet(wallet);

-    handleSetActiveWallet(activeWallet);
+    if (options?.setWalletAsActive !== false) {
+      handleSetActiveWallet(activeWallet);
+    }

    wallet.subscribe("accountChanged", async () => {
      // We reimplement connect here to prevent memory leaks
@@ -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,23 @@
 # @thirdweb-dev/wagmi-adapter

+## 0.2.10
+
+## 0.2.9
+
+## 0.2.8
+
+### Patch Changes
+
+- [#6100](https://github.com/thirdweb-dev/js/pull/6100) [`411895c`](https://github.com/thirdweb-dev/js/commit/411895c0027200fc580fcd58a2ac440da6e227a0) Thanks [@gregfromstl](https://github.com/gregfromstl)! - Fix wagmi adapter usage with account factories
+
+## 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

 ## 0.2.4
@@ -1,6 +1,6 @@
 {
 	"name": "@thirdweb-dev/wagmi-adapter",
-	"version": "0.2.5",
+	"version": "0.2.10",
 	"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:*"
 	},
@@ -95,9 +95,10 @@ export function inAppWalletConnector(
      const lastChainId = await config.storage?.getItem("tw.lastChainId");
      if (params?.isReconnecting) {
        const { autoConnect } = await import("thirdweb/wallets");
+        const chainId = lastChainId || args.smartAccount?.chain?.id || 1;
        await autoConnect({
          client,
-          chain: defineChain(lastChainId || 1),
+          chain: defineChain(chainId),
          wallets: [wallet],
        });

@@ -108,7 +109,7 @@ export function inAppWalletConnector(

        return {
          accounts: [getAddress(account.address)],
-          chainId: lastChainId || 1,
+          chainId: chainId,
        };
      }
      const inAppOptions = params && "strategy" in params ? params : undefined;
@@ -117,7 +118,12 @@ export function inAppWalletConnector(
          "Missing strategy prop, pass it to connect() when connecting to this connector",
        );
      }
-      const chain = defineChain(inAppOptions?.chainId || lastChainId || 1);
+      const chain = defineChain(
+        inAppOptions?.chainId ||
+          lastChainId ||
+          args.smartAccount?.chain?.id ||
+          1,
+      );
      const decoratedOptions = {
        ...inAppOptions,
        client,
Author	SHA1	Message	Date
Joaquim Verges GitHubgithub-actions[bot] <github-actions[bot]@users.noreply.github.com>	c65022174d	Version Packages (#6111 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2025-01-29 22:45:20 -08:00
Phillip HoandGitHub	6818cbabf2	chore: change to per-product usageV2 topic (#6113 )	2025-01-29 22:32:42 -08:00
gregfromstl	a7fb844d87	[Dashboard] Fix: Remove learn more button (#6109 ) <!-- ## 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. --> <!-- start pr-codex --> --- ## PR-Codex overview This PR focuses on simplifying the `WalletAddress` component by removing the "Learn more" button and its associated link to the blog, while also cleaning up the imports by removing the unused `ExternalLinkIcon`. ### Detailed summary - Removed the unused import of `ExternalLinkIcon` from `lucide-react`. - Eliminated the "Learn more" button, which included: - The button element with `asChild`, `variant`, `className`, and `size` props. - The inner `<a>` element linking to the blog post. > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}` <!-- end pr-codex -->	2025-01-30 06:05:07 +00:00
Manan TankandGitHub	bf431961ec	[TOOL-3260] SDK: Fix Pay Modal logging react-query error when opened (#6104 )	2025-01-29 16:59:25 -08:00
gregandGitHub	c5d4cab8f8	[Portal] Fix: deployContract doc imports (#6108 )	2025-01-29 16:55:21 -08:00
Joaquim Verges GitHubgithub-actions[bot] <github-actions[bot]@users.noreply.github.com>	1ee0dffec4	Version Packages (#6107 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2025-01-29 14:52:28 -08:00
Jonas DanielsandGitHub	33611409b0	update dependencies (#6106 )	2025-01-29 14:34:20 -08:00
Joaquim VergesandGitHub	ab55aec10c	[SDK] feat: Optional wallet activation during connection (#6105 )	2025-01-29 14:21:08 -08:00
Joaquim Verges GitHubgithub-actions[bot] <github-actions[bot]@users.noreply.github.com>	ca22e4659e	Version Packages (#6097 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2025-01-29 12:18:06 -08:00
gregandGitHub	411895c002	[Wagmi Adapter] Fix: Fallback to smart account chain in autoconnect (#6100 )	2025-01-29 11:35:51 -08:00
Jonas Daniels GitHub saminacodes Joaquim Vergesgithub-actions[bot] <github-actions[bot]@users.noreply.github.com>samina	cfa1c20a91	Saminacodes patch 1 (#6103 ) Co-authored-by: saminacodes <[email protected]> Co-authored-by: Joaquim Verges <[email protected]> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: samina <[email protected]>	2025-01-29 11:34:04 -08:00
Jonas Daniels GitHub samina Joaquim Vergesgithub-actions[bot] <github-actions[bot]@users.noreply.github.com>samina	2b16f90715	Open ai docs (#6102 ) Co-authored-by: samina <[email protected]> Co-authored-by: Joaquim Verges <[email protected]> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: samina <[email protected]>	2025-01-29 11:33:18 -08:00
Jonas Daniels GitHub Joaquim Vergesgithub-actions[bot] <github-actions[bot]@users.noreply.github.com>	e8892b152f	Pass team instead of project to rate limit (#6101 ) Co-authored-by: Joaquim Verges <[email protected]> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2025-01-29 11:32:13 -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
Joaquim Verges GitHubgithub-actions[bot] <github-actions[bot]@users.noreply.github.com>	8b4695224c	Version Packages (#6075 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2025-01-28 12:00:53 +13:00
Joaquim VergesandGitHub	94e2d5b8dd	[SDK] fix: Account linking for ecosystem smart wallets (#6074 )	2025-01-28 11:44:05 +13:00