Ge0 / realtoken-yam-interface

RealToken YAM interface

RealToken YAM interface

Peer-to-peer RealToken YAM Interface
Realt.co

Report Bug · Request Feature

Table of Contents

1. Roadmap
2. Getting Started
   • Requirements
   • Installation
3. Usage
4. Contributing
5. License
6. Contact
7. Built With Hardhat

Roadmap

• Replicate interface for each offer type to modify modal ❌

  See the open issues for a full list of proposed features (and known issues).

(back to top)

Getting Started

Requirements

Environement

To run the project you will need to set-up a .env file in the root folder:

COMMUNITY_API_KEY=XXXXXXXXXXXX
NEXT_PUBLIC_ENV=XX

To get a COMMUNITY_API_KEY, join the dedicated telegram dev channel then ask for.

The var NEXT_PUBLIC_ENV is used to hide/show some features depending the environement. Only those values are allowed: dev, staging or production. The default value is dev;

Node.js version

📣 Node.js needed version is v18.12.1

Installation

1. Clone the repo

   git clone https://github.com/real-token/realtoken-yam-interface.git

2. Install NPM packages

   yarn

3. Create the env file (instructions here)
4. Start the application in dev mode

   yarn dev

(back to top)

Contributing

The community is welcome to participate in the development of the YAM.

Introduction

All commit's name must follows the conventional commit convention.

⚠️ ALL PR need to be created from staging branch and should requested to be merge into staging branch. Otherwise PR will be refused.

Create a PR (Pull request)

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".

Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Move to staging branch (git checkout staging)
3. Create your Feature Branch (git checkout -b feature/AmazingFeature)
4. Commit your Changes (git commit -m 'Add some AmazingFeature')
5. Push to the Branch (git push origin feature/AmazingFeature)
6. Open a Pull Request

Operation

If you want to improve the YAM there is few things you need to know.

Technologies stack

Node.js

Node.js is a backend technology providing Javascript runtime environment outside server side.

Nextjs

Next.js is a framework used to create full-stack modern web application.

React

React is used to create dynamic interface.

Typescript

Typescript is a top-layer technology used to typed (add boolean, number etc...) types to javascript. It also significantly reduces errors during development.

Mantine

Mantine is the UI development kit we choosed to create the YAM interface. We choose it because Mantine is under intensive developmenent and is opensource. It also perfectly match with React, our front-end framework.

web3-react

Web3-react is a typescript/javascript library used to connect YAM to blockchain through different wallet: Injected (Metamask, Frame, etc...), Coinbase, Wallet-connect, etc...

Redux

Redux is a state manager used to store datas to store data accessible throughout the app.
See state management for more informations.

Jotai

Jotai is a small state manager.
See state management for more informations.

Eslint and Prettier

EsLint and Prettier are too software used to check and clean code, and check for synthax errors into the code.

dotenv

DotEnv is a library used to read environement variable from .env file.

State management

Two state managers are working together inside YAM app: Redux and Jotai.

Redux stores the most heavy datas (offers, properties,etc...) while Jotai will be used to store datas in cookies and small state that need to be shared between 1-2 components and not the whole application.

You can visualize the redux store with the redux dev tool.

Add a new display

At the moment only two displays are available: Table and Grid. But as a community driven projet you are encouraged to add new ones.

If you want to one more you will need:

1. Modify the enum file src/types/Displays.ts, to add a new display declaration.
2. Goto src/components/Display/Display.tsx file:
3. Add your brand new display in availableDisplays Map.

    const availableDisplays = useMemo(() => {
      return new Map<Displays,Display>([
        [Displays.TABLE, {
          display: Displays.TABLE,                // This is the enum key you created before
        title: "Table",                           // This is your display's name
          component: <MarketTable key={"table"}/> // This is your display's component
        }]
      ]);
    },[])```

Then everything is ready to works !

(back to top)

License

Distributed under the MIT License. See LICENSE.txt for more information.

(back to top)

Contact

• Support - @RealTPlatform - [e-mail]
• Testnet version: YAM testnet channel

Project Link: https://github.com/real-token/realtoken-yam-interface

(back to top)