Skip to content

Commit

Permalink
Merge branch 'master' into modify-tma-guide
Browse files Browse the repository at this point in the history
  • Loading branch information
@ihsraham
ihsraham committed Jan 13, 2025
2 parents 7962400 + 2afb4bb commit 853e0ff
Show file tree
Hide file tree
Showing 5 changed files with 450 additions and 157 deletions.
54 changes: 37 additions & 17 deletions docs/features/wallet-pregeneration.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,24 +5,26 @@ description: "Wallet Pregeneration | Documentation - Web3Auth"
---

import PregenerateWallet from "@site/src/components/PregenerateWallet";
import PregenrateSmartAccount from "@site/src/components/PregenrateSmartAccount";

Pre-generated wallets are a strategic feature within Web3Auth, designed to streamline the onboarding
process by allowing developers to create wallet addresses for users before their initial login. This
feature offers flexibility in how and when you introduce users to wallet functionalities, enhancing
the user experience and engagement.
Pre-generated wallets are a key feature of Web3Auth, aimed at simplifying user onboarding. This
functionality enables developers to generate both EOA wallet addresses and Smart Accounts (ERC-4337)
for users before their first login. By providing this flexibility, you can tailor when and how users
are introduced to wallet functionalities, ultimately enhancing their experience and boosting
engagement.

## Capabilities of Pre-generated Wallets

The ability to pre-generate wallets opens up a variety of use cases, making it easier to integrate
Web3 features into your application's user journey:
The ability to pre-generate wallets unlocks diverse use cases, making it seamless to integrate Web3
features into your application's user journey:

- **Early Wallet Creation:** Initiate wallet creation as part of the user invite or onboarding flow,
even before the user has logged into your app for the first time.
- **Deferred Login Setup:** Delay the setup of wallet access management, such as OAuth login or
passkeys, until the user is ready for their first on-chain transaction, simplifying initial
engagement.
- **Wallet Prefunding:** Reward users with tokens for off-chain activities, allowing them to claim
these rewards when they access their pre-generated wallet.
1. **Early Wallet Creation**: Create wallets during the user invite or onboarding process, even
before their first login, ensuring a smoother start to their Web3 experience.
2. **Deferred Login Setup**: Postpone wallet access management, such as OAuth logins or passkeys,
until the user is ready to perform their first on-chain transaction, reducing initial friction.
3. **Wallet Prefunding**: Incentivize users by preloading wallets with token rewards for off-chain
activities, enabling them to easily claim these rewards upon accessing their pre-generated
wallet.

:::note

Expand All @@ -32,10 +34,10 @@ environment is the **Scale Plan**.

:::

## Utilizing the Pre-generated Wallet API
## Pre-generate EOA Wallets

Web3Auth provides a straightforward API to facilitate the creation of pre-generated wallets. You can
integrate this API into your user signup flow, either after a user verifies their email or
Web3Auth provides a straightforward API to facilitate the creation of pre-generated EOA wallets. You
can integrate this API into your user signup flow, either after a user verifies their email or
independently by supplying their email or unique identifier to the API.

:::warning
Expand All @@ -49,7 +51,7 @@ Learn more about how

:::

### Implementation Steps:
### Implementation Steps

1. **Identify Users:** Determine the unique identifier or email for the user within your system.
This will be the `verifierId` used to create the wallet.
Expand All @@ -60,3 +62,21 @@ Learn more about how
by the user upon their first login.

<PregenerateWallet />

## Pre-generate Smart Accounts

Web3Auth provides a straightforward API to facilitate the creation of pre-generated Smart Accounts.
You can integrate this API into your user signup flow, either after a user verifies their email or
independently by supplying their email or unique identifier to the API.

### Implementation Steps

1. **Identify Users:** Determine the unique identifier or email for the user within your system.
This will be the `verifierId` used to create the wallet.
2. **API Call:** Use the provided API to submit the user's identifier. You'll need to specify
parameters from the Web3Auth dashboard, specifically the Verifier Name, Web3Auth Network, and
Client Id.
3. **Receive Wallet Address:** The API response will include the new wallet address, ready for use
by the user upon their first login.

<PregenrateSmartAccount />
189 changes: 81 additions & 108 deletions docs/sdk/pnp/web/adapters/coinbase.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,30 +9,17 @@ description: "Web3Auth PnP Web Adapter SDKs - Coinbase | Documentation - Web3Aut
import TabItem from "@theme/TabItem";
import Tabs from "@theme/Tabs";

## [`@web3auth/coinbase-adapter`](https://npmjs.com/package/@web3auth/coinbase-adapter)

