diff --git a/clients/js/README.md b/clients/js/README.md index 8693c025..a554920f 100644 --- a/clients/js/README.md +++ b/clients/js/README.md @@ -59,6 +59,19 @@ const provider = sapphire.wrap(window.ethereum); window.ethereum = sapphire.wrap(window.ethereum); // If you're feeling bold. ``` +### Viem + +```ts +import { sapphireTestnet } from 'viem/chains'; +import * as sapphire from '@oasisprotocol/sapphire-paratime'; + +const provider = sapphire.wrap(window.ethereum! as EIP1193Provider); +const walletClient = createWalletClient({ + chain: sapphireTestnet, + transport: custom(provider), +}); +``` + ## Troubleshooting ### `Error: missing provider (operation="getChainId", code=UNSUPPORTED_OPERATION, ...)` diff --git a/docs/browser.md b/docs/browser.md index ca1c5627..0698da08 100644 --- a/docs/browser.md +++ b/docs/browser.md @@ -8,6 +8,8 @@ Confidential Sapphire dApps work in web browsers by wrapping the Ethereum provider such as Metamask to enable signing and encrypting calls and transactions. +If you are developing with [`wagmi`], you can use the Viem [configuration]. + Let's begin with the [Hardhat boilerplate]. As mentioned on their website the boilerplate provides the following: @@ -194,6 +196,8 @@ repository. ::: +[`wagmi`]: https://wagmi.sh/ +[configuration]: guide.mdx#viem [block explorer]: https://testnet.explorer.sapphire.oasis.dev/tx/0x3303dea5d48291d1564cad573f21fc71fcbdc2b862e17e056287fd9207e3bc53 [guide-transaction-calls]: guide.mdx#transactions--calls [Hardhat boilerplate repo]: https://github.com/NomicFoundation/hardhat-boilerplate diff --git a/docs/guide.mdx b/docs/guide.mdx index 90c76ce7..9b21526d 100644 --- a/docs/guide.mdx +++ b/docs/guide.mdx @@ -125,6 +125,25 @@ can also use those with Sapphire; all you need to do is set your Web3 gateway UR You can find the details of the Oasis Sapphire Web3 gateway [here](https://github.com/oasisprotocol/docs/blob/main/docs/dapp/sapphire/README.mdx#web3-gateway). +#### Viem + +Sapphire will mostly work with Viem out of the box. You will need to import +the Sapphire client, define the `chain`, and wrap your `provider` before +creating a [custom] transport. + +[custom]: https://viem.sh/docs/clients/transports/custom.html + +```ts +import { sapphireTestnet } from 'viem/chains'; +import * as sapphire from '@oasisprotocol/sapphire-paratime'; + +const provider = sapphire.wrap(window.ethereum! as EIP1193Provider); +const walletClient = createWalletClient({ + chain: sapphireTestnet, + transport: custom(provider), +}); +``` + ### Transactions & Calls