Coder Social home page Coder Social logo

loopringsecondary / loopr Goto Github PK

View Code? Open in Web Editor NEW
43.0 43.0 23.0 43.95 MB

Loopr is a web based Ethereum wallet with Loopring DEX integrated.

Home Page: https://loopring.github.io/loopr

License: Apache License 2.0

JavaScript 27.17% HTML 68.39% CSS 4.44%

loopr's People

Contributors

dong77 avatar dyfvicture avatar hzbdesigner avatar kongliangzhong avatar lyddream avatar mattnguyen avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

loopr's Issues

npm start无响应

administratordeMacBook-Air:loopr2 administrator$ npm start

@ start /Users/administrator/Downloads/loopr2
roadhog server

Unexpected token export

npm run start fails

Getting

./node_modules/react-redux/es/components/connectAdvanced.js
Module not found: Can't resolve '@babel/runtime/helpers/esm/assertThisInitialized' in '/home/drd/Documents/Repositories/loopr/node_modules/react-redux/es/components'

Tried installing the react-redux package but that didn't seem to do anything.

UX Suggestion

UX问题和困惑

信息困惑有哪些?

  • lrcFee
  • marginSpilit分润
  • 订单 Gas

流程困惑有哪些?

  • transfer again
  • convert again
  • 每一个modal的提交和取消(关闭之后)的页面跳转
  • 每一个form提交之后的,结果反馈

操作便捷性问题

  • 回车直接提交

其他

  • todo

fay的疑问

  • 面向的用户
    • 1%的用户,可能知道去中心化交易,但是不知道去中心化的交易所的原理和概念
    • WETH , LRC Fee, 分润,ttl, OrderGas
  • 进入首页:不知道这个产品是什么?能解决我什么问题?有什么优势?
    • 是产品还是交易所?准备给用户传达什么?
    • 建议:对标用户熟悉的交易所,描述
  • 进入交易页:不知道这个页面是干什么的,不知道我能做什么?
    • markets list 隐藏很深
    • 三个交易所的信息:用户不知道那些是什么的?需要猜?需要展示 币安
      • 多个交易所的信息的信息 蓝色和白色,被设计区分开来,以为不是一个东西
    • 两个 form 太大,占据太多区块,同时
  • 备份的提示:版式很难看
  • WETH

UX文案优化及规范

所有的UX文案,都按照统一规范进行填写

成功:

  • title:
  • desicription:

error

  • title
  • desicription:

warning

  • title
  • desicription:

Doesnt install on node 10 or 11

Maybe this shouild be documented somewhere, but npm install doesn't work on Node 10 or 11. I've tried testing on Node 8 and that seems to have worked.

一些loopr2细节建议

qq20180322-162839
1、这个“高级选项”是不是对普通用户有点太难理解了,建议在“Lrc 手续费”和“分润比例”旁边加一个问号图标,鼠标滑上去会弹出相关解释,解释设置与不设置的区别,还有这两个输入框应该有一个范围参考值。
2、“有效时间”选中后只是边框变色不够明显,建议改为按钮背景蓝色,按钮文字白色
3、首页(/home)中间就一行文字,背景纯白色,感觉挺空的,如果能加个关于区块链的背景图就好了
4、投资组合页面(/wallet/portfolio),饼图padding-top: 5rem !important看起来挺不协调的,改成2rem,上下协调,刚刚好
5、"高级选项"里面的输入框,鼠标滑过也应该有边框变色反馈,不一定要获取焦点后才有,同时选择数量那个滑动条左边的小圆点也应该有颜色,参考okex

Design & Operation issues

设计相关问题

哪些设计资源缺失

  • 部分 coin icon 缺失
  • coin 的配色缺失
  • 钱包首页需要优化甚至重新设计。目前的首页太简单了(需要和文案人员一起完成)

哪些页面需要优化

  • todo

运营相关问题

  • 钱包首页
  • 钱包文案
  • 钱包使用帮助手册

我在电脑上跑起来看了下

相对1.0版,还是挺不错的,不过似乎对手机很不友好,哈哈
问题:
1、http://localhost:8000/#/market 页面行高太大,超级浪费空间
2、首页同样要处理行距问题,币种图标小了一码不够清晰,首页字体太大
3、logo无论是1.0版 还是2.0版似乎从来没有完整显示过,最后那个x 被吃了一半,呵呵
4、首页左边的币种,能固定显示一定数量么?参考okex,其余的用鼠标滚动吧
5、整体页面的字体大小,行高不太合理,参考okex,很舒服

backend issues

transaction

  • transaction 不正常,导致 transfer,convert 等tx功能无法正常运行
  • 订单相关的transactions,例如 sell,buy,cancelOrder,cancelAllOrders 等等
  • socket 推送 transaction 最新的确认的块数
  • convert transaction 的方向,例如 Convert ETH To WETH 或者 Convert WETH TO ETH

tickers

  • 整点时 ticker 数据清0

portfolio

  • 数据为空的时候,每次返回的token的顺序不一致

socket

  • 需要批量获取 token 的余额订单使用状态

global error handler

遇到的问题

  • 服务器 http正常(返回了数据),返回的数据结果不正确,但是res.error 为空,没有触发 api 层的报错,导致使用数据的具体业务报错
    结果
  • 开发环境下:直接redbox 报错
  • 在下环境下:刷新直接空白
    临时解决方案
  • 对res.data做判断
    彻底解决方案
  • 全局异常捕捉

frontend issues

To Discuss

  • Conver amount
  • portfoilo enhancement
  • transaction type & display

UX

  • advanced page
  • @dyfvicture 所有 modals 的关闭和确认,之后的页面的跳转是否 正确?
    • 已解决-解锁成功的跳转,遵循从哪里来,回哪里去的原则
    • 例如 transfer 成功 or 失败之后 result
    • 例如 convert 成功 or 失败之后 result
    • 例如 placeOrder 成功 or 失败之后 result
    • 例如 cancel order 之后的跳转和显示:用户需要停留在当前页面,但是需要知道order 正在取消中。

Functional Issues

Features

  • add custom token:修改token配置文,token余额加载,token transaction 提示
  • @lyddream Trade: order not enough display
  • price formatter for all price display:尽量避免 tofix, priceFormatter ,amountFormatter

Test & Bugs & Features

  • fixed: ticker popover render
  • orders list locales change
  • my open orders init with market
  • balance socket render
  • trend display red or green
  • tradefrom, orderlist ,transaction list forceUpdate when unlocker

Others

  • other: responsive

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.