diff --git a/.changeset/shy-scissors-work.md b/.changeset/shy-scissors-work.md new file mode 100644 index 00000000000..db144848b73 --- /dev/null +++ b/.changeset/shy-scissors-work.md @@ -0,0 +1,5 @@ +--- +"thirdweb": patch +--- + +Only connect wallets on SIWE linking if not already connected diff --git a/apps/playground-web/src/app/connect/sign-in/button/page.tsx b/apps/playground-web/src/app/connect/sign-in/button/page.tsx index dd9302763f1..c51a74c0d53 100644 --- a/apps/playground-web/src/app/connect/sign-in/button/page.tsx +++ b/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) diff --git a/apps/playground-web/src/app/connect/sign-in/components/WalletsSelection.tsx b/apps/playground-web/src/app/connect/sign-in/components/WalletsSelection.tsx index 243b96b1365..61bd027cc93 100644 --- a/apps/playground-web/src/app/connect/sign-in/components/WalletsSelection.tsx +++ b/apps/playground-web/src/app/connect/sign-in/components/WalletsSelection.tsx @@ -61,7 +61,7 @@ export function WalletsSelection(props: {
setSearch(e.target.value)} diff --git a/apps/playground-web/src/app/connect/sign-in/headless/page.tsx b/apps/playground-web/src/app/connect/sign-in/headless/page.tsx index 5abb84becdd..fe90865f5d9 100644 --- a/apps/playground-web/src/app/connect/sign-in/headless/page.tsx +++ b/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" /> - + +
); } +function Modal() { + return ( + <> +

+ Open the connect modal from anywhere +

+ +

+ You can open the connect modal from anywhere in your app. +

+ + } + code={`// Using your own UI + import { useConnectModal } from "thirdweb/react"; + + function App(){ + const { connect } = useConnectModal(); + + return ( + // pass modal configuration options here + + ); + };`} + lang="tsx" + /> + + ); +} + function Hooks() { return ( <> @@ -43,7 +75,7 @@ function Hooks() {

- Build your own connect UI using react hooks. + Full control over your UI using react hooks.
Wallet state management is all handled for you.

@@ -57,14 +89,14 @@ function Hooks() { function App(){ const { connect } = useConnect(); - return (<> + return ( - ); + ); };`} lang="tsx" /> diff --git a/apps/playground-web/src/app/page.tsx b/apps/playground-web/src/app/page.tsx index 1a84adf3d7a..d297b2e3284 100644 --- a/apps/playground-web/src/app/page.tsx +++ b/apps/playground-web/src/app/page.tsx @@ -27,7 +27,7 @@ function WalletsSection() { { + const wallet = await connectMutation.connect({ client: THIRDWEB_CLIENT }); + return wallet; + }; + + return ( +
+ {account && wallet ? ( + <> +

Connected as {shortenAddress(account.address)}

+ + + ) : ( + + )} +
+ ); +} diff --git a/packages/thirdweb/src/react/core/hooks/connection/ConnectButtonProps.ts b/packages/thirdweb/src/react/core/hooks/connection/ConnectButtonProps.ts index c723ad6377c..e95c9d3394a 100644 --- a/packages/thirdweb/src/react/core/hooks/connection/ConnectButtonProps.ts +++ b/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` */ diff --git a/packages/thirdweb/src/react/core/hooks/connection/ConnectEmbedProps.ts b/packages/thirdweb/src/react/core/hooks/connection/ConnectEmbedProps.ts index c3069097330..7756b720b6f 100644 --- a/packages/thirdweb/src/react/core/hooks/connection/ConnectEmbedProps.ts +++ b/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` */ diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/ConnectButton.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/ConnectButton.tsx index 31dcf7aa530..a2c6db1c5f9 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/ConnectButton.tsx +++ b/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) diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx index d11d1ae072d..3b6d88619f0 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx +++ b/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) diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/WalletSelector.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/WalletSelector.tsx index 743e2412a1c..0a748379e0d 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/WalletSelector.tsx +++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/WalletSelector.tsx @@ -667,7 +667,7 @@ const WalletSelection: React.FC<{ All Wallets - 350+ + 500+ diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/useConnectModal.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/useConnectModal.tsx index 2bcb1376c2f..5b330adfb99 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/useConnectModal.tsx +++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/useConnectModal.tsx @@ -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` */ diff --git a/packages/thirdweb/src/react/web/ui/PayEmbed.tsx b/packages/thirdweb/src/react/web/ui/PayEmbed.tsx index 323d77924c7..fb7caddf1c5 100644 --- a/packages/thirdweb/src/react/web/ui/PayEmbed.tsx +++ b/packages/thirdweb/src/react/web/ui/PayEmbed.tsx @@ -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` */ diff --git a/packages/thirdweb/src/wallets/create-wallet.ts b/packages/thirdweb/src/wallets/create-wallet.ts index 92e8bb4bd76..132244b006e 100644 --- a/packages/thirdweb/src/wallets/create-wallet.ts +++ b/packages/thirdweb/src/wallets/create-wallet.ts @@ -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) diff --git a/packages/thirdweb/src/wallets/in-app/core/authentication/siwe.ts b/packages/thirdweb/src/wallets/in-app/core/authentication/siwe.ts index c7710160dcf..354e845f467 100644 --- a/packages/thirdweb/src/wallets/in-app/core/authentication/siwe.ts +++ b/packages/thirdweb/src/wallets/in-app/core/authentication/siwe.ts @@ -19,7 +19,9 @@ export async function siweAuthenticate(args: { ecosystem?: Ecosystem; }): Promise { 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 () => {