使用 OpenDAX v4 建立自己的加密交易經紀平臺

使用本教程，我們將使用OpenDAX WEB SDK從頭建立一個加密交易平臺，並通過交易頁面、工具欄和圖表啟動並執行它。

OpenDAX WEB SDK為標準的WEB介面提供可重用的UI元件，可建立交換平臺應用程式，包括UI元件和小部件。

所有元件都採用簡單、現代的設計，可以原樣使用，也可以用自定義主題進行重新設計。

除了UI元件外，該庫還利用React狀態管理工具(如Providers、Hooks和Utils)連線到用於JavaScript的OpenDAX WEB SDK，並將資料傳遞到UI層，從而簡化了狀態同步，使開發人員可以專注於構建。

生成一個新的應用程式

我們可以建立一個新的ReactJS或NextJS應用程式。對於本教程，我決定使用NextJS。

NextJS vs ReactJS的優點：

• 可以開箱即用地獲得 SSR 和 SSG。
• 我們幾乎可以配置所有內容。
• 更容易維護。
• 比React和CRA更快。

讓我們生成一個NextJS應用程式。

npx [email protected] --ts#
or
yarn create next-app --typescript

執行初始指令碼後，CLI會提示如下問題:

? What is your project named? >

在輸入專案名稱並按下Enter鍵後，就可以開始了!(至少對於基本的NextJS設定來說)。

現在，我們可以通過在命令提示符中執行“npm run dev”(yarn dev)，並在瀏覽器上開啟埠（通常是 localhost:3000）來測試設定是否順利：

cd my-app
npm run dev
# or
yarn dev

我們已經完成了第一步，現在準備安裝OpenDAX WEB-SDK。

安裝OpenDAX WEB SDK

現在我們的應用程式準備好了，我們可以安裝OpenDAX WEB-SDK了

npm install @openware/[email protected]

現在，我們已經安裝了應用程式和OpenDAX WEB SDK。讓我們構建我們的應用程式。

新增CoreProvider

讓我們在程式碼編輯器中開啟專案資料夾(我推薦VSCode)。

CoreProvider是構建應用程式的根提供程式。

按照以下步驟新增CoreProvider：

1. 開啟編輯器：pages/_app.tsx

├── pages
│ ├── _app.tsx
│ ├── api
│ │ └── hello.ts
│ └── index.tsx

2. 下面是_app.tsx.2中的程式碼。

import '../styles/globals.css'
import type { AppProps } from 'next/app'
import { CoreProvider } from '@openware/opendax-web-sdk'
​
function MyApp({ Component, pageProps }: AppProps) {
  return (
    <CoreProvider>
      <Component {…pageProps} />
    </CoreProvider>
  );
}
​
export default MyApp

現在我們已經設定了所有的提供程式，讓我們建立一些佈局和導航欄。

添加布局

對於佈局，我們有兩個選擇。可以使用OpenDAX WEB SDK中的佈局，它已經包含了側邊欄(導航)，或者也可以建立一個新的側邊欄。

在本教程中，我們將使用OpenDAX WEB SDK中的佈局

一開始，我們需要匯入樣式。

1. 更新_app.tsx中的程式碼：

import '../styles/globals.css'
import '@openware/opendax-web-sdk/index.css'
import type { AppProps } from 'next/app'
import { CoreProvider } from '@openware/opendax-web-sdk'
​
function MyApp({ Component, pageProps }: AppProps) {
  return (
    <CoreProvider>
      <Component {…pageProps} />
    </CoreProvider>
  );
}
​
export default MyApp

讓我們匯入佈局。

對於Layout元件，我們需要傳送側邊欄道具。

2. 下面是在_app.tsx中編寫的程式碼：

import "../styles/globals.css";
import "@openware/opendax-web-sdk/index.css";
import React, { useState } from "react";
import type { AppProps } from "next/app";
import {
  CoreProvider,
  Layout,
  SidebarProps,
  AccountButtonWidget,
} from "@openware/opendax-web-sdk";
​
function MyApp({ Component, pageProps }: AppProps) {
  const [collapseLeftBar, setCollapseLeftBar] = useState<boolean>(true);
​
  const sidebarProps: SidebarProps = {
     classNames: 'bg-navbar-background-color sm:border-r border-divider-color-20',
     buttonsList: [
       {
         name: "Metamask",
         component: <AccountButtonWidget collapsed={collapseLeftBar} />,
         label: "",
       },
     ],
     onSidebarCollapse: (collapseLeftBar: boolean) => {
       setCollapseLeftBar(collapseLeftBar);
     },
  };
​
  return (
    <CoreProvider>
      <Layout sidebarProps={sidebarProps}>
        <Component {...pageProps} />
      </Layout>
    </CoreProvider>
  );
}
​
export default MyApp;

