feat: Update wallet count from 350+ to 500+ and optimize SIWE linking (#5818)

Author: joaquim-verges

.changeset/shy-scissors-work.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Only connect wallets on SIWE linking if not already connected

apps/playground-web/src/app/connect/sign-in/button/page.tsx

@@ -65,7 +65,7 @@ export default function Page(props: {
           description={
             <>
               A fully featured wallet connection component that allows to
-              Connect to 350+ external wallets, connect via email, phone number,
+              Connect to 500+ external wallets, connect via email, phone number,
               passkey or social logins, Convert any wallet to a ERC4337 smart
               wallet for gasless transactions and provides SIWE (Sign In With
               Ethereum)

apps/playground-web/src/app/connect/sign-in/components/WalletsSelection.tsx

@@ -61,7 +61,7 @@ export function WalletsSelection(props: {
         <div className="relative max-w-[320px] grow">
           <SearchIcon className="-translate-y-1/2 absolute top-1/2 left-3 size-4 text-muted-foreground" />
           <Input
-            placeholder="Search from 350+ wallets"
+            placeholder="Search from 500+ wallets"
             className="rounded-lg pl-9"
             value={search}
             onChange={(e) => setSearch(e.target.value)}

apps/playground-web/src/app/connect/sign-in/headless/page.tsx

@@ -4,6 +4,7 @@ import { HooksPreview } from "@/components/sign-in/hooks";
 import ThirdwebProvider from "@/components/thirdweb-provider";
 import { metadataBase } from "@/lib/constants";
 import type { Metadata } from "next";
+import { ModalPreview } from "../../../../components/sign-in/modal";
 
 export const metadata: Metadata = {
   metadataBase,
@@ -28,13 +29,44 @@ export default function Page() {
           docsLink="https://portal.thirdweb.com/connect/sign-in/overview"
           heroLink="/connectors.png"
         />
-
+        <Modal />
+        <div className="h-6" />
         <Hooks />
       </main>
     </ThirdwebProvider>
   );
 }
 
+function Modal() {
+  return (
+    <>
+      <h2 className="mb-2 font-semibold text-2xl tracking-tight sm:text-3xl">
+        Open the connect modal from anywhere
+      </h2>
+
+      <p className="mb-5 max-w-[600px]">
+        You can open the connect modal from anywhere in your app.
+      </p>
+
+      <CodeExample
+        preview={<ModalPreview />}
+        code={`// Using your own UI
+        import { useConnectModal } from "thirdweb/react";
+
+        function App(){
+          const { connect } = useConnectModal();
+
+          return (
+          // pass modal configuration options here
+      <button onClick={() => connect({ client })}>Sign in</button>
+      );
+      };`}
+        lang="tsx"
+      />
+    </>
+  );
+}
+
 function Hooks() {
   return (
     <>
@@ -43,7 +75,7 @@ function Hooks() {
       </h2>
 
       <p className="mb-5 max-w-[600px]">
-        Build your own connect UI using react hooks.
+        Full control over your UI using react hooks.
         <br />
         Wallet state management is all handled for you.
       </p>
@@ -57,14 +89,14 @@ function Hooks() {
         function App(){
           const { connect } = useConnect();
 
-          return (<>
+          return (
       <button onClick={() => connect(async () => {
-        // 350+ wallets supported with id autocomplete
+        // 500+ wallets supported with id autocomplete
         const wallet = createWallet("io.metamask");
         await wallet.connect({ client });
         return wallet;
       })}>Connect with Metamask</button>
-      </>);
+      );
       };`}
         lang="tsx"
       />

apps/playground-web/src/app/page.tsx

@@ -27,7 +27,7 @@ function WalletsSection() {
         <ArticleCardIndex
           href="/connect/sign-in"
           title="Sign In"
-          description="Integrate 350+ web3 wallets, in-app wallets, and smart accounts"
+          description="Integrate 500+ web3 wallets, in-app wallets, and smart accounts"
           icon={WalletsConnectIcon}
         />
         <ArticleCardIndex

apps/playground-web/src/components/sign-in/modal.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import {
+  useActiveAccount,
+  useActiveWallet,
+  useConnectModal,
+  useDisconnect,
+} from "thirdweb/react";
+import { shortenAddress } from "thirdweb/utils";
+import { THIRDWEB_CLIENT } from "../../lib/client";
+import { Button } from "../ui/button";
+
+export function ModalPreview() {
+  const account = useActiveAccount();
+  const wallet = useActiveWallet();
+  const connectMutation = useConnectModal();
+  const { disconnect } = useDisconnect();
+
+  const connect = async () => {
+    const wallet = await connectMutation.connect({ client: THIRDWEB_CLIENT });
+    return wallet;
+  };
+
+  return (
+    <div className="flex flex-col">
+      {account && wallet ? (
+        <>
+          <p className="py-4">Connected as {shortenAddress(account.address)}</p>
+          <Button variant="outline" onClick={() => disconnect(wallet)}>
+            Disconnect
+          </Button>
+        </>
+      ) : (
+        <Button variant="default" onClick={connect}>
+          Sign in
+        </Button>
+      )}
+    </div>
+  );
+}

packages/thirdweb/src/react/core/hooks/connection/ConnectButtonProps.ts

@@ -592,7 +592,7 @@ export type ConnectButtonProps = {
    * ]
    * ```
    *
-   * The `ConnectButton` also shows a "All wallets" button at the end of wallet list which allows user to connect to any of the 350+ wallets
+   * The `ConnectButton` also shows a "All wallets" button at the end of wallet list which allows user to connect to any of the 500+ wallets
    */
   wallets?: Wallet[];
 
@@ -945,7 +945,7 @@ export type ConnectButtonProps = {
   recommendedWallets?: Wallet[];
 
   /**
-   * By default, ConnectButton modal shows a "All Wallets" button that shows a list of 350+ wallets.
+   * By default, ConnectButton modal shows a "All Wallets" button that shows a list of 500+ wallets.
    *
    * You can disable this button by setting `showAllWallets` prop to `false`
    */

packages/thirdweb/src/react/core/hooks/connection/ConnectEmbedProps.ts

@@ -87,7 +87,7 @@ export type ConnectEmbedProps = {
    * ]
    * ```
    *
-   * The `ConnectEmbed` also shows a "All wallets" button at the end of wallet list which allows user to connect to any of the 350+ wallets
+   * The `ConnectEmbed` also shows a "All wallets" button at the end of wallet list which allows user to connect to any of the 500+ wallets
    */
   wallets?: Wallet[];
 
@@ -266,7 +266,7 @@ export type ConnectEmbedProps = {
   recommendedWallets?: Wallet[];
 
   /**
-   * By default, `ConnectEmbed` shows a "All Wallets" button that shows a list of 350+ wallets.
+   * By default, `ConnectEmbed` shows a "All Wallets" button that shows a list of 500+ wallets.
    *
    * You can disable this button by setting `showAllWallets` prop to `false`
    */

packages/thirdweb/src/react/web/ui/ConnectWallet/ConnectButton.tsx

@@ -36,7 +36,7 @@ const TW_CONNECT_WALLET = "tw-connect-wallet";
 /**
  * A fully featured wallet connection component that allows to:
  *
- * - Connect to 350+ external wallets
+ * - Connect to 500+ external wallets
  * - Connect with email, phone, passkey or socials
  * - Convert any wallet to a ERC4337 smart wallet for gasless transactions
  * - Sign in with ethereum (Auth)

packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx

@@ -42,7 +42,7 @@ import { useSetupScreen } from "./screen.js";
 /**
  * An inline wallet connection component that allows to:
  *
- * - Connect to 350+ external wallets
+ * - Connect to 500+ external wallets
  * - Connect with email, phone, passkey or socials
  * - Convert any wallet to a ERC4337 smart wallet for gasless transactions
  * - Sign in with ethereum (Auth)