-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
34 changed files
with
13,421 additions
and
3,267 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -2,3 +2,4 @@ node_modules | |
.yarn | ||
.nx/cache | ||
.nx/workspace-data | ||
.DS_Store |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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* |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
module.exports = { | ||
presets: [require.resolve("@docusaurus/core/lib/babel/preset")], | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
{ | ||
"label": "Getting started", | ||
"position": 1, | ||
"link": { | ||
"type": "generated-index" | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> | ||
); | ||
} | ||
}; | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> | ||
); | ||
}; | ||
``` |
Oops, something went wrong.