diff --git a/.github/workflows/CI.yml b/.github/workflows/CI.yml index c82bd9a6ca..2731f1568d 100644 --- a/.github/workflows/CI.yml +++ b/.github/workflows/CI.yml @@ -202,6 +202,6 @@ jobs: - name: Run tests working-directory: packages/server - run: yarn test --silent + run: node $(yarn bin jest) --runInBand --silent env: DATABASE_URL: postgresql://postgres:postgres@localhost:5432/postgres diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 73b204fd1f..b380da9030 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -10,7 +10,7 @@ If you're looking for an issue to fix, take a look at the issues tagged [Good fi ## Contributing code -Please follow the guide in the main [README](/README.md) on how to get started. +Please follow the development guide [README](docs/README.md) to get started. ### Submitting Changes @@ -18,13 +18,13 @@ Please create a pull request from your fork. We may suggest some changes or impr The below guidelines will help you understand what it takes for the PR to be accepted: -- Write tests (when including business logic) or add a storyboook (when you're creating a new component). +- Write stories (with Storybook) to test your code, have a look [at the testing documentaion](docs/tests.md). - Provide a good PR title – it will be used as a commit message when the PR is merged - Follow the code style & make sure that your PR passes the CI - Use GitHub's special keywords to reference and/or close the issue automatically - Make sure that you've described your assumptions, unusual fixes or other information that may help the reviewer understand your code -- Don't worry about squashing your commits – GitHub will do it for you. However, make your commit history clean as it will be included in the commit description as well. +- Don't worry about squashing your commits – GitHub will do it for you. ### Branching strategy -All PRs land in the `main` branch. Other branches are short-lived for development purposes. However, the archival branches exists under `/arch/*` – those consists prepared components or code that was not included in the main branch, but might be needed at later stage. +All PRs land in the `dev` branch. The everything added to `main` gets deployed to [production](https://pioneerapp.xyz). Other branches are short-lived for development purposes. However, the archival branches exists under `/arch/*` – those consists prepared components or code that was not included in the main branch, but might be needed at later stage. diff --git a/README.md b/README.md index 254980c4ae..f654d9a985 100644 --- a/README.md +++ b/README.md @@ -1,32 +1,34 @@ -![Pioneer](https://user-images.githubusercontent.com/247363/116713796-699da780-a9d5-11eb-82b1-a42bccd642d7.png) - - -# Pioneer - -[![CI](https://github.com/Joystream/pioneer/actions/workflows/CI.yml/badge.svg)](https://github.com/Joystream/pioneer/actions/workflows/CI.yml) - -Governance application for the Joystream DAO platform. - -## Deployed version - -- The live production is available on [https://pioneerapp.xyz/) -- Components preview and testing from `dev` branch, is available on [https://pioneer-2-storybook.vercel.app/](https://pioneer-2-storybook.vercel.app/). - -The deployed version can interact with two backends: - -- Joystream testnet – A deployed testnet. -- Local – [A Joystream ecosystem running locally](docs/testenv.md). +

+ + Pioneer + +

+ +

+ Governance application for the Joystream DAO platform. +

+ +

+ + Live app + • + Docs + • + Storybook + +

## Quickstart -After cloning the repository run: ```shell -## Install npm packages -yarn +## Clone this repository +git clone git@github.com:Joystream/pioneer.git -## Build all the sub-packages -yarn build +cd pioneer + +## Install npm packages +yarn --immutable ## To start local development server yarn start @@ -34,7 +36,7 @@ yarn start ## To start local storybook instance yarn storybook -## To run tests +## To run tests (the back-end tests require docker in order to run) yarn test ``` @@ -50,9 +52,8 @@ To run a Pioneer instance check the [admin documentation](docs/admin.md) The project's monorepo contains packages: -- [packages/ui](packages/ui) – The main Pioneer 2.0 package -- [packages/types](packages/types) – A copy of [@joystream/types](https://github.com/Joystream/joystream/tree/master/types) checked out from the `master` branch. -- [packages/metadata-protobuf](packages/metadata-protobuf) – A copy [@joystream/metadata-protobuf](https://github.com/Joystream/joystream/tree/master/metadata-protobuf) checked out from an `master` branch. +- [packages/ui](packages/ui) – The Pioneer front-end package. +- [packages/server](packages/server) – The Pioneer backend package. - [packages/markdown-editor](packages/markdown-editor) – A CKEditor 5 build used as Markdown editor. ## Contributing diff --git a/docs/README.md b/docs/README.md index 66d88f605e..9d926ed96f 100644 --- a/docs/README.md +++ b/docs/README.md @@ -1,219 +1,171 @@ # Developer documentation -## Development tools +## Table of content -In order to work on Pioneer 2 you'll need following tools for development and testing: +- [Pioneer architecture](#) +- [Development](#development) + - [Development tools](#development-tools) + - [Pioneer front-end App](#pioneer-front-end-app) + - [Pioneer back-end](#pioneer-back-end) + - [Testing](#testing) + - [Coding standards](#coding-standards) + - [Dependencies](#dependencies) -- [nodejs](https://nodejs.org) `v14.x` -- [yarn classic](https://classic.yarnpkg.com/en/docs/install) package manager `v1.22.x` +## Pioneer architecture -In order to interact with the Joystream ecosystem +Pioneer is an application which displays information from and interacts with the Joystream node. This is done in a few way throughout the code base: +- It mostly interacts directly with the Joystream node by calling extrinsics via the [Polkadot{.js} API](https://github.com/polkadot-js/api). +- Data are mostly done through the Query Node GraphQL API. However occasionally some data are also read via [Polkadot{.js} API](https://github.com/polkadot-js/api) queries. +- Pioneer also connect to the [Membership Faucet](https://github.com/Joystream/membership-faucet) to creates memberships. -- [Joystream node](https://github.com/Joystream/joystream/tree/master/node) _optional_ -- [Joystream query-node](https://github.com/Joystream/joystream/tree/query_node/query-node) _optional_ +In addition to these services 3 services memberships Avatars are uploaded and served by `https://atlas-services.joystream.org/avatars`. -## Tech stack +Finally Pioneer is composed of 2 services a front-end application and a back-end which handle e-mail notifications. They interact via GraphQL. -The Pioneer 2.0 is built using the latest version of [React](https://reactjs.org/). The React development assumes: +Here is a summary of the involved services: -- [TypeScript](https://www.typescriptlang.org/) 4.x – using `sctrict:true` -- Function components & [hooks](https://reactjs.org/docs/hooks-intro.html) -- [styled components](https://styled-components.com/docs) for CSS +```mermaid +graph TB + subgraph P["

