thirdweb 5.44.2-nightly-7c2f616dfe6880beefa4eb48f8dcbce6bba9461a-20240808000401 → 5.45.0

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

@@ -16,7 +16,6 @@ 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 { useWalletInfo } from "../../../../core/utils/wallet.js";
-import EcosystemWalletConnectUI from "../../../wallets/ecosystem/EcosystemWalletConnectUI.js";
 import { getInjectedWalletLocale } from "../../../wallets/injected/locale/getInjectedWalletLocale.js";
 import { GetStartedScreen } from "../../../wallets/shared/GetStartedScreen.js";
 import { LoadingScreen } from "../../../wallets/shared/LoadingScreen.js";
@@ -38,6 +37,9 @@ const CoinbaseSDKWalletConnectUI = /* @__PURE__ */ lazy(
 const InAppWalletConnectUI = /* @__PURE__ */ lazy(
   () => import("../../../wallets/in-app/InAppWalletConnectUI.js"),
 );
+const EcosystemWalletConnectUI = /* @__PURE__ */ lazy(
+  () => import("../../../wallets/ecosystem/EcosystemWalletConnectUI.js"),
+);
 
 /**
  * @internal

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

@@ -1,7 +1,6 @@
 "use client";
 import { useEffect, useMemo } from "react";
 import type { Chain } from "../../../../../chains/types.js";
-import { cacheChains } from "../../../../../chains/utils.js";
 import type { ThirdwebClient } from "../../../../../client/client.js";
 import type { Wallet } from "../../../../../wallets/interfaces/wallet.js";
 import type { SmartWalletOptions } from "../../../../../wallets/smart/types.js";
@@ -18,6 +17,7 @@ import type { ConnectEmbedProps } from "../../../../core/hooks/connection/Connec
 import { useActiveAccount } from "../../../../core/hooks/wallets/useActiveAccount.js";
 import { useActiveWallet } from "../../../../core/hooks/wallets/useActiveWallet.js";
 import { useIsAutoConnecting } from "../../../../core/hooks/wallets/useIsAutoConnecting.js";
+import { useConnectionManager } from "../../../../core/providers/connection-manager.js";
 import { WalletUIStatesProvider } from "../../../providers/wallet-ui-states-provider.js";
 import { canFitWideModal } from "../../../utils/canFitWideModal.js";
 import { usePreloadWalletProviders } from "../../../utils/usePreloadWalletProviders.js";
@@ -184,15 +184,20 @@ export function ConnectEmbed(props: ConnectEmbedProps) {
   const siweAuth = useSiweAuth(activeWallet, activeAccount, props.auth);
   const show =
     !activeAccount || (siweAuth.requiresAuth && !siweAuth.isLoggedIn);
+  const connectionManager = useConnectionManager();
 
-  // to update cached chains ASAP, we skip using useEffect - this does not trigger a re-render so it's fine
-  if (props.chains) {
-    cacheChains(props.chains);
-  }
+  // Add props.chain and props.chains to defined chains store
+  useEffect(() => {
+    if (props.chain) {
+      connectionManager.defineChains([props.chain]);
+    }
+  }, [props.chain, connectionManager]);
 
-  if (props.chain) {
-    cacheChains([props.chain]);
-  }
+  useEffect(() => {
+    if (props.chains) {
+      connectionManager.defineChains(props.chains);
+    }
+  }, [props.chains, connectionManager]);
 
   const wallets = useMemo(
     () =>

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

@@ -70,7 +70,7 @@ export function useScreenContext() {
   const ctx = useContext(ScreenSetupContext);
   if (!ctx) {
     throw new Error(
-      "useScreenContext must be used within a <ScreenProvider />",
+      "useScreenContext must be used within a <ScreenSetupContext.Provider />",
     );
   }
   return ctx;

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

@@ -16,7 +16,7 @@ import {
   radius,
   spacing,
 } from "../../../core/design-system/index.js";
-import { genericWalletIcon } from "../../../core/utils/socialIcons.js";
+import { genericWalletIcon } from "../../../core/utils/walletIcon.js";
 import { useSetSelectionData } from "../../providers/wallet-ui-states-provider.js";
 import { sortWallets } from "../../utils/sortWallets.js";
 import { LoadingScreen } from "../../wallets/shared/LoadingScreen.js";

package/src/react/web/ui/ConnectWallet/icons/AddUserIcon.tsx

@@ -0,0 +1,25 @@
+import type { IconFC } from "./types.js";
+
+/**
+ * @internal
+ */
+export const AddUserIcon: IconFC = (props) => {
+  return (
+    <svg
+      width={props.size}
+      height={props.size}
+      viewBox="0 0 24 24"
+      fill="none"
+      role="presentation"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12 15.5H7.5C6.10444 15.5 5.40665 15.5 4.83886 15.6722C3.56045 16.06 2.56004 17.0605 2.17224 18.3389C2 18.9067 2 19.6044 2 21M19 21V15M16 18H22M14.5 7.5C14.5 9.98528 12.4853 12 10 12C7.51472 12 5.5 9.98528 5.5 7.5C5.5 5.01472 7.51472 3 10 3C12.4853 3 14.5 5.01472 14.5 7.5Z"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};

package/src/react/web/ui/ConnectWallet/icons/MultiUserIcon.tsx

@@ -0,0 +1,25 @@
+import type { IconFC } from "./types.js";
+
+/**
+ * @internal
+ */
+export const MultiUserIcon: IconFC = (props) => {
+  return (
+    <svg
+      width={props.size}
+      height={props.size}
+      viewBox="0 0 24 24"
+      fill="none"
+      role="presentation"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M22 21V19C22 17.1362 20.7252 15.5701 19 15.126M15.5 3.29076C16.9659 3.88415 18 5.32131 18 7C18 8.67869 16.9659 10.1159 15.5 10.7092M17 21C17 19.1362 17 18.2044 16.6955 17.4693C16.2895 16.4892 15.5108 15.7105 14.5307 15.3045C13.7956 15 12.8638 15 11 15H8C6.13623 15 5.20435 15 4.46927 15.3045C3.48915 15.7105 2.71046 16.4892 2.30448 17.4693C2 18.2044 2 19.1362 2 21M13.5 7C13.5 9.20914 11.7091 11 9.5 11C7.29086 11 5.5 9.20914 5.5 7C5.5 4.79086 7.29086 3 9.5 3C11.7091 3 13.5 4.79086 13.5 7Z"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};

package/src/react/web/ui/ConnectWallet/locale/de.ts

@@ -37,6 +37,10 @@ const connectLocaleDe: ConnectLocale = {
   smartWallet: "Smart Wallet",
   or: "Oder",
   goBackButton: "Zurück",
+  passkeys: {
+    title: "Passkeys",
+    linkPasskey: "Passkey verknüpfen",
+  },
   welcomeScreen: {
     defaultTitle: "Dein Tor zur dezentralen Welt",
     defaultSubtitle: "Verbinde ein Wallet, um loszulegen",
@@ -104,6 +108,8 @@ const connectLocaleDe: ConnectLocale = {
   manageWallet: {
     title: "Wallet verwalten",
     connectAnApp: "App verbinden",
+    linkProfile: "Profil verknüpfen",
+    linkedProfiles: "Verknüpfte Profile",
     exportPrivateKey: "PrivateKey exportieren",
   },
   viewFunds: {

package/src/react/web/ui/ConnectWallet/locale/en.ts

@@ -37,6 +37,10 @@ const connectLocaleEn: ConnectLocale = {
   smartWallet: "Smart Wallet",
   or: "OR",
   goBackButton: "Back",
+  passkeys: {
+    title: "Passkeys",
+    linkPasskey: "Link a Passkey",
+  },
   welcomeScreen: {
     defaultTitle: "Your gateway to the decentralized world",
     defaultSubtitle: "Connect a wallet to get started",
@@ -102,6 +106,8 @@ const connectLocaleEn: ConnectLocale = {
   },
   manageWallet: {
     title: "Manage Wallet",
+    linkedProfiles: "Linked Profiles",
+    linkProfile: "Link a Profile",
     connectAnApp: "Connect an App",
     exportPrivateKey: "Export Private Key",
   },

package/src/react/web/ui/ConnectWallet/locale/es.ts

@@ -37,6 +37,10 @@ const connectWalletLocalEs: ConnectLocale = {
   smartWallet: "Cartera inteligente",
   or: "O",
   goBackButton: "Atras",
+  passkeys: {
+    title: "Clave de acceso",
+    linkPasskey: "Vincular una clave de acceso",
+  },
   welcomeScreen: {
     defaultTitle: "Tu puerta de entrada al mundo descentralizado",
     defaultSubtitle: "Conecta una cartera para empezar",
@@ -104,6 +108,8 @@ const connectWalletLocalEs: ConnectLocale = {
   },
   manageWallet: {
     title: "Gestionar Cartera",
+    linkedProfiles: "Perfiles vinculados",
+    linkProfile: "Vincular un perfil",
     connectAnApp: "Conectar una Aplicación",
     exportPrivateKey: "Exportar Clave Privada",
   },

package/src/react/web/ui/ConnectWallet/locale/fr.ts

@@ -37,6 +37,10 @@ const connectLocaleFr: ConnectLocale = {
   smartWallet: "Portefeuille intelligent",
   or: "OU",
   goBackButton: "Retour",
+  passkeys: {
+    title: "Clés d'accès",
+    linkPasskey: "Lier une clé d'accès",
+  },
   welcomeScreen: {
     defaultTitle: "Votre porte d'entrée vers le monde décentralisé",
     defaultSubtitle: "Connectez un portefeuille pour commencer",
@@ -104,6 +108,8 @@ const connectLocaleFr: ConnectLocale = {
   },
   manageWallet: {
     title: "Gérer le portefeuille",
+    linkedProfiles: "Profils liés",
+    linkProfile: "Lier un profil",
     connectAnApp: "Connecter une application",
     exportPrivateKey: "Exporter la clé privée",
   },

package/src/react/web/ui/ConnectWallet/locale/ja.ts

@@ -37,6 +37,10 @@ const connectWalletLocalJa: ConnectLocale = {
   smartWallet: "スマートウォレット",
   or: "または",
   goBackButton: "戻る", // TODO - check translation
+  passkeys: {
+    linkPasskey: "パスキーをリンクする",
+    title: "パスキー",
+  },
   welcomeScreen: {
     defaultTitle: "分散型世界へのゲートウェイ",
     defaultSubtitle: "始めるためにウォレットを接続してください",
@@ -104,6 +108,8 @@ const connectWalletLocalJa: ConnectLocale = {
   },
   manageWallet: {
     title: "ウォレットを管理",
+    linkedProfiles: "リンクされたプロファイル",
+    linkProfile: "プロフィールをリンクする",
     connectAnApp: "アプリを接続",
     exportPrivateKey: "秘密鍵をエクスポート",
   },

package/src/react/web/ui/ConnectWallet/locale/kr.ts

@@ -36,6 +36,10 @@ const connectLocaleKr: ConnectLocale = {
   smartWallet: "스마트 지갑",
   or: "또는",
   goBackButton: "뒤로",
+  passkeys: {
+    title: "패스키",
+    linkPasskey: "패스키 연결",
+  },
   welcomeScreen: {
     defaultTitle: "분산된 세계로의 게이트웨이",
     defaultSubtitle: "시작하려면 지갑을 연결하십시오",
@@ -101,6 +105,8 @@ const connectLocaleKr: ConnectLocale = {
   },
   manageWallet: {
     title: "지갑 관리",
+    linkedProfiles: "연결된 프로필",
+    linkProfile: "링크 프로필",
     connectAnApp: "앱 연결",
     exportPrivateKey: "개인 키 내보내기",
   },

package/src/react/web/ui/ConnectWallet/locale/tl.ts

@@ -37,7 +37,10 @@ const connectWalletLocalTl: ConnectLocale = {
   smartWallet: "Smart Wallet",
   or: "O",
   goBackButton: "Bumalik",
-
+  passkeys: {
+    title: "Mga Passkey",
+    linkPasskey: "I-link ang Passkey",
+  },
   welcomeScreen: {
     defaultTitle: "Ang iyong daan patungo sa decentralized na mundo",
     defaultSubtitle: "Kumonekta ng wallet para magsimula",
@@ -104,6 +107,8 @@ const connectWalletLocalTl: ConnectLocale = {
   },
   manageWallet: {
     title: "Pamahalaan ang Wallet",
+    linkedProfiles: "Linked Profiles",
+    linkProfile: "Link a Profile",
     connectAnApp: "Ikonekta ang isang App",
     exportPrivateKey: "I-export ang Pribadong Susi",
   },

package/src/react/web/ui/ConnectWallet/locale/types.ts

@@ -25,6 +25,10 @@ export type ConnectLocale = {
   buy: string;
   guestWalletWarning: string;
   installed: string;
+  passkeys: {
+    title: string;
+    linkPasskey: string;
+  };
   networkSelector: {
     addCustomNetwork: string;
     allNetworks: string;
@@ -94,7 +98,9 @@ export type ConnectLocale = {
   welcomeScreen: { defaultSubtitle: string; defaultTitle: string };
   manageWallet: {
     title: string;
+    linkedProfiles: string;
     connectAnApp: string;
+    linkProfile: string;
     exportPrivateKey: string;
   };
   viewFunds: {

package/src/react/web/ui/ConnectWallet/locale/vi.ts

@@ -37,6 +37,10 @@ const connectLocaleVi: ConnectLocale = {
   smartWallet: "Ví Thông Minh",
   or: "hoặc",
   goBackButton: "Quay lại",
+  passkeys: {
+    title: "Khóa truy cập",
+    linkPasskey: "Liên kết khóa truy cập",
+  },
   welcomeScreen: {
     defaultTitle: "Cánh cổng dẫn tới thế giới phi tập trung",
     defaultSubtitle: "Kết nối ví để bắt đầu",
@@ -102,6 +106,8 @@ const connectLocaleVi: ConnectLocale = {
   },
   manageWallet: {
     title: "Quản lý ví",
+    linkedProfiles: "Tài khoản",
+    linkProfile: "Thêm tính năng xác thực",
     connectAnApp: "Kết nối ứng dụng",
     exportPrivateKey: "Sao lưu private key",
   },

package/src/react/web/ui/ConnectWallet/screens/Buy/BuyScreen.tsx

@@ -227,7 +227,11 @@ function BuyScreenContent(props: BuyScreenContentProps) {
           }
         }}
         recommendedWallets={props.connectOptions?.recommendedWallets}
-        showAllWallets={!!props.connectOptions?.showAllWallets}
+        showAllWallets={
+          props.connectOptions?.showAllWallets === undefined
+            ? true
+            : props.connectOptions?.showAllWallets
+        }
         walletConnect={props.connectOptions?.walletConnect}
         wallets={props.connectOptions?.wallets}
       />

package/src/react/web/ui/ConnectWallet/screens/LinkProfileScreen.tsx

@@ -0,0 +1,88 @@
+"use client";
+import { CrossCircledIcon } from "@radix-ui/react-icons";
+import { useQueryClient } from "@tanstack/react-query";
+import { Suspense, lazy } from "react";
+import type { ThirdwebClient } from "../../../../../client/client.js";
+import type { Wallet } from "../../../../../wallets/interfaces/wallet.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 { LoadingScreen } from "../../../wallets/shared/LoadingScreen.js";
+import { Container, Line, ModalHeader } from "../../components/basic.js";
+import { Text } from "../../components/text.js";
+import type { ConnectLocale } from "../locale/types.js";
+
+const InAppWalletConnectUI = /* @__PURE__ */ lazy(
+  () => import("../../../wallets/in-app/InAppWalletConnectUI.js"),
+);
+
+/**
+ * @internal
+ */
+export function LinkProfileScreen(props: {
+  onBack: () => void;
+  locale: ConnectLocale;
+  client: ThirdwebClient;
+}) {
+  const activeWallet = useActiveWallet();
+  const chain = useActiveWalletChain();
+  const queryClient = useQueryClient();
+
+  if (!activeWallet) {
+    return <LoadingScreen />;
+  }
+
+  if (activeWallet.id === "inApp") {
+    return (
+      <Suspense fallback={<LoadingScreen />}>
+        <InAppWalletConnectUI
+          wallet={activeWallet as Wallet<"inApp">}
+          done={() => {
+            queryClient.invalidateQueries({ queryKey: ["profiles"] });
+            props.onBack();
+          }}
+          connectLocale={props.locale}
+          client={props.client}
+          size="compact"
+          chain={chain}
+          meta={{
+            title: props.locale.manageWallet.linkProfile,
+            showThirdwebBranding: false,
+          }}
+          isLinking={true}
+          goBack={props.onBack}
+        />
+      </Suspense>
+    );
+  }
+
+  return (
+    <Container
+      style={{
+        minHeight: "300px",
+      }}
+    >
+      <Container p="lg">
+        <ModalHeader
+          title={props.locale.manageWallet.linkProfile}
+          onBack={props.onBack}
+        />
+      </Container>
+      <Line />
+      <Container
+        flex="column"
+        gap="md"
+        center="both"
+        px="xl"
+        color="secondaryText"
+        style={{
+          flex: "1",
+          minHeight: "250px",
+        }}
+      >
+        <CrossCircledIcon width={iconSize.xl} height={iconSize.xl} />
+        <Text center>This wallet does not support account linking</Text>
+      </Container>
+    </Container>
+  );
+}

package/src/react/web/ui/ConnectWallet/screens/LinkedProfilesScreen.tsx

@@ -0,0 +1,119 @@
+"use client";
+import type { ThirdwebClient } from "../../../../../client/client.js";
+import { shortenAddress } from "../../../../../utils/address.js";
+import type { Profile } from "../../../../../wallets/in-app/core/authentication/types.js";
+import { fontSize, iconSize } from "../../../../core/design-system/index.js";
+import { useProfiles } from "../../../../core/hooks/others/useProfiles.js";
+import { getWalletIcon } from "../../../../core/utils/walletIcon.js";
+import { LoadingScreen } from "../../../wallets/shared/LoadingScreen.js";
+import { Img } from "../../components/Img.js";
+import { Spacer } from "../../components/Spacer.js";
+import { Container, Line, ModalHeader } from "../../components/basic.js";
+import { Text } from "../../components/text.js";
+import { MenuButton } from "../MenuButton.js";
+import { AddUserIcon } from "../icons/AddUserIcon.js";
+import type { ConnectLocale } from "../locale/types.js";
+import type { WalletDetailsModalScreen } from "./types.js";
+
+function getProfileDisplayName(profile: Profile) {
+  switch (true) {
+    case profile.type === "email" && profile.details.email !== undefined:
+      return profile.details.email;
+    case profile.type === "google" && profile.details.email !== undefined:
+      return profile.details.email;
+    case profile.type === "phone" && profile.details.phone !== undefined:
+      return profile.details.phone;
+    case profile.details.address !== undefined:
+      return shortenAddress(profile.details.address, 6);
+    case (profile.type as string) === "cognito" &&
+      profile.details.email !== undefined:
+      return profile.details.email;
+    default:
+      return profile.type.slice(0, 1).toUpperCase() + profile.type.slice(1);
+  }
+}
+
+/**
+ * @internal
+ */
+export function LinkedProfilesScreen(props: {
+  onBack: () => void;
+  setScreen: (screen: WalletDetailsModalScreen) => void;
+  locale: ConnectLocale;
+  client: ThirdwebClient;
+}) {
+  const { data: connectedProfiles, isLoading } = useProfiles();
+
+  if (isLoading) {
+    return <LoadingScreen />;
+  }
+
+  return (
+    <Container
+      style={{
+        minHeight: "300px",
+      }}
+    >
+      <Container p="lg">
+        <ModalHeader
+          title={props.locale.manageWallet.linkedProfiles}
+          onBack={props.onBack}
+        />
+      </Container>
+      <Line />
+      {isLoading ? (
+        <LoadingScreen />
+      ) : (
+        <Container
+          scrollY
+          style={{
+            height: "300px",
+          }}
+        >
+          <Spacer y="md" />
+          <Container px="sm">
+            <MenuButton
+              onClick={() => {
+                props.setScreen("link-profile");
+              }}
+              style={{
+                fontSize: fontSize.sm,
+              }}
+            >
+              <AddUserIcon size={iconSize.md} />
+              <Text color="primaryText">
+                {props.locale.manageWallet.linkProfile}
+              </Text>
+            </MenuButton>
+            <Spacer y="xs" />
+            {connectedProfiles?.map((profile) => (
+              <MenuButton
+                key={`${profile.type}-${getProfileDisplayName(profile)}`}
+                onClick={() => {
+                  props.setScreen("linked-profiles");
+                }}
+                style={{
+                  fontSize: fontSize.sm,
+                  cursor: "default",
+                }}
+                disabled // disabled until we have more data to show on a dedicated profile screen
+              >
+                <Img
+                  src={getWalletIcon(profile.type)}
+                  width={iconSize.md}
+                  height={iconSize.md}
+                  loading="eager"
+                  client={props.client}
+                />
+                <Text color="primaryText">
+                  {getProfileDisplayName(profile)}
+                </Text>
+              </MenuButton>
+            ))}
+          </Container>
+          <Spacer y="md" />
+        </Container>
+      )}
+    </Container>
+  );
+}

package/src/react/web/ui/ConnectWallet/screens/ManageWalletScreen.tsx

@@ -1,7 +1,6 @@
 "use client";
 import { ShuffleIcon } from "@radix-ui/react-icons";
 import type { ThirdwebClient } from "../../../../../client/client.js";
-import { isEcosystemWallet } from "../../../../../wallets/ecosystem/is-ecosystem-wallet.js";
 import { isInAppWallet } from "../../../../../wallets/in-app/core/wallet/index.js";
 import { injectedProvider } from "../../../../../wallets/injected/mipdStore.js";
 import { fontSize, iconSize } from "../../../../core/design-system/index.js";
@@ -11,6 +10,7 @@ import { Container, Line, ModalHeader } from "../../components/basic.js";
 import { Text } from "../../components/text.js";
 import { MenuButton } from "../MenuButton.js";
 import { KeyIcon } from "../icons/KeyIcon.js";
+import { MultiUserIcon } from "../icons/MultiUserIcon.js";
 import { WalletConnectIcon } from "../icons/WalletConnectIcon.js";
 import type { ConnectLocale } from "../locale/types.js";
 import type { WalletDetailsModalScreen } from "./types.js";
@@ -55,6 +55,23 @@ export function ManageWalletScreen(props: {
             connectLocale={props.locale}
           />
 
+          {/* Multi-auth */}
+          {activeWallet?.id === "inApp" && (
+            <MenuButton
+              onClick={() => {
+                props.setScreen("linked-profiles");
+              }}
+              style={{
+                fontSize: fontSize.sm,
+              }}
+            >
+              <MultiUserIcon size={iconSize.md} />
+              <Text color="primaryText">
+                {props.locale.manageWallet.linkedProfiles}
+              </Text>
+            </MenuButton>
+          )}
+
           {/* Wallet Connect Receiver */}
           <MenuButton
             onClick={() => {
@@ -72,9 +89,8 @@ export function ManageWalletScreen(props: {
 
           {/* Private Key Export (if enabled) */}
           {activeWallet &&
-            ((isInAppWallet(activeWallet) &&
-              !activeWallet.getConfig()?.hidePrivateKeyExport) ||
-              isEcosystemWallet(activeWallet)) && (
+            isInAppWallet(activeWallet) &&
+            !activeWallet.getConfig()?.hidePrivateKeyExport && (
               <MenuButton
                 onClick={() => {
                   props.setScreen("private-key");

package/src/react/web/ui/ConnectWallet/screens/types.ts

@@ -73,4 +73,6 @@ export type WalletDetailsModalScreen =
   | "private-key"
   | "manage-wallet"
   | "wallet-connect-receiver"
-  | "wallet-manager";
+  | "wallet-manager"
+  | "link-profile"
+  | "linked-profiles";

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

@@ -1,8 +1,7 @@
 "use client";
 
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import type { Chain } from "../../../chains/types.js";
-import { cacheChains } from "../../../chains/utils.js";
 import type { ThirdwebClient } from "../../../client/client.js";
 import type { Wallet } from "../../../wallets/interfaces/wallet.js";
 import type { SmartWalletOptions } from "../../../wallets/smart/types.js";
@@ -14,6 +13,7 @@ import type {
   ConnectButton_connectModalOptions,
   PayUIOptions,
 } from "../../core/hooks/connection/ConnectButtonProps.js";
+import { useConnectionManager } from "../../core/providers/connection-manager.js";
 import type { SupportedTokens } from "../../core/utils/defaultTokens.js";
 import { EmbedContainer } from "./ConnectWallet/Modal/ConnectEmbed.js";
 import { useConnectLocale } from "./ConnectWallet/locale/getConnectLocale.js";
@@ -156,15 +156,20 @@ export function PayEmbed(props: PayEmbedProps) {
   const localeQuery = useConnectLocale(props.locale || "en_US");
   const [screen, setScreen] = useState<"buy" | "execute-tx">("buy");
   const theme = props.theme || "dark";
+  const connectionManager = useConnectionManager();
 
-  // to update cached chains ASAP, we skip using useEffect - this does not trigger a re-render so it's fine
-  if (props.connectOptions?.chains) {
-    cacheChains(props.connectOptions?.chains);
-  }
+  // Add props.chain and props.chains to defined chains store
+  useEffect(() => {
+    if (props.connectOptions?.chain) {
+      connectionManager.defineChains([props.connectOptions?.chain]);
+    }
+  }, [props.connectOptions?.chain, connectionManager]);
 
-  if (props.connectOptions?.chain) {
-    cacheChains([props.connectOptions?.chain]);
-  }
+  useEffect(() => {
+    if (props.connectOptions?.chains) {
+      connectionManager.defineChains(props.connectOptions?.chains);
+    }
+  }, [props.connectOptions?.chains, connectionManager]);
 
   let content = null;
   const metadata =

package/src/react/web/ui/components/Spinner.tsx

@@ -27,7 +27,7 @@ export const Spinner: React.FC<{
         r="20"
         fill="none"
         stroke={theme.colors[props.color]}
-        strokeWidth="4"
+        strokeWidth={Number(iconSize[props.size]) > 64 ? "2" : "4"}
       />
     </Svg>
   );