Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

update guides to use wagmi hooks #22

Merged
merged 1 commit into from
May 4, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file modified bun.lockb
Binary file not shown.
148 changes: 41 additions & 107 deletions docs/pages/guides/batch-transactions.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

With Smart Wallet, you can send multiple onchain calls in a single transaction. Doing so improves the UX of multi-step interactions by reducing them to a single click. A common example of where you might want to leverage batch transactions is an ERC-20 `approve` followed by a swap.

You can submit batch transactions by using new `wallet_sendCalls` RPC, defined [here](https://eips.ethereum.org/EIPS/eip-5792#wallet_sendcalls).
You can submit batch transactions by using new `wallet_sendCalls` RPC, defined [here](https://eip5792.xyz/reference/sendCalls).

## Using Wagmi + Viem

Expand All @@ -14,69 +14,38 @@ The actions below are experimental and not supported in most wallets. It is reco

Smart Wallet will submit multiple calls as part of a single transaction. However, if your app supports other wallets, and you want to check that multiple calls will be submitted atomically (in a single transaction), check the wallet's capabilities.

:::code-group

```ts twoslash [App.tsx]
// @filename: useEIP5792WalletClient.ts
// [!include ~/snippets/useEIP5792WalletClient.ts]

// @filename: useWalletCapabilities.ts
// [!include ~/snippets/useWalletCapabilities.ts]

// @filename: App.tsx
import React from 'react'
// ---cut---
import { useChainId } from 'wagmi'
import { useWalletCapabilities } from './useWalletCapabilities'
import { useCapabilities } from 'wagmi/experimental'

function App() {
const chainId = useChainId()
const { capabilities, loading } = useWalletCapabilities({ chainId })
const { data: capabilities } = useCapabilities() // [!code hl]
// @log: {
// @log: atomicBatch: {
// @log: supported: true,
// @log: },
// @log: 84532: {
// @log: atomicBatch: {
// @log: supported: true,
// @log: },
// @log: }
// @log: }

return <div />
}
```

```ts twoslash [useWalletCapabilities.ts]
// @filename: useEIP5792WalletClient.ts
// [!include ~/snippets/useEIP5792WalletClient.ts]

// @filename: useWalletCapabilities.ts
// ---cut---
// [!include ~/snippets/useWalletCapabilities.ts]
```

```ts twoslash [useEIP5792WalletClient.ts]
// [!include ~/snippets/useEIP5792WalletClient.ts]
```

:::

The `getCapabilities` method will return, per chain, the capabilities that the connected wallet supports. If the connected wallet supports atomic batching, it will return an `atomicBatch` capability with a `supported` field equal to `true` for each chain it supports atomic batching on.
The `useCapabilities` method will return, per chain, the capabilities that the connected wallet supports. If the connected wallet supports atomic batching, it will return an `atomicBatch` capability with a `supported` field equal to `true` for each chain it supports atomic batching on.

### 2. Send the calls

If you have your smart contract ABIs, the easiest way to send multiple calls is to use the Viem `writeContracts` action.

:::code-group
If you have your smart contract ABIs, the easiest way to send multiple calls is to use the Wagmi `useWriteContracts` hook.

```ts twoslash [App.tsx]
// @filename: useEIP5792WalletClient.ts
// [!include ~/snippets/useEIP5792WalletClient.ts]

// @filename: useWriteContracts.ts
// [!include ~/snippets/useWriteContracts.ts]

// @filename: App.tsx
import React from 'react'
// ---cut---
import { useAccount } from 'wagmi'
import { useWriteContracts } from './useWriteContracts'
import { useWriteContracts } from 'wagmi/experimental'

const abi = [
{
Expand All @@ -90,75 +59,47 @@ const abi = [

function App() {
const account = useAccount()
const { id, writeContracts } = useWriteContracts()
const { writeContracts } = useWriteContracts() // [!code hl]

const handleMint = () => {
writeContracts({
contracts: [
{
address: "0x119Ea671030FBf79AB93b436D2E20af6ea469a19",
abi,
functionName: "safeMint",
args: [account.address],
},
{
address: "0x119Ea671030FBf79AB93b436D2E20af6ea469a19",
abi,
functionName: "safeMint",
args: [account.address],
}
],
})
writeContracts({ // [!code hl]
contracts: [ // [!code hl]
{ // [!code hl]
address: "0x119Ea671030FBf79AB93b436D2E20af6ea469a19", // [!code hl]
abi, // [!code hl]
functionName: "safeMint", // [!code hl]
args: [account.address], // [!code hl]
}, // [!code hl]
{ // [!code hl]
address: "0x119Ea671030FBf79AB93b436D2E20af6ea469a19", // [!code hl]
abi, // [!code hl]
functionName: "safeMint", // [!code hl]
args: [account.address], // [!code hl]
} // [!code hl]
], // [!code hl]
}) // [!code hl]
}

return (
<div>
<button onClick={handleMint}>Mint</button>
{id && <div> ID: {id}</div>}
</div>
)
}
```

```ts twoslash [useWriteContracts.ts]
// @filename: useEIP5792WalletClient.ts
// [!include ~/snippets/useEIP5792WalletClient.ts]

// @filename: useWriteContracts.ts
// ---cut---
// [!include ~/snippets/useWriteContracts.ts]
```

```ts twoslash [useEIP5792WalletClient.ts]
// [!include ~/snippets/useEIP5792WalletClient.ts]
```

:::

### 3. Check on the status of your calls

The `writeContracts` action returns a call bundle identifier. Use the viem `getCallsStatus` action with this identifier to check on the status of your calls.
The `useWriteContracts` hook returns an object with a `data` field. This `data` is a call bundle identifier. Use the Wagmi `useCallsStatus` hook with this identifier to check on the status of your calls.

This will return a `PENDING` or `CONFIRMED` status along with a subset of a transaction receipt.

:::code-group

```ts twoslash [App.tsx]
// @filename: useEIP5792WalletClient.ts
// [!include ~/snippets/useEIP5792WalletClient.ts]

// @filename: useWriteContracts.ts
// [!include ~/snippets/useWriteContracts.ts]

// @filename: useCallsStatus.ts
// [!include ~/snippets/useCallsStatus.ts]

// @filename: App.tsx
import React from 'react'
// ---cut---
import { useAccount } from 'wagmi'
import { useWriteContracts } from './useWriteContracts'
import { useCallsStatus } from './useCallsStatus'
import { useWriteContracts, useCallsStatus } from 'wagmi/experimental'

const abi = [
{
Expand All @@ -172,8 +113,16 @@ const abi = [

function App() {
const account = useAccount()
const { id, writeContracts } = useWriteContracts()
const { data: callsStatus, isLoading } = useCallsStatus({ id })
const { data: id, writeContracts } = useWriteContracts()
const { data: callsStatus } = useCallsStatus({ // [!code hl]
id: id as string, // [!code hl]
query: { // [!code hl]
enabled: !!id, // [!code hl]
// Poll every second until the calls are confirmed // [!code hl]
refetchInterval: (data) => // [!code hl]
data.state.data?.status === "CONFIRMED" ? false : 1000, // [!code hl]
}, // [!code hl]
}); // [!code hl]
// @log: {
// @log: status: 'CONFIRMED',
// @log: receipts: [
Expand Down Expand Up @@ -222,19 +171,4 @@ function App() {
</div>
)
}
```

```ts twoslash [useCallsStatus.ts]
// @filename: useEIP5792WalletClient.ts
// [!include ~/snippets/useEIP5792WalletClient.ts]

// @filename: useCallsStatus.ts
// ---cut---
// [!include ~/snippets/useCallsStatus.ts]
```

```ts twoslash [useEIP5792WalletClient.ts]
// [!include ~/snippets/useEIP5792WalletClient.ts]
```

:::
```
39 changes: 8 additions & 31 deletions docs/pages/guides/magic-spend.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

With Magic Spend, Smart Wallet users can use their Coinbase balances onchain. This means users can easily start using onchain apps without needing to onramp funds into their wallet.

This also means that apps might not have all the balance information typically available to them by reading onchain data. Smart Wallet indicates that this is the case by responding to [`wallet_getCapabilities` RPC calls](https://eips.ethereum.org/EIPS/eip-5792#wallet_getcapabilities) with the `auxiliaryFunds` capability for each chain Smart Wallet users can use their Coinbase balances on.
This also means that apps might not have all the balance information typically available to them by reading onchain data. Smart Wallet indicates that this is the case by responding to [`wallet_getCapabilities` RPC calls](https://eip5792.xyz/reference/getCapabilities) with the `auxiliaryFunds` capability for each chain Smart Wallet users can use their Coinbase balances on.

If your app supports Smart Wallet, it should not assume it knows the full balances available to a user if the `auxiliaryFunds` capability is present on a given chain.

Expand All @@ -12,47 +12,24 @@ If your app supports Smart Wallet, it should not assume it knows the full balanc
The actions below are experimental and not supported in most wallets. It is recommended to have a fallback mechanism if using this in production.
:::

:::code-group

```ts twoslash [App.tsx]
// @filename: useEIP5792WalletClient.ts
// [!include ~/snippets/useEIP5792WalletClient.ts]

// @filename: useWalletCapabilities.ts
// [!include ~/snippets/useWalletCapabilities.ts]

// @filename: App.tsx
import React from 'react'
// ---cut---
import { useChainId } from 'wagmi'
import { useWalletCapabilities } from './useWalletCapabilities'
import { useCapabilities } from 'wagmi/experimental'

function App() {
const chainId = useChainId()
const { capabilities, loading } = useWalletCapabilities({ chainId })
const { data: capabilities } = useCapabilities()
// @log: {
// @log: auxiliaryFunds: {
// @log: supported: true,
// @log: },
// @log: 84532: {
// @log: auxiliaryFunds: {
// @log: supported: true,
// @log: },
// @log: }
// @log: }

return <div />
}
```

```ts twoslash [useWalletCapabilities.ts]
// @filename: useEIP5792WalletClient.ts
// [!include ~/snippets/useEIP5792WalletClient.ts]

// @filename: useWalletCapabilities.ts
// ---cut---
// [!include ~/snippets/useWalletCapabilities.ts]
```

```ts twoslash [useEIP5792WalletClient.ts]
// [!include ~/snippets/useEIP5792WalletClient.ts]
```

:::

If your app supports Smart Wallet and sees that the `auxiliaryFunds` capability is supported on a given chain, it means that a user might have funds available for use onchain on Coinbase. As a result, your app should not block user actions on the basis of balance checks.
41 changes: 9 additions & 32 deletions docs/pages/guides/paymasters.mdx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Paymasters (Sponsored Transactions)

One of the biggest UX enhancements unlocked by Smart Wallet is the ability for app developers to sponsor their users' transactions. If your app supports Smart Wallet, you can start sponsoring your users' transactions by using [standardized paymaster service communication](https://erc7677.xyz) enabled by [new wallet RPC methods](https://eips.ethereum.org/EIPS/eip-5792).
One of the biggest UX enhancements unlocked by Smart Wallet is the ability for app developers to sponsor their users' transactions. If your app supports Smart Wallet, you can start sponsoring your users' transactions by using [standardized paymaster service communication](https://erc7677.xyz) enabled by [new wallet RPC methods](https://eip5792.xyz).

## Using Wagmi + Viem

Expand Down Expand Up @@ -52,24 +52,16 @@ export async function POST(r: Request) {

### 3. Send EIP-5792 requests with a paymaster service capability

Once you have your paymaster service set up, you can now pass its URL along to Viem's `writeContracts` or `sendCalls` actions.
Once you have your paymaster service set up, you can now pass its URL along to Wagmi's `useWriteContracts` hook.

If you set up a proxy in your app's backend as recommended in step (2) above, you'll want to pass in the proxy URL you created.

:::code-group

```ts twoslash [App.tsx]
// @filename: useEIP5792WalletClient.ts
// [!include ~/snippets/useEIP5792WalletClient.ts]

// @filename: useWriteContracts.ts
// [!include ~/snippets/useWriteContracts.ts]

// @filename: App.tsx
import React from 'react'
// ---cut---
import { useAccount } from 'wagmi'
import { useWriteContracts } from './useWriteContracts'
import { useWriteContracts, useCallsStatus } from 'wagmi/experimental'

const abi = [
{
Expand All @@ -83,7 +75,7 @@ const abi = [

function App() {
const account = useAccount()
const { id, writeContracts } = useWriteContracts()
const { data: id, writeContracts } = useWriteContracts()

const handleMint = () => {
writeContracts({
Expand All @@ -101,11 +93,11 @@ function App() {
args: [account.address],
}
],
capabilities: {
paymasterService: {
url: 'https://...' // The URL from your paymaster service provider, or your app's backend as described in step (2) above
}
}
capabilities: { // [!code hl]
paymasterService: { // [!code hl]
url: 'https://...' // The URL from your paymaster service provider, or your app's backend as described in step (2) above // [!code hl]
} // [!code hl]
} // [!code hl]
})
}

Expand All @@ -118,19 +110,4 @@ function App() {
}
```

```ts twoslash [useWriteContracts.ts]
// @filename: useEIP5792WalletClient.ts
// [!include ~/snippets/useEIP5792WalletClient.ts]

// @filename: useWriteContracts.ts
// ---cut---
// [!include ~/snippets/useWriteContracts.ts]
```

```ts twoslash [useEIP5792WalletClient.ts]
// [!include ~/snippets/useEIP5792WalletClient.ts]
```

:::

That's it! Smart Wallet will handle the rest. If your paymaster service is able to sponsor the transaction, Smart Wallet will indicate to your user that the transaction is sponsored.
18 changes: 0 additions & 18 deletions docs/snippets/useCallsStatus.ts

This file was deleted.

Loading
Loading