thirdweb-dev · joaquim-verges · Dec 20, 2024 · Dec 20, 2024
diff --git a/.changeset/shy-scissors-work.md b/.changeset/shy-scissors-work.md
@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Only connect wallets on SIWE linking if not already connected
@@ -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)

@@ -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)}

@@ -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"
       />

@@ -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

@@ -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>
+  );
+}
@@ -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`
    */

@@ -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`
    */

@@ -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)

@@ -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)

@@ -667,7 +667,7 @@
             </ShowAllWalletsIcon>
             <Container flex="row" gap="xs">
               <Text color="primaryText">All Wallets</Text>
-              <BadgeText> 350+ </BadgeText>
+              <BadgeText> 500+ </BadgeText>
             </Container>
           </WalletButtonEl>
         </ButtonContainer>

@@ -233,7 +233,7 @@ export type UseConnectModalOptions = {
    * ]
    * ```
    *
-   * Connect Modal also shows a "All wallets" button at the end of wallet list which allows user to connect to any of the 350+ wallets
+   * Connect Modal 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[];
 
@@ -357,7 +357,7 @@ export type UseConnectModalOptions = {
   recommendedWallets?: Wallet[];
 
   /**
-   * By default, Connect modal shows a "All Wallets" button that shows a list of 350+ wallets.
+   * By default, Connect modal shows a "All Wallets" button that shows a list of 500+ wallets.
    *
    * You can disable this button by setting `showAllWallets` prop to `false`
    */

@@ -496,7 +496,7 @@ export type PayEmbedConnectOptions = {
   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`
    */

@@ -32,7 +32,7 @@ import { createWalletEmitter } from "./wallet-emitter.js";
 /**
  * Creates a wallet based on the provided ID and arguments.
  *
- * - Supports 350+ wallets
+ * - Supports 500+ wallets
  * - Handles both injected browser wallets and WalletConnect sessions
  *
  * [View all available wallets](https://portal.thirdweb.com/typescript/v5/supported-wallets)

@@ -19,7 +19,9 @@ export async function siweAuthenticate(args: {
   ecosystem?: Ecosystem;
 }): Promise<AuthStoredTokenWithCookieReturnType> {
   const { wallet, chain } = args;
-  const account = await wallet.connect({ client: args.client });
+  // only connect if the wallet doesn't already have an account
+  const account =
+    wallet.getAccount() || (await wallet.connect({ client: args.client }));
   const clientFetch = getClientFetch(args.client, args.ecosystem);
 
   const payload = await (async () => {