dasdaq / dasdaq-web

A decentralized exchange, crowdfunding platform and collaboration community.

Dasdaq

English | Chinese | Japanese

开发文档

Table of Contents

• Get Start
• Code of Contributor
• What is Dasdaq
• Reference

Get Started

yarn # Install Dependency
yarn start # Developer Mode

Code of Contributor

1. 👮‍ Be a good commitizen! Please read conventional commit guide 。

2. 😎 Be a JavaScript hipster! Please use ECMAScript6，as this is 2018 now.

3. ❌ No .then(⛰️)，please use async await!

4. components：for common components，pages：for view components.

What Is Dasdaq

Dasdaq, a.k.a., Decentralized Association of Securities Dealers Automated Quotations, is a decentralized exchange, crowd funding platform and collaboration community.

Reference

• 'Yarn'
• 'React Documents'
• React China Official Documents
• 'Awesome React'

dasdaq-web's Issues

白皮书

Almost Done.
https://docs.google.com/document/d/1y444dVUNmu1f2W28O4c50vzpneuPSO9yd7nc6as-NF4/edit#

用户页面。

参考页面：

• https://github.com/lychees
• https://test.dapdap.io/#/user/0x155207727d603cafea624257d69d6f7a0dd17bf2

搭建账户系统的基本内容

• 账户名
• 密码
• 邮箱
• Bio

绑定钱包 (Detail in Issue #33)

• Ethereum
• Nebulas
• EOS

绑定第三方账户 (未来)

• github
• linkedin

代码在隐秘世界 OL 账户系统的基础上魔改。
基本**，如果用户绑定了很多钱包地址或第三方应用账号，
那么用其中的任意一个钱包签名，都可以替代登陆操作。

显示 应用市场 情况

• 当前市值，K 线图，买卖按钮
• 项目信息
• 代币分布情况
• 参与人员详情
• 对接第一方的应用（水浒、签名、隐秘世界）

应用市场 depends on 法币视图

国际化翻译

翻译

• 英语版 （初步 by Frank）
• 中文版
• 日语版

Make Scatter Loading Great Again

症状

• 直接打开 account/login Scatter 正常加载
• 从其他页面跳转 account/login Scatter 没加载

诊断

scatter 是在网页加载时触发 EventListener 的，
从其他页面跳转到 account/login前已经触发，故无法在 login 页无法通过 addListener 来加载 scatter

目标

• 保证 Scatter 可用性
• 使得 Scatter 在本 Web App 全局可用 （Redux? React Content API?)

显示 法币市场 情况

• 引入图表库 G2
• 获取常见交易对 (例子: BTCUSDT BTCETH...)
• API 对接（cryptomarketcap etc.)

用户中心优化

问题

用户访问用户中心，有 个人信息，修改密码，绑定第三方钱包，绑定第三方账户几个页面。

目前用户中心内的页面切换是基于 state 的 index 来操作，有以下问题：

• 用户一旦刷新页面，又得重新选择页面

• 一个组件类多个方法返回不同页面 JSX，不容易观察

解决方案

• 延伸用户中心页，分拆页面组件为单独的文件

• 用户中心子页面引入 React-Router，用户切换页面即操作路由

Tasks

• 分拆页面组件为单独的文件

• 给 User 引入 React-Router，试图做子路由

渐进式访问体验优化

• Code Splitting, 页面按需异步加载页面组件 (done in commit 572626b)
• Loading Page
• SSR，服务器渲染

网站视觉设计

Header 的设定按钮

Header 的空白空间越来越少了

打算对右侧的功能按钮进行简化

具体

• 有一个 setting 按钮
• 点击按钮弹出 Modal 选单，允许用户设置语言、主题、默认 Crypto

山寨一个 DappRadar App 榜单

数据可以先 Fake 出来

移动端页面适配

钱包签名登录 Integration

登录页

• 显示 Metamask 登录、Scatter 登录

以太坊

• 以太坊 Metamask 钱包验证绑定账户（需对接后端 API，详见 Slack 8.2 上午聊天）
• 以太坊 Metamask 钱包验证登录 （ Metamask 的博文 )
• Detect MetaMask is installed or not, if not, disable the button

EOS

• EOS Scatter 钱包验证绑定账户（需对接后端 API，详见 Slack 8.2 上午聊天）
• EOS Scatter 钱包验证签名登录 (in PR #37 by Frank，需要对接后端)

相关链接

MetaMask 官方博客 Scaling Web3 with SignTypedData

Scatter 入门

Header 的小 bug

问题描述

如果当前屏幕宽度过小，Header Navbar 会变成如图所示

而Navbar 的元素只有第一栏可以点击

目标

• Navbar 屏幕宽度自适应
• 合理适配多宽度

或许可以模仿 Ant Design 官网 做一个适应性 Header Navbar

题外话: 推荐用 Chrome 应用商店的 React 插件来看这个 React App 的 JSX Code 及其组件属性

币币交易

设计

设计 Layout 参考各大交易所（FCoin NewDex Huobi ...) 即可，请自行商订工作范围

行情列表

交易视图

• Basic Layout
• 细节上模仿 (hanwei?)
• 国际化支持 (udspj待定)
• 引入 TradingView 的图表

Data

• Mock 币币交易行情数据

• 编写合约

• 爬合约交易，获得行情数据