Kwenta

A dApp enabling derivatives trading — powered by the Synthetix protocol.

The decentralized trading UI is available at kwenta.eth.limo.

ENS link: kwenta.eth.

The latest IPFS hash can be found under releases.

Contributing

Kwenta welcomes contributors. Regardless of the time you have available, everyone can provide meaningful contributions to the project by submitting bug reports, feature requests or even the smallest of fixes! To submit your contribution, please fork, fix, commit and create a pull-request describing your work in detail. For more details, please have a look at the Contribution guidelines.

Tech stack

• Next.js
• React
• Redux
• Kwenta SDK
• Styled-Components

Ethereum stack

• ethers.js v5 - Ethereum wallet implementation.
• Rainbowkit - for ethereum wallet onboarding.

Development

• Contributing to the Kwenta frontend - Kwenta Code Style Guidelines
• The devDAO - How to contribute

Install dependencies

npm install --legacy-peer-deps

Set up environment variables

Copy the .env.local.example file in this directory to .env.local (which will be ignored by Git):

cp .env.local.example .env.local

Then, open .env.local and add the missing environment variables:

Required:

• NEXT_PUBLIC_PROVIDER_ID - Specifies the default provider, options are INFURA or BLAST_API
• NEXT_PUBLIC_INFURA_PROJECT_ID - Infura project id (get it from infura.io) or
• NEXT_PUBLIC_BLASTAPI_PROJECT_ID - Blast API project id (get it from blastapi.io)
• NEXT_PUBLIC_SOCKET_API_KEY - Socket API key (get it from socket.tech
• NEXT_PUBLIC_SATSUMA_API_KEY - API key for Satsuma subgraph queries
• NEXT_PUBLIC_THEGRAPH_API_KEY - API key for The Graph's decentralized service

Run

npm run dev

Open http://localhost:3000 to view it in the browser.

Build

npm run build
npm start

Unit Testing

npm run test:unit

For unit tests we use a combination of Jest and React Testing Library

Page tests should be added to the __tests__ folder at the root as it is not possible co-locate tests and pages in nextjs. Other tests should be co-located in a __tests__ folder next to their related file.

End-2-End testing

In order to run fully automated end-2-end (e2e) tests Kwenta uses Synpress (a wrapper around Cypress).

Constraints

The current e2e tests are written to be run on Optimistic Kovan using Chrome as the browser.

Setup

• Download and install Google Chrome
• Setup a test wallet on Optimistic Kovan and fund it with plenty of ETH (to pay for gas) and sUSD
• Prior to running the tests you must set the environment variables below in the shell from which npm is started. Unfortunately, at this time other methods to set said environment variables (eg. through .env.local) don't work in conjunction with Synpress.

PRIVATE_KEY=<INSERTPRIVATEKEY>
NETWORK_NAME=OptimisticKovan
RPC_URL=https://kovan.optimism.io
CHAIN_ID=69
BLOCK_EXPLORER=https://kovan-optimistic.etherscan.io
IS_TESTNET=true

Bash convenience script for setting up the environment

A Bash convenience script has been made available here.

• Open bash
• Copy the private key of the test wallet into the file SYNPRESS_PRIVATEKEY into the same folder location as the script. While using this method, please don't forget to update your .gitignore file to prevent your private key to be leaked.
• Run the following command source ./synpress-envsetter.sh

Run the tests

npm run build
npm start
npm run test:e2e:only:tests

Contact

Join the community on the Kwenta Discord server!