使用 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:
- 開啟編輯器:pages/_app.tsx
├── pages │ ├── _app.tsx │ ├── api │ │ └── hello.ts │ └── index.tsx
- 下面是_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中的佈局
一開始,我們需要匯入樣式。
- 更新_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元件,我們需要傳送側邊欄道具。
- 下面是在_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]
- 建立一個新頁面
cd pages mkdir trade touch index.tsx touch [marketID].tsx
- 獲取市場後更新 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
- 為了讓我們的交易圖表執行起來,我們需要從web-sdk中複製charting_library並將其公開:
cp -R node_modules/@openware/opendax-web-sdk/public/* public
- 更新[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
- 執行一個模擬伺服器獲取一些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 驅動的加密經紀商的預設交易頁面
我們已經啟動了我們的加密經紀業務!
我們將加密經紀公司與流動性網路連線起來並執行,有交易頁面、工具欄和圖表。完全免費和開源啟動
關於
ChinaDeFi– ChinaDeFi.com 是一個研究驅動的DeFi創新組織,同時我們也是區塊鏈開發團隊。每天從全球超過500個優質資訊源的近900篇內容中,尋找思考更具深度、梳理更為系統的內容,以最快的速度同步到中國市場提供決策輔助材料。
Layer 2道友– 歡迎對Layer 2感興趣的區塊鏈技術愛好者、研究分析人與Gavin(微信: chinadefi)聯絡,共同探討Layer 2帶來的落地機遇。敬請關注我們的微信公眾號 “去中心化金融社群” 。

- 技術:如何設計zkVM電路
- 閒談:3AC到底發生了什麼?
- 聚焦:ZK-SNARK 技術
- 解密 Solidity:新增 PAYABLE 關鍵字真的可以節省 GAS 嗎?
- EUROC:歐元支援的穩定幣
- 資源:在10天內建立區塊鏈知識框架
- Web5:旨在將資料和身份管理權歸還給使用者
- 6月份的ethers.js亮點更新
- Optimism上的AMM:Velodrome的推出和空投細節
- 以太坊合併後,L2是否還有存在的必要?
- 當公鑰和對稱金鑰一起工作時
- 如何計算NFT的稀有度?
- Solidity 智慧合約安全性:防止重入攻擊的 4 種方法
- 被Terra崩盤影響的加密領域
- 這些GitHub 儲存庫可提高Web3技能
- 使用 Solidity 和 Node.js 構建簡單的區塊鏈預言機
- 使用 Truffle for VS Code Extension 建立 Web3 專案
- 使用 Solidity 智慧合約實現 NFT 代幣門控
- 使用荷蘭式拍賣模型以最優惠的價格出售您的 NFT
- ECDSA——比特幣和以太坊的信任基礎設施的核心