thirdweb 5.30.0-nightly-991cb72bdb1b94fcf0f9a3de36b2ec8ee07ae5ec-20240619000538 → 5.30.0-nightly-fab5cd43bed972b0a3f70f0f39a790349672ba72-20240620192731

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

@@ -10,6 +10,7 @@ import {
   spacing,
 } from "../../../../core/design-system/index.js";
 import { useSiweAuth } from "../../../../core/hooks/auth/useSiweAuth.js";
+import { useConnectUI } from "../../../../core/hooks/others/useWalletConnectionCtx.js";
 import { wait } from "../../../../core/utils/wait.js";
 import { useActiveWallet } from "../../../hooks/wallets/useActiveWallet.js";
 import { useDisconnect } from "../../../hooks/wallets/useDisconnect.js";
@@ -37,6 +38,7 @@ export const SignatureScreen: React.FC<{
   client: ThirdwebClient;
   auth: ConnectButtonProps["auth"];
 }> = (props) => {
+  const { client } = useConnectUI();
   const {
     onDone,
     modalSize,
@@ -146,7 +148,11 @@ export const SignatureScreen: React.FC<{
         ) : (
           <>
             <Container py="3xl">
-              <WalletLogoSpinner error={status === "failed"} id={wallet.id} />
+              <WalletLogoSpinner
+                client={client}
+                error={status === "failed"}
+                id={wallet.id}
+              />
             </Container>
 
             <Container flex="column" gap="md" animate="fadein" key={status}>
@@ -303,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

@@ -0,0 +1,165 @@
+"use client";
+import { ReloadIcon } from "@radix-ui/react-icons";
+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 { iconSize, spacing } from "../../../../core/design-system/index.js";
+import { useActiveWallet } from "../../../hooks/wallets/useActiveWallet.js";
+import { InputSelectionUI } from "../../../wallets/in-app/InputSelectionUI.js";
+import { Spacer } from "../../components/Spacer.js";
+import { Container, Line, ModalHeader } from "../../components/basic.js";
+import { Button } from "../../components/buttons.js";
+import { Text } from "../../components/text.js";
+import { WalletLogoSpinner } from "./WalletLogoSpinner.js";
+
+/**
+ * @internal
+ */
+export function WalletConnectReceiverScreen(props: {
+  onBack: () => void;
+  closeModal: () => void;
+  client: ThirdwebClient;
+  chains?: Chain[];
+}) {
+  const activeWallet = useActiveWallet();
+  const [loading, setLoading] = useState(false);
+  const [errorConnecting, setErrorConnecting] = useState<false | string>(false);
+
+  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");
+        return;
+      }
+    },
+    retry: false,
+    enabled: !!activeWallet,
+  });
+
+  return (
+    <Container
+      style={{
+        minHeight: "300px",
+      }}
+    >
+      <Container p="lg">
+        <ModalHeader title="Connect an App" onBack={props.onBack} />
+      </Container>
+      <Line />
+      <Container
+        px="lg"
+        scrollY
+        style={{
+          maxHeight: "500px",
+        }}
+      >
+        <Container py="sm" style={{ position: "relative" }}>
+          <Container py="md">
+            <WalletLogoSpinner
+              client={props.client}
+              error={!!errorConnecting}
+              id={"walletConnect"}
+              hideSpinner={!loading}
+            />
+          </Container>
+          <Container
+            animate="fadein"
+            style={{
+              animationDuration: "200ms",
+            }}
+          >
+            {!errorConnecting ? (
+              <>
+                <Text balance center multiline size="sm">
+                  Copy your connection URI from the external app.
+                </Text>
+                <Spacer y="xl" />
+                <InputSelectionUI
+                  type="text"
+                  disabled={
+                    loading || !!errorConnecting || !walletConnectClient
+                  }
+                  onSelect={async (value) => {
+                    setLoading(true);
+                    if (!walletConnectClient) {
+                      setErrorConnecting("No WalletConnect client found");
+                    } else {
+                      try {
+                        createWalletConnectSession({
+                          uri: value,
+                          walletConnectClient,
+                        });
+                      } catch (e) {
+                        setErrorConnecting(
+                          "Error creating WalletConnect session",
+                        );
+                      }
+                    }
+                  }}
+                  placeholder="WalletConnect URI"
+                  name="wcUri"
+                  emptyErrorMessage="Please enter a valid URI"
+                  submitButtonText="Connect"
+                />
+              </>
+            ) : (
+              <>
+                <Text center balance multiline size="sm">
+                  {errorConnecting}
+                </Text>
+                <Spacer y="md" />
+                <Container flex="row" center="x" animate="fadein">
+                  <Button
+                    fullWidth
+                    variant="accent"
+                    onClick={() => setErrorConnecting(false)}
+                    style={{
+                      gap: spacing.xs,
+                      alignItems: "center",
+                    }}
+                  >
+                    <ReloadIcon width={iconSize.sm} height={iconSize.sm} />{" "}
+                    Retry
+                  </Button>
+                </Container>
+              </>
+            )}
+          </Container>
+        </Container>
+      </Container>
+      <Container>
+        <Spacer y="lg" />
+        <Line />
+        <Container flex="row" center="x" p="lg">
+          <a href="https://blog.thirdweb.com/p/a62c0ef4-1d8f-424d-95b9-a006e5239849/">
+            <Button variant="link" onClick={() => {}}>
+              Where do I find the URI?
+            </Button>
+          </a>
+        </Container>
+      </Container>
+    </Container>
+  );
+}

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