現在有一個佈局和側邊欄。我們可以開始建立自己的經紀交易頁面。

Next.js 應用歡迎頁面

新增CDN加密圖示

對於加密圖示，我們需要更新我們的 next.config.js 。

module.exports = {
    images: {
        domains: ['cdn.jsdelivr.net']
    },
};

新增交易頁面

在本教程的這一部分中，我們將只新增工具欄和交易圖表。

對於交易頁面，我們需要建立兩個檔案：index.tsx 和 [marketID].tsx。

index.tsx – http://localhost:3001/trade page where we will display loader and fetch data. [marketID].tsx – http://localhost:3001/trade/[marketID]

1. 建立一個新頁面

cd pages mkdir trade touch index.tsx touch [marketID].tsx

2. 獲取市場後更新 index.tsx 並新增重定向到交易頁面

import { useAppSelector } from '@openware/opendax-web-sdk'
import { useRouter } from 'next/router'
import { FC, useEffect } from 'react'
​
const Trading: FC = (): JSX.Element | null => {
    const currentMarket = useAppSelector((state) => state.markets.currentMarket)
    const router = useRouter()
​
    useEffect(() => {
        if (currentMarket) {
            router.push(`/trade/${currentMarket.id}`)
        }
    }, [currentMarket])
​
    return <div>Loading...</div>
}
​
export default Trading

3. 為了讓我們的交易圖表執行起來，我們需要從web-sdk中複製charting_library並將其公開:

cp -R node_modules/@openware/opendax-web-sdk/public/* public

4. 更新[marketID] .tsx：

import {
    Toolbar,
    useAppDispatch,
    useAppSelector,
    setCurrentMarket,
} from '@openware/opendax-web-sdk'
import dynamic from 'next/dynamic'
import { useRouter } from 'next/router'
import React, { FC, useEffect } from 'react'
​
const TradingChart = dynamic(() => import('@openware/opendax-web-sdk'), {
    ssr: false,
})
​
const TradeByMarket: FC<{}> = (): JSX.Element => {
    const router = useRouter()
    const { marketID } = router.query
    const markets = useAppSelector((state) => state.markets.markets)
    const currentMarket = useAppSelector((state) => state.markets.currentMarket)
​
    const dispatch = useAppDispatch()
​
    useEffect(() => {
        if (currentMarket && currentMarket.id === marketID) {
            return
        }
​
        if (!marketID) {
            return
        }
​
        const marketIDFromRoute = (marketID as string).toLowerCase()
        const marketFromRoute = markets.find(
            (market) => market.id.toLowerCase() === marketIDFromRoute,
        )
        const [fallbackMarket] = markets
        if (marketFromRoute) {
            dispatch(setCurrentMarket(marketFromRoute || fallbackMarket))
        }
        else {
            fallbackMarket?.id && router.push(`/trading/${fallbackMarket.id}`)
        };
    }, [markets, marketID])
​
    return (
        <>
            <div style={{height: '56px'}}>
                <Toolbar />
            </div>
            <TradingChart />
        </>
    )
}
​
export default TradeByMarket

5. 執行一個模擬伺服器獲取一些OpenDAX BE資料，如市場、貨幣、kline等。

npm i npm-run-all colors header-case-normalizer js-combinatorics --save-dev
npm explore @openware/opendax-web-sdk -- npm run mockserver

一旦一切就緒並開始執行，我們將能夠看到交易頁面:

OpenDAX 驅動的加密經紀商的預設交易頁面

我們已經啟動了我們的加密經紀業務！

我們將加密經紀公司與流動性網路連線起來並執行，有交易頁面、工具欄和圖表。完全免費和開源啟動

Source： https://medium.com/openware/create-your-own-crypto-trading-brokerage-platform-with-opendax-v4-2b452c90b2b9

關於

ChinaDeFi– ChinaDeFi.com 是一個研究驅動的DeFi創新組織，同時我們也是區塊鏈開發團隊。每天從全球超過500個優質資訊源的近900篇內容中，尋找思考更具深度、梳理更為系統的內容，以最快的速度同步到中國市場提供決策輔助材料。

Layer 2道友– 歡迎對Layer 2感興趣的區塊鏈技術愛好者、研究分析人與Gavin（微信: chinadefi）聯絡，共同探討Layer 2帶來的落地機遇。敬請關注我們的微信公眾號 “去中心化金融社群” 。