Skip to content

Commit

Permalink
Clarify MetaMask SDK integration in Wagmi (#1337)
Browse files Browse the repository at this point in the history
  • Loading branch information
ecp4224 authored Jun 6, 2024
1 parent 8894bf5 commit b673aee
Showing 1 changed file with 40 additions and 37 deletions.
77 changes: 40 additions & 37 deletions wallet/how-to/use-sdk/3rd-party-libraries/wagmi.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,47 +23,18 @@ the MetaMask browser extension and MetaMask Mobile.

## Steps

### 1. Configure Wagmi with the MetaMask connector
### 1. Configure MetaMask SDK

Configure Wagmi to include MetaMask as a connector and specify the Ethereum chains your dapp will support.
For example:
In your Wagmi project, configure MetaMask SDK with the proper [SDK options](../../../reference/sdk-js-options.md).

```javascript
import { createConfig, http } from "wagmi";
import { mainnet, sepolia } from "wagmi/chains";
import { metaMask } from "wagmi/connectors";

export const config = createConfig({
chains: [mainnet, sepolia],
connectors: [
metaMask({
dappMetadata: {
name: "Example Wagmi dapp",
},
}),
],
transports: {
[mainnet.id]: http(),
[sepolia.id]: http(),
const MetaMaskOptions = {
dappMetadata: {
name: "Example Wagmi dapp",
},
});
```

### 2. Configure the SDK

When configuring the connector, make sure to configure the proper
[SDK options](../../../reference/sdk-js-options.md).

```javascript
connectors: [
metaMask({
dappMetadata: {
name: "Example Wagmi dapp",
},
infuraAPIKey: "YOUR-API-KEY",
// Other options.
}),
],
infuraAPIKey: "YOUR-API-KEY",
// Other options.
};
```

#### Dapp metadata
Expand All @@ -85,6 +56,38 @@ Thus, do not enable the [`useDeeplink`](../../../reference/sdk-js-options.md#use
Using universal links ensures a smoother transition for users accessing your dapp from mobile
devices, providing a better user experience compared to traditional deeplinking methods.

### 2. Configure Wagmi with the MetaMask connector

Configure Wagmi to include MetaMask as a connector and specify the Ethereum chains your dapp will support.
Use the `MetaMaskOptions` you created in the previous step when adding the `metaMask` connector.
For example:

```javascript
import { createConfig, http } from "wagmi";
import { mainnet, sepolia } from "wagmi/chains";
import { metaMask } from "wagmi/connectors";

const MetaMaskOptions = {
dappMetadata: {
name: "Example Wagmi dapp",
},
infuraAPIKey: "YOUR-API-KEY",
// Other options.
};

export const config = createConfig({
chains: [mainnet, sepolia],
connectors: [
metaMask(MetaMaskOptions),
// Other connectors
],
transports: {
[mainnet.id]: http(),
[sepolia.id]: http(),
},
});
```

### 3. Implement contract interaction using `usePrepareContractWrite`

Due to a known issue in Safari where a 500ms timeout can interrupt smart contract interactions, we
Expand Down

0 comments on commit b673aee

Please sign in to comment.