Coinbase adapter allows you to connect with coinbase wallet. You can read more about coinbase wallet
here.(https://docs.cloud.coinbase.com/wallet-sdk/docs).

## Basic Details

#### Adapter Name: `coinbase`

#### Package Name: [`@web3auth/coinbase-adapter`](https://npmjs.com/package/@web3auth/coinbase-adapter)

#### authMode: `DAPP`

#### chainNamespace: `EIP155`

#### Default: `YES`
The [`@web3auth/coinbase-adapter`](https://npmjs.com/package/@web3auth/coinbase-adapter) package
enables you to connect with injected Coinbase wallet(Extension Wallet) and
[Smart Wallet](https://www.smartwallet.dev/quick-start).

## Installation

```bash npm2yarn
npm install --save @web3auth/coinbase-adapter
```

## Arguments
## Parameters

<Tabs
defaultValue="table"
Expand All @@ -44,13 +31,13 @@ npm install --save @web3auth/coinbase-adapter

<TabItem value="table">

| Parameter | type |
| ------------------ | -------------------------- |
| `chainConfig?` | `CustomChainConfig` |
| `adapterSettings?` | `CoinbaseWalletSDKOptions` |
| `clientId?` | `string` |
| `sessionTime?` | `number` |
| `web3AuthNetwork?` | `WEB3AUTH_NETWORK_TYPE` |
| Parameter | Description |
| ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `chainConfig?` | Custom Chain Configuration you want to connect with. Defaults to `chainConfig` passed to `EthereumPrivateKeyProvider`. |
| `adapterSettings?` | Adapter settings to fine-tune the connection preferences, you can refer to [CoinbaseWalletSDKOptions](<[https://www.smartwallet.dev/sdk/create-coinbase-wallet-sdk#parameters](https://www.smartwallet.dev/sdk/create-coinbase-wallet-sdk#parameters)>) documentation. The default connection mode is set to "all," which means that users can connect either their Coinbase Injected Wallet or the Smart Wallet. |
| `clientId?` | Client Id for Web3Auth. You can get the client id from Web3Auth Dashboard. |
| `sessionTime?` | Allows you to configure the connection validity. Defaults to `sessionTime` passed to `Web3AuthOptions`. |
| `web3AuthNetwork?` | Allows you to configure the `Web3AuthNetwork`. Defaults to `web3AuthNetwork` passed to `Web3AuthOptions.` |

</TabItem>

Expand All @@ -67,104 +54,90 @@ interface CoinbaseAdapterOptions {
```

</TabItem>

</Tabs>

### Custom Chain Config

#### `chainConfig`

:::warning

While you can pass your `chainConfig`, it is not required since you can directly pass it over to the
`Web3Auth`/ `Web3AuthNoModal` configuration while instantiating it.

Read more about it in their respective sections:

- [`web3auth/modal`](/sdk/pnp/web/modal/initialize#adding-a-custom-chain-configuration)
- [`web3auth/no-modal`](/sdk/pnp/web/no-modal/initialize#adding-a-custom-chain-configuration)
## Usage

:::

:::warning

If you do pass `chainConfig` in an Adapter, it overwrites the `chainConfig` passed over to the
`Web3Auth`/ `Web3AuthNoModal` constructor.

:::

#### `CoinbaseWalletSDKOptions`

Checkout the
[Coinbase Wallet SDK Documentation](https://docs.cloud.coinbase.com/wallet-sdk/docs/initializing#initializing)
for these options.

## Change Adapter Settings

You can change the adapter settings by calling the `setAdapterSettings()` function on the adapter
instance.
```tsx
import { CoinbaseAdapter } from "@web3auth/coinbase-adapter";

### Arguments
// focus-start
const coinbaseAdapter = new CoinbaseAdapter({
// This will only allow users to connect with Smart Wallet
// By default, it's set to "all"
adapterSettings: { options: "smartWalletOnly" },
});
// focus-end

<Tabs
defaultValue="table"
values={[
{ label: "Table", value: "table" },
{ label: "Interface", value: "interface" },
]}
>
// Use your existing Web3Auth instance
web3auth.configureAdapter(coinbaseAdapter);
```

<TabItem value="table">
## Use Smart Wallet Features

| Parameter | type |
| ------------------ | ----------------------- |
| `clientId?` | `string` |
| `sessionTime?` | `number` |
| `chainConfig?` | `CustomChainConfig` |
| `web3AuthNetwork?` | `WEB3AUTH_NETWORK_TYPE` |
The Web3Auth provider which is created using the Coinbase Wallet Adapter will be EIP 1193 compatible
which means, you won't be able to use the Smart Wallet(ERC 4337) features directly

</TabItem>
To use the Smart Wallet ERC 4337 features, you can use the Web3Auth provider to send JSON-RPC
requests to the Smart Wallet. For batching and paymaster feature, it uses EIP 5792
`wallet_sendCalls` method. [Learn more about EIP 5792](https://eips.ethereum.org/EIPS/eip-5792).

<TabItem value="interface">
### Send Batch Requests

```tsx
interface BaseAdapterSettings {
clientId?: string;
sessionTime?: number;
chainConfig?: CustomChainConfig;
web3AuthNetwork?: WEB3AUTH_NETWORK_TYPE;
}
// Retrive the Web3Auth provider once the connection is established
const provider = web3auth.provider;

const response = await provider.request({
method: "wallet_sendCalls",
params: [
{
version: "1.0",
chainId: "0x01",
from: address[0],
calls: [
{
to: "0xd46e8dd67c5d32be8058bb8eb970870f07244567",
value: "0x9184e72a",
data: "0xd46e8dd67c5d32be8d46e8dd67c5d32be8058bb8eb970870f072445675058bb8eb970870f072445675",
},
{
to: "0xd46e8dd67c5d32be8058bb8eb970870f07244567",
value: "0x182183",
data: "0xfbadbaf01",
},
],
},
],
});
```

</TabItem>

</Tabs>

## Example
### Use Paymaster

```tsx
import { CoinbaseAdapter } from "@web3auth/coinbase-adapter";
const coinbaseAdapter = new CoinbaseAdapter({
clientId:
"BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ",
sessionTime: 3600, // 1 hour in seconds
chainConfig: {
chainNamespace: CHAIN_NAMESPACES.EIP155,
chainId: "0x1",
rpcTarget: "https://rpc.ankr.com/eth", // This is the public RPC we have added, please pass on your own endpoint while creating an app
},
web3AuthNetwork: "sapphire_mainnet",
});
web3auth.configureAdapter(coinbaseAdapter);

// You can also change the adapter settings later on
coinbaseAdapter.setAdapterSettings({
sessionTime: 86400, // 1 day in seconds
chainConfig: {
chainNamespace: CHAIN_NAMESPACES.EIP155,
chainId: "0x1",
rpcTarget: "https://rpc.ankr.com/eth", // This is the public RPC we have added, please pass on your own endpoint while creating an app
},
web3AuthNetwork: "sapphire_mainnet",
// Retrive the Web3Auth provider once the connection is established
const provider = web3auth.provider;

const response = await provider.request({
method: "wallet_sendCalls",
params: [
{
version: "1.0",
chainId: "0x01",
from: address[0],
calls: [
{
to: "0xd46e8dd67c5d32be8058bb8eb970870f07244567",
value: "0x9184e72a",
data: "0xd46e8dd67c5d32be8d46e8dd67c5d32be8058bb8eb970870f072445675058bb8eb970870f072445675",
},
],
capabilities: {
paymasterService: {
url: "YOUR_PAYMASTER_URL",
},
},
},
],
});
```
19 changes: 3 additions & 16 deletions docs/sdk/pnp/web/adapters/default-evm-adapter.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,22 +9,9 @@ description: "Web3Auth PnP Web Adapter SDKs - Default EVM Adapter | Documentatio
import TabItem from "@theme/TabItem";
import Tabs from "@theme/Tabs";

## [`@web3auth/default-evm-adapter`](https://npmjs.com/package/@web3auth/default-evm-adapter)

The default EVM adapter enables seamless detection of injected EVM wallets and
WalletConnect-supported wallets, allowing interaction with just a single line of code.

## Basic Details

#### Adapter Name: `default-evm-adapter`

#### Package Name: [`@web3auth/default-evm-adapter`](https://npmjs.com/package/@web3auth/default-evm-adapter)

#### authMode: `DAPP`

#### chainNamespace: `EIP155`

#### Default: `NO`
The [`@web3auth/default-evm-adapter`](https://npmjs.com/package/@web3auth/default-evm-adapter)
package enables seamless detection of injected EVM wallets and WalletConnect-supported wallets,
allowing interaction with just a single line of code.

## Installation

Expand Down
19 changes: 3 additions & 16 deletions docs/sdk/pnp/web/adapters/default-solana-adapter.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,22 +9,9 @@ description: "Web3Auth PnP Web Adapter SDKs - Default Solana Adapter | Documenta
import TabItem from "@theme/TabItem";
import Tabs from "@theme/Tabs";

## [`@web3auth/default-solana-adapter`](https://npmjs.com/package/@web3auth/default-solana-adapter)

The default Solana adapter enables seamless detection of injected Solana wallets, allowing
interaction with just a single line of code.

## Basic Details

#### Adapter Name: `default-solana-adapter`

#### Package Name: [`@web3auth/default-solana-adapter`](https://npmjs.com/package/@web3auth/default-solana-adapter)

#### authMode: `DAPP`

#### chainNamespace: `SOLANA`

#### Default: `NO`
The [`@web3auth/default-solana-adapter`](https://npmjs.com/package/@web3auth/default-solana-adapter)
package enables seamless detection of injected Solana wallets, allowing interaction with just a
single line of code.

## Installation

Expand Down
Loading

0 comments on commit 853e0ff

Please sign in to comment.