Code Monkey home page Code Monkey logo

kwenta's Introduction

CodeQL Discord Twitter Follow GitPOAP Badge

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

Development

Install dependencies

pnpm install

Set up environment variables

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

cd packages/app
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
  • NEXT_PUBLIC_DEFAULT_PRICE_SERVICE - Specifies the default price server, options are KWENTA or PYTH
  • NEXT_PUBLIC_SERVICES_PROXY - Specify Kwenta proxy server

Run

cd packages/app
pnpm dev

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

Build

cd packages/app
pnpm build
pnpm start

Unit Testing

cd packages/app
pnpm test:jest

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

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

Contact

Join the community on the Kwenta Discord server!

kwenta's People

Contributors

0xclem avatar 0xjocke avatar 0xlinus avatar 0xwalde avatar 0xwontonsoup avatar abhisheknaiidu avatar andytcf avatar asherism avatar avclarke avatar brossetti1 avatar burtrico avatar dbeal-eth avatar dependabot[bot] avatar drptbl avatar evgenyboxer avatar insulineru avatar jcmonte avatar jwineman avatar kelonye avatar kmeraz avatar kngzhi avatar koredefashokun avatar leifuchen avatar leovct avatar lohba avatar platschi avatar pldespaigne avatar tburm avatar xiaolei-shawn avatar zhyd1997 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

kwenta's Issues

feat: export account history into csv

Subject of the issue

Add an option to account history to export data into a csv file (e.g. with react-csv)

Design (see Figma link)

Deliverables

  • Add header/subtitle according to Figma design
  • Add Export button according to design for both dark and light theme
  • Implement functionality to export csv for selected table (Positions or Trades)

What to export?

Same data as in table, plus:

  • include transaction hash on export as a line item (currently hidden behind click on the trade itself)

chore: add 404 page

Subject of the issue

Add a 404 page to the repository.

Design

https://www.figma.com/file/mcaXc01qAA1si3I8shXkeI/Kwenta?type=design&node-id=3375-5335&mode=design&t=xH2Ke90TB045i0I5-4

Note

With IPFS, we might need to add a dedicated 404 error page

Adding 404 errors
If no file is found, IPFS will search for a file called ipfs-404.html in the requested path. This file can be used for showing 404 errors or redirecting. See the following blog post for more information: https://blog.ipfs.io/2020-06-26-go-ipfs-0-6-0/

Price Feed Error

Subject of the issue

Current Endpoint used for price feed is public - https://xc-mainnet.pyth.network are you planning to add your own node, as most of the time price feed is down?

Your environment

  • Mainnet/Testnet
  • Chrome

Expected behaviour

Should show price feed correctly

Actual behaviour

price feed not working

Steps to reproduce

Tell us how to reproduce this issue.

Trade Panel Enhancements

Kwenta allows traders to apply custom "take profit" (TP) and "stop loss" (SL) conditions to their active and prospective positions.

There are two ways to access this feature:

  1. During the process of opening/closing a position using the order entry panel.
  2. Via a dedicated module when there's an active position.

For visual reference, please view the screenshot.

Task 1

Objective: Provide traders with an exact dollar value representation of their potential profit or loss, in addition to the current percentage display.

Currently: When setting a take profit or stop loss, a percentage amount is displayed for the amount either gained or lost (gained on a limit exit, lost on a stop loss exit). This leaves information to be desired.

Deliverables

  • Integrate a change that shows the dollar amount corresponding to the percentage of profit or loss.

For instance, a 5% loss could reflect as -$1,200 (representing 5% of the position's value), while a 5% gain would appear as +$2,000 (also 5% of the position's value).

For visual guidance, refer to the provided images:
Order Entry Panel Reference
TP/SL Model Reference

Task 2

Objective: Correct the calculation basis for TP/SL percentages when users select prefilled percentages in different states an places within the app.

Currently: When users selects one of the prefilled percentage buttons, the value filled into the box is based on the current market price; this can be inaccurate.

State No 1 - User has an open position

When an open position exists (take profit or stops are being set using the pencil icon), the percentage value and future dollar value (resulting from task 1) are based on the asset's current market price when they should be based on the entry price of the open position.

Deliverables

  • Change the TP/SL logic so values are placed based on the position entry price, not the current market price

State No 2 - User has no open position

When users selects one of the prefilled percentage buttons (for a limit or stop order), the value filled into the box is based on the current market price; which is incorrect. TP/SL orders should be placed against the market price on the market order type, limit price on the limit order type, and stop price on the stop order type.

Deliverables

  • Change the TP/SL percentage button logic for the limit order/stop order tabs to be calculated from user-specified entry prices, not the current market price

Bounty: 200$ USD paid in $OP

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.