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

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;

package/src/react/web/wallets/ecosystem/EcosystemWalletConnectUI.tsx

@@ -0,0 +1,95 @@
+"use client";
+import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
+import type { EcosystemWalletId } from "../../../../wallets/wallet-types.js";
+import { useConnectUI } from "../../../core/hooks/others/useWalletConnectionCtx.js";
+import {
+  useSelectionData,
+  useSetSelectionData,
+} from "../../providers/wallet-ui-states-provider.js";
+import { useConnectLocale } from "../in-app/useInAppWalletLocale.js";
+import type { ConnectWalletSelectUIState } from "../shared/ConnectWalletSocialOptions.js";
+import { LoadingScreen } from "../shared/LoadingScreen.js";
+import { OTPLoginUI } from "../shared/OTPLoginUI.js";
+import { PassKeyLogin } from "../shared/PassKeyLogin.js";
+import { SocialLogin } from "../shared/SocialLogin.js";
+import { EcosystemWalletFormUIScreen } from "./EcosystemWalletFormUI.js";
+
+/**
+ *
+ * @internal
+ */
+function EcosystemWalletConnectUI(props: {
+  wallet: Wallet<EcosystemWalletId>;
+  done: () => void;
+  goBack?: () => void;
+}) {
+  const data = useSelectionData();
+  const setSelectionData = useSetSelectionData();
+  const state = data as ConnectWalletSelectUIState;
+  const locale = useConnectLocale();
+  const { connectModal } = useConnectUI();
+
+  if (!locale) {
+    return <LoadingScreen />;
+  }
+
+  const goBackToMain =
+    connectModal.size === "compact"
+      ? props.goBack
+      : () => {
+          setSelectionData({});
+        };
+
+  const otpUserInfo = state?.emailLogin
+    ? { email: state.emailLogin }
+    : state?.phoneLogin
+      ? { phone: state.phoneLogin }
+      : undefined;
+
+  if (otpUserInfo) {
+    return (
+      <OTPLoginUI
+        userInfo={otpUserInfo}
+        locale={locale}
+        done={props.done}
+        goBack={goBackToMain}
+        wallet={props.wallet}
+      />
+    );
+  }
+
+  if (state?.passkeyLogin) {
+    return (
+      <PassKeyLogin
+        wallet={props.wallet}
+        done={props.done}
+        onBack={goBackToMain}
+      />
+    );
+  }
+
+  if (state?.socialLogin) {
+    return (
+      <SocialLogin
+        socialAuth={state.socialLogin.type}
+        locale={locale}
+        done={props.done}
+        goBack={goBackToMain}
+        wallet={props.wallet}
+        state={state}
+      />
+    );
+  }
+
+  return (
+    <EcosystemWalletFormUIScreen
+      select={() => {}}
+      locale={locale}
+      done={props.done}
+      goBack={props.goBack}
+      wallet={props.wallet}
+    />
+  );
+}
+
+export default EcosystemWalletConnectUI;

package/src/react/web/wallets/ecosystem/EcosystemWalletFormUI.tsx

@@ -0,0 +1,80 @@
+"use client";
+import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
+import type { EcosystemWalletId } from "../../../../wallets/wallet-types.js";
+import { useConnectUI } from "../../../core/hooks/others/useWalletConnectionCtx.js";
+import { TOS } from "../../ui/ConnectWallet/Modal/TOS.js";
+import { useScreenContext } from "../../ui/ConnectWallet/Modal/screen.js";
+import { PoweredByThirdweb } from "../../ui/ConnectWallet/PoweredByTW.js";
+import { Spacer } from "../../ui/components/Spacer.js";
+import { Container } from "../../ui/components/basic.js";
+import { ConnectWalletSocialOptions } from "../shared/ConnectWalletSocialOptions.js";
+import type { ConnectLocale } from "../shared/locale/types.js";
+import { EcosystemWalletHeader } from "./EcosystemWalletHeader.js";
+
+export type EcosystemWalletFormUIProps = {
+  select: () => void;
+  done: () => void;
+  locale: ConnectLocale;
+  wallet: Wallet<EcosystemWalletId>;
+  goBack?: () => void;
+};
+
+/**
+ * @internal
+ */
+export function EcosystemWalletFormUIScreen(props: EcosystemWalletFormUIProps) {
+  const { client, connectModal } = useConnectUI();
+  const isCompact = connectModal.size === "compact";
+  const { initialScreen, screen } = useScreenContext();
+
+  const onBack =
+    screen === props.wallet && initialScreen === props.wallet
+      ? undefined
+      : props.goBack;
+
+  return (
+    <Container
+      fullHeight
+      flex="column"
+      p="lg"
+      animate="fadein"
+      style={{
+        minHeight: "250px",
+      }}
+    >
+      {isCompact ? (
+        <>
+          <EcosystemWalletHeader
+            client={client}
+            onBack={onBack}
+            wallet={props.wallet}
+          />
+          <Spacer y="lg" />
+        </>
+      ) : null}
+
+      <Container
+        expand
+        flex="column"
+        center="y"
+        p={isCompact ? undefined : "lg"}
+      >
+        <ConnectWalletSocialOptions {...props} />
+      </Container>
+
+      {isCompact &&
+        (connectModal.showThirdwebBranding !== false ||
+          connectModal.termsOfServiceUrl ||
+          connectModal.privacyPolicyUrl) && <Spacer y="xl" />}
+
+      <Container flex="column" gap="lg">
+        <TOS
+          termsOfServiceUrl={connectModal.termsOfServiceUrl}
+          privacyPolicyUrl={connectModal.privacyPolicyUrl}
+        />
+
+        {connectModal.showThirdwebBranding !== false && <PoweredByThirdweb />}
+      </Container>
+    </Container>
+  );
+}