Skip to content

🌿 Vyper OTC UI. Application built on Vyper Core protocol

Notifications You must be signed in to change notification settings

FedererKK/vyper-otc-ui

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Vyper Logo

Vyper OTC UI

🌿 Vyper OTC UI. Application built on Vyper Core protocol

node v16.17.0 GitHub issues

Live environments

Netlify Build Description Link
mainnet-prod Netlify Status Mainnet Production otc.vyperprotocol.io
devnet-prod Netlify Status Devnet Production demo.otc.vyperprotocol.io
mainnet-stag Netlify Status Mainnet Staging staging.otc.vyperprotocol.io
devnet-stag Netlify Status Devnet Staging staging.demo.otc.vyperprotocol.io

Getting Started

Use the selected node version

nvm use

Install dependencies

yarn install

Start development server

yarn dev

Create an optmized build

yarn build

NPM Scripts

Script Use
prebuild Clean .next folder
dev Starts the development server
build Creates an optimized production build
export Export the app to static HTML, which can be run standalone without the need of a Node.js server
analyze Visualize and track the production build bundle size
lint Lints src files with Eslint
format Formats src files with prettier
prepare Husky install
storybook Starts the storybook development server
build-storybook Creates the storybook production build

Next.js

This projects uses Next.js. You can check further info regarding the Next.js Docs here

Design principle

This project is using the Atomic Design Methodology. Atomic design thinks of basic fundamental components as atoms (like a Button). Those atomic units bond together to form molecules (like an InputForm), which in turn combine into more complex organisms to ultimately create bigger structures (like a Card).

Then we also have templates, which are, like the names implies, generic layouts for our components. And last but not least pages, which are templates with real content inside.

In our case the section pages, has being moved outside of the components folder, because in Next.js, a page lives inside the pages directory and is associated with a route based on its file name.

Styles & CSS

This project supports CSS Modules alongside regular stylesheets using the [name].module.{css,scss} file naming convention.

There are a couple of points to take into consideration when working with CSS here.

  1. CSS values are derived from styles/base.css globals whenever possible, in order to mantain a concise look.
  2. Color values are fixed as shown in base.css collor palette
  3. Sizes for fonts are following the "divided-by-2" scale
  4. Sizes for spacing are following the "multiplex-of-4" scale
  5. There are some predefined mixins in styles/variables.scss

Storybook

Storybook

Storybook is a visual documentation of the components that are available in the project. So, it's encouraged that for each component that you create or modify, it's better if you also create/update the component's story.

The guideline for creating a component's story is:

  1. The component's story filename should follow this pattern: *.stories.tsx, otherwise it won't be detected by Storybook
  2. The title of the component metadata should follow the path under src, for example <ButtonPill /> is located at src/components/atoms/ButtonPill, then it should be components/atoms/ButonPill
  3. It's encouraged that developers to give a comment above each props of the actual component, the comments will act as the description of the props in Storybook
  4. The best practice for props that have multiple options such as enum is to create multiple stories of the component in order to show different possibilities of how the component will look like with different options.

You can check the current project storybook live here.

About

🌿 Vyper OTC UI. Application built on Vyper Core protocol

Resources

Code of conduct

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 93.1%
  • SCSS 4.4%
  • JavaScript 1.4%
  • Other 1.1%