thirdweb 5.32.2-nightly-229561e1a79fe2ab3f010c5a8659c7e0fc497ec3-20240703090013 → 5.32.2

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

@@ -1,5 +1,6 @@
 "use client";
 import { ExclamationTriangleIcon } from "@radix-ui/react-icons";
+import { useQuery } from "@tanstack/react-query";
 import { useCallback, useEffect, useRef, useState } from "react";
 import type { Chain } from "../../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../../client/client.js";
@@ -35,7 +36,6 @@ export function SmartConnectUI(props: {
   onBack?: () => void;
   accountAbstraction: SmartWalletOptions;
   setModalVisibility: (value: boolean) => void;
-  localeId: LocaleId;
   meta: {
     title?: string;
     titleIconUrl?: string;
@@ -76,7 +76,6 @@ export function SmartConnectUI(props: {
         client={props.client}
         meta={props.meta}
         size={props.size}
-        localeId={props.localeId}
         walletConnect={props.walletConnect}
         connectLocale={props.connectLocale}
       />
@@ -90,7 +89,7 @@ export function SmartConnectUI(props: {
       accountAbstraction={props.accountAbstraction}
       onBack={props.onBack}
       personalWalletInfo={personalWalletInfo.data}
-      localeId={props.localeId}
+      localeId={props.connectLocale.id}
       size={props.size}
       client={props.client}
     />
@@ -107,14 +106,12 @@ function SmartWalletConnecting(props: {
   size: "compact" | "wide";
   client: ThirdwebClient;
 }) {
-  const [locale, setLocale] = useState<SmartWalletLocale | undefined>();
+  const localeQuery = useQuery<SmartWalletLocale>({
+    queryKey: ["getSmartWalletLocale", props.localeId],
+    queryFn: () => getSmartWalletLocale(props.localeId),
+  });
   const { chain: smartWalletChain } = props.accountAbstraction;
 
-  // FIXME: use a query instead
-  useEffect(() => {
-    getSmartWalletLocale(props.localeId).then(setLocale);
-  }, [props.localeId]);
-
   const { personalWallet } = props;
   const { done } = props;
 
@@ -170,7 +167,7 @@ function SmartWalletConnecting(props: {
     }
   }, [handleConnect, wrongNetwork]);
 
-  if (!locale) {
+  if (!localeQuery.data) {
     return <LoadingScreen />;
   }
 
@@ -198,13 +195,13 @@ function SmartWalletConnecting(props: {
             <Spacer y="md" />
 
             <Text size="lg" color="primaryText" center weight={500}>
-              {locale.wrongNetworkScreen.title}
+              {localeQuery.data.wrongNetworkScreen.title}
             </Text>
 
             <Spacer y="lg" />
 
             <Text multiline center>
-              {locale.wrongNetworkScreen.subtitle}
+              {localeQuery.data.wrongNetworkScreen.subtitle}
             </Text>
 
             <Spacer y="xl" />
@@ -265,7 +262,9 @@ function SmartWalletConnecting(props: {
                   width={iconSize.sm}
                   height={iconSize.sm}
                 />
-                <span>{locale.wrongNetworkScreen.failedToSwitch}</span>
+                <span>
+                  {localeQuery.data.wrongNetworkScreen.failedToSwitch}
+                </span>
               </Container>
             </Container>
           </Container>
@@ -286,7 +285,7 @@ function SmartWalletConnecting(props: {
           minHeight: "300px",
         }}
       >
-        <Text color="danger">{locale.failedToConnect}</Text>
+        <Text color="danger">{localeQuery.data.failedToConnect}</Text>
       </Container>
     );
   }
@@ -301,7 +300,7 @@ function SmartWalletConnecting(props: {
       }}
     >
       <Text color="primaryText" multiline center>
-        {locale.connecting}
+        {localeQuery.data.connecting}
       </Text>
       <Spacer y="lg" />
       <Spinner color="accentText" size="lg" />

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

@@ -16,7 +16,6 @@ import { WalletImage } from "../components/WalletImage.js";
 import { Container } from "../components/basic.js";
 import { Text } from "../components/text.js";
 import { StyledButton } from "../design-system/elements.js";
-import { useScreenContext } from "./Modal/screen.js";
 import type { ConnectLocale } from "./locale/types.js";
 
 /**
@@ -28,12 +27,14 @@ export function WalletEntryButton(props: {
   connectLocale: ConnectLocale;
   recommendedWallets: Wallet[] | undefined;
   client: ThirdwebClient;
+  isActive: boolean;
+  badge: string | undefined;
 }) {
   const { walletId, selectWallet } = props;
   const isRecommended = props.recommendedWallets?.find(
     (w) => w.id === walletId,
   );
-  const { screen } = useScreenContext();
+
   const walletInfo = useWalletInfo(walletId);
 
   const walletName =
@@ -45,12 +46,10 @@ export function WalletEntryButton(props: {
   );
 
   return (
-    <WalletButton
+    <WalletButtonEl
       type="button"
       onClick={selectWallet}
-      data-active={
-        screen && typeof screen === "object" && screen.id === walletId
-      }
+      data-active={props.isActive}
     >
       <WalletImage id={walletId} size={iconSize.xl} client={props.client} />
 
@@ -63,19 +62,19 @@ export function WalletEntryButton(props: {
           <Skeleton width="100px" height={fontSize.md} />
         )}
 
-        {isRecommended && (
+        {props.badge ? (
+          <Text size="sm">{props.badge}</Text>
+        ) : isRecommended ? (
           <Text size="sm">{props.connectLocale.recommended}</Text>
-        )}
-
-        {!isRecommended && isInstalled && (
+        ) : isInstalled ? (
           <Text size="sm">{props.connectLocale.installed}</Text>
-        )}
+        ) : null}
       </Container>
-    </WalletButton>
+    </WalletButtonEl>
   );
 }
 
-export const WalletButton = /* @__PURE__ */ StyledButton((_) => {
+export const WalletButtonEl = /* @__PURE__ */ StyledButton((_) => {
   const theme = useCustomTheme();
   return {
     all: "unset",

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

@@ -34,11 +34,11 @@ import { ModalTitle } from "../components/modalElements.js";
 import { Link } from "../components/text.js";
 import { Text } from "../components/text.js";
 import { StyledDiv, StyledUl } from "../design-system/elements.js";
-import type { LocaleId } from "../types.js";
 import { SmartConnectUI } from "./Modal/SmartWalletConnectUI.js";
 import { TOS } from "./Modal/TOS.js";
+import { useScreenContext } from "./Modal/screen.js";
 import { PoweredByThirdweb } from "./PoweredByTW.js";
-import { WalletButton, WalletEntryButton } from "./WalletEntryButton.js";
+import { WalletButtonEl, WalletEntryButton } from "./WalletEntryButton.js";
 import { WalletTypeRowButton } from "./WalletTypeRowButton.js";
 import { compactModalMaxHeight } from "./constants.js";
 import type { ConnectLocale } from "./locale/types.js";
@@ -50,10 +50,9 @@ const InAppWalletSelectionUI = /* @__PURE__ */ lazy(
 // const localWalletId = "local";
 const inAppWalletId: WalletId = "inApp";
 
-type WalletSelectorProps = {
+export type WalletSelectorProps = {
   wallets: Wallet[];
   selectWallet: (wallet: Wallet) => void;
-  onGetStarted: () => void;
   title: string;
   done: (wallet: Wallet) => void;
   goBack?: () => void;
@@ -72,7 +71,6 @@ type WalletSelectorProps = {
   connectLocale: ConnectLocale;
   recommendedWallets: Wallet[] | undefined;
   isEmbed: boolean;
-  localeId: LocaleId;
   chain: Chain | undefined;
   chains: Chain[] | undefined;
   showAllWallets: boolean | undefined;
@@ -81,6 +79,13 @@ type WalletSelectorProps = {
         projectId?: string;
       }
     | undefined;
+  modalHeader:
+    | {
+        title: string;
+        onBack: () => void;
+      }
+    | undefined;
+  walletIdsToHide: WalletId[] | undefined;
 };
 
 /**
@@ -103,7 +108,6 @@ export function WalletSelector(props: WalletSelectorProps) {
         onBack={props.goBack}
         meta={props.meta}
         size={props.size}
-        localeId={props.localeId}
         chain={props.chain}
         chains={props.chains}
         client={props.client}
@@ -127,12 +131,13 @@ export function WalletSelector(props: WalletSelectorProps) {
  * @internal
  */
 const WalletSelectorInner: React.FC<WalletSelectorProps> = (props) => {
+  const { walletIdsToHide } = props;
   const isCompact = props.size === "compact";
   const [isWalletGroupExpanded, setIsWalletGroupExpanded] = useState(false);
 
   const installedWallets = getInstalledWallets();
   const propsWallets = props.wallets;
-  const _wallets: Wallet[] = [...propsWallets];
+  let _wallets: Wallet[] = [...propsWallets];
 
   for (const iW of installedWallets) {
     if (!propsWallets.find((w) => w.id === iW.id)) {
@@ -140,6 +145,10 @@ const WalletSelectorInner: React.FC<WalletSelectorProps> = (props) => {
     }
   }
 
+  if (walletIdsToHide) {
+    _wallets = _wallets.filter((w) => !walletIdsToHide?.includes(w.id));
+  }
+
   const localWalletConfig = false; // _wallets.find((w) => w.id === localWalletId);
 
   const nonLocalWalletConfigs = _wallets; // _wallets.filter((w) => w.id !== localWalletId);
@@ -182,7 +191,12 @@ const WalletSelectorInner: React.FC<WalletSelectorProps> = (props) => {
     }, 1000);
   }, []);
 
-  const twTitle = (
+  const twTitle = props.modalHeader ? (
+    <ModalHeader
+      title={props.modalHeader.title}
+      onBack={props.modalHeader.onBack}
+    />
+  ) : (
     <Container gap="xxs" center="y" flex="row">
       {!props.meta.titleIconUrl ? null : (
         <Img
@@ -263,7 +277,6 @@ const WalletSelectorInner: React.FC<WalletSelectorProps> = (props) => {
         recommendedWallets={props.recommendedWallets}
         chain={props.chain}
         showAllWallets={props.showAllWallets}
-        localeId={props.localeId}
       />
     );
 
@@ -291,7 +304,6 @@ const WalletSelectorInner: React.FC<WalletSelectorProps> = (props) => {
           recommendedWallets={props.recommendedWallets}
           chain={props.chain}
           showAllWallets={props.showAllWallets}
-          localeId={props.localeId}
         />
       );
 
@@ -335,7 +347,6 @@ const WalletSelectorInner: React.FC<WalletSelectorProps> = (props) => {
               recommendedWallets={props.recommendedWallets}
               chain={props.chain}
               showAllWallets={props.showAllWallets}
-              localeId={props.localeId}
             />
             {eoaWallets.length > 0 && (
               <>
@@ -406,7 +417,6 @@ const WalletSelectorInner: React.FC<WalletSelectorProps> = (props) => {
                     recommendedWallets={props.recommendedWallets}
                     chain={props.chain}
                     showAllWallets={props.showAllWallets}
-                    localeId={props.localeId}
                   />
                 </Container>
 
@@ -445,7 +455,6 @@ const WalletSelectorInner: React.FC<WalletSelectorProps> = (props) => {
             recommendedWallets={props.recommendedWallets}
             chain={props.chain}
             showAllWallets={props.showAllWallets}
-            localeId={props.localeId}
           />
         );
 
@@ -456,6 +465,8 @@ const WalletSelectorInner: React.FC<WalletSelectorProps> = (props) => {
     }
   }
 
+  const showHeader = !props.isEmbed || props.modalHeader;
+
   return (
     <Container
       scrollY
@@ -467,7 +478,7 @@ const WalletSelectorInner: React.FC<WalletSelectorProps> = (props) => {
       }}
     >
       {/* Header */}
-      {!props.isEmbed && (
+      {showHeader && (
         <Container p="lg">
           {isWalletGroupExpanded ? (
             <ModalHeader
@@ -488,7 +499,7 @@ const WalletSelectorInner: React.FC<WalletSelectorProps> = (props) => {
         scrollY
         px="md"
         style={
-          props.isEmbed
+          !showHeader
             ? {
                 paddingTop: spacing.lg,
               }
@@ -497,7 +508,7 @@ const WalletSelectorInner: React.FC<WalletSelectorProps> = (props) => {
               }
         }
       >
-        {props.isEmbed && isWalletGroupExpanded && (
+        {!props.modalHeader && props.isEmbed && isWalletGroupExpanded && (
           <Container
             flex="row"
             center="y"
@@ -566,9 +577,9 @@ const WalletSelection: React.FC<{
   connectLocale: ConnectLocale;
   client: ThirdwebClient;
   chain: Chain | undefined;
-  localeId: LocaleId;
 }> = (props) => {
   const wallets = sortWallets(props.wallets, props.recommendedWallets);
+  const { screen } = useScreenContext();
 
   return (
     <WalletList
@@ -577,6 +588,9 @@ const WalletSelection: React.FC<{
       }}
     >
       {wallets.map((wallet) => {
+        const isActive = screen
+          ? typeof screen === "object" && screen.id === wallet.id
+          : false;
         return (
           <li
             key={wallet.id}
@@ -594,7 +608,6 @@ const WalletSelection: React.FC<{
                   size={props.size}
                   recommendedWallets={props.recommendedWallets}
                   chain={props.chain}
-                  localeId={props.localeId}
                 />
               </Suspense>
             ) : (
@@ -606,6 +619,8 @@ const WalletSelection: React.FC<{
                 connectLocale={props.connectLocale}
                 client={props.client}
                 recommendedWallets={props.recommendedWallets}
+                isActive={isActive}
+                badge={undefined}
               />
             )}
           </li>
@@ -614,7 +629,7 @@ const WalletSelection: React.FC<{
 
       {props.onShowAll && props.showAllWallets !== false && (
         <ButtonContainer>
-          <WalletButton onClick={props.onShowAll}>
+          <WalletButtonEl onClick={props.onShowAll}>
             <ShowAllWalletsIcon>
               <div data-dot />
               <div data-dot />
@@ -625,7 +640,7 @@ const WalletSelection: React.FC<{
               <Text color="primaryText">All Wallets</Text>
               <BadgeText> 350+ </BadgeText>
             </Container>
-          </WalletButton>
+          </WalletButtonEl>
         </ButtonContainer>
       )}
     </WalletList>

package/src/react/web/ui/ConnectWallet/locale/en.ts

@@ -1,6 +1,7 @@
 import type { ConnectLocale } from "./types.js";
 
 const connectLocaleEn: ConnectLocale = {
+  id: "en_US",
   signIn: "Sign in",
   defaultButtonTitle: "Connect Wallet",
   connecting: "Connecting",

package/src/react/web/ui/ConnectWallet/locale/es.ts

@@ -1,6 +1,7 @@
 import type { ConnectLocale } from "./types.js";
 
 const connectWalletLocalEs: ConnectLocale = {
+  id: "es_ES",
   signIn: "Iniciar sesión",
   defaultButtonTitle: "Conectar cartera",
   connecting: "Conectando",

package/src/react/web/ui/ConnectWallet/locale/ja.ts

@@ -1,6 +1,7 @@
 import type { ConnectLocale } from "./types.js";
 
 const connectWalletLocalJa: ConnectLocale = {
+  id: "ja_JP",
   signIn: "サインイン",
   defaultButtonTitle: "ウォレット接続",
   connecting: "接続中",

package/src/react/web/ui/ConnectWallet/locale/tl.ts

@@ -1,6 +1,7 @@
 import type { ConnectLocale } from "./types.js";
 
 const connectWalletLocalTl: ConnectLocale = {
+  id: "tl_PH",
   signIn: "Mag-sign in",
   defaultButtonTitle: "Ikonekta ang Wallet",
   connecting: "Kumokonekta",

package/src/react/web/ui/ConnectWallet/locale/types.ts

@@ -1,4 +1,7 @@
+import type { LocaleId } from "../../types.js";
+
 export type ConnectLocale = {
+  id: LocaleId;
   agreement: {
     and: string;
     prefix: string;