thirdweb 5.30.0-nightly-33777df88fb190c2af8ad25e4930040884996f1e-20240620000630 → 5.30.0-nightly-fab5cd43bed972b0a3f70f0f39a790349672ba72-20240620192731

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

@@ -1,6 +1,6 @@
 "use client";
 import { useQuery } from "@tanstack/react-query";
-import { Suspense, lazy, useState } from "react";
+import { Suspense, lazy, useEffect, useState } from "react";
 import { isMobile } from "../../../../../utils/web/isMobile.js";
 import type {
   DeepLinkSupportedWalletIds,
@@ -8,9 +8,14 @@ import type {
   WCSupportedWalletIds,
 } from "../../../../../wallets/__generated__/wallet-ids.js";
 import { COINBASE } from "../../../../../wallets/constants.js";
+import { isEcosystemWallet } from "../../../../../wallets/ecosystem/is-ecosystem-wallet.js";
 import { getInstalledWalletProviders } from "../../../../../wallets/injected/mipdStore.js";
 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 { useConnectUI } from "../../../../core/hooks/others/useWalletConnectionCtx.js";
+import { useSetSelectionData } from "../../../providers/wallet-ui-states-provider.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";
@@ -18,7 +23,11 @@ import {
   WalletConnectConnection,
   WalletConnectStandaloneConnection,
 } from "../../../wallets/shared/WalletConnectConnection.js";
+import { Spacer } from "../../components/Spacer.js";
+import { Container, ModalHeader } from "../../components/basic.js";
+import { Text } from "../../components/text.js";
 import { useWalletInfo } from "../../hooks/useWalletInfo.js";
+import { AccentFailIcon } from "../icons/AccentFailIcon.js";
 import { DeepLinkConnectUI } from "./DeepLinkConnectUI.js";
 import { InjectedConnectUI } from "./InjectedConnectUI.js";
 
@@ -41,26 +50,76 @@ export function AnyWalletConnectUI(props: {
   const [screen, setScreen] = useState<"main" | "get-started">("main");
   const { wallet } = props;
   const walletInfo = useWalletInfo(props.wallet.id);
+  const setSelectionData = useSetSelectionData();
   const localeId = useConnectUI().locale;
 
-  const localeQuery = useQuery({
+  // biome-ignore lint/correctness/useExhaustiveDependencies: reset the selection data when the wallet changes
+  useEffect(() => {
+    setSelectionData({});
+  }, [wallet.id]);
+
+  const localeFnQuery = useQuery({
     queryKey: ["injectedWalletLocale", localeId, walletInfo.data?.name],
     queryFn: async () => {
-      if (!walletInfo.data) {
-        throw new Error("Wallet info not available");
-      }
-      const w = await getInjectedWalletLocale(localeId);
-      return w(walletInfo.data.name);
+      return getInjectedWalletLocale(localeId);
     },
-    enabled: !!walletInfo.data,
     refetchOnWindowFocus: false,
     refetchOnMount: false,
   });
 
-  if (!walletInfo.data || !localeQuery.data) {
+  if (walletInfo.isLoading || !localeFnQuery.data) {
     return <LoadingScreen />;
   }
 
+  const localeFn = localeFnQuery.data;
+
+  if (!walletInfo.data) {
+    const injectedProvider = getInstalledWalletProviders().find(
+      (w) => w.info.rdns === wallet.id,
+    );
+
+    // Unknown wallet id but it's injected
+    if (injectedProvider) {
+      return (
+        <InjectedConnectUI
+          wallet={props.wallet as Wallet<InjectedSupportedWalletIds>}
+          walletName={injectedProvider.info.name}
+          done={props.done}
+          locale={localeFn(injectedProvider.info.name)}
+          onBack={props.onBack}
+        />
+      );
+    }
+
+    // This will only happen if developer passes a wallet with unknown id and it's not injected
+    // Adding a fallback UI just in case
+    return (
+      <Container animate="fadein" fullHeight flex="column">
+        <Container p="lg">
+          <ModalHeader title="Not Supported" onBack={props.onBack} />
+        </Container>
+        <Container
+          flex="column"
+          expand
+          center="both"
+          p="lg"
+          style={{
+            minHeight: "300px",
+          }}
+        >
+          <AccentFailIcon size={iconSize["3xl"]} />
+          <Spacer y="lg" />
+          <Text color="primaryText" center>
+            Wallet is not supported
+          </Text>
+          <Spacer y="xxl" />
+        </Container>
+      </Container>
+    );
+  }
+
+  const locale = localeFn(walletInfo.data.name);
+
   // if wallet can connect to injected wallet + wallet is injected
   const isInstalled = getInstalledWalletProviders().find(
     (w) => w.info.rdns === walletInfo.data.rdns,
@@ -69,7 +128,7 @@ export function AnyWalletConnectUI(props: {
   if (screen === "get-started") {
     return (
       <GetStartedScreen
-        locale={localeQuery.data}
+        locale={locale}
         wallet={props.wallet}
         walletInfo={walletInfo.data}
         onBack={() => {
@@ -91,7 +150,7 @@ export function AnyWalletConnectUI(props: {
         wallet={props.wallet as Wallet<InjectedSupportedWalletIds>}
         walletInfo={walletInfo.data}
         deepLinkPrefix={walletInfo.data.deepLink.mobile}
-        locale={localeQuery.data}
+        locale={locale}
         onGetStarted={() => {
           setScreen("get-started");
         }}
@@ -104,9 +163,9 @@ export function AnyWalletConnectUI(props: {
     return (
       <InjectedConnectUI
         wallet={props.wallet as Wallet<InjectedSupportedWalletIds>}
-        walletInfo={walletInfo.data}
+        walletName={walletInfo.data.name}
         done={props.done}
-        locale={localeQuery.data}
+        locale={locale}
         onGetStarted={() => {
           setScreen("get-started");
         }}
@@ -120,7 +179,7 @@ export function AnyWalletConnectUI(props: {
     return (
       <Suspense fallback={<LoadingScreen />}>
         <CoinbaseSDKWalletConnectUI
-          locale={localeQuery.data}
+          locale={locale}
           onGetStarted={() => {
             setScreen("get-started");
           }}
@@ -137,7 +196,7 @@ export function AnyWalletConnectUI(props: {
   if (walletInfo.data.mobile.native || walletInfo.data.mobile.universal) {
     return (
       <WalletConnectConnection
-        locale={localeQuery.data}
+        locale={locale}
         onGetStarted={() => {
           setScreen("get-started");
         }}
@@ -153,7 +212,7 @@ export function AnyWalletConnectUI(props: {
   if (props.wallet.id === "walletConnect") {
     return (
       <WalletConnectStandaloneConnection
-        locale={localeQuery.data}
+        locale={locale}
         onBack={props.onBack}
         done={props.done}
         wallet={props.wallet as Wallet<"walletConnect">}
@@ -175,10 +234,22 @@ export function AnyWalletConnectUI(props: {
     );
   }
 
+  if (isEcosystemWallet(props.wallet.id)) {
+    return (
+      <Suspense fallback={<LoadingScreen />}>
+        <EcosystemWalletConnectUI
+          wallet={props.wallet as Wallet<EcosystemWalletId>}
+          done={props.done}
+          goBack={props.onBack}
+        />
+      </Suspense>
+    );
+  }
+
   // if can't connect in any way - show get started screen
   return (
     <GetStartedScreen
-      locale={localeQuery.data}
+      locale={locale}
       wallet={props.wallet}
       walletInfo={walletInfo.data}
       onBack={() => {

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

@@ -383,7 +383,7 @@ export function ConnectEmbed(props: ConnectEmbedProps) {
       return (
         <>
           {autoConnectComp}
-          <CustomThemeProvider theme={props.theme || "dark"}>
+          <CustomThemeProvider theme={props.theme}>
             <EmbedContainer modalSize={modalSize}>
               <LoadingScreen />
             </EmbedContainer>
@@ -491,29 +491,29 @@ const ConnectEmbedContent = (
   );
 };
 
-const EmbedContainer = /* @__PURE__ */ StyledDiv(
-  (props: { modalSize: "compact" | "wide" }) => {
-    const { modalSize } = props;
-    const theme = useCustomTheme();
-    return {
-      color: theme.colors.primaryText,
-      background: theme.colors.modalBg,
-      height: modalSize === "compact" ? "auto" : wideModalMaxHeight,
-      width: modalSize === "compact" ? modalMaxWidthCompact : modalMaxWidthWide,
+const EmbedContainer = /* @__PURE__ */ StyledDiv<{
+  modalSize: "compact" | "wide";
+}>((props) => {
+  const { modalSize } = props;
+  const theme = useCustomTheme();
+  return {
+    color: theme.colors.primaryText,
+    background: theme.colors.modalBg,
+    height: modalSize === "compact" ? "auto" : wideModalMaxHeight,
+    width: modalSize === "compact" ? modalMaxWidthCompact : modalMaxWidthWide,
+    boxSizing: "border-box",
+    position: "relative",
+    lineHeight: "normal",
+    borderRadius: radius.xl,
+    border: `1px solid ${theme.colors.borderColor}`,
+    overflow: "hidden",
+    fontFamily: theme.fontFamily,
+    "& *::selection": {
+      backgroundColor: theme.colors.primaryText,
+      color: theme.colors.modalBg,
+    },
+    "& *": {
       boxSizing: "border-box",
-      position: "relative",
-      lineHeight: "normal",
-      borderRadius: radius.xl,
-      border: `1px solid ${theme.colors.borderColor}`,
-      overflow: "hidden",
-      fontFamily: theme.fontFamily,
-      "& *::selection": {
-        backgroundColor: theme.colors.primaryText,
-        color: theme.colors.modalBg,
-      },
-      "& *": {
-        boxSizing: "border-box",
-      },
-    };
-  },
-);
+    },
+  };
+});

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

@@ -118,7 +118,7 @@ function ConnectModalInlineContent(props: {
   );
 }
 
-const ConnectModalInlineContainer = /* @__PURE__ */ StyledDiv(() => {
+const ConnectModalInlineContainer = /* @__PURE__ */ StyledDiv((_) => {
   const theme = useCustomTheme();
   return {
     background: theme.colors.modalBg,

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

@@ -47,7 +47,7 @@ export function ConnectModalCompactLayout(props: {
   );
 }
 
-const LeftContainer = /* @__PURE__ */ StyledDiv(() => {
+const LeftContainer = /* @__PURE__ */ StyledDiv((_) => {
   const theme = useCustomTheme();
   return {
     display: "flex",

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

@@ -66,7 +66,7 @@ const pulseAnimation = keyframes`
 }
 `;
 
-const PulsatingContainer = /* @__PURE__ */ StyledDiv(() => {
+const PulsatingContainer = /* @__PURE__ */ StyledDiv((_) => {
   const theme = useCustomTheme();
   return {
     position: "relative",

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

@@ -2,7 +2,6 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import type { InjectedSupportedWalletIds } from "../../../../../wallets/__generated__/wallet-ids.js";
 import type { Wallet } from "../../../../../wallets/interfaces/wallet.js";
-import type { WalletInfo } from "../../../../../wallets/wallet-info.js";
 import { useConnectUI } from "../../../../core/hooks/others/useWalletConnectionCtx.js";
 import { wait } from "../../../../core/utils/wait.js";
 import type { InjectedWalletLocale } from "../../../wallets/injected/locale/types.js";
@@ -12,10 +11,10 @@ import { ConnectingScreen } from "../../../wallets/shared/ConnectingScreen.js";
  * @internal
  */
 export const InjectedConnectUI = (props: {
-  onGetStarted: () => void;
+  onGetStarted?: () => void;
   locale: InjectedWalletLocale;
   wallet: Wallet<InjectedSupportedWalletIds>;
-  walletInfo: WalletInfo;
+  walletName: string;
   onBack?: () => void;
   done: () => void;
 }) => {
@@ -60,7 +59,7 @@ export const InjectedConnectUI = (props: {
         failed: locale.connectionScreen.failed,
       }}
       onBack={props.onBack}
-      walletName={props.walletInfo.name}
+      walletName={props.walletName}
       onGetStarted={props.onGetStarted}
       walletId={props.wallet.id}
       onRetry={() => {

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

@@ -752,7 +752,7 @@ export const ChainButton = /* @__PURE__ */ memo(function ChainButton(props: {
 });
 
 const TabButton = /* @__PURE__ */ (() =>
-  styled.button(() => {
+  styled.button((_) => {
     const theme = useCustomTheme();
     return {
       all: "unset",
@@ -793,7 +793,7 @@ const NetworkListUl = /* @__PURE__ */ StyledUl({
   boxSizing: "border-box",
 });
 
-const NetworkButton = /* @__PURE__ */ StyledButton(() => {
+const NetworkButton = /* @__PURE__ */ StyledButton((_) => {
   const theme = useCustomTheme();
   return {
     all: "unset",
@@ -820,7 +820,7 @@ const NetworkButton = /* @__PURE__ */ StyledButton(() => {
 });
 
 const StyledMagnifyingGlassIcon = /* @__PURE__ */ styled(MagnifyingGlassIcon)(
-  () => {
+  (_) => {
     const theme = useCustomTheme();
     return {
       color: theme.colors.secondaryText,

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

@@ -8,7 +8,6 @@ import {
   radius,
   spacing,
 } from "../../../core/design-system/index.js";
-// import { localWalletMetadata } from "../../../../wallets/local/index._ts";
 import { useConnectUI } from "../../../core/hooks/others/useWalletConnectionCtx.js";
 import { Skeleton } from "../components/Skeleton.js";
 import { WalletImage } from "../components/WalletImage.js";
@@ -68,7 +67,7 @@ export function WalletEntryButton(props: {
   );
 }
 
-export const WalletButton = /* @__PURE__ */ StyledButton(() => {
+export const WalletButton = /* @__PURE__ */ StyledButton((_) => {
   const theme = useCustomTheme();
   return {
     all: "unset",

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

@@ -614,7 +614,7 @@ const WalletList = /* @__PURE__ */ StyledUl({
   paddingBottom: spacing.lg,
 });
 
-const GradientDiv = /* @__PURE__ */ StyledDiv(() => {
+const GradientDiv = /* @__PURE__ */ StyledDiv((_) => {
   const theme = useCustomTheme();
   theme.colors.modalBg;
   return {

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

@@ -1,6 +1,7 @@
 "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";
@@ -66,8 +67,9 @@ export function ManageWalletScreen(props: {
 
           {/* Private Key Export (if enabled) */}
           {activeWallet &&
-            isInAppWallet(activeWallet) &&
-            !activeWallet.getConfig()?.hidePrivateKeyExport && (
+            ((isInAppWallet(activeWallet) &&
+              !activeWallet.getConfig()?.hidePrivateKeyExport) ||
+              isEcosystemWallet(activeWallet)) && (
               <MenuButton
                 onClick={() => {
                   props.setScreen("private-key");

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

@@ -2,6 +2,8 @@
 import { useState } from "react";
 import type { ThirdwebClient } from "../../../../../client/client.js";
 import { getThirdwebDomains } from "../../../../../utils/domains.js";
+import { isEcosystemWallet } from "../../../../../wallets/ecosystem/is-ecosystem-wallet.js";
+import type { Wallet } from "../../../../../wallets/interfaces/wallet.js";
 import type { Theme } from "../../../../core/design-system/index.js";
 import { Spacer } from "../../components/Spacer.js";
 import { Spinner } from "../../components/Spinner.js";
@@ -12,10 +14,20 @@ import { Container, Line, ModalHeader } from "../../components/basic.js";
  */
 export function PrivateKey(props: {
   onBack: () => void;
+  wallet?: Wallet;
   theme: "light" | "dark" | Theme;
   client: ThirdwebClient;
 }) {
   const [isLoading, setLoading] = useState(true);
+  if (!props.wallet) {
+    throw new Error("[PrivateKey] No wallet found");
+  }
+
+  const baseDomain = getThirdwebDomains().inAppWallet;
+  const ecosystem = isEcosystemWallet(props.wallet)
+    ? { id: props.wallet.id, partnerId: props.wallet.getConfig()?.partnerId }
+    : undefined;
+
   return (
     <Container
       style={{
@@ -66,12 +78,14 @@ export function PrivateKey(props: {
                 setLoading(false);
               }}
               allow="clipboard-read; clipboard-write"
-              src={`https://${
-                getThirdwebDomains().inAppWallet
-              }/sdk/2022-08-12/embedded-wallet/export-private-key?clientId=${
+              src={`${
+                baseDomain.includes("localhost") ? "http" : "https"
+              }://${baseDomain}/sdk/2022-08-12/embedded-wallet/export-private-key?clientId=${
                 props.client.clientId
               }&theme=${
                 typeof props.theme === "string" ? props.theme : props.theme.type
+              }${ecosystem ? `&ecosystemId=${ecosystem.id}` : ""}${
+                ecosystem?.partnerId ? `&partnerId=${ecosystem.partnerId}` : ""
               }`}
             />
           </Container>

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

@@ -77,7 +77,7 @@ export function ReceiveFunds(props: {
   );
 }
 
-const WalletAddressContainer = /* @__PURE__ */ StyledButton(() => {
+const WalletAddressContainer = /* @__PURE__ */ StyledButton((_) => {
   const theme = useCustomTheme();
   return {
     all: "unset",

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

@@ -309,7 +309,7 @@ const pulseAnimation = keyframes`
 }
 `;
 
-const PulsatingContainer = /* @__PURE__ */ StyledDiv(() => {
+const PulsatingContainer = /* @__PURE__ */ StyledDiv((_) => {
   const theme = useCustomTheme();
   return {
     position: "relative",

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

@@ -1,13 +1,13 @@
 "use client";
 import { ReloadIcon } from "@radix-ui/react-icons";
-import { useEffect, useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { useState } from "react";
 import type { Chain } from "../../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../../client/client.js";
 import {
   createWalletConnectClient,
   createWalletConnectSession,
 } from "../../../../../wallets/wallet-connect/receiver/index.js";
-import type { WalletConnectClient } from "../../../../../wallets/wallet-connect/receiver/types.js";
 import { iconSize, spacing } from "../../../../core/design-system/index.js";
 import { useActiveWallet } from "../../../hooks/wallets/useActiveWallet.js";
 import { InputSelectionUI } from "../../../wallets/in-app/InputSelectionUI.js";
@@ -26,37 +26,37 @@ export function WalletConnectReceiverScreen(props: {
   client: ThirdwebClient;
   chains?: Chain[];
 }) {
-  const [walletConnectClient, setWalletConnectClient] = useState<
-    WalletConnectClient | undefined
-  >();
   const activeWallet = useActiveWallet();
   const [loading, setLoading] = useState(false);
   const [errorConnecting, setErrorConnecting] = useState<false | string>(false);
 
-  useEffect(() => {
-    if (!activeWallet || !!errorConnecting) return;
-    createWalletConnectClient({
-      wallet: activeWallet,
-      client: props.client,
-      chains: props.chains,
-      onConnect: () => {
-        props.closeModal();
-        setLoading(false);
-      },
-    })
-      .then((wcClient) => {
-        setWalletConnectClient(wcClient);
-      })
-      .catch(() => {
+  const { data: walletConnectClient } = useQuery({
+    queryKey: ["walletConnectClient"],
+    queryFn: async () => {
+      if (!activeWallet) return;
+      try {
+        const client = await createWalletConnectClient({
+          wallet: activeWallet,
+          client: props.client,
+          chains: props.chains,
+          onConnect: () => {
+            props.closeModal();
+            setLoading(false);
+          },
+          onError: (error) => {
+            setErrorConnecting(error.message);
+            setLoading(false);
+          },
+        });
+        return client;
+      } catch (e) {
         setErrorConnecting("Failed to establish WalletConnect connection");
-      });
-  }, [
-    activeWallet,
-    props.client,
-    props.closeModal,
-    errorConnecting,
-    props.chains,
-  ]);
+        return;
+      }
+    },
+    retry: false,
+    enabled: !!activeWallet,
+  });
 
   return (
     <Container
@@ -79,7 +79,7 @@ export function WalletConnectReceiverScreen(props: {
           <Container py="md">
             <WalletLogoSpinner
               client={props.client}
-              error={false}
+              error={!!errorConnecting}
               id={"walletConnect"}
               hideSpinner={!loading}
             />
@@ -153,7 +153,7 @@ export function WalletConnectReceiverScreen(props: {
         <Spacer y="lg" />
         <Line />
         <Container flex="row" center="x" p="lg">
-          <a href="https://google.com">
+          <a href="https://blog.thirdweb.com/p/a62c0ef4-1d8f-424d-95b9-a006e5239849/">
             <Button variant="link" onClick={() => {}}>
               Where do I find the URI?
             </Button>

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

@@ -114,7 +114,7 @@ const pulseAnimation = keyframes`
 }
 `;
 
-const LogoContainer = /* @__PURE__ */ StyledDiv(() => {
+const LogoContainer = /* @__PURE__ */ StyledDiv((_) => {
   const theme = useCustomTheme();
   return {
     display: "flex",