Skip to content

Commit

Permalink
docs: documentation website
Browse files Browse the repository at this point in the history
  • Loading branch information
tien committed Jun 11, 2024
1 parent 9df090a commit 6ec68fc
Show file tree
Hide file tree
Showing 34 changed files with 13,421 additions and 3,267 deletions.
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,4 @@ node_modules
.yarn
.nx/cache
.nx/workspace-data
.DS_Store
20 changes: 20 additions & 0 deletions apps/docs/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
# Dependencies
/node_modules

# Production
/build

# Generated files
.docusaurus
.cache-loader

# Misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*
41 changes: 41 additions & 0 deletions apps/docs/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
# Website

This website is built using [Docusaurus](https://docusaurus.io/), a modern static website generator.

### Installation

```
$ yarn
```

### Local Development

```
$ yarn start
```

This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.

### Build

```
$ yarn build
```

This command generates static content into the `build` directory and can be served using any static contents hosting service.

### Deployment

Using SSH:

```
$ USE_SSH=true yarn deploy
```

Not using SSH:

```
$ GIT_USER=<Your GitHub username> yarn deploy
```

If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.
3 changes: 3 additions & 0 deletions apps/docs/babel.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
module.exports = {
presets: [require.resolve("@docusaurus/core/lib/babel/preset")],
};
7 changes: 7 additions & 0 deletions apps/docs/docs/getting-started/_category_.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"label": "Getting started",
"position": 1,
"link": {
"type": "generated-index"
}
}
89 changes: 89 additions & 0 deletions apps/docs/docs/getting-started/connect-wallets.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
---
sidebar_position: 3
---

# Connect wallets

Wallets & accounts connection can by managed via [`useWallets`](/api/react/function/useWallets), [`useConnectedWallets`](/api/react/function/useConnectedWallets) & [`useAccounts`](/api/react/function/useAccounts) hooks.

## Add wallet connector to the config

```ts title="config.ts"
import { InjectedConnector } from "@reactive-dot/core/wallets.js";
import type { Config } from "@reactive-dot/types";

const config: Config = {
// ...
wallets: [new InjectedConnector()],
};

export default config;
```

## Connect to wallets

```tsx title="Wallets.tsx"
import { useConnectedWallets, useWallets } from "@reactive-dot/react";

const Wallets = () => {
const wallets = useWallets();
const connectedWallets = useConnectedWallets();

return (
<section>
<header>
<h3>Wallet connection</h3>
</header>
<article>
<h4>Wallets</h4>
<ul>
{wallets.map((wallet) => (
<li key={wallet.id}>
<div>{wallet.name}</div>
<div>
{connectedWallets.includes(wallet) ? (
<button onClick={() => wallet.disconnect()}>
Disconnect
</button>
) : (
<button onClick={() => wallet.connect()}>Connect</button>
)}
</div>
</li>
))}
</ul>
</article>
</section>
);
};

export default Wallet;
```

## Display available accounts

```tsx title="Accounts.tsx"
import { useAccounts } from "@reactive-dot/react";

const Accounts = () => {
const accounts = useAccounts();

return (
<section>
<header>
<h3>Accounts</h3>
</header>
<ul>
{accounts.map((account, index) => (
<li key={index}>
<div>{account.address}</div>
<div>{account.name}</div>
</li>
))}
</ul>
</section>
);
};

export default Accounts;
```
84 changes: 84 additions & 0 deletions apps/docs/docs/getting-started/mutation.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
---
sidebar_position: 4
---

# Mutation

The `useMutation` hook allow you to sign & submit transaction to a chain.

## Connect wallet & accounts

Follow the [Connect wallets](./connect-wallets.md) guide to get this set up.

## Choose the signer

There are multiple way to select the account used for signing.

### 1. Via context

```tsx
import { ReDotSignerProvider } from "@reactive-dot/react";

const App = () => (
<ReDotSignerProvider signer={someSigner}>{/** ... */}</ReDotSignerProvider>
);
```

### 2. Passing signer to the hook

```tsx
import { useAccounts, useMutation } from "@reactive-dot/react";

const accounts = useAccounts();

const [claimState, claim] = useMutation(
(tx) => tx.NominationPools.claim_payout(),
{ signer: accounts.at(0)?.polkadotSigner },
);
```

### 2. Passing signer to the final submission

```tsx
import { useAccounts, useMutation } from "@reactive-dot/react";

const accounts = useAccounts();

const [clearIdentityState, clearIdentity] = useMutation((tx) =>
tx.Identity.clear_identity(),
);

clearIdentity(accounts.at(0)?.polkadotSigner);
```

## Submitting transaction

```tsx
import { IDLE, MutationError, PENDING } from "@reactive-dot/core";
import { useMutation } from "@reactive-dot/react";
import { Binary } from "polkadot-api";

const Component = () => {
const [transactionState, submit] = useMutation((tx) =>
tx.System.remark({ remark: Binary.fromText("Hello from reactive-dot!") }),
);

switch (transactionState) {
case IDLE:
return <div>No transaction submitted yet</div>;
case PENDING:
return <div>Submitting transaction...</div>;
default:
if (remarkState instanceof MutationError) {
return <div>Error submitting transaction!</div>;
}

return (
<div>
Submitted tx with hash: {remarkState.txHash}, with the current state
of: {remarkState.type}
</div>
);
}
};
```
60 changes: 60 additions & 0 deletions apps/docs/docs/getting-started/query.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
---
sidebar_position: 2
---

# Query

The [`useQuery`](/api/react/function/useQuery) hook allow you to read any data from chain, while maintaining updates, concurrency, caching & deduplication behind the scene for you.

## Async handling

[`useQuery`](/api/react/function/useQuery) utilize React's Suspense API for data fetching & error handling.

```tsx
const ActiveEra = () => {
const activeEra = useQuery((builder) =>
builder.readStorage("Staking", "ActiveEra", []),
);

return <div>Active era: {activeEra}</div>;
};

const App = () => {
return (
<ErrorBoundary fallback="Error fetching active era!">
<Suspense fallback="Fetching active era...">
<ActiveEra />
</Suspense>
</ErrorBoundary>
);
};
```

## Fetching multiple data

Fetching multiple data can be done by chaining queries together, [`useQuery`](/api/react/function/useQuery) (with TypeScript) will automatically infer that you want to fetch multiple data concurrently & will return an array of data instead.

```tsx
const MultiQuery = () => {
const [expectedBlockTime, epochDuration, proposalCount] = useQuery(
(builder) =>
builder
.fetchConstant("Babe", "ExpectedBlockTime")
.fetchConstant("Babe", "EpochDuration")
.readStorage("Treasury", "ProposalCount", []),
);

return (
<dl>
<dt>Expected block time</dt>
<dd>{expectedBlockTime}</dd>

<dt>Epoch duration</dt>
<dd>{epochDuration}</dd>

<dt>Proposal count</dt>
<dd>{proposal count}</dd>
</dl>
);
};
```
Loading

0 comments on commit 6ec68fc

Please sign in to comment.