From c7da38b1be4d3266425ca4d66f8bb25c2b51e962 Mon Sep 17 00:00:00 2001 From: Francesco Ceccon Date: Wed, 22 Nov 2023 18:21:11 +0100 Subject: [PATCH] docs: switch to CodeHike code blocks --- docs/index.mdx | 34 +++++++++++++----------------- docs/reference/protocol.mdx | 42 ++++++++++++++++--------------------- docs/reference/starknet.mdx | 32 ++++++++++++---------------- 3 files changed, 45 insertions(+), 63 deletions(-) diff --git a/docs/index.mdx b/docs/index.mdx index 66983b1..6d6b661 100644 --- a/docs/index.mdx +++ b/docs/index.mdx @@ -37,29 +37,23 @@ data. We start by installing the `@apibara/protocol` and `@apibara/starknet` packages: - - - ```npm file=terminal group=install - npm add @apibara/protocol @apibara/starknet - ``` - - - ```yarn file=terminal group=install - yarn install @apibara/protocol @apibara/starknet - ``` - - - ```pnpm file=terminal group=install - pnpm add @apibara/protocol @apibara/starknet - ``` - - + +```console npm +npm add @apibara/protocol @apibara/starknet +``` +```console yarn +yarn install @apibara/protocol @apibara/starknet +``` +```console pnpm +pnpm add @apibara/protocol @apibara/starknet +``` + Then we can create a DNA client. If you're using a DNA stream hosted by Apibara, you will need to specify an API token. You can create an API token for free on [the Apibara website](https://www.apibara.com). -```typescript file=main.ts +```typescript main.ts import { StreamClient } from '@apibara/protocol' // Grab Apibara DNA token from environment, if any. @@ -85,7 +79,7 @@ In this example, we create a Starknet filter for all `Transfer` events of the ET Together with events, we want to receive block headers and storage changes. -```typescript file=main.ts +```typescript main.ts import { StarkNetCursor, Filter, FieldElement, v1alpha2 as starknet } from '@apibara/starknet' const address = FieldElement.fromBigInt( @@ -115,7 +109,7 @@ iterator](https://www.typescriptlang.org/docs/handbook/release-notes/typescript- that handles low-level details such as reconnecting after disconnect. -```typescript file=main.ts +```typescript main.ts const cursor = StarkNetCursor.createWithBlockNumber(1045) client.configure({ diff --git a/docs/reference/protocol.mdx b/docs/reference/protocol.mdx index be1d74d..37d5983 100644 --- a/docs/reference/protocol.mdx +++ b/docs/reference/protocol.mdx @@ -15,23 +15,17 @@ This package contains the client used to stream data from Apibara. Install the package from [npm](https://www.npmjs.com/package/@apibara/protocol): - - - ```npm file=terminal group=install - npm add @apibara/protocol - ``` - - - ```yarn file=terminal group=install - yarn install @apibara/protocol - ``` - - - ```pnpm file=terminal group=install - pnpm add @apibara/protocol - ``` - - + +```console npm +npm add @apibara/protocol +``` +```console yarn +yarn install @apibara/protocol +``` +```console pnpm +pnpm add @apibara/protocol +``` + ### Example @@ -41,7 +35,7 @@ Ethereum ERC20 token `Transfer` events. Start by importing the types and classes used by this example. -```typescript file=main.ts +```typescript main.ts import { StreamClient, ChannelCredentials, @@ -60,7 +54,7 @@ ask the stream for specific data, in this case the stream will only contain events matching the given key (the `Transfer` event) and emitted from the given smart contract. -```typescript file=main.ts +```typescript main.ts const address = FieldElement.fromBigInt( '0x049d36570d4e46f48e99674bd3fcc84644ddd6b96f7c741b1562b82f9e004dc7' ) @@ -84,7 +78,7 @@ const filter = Filter.create() Then create the client, specifying the authorization token created in the Apibara dashboard. -```typescript file=main.ts +```typescript main.ts const client = new StreamClient({ url: 'mainnet.starknet.a5a.ch', token: '' @@ -93,7 +87,7 @@ const client = new StreamClient({ If you're connecting to a local instance of Apibara you need to disable SSL. -```typescript file=main.ts +```typescript main.ts const client = new StreamClient({ url: 'localhost:7171', credentials: ChannelCredentials.createInsecure(), @@ -102,7 +96,7 @@ const client = new StreamClient({ You can specify [gRPC options](https://www.npmjs.com/package/@grpc/grpc-js) using the `clientOptions` argument: -```typescript file=main.ts +```typescript main.ts const client = new StreamClient({ url: 'mainnet.starknet.a5a.ch', clientOptions: { @@ -116,7 +110,7 @@ This method accepts a filter (each stream type has a different filter), a batch Apibara sends historical data in batches to maximize performance, the batch size can be tweaked to optimize syncing speed. -```typescript file=main.ts +```typescript main.ts await client.configure({ filter, batchSize: 10, @@ -126,7 +120,7 @@ await client.configure({ Finally, we can iterate over the async stream generated by the client. Each message contains a batch of data. -```typescript file=main.ts +```typescript main.ts for await (const message of client) { if (message.data?.data) { // handle data diff --git a/docs/reference/starknet.mdx b/docs/reference/starknet.mdx index dcb1a06..76fb779 100644 --- a/docs/reference/starknet.mdx +++ b/docs/reference/starknet.mdx @@ -17,30 +17,24 @@ package to decode data received by one of the StarkNet streams. Install the package from [npm](https://www.npmjs.com/package/@apibara/starknet): - - - ```npm file=terminal group=install - npm add @apibara/starknet - ``` - - - ```yarn file=terminal group=install - yarn install @apibara/starknet - ``` - - - ```pnpm file=terminal group=install - pnpm add @apibara/starknet - ``` - - + +```console npm +npm add @apibara/starknet +``` +```console yarn +yarn install @apibara/starknet +``` +```console pnpm +pnpm add @apibara/starknet +``` + ## FieldElement The Apibara stream encodes StarkNet field elements (also known as felts) into 4 uint64 numbers. The SDK provides helper functions to convert from this representation into Javascript's `bigint`. -```typescript file=main.ts +```typescript main.ts import { FieldElement } from '@apibara/starknet' // converts the encoded value to bigint @@ -60,7 +54,7 @@ SDK contains an helper module to construct filters. You can find more about filters in the [StarkNet section](/docs/starknet#filter). -```typescript file=main.ts +```typescript main.ts import { Filter } from '@apibara/starknet' const filter = Filter.create()