Create your own crypto trading brokerage platform with OpenDAX v4
How to create a crypto trading platform from scratch using OpenDAX WEB SDK. Free, customizable, and open-source crypto exchange brokerage connected to global Yellow Network liquidity and aggregated orderbook.
Welcome, everyone! Using this tutorial, we will create a crypto trading platform from scratch using OpenDAX WEB SDK and get it up and running with a trading page, toolbar, and chart.
The OpenDAX WEB SDK supplies reusable UI components for standard web interfaces to create exchange platform applications, including UI components and widgets.
All components come with a simple, modern design and can be used as-is or restyled with a custom theme.
In addition to UI components, the library leverages React state management tools such as Providers, Hooks, and Utils to connect to the OpenDAX WEB SDK for JavaScript and pass data to the UI layer, simplifying state synchronization so that developers can concentrate on building.
1. Generate a new application
You can create a new ReactJS or NextJS application. For this tutorial, I decided to use NextJS.
NextJS vs ReactJS benefits:
- You get SSR and SSG out of the box.
- You can configure almost everything.
- Easier to maintain.
- Faster than React and CRA.
You can learn more about NextJS at https://nextjs.org/
But still, if you do not need SSR you can use ReactJS
Let’s generate a NextJS app.
npx create-next-app@latest --ts# oryarn create next-app --typescript
After you run the initial script, the CLI will prompt you with the following question:
? What is your project named? >After you type in the name of your project and press Enter, you’ll be good to go! (at least for the basic NextJS setup).
You can now test that the setup has gone smoothly by running “npm run dev “ (yarn dev) in your command-prompt and opening the port (usually localhost:3000, on a browser:
cd my-appnpm run dev# oryarn dev
Awesome. Easy as that, we’ve accomplished the first step and are now ready to install OpenDAX WEB-SDK!
2. Install OpenDAX WEB SDK
Now our app is ready, we can install OpenDAX WEB-SDK
npm install @openware/opendax-web-sdk@latestSo, now we have the application and OpenDAX WEB SDK installed. Let’s build our application!
3. Add CoreProvider
Let’s open the project folder in a code editor (I recommend VSCode).
The CoreProvider is the root provider for building an application. It is responsible for rendering out a series of providers.
To add the CoreProvider, follow these steps:
1. Open in the editor: pages/_app.tsx
├── pages│ ├── _app.tsx│ ├── api│ │ └── hello.ts│ └── index.tsx
2. Below is the code in _app.tsx.
Now that we have all providers set let’s create some layout and navigation bar.
4. Add Layout
For layout, we have two options. You can use Layout from OpenDAX WEB SDK, which already includes Sidebar(Navigation), or create a new one.
In this tutorial, we will use the Layout from the OpenDAX WEB SDK
In the beginning, we need to import styles.
1. Update code in _app.tsx:
Let’s import the Layout.
For the Layout component, we will need to send sidebar props.
You can find more info on Sidebar props at: https://web-sdk.openware.com/?path=/docs/components-layout--empty
2. Below is the code to be written in _app.tsx:
Excellent, we have a Layout and Sidebar. We can start building your brokerage trading page!
5. Add CDN crypto icons
For crypto icons, we need to update our next.config.js
6. Add Trading Page
We will add only the Toolbar and Trading chart in this part of the tutorial.
For Trading page, we need to create two files: index.tsx and [marketID].tsx.
index.tsx - `http://localhost:3001/trade` page where we will display loader and fetch data.
[marketID].tsx - `http://localhost:3001/trade/[marketID]`You can find more information about Dynamic Routes at: https://nextjs.org/docs/routing/dynamic-routes
1. Create a new page
cd pages
mkdir trade
touch index.tsx
touch [marketID].tsx2. Update index.tsx and add a redirect to a Trading page after we fetch markets
3. To get your Trading Chart up and running, we need to copy charting_library from web-sdk and put it to the public:
cp -R node_modules/@openware/opendax-web-sdk/public/* public4. Update [marketID].tsx:
5. Run a mock server for fetching some OpenDAX BE data, such as markets, currencies, klines, etc.
npm i npm-run-all colors header-case-normalizer js-combinatorics --save-devnpm explore @openware/opendax-web-sdk -- npm run mockserver
Once everything is up and running, we’ll be able to see the trading page:
Congratulations, you’ve launched your crypto brokerage!
We have the crypto brokerage connected to the liquidity network up and running, with a trading page, toolbar, and chart. Totally free and open-source to boot.
In my following articles, we will customize it and add more elements to UI.
Stay tuned, leave your feedback, and don’t forget to follow Openware for more updates!
[LinkedIn]: https://www.linkedin.com/company/openware-com/
[Youtube]: https://www.youtube.com/channel/UCGrRNy-EpI67ivdAL5z4JIg
[Github]: https://github.com/openware
[My LinkedIn]: https://www.linkedin.com/in/akushniruk/
