Skip to content

Latest commit

 

History

History
179 lines (112 loc) · 6.86 KB

README.md

File metadata and controls

179 lines (112 loc) · 6.86 KB
Raw

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 build 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.

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

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

See 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://olympia-dev.joystream.app

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 UI 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 olympia_dev 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. olympia 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.