thirdweb 5.55.0-nightly-8035923cdad943a47fc909e04522c351d06804f0-20240913000407 → 5.55.0

package/src/react/core/utils/walletIcon.ts

@@ -28,6 +28,9 @@ export const telegramIconUri =
 export const microsoftIconUri =
   "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciICB2aWV3Qm94PSIwIDAgNDggNDgiIHdpZHRoPSI0OHB4IiBoZWlnaHQ9IjQ4cHgiPjxwYXRoIGZpbGw9IiNmZjU3MjIiIGQ9Ik02IDZIMjJWMjJINnoiIHRyYW5zZm9ybT0icm90YXRlKC0xODAgMTQgMTQpIi8+PHBhdGggZmlsbD0iIzRjYWY1MCIgZD0iTTI2IDZINDJWMjJIMjZ6IiB0cmFuc2Zvcm09InJvdGF0ZSgtMTgwIDM0IDE0KSIvPjxwYXRoIGZpbGw9IiNmZmMxMDciIGQ9Ik0yNiAyNkg0MlY0MkgyNnoiIHRyYW5zZm9ybT0icm90YXRlKC0xODAgMzQgMzQpIi8+PHBhdGggZmlsbD0iIzAzYTlmNCIgZD0iTTYgMjZIMjJWNDJINnoiIHRyYW5zZm9ybT0icm90YXRlKC0xODAgMTQgMzQpIi8+PC9zdmc+";
 
+export const xIcon =
+  "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIwIiBoZWlnaHQ9IjMyMCIgdmlld0JveD0iMCAwIDMyMCAzMjAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIzMjAiIGhlaWdodD0iMzIwIiByeD0iMjQiIGZpbGw9ImJsYWNrIi8+CjxwYXRoIGQ9Ik0xNzcuMzE1IDE0NS4zMzVMMjQ1LjA2OCA2N0gyMjkuMDEzTDE3MC4xODIgMTM1LjAxN0wxMjMuMTk1IDY3SDY5TDE0MC4wNTUgMTY5Ljg1NEw2OSAyNTJIODUuMDU2M0wxNDcuMTgzIDE4MC4xNzJMMTk2LjgwNSAyNTJIMjUxTDE3Ny4zMTEgMTQ1LjMzNUgxNzcuMzE1Wk0xNTUuMzIzIDE3MC43NkwxNDguMTI0IDE2MC41MThMOTAuODQxNyA3OS4wMjJIMTE1LjUwM0wxNjEuNzMxIDE0NC43OTJMMTY4LjkzIDE1NS4wMzRMMjI5LjAyIDI0MC41MjVIMjA0LjM1OUwxNTUuMzIzIDE3MC43NjRWMTcwLjc2WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==";
+
 export const emailIcon =
   "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEzLjMzMzUgMi42NjY1SDIuNjY2ODNDMS45MzA0NSAyLjY2NjUgMS4zMzM1IDMuMjYzNDYgMS4zMzM1IDMuOTk5ODRWMTEuOTk5OEMxLjMzMzUgMTIuNzM2MiAxLjkzMDQ1IDEzLjMzMzIgMi42NjY4MyAxMy4zMzMySDEzLjMzMzVDMTQuMDY5OSAxMy4zMzMyIDE0LjY2NjggMTIuNzM2MiAxNC42NjY4IDExLjk5OThWMy45OTk4NEMxNC42NjY4IDMuMjYzNDYgMTQuMDY5OSAyLjY2NjUgMTMuMzMzNSAyLjY2NjVaIiBzdHJva2U9IiMzMzg1RkYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNMTQuNjY2OCA0LjY2NjVMOC42ODY4MyA4LjQ2NjVDOC40ODEwMSA4LjU5NTQ1IDguMjQzMDQgOC42NjM4NCA4LjAwMDE2IDguNjYzODRDNy43NTcyOCA4LjY2Mzg0IDcuNTE5MzEgOC41OTU0NSA3LjMxMzUgOC40NjY1TDEuMzMzNSA0LjY2NjUiIHN0cm9rZT0iIzMzODVGRiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=";
 
@@ -49,6 +52,7 @@ export const socialIcons = {
   facebook: facebookIconUri,
   discord: discordIconUri,
   line: lineIconUri,
+  x: xIcon,
   farcaster: farcasterIconUri,
   telegram: telegramIconUri,
 };
