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

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/canFitWideModal.ts

@@ -1,7 +1,7 @@
 import { wideModalScreenThreshold } from "../ui/ConnectWallet/constants.js";
 
 /**
- * Return true if the current screen size can fit the the wide connect modal
+ * Return true if the current screen size can fit the wide connect modal
  * @internal
  */
 export function canFitWideModal(): boolean {

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>
+  );
+}

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

@@ -0,0 +1,49 @@
+"use client";
+import type { ThirdwebClient } from "../../../../client/client.js";
+import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
+import type { EcosystemWalletId } from "../../../../wallets/wallet-types.js";
+import { iconSize, radius } from "../../../core/design-system/index.js";
+import { Img } from "../../ui/components/Img.js";
+import { Skeleton } from "../../ui/components/Skeleton.js";
+import { ModalHeader } from "../../ui/components/basic.js";
+import { ModalTitle } from "../../ui/components/modalElements.js";
+import { useWalletInfo } from "../../ui/hooks/useWalletInfo.js";
+
+/**
+ * @internal
+ */
+export function EcosystemWalletHeader(props: {
+  wallet: Wallet<EcosystemWalletId>;
+  client: ThirdwebClient;
+  onBack?: () => void;
+}) {
+  const walletInfo = useWalletInfo(props.wallet.id);
+
+  return (
+    <ModalHeader
+      onBack={props.onBack}
+      title={
+        <>
+          {walletInfo.isLoading ? (
+            <Skeleton height="24px" width="200px" />
+          ) : (
+            <>
+              {!walletInfo.data?.image_id ? null : (
+                <Img
+                  src={walletInfo.data?.image_id}
+                  style={{
+                    borderRadius: radius.sm,
+                  }}
+                  width={iconSize.md}
+                  height={iconSize.md}
+                  client={props.client}
+                />
+              )}
+              <ModalTitle>{walletInfo.data?.name}</ModalTitle>
+            </>
+          )}
+        </>
+      }
+    />
+  );
+}

package/src/react/web/wallets/in-app/CountrySelector.tsx

@@ -86,7 +86,7 @@ const Option = /* @__PURE__ */ StyledOption(() => {
   };
 });
 
-const Select = /* @__PURE__ */ StyledSelect(() => {
+const Select = /* @__PURE__ */ StyledSelect((_) => {
   const theme = useCustomTheme();
   return {
     fontSize: fontSize.sm,

package/src/react/web/wallets/in-app/InAppWalletConnectUI.tsx

@@ -5,13 +5,13 @@ import {
   useSelectionData,
   useSetSelectionData,
 } from "../../providers/wallet-ui-states-provider.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 { InAppWalletFormUIScreen } from "./InAppWalletFormUI.js";
-import { InAppWalletOTPLoginUI } from "./InAppWalletOTPLoginUI.js";
-import { InAppWalletPassKeyLogin } from "./InAppWalletPassKeyLogin.js";
-import { InAppWalletSocialLogin } from "./InAppWalletSocialLogin.js";
-import type { InAppWalletSelectUIState } from "./types.js";
-import { useInAppWalletLocale } from "./useInAppWalletLocale.js";
+import { useConnectLocale } from "./useInAppWalletLocale.js";
 
 /**
  *
@@ -24,11 +24,11 @@ function InAppWalletConnectUI(props: {
 }) {
   const data = useSelectionData();
   const setSelectionData = useSetSelectionData();
-  const state = data as InAppWalletSelectUIState;
-  const localeQuery = useInAppWalletLocale();
+  const state = data as ConnectWalletSelectUIState;
+  const locale = useConnectLocale();
   const { connectModal } = useConnectUI();
 
-  if (!localeQuery.data) {
+  if (!locale) {
     return <LoadingScreen />;
   }
 
@@ -47,9 +47,9 @@ function InAppWalletConnectUI(props: {
 
   if (otpUserInfo) {
     return (
-      <InAppWalletOTPLoginUI
+      <OTPLoginUI
         userInfo={otpUserInfo}
-        locale={localeQuery.data}
+        locale={locale}
         done={props.done}
         goBack={goBackToMain}
         wallet={props.wallet}
@@ -59,7 +59,7 @@ function InAppWalletConnectUI(props: {
 
   if (state?.passkeyLogin) {
     return (
-      <InAppWalletPassKeyLogin
+      <PassKeyLogin
         wallet={props.wallet}
         done={props.done}
         onBack={goBackToMain}
@@ -69,9 +69,9 @@ function InAppWalletConnectUI(props: {
 
   if (state?.socialLogin) {
     return (
-      <InAppWalletSocialLogin
+      <SocialLogin
         socialAuth={state.socialLogin.type}
-        locale={localeQuery.data}
+        locale={locale}
         done={props.done}
         goBack={goBackToMain}
         wallet={props.wallet}
@@ -83,7 +83,7 @@ function InAppWalletConnectUI(props: {
   return (
     <InAppWalletFormUIScreen
       select={() => {}}
-      locale={localeQuery.data}
+      locale={locale}
       done={props.done}
       goBack={props.goBack}
       wallet={props.wallet}