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

docs: more twoslash #1735

Merged
merged 2 commits into from
Feb 6, 2024
Merged

docs: more twoslash #1735

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
edbc335
wip
jxom Jan 25, 2024
bd77e2a
docs: migrate to inline notation
jxom Feb 6, 2024
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
View file
Open in desktop
Binary file not shown.
2 changes: 1 addition & 1 deletion site/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,6 @@
"devDependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"vocs": "1.0.0-alpha.30"
"vocs": "1.0.0-alpha.34"
}
}
25 changes: 18 additions & 7 deletions site/pages/docs/accounts/hd.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ viem internally uses [`@scure/bip32`](https://github.com/paulmillr/scure-bip32),

## Import

```ts
```ts twoslash
import { HDKey, hdKeyToAccount } from 'viem/accounts'
```

Expand All @@ -26,7 +26,8 @@ The `HDKey` instance comes with a few static methods to derive a HD Key:
- `fromExtendedKey`
- `fromJSON`

```ts
```ts twoslash
// @noErrors
import { createWalletClient, http } from 'viem'
import { HDKey, hdKeyToAccount } from 'viem/accounts'
import { mainnet } from 'viem/chains'
Expand All @@ -52,7 +53,9 @@ const client = createWalletClient({

The BIP-39 mnemonic phrase.

```ts
```ts twoslash
import { mnemonicToAccount } from 'viem/accounts'
// ---cut---
const account = mnemonicToAccount(
'legal winner thank year wave sausage worth useful legal winner thank yellow' // [!code focus]
)
Expand All @@ -65,7 +68,9 @@ const account = mnemonicToAccount(

The account index to use in the path (`"m/44'/60'/${accountIndex}'/0/0"`) to derive a private key.

```ts
```ts twoslash
import { mnemonicToAccount } from 'viem/accounts'
// ---cut---
const account = mnemonicToAccount(
'legal winner thank year wave sausage worth useful legal winner thank yellow',
{
Expand All @@ -81,7 +86,9 @@ const account = mnemonicToAccount(

The address index to use in the path (`"m/44'/60'/0'/0/${addressIndex}"`) to derive a private key.

```ts
```ts twoslash
import { mnemonicToAccount } from 'viem/accounts'
// ---cut---
const account = mnemonicToAccount(
'legal winner thank year wave sausage worth useful legal winner thank yellow',
{
Expand All @@ -98,7 +105,9 @@ const account = mnemonicToAccount(

The change index to use in the path (`"m/44'/60'/0'/${changeIndex}/0"`) to derive a private key.

```ts
```ts twoslash
import { mnemonicToAccount } from 'viem/accounts'
// ---cut---
const account = mnemonicToAccount(
'legal winner thank year wave sausage worth useful legal winner thank yellow',
{
Expand All @@ -115,7 +124,9 @@ const account = mnemonicToAccount(

The HD path to use to derive a private key.

```ts
```ts twoslash
import { mnemonicToAccount } from 'viem/accounts'
// ---cut---
const account = mnemonicToAccount(
'legal winner thank year wave sausage worth useful legal winner thank yellow',
{
Expand Down
6 changes: 4 additions & 2 deletions site/pages/docs/accounts/jsonRpc.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,9 @@ A JSON-RPC Account **defers** signing of transactions & messages to the target W

A JSON-RPC Account can just be initialized as an [Address](/docs/glossary/types#address) string. In the usage below, we are extracting the address from a Browser Extension Wallet (e.g. MetaMask) with the `window.ethereum` Provider via `eth_requestAccounts`:

```ts
```ts twoslash
// @noErrors
import 'viem/window'
import { createWalletClient, custom } from 'viem'
import { mainnet } from 'viem/chains'

Expand All @@ -17,6 +19,6 @@ const [address] = await window.ethereum.request({ // [!code focus:3]
const client = createWalletClient({
account: address, // [!code focus]
chain: mainnet,
transport: custom(window.ethereum)
transport: custom(window.ethereum!)
})
```
16 changes: 9 additions & 7 deletions site/pages/docs/accounts/local.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ Below are the steps to integrate a **Private Key Account**, but the same steps c

Before we set up our Account and start consuming Wallet Actions, we will need to set up our Wallet Client with the [`http` Transport](/docs/clients/transports/http):

```ts
```ts twoslash
import { createWalletClient, http } from 'viem'
import { mainnet } from 'viem/chains'

Expand All @@ -28,7 +28,7 @@ const client = createWalletClient({

Next, we will instantiate a Private Key Account using `privateKeyToAccount`:

```ts
```ts twoslash
import { createWalletClient, http } from 'viem'
import { privateKeyToAccount } from 'viem/accounts' // [!code focus]
import { mainnet } from 'viem/chains'
Expand All @@ -45,8 +45,8 @@ const account = privateKeyToAccount('0x...') // [!code focus:1]

Now you can use that Account within Wallet Actions that need a signature from the user:

```ts
import { createWalletClient, http } from 'viem'
```ts twoslash
import { createWalletClient, http, parseEther } from 'viem'
import { privateKeyToAccount } from 'viem/accounts'
import { mainnet } from 'viem/chains'

Expand All @@ -68,8 +68,8 @@ const hash = await client.sendTransaction({ // [!code focus:5]

If you do not wish to pass an account around to every Action that requires an `account`, you can also hoist the account into the Wallet Client.

```ts
import { createWalletClient, http } from 'viem'
```ts twoslash
import { createWalletClient, http, parseEther } from 'viem'
import { privateKeyToAccount } from 'viem/accounts'
import { mainnet } from 'viem/chains'

Expand All @@ -94,8 +94,10 @@ When using a Local Account, you may be finding yourself using a [Public Client](

In this case, you can extend your Wallet Client with [Public Actions](/docs/actions/public/introduction) to avoid having to handle multiple Clients.

```ts {12}
```ts twoslash {12}
// @noErrors
import { createWalletClient, http, publicActions } from 'viem'
import { privateKeyToAccount } from 'viem/accounts'
import { mainnet } from 'viem/chains'

const account = privateKeyToAccount('0x...')
Expand Down
26 changes: 18 additions & 8 deletions site/pages/docs/accounts/mnemonic.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,15 @@ viem internally uses [`@scure/bip32`](https://github.com/paulmillr/scure-bip32),

## Import

```ts
```ts twoslash
import { mnemonicToAccount } from 'viem/accounts'
```

## Usage

To initialize a Mnemonic Account, you will need to pass a mnemonic phrase to `mnemonicToAccount`:

```ts
```ts twoslash
import { createWalletClient, http } from 'viem'
import { mnemonicToAccount } from 'viem/accounts'
import { mainnet } from 'viem/chains'
Expand All @@ -38,7 +38,7 @@ const client = createWalletClient({

You can generate a random BIP-39 mnemonic using the `generateMnemonic` function with a wordlist:

```ts
```ts twoslash
import { english, generateMnemonic } from 'viem/accounts'

const mnemonic = generateMnemonic(english)
Expand Down Expand Up @@ -68,7 +68,9 @@ Available wordlists:

The BIP-39 mnemonic phrase.

```ts
```ts twoslash
import { mnemonicToAccount } from 'viem/accounts'
// ---cut---
const account = mnemonicToAccount(
'legal winner thank year wave sausage worth useful legal winner thank yellow' // [!code focus]
)
Expand All @@ -81,7 +83,9 @@ const account = mnemonicToAccount(

The account index to use in the path (`"m/44'/60'/${accountIndex}'/0/0"`) to derive a private key.

```ts
```ts twoslash
import { mnemonicToAccount } from 'viem/accounts'
// ---cut---
const account = mnemonicToAccount(
'legal winner thank year wave sausage worth useful legal winner thank yellow',
{
Expand All @@ -97,7 +101,9 @@ const account = mnemonicToAccount(

The address index to use in the path (`"m/44'/60'/0'/0/${addressIndex}"`) to derive a private key.

```ts
```ts twoslash
import { mnemonicToAccount } from 'viem/accounts'
// ---cut---
const account = mnemonicToAccount(
'legal winner thank year wave sausage worth useful legal winner thank yellow',
{
Expand All @@ -114,7 +120,9 @@ const account = mnemonicToAccount(

The change index to use in the path (`"m/44'/60'/0'/${changeIndex}/0"`) to derive a private key.

```ts
```ts twoslash
import { mnemonicToAccount } from 'viem/accounts'
// ---cut---
const account = mnemonicToAccount(
'legal winner thank year wave sausage worth useful legal winner thank yellow',
{
Expand All @@ -131,7 +139,9 @@ const account = mnemonicToAccount(

The HD path to use to derive a private key.

```ts
```ts twoslash
import { mnemonicToAccount } from 'viem/accounts'
// ---cut---
const account = mnemonicToAccount(
'legal winner thank year wave sausage worth useful legal winner thank yellow',
{
Expand Down
14 changes: 9 additions & 5 deletions site/pages/docs/accounts/privateKey.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,15 +8,15 @@ viem internally uses [`@noble/curves`](https://github.com/paulmillr/noble-curves

## Import

```ts
```ts twoslash
import { privateKeyToAccount } from 'viem/accounts'
```

## Usage

To initialize a Private Key Account, you will need to pass a private key to `privateKeyToAccount`:

```ts
```ts twoslash
import { createWalletClient, http } from 'viem'
import { privateKeyToAccount } from 'viem/accounts'
import { mainnet } from 'viem/chains'
Expand All @@ -36,7 +36,7 @@ const client = createWalletClient({

You can generate a random private key using the `generatePrivateKey` function:

```ts
```ts twoslash
import { generatePrivateKey } from 'viem/accounts'

const privateKey = generatePrivateKey()
Expand All @@ -56,7 +56,9 @@ The private key to use for the Account.

The address of the Account.

```ts
```ts twoslash
import { privateKeyToAccount } from 'viem/accounts'
// ---cut---
const account = privateKeyToAccount('0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80')

account.address
Expand All @@ -67,7 +69,9 @@ account.address

Calculates an Ethereum-specific signature in [EIP-191 format](https://eips.ethereum.org/EIPS/eip-191): `keccak256("\x19Ethereum Signed Message:\n" + len(message) + message))`.

```ts
```ts twoslash
import { privateKeyToAccount } from 'viem/accounts'
// ---cut---
const account = privateKeyToAccount('0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80')

account.signMessage({ message: 'Hello World' })
Expand Down
16 changes: 12 additions & 4 deletions site/pages/docs/accounts/signMessage.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ With the calculated signature, you can:

## Usage

```ts
```ts twoslash
import { privateKeyToAccount } from 'viem/accounts'

const account = privateKeyToAccount('0x...')
Expand All @@ -18,7 +18,7 @@ const signature = await account.signMessage({
// Hex data representation of message.
message: { raw: '0x68656c6c6f20776f726c64' },
})
// "0xa461f509887bd19e312c0c58467ce8ff8e300d3c1a90b608a760c5b80318eaf15fe57c96f9175d6cd4daad4663763baa7e78836e067d0163e9a2ccf2ff753f5b1b"
// @log: Output: "0xa461f509887bd19e312c0c58467ce8ff8e300d3c1a90b608a760c5b80318eaf15fe57c96f9175d6cd4daad4663763baa7e78836e067d0163e9a2ccf2ff753f5b1b"
```

## Returns
Expand All @@ -37,15 +37,23 @@ Message to sign.

By default, viem signs the UTF-8 representation of the message.

```ts
```ts twoslash
import { privateKeyToAccount } from 'viem/accounts'

const account = privateKeyToAccount('0x...')
// ---cut---
const signature = await account.signMessage({
message: 'hello world', // [!code focus:1]
})
```

To sign the data representation of the message, you can use the `raw` attribute.

```ts
```ts twoslash
import { privateKeyToAccount } from 'viem/accounts'

const account = privateKeyToAccount('0x...')
// ---cut---
const signature = await account.signMessage({
message: { raw: '0x68656c6c6f20776f726c64' }, // [!code focus:1]
})
Expand Down
Loading
Loading