@@ -72,6 +76,8 @@ export function getWalletIcon(provider: string) {
       return discordIconUri;
     case "line":
       return lineIconUri;
+    case "x":
+      return xIcon;
     case "farcaster":
       return farcasterIconUri;
     case "telegram":

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

@@ -17,6 +17,7 @@ import {
   PHONE_ICON,
   TELEGRAM_ICON,
   WALLET_ICON,
+  X_ICON,
 } from "../icons/svgs.js";
 import { RNImage } from "./RNImage.js";
 
@@ -84,6 +85,8 @@ export function getAuthProviderImage(authProvider: string | null): string {
       return DISCORD_ICON;
     case "line":
       return LINE_ICON;
+    case "x":
+      return X_ICON;
     case "farcaster":
       return FARCASTER_ICON;
     case "telegram":

package/src/react/native/ui/connect/InAppWalletUI.tsx

@@ -36,6 +36,7 @@ import {
   GOOGLE_ICON,
   LINE_ICON,
   TELEGRAM_ICON,
+  X_ICON,
 } from "../icons/svgs.js";
 import type { ModalState } from "./ConnectModal.js";
 import { LoadingView } from "./LoadingView.js";
@@ -55,6 +56,7 @@ const socialIcons = {
   apple: APPLE_ICON,
   discord: DISCORD_ICON,
   line: LINE_ICON,
+  x: X_ICON,
   farcaster: FARCASTER_ICON,
   telegram: TELEGRAM_ICON,
 };

package/src/react/native/ui/icons/svgs.ts

@@ -93,6 +93,11 @@ export const RIGHT_ARROW = `<svg width="20" height="20" viewBox="0 0 20 20" fill
 </svg>
 `;
 
+export const X_ICON = `<svg width="320" height="320" viewBox="0 0 320 320" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="320" height="320" rx="24" fill="black"/>
+<path d="M177.315 145.335L245.068 67H229.013L170.182 135.017L123.195 67H69L140.055 169.854L69 252H85.0563L147.183 180.172L196.805 252H251L177.311 145.335H177.315ZM155.323 170.76L148.124 160.518L90.8417 79.022H115.503L161.731 144.792L168.93 155.034L229.02 240.525H204.359L155.323 170.764V170.76Z" fill="white"/>
+</svg>`;
+
 export const WALLET_ICON = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M12.6667 4.66667V2.66667C12.6667 2.48986 12.5964 2.32029 12.4714 2.19526C12.3464 2.07024 12.1768 2 12 2H3.33333C2.97971 2 2.64057 2.14048 2.39052 2.39052C2.14048 2.64057 2 2.97971 2 3.33333C2 3.68696 2.14048 4.02609 2.39052 4.27614C2.64057 4.52619 2.97971 4.66667 3.33333 4.66667H13.3333C13.5101 4.66667 13.6797 4.7369 13.8047 4.86193C13.9298 4.98695 14 5.15652 14 5.33333V8M14 8H12C11.6464 8 11.3072 8.14048 11.0572 8.39052C10.8071 8.64057 10.6667 8.97971 10.6667 9.33333C10.6667 9.68696 10.8071 10.0261 11.0572 10.2761C11.3072 10.5262 11.6464 10.6667 12 10.6667H14C14.1768 10.6667 14.3464 10.5964 14.4714 10.4714C14.5964 10.3464 14.6667 10.1768 14.6667 10V8.66667C14.6667 8.48986 14.5964 8.32029 14.4714 8.19526C14.3464 8.07024 14.1768 8 14 8Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M2 3.3335V12.6668C2 13.0205 2.14048 13.3596 2.39052 13.6096C2.64057 13.8597 2.97971 14.0002 3.33333 14.0002H13.3333C13.5101 14.0002 13.6797 13.9299 13.8047 13.8049C13.9298 13.6799 14 13.5103 14 13.3335V10.6668" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>

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

@@ -544,6 +544,7 @@ function ConnectButtonInner(
         showAllWallets: props.showAllWallets,
         walletConnect: props.walletConnect,
         wallets: props.wallets,
+        hiddenWallets: props.detailsModal?.hiddenWallets,
       }}
     />
   );

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

