Skip to content

Latest commit

 

History

History
219 lines (139 loc) · 8.51 KB

README.md

File metadata and controls

219 lines (139 loc) · 8.51 KB

Developer documentation

Development tools

In order to work on Pioneer 2 you'll need following tools for development and testing:

In order to interact with the Joystream ecosystem

Tech stack

The Pioneer 2.0 is built using the latest version of React. The React development assumes:

Libraries

  • Apollo client - to interact with GraphQL
  • CKEditor 5 as Markdown editor
  • xstate state management for complex flows in modals
  • Yup validation (partially)
  • date-fns to interact with dates
  • React libraries for: routing, pagination, breadcrumbs, dropzone, etc (see package.json)

Note: To read about the Pioneer 2 architecture & key concepts see Pioneer 2 readme

Dependencies

The package.json entries for @polkadot/* packages must be set to the exact versions in order to match Joystream dependencies. See resolutions section in package.json for details. Keeping dependencies in sync prevents "duplicated instances" error while using Polkadot.js API.

The CKEditor 5 build is available in packages/markdown-editor packages. More on editor development.

Build tools

The build scripts uses webpack directly (no CRA) as it integrates better with custom webpack extensions (build CKEditor, etc.).

As the Storybook uses Babel a shared webpack configuration for both webpack and storybook was introduced.

To build the project in a development mode using webpack dev server:

yarn run start

To build a production ready version:

yarn run build

Running Pioneer 2 with local Joystream dev environment

Read the Running the Joystream ecosystem locally docs on how to run Pioneer 2 with the Joystream testnet locally.

Coding standards

For code quality & standards we rely on ESLint and Prettier. To run both checks execute inside packages/ui:

## Run linter
yarn lint

## Run lint & apply automatic fixes
yarn lint:fix

Testing

Read more on testing in testing documentation.

Joystream API

Both - the testnet & local development environment expects that a Joystream node instance is available.

Expected URIs:

  • local: ws://127.0.0.1:9944
  • testnet: wss://rpc.joystream.org:9944

Local environment limitations

Since the local query-node operates on mocks all of the query-node mocked entities are not present on-chain.

Also, any The second limitation is that any on-chain action is not represented in the query-node mocks.

See mocking on how to work with local mocks for development and tests.

Local environment Accounts

The joystream node should be started in a development mode:

joystream-node --dev --tmp --unsafe-ws-external --unsafe-rpc-external --rpc-cors=all --log runtime

The development version uses well-known accounts to store JOY tokens and where Alice is a Sudo account. See tips on how to add them to the extension.

Query-node API

To access the archival state of the chain Pioneer 2 fetch such information from the query-node. It is a GraphQL server that allows a convenient API for querying the data.

The following tools are used to consume GraphQL data:

Adding queries

To fetch the data from a GraphQL we use code generated by GraphQL Code Generator

To generate scripts run:

yarn run queries:generate

The queries are organized as below:

  • The query-node schema is stored under @/common/api/schema.graphql
  • GraphQL's queries are stored per every module, inside @/module/queries/ folder - you only need to modify those.
  • The graphq-codegen will generate React hooks for Apollo Client (plugin typescript-react-apollo) that will be exposed as @/module/queries import.

For instance, to query for memberships:

Create a @/memberships/queries/members.graphql file:

query GetMembers {
  memberships {
    id
    handle
  }
}

Then run the yarn run queries:generate script.

Use the generated hook in your code:

import { useGetMembersQuery } from '@/memberships/queries'

const { loading, data } = useGetMembersQuery()

Code generation

Some GraphQL related tools use code generation to scaffold types and react hooks from GraphQL schemas and queries.

After updating packages/ui/src/api any of *.graphql files run yarn queries:generated script in the @joystream/pioneer package.

Tips & Tricks

Connecting to the Joystream node using Polkadot app wallet

You can use the Polkadot apps wallet to browse the Joystream node state and call all available extrinsic.

In order to use the app with Joystream API types you need to upload the correct type defs.json from the Joystream repo (using proper branch as well). The full path to file is: /types/augment/all/defs.json.

For the master branch the defs.json use this link:

  1. Copy the contents of the raw view.
  2. Paste to the input on Settings > Developer tab
  3. Switch to a network
    1. local
    2. joystream testnet

Using well-known accounts with Polkadot-js extension

Substrate defines well-known accounts for Alice, Alice_Stash, Bob, Bob_Stash, Charlie, Dave, Eve and Ferdie.

To add any of the above:

  1. Open extension and click plus sign
  2. Select "Import account from pre-existing seed"
  3. Copy the seed from substrate help page as "existing mnemonic seed"
  4. Open advanced and type the derivation path:
  • For Alice, Bob, Charlie, Dave, Eve & Ferdie use the name as path, e.g. //Eve
  • For Alice_Stash and Bob_Stash use //stash after name, e.g.: //Bob//stash

By default, only Alice, Alice_Stash, Bob and Bob_Stash accounts has any funds.

Using custom addresses to connect with node/query node

Configure at build time

To use custom addresses add the .env file in packages/ui (example: packages/ui/.env.example) and set

  1. REACT_APP_TESTNET_NODE_SOCKET example wss://rpc.joystream.org:9944
  2. REACT_APP_TESTNET_QUERY_NODE example https://query.joystream.org/graphql
  3. REACT_APP_TESTNET_QUERY_NODE_SOCKET example wss://query.joystream.org/graphql
  4. REACT_APP_TESTNET_MEMBERSHIP_FAUCET_URL example https://18.234.141.38.nip.io/member-faucet/register

Please remember to restart the webpack process after each change.

All the variables are required to be configured for the network to be used.

Auto-configure at runtime

An auto configuration url can be used to configure pioneer. A url such as https://playground.test/config.json can respond with a JSON:

{
  "websocket_rpc": "wss://rpc-endpoint.com:9944",
  "graphql_server": "https://joystream.app/server/graphql",
  "graphql_server_websocket": "wss://joystream.app/server/graphql",
  "member_faucet": "https://joystream.app/member-faucet/register"
}

By visiting pioneer with a query network-config as below:

https://pioneer.joystream.app/#/settings?network-config=https://playground.test/config.json

This will save the endpoints locally under the "Auto-conf" network.