您的位置:网站首页 > DAO/DAPP钱包软件 > 正 文 比特币

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

【作者:网文】 来源:转载 日期:2022-3-28 8:10:26 人气: 标签: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 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-app
npm 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


  • 运行一个模拟服务器获取一些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

返回顶部】【关闭窗口 风险提示:本站分享转载的信息均来自互联网,且仅供阅读参考,不作为具体投资的依据,据此入市,风险自担。本站所有内容涉及到的“货币”字眼需谨慎研判,我们维护各国法币的合法地位,同时数字资产具有货币的某些属性,目前是不能替代任何国家的法定货币的,请谨慎理解投资并严格遵守各国法律法规!详见本站[免责声明]。】
【读完这篇文章后,可否发表您的感受?】
0
0
0
0
0
0
0
0
本文网址:
安全联盟站长平台 互联网举办平台 公共信息安全网监 中国网安 赛门铁克安全响应中心