@@ -19,6 +19,7 @@ import { formatNumber } from "../../../../utils/formatNumber.js";
 import type { Account, Wallet } from "../../../../wallets/interfaces/wallet.js";
 import type { SmartWalletOptions } from "../../../../wallets/smart/types.js";
 import type { AppMetadata } from "../../../../wallets/types.js";
+import type { WalletId } from "../../../../wallets/wallet-types.js";
 import {
   CustomThemeProvider,
   parseTheme,
@@ -744,6 +745,7 @@ function DetailsModal(props: {
         chain={props.connectOptions?.chain}
         chains={props.connectOptions?.chains}
         client={client}
+        hiddenWallets={props.connectOptions?.hiddenWallets}
         connectLocale={locale}
         recommendedWallets={props.connectOptions?.recommendedWallets}
         showAllWallets={!!props.connectOptions?.showAllWallets}
@@ -924,6 +926,7 @@ function DetailsModal(props: {
             mode: "fund_wallet",
           }
         }
+        hiddenWallets={props.detailsModal?.hiddenWallets}
         theme={typeof props.theme === "string" ? props.theme : props.theme.type}
         onDone={closeModal}
         connectOptions={undefined}
@@ -1156,6 +1159,7 @@ export type DetailsModalConnectOptions = {
   chain?: Chain;
   chains?: Chain[];
   recommendedWallets?: Wallet[];
+  hiddenWallets?: WalletId[];
   showAllWallets?: boolean;
 };
 

package/src/react/web/ui/ConnectWallet/screens/Buy/BuyScreen.tsx

@@ -10,6 +10,7 @@ import type { BuyWithFiatStatus } from "../../../../../../pay/buyWithFiat/getSta
 import { isSwapRequiredPostOnramp } from "../../../../../../pay/buyWithFiat/isSwapRequiredPostOnramp.js";
 import { formatNumber } from "../../../../../../utils/formatNumber.js";
 import type { Account } from "../../../../../../wallets/interfaces/wallet.js";
+import type { WalletId } from "../../../../../../wallets/wallet-types.js";
 import {
   type Theme,
   iconSize,
@@ -91,6 +92,7 @@ export type BuyScreenProps = {
   theme: "light" | "dark" | Theme;
   onDone: () => void;
   connectOptions: PayEmbedConnectOptions | undefined;
+  hiddenWallets?: WalletId[];
   isEmbed: boolean;
 };
 
@@ -128,6 +130,7 @@ type BuyScreenContentProps = {
   theme: "light" | "dark" | Theme;
   payOptions: PayUIOptions;
   onDone: () => void;
+  hiddenWallets?: WalletId[];
   connectOptions: PayEmbedConnectOptions | undefined;
   isEmbed: boolean;
 };
@@ -265,6 +268,7 @@ function BuyScreenContent(props: BuyScreenContentProps) {
             });
           }
         }}
