Skip to content

thales-markets/thales-dapp

Repository files navigation

Thales

Discord Twitter Follow

A dApp enabling novel on-chain, permissionless, and non-custodial Parimutuel Markets.

The trading UI is available on thalesmarket.io.

Tech stack

  • React
  • React Redux
  • React Query
  • react-i18next
  • styled-components
  • Material UI
  • Recharts

Ethereum stack

  • ethers.js v5 - Ethereum wallet implementation.
  • RainbowKit and wagmi - for ethereum wallet connectivity.
  • thales-data - for historical data (powered by TheGraph)

Development

Install dependencies

npm i

Set up environment variables

Copy the .env.local.example file in this directory to .env.local (which will be ignored by Git): Then, open .env.local and add the missing environment variables:

  • REACT_APP_INFURA_PROJECT_ID - Infura project id (get it from infura.io).
  • REACT_APP_IPFS_DEPLOYMENT - Is dApp in the mode for deployment on IPFS. Set to false.
  • REACT_APP_BUNGEE_API_KEY - Bungee API key.
  • REACT_APP_WALLET_CONNECT_PROJECT_ID - WalletConnect project id (get it from WalletConnect Cloud).

Set up Google Translate API

This step is needed only if you wish to contribute to the project.

On every commit a pre-commit hook is triggered to translate missing values from the en.json located in src/i18n.

In order for this to work a Google Cloud account is needed and a system environment variable needs to be set pointing to a locally stored json provided by Google.

Full Guide: https://github.com/googleapis/nodejs-translate#before-you-begin

The translation script is located in check_translations.js.example. Create a new file called check_translations.js identical to check_translations.js.example and set the projectId variable to the project id provided by Google.

Run

npm run start

Runs the app in the development mode. Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits. You will also see any lint errors in the console.

Build

npm run build

Builds the app for production to the build folder. It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes. Your app is ready to be deployed!