thirdweb 5.30.0-nightly-33777df88fb190c2af8ad25e4930040884996f1e-20240620000630 → 5.30.0-nightly-d320777eea5404f596aa39b2b49b5165d3e1959a-20240621000551

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

package/src/react/web/ui/TransactionButton/index.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { parseTheme } from "../../../core/design-system/CustomThemeProvider.js";
+import { CustomThemeProvider } from "../../../core/design-system/CustomThemeProvider.js";
 import {
   type TransactionButtonProps,
   useTransactionButtonMutation,
@@ -60,47 +60,48 @@ export function TransactionButton(props: TransactionButtonProps) {
   );
 
   return (
-    <Button
-      gap="xs"
-      disabled={!account || disabled || isPending}
-      variant={"primary"}
-      unstyled={unstyled}
-      data-is-loading={isPending}
-      onClick={() => handleClick()}
-      {...buttonProps}
-      style={
-        !unstyled
-          ? {
-              opacity: !account || disabled ? 0.5 : 1,
-              minWidth: "150px",
-              position: "relative",
-              ...buttonProps.style,
-            }
-          : {
-              position: "relative",
-              ...buttonProps.style,
-            }
-      }
-      theme={parseTheme(props.theme)}
-    >
-      <span style={{ visibility: isPending ? "hidden" : "visible" }}>
-        {children}
-      </span>
-      {isPending && (
-        <div
-          style={{
-            position: "absolute",
-            display: "flex",
-            alignItems: "center",
-            height: "100%",
-            top: 0,
-            bottom: 0,
-            margin: "auto",
-          }}
-        >
-          <Spinner size="md" color="primaryButtonText" />
-        </div>
-      )}
-    </Button>
+    <CustomThemeProvider theme={props.theme}>
+      <Button
+        gap="xs"
+        disabled={!account || disabled || isPending}
+        variant={"primary"}
+        unstyled={unstyled}
+        data-is-loading={isPending}
+        onClick={() => handleClick()}
+        {...buttonProps}
+        style={
+          !unstyled
+            ? {
+                opacity: !account || disabled ? 0.5 : 1,
+                minWidth: "150px",
+                position: "relative",
+                ...buttonProps.style,
+              }
+            : {
+                position: "relative",
+                ...buttonProps.style,
+              }
+        }
+      >
+        <span style={{ visibility: isPending ? "hidden" : "visible" }}>
+          {children}
+        </span>
+        {isPending && (
+          <div
+            style={{
+              position: "absolute",
+              display: "flex",
+              alignItems: "center",
+              height: "100%",
+              top: 0,
+              bottom: 0,
+              margin: "auto",
+            }}
+          >
+            <Spinner size="md" color="primaryButtonText" />
+          </div>
+        )}
+      </Button>
+    </CustomThemeProvider>
   );
 }

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

@@ -150,7 +150,7 @@ const UploadIconSecondary = /* @__PURE__ */ styled(UploadIcon)(() => {
   };
 });
 
