使用 OpenDAX v4 建立自己的加密交易經紀平臺
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229bc08806dcd4bcc86bb06240e1da56036c764686145442763f96b182b0078f782f.jpg)
使用本教程,我們將使用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;
現在有一個佈局和側邊欄。我們可以開始建立自己的經紀交易頁面。
![](https://miro.medium.com/max/1400/1*D99nTF15a3zU0JM1eqqBwA.png)
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
一旦一切就緒並開始執行,我們將能夠看到交易頁面:
![](https://miro.medium.com/max/1400/1*zW4XN9eTgTwtsbWvjhvSxA.png)
OpenDAX 驅動的加密經紀商的預設交易頁面
我們已經啟動了我們的加密經紀業務!
我們將加密經紀公司與流動性網路連線起來並執行,有交易頁面、工具欄和圖表。完全免費和開源啟動
關於
ChinaDeFi– ChinaDeFi.com 是一個研究驅動的DeFi創新組織,同時我們也是區塊鏈開發團隊。每天從全球超過500個優質資訊源的近900篇內容中,尋找思考更具深度、梳理更為系統的內容,以最快的速度同步到中國市場提供決策輔助材料。
Layer 2道友– 歡迎對Layer 2感興趣的區塊鏈技術愛好者、研究分析人與Gavin(微信: chinadefi)聯絡,共同探討Layer 2帶來的落地機遇。敬請關注我們的微信公眾號 “去中心化金融社群” 。
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af983938cd7990609bbb418086e5263fa5eb56101ad623c9900f1a7d171e7f7d84e3294.jpg)
- 資訊:加密貨幣的機構採用現狀
- 資訊:MetaMask的整合為使用者解鎖了去中心化社交
- 警惕:新的以太坊合併 Metamask 網路釣魚!
- 總結:Web3使用者體驗的四個層
- BTC:薩爾瓦多的這一年
- 資訊:2個地址控制著 40% 的以太坊交易
- 比較:以太坊 PoS 和 PoW 安全性
- 以太坊:合併後的一天內,ETHW Core 將繼續進行 ETH PoW 分叉
- SWEAT:乘著合併的風,再一個Move-To-Earn專案的推出
- EIP-3523:半同質代幣介紹
- Coinbase:Celer Bridge攻擊分析
- Uniswap:合併前需要注意的事項
- Composable:XCVM 是如何抽象跨鏈開發者體驗的?
- 基礎:在 Solidity 中探索 ERC20標準
- 以太坊:合併後,對MEV的影響
- 空投:苦等Arbitrum空投的人,都轉向了哪裡?
- 以太坊:合併(Merge)之後還有很多升級(Surge、 Verge、Purge、 Splurge)
- Polygon:去中心化社交媒體是未來?還是不必要的利基?
- Arbitrum:怎麼獲得Arbitrum空投?
- 智慧合約:關於返回動態陣列的問題