@realtoken/realt-commons

Links

• RealT-commons 🧰
  • Stack
  • Technologies used
    • React
    • Typescript
    • Mantine
    • web3-react
    • Jotai
    • Eslint and Prettier
    • dotenv
• How does it works ?
• How to use it ?
  • How install the package ?
  • How to build the package ?
  • How to use package localy ?
  • Handle translation
• Contributing

RealT-commons 🧰

RealT-interface-commons is a toolkit designs to help realt's community devs to create unified interfaces. This toolkit is base

Some cool features:

• Web3 wallet connection modal
• Header and Footer
• Filtering hook

Stack

This toolkit has strong dependency with react and mantine.

But you are free to use any web framework you want: Next.js, Gatsby, Express, React routing, etc...

Technologies used

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...

Jotai

Jotai is a small state manager.

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.

How does it works ?

To build the library and be able to publish it to npm we need to bundle it: create a unique file containing everything (components, hooks, utils, etc...).
Tools used to bundle are called bundlers and there are a lot. We decided to used rollup through vite.js library mode.

How to use it ?

How install the package ?

# With npm
npm i @realtoken/realt-commons

# With yarn
yarn add @realtoken/realt-commons

How to build the package ?

npm run build
# or
yarn build

Now you will have a dist folder in your root folder, containing bundle files:

• realt-commons.js -> bundle file in common js format.
• realt-commons.umd.js -> bundle file in umd format.

and declarations files (*.d.ts).

How to use package localy ?

Maybe you want to use this package localy. For this:

# NPM
npm i 'PATH_TO_PACKAGE'

# YARN
yarn add 'PATH_TO_PACKAGE'

For example, in example website we used:

yarn add ../../packages/realt-commons

Handle translation

(checker ) MantineProviders

Contributing