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.

Sign up for GitHub

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

Jump to bottom

Add Viem documentation #225

Closed
wants to merge 2 commits into from
Closed

Add Viem documentation #225

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c6a0031
Add Viem documentation
aefhm Nov 17, 2023
9695ab4
Add wagmi documentation
aefhm Nov 28, 2023
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
13 changes: 13 additions & 0 deletions clients/js/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,19 @@ const provider = sapphire.wrap(window.ethereum);
window.ethereum = sapphire.wrap(window.ethereum); // If you're feeling bold.
```

### Viem
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we keep or replicate these snippets to https://github.com/oasisprotocol/docs? Or is this okay for now? cc @matevz

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Or I have my answer in oasisprotocol/docs#585

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@CedarMist we probably want BOTH our npm user facing documentation as well as official documentation snippets right?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In addition to the npm readme, the WAGMI part should go into https://docs.oasis.io/dapp/sapphire/browser and the Viem part into https://docs.oasis.io/dapp/sapphire/quickstart or perhaps https://docs.oasis.io/dapp/sapphire/guide.

btw. Does Viem support encrypted transactions using our wrapper? I thought we only integrate with ethers hooks?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In addition to the npm readme, the WAGMI part should go into https://docs.oasis.io/dapp/sapphire/browser and the Viem part into https://docs.oasis.io/dapp/sapphire/quickstart or perhaps https://docs.oasis.io/dapp/sapphire/guide.

This sure is more convenient to reference on a PR now. 😉

Does Viem support encrypted transactions using our wrapper? I thought we only integrate with ethers hooks?

I'm able to get this through as opposed to unwrapped transaction, and I sampled these demo examples as working.

It is all EIP-1193 the way down with custom providers the way they wrap it.


```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, ...)`
Expand Down
4 changes: 4 additions & 0 deletions docs/browser.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:

Expand Down Expand Up @@ -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
Expand Down
19 changes: 19 additions & 0 deletions docs/guide.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

<!-- https://github.com/oasisprotocol/docs/blob/455980674563cad92ff1e1b62a7a5f2d4d6809f0/docs/general/images/architecture/client-km-compute.svg -->
Expand Down
Loading