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.

Tech stack

• Next.js
• React
• React Query
• Recoil
• Unstated-next
• Styled-Components
• Immer

Ethereum stack

• ethers.js v5 - Ethereum wallet implementation.
• Rainbowkit - for ethereum wallet onboarding.
• @synthetixio/contracts-interface - for interactions with the Synthetix protocol.
• @synthetixio/queries - for historical data (powered by TheGraph)

Development

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_PORTIS_APP_ID - Portis app id (get it from portis.io)
• NEXT_PUBLIC_BN_ONBOARD_API_KEY - Blocknative Onboard API key (get it from blocknative.com)
• NEXT_PUBLIC_PROVIDER_ID - Specifies the default provider, options are INFURA or BLAST_API

Optional:

• NEXT_PUBLIC_INFURA_PROJECT_ID - Infura project id (get it from infura.io)
• NEXT_PUBLIC_BLASTAPI_PROJECT_ID - Blast API project id (get it from blastapi.io)

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

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

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.

Contact

Join the community on the Kwenta Discord server!