Pioneer

"] + direction TB -Libraries + App(("Pioneer App + front-end")) -- [Apollo client](https://www.apollographql.com/docs/react/) - to interact with GraphQL -- [CKEditor 5](https://ckeditor.com/docs/ckeditor5/latest/framework/guides/overview.html) as Markdown editor -- [xstate](https://xstate.js.org/) state management for complex flows in modals -- [Yup](https://github.com/jquense/yup#api) validation (partially) -- [date-fns](https://date-fns.org/docs/Getting-Started) to interact with dates -- React libraries for: routing, pagination, breadcrumbs, dropzone, etc (see package.json) + Backend("Pioneer Notification + back-end (optional)"); -**Note**: To read about the Pioneer 2 architecture & key concepts see [Pioneer 2 readme](/packages/ui/README.md) + App<-->|"GraphQL + Queries/Mutations"| Backend; + end -### Dependencies + Faucet("Membership Faucet + (optional)") -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](/package.json) for details. Keeping dependencies in sync prevents "duplicated instances" error while using Polkadot.js API. + Upload("Avatar upload + servive (optional)") -The CKEditor 5 build is available in `packages/markdown-editor` packages. [More on editor development](/packages/markdown-editor/README.md). + RPC[("Joystream + node")] -### Build tools + QN[("Joystream + Query Node")] -The build scripts uses webpack directly (no CRA) as it integrates better with custom webpack extensions (build CKEditor, etc.). + App--->|"REST API"| Faucet; -As the Storybook uses Babel a [shared webpack configuration](/packages/ui/dev/webpack.shared.js) for both webpack and storybook was introduced. + App--->|HTTP POST| Upload -To build the project in a development mode using webpack dev server: + RPC<-->|"RPC + @polkadot/api"| App; -```shell -yarn run start -``` + QN-->|"GraphQL + Queries/Subscriptions"| App; -To build a production ready version: + QN-->|"GraphQL + Queries"| Backend -```shell -yarn run build + RPC<-.->Faucet + RPC-.->QN ``` -## Running Pioneer 2 with local Joystream dev environment - -Read the [Running the Joystream ecosystem locally](testenv.md) 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`: - -```shell -## Run linter -yarn lint - -## Run lint & apply automatic fixes -yarn lint:fix -``` - -## Testing - -Read more on testing in [testing documentation](tests.md). - -## 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 +## Development -Since the local query-node operates on [mocks](mocks.md#query-node-mocks) all of the query-node mocked entities are not present on-chain. +### Development tools -Also, any The second limitation is that any on-chain action is not represented in the query-node mocks. +In order to work on Pioneer 2 you'll need following tools for development and testing: -See [mocking](mocks.md) on how to work with local mocks for development and tests. +- [Node.js](https://nodejs.org) `v18.x` or newer. +- [yarn](https://yarnpkg.com/getting-started/install) -### Local environment Accounts +In order to interact with the Joystream ecosystem -The joystream node should be started in a development mode: +- [Joystream node](https://github.com/Joystream/joystream/tree/master/bin/node) _optional_ +- [Joystream Query node](https://github.com/Joystream/joystream/tree/master/query-node) _optional_ -```shell -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](#using-well-known-accounts-with-polkadot-js-extension). +### Pioneer front-end App -## Query-node API +> [!NOTE] +> Read more about the Pioneer front-end App architecture and key concepts [here](/packages/ui/README.md). -To access the archival state of the chain Pioneer 2 fetch such information from the [query-node](https://github.com/Joystream/joystream/tree/query_node/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: -- [Apollo Client](https://www.apollographql.com/docs/react/) for accessing GraphQL + To start Pioneer run: + ```shell + yarn start + ``` -### Adding queries +As shown above the Pioneer front-end relies on the state of the Joystream blockchain (exposed by the Joystream node and Query node). Therefore it is necessary to connect Pioneer to instances of the Joystream node and query node or to mock these in order to be able to develop on Pioneer. -To fetch the data from a GraphQL we use code generated by [GraphQL Code Generator](https://www.graphql-code-generator.com/) +#### Method 1: Developing on mocks with Storybook -To generate scripts run: +The Pioneer Storybook has several stories rendering entire pages including the pages modal. This can be used to add features and tests. It allows to easily mock any possible chain state and can result in a faster development cycle. +To start Storybook run: ```shell -yarn run queries:generate -``` - -The queries are organized as below: -- The query-node schema is stored under [@/common/api/schema.graphql](/packages/ui/src/common/api/schemas/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`](https://www.graphql-code-generator.com/docs/plugins/typescript-react-apollo)) that will be exposed as `@/module/queries` import. - -For instance, to query for `memberships`: - -Create a `@/memberships/queries/members.graphql` file: - -```graphql -query GetMembers { - memberships { - id - handle - } -} +yarn storybook ``` -Then run the `yarn run queries:generate` script. +It should be accessible at `localhost:6006`. +There are to section particularly useful to develop: +1. [App](https://pioneer-2-storybook-joystream.vercel.app/?path=/story/app) these stories allow to interact with non domain specific feature like the On boarding flow or the sidebar. +2. [Pages](https://pioneer-2-storybook-joystream.vercel.app/?path=/story/pages) these stories render the pages based on fully mocked data (which can partially be changed through the stories controls). -Use the generated hook in your code: +> [!IMPORTANT] +> After developing a feature using a story, the feature should still be tested on the app with an actual network. -```ts -import { useGetMembersQuery } from '@/memberships/queries' - -const { loading, data } = useGetMembersQuery() -``` +Read more about the Storybook mocks [here](mocks.md#storybook-mocks). -### Code generation +#### Method 2: Connecting to the Joystream main network (Mainnet) -Some GraphQL related tools use code generation to scaffold types and react hooks from GraphQL schemas and queries. +Pioneer will by default connect to the Joystream main network. This can be enough to develop or develop feature based on the current version of the Mainnet chain, however changing state of the Mainnet for development is costly, time consuming, and should be avoided in most cases. -After updating `packages/ui/src/api` any of `*.graphql` files run `yarn queries:generated` script in the `@joystream/pioneer` package. +> [!TIP] +> To make sure that Pioneer is connected to the Mainnet go to the Settings on the "Network" tab the "Select Network" should be set to "Mainnet". Additionally "Network Details" section (on the same page) can be checked to make sure the environment variable are indeed pointing to the Mainnet. -# Tips & Tricks +#### Method 3: Connecting to a Joystream playgrounds -## Connecting to the Joystream node using Polkadot app wallet +Alternatively some "playgrounds" are available to help with Pioneer's development, these are networks based on chains with tokens which have no real values and which might be configured to make testing easier (e.g election cycle may run in minutes instead of weeks). -You can use the Polkadot apps wallet to browse the Joystream node state and call all available extrinsic. +Read how to connect to these networks [here](/packages/ui/README.md#using-custom-joystream-networks). -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`. +#### Method 4: Connecting to a local Joystream dev environment -For the `master` branch the `defs.json` use this [link](https://github.com/Joystream/joystream/blob/master/types/augment/all/defs.json): +Read the [Running the Joystream ecosystem locally](testenv.md) docs on how to run Pioneer with a local Joystream network. -1. Copy the contents of the [`raw view`](https://raw.githubusercontent.com/Joystream/joystream/master/types/augment/all/defs.json). -2. Paste to the input on Settings > Developer tab -3. Switch to a network - 1. [local](https://polkadot.js.org/apps/?rpc=ws%3A%2F%2F127.0.0.1%3A9944) - 2. [joystream testnet](https://polkadot.js.org/apps/?rpc=wss%3A%2F%2Frpc.joystream.org%3A9944) +### Pioneer back-end -## Using well-known accounts with Polkadot-js extension +> [!NOTE] +> Read more about the Pioneer backend architecture and key concepts [here](/packages/server/README.md). -Substrate defines [well-known accounts](https://docs.substrate.io/v3/tools/subkey#well-known-keys) for `Alice`, `Alice_Stash`, `Bob`, `Bob_Stash`, `Charlie`, `Dave`, `Eve` and `Ferdie`. +To run the Pioneer back-end locally: -To add any of the above: +1. Install the dependencies: `yarn --immutable`: +2. Create and configure a `packages/server/.env`. +3. Prepare the database and generate the code by running either: + - `yarn workspace server dev:db:build`: To use docker for the db. + - Otherwise `yarn workspace dev:build`: Once the configured db is running. +4. Start the API server with: `yarn workspace server dev:api` +5. To run the notifier: `yarn workspace server dev:notify` -1. Open extension and click plus sign -2. Select "Import account from pre-existing seed" -3. Copy the seed from [substrate help page](https://docs.substrate.io/v3/tools/subkey#well-known-keys) 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` +### Testing -By default, only `Alice`, `Alice_Stash`, `Bob` and `Bob_Stash` accounts has any funds. +Read about testing in [testing documentation](tests.md). -## Using custom addresses to connect with node/query node +### Coding standards -### 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` +For code quality & standards we rely on ESLint and Prettier. To run both checks execute inside `packages/ui`: -Please remember to restart the webpack process after each change. +```shell +## Run linter +yarn lint -All the variables are required to be configured for the network to be used. +## Run lint & apply automatic fixes +yarn lint:fix +``` -### 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: +### Dependencies -``` -{ - "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" -} -``` +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](/package.json) for details. Keeping dependencies in sync prevents "duplicated instances" error while using Polkadot.js API. -By visiting pioneer with a query `network-config` as below: -``` -https://pioneer.joystream.app/#/settings?network-config=https://playground.test/config.json -``` +The CKEditor 5 build is available in `packages/markdown-editor` packages. [More on editor development](/packages/markdown-editor/README.md). -This will save the endpoints locally under the "Auto-conf" network. diff --git a/docs/admin.md b/docs/admin.md index 8fbd82fc3c..caceff1fc7 100644 --- a/docs/admin.md +++ b/docs/admin.md @@ -1,24 +1,40 @@ # Administrating a Pioneer instance -> **Warning** -> Any environment variable prefixed with `REACT_APP_` set in the building environment will be **accessible by anyone** on Pioneer frontend. +> [!CAUTION] +> Any environment variable prefixed with `REACT_APP_` set in the building environment will be **accessible by anyone** on Pioneer front-end. -## Deploying Pioneer +## Deploying Pioneer front-end + +### Quick start (Vercel) + +To deploy Pioneer on Vercel click on the button bellow: + +[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FJoystream%2Fpioneer&env=REACT_APP_MAINNET_NODE_SOCKET,REACT_APP_MAINNET_QUERY_NODE,REACT_APP_MAINNET_QUERY_NODE_SOCKET&envDescription=More%20information%20at%3A&envLink=https%3A%2F%2Fgithub.com%2FJoystream%2Fpioneer%2Fblob%2Fdev%2Fdocs%2Fadmin.md&project-name=pioneer&repository-name=pioneer) 1. ### Configure the network Pioneer should connect to by default - To do so define `REACT_APP_TESTNET_NODE_SOCKET`, `REACT_APP_TESTNET_QUERY_NODE`, `REACT_APP_TESTNET_QUERY_NODE_SOCKET`, and `REACT_APP_TESTNET_MEMBERSHIP_FAUCET_URL`. + To do so define `REACT_APP_MAINNET_NODE_SOCKET`, `REACT_APP_MAINNET_QUERY_NODE`, `REACT_APP_MAINNET_QUERY_NODE_SOCKET`, and `REACT_APP_MAINNET_MEMBERSHIP_FAUCET_URL`. + + For example, for the Joystream mainnet: + + ```shell + REACT_APP_MAINNET_NODE_SOCKET=wss://rpc.joystream.org:9944 + REACT_APP_MAINNET_QUERY_NODE=https://query.joystream.org/graphql + REACT_APP_MAINNET_QUERY_NODE_SOCKET=wss://query.joystream.org/graphql + ``` - For example, for the Joystream testnet: + Additionally a membership faucet, [a notification back-end](deploying-the-pioneer-notification-back-end), or an Avatar upload service can be configured with e.g: ```shell - REACT_APP_TESTNET_NODE_SOCKET=wss://rpc.joystream.org:9944 - REACT_APP_TESTNET_QUERY_NODE=https://query.joystream.org/graphql - REACT_APP_TESTNET_QUERY_NODE_SOCKET=wss://query.joystream.org/graphql - REACT_APP_TESTNET_MEMBERSHIP_FAUCET_URL=https://18.234.141.38.nip.io/member-faucet/register + REACT_APP_MAINNET_MEMBERSHIP_FAUCET_URL=https://faucet.joystream.org/member-faucet/register` + REACT_APP_MAINNET_BACKEND=https://api-7zai.onrender.com` + REACT_APP_AVATAR_UPLOAD_URL=https://atlas-services.joystream.org/avatars ``` + > [!IMPORTANT] + > `faucet.joystream.org` requires a specific [hCaptcha](https://www.hcaptcha.com/) key to be set in: `REACT_APP_CAPTCHA_SITE_KEY`. + 2. ### Run the deployment script @@ -27,6 +43,88 @@ ``` Will build Pioneer inside the `packages/ui/build` folder. +## Deploying the Pioneer notification back-end + +### Prerequisites + +#### Configure the Pioneer back-end + +- `QUERY_NODE_ENDPOINT=https://`: Query node to fetch from (in most cases this should be: `https://query.joystream.org/graphql`). +- `PIONEER_URL=https://`: The URL of the your Pioneer web application. +- `STARTING_BLOCK=`: The block to start fetching the events from (in most cases this should be the current block). +- `EMAIL_SENDER=`: The address to send e-mail with. + +Replace the `` by the actual values and save the configuration in a file. + +#### Set up an e-mail provider + +To both register users and notify them an email provider needs to be set up. At the moment only SendGrid and Mailgun are supported but custom SMTP configuration is coming soon. + +To set up SendGrid: +1. Sign up for a SendGrid account. +2. Verify your Sender e-mail address Identity. +3. Create your SendGrid API key with full access "Mail Send" permissions. +4. Add this API key to the file mentioned earlier this value is called `SENDGRID_API_KEY=` + +To set up Mailgun: +1. Sign up for a Mailgun account. +2. Add and verify your domain. +3. Get your Mailgun private API key from your dashboard. +4. Add this API key to the file mentioned earlier this value is called `MAILGUN_API_KEY=` +5. Also add `MAILGUN_DOMAIN=` to the file and if this is an EU domain `MAILGUN_API_URL=https://api.eu.mailgun.net` should be added too. + +### Quick start (Render) + +To deploy on Render click on the button bellow: + +[![Deploy to Render](https://render.com/images/deploy-to-render-button.svg)](https://render.com/deploy?repo=https://github.com/Joystream/pioneer/tree/dev) + +> [!WARNING] +> Only Sendgrid is currently supported with the Render deployment. + +### Private server deployment + +1. + #### Install docker + The following deployment instructions are relying on the [`joystream/pioneer-backend`](https://hub.docker.com/r/joystream/pioneer-backend) docker image. + Therefore [Docker](https://docs.docker.com) is a requirement. + +2. + #### Host a PostgreSQL database + Store the database URL in the file mentioned above. It should look like this: + ``` + DATABASE_URL=postgresql://{username}:{password}@{host}:5432/{database name} + ``` + +3. + #### Upload the configuration file on the server + At this point it should have a all the following configuration. + ```shell + DATABASE_URL=postgresql://{username}:{password}@{host}:5432/{database name} + QUERY_NODE_ENDPOINT=https:// + PIONEER_URL=https:// + STARTING_BLOCK= + EMAIL_SENDER= + ``` + + In addition it should also have your e-mail provider configuration with either `SENDGRID_API_KEY`, or `MAILGUN_API_KEY`, `MAILGUN_DOMAIN` and maybe `MAILGUN_API_URL=https://api.eu.mailgun.net` + + Finally `APP_SECRET_KEY=` should be added to the configuration. It's best to pick this value at random and not to store it anywhere else. + +4. + #### Serve the backend API + E.g on a private server with the environment variable - mentioned above - set in a file at the path: `/path/to/.env`, the API can be run with: + ``` + docker run -d -p 80:80 --restart=always --name=api --env-file=/path/to/.env joystream/pioneer-backend + ``` + +5. + #### Run the notify script at regular intervals + E.g still on a private server the notify script can be run every 10 minutes by setting the following line in the crontab: + ``` + */10 * * * * docker run --name=notify --env-file=/path/to/.env joystream/pioneer-backend notify + ``` + ## Under maintenance screen A "maintenance screen" can temporarily replace the app, in order to occasionally prevent users from using Pioneer (like during sensitive runtime uprade for example). @@ -77,7 +175,7 @@ A longer term solution is to fetch a blacklist from a url. This url can be defin ``` For JSON responses with particularly complex structures, a [JSONPath](https://github.com/dchester/jsonpath#jsonpath-syntax) can be set in `IMAGE_SAFETY_BLACKLIST_JSON_PATH`. -> **Note** +> [!NOTE] > If both method 1 and 2 are used, both blacklists are merged together. If needed `IMAGE_SAFETY_BLACKLIST_HEADERS` can define the headers (`\n` separated) passed to the request made to `IMAGE_SAFETY_BLACKLIST_URL`. e.g: @@ -90,9 +188,9 @@ IMAGE_SAFETY_BLACKLIST_HEADERS="Authorization: Bearer API_KEY" Given an api key `keyXYZ`, a base `appXYZ`, and a table `tableXYZ` with the following structure: | image | page | blacklisted | | --- | --- | --- | -| https://example.com/x.png | https://dao.joystream.org/#/forum/thread/1 | [X] | -| https://example.com/y.png | https://dao.joystream.org/#/forum/thread/1 | [ ] | -| https://example.com/z.png | https://dao.joystream.org/#/forum/thread/2 | [X] | +| https://example.com/x.png | https://pioneerapp.xyz/#/forum/thread/1 | [X] | +| https://example.com/y.png | https://pioneerapp.xyz/#/forum/thread/1 | [ ] | +| https://example.com/z.png | https://pioneerapp.xyz/#/forum/thread/2 | [X] | This configuration: @@ -138,17 +236,17 @@ Similarly to the blacklist api, a `REACT_APP_IMAGE_SAFETY_REPORT_HEADERS` can de REACT_APP_IMAGE_SAFETY_REPORT_HEADERS="Authorization Bearer API_KEY\nContent-Type:application/json" ``` -> **Warning** +> [!WARNING] > Unlike fetching the blacklist which happens on the build step, this happens on the front-end. Therefore (just as with any environment variable prefixed with `REACT_APP_`) any sensitive information set in `REACT_APP_IMAGE_REPORT_API_URL` or `REACT_APP_IMAGE_SAFETY_REPORT_HEADERS` will be **accessible by anyone**. -> **Warning** +> [!CAUTION] > No CAPTCHA nor any other way to securely prevent some users from spamming the third party API is currently supported. #### Example: Airtable api Given an api key `keyXYZ` (with write access to the table), a base `appXYZ`, and a table `tableXYZ` with the following structure: | src | page | | --- | --- | -| https://example.com/x.png | https://dao.joystream.org/#/forum/thread/1 | +| https://example.com/x.png | https://pioneerapp.xyz/#/forum/thread/1 | This configuration: @@ -159,5 +257,5 @@ REACT_APP_IMAGE_SAFETY_REPORT_BODY_TEMPLATE={"records":[{"fields":{"src":"{image Will allow users to report image urls and the page they were reported from, into the `tableXYZ`. -> **Warning** +> [!CAUTION] > Because this is making `tableXYZ` public by making `keyXYZ` accessible to anyone. The actually blacklisted url, should probably be stored somewhere else (where `tableXYZ` cannot write). Otherwise this would allow anyone to blacklist any image. diff --git a/docs/mocks.md b/docs/mocks.md index e892fea9d8..de4f418ca8 100644 --- a/docs/mocks.md +++ b/docs/mocks.md @@ -1,11 +1,84 @@ # Mocking -There are two types of mocks used by the Pioneer +There are 3 ways to mock data to develop on Pioneer -1. GraphQL (query-node) mocks -2. Local node mocks +- [Storybook mocks](#storybook-mocks)) +- [Local node mocks](#node-mock) +- [GraphQL (query-node) mocks (**deprecated**)](#query-node-mocks) -### Node mocks +## Storybook mocks + +In stories data are mocked using the [MockProvidersDecorator](../packages/ui/src/mocks/providers/index.tsx). This Decorator expects either an object or a function returning an object in the story parameter. This object has the following structure: + +```yml +{ + accounts: { + active: account and membership data or handle defined in the list property + list: list of account and membership data + hasWallet: boolean + } + + chain: { + consts: This mirrors the Joystream API consts structure. The contants can simply be defined with JS primitives (no need to create types). + + query: This mirrors the Joystream API query structure. This too can be defined with simple JS primitive no need to defined functions returning RXjs subscription returning Polkadot types (although this is accepted too for edge cases). + + derive: Same as query. + + rpc: Same as query. + + tx: { + [module]: { + [extrinsic]: { + data: The data returned on success + failure: If this is defined and a non empty string the mocked transaction fails with this message + event: The name of the chain event triggered by this transaction + fee: The fee of the transaction + onCall: This is called whenever the tx function is called (so whenever the transaction is updated) + onSend: This is called when the transaction is sent + } + } + } + } + + gql: { + queries: [ + { + query: DocumentNode, + data: The data fields returned when the query succeeds + error: If this is defined the query will fail witht this value as it's error + resolver: The resolver to run for the query if defined it will ovewrite both data and error + } + ] + + mutations: [ + { + mutation: DocumentNode + data: The data fields returned when the mutation succeeds + error: If this is defined the mutation will fail witht this value as it's error + resolver: The resolver to run for the mutation if defined it will ovewrite both data and error + onSend: This is called when the mutation is sent + } + ] + } + + localStorage: { [property name]: string value } + + backend: { + notificationsSettingsMap?: BackendContextValue['notificationsSettingsMap'] + onSetMemberSettings?: (memberId: string, settings: any) => void + authToken: string + } + +} +``` + +> [!NOTE] +> Most properties of this object are optionals. Only what's needed to render the stories and run the tests should be mocked. + +For more details check existing stories like: [ProposalPreview.stories.tsx](../packages/ui/src/app/pages/Proposals/ProposalPreview.stories.tsx). + +## Node mocks To test most of the extrinsics requires existing on-chain data. To create some on-chain objects use the `yarn run node-mocks` script or use the polkadot apps wallet application to create them beforehand. @@ -31,7 +104,7 @@ To show help: yarn node-mocks --help ``` -#### Chain spec +#### Chain spec (**deprecated**) Another way to influence the on-chain state for testing purpose, is to provide a customize `chain-spec.json` file when running a Joystream node: @@ -96,7 +169,10 @@ The available aliases are: `post`, `opening`, `thread`, `bounty`, `candidacy`, ` You can also connect to the node using [Polkadot apps wallet](README.md#connecting-to-the-joystream-node-using-polkadot-app-wallet) to interact with the node. -### Query-node Mocks +## Query-node Mocks + +> [!WARNING] +> These mocks are now deprecated they are still heavily used by the legacy tests suites and some old stories. However no new tests or stories should depend on MirageJS and the legacy tests and stories should be removed progressively. To mock the query-node server we use [Mirage JS](https://miragejs.com/) in tests, storybook data and for local development. diff --git a/docs/tests.md b/docs/tests.md index 1341af366f..265d910c3d 100644 --- a/docs/tests.md +++ b/docs/tests.md @@ -1,50 +1,42 @@ # Testing -The testing strategy: +The testing strategy now relies entirely on [Storybook](https://pioneer-2-storybook-joystream.vercel.app). First all pages should be accessible through in Storybook so they can be easily viewed and interacted with. Secondly [interaction tests](https://storybook.js.org/docs/writing-tests/interaction-testing) are added to these pages stories in order to continuously test the pages business logic via the CI. -1. [storybook](#the-storybook) for simple components & manual tests -2. [automated tests](#integration-tests) for business logic +In addition some [non storybook test suites](#integration-tests) now deprecated but not replaced yet. They are still part of the codebase and Ran by the CI. -## The storybook +## Storybook -The project's [storybook](https://storybook.js.org/) is build by the CI and available at [https://pioneer-2-storybook.netlify.app/](https://pioneer-2-storybook.netlify.app/). +The project's [storybook](https://storybook.js.org/) is build by the CI and available at [https://pioneer-2-storybook-joystream.vercel.app](https://pioneer-2-storybook-joystream.vercel.app). To run the local instance (project root or `packages/ui` directory): ```bash -yarn run storybook +yarn storybook ``` -For more complex components, the stories might need a [query-node mocks](mocks.md#query-node-mocks) in order to fetch data. +Stories are written on files write next to the component they are rendering. E.g for `packages/ui/src/app/pages/Proposals/ProposalPreview.tsx` the stories are in `packages/ui/src/app/pages/Proposals/ProposalPreview.stories.tsx`. -Example story that uses query-node mocks to fetch `members` data: +The Pioneer Storybook has 3 type of stories: +- Component which don't require any mocks. These are used to document Pioneer reusable building blocks. +- The pages and App stories which do not have a `play` method. These have 2 main utilities: + 1. They make it easy to develop, visualize, and interact with any configuration of a page by relying on the mocks. + 2. They serve as smoke tests for the CI. Meaning that if a page breaks in due to change it should be reported by the CI. +- The pages and App which have `play` functions. These are tests they rely on slightly modified versions of Jest and the Testing Library. -```tsx -import { Meta, Story } from '@storybook/react' -import React from 'react' +> [!NOTE] +> Some stories currently do not fit in any of these 3 categories. They are single components but which rely on Query node mocks to run. These stories should be progressively removed. -import { ComplexComponent } from '@/foo/bar/components/ComplexComponent' -import { MockApolloProvider } from '@/mocks/components/storybook/MockApolloProvider' +One of the main advantage of having tests done in the stories is that the same mocks are used to both write the stories (and often to also create the page itself) and to write the tests. It also makes it easier to debug the tests by providing a visual feed back of everything it does. -export default { - title: 'ComplexComponent', - component: ComplexComponent, -} as Meta - -export const Default: Story = () => { - return ( - - - - ) -} -``` - -**Note**: Some components might need to connect with Polkadot.js extension. However, the extension API can't be accessed inside storybook's iframe ([example story](/packages/ui/src/accounts/components/SelectAccount/SelectAccount.stories.tsx) that renders warning). +> [!IMPORTANT] +> Read how to mock data in the pages stories and tests [here](mocks.md#storybook-mocks) ## Integration tests -Pioneer 2 use [jest](https://jestjs.io/) to run automated tests and [testing-library](https://testing-library.com/) as testing utilities. The [query-node mocks](mocks.md#query-node-mocks) uses the same setup as the front-end mocks. +> [!WARNING] +> These tests are now deprecated they should be progressively be replaced by [Storybook interaction tests](#storybook). + +Pioneer use [jest](https://jestjs.io/) to run automated tests and [testing-library](https://testing-library.com/) as testing utilities. The [query-node mocks](mocks.md#query-node-mocks) uses the same setup as the front-end mocks. ### Polkadot.js API stubs @@ -115,7 +107,8 @@ The repository has enabled the continuous integration for every commit that land - linter check - build step - tests -- The application preview on netlify -- The storybook preview on netlify +- The application preview on Vercel +- The storybook preview on Vercel -**Note**: Only the PRs that pass CI check can be included in the `main` branch. +> [!NOTE] +> Only the PRs that pass CI check can be merged to the `dev` branch. diff --git a/packages/server/README.md b/packages/server/README.md index 1602b7c92a..8dc7c326f7 100644 --- a/packages/server/README.md +++ b/packages/server/README.md @@ -1,5 +1,8 @@ # Pioneer backend +> [!NOTE] +> For a more general Pioneer documentation see [Dev Readme](/docs/README.md). + ## Overview A backend for the [Pioneer UI](../ui). @@ -30,8 +33,6 @@ It is composed of 3 parts: ## Quick Start -### render.com deployments - ### Run with docker ```shell @@ -51,8 +52,7 @@ yarn workspace server docker:notify [![Deploy to Render](https://render.com/images/deploy-to-render-button.svg)](https://render.com/deploy?repo=https://github.com/Joystream/pioneer/tree/backend-dev-blueprint) -> **Warning** -> +> [!IMPORTANT] > This deployments will require to go through the [render.com](https://render.com/) registration, which includes providing a payment method due to the [cron job cost](https://render.com/pricing#cronjobs). > > The [render.com database free tier](https://render.com/docs/free#free-postgresql-databases) ends after 90 days. @@ -72,12 +72,11 @@ In order to customize the default notification behavior with the GraphQL API, an ### Production -[![Deploy to Render](https://render.com/images/deploy-to-render-button.svg)](https://render.com/deploy?repo=https://github.com/Joystream/pioneer/tree/dev) +To deploy a production instance check the [admin documentation](docs/admin.md#deploying-the-pioneer-notification-back-end) ## Production CLI usage -> **Note** -> +> [!NOTE] > The following commands are ran from the `server` directory. To run them from the monorepos root: `yarn` should be replaced by `yarn workspace server`. - `yarn start:api`: starts the API server. @@ -227,8 +226,7 @@ query { ### Run locally -> **Note** -> +> [!NOTE] > The following commands are ran from the monorepos root. To run the API to develop locally: @@ -239,6 +237,7 @@ To run the API to develop locally: - `yarn workspace server dev:db:build`: To use docker for the db. - Otherwise `yarn workspace dev:build`: Once the configured db is running. 4. `yarn workspace server dev:api`: Start the server. +5. `yarn workspace server dev:notify`: Run the notifier with `nodemon`. ### Some other useful scripts diff --git a/packages/server/package.json b/packages/server/package.json index 7bcf26e5b5..5f2c2c9985 100644 --- a/packages/server/package.json +++ b/packages/server/package.json @@ -9,7 +9,7 @@ "docker:up": "./docker/up.sh", "docker:notify": "yarn docker run pioneer-api notify", "docker:yarn": "./docker/yarn.sh", - "test": "jest --runInBand", + "test": "yarn dev:db && yarn dev:build && jest --runInBand", "tsc": "tsc", "ts-node": "ts-node --transpile-only -r tsconfig-paths/register", "nodemon": "nodemon --transpile-only -r tsconfig-paths/register", diff --git a/packages/ui/.env.example b/packages/ui/.env.example index 735ade45b6..650bbca3ab 100644 --- a/packages/ui/.env.example +++ b/packages/ui/.env.example @@ -10,11 +10,14 @@ REACT_APP_MAINNET_NODE_SOCKET=wss://rpc.joystream.org:9944 REACT_APP_MAINNET_QUERY_NODE=https://query.joystream.org/graphql REACT_APP_MAINNET_QUERY_NODE_SOCKET=wss://query.joystream.org/graphql REACT_APP_MAINNET_MEMBERSHIP_FAUCET_URL=https://faucet.joystream.org/member-faucet/register -REACT_APP_MAINNET_BACKEND=http://localhost:3000 +REACT_APP_MAINNET_BACKEND=https://api-7zai.onrender.com # Faucet CAPTCHA REACT_APP_CAPTCHA_SITE_KEY=10000000-ffff-ffff-ffff-000000000001 +# Member avatar upload +REACT_APP_AVATAR_UPLOAD_URL=https://atlas-services.joystream.org/avatars + # Image reporting ## Manual blacklist: @@ -29,5 +32,4 @@ REACT_APP_IMAGE_REPORT_FORM_URL="https://airtable.com/formXYZ?prefill_image={ima # Development REACT_APP_API_BENCHMARK=false -REACT_APP_AVATAR_UPLOAD_URL=https://atlas-services.joystream.org/avatars -REACT_APP_IS_UNDER_MAINTENANCE=true +REACT_APP_IS_UNDER_MAINTENANCE=false diff --git a/packages/ui/README.md b/packages/ui/README.md index 1a1263ba64..b0b8ef1d8f 100644 --- a/packages/ui/README.md +++ b/packages/ui/README.md @@ -1,24 +1,100 @@ -# Pioneer 2 architecture & concepts +# Pioneer front-end App + +> [!NOTE] +> For a more general Pioneer documentation see [Dev Readme](/docs/README.md). + +## Table of content + +- [Quick Start](#quick-start) +- [Tech stack](#tech-stack) + - [Libraries](#libraries) + - [Build tools](#build-tools) +- [Directory structure](#directory-structure) +- [Concepts](#concepts) + - [Modals](#modals) + - [Modals with steps](#modals-with-steps) + - [Transactions](#transactions) + - [Query Node](#query-node) + - [Adding queries](#adding-queries) + - [Code generation](#code-generation) + - [ProxyApi](#proxyapi) +- [Tips & Tricks](#tips--tricks) + - [Using well-known accounts with Polkadot-js extension](#using-well-known-accounts-with-polkadot-js-extension) + - [Using custom Joystream networks](#using-custom-joystream-networks) + - [Auto-configure at runtime](#auto-configure-at-runtime) + - [Custom network settings](#custom-network-settings) + - [Configure at build time](#configure-at-build-time) + +## Quick Start + +After clonning the project, to run a developpment instance of Pioneer simply run: + +```shell +yarn start +``` + +## Tech stack + +Pioneer is built using [React 17](https://reactjs.org/). The React development assumes: + +- [TypeScript](https://www.typescriptlang.org/) 5.x – using `strict:true` +- Function components & [hooks](https://reactjs.org/docs/hooks-intro.html) +- [styled components](https://styled-components.com/docs) for CSS + +### Libraries + +- [Apollo client](https://www.apollographql.com/docs/react/) - to interact with GraphQL +- [@polkadot/api](https://polkadot.js.org/docs/api) - to interact with the RPC node +- [RxJS](https://rxjs.dev/) to subscribe to the Polkadot API +- [CKEditor 5](https://ckeditor.com/docs/ckeditor5/latest/framework/guides/overview.html) as Markdown editor +- [xstate](https://xstate.js.org/) state management for complex flows in modals +- [Yup](https://github.com/jquense/yup#api) validation (partially) +- [date-fns](https://date-fns.org/docs/Getting-Started) to interact with dates +- [Lodash](https://lodash.com/) helper functions +- React libraries for: routing, pagination, breadcrumbs, dropzone, etc (see package.json) + +### 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](/packages/ui/dev/webpack.shared.js) for both webpack and storybook was introduced. + +To build the project in a development mode using Webpack dev server: + +```shell +yarn start +``` + +To build a production ready version: + +```shell +yarn build +``` + ## Directory structure -The application is divided to 3 types of building blocks: +The application is divided to 4 types of building blocks (located in the `src` directory): * `common` - commonly used components & utilities not tied to specific domain * A domain/use-case specific: - * `accounts` – domain of Polkadot's accounts handling, transfering tokens, balances, etc + * `accounts` – domain of Polkadot's accounts handling, transferring tokens, balances, etc + * `api` – domain containing Joystream's API specific code: hooks, providers, utilities, etc * `council` – [council governance](https://joystream.gitbook.io/joystream-handbook/governance/council) * `forum` - [forum subsystem](https://joystream.gitbook.io/joystream-handbook/subsystems/forum) - * `memberships` - [memberships management](https://joystream.gitbook.io/joystream-handbook/subsystems/membership) + * `memberships` – [memberships management](https://joystream.gitbook.io/joystream-handbook/subsystems/membership) * `working-groups` – [working group governance](https://joystream.gitbook.io/joystream-handbook/governance/working-groups) * `proposals` – [proposal system](https://joystream.gitbook.io/joystream-handbook/governance/proposals) + * `bounty`, `financials`, `overview`: are domains which are not available yet but coming soon. + * `services` – Contains internationalization utilities. * `app` – Anything related to the application * assets * routing * pages * global providers -* `mocks` Query-node mocks. +* `ProxyApi` – [A service calling the Joystream API from a web worker instead of on the main thread])(#ProxyApi) +* `mocks` – Utilities and data used for both the deprecated Query-node mocks and the new Storybook mocks. Some rules/hints: @@ -40,7 +116,7 @@ The common and domain specific code is split by functionality: ## Concepts -Most of the Pioneer 2 uses common React app coding patterns. Some however, requires additional explanation. +Most of the Pioneer uses common React app coding patterns. Some however, requires additional explanation. ### Modals @@ -154,3 +230,122 @@ const machine = createMachine({ ``` The transaction machine can be used either as a standalone machine or as a child of a bigger flow. + +### Query Node + +To access the archival state of the chain Pioneer fetch such information from the [Query node](https://github.com/Joystream/joystream/tree/master/query-node). Read [Pioneer architecture section](/docs/README.md#pioneer-architecture-section) for more details. It is a GraphQL server that allows a convenient API for querying the data. + +The following tools are used to consume GraphQL data: +- [Apollo Client](https://www.apollographql.com/docs/react/) for accessing GraphQL + +#### Adding queries + +To fetch the data from a GraphQL we use code generated by [GraphQL Code Generator](https://www.graphql-code-generator.com/) + +To generate scripts run: + +```shell +yarn run queries:generate +``` + +The queries are organized as below: +- The query-node schema is stored under [@/common/api/schema.graphql](/packages/ui/src/common/api/schemas/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`](https://www.graphql-code-generator.com/docs/plugins/typescript-react-apollo)) that will be exposed as `@/module/queries` import. + +For instance, to query for `memberships`: + +Create a `@/memberships/queries/members.graphql` file: + +```graphql +query GetMembers { + memberships { + id + handle + } +} +``` + +Then run the `yarn run queries:generate` script. + +Use the generated hook in your code: + +```ts +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 any of the `*.graphql` files run the `yarn queries:generated` script. + +### ProxyApi + +To interact with the Joystream node a [polkadot{.js} API instance as to be created](https://polkadot.js.org/docs/api/start/create). Because part of the instance creation is resource intensive it results in the App freezing on lower spec machines. In order to solve this issue Pioneer creates the API instance in a web worker and all interaction with the API are done via the web worker. + +This is done seamlessly by using on the main thread a `ProxyApi` which has the same type signature than the `ApiRx` instance. The `ProxyApi` forwards the calls to the `ApiRx` created on the web worker and forward the returned data too. + +This feature can be disabled by running Pioneer with `DISABLE_PROXY_API=true`. + +## Tips & Tricks + +### Using well-known accounts with Polkadot-js extension + +When a chain is run with in development Substrate creates well-known accounts for `Alice`, `Alice_Stash`, `Bob`, `Bob_Stash`, `Charlie`, `Dave`, `Eve` and `Ferdie`. Some of these accounts will are already assigned some token. + +To add these to your wallet: + +1. Open extension and click plus sign +2. Select "Import account from pre-existing seed" +3. Copy this seed `bottom drive obey lake curtain smoke basket hold race lonely fit walk` 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` + +### Using custom Joystream networks + +#### Auto-configure at runtime + +Some networks expose JSON configuration describing their different endpoints. These configurations can be used to connect Pioneer to a network with an easy to share URL. + +For example if Pioneer is running on `localhost:8080` it can connect to the "Atlas dev" playground by going to http://localhost:8080/#/settings?network-config=https://atlas-dev.joystream.org/network/config.json. + +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. + +#### Custom network settings + +In case there is the network you wish to connect to has no JSON configuration (or the configuration is incomplete), custom endpoints can be set on the app too. In `Settings -> Select Network` pick "Custom" there the network endpoints can be defined freely. + +#### 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_MAINNET_NODE_SOCKET` example `wss://rpc.joystream.org:9944` +2. `REACT_APP_MAINNET_QUERY_NODE` example `https://query.joystream.org/graphql` +3. `REACT_APP_MAINNET_QUERY_NODE_SOCKET` example `wss://query.joystream.org/graphql` +4. `REACT_APP_MAINNET_MEMBERSHIP_FAUCET_URL` example `https://faucet.joystream.org/member-faucet/register` +5. `REACT_APP_MAINNET_BACKEND` example `https://api-7zai.onrender.com` + +Please remember to restart the Webpack process after each change. + +All the variables are required to be configured for the network to be used. + diff --git a/packages/ui/package.json b/packages/ui/package.json index 133945e359..1cd6860193 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -20,7 +20,8 @@ "i18n:json2csv": "node ./src/services/i18n/utils/converter.js --input=\"./src/services/i18n/dict\" --output=\"./src/services/i18n/utils/csv\"", "i18n:csv2json": "node ./src/services/i18n/utils/converter.js --from=csv --input=\"./src/services/i18n/utils/csv\" --output=\"./src/services/i18n/dict\" && yarn prettier \"./src/services/i18n/dict/**/*.json\" --print-width 20 --write --loglevel warn", "test-storybook": "test-storybook", - "test": "jest" + "test-legacy": "jest", + "test": "yarn test-legacy && yarn test-storybook" }, "dependencies": { "@apollo/client": "3.5.7", diff --git a/packages/ui/src/common/modals/OnBoardingModal/OnBoardingPlugin.tsx b/packages/ui/src/common/modals/OnBoardingModal/OnBoardingPlugin.tsx index ca4ea3b01e..baf573bca0 100644 --- a/packages/ui/src/common/modals/OnBoardingModal/OnBoardingPlugin.tsx +++ b/packages/ui/src/common/modals/OnBoardingModal/OnBoardingPlugin.tsx @@ -54,8 +54,8 @@ export const OnBoardingPlugin = () => { Extension is blocking Pioneer from access - Change the settings of the wallet browser plugin to allow it access to dao.joystream.org and reload the - page + Change the settings of the wallet browser plugin to allow it access to {window.location.host} and reload + the page )}