# coinlist-frontend

> New CoinList Frontend

Latest version **0.2.0** (published 2024-04-16) · 0 weekly downloads

## Install

```sh
npm install coinlist-frontend
pnpm add coinlist-frontend
yarn add coinlist-frontend
bun add coinlist-frontend
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.0 |
| Published | 2024-04-16 |
| First published | 2024-04-16 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 56 |
| Unpacked size | 7 MB |
| Known vulnerabilities | 0 (+19 in 4 direct dependencies) |
| Install scripts | no |
| Maintainers | vinodhini_ak |

## Links

- npm: https://www.npmjs.com/package/coinlist-frontend
- npm.io page: https://npm.io/package/coinlist-frontend

## Dependencies (56)

- [swr](https://npm.io/package/swr.md) ^1.3.0
- [next](https://npm.io/package/next.md) 12.2.5
- [pino](https://npm.io/package/pino.md) ^8.6.1
- [sass](https://npm.io/package/sass.md) ^1.62.1
- [uuid](https://npm.io/package/uuid.md) ^9.0.0
- [axios](https://npm.io/package/axios.md) ^1.6.0
- [dayjs](https://npm.io/package/dayjs.md) ^1.11.7
- [micro](https://npm.io/package/micro.md) ^9.4.1
- [react](https://npm.io/package/react.md) 18.2.0
- [apollo](https://npm.io/package/apollo.md) ^2.34.0
- [graphql](https://npm.io/package/graphql.md) ^16.8.1
- [@mui/lab](https://npm.io/package/@mui/lab.md) ^5.0.0-alpha.124
- [chart.js](https://npm.io/package/chart.js.md) ^3.9.1
- [recharts](https://npm.io/package/recharts.md) 2.2.0
- [react-dom](https://npm.io/package/react-dom.md) 18.2.0
- [react-use](https://npm.io/package/react-use.md) ^17.4.0
- [@mui/styles](https://npm.io/package/@mui/styles.md) ^5.11.13
- [graphql-tag](https://npm.io/package/graphql-tag.md) ^2.12.6
- [lorem-ipsum](https://npm.io/package/lorem-ipsum.md) ^2.0.8
- [pino-pretty](https://npm.io/package/pino-pretty.md) ^9.1.1
- [react-icons](https://npm.io/package/react-icons.md) ^4.7.1
- [cookies-next](https://npm.io/package/cookies-next.md) ^2.1.1
- [iron-session](https://npm.io/package/iron-session.md) ^6.1.3
- [next-i18next](https://npm.io/package/next-i18next.md) ^12.0.0
- [qrcode.react](https://npm.io/package/qrcode.react.md) ^3.1.0
- [type-graphql](https://npm.io/package/type-graphql.md) ^1.1.1
- [@mui/material](https://npm.io/package/@mui/material.md) ^5.11.14
- [framer-motion](https://npm.io/package/framer-motion.md) ^8.1.5
- [react-disable](https://npm.io/package/react-disable.md) ^0.1.1
- [@apollo/client](https://npm.io/package/@apollo/client.md) ^3.7.4
- [@apollo/server](https://npm.io/package/@apollo/server.md) ^4.9.3
- [@emotion/react](https://npm.io/package/@emotion/react.md) ^11.10.4
- [@types/graphql](https://npm.io/package/@types/graphql.md) ^14.5.0
- [countries-list](https://npm.io/package/countries-list.md) ^2.6.1
- [json-templates](https://npm.io/package/json-templates.md) ^4.2.0
- [react-markdown](https://npm.io/package/react-markdown.md) ^8.0.7
- [@emotion/styled](https://npm.io/package/@emotion/styled.md) ^11.10.4
- [class-validator](https://npm.io/package/class-validator.md) ^0.14.0
- [graphql-request](https://npm.io/package/graphql-request.md) ^4.3.0
- [react-chartjs-2](https://npm.io/package/react-chartjs-2.md) ^4.3.1
- [react-hook-form](https://npm.io/package/react-hook-form.md) ^7.43.9
- [@chakra-ui/icons](https://npm.io/package/@chakra-ui/icons.md) ^2.0.9
- [@chakra-ui/react](https://npm.io/package/@chakra-ui/react.md) ^2.4.1
- [reflect-metadata](https://npm.io/package/reflect-metadata.md) ^0.1.13
- [graphql-type-json](https://npm.io/package/graphql-type-json.md) ^0.3.2
- [throttle-debounce](https://npm.io/package/throttle-debounce.md) ^5.0.0
- [@mui/icons-material](https://npm.io/package/@mui/icons-material.md) ^5.11.11
- [apollo-server-micro](https://npm.io/package/apollo-server-micro.md) ^3.10.1
- [react-phone-input-2](https://npm.io/package/react-phone-input-2.md) ^2.15.1
- [cryptocurrency-icons](https://npm.io/package/cryptocurrency-icons.md) ^0.18.1
- [i18next-http-backend](https://npm.io/package/i18next-http-backend.md) ^2.0.1
- [@tanstack/react-query](https://npm.io/package/@tanstack/react-query.md) ^4.14.3
- [@tanstack/react-table](https://npm.io/package/@tanstack/react-table.md) ^8.5.11
- [graphql-codegen-factories](https://npm.io/package/graphql-codegen-factories.md) ^1.0.0
- [react-places-autocomplete](https://npm.io/package/react-places-autocomplete.md) ^7.3.0
- [@types/react-places-autocomplete](https://npm.io/package/@types/react-places-autocomplete.md) ^7.2.9

## Recent versions

- 0.2.0 (latest) — 2024-04-16

## README

# coinlist-frontend

New CoinList Frontend

This is a [Next.js](https://nextjs.org/) project bootstrapped with
[`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).

## Background

This is a work in progress to implement this [engineering design](https://docs.google.com/document/d/1OQ0T_SrSDTWJ_9Rmm_jF53Ur4ayEqO_sRROe3jNUKCU/edit), and this [UX design](https://www.figma.com/file/zNHFMqzxLJWF9WBKnT1Sc2/CoinList-2).

## 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](https://github.com/coinlist/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](https://www.docker.com/products/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
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](#after-running)

### Regenerate container

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

```bash
make reset
```

## Getting Started (Non-Containerized -- _Please Don't_)

<!-- TODO: Should we kill this and make everyone use docker? -->

Recommend using [asdf](https://asdf-vm.com/) for node version manager.

`asdf plugin add nodejs`

`asdf install nodejs`

[Here](https://blog.logrocket.com/manage-node-js-versions-using-asdf/) 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:

```bash
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](https://nextjs.org/docs/api-routes/introduction) 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](https://nextjs.org/docs/api-routes/introduction) 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](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.

You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - 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](https://nextjs.org/docs/advanced-features/i18n-routing).

Read more on next-i18next [here](https://github.com/i18next/next-i18next)
Read more on i18next [here](https://www.i18next.com/)

## 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.graphq`l 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](https://opal.prod.coinlist/resources/4f949cbb-4e4c-4419-95dd-69b91620e17f#overview). 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](https://daily-dev-tips.com/posts/exploring-the-nextjs-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"
}
```

---
_Source: https://npm.io/package/coinlist-frontend · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._