使用 OpenDAX v4 创建自己的加密交易经纪平台

互联网阅读 897 2022-03-21 14:30:00

使用本教程，我们将使用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 create-next-app@latest --ts#or

yarn create next-app --typescript

运行初始脚本后，CLI会提示如下问题:

? What is your project named? >

在输入项目名称并按下Enter键后，就可以开始了!(至少对于基本的NextJS设置来说)。

现在，我们可以通过在命令提示符中运行“npm run dev”(yarn dev)，并在浏览器上打开端口（通常是 localhost:3000）来测试设置是否顺利：

cd my-appnpm run dev# or

yarn dev

我们已经完成了第一步，现在准备安装OpenDAX WEB-SDK。

安装OpenDAX WEB SDK

现在我们的应用程序准备好了，我们可以安装OpenDAX WEB-SDK了。

npm install @openware/opendax-web-sdk@latest

现在，我们已经安装了应用程序和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