ant-design / ant-design-web3

🥳 Efficient react components for building dapps easier | Connect crypto wallets and more Web3 UI components | Web3 icons | Supports Ethereum, Solana, Bitcoin, TON and others.

Home Page:https://web3.ant.design

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

ConnectModal UI Detail Issues Feedback

yutingzhao1991 opened this issue · comments

看了一下 ConnectModal,反馈一些细节, @wenqing993 @LCJove 看看要不要改:

1 Modal 的高度可能会变化,看看是不是尽量避免这样的变化
image

2 普通模式下获取钱包的按钮会不会太明显了,喧宾夺主,通常来说用户进来应该是优先要点左侧钱包

image

简单模式下就挺好,或者以后就推荐简单模式:
image

3 简单模式下文案会被切断,滚动之后可以展示完整,不过这个感觉也还好,可以和问题 1 一起看看。实在不行精简下文案,尽量首屏可以展示完整
image

4 hover 钱包的时候看看要不要高亮对应操作的按钮,比如下面这种情况,点击整个钱包区域的时候其实就是唤起插件,是不是可以在 cover 的时候激活插件按钮,这样用户会有一个预期:
image

类似:
image
同理,二维码的时候也一样:
image

5 一个二维码都没有的时候是不是可以整体靠右,避免出现这样的空白:
image
image

钱包名字要避免折行,这种太长的可以阶段改为 Coinbase Wal... 这样
image

钱包名字要避免折行,这种太长的可以阶段改为 Coinbase Wal... 这样 image

截断后主要要加上 tooltip 展示完整名称。

钱包名字要避免折行,这种太长的可以阶段改为 Coinbase Wal... 这样 image

截断后主要要加上 tooltip 展示完整名称。

嗯,感觉加上个 title 属性就好了,干扰小一点。

  1. 直接去掉 get wallet
  2. 按钮 type

screenshot-Yws8aLHS@2x

image

这里我记得设计稿好像有调整。

image

这里的按钮样式好像有点透明度,这个应该不符合预期,应该是没有这个透明度才对