diff --git a/docs/get-started/how-to/connect-wallet.mdx b/docs/get-started/how-to/connect-wallet.mdx
index 952509534..f37d7f383 100644
--- a/docs/get-started/how-to/connect-wallet.mdx
+++ b/docs/get-started/how-to/connect-wallet.mdx
@@ -23,7 +23,7 @@ npm install wagmi viem@2.x @tanstack/react-query
Create a file named `wagmi.ts` in your in your project directory, and add this code:
-```tsx
+```ts
import { http, createConfig } from 'wagmi'
import { linea, lineaSepolia, mainnet } from 'wagmi/chains'
import { injected } from 'wagmi/connectors'
@@ -49,7 +49,8 @@ uses the common EIP-1193 standard. There are a few wallets that also have [separ
Next, head to your app file.
-Import the the relevant providers from Wagmi and Tanstack Query:
+Import the the relevant providers from Wagmi and Tanstack Query, as well as the `QueryClient`
+function we'll use:
```tsx
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
@@ -65,7 +66,7 @@ recommended.
:::
-Then add the following code, so that your app is wrapped within the Wagmi and Tanstack Query
+Then add the following code, so that your app is wrapped within the Wagmi and TanStack Query
providers:
```tsx
@@ -126,7 +127,7 @@ export function ConnectButton() {
The `useConnect` hook is the main object of note here.
-Now that we've defined the component, we can insert it into the dapp:
+Now that we've defined the component, we can import and insert it into the dapp:
```tsx
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
@@ -165,16 +166,21 @@ npm install @dynamic-labs/sdk-react-core @dynamic-labs/ethereum
The latter contains wallet connectors for all chains compatible with the Ethereum Virtual Machine
(EVM), Linea included.
+### Set up Dynamic dashboard
+
+To properly configure the Dynamic component we're about to use, you need to sign up for Dynamic to
+access the [Dynamic dashboard](https://app.dynamic.xyz/).
+
+Once you're in the dashboard, you need to:
+1. Enable Linea (and Linea Sepolia, if you need it). [See the guide to configuring your chains](https://docs.dynamic.xyz/chains/enabling-chains).
+2. Get the `environmentId` from Developers > SDK & API Keys.
+
### Add the provider
To set up the dapp to work with the Dynamic wallet connector button, we need to:
- Wrap dapp contents in the `DynamicContextProvider` component.
- Import the Dynamic Ethereum wallet connectors and pass these to the `DynamicContextProvider` in
its `settings`.
-- Enable Linea (and Linea Sepolia, if you need it) on the [Dynamic dashboard](https://app.dynamic.xyz/).
-You need to sign up with Dynamic to do so. [See the guide to configuring your chains](https://docs.dynamic.xyz/chains/enabling-chains).
-- Get the `environmentId` from the [Dynamic dashboard](https://app.dynamic.xyz/) under Developers >
-SDK & API Keys.
Then, paste the following code into your dapp:
@@ -196,7 +202,8 @@ export default function App() {
}
```
-Replace `YOUR_ENVIRONMENT_ID` with the `environmentId` with your own.
+Replace `YOUR_ENVIRONMENT_ID` with the `environmentId` with your own. This enables Dynamic to pull
+your configured chains and any other preferences you set up in the dashboard.
:::note
@@ -223,7 +230,7 @@ you can configure to use various user onboarding methods such as email, phone nu
embedded wallets.
For simplicity, let's go with [`DynamicConnectButton`](https://docs.dynamic.xyz/react-sdk/components/dynamicconnectbutton),
-which is a classic wallet connection button.
+which is a classic wallet connection button for connecting external wallets.
Add it to your import statement:
@@ -261,8 +268,145 @@ npm run dev
You should be able to connect to Linea and Linea Sepolia.
-## Reown AppKit
+## Privy
+
+[Privy](https://docs.privy.io/) provides multiple SDKs for building dapps. Their [React SDK](https://docs.privy.io/guide/react/)
+is an easy way to get a flexible, configurable wallet connection component into your dapp.
+
+Install the Privy SDK with this command:
+
+```bash
+npm install @privy-io/react-auth@latest
+```
+
+### Set up Privy dashboard
+
+[Sign up for Privy](https://dashboard.privy.io/) to access the dashboard.
+
+Go to Login Methods in the sidebar to configure login methods for your dapp, and make sure that
+external wallets are enabled. Optionally, feel free to toggle any other methods you want to use.
+
+Now go to App Settings and get your App ID. We'll need to add this to the dapp code to ensure Privy
+functions correctly.
+
+### Add the provider
+
+Now we need to import the Privy provider to the dapp and then use it to wrap the dapp contents:
+
+```tsx
+'use client'
+
+import { PrivyProvider } from '@privy-io/react-auth';
+
+export default function App() {
+ return (
+
+
+
+ );
+}
+```
+
+The [`appearance` configuration](https://docs.privy.io/guide/react/configuration/appearance) is
+optional.
+
+### Configure Linea
+
+To enable Privy to use Linea, we need to import it from Viem. First, install Viem with this command:
+
+```bash
+npm install viem
+```
+
+And then add this import statement to your dapp:
+
+```tsx
+import { linea, lineaSepolia } from 'viem/chains'
+```
+
+Now we need to add the Linea chains to the `PrivyProvider` `config`:
+
+```tsx
+'use client'
+
+import { PrivyProvider } from '@privy-io/react-auth';
+import { linea, lineaSepolia } from 'viem/chains'
+
+export default function App() {
+ return (
+
+
+
+ );
+}
+```
+
+We've chosen Linea Mainnet as the `defaultChain`, but you can set this with Linea Sepolia instead,
+if you prefer.
+
+### Add the component
+
+To implement the wallet connection button, we'll create a new component that uses the `usePrivy`
+hook, which enables you to trigger the Privy login modal to appear.
+
+Create a new file named `ConnectButton.js` in your `/components` directory, and add the following
+code:
+
+```js
+import { usePrivy } from '@privy-io/react-auth';
-{/* ## thirdweb */}
+function ConnectButton() {
+ const { login } = usePrivy();
+
+ return (
+
+ );
+}
+```
+
+Now we can import the component and insert it into the dapp. Ensure your dapp reflects this code:
+
+```tsx
+'use client'
+
+import { PrivyProvider } from '@privy-io/react-auth';
+import { linea, lineaSepolia } from 'viem/chains'
+import { ConnectButton } from '../components/ConnectButton';
+
+export default function App() {
+ return (
+
+
+
+ );
+}
+```
-{/* ## Wagmi */}
+Now if you run your app with `npm run dev`, the Privy modal will appear when you click the button.