feat: support showAllWallets prop in React Native Connect UI (#4933)

Author: joaquim-verges

.changeset/cuddly-pandas-impress.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Support show all wallets option in React Native Connect UI

packages/thirdweb/scripts/wallets/generate.ts

@@ -127,25 +127,33 @@ const allSupportedWallets = walletConnectSupportedWallets
   );
 
 const walletInfos = allSupportedWallets.map((wallet) => {
-  return { id: wallet.id, name: wallet.name };
+  return {
+    id: wallet.id,
+    name: wallet.name,
+    hasMobileSupport: !!wallet.mobile.universal || !!wallet.mobile.native,
+  };
 });
 
 const customWalletInfos = [
   {
     id: "smart",
     name: "Smart Wallet",
+    hasMobileSupport: true,
   },
   {
     id: "inApp",
     name: "In-App Wallet",
+    hasMobileSupport: true,
   },
   {
     id: "embedded",
     name: "In-App Wallet",
+    hasMobileSupport: true,
   },
   {
     id: "walletConnect",
     name: "WalletConnect",
+    hasMobileSupport: false,
   },
 ];
 
@@ -202,6 +210,7 @@ await writeFile(
 export type MinimalWalletInfo = {
   id: string;
   name: string;
+  hasMobileSupport: boolean;
 };
 
 /**
@@ -320,7 +329,13 @@ const walletImports = allSupportedWallets
   )
   .join("\n");
 
-const customWalletImports = ["smart", "inApp", "walletConnect", "embedded", "adapter"]
+const customWalletImports = [
+  "smart",
+  "inApp",
+  "walletConnect",
+  "embedded",
+  "adapter",
+]
   .map(
     (walletId) =>
       `case "${walletId}": {

packages/thirdweb/src/react/native/ui/components/input.tsx

@@ -14,11 +14,12 @@ import { ThemedSpinner } from "./spinner.js";
 
 type ThemedInputProps = {
   theme: Theme;
+  leftView?: React.ReactNode;
   rightView?: React.ReactNode;
 } & TextInputProps;
 
 export function ThemedInput(props: ThemedInputProps) {
-  const { theme, rightView } = props;
+  const { theme, leftView, rightView } = props;
   const [isFocused, setIsFocused] = useState(false);
   return (
     <View
@@ -31,9 +32,14 @@ export function ThemedInput(props: ThemedInputProps) {
         },
       ]}
     >
+      {leftView && leftView}
       <TextInput
         placeholderTextColor={theme.colors.secondaryText}
-        style={[styles.input, { color: theme.colors.primaryText }]}
+        style={[
+          styles.input,
+          { color: theme.colors.primaryText },
+          leftView ? { paddingLeft: 0 } : {},
+        ]}
         onFocus={() => setIsFocused(true)}
         onBlur={() => setIsFocused(false)}
         {...props}

packages/thirdweb/src/react/native/ui/connect/ConnectModal.tsx

@@ -29,7 +29,7 @@ import { ThemedText } from "../components/text.js";
 import { ThemedView } from "../components/view.js";
 import { TW_ICON, WALLET_ICON } from "../icons/svgs.js";
 import { ErrorView } from "./ErrorView.js";
-import { ExternalWalletsList } from "./ExternalWalletsList.js";
+import { AllWalletsList, ExternalWalletsList } from "./ExternalWalletsList.js";
 import { InAppWalletUI, OtpLogin, PasskeyView } from "./InAppWalletUI.js";
 import WalletLoadingThumbnail from "./WalletLoadingThumbnail.js";
 
@@ -40,6 +40,7 @@ export type ModalState =
   | { screen: "otp"; auth: MultiStepAuthProviderType; wallet: Wallet<"inApp"> }
   | { screen: "passkey"; wallet: Wallet<"inApp"> }
   | { screen: "external_wallets" }
+  | { screen: "all_wallets" }
   | { screen: "auth" };
 
 /**
@@ -217,6 +218,34 @@ export function ConnectModal(
             client={client}
             connector={connector}
             containerType={containerType}
+            showAllWalletsButton={props.showAllWallets !== false}
+            onShowAllWallets={() => setModalState({ screen: "all_wallets" })}
+          />
+        </>
+      );
+      break;
+    }
+    case "all_wallets": {
+      content = (
+        <>
+          <Header
+            theme={theme}
+            onClose={props.onClose}
+            containerType={containerType}
+            onBack={() =>
+              inAppWallet
+                ? setModalState({ screen: "external_wallets" })
+                : setModalState({ screen: "base" })
+            }
+            title={props.connectModal?.title || "Select Wallet"}
+          />
+          <Spacer size="lg" />
+          <AllWalletsList
+            theme={theme}
+            externalWallets={externalWallets}
+            client={client}
+            connector={connector}
+            containerType={containerType}
           />
         </>
       );
@@ -402,6 +431,10 @@ export function ConnectModal(
                   client={client}
                   connector={connector}
                   containerType={containerType}
+                  showAllWalletsButton={props.showAllWallets !== false}
+                  onShowAllWallets={() =>
+                    setModalState({ screen: "all_wallets" })
+                  }
                 />
               </View>
             </>

packages/thirdweb/src/react/native/ui/connect/ExternalWalletsList.tsx

@@ -1,4 +1,7 @@
+import Fuse from "fuse.js";
+import { useMemo, useState } from "react";
 import {
+  FlatList,
   Image,
   Linking,
   ScrollView,
@@ -8,13 +11,20 @@ import {
 } from "react-native";
 import type { Chain } from "../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../client/client.js";
+import walletInfos from "../../../../wallets/__generated__/wallet-infos.js";
 import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
+import { createWallet } from "../../../../wallets/native/create-wallet.js";
+import type { WalletId } from "../../../../wallets/wallet-types.js";
 import type { Theme } from "../../../core/design-system/index.js";
 import { useWalletImage, useWalletInfo } from "../../../core/utils/wallet.js";
 import { spacing } from "../../design-system/index.js";
 import type { ContainerType } from "../components/Header.js";
+import { RNImage } from "../components/RNImage.js";
 import { Skeleton } from "../components/Skeleton.js";
+import { ThemedInput } from "../components/input.js";
+import { Spacer } from "../components/spacer.js";
 import { ThemedText } from "../components/text.js";
+import { SEARCH_ICON } from "../icons/svgs.js";
 
 type ExternalWalletsUiProps = {
   theme: Theme;
@@ -27,9 +37,13 @@ type ExternalWalletsUiProps = {
 };
 
 export function ExternalWalletsList(
-  props: ExternalWalletsUiProps & { externalWallets: Wallet[] },
+  props: ExternalWalletsUiProps & {
+    externalWallets: Wallet[];
+    showAllWalletsButton: boolean;
+    onShowAllWallets: () => void;
+  },
 ) {
-  const { connector, client, theme } = props;
+  const { connector, client, theme, externalWallets, onShowAllWallets } = props;
   const connectWallet = (wallet: Wallet) => {
     connector({
       wallet,
@@ -42,32 +56,125 @@ export function ExternalWalletsList(
       },
     });
   };
-
   return (
     <View style={styles.container}>
       <ScrollView
         style={{
           flex: 1,
           paddingHorizontal: props.containerType === "modal" ? spacing.lg : 0,
-          paddingBottom: spacing.md,
         }}
       >
-        <View style={{ flexDirection: "column", gap: spacing.md }}>
-          {props.externalWallets.map((wallet) => (
+        <View
+          style={{
+            flexDirection: "column",
+            gap: spacing.md,
+            paddingBottom: spacing.md,
+          }}
+        >
+          {externalWallets.map((wallet) => (
             <ExternalWalletRow
               key={wallet.id}
               wallet={wallet}
               connectWallet={connectWallet}
               theme={theme}
             />
           ))}
+          {props.showAllWalletsButton && (
+            <ShowAllWalletsRow theme={theme} onPress={onShowAllWallets} />
+          )}
         </View>
       </ScrollView>
       <NewToWallets theme={props.theme} containerType={props.containerType} />
     </View>
   );
 }
 
+export function AllWalletsList(
+  props: ExternalWalletsUiProps & { externalWallets: Wallet[] },
+) {
+  const { connector, client, theme, externalWallets } = props;
+  const [searchQuery, setSearchQuery] = useState("");
+
+  const walletsToShow = useMemo(() => {
+    const filteredWallets = walletInfos
+      .filter(
+        (info) => !externalWallets.find((wallet) => wallet.id === info.id),
+      )
+      .filter((info) => info.hasMobileSupport);
+
+    const fuse = new Fuse(filteredWallets, {
+      keys: ["name"],
+      threshold: 0.3,
+    });
+
+    return searchQuery
+      ? fuse.search(searchQuery).map((result) => result.item.id)
+      : filteredWallets.map((info) => info.id);
+  }, [externalWallets, searchQuery]);
+
+  const connectWallet = (wallet: Wallet) => {
+    connector({
+      wallet,
+      connectFn: async (chain) => {
+        await wallet.connect({
+          client,
+          chain,
+        });
+        return wallet;
+      },
+    });
+  };
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.searchContainer}>
+        <ThemedInput
+          theme={theme}
+          leftView={
+            <View
+              style={{
+                padding: spacing.sm,
+                width: 48,
+                flexDirection: "row",
+                justifyContent: "center",
+              }}
+            >
+              <RNImage
+                data={SEARCH_ICON}
+                size={24}
+                theme={theme}
+                color={theme.colors.secondaryIconColor}
+              />
+            </View>
+          }
+          placeholder="Search Wallet"
+          value={searchQuery}
+          onChangeText={setSearchQuery}
+        />
+      </View>
+      <Spacer size="md" />
+      <FlatList
+        style={{
+          flex: 1,
+          paddingHorizontal: props.containerType === "modal" ? spacing.lg : 0,
+          paddingBottom: spacing.md,
+        }}
+        data={walletsToShow}
+        renderItem={({ item: walletId }) => (
+          <ExternalWalletRow
+            key={walletId}
+            wallet={createWallet(walletId as WalletId)}
+            connectWallet={connectWallet}
+            theme={theme}
+          />
+        )}
+        keyExtractor={(walletId) => walletId}
+        ItemSeparatorComponent={() => <View style={{ height: spacing.md }} />}
+      />
+    </View>
+  );
+}
+
 function ExternalWalletRow(props: {
   theme: Theme;
   wallet: Wallet;
@@ -99,6 +206,48 @@ function ExternalWalletRow(props: {
   );
 }
 
+function ShowAllWalletsRow(props: {
+  theme: Theme;
+  onPress: () => void;
+}) {
+  const { theme, onPress } = props;
+  return (
+    <TouchableOpacity style={styles.row} onPress={onPress}>
+      <View
+        style={{
+          width: 52,
+          height: 52,
+          flexDirection: "row",
+          flexWrap: "wrap",
+          justifyContent: "space-between",
+          alignContent: "space-between",
+          backgroundColor: theme.colors.secondaryButtonBg,
+          borderColor: theme.colors.borderColor,
+          borderWidth: 1,
+          padding: 8,
+          borderRadius: 6,
+        }}
+      >
+        {[...Array(4)].map((_, index) => (
+          <View
+            // biome-ignore lint/suspicious/noArrayIndexKey: only have index as key
+            key={index}
+            style={{
+              width: 14,
+              height: 14,
+              borderRadius: 7,
+              backgroundColor: theme.colors.secondaryIconColor,
+            }}
+          />
+        ))}
+      </View>
+      <ThemedText theme={theme} type="subtitle">
+        Show all wallets
+      </ThemedText>
+    </TouchableOpacity>
+  );
+}
+
 function NewToWallets({
   theme,
   containerType,
@@ -144,4 +293,11 @@ const styles = StyleSheet.create({
     justifyContent: "flex-start",
     alignItems: "center",
   },
+  searchContainer: {
+    flexDirection: "row",
+    gap: spacing.md,
+    justifyContent: "flex-start",
+    alignItems: "center",
+    paddingHorizontal: spacing.lg,
+  },
 });