Skip to content
This repository was archived by the owner on Apr 23, 2024. It is now read-only.

Commit 2dbcff8

Browse files
welladamIsabellePinheiro
welladam
and
IsabellePinheiro
authored
Add frontend part to Startbridge project (#94)
* feat: add react typescript project * feat: change button component * refactor: change css variables file * feat: add click event * refactor: remove storybook * feat: Create typography components * chore: Remove border colors * styles: Remove styles folder * feat: Create header * feat: add react-modal lib * feat: change button style * feat: create modal component * feat: create sign transaction modal component * feat: change css variables files * refactor: update incorrect text * feat: Add route to logo * feat: Set buttons initial state * feat: Create input component * feat: Styling input component * styles: Update input behavior * chore: Add abstraction to set icon and label * chore: Replace label for typography component * feat: Create form component * chore: Remove unused code snipet * chore: Replace any for FieldValues * refactor: change currency enum * feat: create home template * feat: Create currency logic * chore: Update const names * feat: create wallet connect interface * feat: use wallet connect in page/template * feat: add docker files Co-authored-by: IsabellePinheiro <[email protected]>
1 parent a411967 commit 2dbcff8

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

88 files changed

+17655
-0
lines changed

‎.DS_Store

6 KB
Binary file not shown.

‎react-web/.dockerignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node_modules

‎react-web/.eslintrc

+79
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
{
2+
"root": true,
3+
"parser": "@typescript-eslint/parser",
4+
"parserOptions": {
5+
"project": "./tsconfig.json"
6+
},
7+
"env": {
8+
"browser": true,
9+
"es2021": true,
10+
"jest": true
11+
},
12+
"plugins": [
13+
"@typescript-eslint",
14+
"react-hooks",
15+
"jest",
16+
"jest-dom",
17+
"testing-library"
18+
],
19+
"extends": [
20+
"eslint:recommended",
21+
"plugin:@typescript-eslint/eslint-recommended",
22+
"plugin:@typescript-eslint/recommended",
23+
"plugin:react-hooks/recommended",
24+
"plugin:jest-dom/recommended",
25+
"plugin:testing-library/react",
26+
"plugin:jest/recommended"
27+
],
28+
"rules": {
29+
"no-console": "warn",
30+
"no-return-await": "error",
31+
"no-empty-function": "error",
32+
"@typescript-eslint/no-unused-vars": "warn",
33+
"@typescript-eslint/array-type": "error",
34+
"@typescript-eslint/no-explicit-any": [
35+
"error",
36+
{
37+
"ignoreRestArgs": true
38+
}
39+
],
40+
"@typescript-eslint/explicit-function-return-type": [
41+
"error",
42+
{ "allowHigherOrderFunctions": true }
43+
],
44+
"@typescript-eslint/typedef": [
45+
"error",
46+
{
47+
"parameter": true,
48+
"propertyDeclaration": true
49+
}
50+
],
51+
"@typescript-eslint/consistent-indexed-object-style": ["error", "record"],
52+
"@typescript-eslint/naming-convention": [
53+
"error",
54+
{
55+
"selector": "variable",
56+
"format": ["camelCase", "PascalCase"],
57+
"types": ["function"]
58+
},
59+
{
60+
"selector": "variable",
61+
"format": ["camelCase", "UPPER_CASE"],
62+
"types": ["string", "number", "boolean", "array"]
63+
},
64+
{
65+
"selector": "function",
66+
"format": ["camelCase"]
67+
},
68+
{
69+
"selector": ["typeLike"],
70+
"format": ["PascalCase"]
71+
},
72+
{
73+
"selector": "interface",
74+
"format": ["PascalCase"],
75+
"prefix": ["I"]
76+
}
77+
]
78+
}
79+
}

‎react-web/.github/PULL_REQUEST_TEMPLATE/bug_pull_request_template.md

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
# <<task_name>>
2+
3+
## Bug description
4+
5+
Clearly and consisely describe the problem.
6+
7+
## Root cause
8+
9+
Briefly describe the root cause and the analysis of the problem.
10+
11+
## Output screenshots (if applicable)
12+
13+
Post the output screenshots, if an UI is affected or added due to this bug fix.
14+
15+
## Solution description (optional)
16+
17+
Describe your code changes in detail to reviewers. Explain the technical solution you have provided and how it fixes the issue card.
18+
19+
## Task ID
20+
21+
* [XXX-999](https://cheesecakelabs.atlassian.net/browse/XXX-999)

‎react-web/.github/PULL_REQUEST_TEMPLATE/general_pull_request_template.md

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
# <<task_name>>
2+
3+
## Description
4+
5+
Clearly and consisely describe the task.
6+
7+
## What was implemented?
8+
9+
Describe the result of the task implementation.
10+
11+
## Output screenshots (if applicable)
12+
13+
Post the output screenshots, how an UI is affected or added due to this implementation.
14+
15+
## Solution description (optional)
16+
17+
Describe your code changes in detail to reviewers.
18+
19+
## Task ID
20+
21+
* [XXX-999](https://cheesecakelabs.atlassian.net/browse/XXX-999)

‎react-web/.github/workflows/react-typescript-code-quality.yml

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
name: "React Typescript Code Quality Check"
2+
on:
3+
pull_request:
4+
types:
5+
- synchronize
6+
- opened
7+
paths:
8+
- react-typescript/**
9+
defaults:
10+
run:
11+
working-directory: react-typescript
12+
jobs:
13+
test:
14+
name: 'Test'
15+
runs-on: ubuntu-latest
16+
steps:
17+
- uses: actions/checkout@v2
18+
- uses: actions/setup-node@v2
19+
with:
20+
node-version: ${{ matrix.node-version }}
21+
cache: 'npm'
22+
cache-dependency-path: "./react-typescript/package-lock.json"
23+
- run: npm ci
24+
- run: make coverage-test
25+
- uses: codecov/codecov-action@v2
26+
with:
27+
token: ${{ secrets.CODECOV_TOKEN }}
28+
fail_ci_if_error: true
29+
verbose: true
30+
eslint:
31+
name: "Eslint"
32+
runs-on: ubuntu-latest
33+
steps:
34+
- uses: actions/checkout@v2
35+
- uses: actions/setup-node@v2
36+
with:
37+
node-version: ${{ matrix.node-version }}
38+
cache: 'npm'
39+
cache-dependency-path: "./react-typescript/package-lock.json"
40+
- uses: reviewdog/action-eslint@v1
41+
with:
42+
level: "info"
43+
workdir: 'react-typescript'

‎react-web/.gitignore

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
8+
# testing
9+
/coverage
10+
11+
# production
12+
/build
13+
storybook-static/
14+
15+
# misc
16+
.DS_Store
17+
.env.local
18+
.env.development.local
19+
.env.test.local
20+
.env.production.local
21+
22+
npm-debug.log*
23+
yarn-debug.log*
24+
yarn-error.log*

‎react-web/.prettierrc

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"semi": false,
3+
"singleQuote": true,
4+
"arrowParens": "avoid",
5+
"bracketSpacing": true,
6+
"jsxBracketSameLine": false,
7+
"importOrder": ["react", "<THIRD_PARTY_MODULES>", "components/*", "app/*|config/*|interfaces/*|stories/*", "^[./]"],
8+
"importOrderSeparation": true
9+
}

‎react-web/Dockerfile

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
FROM node:13-alpine
2+
3+
WORKDIR /app
4+
5+
ENV PATH /app/node_modules/.bin:$PATH
6+
7+
COPY package.json /app/package.json
8+
RUN npm install --silent
9+
10+
CMD ["npm", "start"]

‎react-web/Makefile

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
#!make
2+
3+
4+
help:
5+
@echo "Usage: make [build|start|start_dev|test|lint|format_code"
6+
@echo ""
7+
@echo "Usage:"
8+
@echo " make build Builds the frontend for production and copies it to the dist folder"
9+
@echo " make start Starts the frontend in production mode"
10+
@echo " make start_dev Starts the frontend in development mode"
11+
@echo " make test Runs the frontend tests"
12+
@echo " make coverage-test Run tests on the project and generates a coverage report."
13+
@echo " make lint Runs the frontend linter"
14+
@echo " make format_code Formats the frontend code with prettier and fix the code style"
15+
@echo ""
16+
17+
setup: package.json
18+
npm install
19+
20+
build: setup
21+
npm run build
22+
23+
start: setup
24+
npm run start
25+
26+
start_dev: setup
27+
npm run start:dev
28+
29+
test: setup
30+
npm run test
31+
32+
coverage-test: setup
33+
npm run test -- --coverage
34+
35+
lint: setup
36+
npm run lint
37+
38+
format-code: setup
39+
npm run prettier

‎react-web/README.md

+63
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
# starbridge-client
2+
3+
This project was bootstrapped with [Create React App](https://create-react-app.dev/) using the [Typescript template](https://github.com/facebook/create-react-app/tree/master/packages/cra-template-typescript).
4+
5+
## Project Architecture
6+
7+
You can check the project architecture [here](./src/docs/ARCHITECTURE.md)
8+
9+
## Requirements
10+
11+
- [NodeJS 14+](https://nodejs.org/en/)
12+
- [NPM 6.14+](https://www.npmjs.com/)
13+
14+
> We suggest use of [NVM](https://github.com/nvm-sh/nvm/blob/master/README.md) to manage your node versions.
15+
16+
## Getting Started
17+
18+
### Env vars config
19+
20+
The environment variables are in `src/config`. You can use the `.env.example` as a base to create your `.env.local`
21+
config file
22+
23+
### Install dependencies
24+
25+
```shell
26+
npm install
27+
```
28+
29+
### Running in development environment
30+
31+
```shell
32+
npm run start:dev
33+
```
34+
35+
The project will be running at [http://localhost:3000/](http://localhost:3000/)
36+
37+
### Running tests
38+
39+
- We use the [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/) to develop our tests.
40+
- You can use the [MSW](https://mswjs.io/) to mock your request to do integration tests in your pages.
41+
- An example is available at `src/tests/request_mocks`
42+
43+
```shell
44+
npm run test
45+
```
46+
47+
### Creating a production build
48+
49+
The following command will generate an optimized production build. The statics files will be generated at `build/` folder.
50+
51+
```shell
52+
npm run build
53+
```
54+
55+
You can read more about how to serve the statics [here](https://create-react-app.dev/docs/deployment/)
56+
57+
## Scripts
58+
59+
In the project directory, you can run all of [react-scripts](https://create-react-app.dev/docs/available-scripts) commands.
60+
61+
## Learn More
62+
63+
To learn React, check out the [React documentation](https://reactjs.org/).

‎react-web/docker-compose.yml

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
version: '3.7'
2+
services:
3+
app:
4+
container_name: starbridge-front
5+
build:
6+
context: .
7+
dockerfile: Dockerfile
8+
volumes:
9+
- '.:/app'
10+
- '/app/node_modules'
11+
ports:
12+
- '3001:3000'
13+
environment:
14+
- NODE_ENV=development

0 commit comments

Comments
 (0)