project-serum
/
serum-dex-ui
mirror of https://github.com/project-serum/serum-dex-ui.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
197 Commits 18 Branches 0 Tags 126 MiB
TypeScript 83.2%
JavaScript 15.4%
HTML 1%
Less 0.3%
CSS 0.1%
Go to file
Nathaniel Parke 63c59f3e2e Fixes 2021-04-30 18:20:41 +08:00
public Update TradingView instructions (#58) 2021-02-03 07:21:57 +08:00
src Fixes 2021-04-30 18:20:41 +08:00
.env.example Setup to migrate from wrapped Sollet USDT to Native USDT (#66) 2021-03-19 12:58:11 +08:00
.gitignore Setup to migrate from wrapped Sollet USDT to Native USDT (#66) 2021-03-19 12:58:11 +08:00
.travis.yml Set up travis 2020-11-01 09:17:21 -08:00
LICENSE Initial commit 2020-08-28 07:29:28 +08:00
README.md Update TradingView instructions (#58) 2021-02-03 07:21:57 +08:00
craco.config.js Initial commit 2020-08-28 07:29:28 +08:00
package.json fix: market selector non unique key issue 2021-04-22 00:36:17 +08:00
tsconfig.json Fix tv build (#53) 2020-12-04 15:38:35 +08:00
yarn.lock fix: market selector non unique key issue 2021-04-22 00:36:17 +08:00

README.md

Serum DEX UI

An implementation of a UI for the Serum DEX.

Running the UI

Run yarn to install dependencies, then run yarn start to start a development server or yarn build to create a production build that can be served by a static file server.

Collect referral fees

If you are hosting a public UI using this codebase, you can collect referral fees when your users trade through your site.

To do so, set the REACT_APP_USDT_REFERRAL_FEES_ADDRESS and REACT_APP_USDC_REFERRAL_FEES_ADDRESS environment variables to the addresses of your USDT and USDC SPL token accounts.

You may want to put these in local environment files (e.g. .env.development.local, .env.production.local). See the documentation on environment variables for more information.

NOTE: remember to re-build your app before deploying for your referral addresses to be reflected.

Add Trading View charts

It is possible to add OHLCV candles built from on chain data using Bonfida's API. Here is how to do it:

  1. Get access to the TradingView Charting Library repository. This is a private repository and it will return a 404 if you don't have access to it. To get access to the repository please refer to TradingView's website

  2. Once you have access to the Charting Library repository:

  1. Import TVChartContainer from /src/components/TradingView and add it to your TradePage.tsx. The TradingView widget will work out of the box using Bonfida's datafeed.

  2. Remove the following from the tsconfig.json

"./src/components/TradingView/index.tsx"
  1. Uncomment the following in public/index.html
<script src="%PUBLIC_URL%/datafeeds/udf/dist/polyfills.js"></script>
<script src="%PUBLIC_URL%/datafeeds/udf/dist/bundle.js">

See the Create React App documentation for other commands and options.

See A technical introduction to the Serum DEX to learn more about the Serum DEX.

See serum-js for DEX client-side code. Serum DEX UI uses this library.

See sol-wallet-adapter for an explanation of how the Serum DEX UI interacts with wallet services to sign and send requests to the Serum DEX.

See spl-token-wallet for an implementation of such a wallet, live at sollet.io.