-const DropContainer = /* @__PURE__ */ StyledDiv(() => {
+const DropContainer = /* @__PURE__ */ StyledDiv((_) => {
   const theme = useCustomTheme();
   return {
     border: `2px solid ${theme.colors.borderColor}`,

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

@@ -45,7 +45,7 @@ export const Drawer = /* @__PURE__ */ forwardRef<HTMLDivElement, DrawerProps>(
   },
 );
 
-export const DrawerContainer = /* @__PURE__ */ StyledDiv(() => {
+export const DrawerContainer = /* @__PURE__ */ StyledDiv((_) => {
   const theme = useCustomTheme();
   return {
     zIndex: 10000,
@@ -73,7 +73,7 @@ export const drawerOpenAnimation = keyframes`
   }
 `;
 
-export const DrawerOverlay = /* @__PURE__ */ StyledDiv(() => {
+export const DrawerOverlay = /* @__PURE__ */ StyledDiv((_) => {
   const theme = useCustomTheme();
   return {
     backgroundColor: theme.colors.modalOverlayBg,

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

@@ -166,7 +166,7 @@ const modalAnimationMobile = keyframes`
   }
 `;
 
-const DialogContent = /* @__PURE__ */ StyledDiv(() => {
+const DialogContent = /* @__PURE__ */ StyledDiv((_) => {
   const theme = useCustomTheme();
 
   return {

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

@@ -68,7 +68,7 @@ const caretBlink = keyframes`
   }
   `;
 
-const FakeCaret = StyledDiv(() => {
+const FakeCaret = StyledDiv((_) => {
   const theme = useCustomTheme();
   return {
     position: "absolute",
@@ -88,7 +88,7 @@ const FakeCaret = StyledDiv(() => {
   };
 });
 
-const OTPInputBox = /* @__PURE__ */ StyledDiv(() => {
+const OTPInputBox = /* @__PURE__ */ StyledDiv((_) => {
   const theme = useCustomTheme();
   return {
     position: "relative",

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

@@ -3,7 +3,7 @@ import { useCustomTheme } from "../../../core/design-system/CustomThemeProvider.
 import { fadeInAnimation } from "../design-system/animations.js";
 import { StyledDiv } from "../design-system/elements.js";
 
-export const Overlay = /* @__PURE__ */ StyledDiv(() => {
+export const Overlay = /* @__PURE__ */ StyledDiv((_) => {
   const theme = useCustomTheme();
   return {
     backgroundColor: theme.colors.modalOverlayBg,

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

@@ -89,7 +89,7 @@ const PlaceholderKeyframes = keyframes`
   100%{ background-position: -100% 0; }
 `;
 
-const QRPlaceholder = /* @__PURE__ */ StyledDiv(() => {
+const QRPlaceholder = /* @__PURE__ */ StyledDiv((_) => {
   const theme = useCustomTheme();
   return {
     "--color": theme.colors.skeletonBg,

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

@@ -51,7 +51,7 @@ to {
 `;
 
 const TooltipContent = /* @__PURE__ */ (() =>
-  styled(RadixTooltip.Content)(() => {
+  styled(RadixTooltip.Content)((_) => {
     const theme = useCustomTheme();
     return {
       background: theme.colors.tooltipBg,

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

@@ -3,11 +3,12 @@ import { useEffect, useState } from "react";
 import type { ThirdwebClient } from "../../../../client/client.js";
 import { webLocalStorage } from "../../../../utils/storage/webStorage.js";
 import { getWalletInfo } from "../../../../wallets/__generated__/getWalletInfo.js";
+import { getInstalledWalletProviders } from "../../../../wallets/injected/mipdStore.js";
 import { getStoredActiveWalletId } from "../../../../wallets/manager/index.js";
 import type { WalletId } from "../../../../wallets/wallet-types.js";
 import { radius } from "../../../core/design-system/index.js";
 import { useActiveWallet } from "../../hooks/wallets/useActiveWallet.js";
-import { getLastAuthProvider } from "../../wallets/in-app/storage.js";
+import { getLastAuthProvider } from "../../wallets/shared/storage.js";
 import {
   emailIcon,
   genericWalletIcon,
@@ -47,7 +48,7 @@ export function WalletImage(props: {
           activeEOAId = storedId;
         }
       }
-      let mipdImage: string | undefined;
+      let image: string | undefined;
 
       if (
         activeEOAId === "inApp" &&
@@ -58,29 +59,37 @@ export function WalletImage(props: {
         const lastAuthProvider = await getLastAuthProvider(storage);
         switch (lastAuthProvider) {
           case "google":
-            mipdImage = googleIconUri;
+            image = googleIconUri;
             break;
           case "apple":
-            mipdImage = appleIconUri;
+            image = appleIconUri;
             break;
           case "facebook":
-            mipdImage = facebookIconUri;
+            image = facebookIconUri;
             break;
           case "phone":
-            mipdImage = phoneIcon;
+            image = phoneIcon;
             break;
           case "email":
-            mipdImage = emailIcon;
+            image = emailIcon;
             break;
           case "passkey":
-            mipdImage = passkeyIcon;
+            image = passkeyIcon;
             break;
         }
       } else {
-        mipdImage = await getWalletInfo(activeEOAId, true);
+        const mipdImage = getInstalledWalletProviders().find(
+          (x) => x.info.rdns === activeEOAId,
+        )?.info.icon;
+
+        if (mipdImage) {
+          image = mipdImage;
+        } else {
+          image = await getWalletInfo(activeEOAId, true);
+        }
       }
 
-      setImage(mipdImage);
+      setImage(image);
     }
     fetchImage();
   }, [props.id, activeWallet]);
@@ -112,10 +121,21 @@ function WalletImageQuery(props: {
 }) {
   const walletImage = useWalletImage(props.id);
 
+  if (walletImage.isFetched && !walletImage.data) {
+    return (
+      <Img
+        client={props.client}
+        src={genericWalletIcon}
+        width={props.size}
+        height={props.size}
+      />
+    );
+  }
+
   return (
     <Img
       client={props.client}
-      src={walletImage.isLoading ? undefined : walletImage.data || ""}
+      src={walletImage.isLoading ? undefined : walletImage.data}
       fallbackImage={genericWalletIcon}
       width={props.size}
       height={props.size}

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

@@ -10,7 +10,7 @@ import {
 import { StyledDiv } from "../design-system/elements.js";
 import { BackButton, ModalTitle } from "./modalElements.js";
 
-export const ScreenBottomContainer = /* @__PURE__ */ StyledDiv(() => {
+export const ScreenBottomContainer = /* @__PURE__ */ StyledDiv((_) => {
   const theme = useCustomTheme();
   return {
     borderTop: `1px solid ${theme.colors.separatorLine}`,
@@ -183,7 +183,7 @@ type BoxProps = {
   borderColor?: keyof Theme["colors"] | undefined;
 };
 
-const Box = /* @__PURE__ */ StyledDiv((props: BoxProps) => {
+const Box = /* @__PURE__ */ StyledDiv<BoxProps>((props) => {
   const theme = useCustomTheme();
   return {
     color: props.color ? theme.colors[props.color] : "inherit",

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

@@ -1,11 +1,6 @@
 "use client";
+import { useCustomTheme } from "../../../core/design-system/CustomThemeProvider.js";
 import {
-  isValidTheme,
-  parseTheme,
-  useCustomTheme,
-} from "../../../core/design-system/CustomThemeProvider.js";
-import {
-  type Theme,
   fontSize,
   radius,
   spacing,
@@ -14,15 +9,13 @@ import { StyledButton } from "../design-system/elements.js";
 
 export type ButtonProps = {
   variant: "primary" | "secondary" | "link" | "accent" | "outline" | "ghost";
-  theme?: Theme;
   unstyled?: boolean;
   fullWidth?: boolean;
   gap?: keyof typeof spacing;
 };
 
 export const Button = /* @__PURE__ */ StyledButton((props: ButtonProps) => {
-  const _theme = useCustomTheme();
-  const theme = isValidTheme(props.theme) ? parseTheme(props.theme) : _theme;
+  const theme = useCustomTheme();
   if (props.unstyled) {
     return {};
   }
@@ -131,7 +124,7 @@ export const Button = /* @__PURE__ */ StyledButton((props: ButtonProps) => {
 
 export const ButtonLink = /* @__PURE__ */ (() => Button.withComponent("a"))();
 
-export const IconButton = /* @__PURE__ */ StyledButton(() => {
+export const IconButton = /* @__PURE__ */ StyledButton((_) => {
   const theme = useCustomTheme();
   return {
     all: "unset",
@@ -151,7 +144,7 @@ export const IconButton = /* @__PURE__ */ StyledButton(() => {
   };
 });
 
-export const InputButton = /* @__PURE__ */ StyledButton(() => {
+export const InputButton = /* @__PURE__ */ StyledButton((_) => {
   const theme = useCustomTheme();
   return {
     all: "unset",

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

@@ -32,7 +32,7 @@ type InputProps = {
   theme?: Theme;
 };
 
-export const Input = /* @__PURE__ */ StyledInput((props: InputProps) => {
+export const Input = /* @__PURE__ */ StyledInput<InputProps>((props) => {
   const theme = useCustomTheme();
   return {
     fontSize: fontSize.md,

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

@@ -5,7 +5,7 @@ import { fontSize, iconSize } from "../../../core/design-system/index.js";
 import { StyledH2 } from "../design-system/elements.js";
 import { IconButton } from "./buttons.js";
 
-export const ModalTitle = /* @__PURE__ */ StyledH2(() => {
+export const ModalTitle = /* @__PURE__ */ StyledH2((_) => {
   const theme = useCustomTheme();
   return {
     margin: 0,

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

@@ -14,7 +14,7 @@ type TextProps = {
   balance?: boolean;
 };
 
-export const Text = /* @__PURE__ */ StyledSpan((p: TextProps) => {
+export const Text = /* @__PURE__ */ StyledSpan<TextProps>((p) => {
   const theme = useCustomTheme();
   return {
     fontSize: fontSize[p.size || "md"],
@@ -41,7 +41,7 @@ type LinkProps = {
   hoverColor?: keyof Theme["colors"];
 };
 
-export const Link = /* @__PURE__ */ StyledAnchor((p: LinkProps) => {
+export const Link = /* @__PURE__ */ StyledAnchor<LinkProps>((p) => {
   const theme = useCustomTheme();
   return {
     all: "unset",

package/src/react/web/ui/hooks/useWalletInfo.ts

@@ -1,4 +1,5 @@
 import { useQuery } from "@tanstack/react-query";
+
 import { getWalletInfo } from "../../../../wallets/__generated__/getWalletInfo.js";
 import type { WalletInfo } from "../../../../wallets/wallet-info.js";
 import type { WalletId } from "../../../../wallets/wallet-types.js";

package/src/react/web/utils/usePreloadWalletProviders.ts

@@ -1,8 +1,10 @@
 import { useQueries } from "@tanstack/react-query";
 import type { ThirdwebClient } from "../../../client/client.js";
 import { COINBASE } from "../../../wallets/constants.js";
+import { isEcosystemWallet } from "../../../wallets/ecosystem/is-ecosystem-wallet.js";
 import type { Wallet } from "../../../wallets/interfaces/wallet.js";
 import type { CreateWalletArgs } from "../../../wallets/wallet-types.js";
+import type { EcosystemWalletId } from "../../../wallets/wallet-types.js";
 
 export function usePreloadWalletProviders({
   client,
@@ -10,12 +12,14 @@ export function usePreloadWalletProviders({
 }: { client: ThirdwebClient; wallets: Wallet[] }) {
   useQueries({
     queries: wallets
-      .filter((w) => w.id === COINBASE || w.id === "inApp")
+      .filter(
+        (w) => w.id === COINBASE || w.id === "inApp" || isEcosystemWallet(w.id),
+      )
       .map((w) => ({
         queryKey: ["preload-wallet", w.id],
         queryFn: async () => {
-          switch (w.id) {
-            case COINBASE: {
+          switch (true) {
+            case COINBASE === w.id: {
               const { getCoinbaseWebProvider } = await import(
                 "../../../wallets/coinbase/coinbaseWebSDK.js"
               );
@@ -25,7 +29,7 @@ export function usePreloadWalletProviders({
               // return _something_
               return true;
             }
-            case "inApp": {
+            case "inApp" === w.id: {
               const [
                 { InAppWebConnector },
                 { getOrCreateInAppWalletConnector },
@@ -41,6 +45,33 @@ export function usePreloadWalletProviders({
               // return _something_
               return true;
             }
+            case isEcosystemWallet(w.id): {
+              const [
+                { InAppWebConnector },
+                { getOrCreateInAppWalletConnector },
+              ] = await Promise.all([
+                import("../../../wallets/in-app/web/lib/web-connector.js"),
+                import("../../../wallets/in-app/core/wallet/in-app-core.js"),
+              ]);
+              const ecosystemWallet = w as Wallet<EcosystemWalletId>; // we know this is an ecosystem wallet
+              await getOrCreateInAppWalletConnector(
+                client,
+                async (client) => {
+                  return new InAppWebConnector({
+                    client,
+                    ecosystem: {
+                      id: ecosystemWallet.id,
+                      partnerId: ecosystemWallet.getConfig()?.partnerId,
+                    },
+                  });
+                },
+                {
+                  id: ecosystemWallet.id,
+                  partnerId: ecosystemWallet.getConfig()?.partnerId,
+                },
+              );
+              return true;
+            }
             // potentially add more wallets here
             default: {
               return false;