@@ -1,8 +1,8 @@
 import { keyframes } from "@emotion/react";
+import type { ThirdwebClient } from "../../../../../client/client.js";
 import type { WalletId } from "../../../../../wallets/wallet-types.js";
 import { useCustomTheme } from "../../../../core/design-system/CustomThemeProvider.js";
 import { radius, spacing } from "../../../../core/design-system/index.js";
-import { useConnectUI } from "../../../../core/hooks/others/useWalletConnectionCtx.js";
 import { WalletImage } from "../../components/WalletImage.js";
 import { fadeInAnimation } from "../../design-system/animations.js";
 import { StyledDiv } from "../../design-system/elements.js";
@@ -11,8 +11,12 @@ import { StyledDiv } from "../../design-system/elements.js";
  *
  * @internal
  */
-export function WalletLogoSpinner(props: { error: boolean; id: WalletId }) {
-  const { client } = useConnectUI();
+export function WalletLogoSpinner(props: {
+  client: ThirdwebClient;
+  error: boolean;
+  id: WalletId;
+  hideSpinner?: boolean;
+}) {
   const loaderRadius = 20;
   const radiusFactor = 36 - loaderRadius;
   const dashArrayStart = 116 + radiusFactor;
@@ -31,29 +35,31 @@ export function WalletLogoSpinner(props: { error: boolean; id: WalletId }) {
         }}
       >
         <div data-img-container>
-          <svg
-            viewBox="0 0 110 110"
-            style={{
-              display: props.error ? "none" : "block",
-            }}
-            role="presentation"
-          >
-            <rect
-              x="2"
-              y="2"
-              width="106"
-              height="106"
-              rx={loaderRadius}
-              strokeDasharray={`${dashArrayStart} ${dashArrayEnd}`}
-              strokeDashoffset={dashOffset}
-              strokeLinecap="round"
-              fill="none"
-              strokeWidth={4}
-            />
-          </svg>
+          {!props.hideSpinner && (
+            <svg
+              viewBox="0 0 110 110"
+              style={{
+                display: props.error ? "none" : "block",
+              }}
+              role="presentation"
+            >
+              <rect
+                x="2"
+                y="2"
+                width="106"
+                height="106"
+                rx={loaderRadius}
+                strokeDasharray={`${dashArrayStart} ${dashArrayEnd}`}
+                strokeDashoffset={dashOffset}
+                strokeLinecap="round"
+                fill="none"
+                strokeWidth={4}
+              />
+            </svg>
+          )}
 
           <WalletBg>
-            <WalletImage id={props.id} size={"68"} client={client} />
+            <WalletImage id={props.id} size={"68"} client={props.client} />
           </WalletBg>
         </div>
       </div>
@@ -108,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/ConnectWallet/screens/types.ts

@@ -58,3 +58,16 @@ export type WelcomeScreen =
       };
     }
   | (() => React.ReactNode);
+
+export type WalletDetailsModalScreen =
+  | "main"
+  | "export"
+  | "send"
+  | "receive"
+  | "buy"
+  | "network-switcher"
+  | "pending-tx"
+  | "view-funds"
+  | "private-key"
+  | "manage-wallet"
+  | "wallet-connect-receiver";

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