Skip to content

Commit

Permalink
update guides to use wagmi hooks
Browse files Browse the repository at this point in the history
  • Loading branch information
@lukasrosario
lukasrosario committed May 4, 2024
1 parent 5532c36 commit 1b56fbb
Show file tree
Hide file tree
Showing 9 changed files with 59 additions and 275 deletions.
Binary file modified bun.lockb
View file
Binary file not shown.
148 changes: 41 additions & 107 deletions docs/pages/guides/batch-transactions.mdx
View file
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
View file
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
View file
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
View file

This file was deleted.

Loading

0 comments on commit 1b56fbb

Please sign in to comment.