coinlist-frontend

New CoinList Frontend

This is a Next.js project bootstrapped with create-next-app.

Background

This is a work in progress to implement this engineering design, and this UX design.

Getting Started (Docker -- Recommended)

Prerequisites

• The current setup requires for a bridge network coinlist to be setup for the app to use, ways you can set this up are either
  • Pull and use coinlist nginx-proxy
  • If you don't want to use the proxy for whatever reason then adding a blank network with docker by running docker network create coinlist will allow for you to not setup nginx-proxy
• Install docker desktop please make sure that docker compose version returns something more modern than 2.3
• Ensure 127.0.0.1 coinlist.localhost is a line in your /etc/hosts file
• Run yarn husky:prepare to setup the linter.
• Insert any needed API keys within .env.local

Run development server

Add door keeper application to the compliance on your local

Doorkeeper::Application.create(
  name: "coinlist-frontend",
  redirect_uri: "http://localhost:3000/oauth/callback",
  scopes: "default frontend"
)

NOTE : Currently the graphql endpoint is setup to check for gaming scope and not frontend scope. You can either change the compliance to check for :frontend scope or change the scope of doorker to gaming. Either works.

One more problem you'll run into for now is CORS. Edit cors.rb in compliance to add http://localhost:3000 so that you can access graphql from your localhost server.

To get started you can use the makefile by running

make up

This will build a development container of the application and start to run the server. After the server has started it can be accessed by going to http://new.coinlist.localhost if you're running the coinlist proxy. else you can access the website at http://coinlist.localhost:3000

continue exploring the application here

Regenerate container

If the node dependencies update then the docker container will need to be regenerated. This can be accomplished by running

make reset

Getting Started (Non-Containerized -- Please Don't)

Recommend using asdf for node version manager.

asdf plugin add nodejs

asdf install nodejs

Here is a good blog outlining basic use cases for getting started with asdf and node.

First, install the required dependencies: yarn install

Next, run the development server:

yarn dev

After Running

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.tsx. The page auto-updates as you edit the file.

API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.ts.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

GraphQL

To auto generate code from the embedded server run yarn run codegen.

You can execute your query inside of VSCode

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Cypress e2e tests

To run cypress tests locally run

yarn cypress:run:local

If you want the cypress app to visually see and develop your tests

yarn cypress:open

Translations

Majority of Coinlist users live outside of US. Inorder to provide native experience for them we make translation a first class citizen from day one. How to implement i18next for the component you are building ?

public/locales/ contains the various languages. We default to/fallback to en for now and rest are empty.

Step 1 : Create a file if you need a specific namespace (recommended) for your page. Like mypage.json

Step 2 : Add the key:value pair in there. {"my_name_is": "slim_shady"}

Step 3 : Each page level file requires a serverSideTranslations from next-i18next/serverSideTranslations which does the job of fetching those name space files.

Step 4 : Next js routing provides you the lcoal throught he context of getStaticProps or getServerSideProps

Step 5 : Use the useTranslation from i18n-next, which provides us with t function.

Step 6 : Then use the t{'my_name_is'} to display on the browser.

Step 7 : To test you can force language by going to /two_digit_language_code/my_route, this is automatically taken care by nextjs.

Read more on next-i18next here Read more on i18next here

GraphQL

We currently support 2 ways to query :

• local environment : embedded graphql with mockserver & direct local compliance server
• prod environment : compliance only

Here is the workflow if you are involved in graphql changes :

• did you make a recent compliance type change and expecting it to reflect ?

run bin/get_graphql_schema_from_compliance

This will copy over schema.graphql and schema.json files to graphql/compliance/schema folder. This is what is used to validate your queries and mutations you write on the client.

• you just want to create another query on an existing type ?

run yarn codegen:hooks

This will create the types and react query hooks for you. Note : the get_graphql_schema_from_compliance also runs the same command at the end after copying over the files.

• oh, so you want to use the Altair client ?

To do this against compliance use the below url :

http://coinlist.localhost:19000/graphql

Add headers by clicking on the Set Headers Icon on the left hand side pane. (first one at the time of writing)

x-compliance-graphql-api-secret

Look for the value in the env.development file.

Client on the Settings Icon on the top right corner of the screen and enable this checkbox :

Send requests with credentials (cookies)

Why did do you need this ? This sends the client cookies to the server request on each call. Without it you'll get UnAuthorized errors.

NOW Login to the http://coinlist.localhost:19000/ as Admin or User.

Altair Client

To use the Altair Client, you'll need to set the header X-Compliance-GraphQL-API-Secret with the secret. Retrieve the secret from AWS Secret Manager, following the link from Opal. Additionally you'll need to set Send requests with credentials (cookies) in Altair Client Settings to true.

Bundle Analyzer

yarn run analyze will trigger the NextJS Webpack Bundle Analyzer. Keeping the bundle size as small as possible will help performance.

The analyzer creates a server.html and client.html file. We care mostly about the client side bundle because it impacts browser performance.

Recommended VS Code settings

We recommend having the following in your .vscode/settings.json to perform formatting cleanup + import cleanup actions on saves.

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.organizeImports": true
  },
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}