+        hiddenWallets={props.hiddenWallets}
         recommendedWallets={props.connectOptions?.recommendedWallets}
         showAllWallets={
           props.connectOptions?.showAllWallets === undefined
@@ -541,6 +545,7 @@ function BuyScreenContent(props: BuyScreenContentProps) {
               {screen.id === "select-wallet" && (
                 <WalletSwitcherDrawerContent
                   client={client}
+                  hiddenWallets={props.hiddenWallets}
                   onSelect={(w) => {
                     const chain = w.getChain();
                     const account = w.getAccount();
@@ -1352,6 +1357,7 @@ function FiatScreenContent(props: {
           isTestMode: buyWithFiatOptions?.testMode,
           purchaseData: props.payOptions.purchaseData,
           fromAddress: payer.account.address,
+          preferredProvider: buyWithFiatOptions?.preferredProvider,
         }
       : undefined,
   );

package/src/react/web/ui/ConnectWallet/screens/Buy/swap/WalletSwitcherDrawerContent.tsx

@@ -1,6 +1,7 @@
 import { PlusIcon } from "@radix-ui/react-icons";
 import type { ThirdwebClient } from "../../../../../../../client/client.js";
 import type { Wallet } from "../../../../../../../wallets/interfaces/wallet.js";
+import type { WalletId } from "../../../../../../../wallets/wallet-types.js";
 import { useCustomTheme } from "../../../../../../core/design-system/CustomThemeProvider.js";
 import {
   iconSize,
@@ -22,6 +23,7 @@ export function WalletSwitcherDrawerContent(props: {
   onBack: () => void;
   onConnect: () => void;
   selectedAddress: string;
+  hiddenWallets?: WalletId[];
 }) {
   const theme = useCustomTheme();
   const connectedWallets = useConnectedWallets();
@@ -34,23 +36,25 @@ export function WalletSwitcherDrawerContent(props: {
   return (
     <Container>
       <Container flex="column" gap="xs">
-        {connectedWallets.map((w) => {
-          const address = w.getAccount()?.address;
-          return (
-            <WalletSelectorButton
-              key={w.id}
-              walletId={w.id}
-              client={props.client}
-              address={address || ""}
-              onClick={() => {
-                props.onSelect(w);
-                props.onBack();
-              }}
-              disableChevron
-              checked={false}
-            />
-          );
-        })}
+        {connectedWallets
+          .filter((w) => !props.hiddenWallets?.includes(w.id))
+          .map((w) => {
+            const address = w.getAccount()?.address;
+            return (
+              <WalletSelectorButton
+                key={w.id}
+                walletId={w.id}
+                client={props.client}
+                address={address || ""}
+                onClick={() => {
+                  props.onSelect(w);
+                  props.onBack();
+                }}
+                disableChevron
+                checked={false}
+              />
+            );
+          })}
         {!hideConnectButton && (
           <Button
             variant="secondary"

package/src/react/web/ui/ConnectWallet/screens/Details/WalletManagerScreen.tsx

@@ -80,21 +80,23 @@ export function WalletManagerScreen(
         }}
       >
         <Container flex="column" gap="xs">
-          {connectedWallets.map((w) => {
-            return (
-              <WalletManangerButton
-                key={w.id}
-                client={props.client}
-                // address={address || ""}
-                onClick={() => {
-                  setActive(w);
-                  props.onBack();
-                }}
-                chain={props.activeChain}
-                wallet={w}
-              />
-            );
-          })}
+          {connectedWallets
+            .filter((w) => !props.hiddenWallets?.includes(w.id))
+            .map((w) => {
+              return (
+                <WalletManangerButton
+                  key={w.id}
+                  client={props.client}
+                  // address={address || ""}
+                  onClick={() => {
+                    setActive(w);
+                    props.onBack();
+                  }}
+                  chain={props.activeChain}
+                  wallet={w}
+                />
+              );
+            })}
         </Container>
       </Container>
 

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

@@ -3,6 +3,7 @@ import type { ThirdwebClient } from "../../../../../client/client.js";
 import type { Wallet } from "../../../../../wallets/interfaces/wallet.js";
 import type { SmartWalletOptions } from "../../../../../wallets/smart/types.js";
 import type { AppMetadata } from "../../../../../wallets/types.js";
+import type { WalletId } from "../../../../../wallets/wallet-types.js";
 import { useConnectedWallets } from "../../../../core/hooks/wallets/useConnectedWallets.js";
 import { getDefaultWallets } from "../../../wallets/defaultWallets.js";
 import { ConnectModalContent } from "../Modal/ConnectModalContent.js";
@@ -21,6 +22,7 @@ export type WalletSwitcherConnectionScreenProps = {
   onSelect: (wallet: Wallet) => void;
   recommendedWallets: Wallet[] | undefined;
   showAllWallets: boolean;
+  hiddenWallets?: WalletId[];
   walletConnect:
     | {
         projectId?: string;

package/src/react/web/ui/PayEmbed.tsx

@@ -6,6 +6,7 @@ import type { ThirdwebClient } from "../../../client/client.js";
 import type { Wallet } from "../../../wallets/interfaces/wallet.js";
 import type { SmartWalletOptions } from "../../../wallets/smart/types.js";
 import type { AppMetadata } from "../../../wallets/types.js";
+import type { WalletId } from "../../../wallets/wallet-types.js";
 import { CustomThemeProvider } from "../../core/design-system/CustomThemeProvider.js";
 import type { Theme } from "../../core/design-system/index.js";
 import type { SiweAuthOptions } from "../../core/hooks/auth/useSiweAuth.js";
@@ -119,12 +120,17 @@ export type PayEmbedProps = {
   theme?: "light" | "dark" | Theme;
 
   /**
-   * Customize the options for "Connect" Button showin in the PayEmbed UI when the user is not connected to a wallet.
+   * Customize the options for "Connect" Button showing in the PayEmbed UI when the user is not connected to a wallet.
    *
    * Refer to the [`PayEmbedConnectOptions`](https://portal.thirdweb.com/references/typescript/v5/PayEmbedConnectOptions) type for more details.
    */
   connectOptions?: PayEmbedConnectOptions;
 
+  /**
+   * All wallet IDs included in this array will be hidden from wallet selection when connected.
+   */
+  hiddenWallets?: WalletId[];
+
   style?: React.CSSProperties;
 
   className?: string;
@@ -201,6 +207,7 @@ export function PayEmbed(props: PayEmbedProps) {
             theme={theme}
             client={props.client}
             connectLocale={localeQuery.data}
+            hiddenWallets={props.hiddenWallets}
             payOptions={
               props.payOptions || {
                 mode: "fund_wallet",

package/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsx

@@ -107,6 +107,7 @@ export const ConnectWalletSocialOptions = (
     apple: locale.signInWithApple,
     discord: locale.signInWithDiscord,
     line: "LINE",
+    x: "X",
     farcaster: "Farcaster",
     telegram: "Telegram",
   };

package/src/react/web/wallets/shared/oauthSignIn.ts

@@ -36,6 +36,7 @@ function getOauthLoginPath(
     case "farcaster":
     case "telegram":
     case "line":
+    case "x":
     case "discord":
       return getLoginUrl({ authOption, client, ecosystem });
     default:

package/src/version.ts

@@ -1 +1 @@
-export const version = "5.55.0-nightly-8035923cdad943a47fc909e04522c351d06804f0-20240913000407";
+export const version = "5.55.0";

package/src/wallets/in-app/core/authentication/types.ts

@@ -76,6 +76,7 @@ export enum AuthProvider {
   APPLE = "Apple",
   PASSKEY = "Passkey",
   DISCORD = "Discord",
+  X = "X",
   LINE = "Line",
   FARCASTER = "Farcaster",
   TELEGRAM = "Telegram",

package/src/wallets/in-app/native/native-connector.ts

@@ -110,6 +110,7 @@ export class InAppNativeConnector implements InAppConnector {
       case "facebook":
       case "discord":
       case "line":
+      case "x":
       case "apple": {
         const ExpoLinking = require("expo-linking");
         const redirectUrl =
@@ -146,6 +147,7 @@ export class InAppNativeConnector implements InAppConnector {
       case "facebook":
       case "discord":
       case "line":
+      case "x":
       case "farcaster":
       case "telegram":
       case "apple": {

package/src/wallets/in-app/web/ecosystem.ts

@@ -17,6 +17,8 @@ import { createEcosystemWallet } from "../core/wallet/ecosystem-core.js";
  * - Apple
  * - Facebook
  * - Discord
+ * - LINE
+ * - X
  * - Farcaster
  *
  * Can also be configured to use Account Abstraction to directly connect to a ERC4337 smart account based on those authentication methods.

package/src/wallets/in-app/web/in-app.ts

@@ -16,6 +16,7 @@ import { createInAppWallet } from "../core/wallet/in-app-core.js";
  * - Discord
  * - Telegram
  * - LINE
+ * - X
  * - Farcaster
  *
  * Can also be configured to use Account Abstraction to directly connect to a ERC4337 smart account based on those authentication methods.

package/src/wallets/in-app/web/lib/web-connector.ts

@@ -216,6 +216,7 @@ export class InAppWebConnector implements InAppConnector {
       case "telegram":
       case "farcaster":
       case "line":
+      case "x":
       case "discord": {
         return loginWithOauth({
           authOption: strategy,
@@ -277,6 +278,7 @@ export class InAppWebConnector implements InAppConnector {
       case "farcaster":
       case "telegram":
       case "line":
+      case "x":
       case "discord": {
         const authToken = await this.authenticate(args);
         return this.auth.loginWithAuthToken(authToken);

package/src/wallets/types.ts

@@ -25,6 +25,7 @@ export const socialAuthOptions = [
   "facebook",
   "discord",
   "line",
+  "x",
   "farcaster",
   "telegram",
 ] as const;