feat: add swap token component #893

MarioJames · 2024-05-20T09:26:54Z

新增 token 相关组件，UED 设计如下

在目前实现中实现了两个组件：

只有 Token 选择的 Token.Select 组件，适用于在任何场景中嵌入供用户选择预期的 Token
结合 Token 选择和数量输入的 Token.Output 组件，适用于用户需要选择 Token 并且输入操作数量的场景，同时带有 Token 数量与总价计算与展示功能

vercel · 2024-05-20T09:26:57Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
ant-design-web3	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 29, 2024 2:36pm

changeset-bot · 2024-05-20T09:26:57Z

🦋 Changeset detected

Latest commit: fdcc456

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages

Name	Type
@ant-design/web3	Minor
@example/eth-web3js	Patch
@example/ethers-v5	Patch
@example/ethers	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

github-actions · 2024-05-20T09:27:05Z

LCJove · 2024-05-20T09:46:27Z

可以加一下changest

github-actions · 2024-05-20T09:48:54Z

@MarioJames You can run the pnpm changeset command locally to generate a changelog. Please refer to the operation precautions. https://web3.ant.design/guide/changelog

@MarioJames 可以在本地运行 pnpm changeset 命令生成 changelog, 操作注意事项参考：https://web3.ant.design/guide/changelog-cn

codecov · 2024-05-20T10:06:46Z

Codecov Report

Attention: Patch coverage is 60.44776% with 53 lines in your changes are missing coverage. Please review.

Project coverage is 99.75%. Comparing base (ac888ee) to head (8be087c).
Report is 10 commits behind head on main.

❗ Current head 8be087c differs from pull request most recent head fdcc456

Please upload reports for the commit fdcc456 to get more accurate results.

Files	Patch %	Lines
packages/web3/src/swap/Token.tsx	65.68%	35 Missing ⚠️
packages/web3/src/swap/index.tsx	43.75%	18 Missing ⚠️

Additional details and impacted files

@@             Coverage Diff             @@
##              main     #893      +/-   ##
===========================================
- Coverage   100.00%   99.75%   -0.25%     
===========================================
  Files          708      710       +2     
  Lines        21461    21589     +128     
  Branches      1214     1214              
===========================================
+ Hits         21461    21536      +75     
- Misses           0       53      +53

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

.changeset/yellow-turkeys-look.md

packages/web3/src/swap/Token.tsx

packages/web3/src/token/Token.tsx

packages/web3/src/token/demos/basic.tsx

.changeset/eighty-hounds-prove.md

packages/web3/src/token/demos/basic.tsx

packages/web3/src/token/index.tsx

packages/web3/src/token/demos/token.tsx

yutingzhao1991 · 2024-05-29T01:52:29Z

packages/web3/src/crypto-input/demos/basic.tsx

@@ -0,0 +1,33 @@
+import { useState } from 'react';


demo 可以设置个宽度，现在这样撑开感觉看上去有点不正常：

类似 antd 的 demo 这样：

yutingzhao1991 · 2024-05-29T01:53:47Z

packages/web3/src/crypto-input/demos/uniswapMode.tsx

@@ -0,0 +1,91 @@
+import { Suspense, useDeferredValue, useState } from 'react';


可以给一个这个效果的 Demo：

yutingzhao1991 · 2024-05-29T01:55:36Z

packages/web3/src/token-select/style/index.ts

+     */
+    [`${token.componentCls}-wrapper`]: {
+      background: '#fff',
+      width: 196,


这个是 select 的宽度吗？感觉这个宽度不应该写死在组件里面，参考 antd 的 select

yutingzhao1991 · 2024-05-29T01:56:59Z

packages/web3/src/token-select/index.tsx

+
+import { useTokenSelectStyle } from './style';
+
+export interface TokenSelectProps {


TokenSelect 不能基于 antd 的 Select 实现吗？感觉 TokenSelect 应该是基于 antd 的 Select 封装，是它的一个超集，并且直接透出 antd 的 Select 的 props。

TokenSelect 不能基于 antd 的 Select 实现吗？感觉 TokenSelect 应该是基于 antd 的 Select 封装，是它的一个超集，并且直接透出 antd 的 Select 的 props。

样式不太一样 antd select 就是一个我们常规理解中的 select，TokenSelect 更像是 Dropdown
不过可以切成基于 select 去做，在视觉设计上要做一些调整

yutingzhao1991 · 2024-05-29T02:00:03Z

packages/web3/src/crypto-input/style/index.ts

+        input: {
+          padding: 0,
+          fontSize: 24,
+          lineHeight: 1.5,


cryptoInput 的输入框大小应该和 antd 的保持一致，设计图中的大框应该通过设置 size='large' 来实现，尽可能的不要 hack antd 基础组件的样式。如果设计稿和 antd 组件规范有冲突的，可以和设计师商量调整。我们整体尽量和 antd 的基础组件保持样式和用法上的一致。

cryptoInput 的输入框大小应该和 antd 的保持一致，设计图中的大框应该通过设置 size='large' 来实现，尽可能的不要 hack antd 基础组件的样式。如果设计稿和 antd 组件规范有冲突的，可以和设计师商量调整。我们整体尽量和 antd 的基础组件保持样式和用法上的一致。

ok 现在是做的 flex 自适应我全切成 antd input 的 props

…ut 组件

…ct and token select with amount scene

status, search and filter token addon

…ct and token select with amount scene

Bumps [typescript](https://github.com/Microsoft/TypeScript) from 5.4.4 to 5.4.5. - [Release notes](https://github.com/Microsoft/TypeScript/releases) - [Changelog](https://github.com/microsoft/TypeScript/blob/main/azure-pipelines.release.yml) - [Commits](microsoft/TypeScript@v5.4.4...v5.4.5) --- updated-dependencies: - dependency-name: typescript dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

Bumps [@types/lodash](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/lodash) from 4.14.202 to 4.17.4. - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/lodash) --- updated-dependencies: - dependency-name: "@types/lodash" dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: thinkasany <480968828@qq.com>

Bumps [classnames](https://github.com/JedWatson/classnames) from 2.3.2 to 2.5.1. - [Changelog](https://github.com/JedWatson/classnames/blob/main/HISTORY.md) - [Commits](JedWatson/classnames@v2.3.2...v2.5.1) --- updated-dependencies: - dependency-name: classnames dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: thinkasany <480968828@qq.com>

Bumps [@ant-design/icons](https://github.com/ant-design/ant-design-icons) from 5.3.6 to 5.3.7. - [Commits](https://github.com/ant-design/ant-design-icons/commits) --- updated-dependencies: - dependency-name: "@ant-design/icons" dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: thinkasany <480968828@qq.com>

* feat: add ant design meetup 2024 sbt dapp * fix: update ui --------- Co-authored-by: tingzhao.ytz <tingzhao.ytz@antgroup.com>

…t component demo

thinkasany · 2024-05-29T14:40:29Z

看起来好像有很多无关的filechange，是不是rebase的时候冲突太多了，或者可以考虑重新提交一个pr，使用git cherry-pick，拿出一些比较重要的比如这个5acc3c31fb89e239559972278352b65fe9707862 hash下的commit的file change，然后对比这个pr中的cr意见再做修改，那样子会整洁很多。

下面这些commit 其实对于这个pr来说也是没用的，避免到时候处理错了，丢失重要代码，所以新起一个pr应该问题也不大，除了git cherry-pick，也可以试试新建一个分支reset 到比较前面，然后把冲突一起处理了，看怎么方便怎么来了。

MarioJames · 2024-05-29T15:12:45Z

看起来好像有很多无关的filechange，是不是rebase的时候冲突太多了，或者可以考虑重新提交一个pr，使用git cherry-pick，拿出一些比较重要的比如这个5acc3c31fb89e239559972278352b65fe9707862 hash下的commit的file change，然后对比这个pr中的cr意见再做修改，那样子会整洁很多。

下面这些commit 其实对于这个pr来说也是没用的，避免到时候处理错了，丢失重要代码，所以新起一个pr应该问题也不大，除了git cherry-pick，也可以试试新建一个分支reset 到比较前面，然后把冲突一起处理了，看怎么方便怎么来了。

发现了明天我会新发一个只有新组件的PR出来

MarioJames requested a review from yutingzhao1991 May 20, 2024 09:26

MarioJames requested review from jeasonstudio, Likang0122 and AmAzing129 May 20, 2024 09:27

vercel bot deployed to Preview May 20, 2024 09:28 View deployment

MarioJames self-assigned this May 20, 2024

MarioJames added the feature Independent new features label May 20, 2024

gin-lsl added the Need Changelog label May 20, 2024

github-actions bot added the major label May 20, 2024

vercel bot deployed to Preview May 20, 2024 09:59 View deployment

jeasonstudio reviewed May 20, 2024

View reviewed changes

.changeset/yellow-turkeys-look.md Outdated Show resolved Hide resolved

AmAzing129 reviewed May 21, 2024

View reviewed changes

packages/web3/src/swap/Token.tsx Outdated Show resolved Hide resolved

AmAzing129 removed major Need Changelog labels May 21, 2024

vercel bot deployed to Preview May 21, 2024 03:26 View deployment

Likang0122 reviewed May 21, 2024

View reviewed changes

packages/web3/src/token/Token.tsx Outdated Show resolved Hide resolved

packages/web3/src/token/demos/basic.tsx Outdated Show resolved Hide resolved

vercel bot deployed to Preview May 21, 2024 03:59 View deployment

vercel bot deployed to Preview May 21, 2024 06:28 View deployment

vercel bot deployed to Preview May 21, 2024 07:11 View deployment

yutingzhao1991 reviewed May 21, 2024

View reviewed changes

.changeset/eighty-hounds-prove.md Outdated Show resolved Hide resolved

packages/web3/src/token/demos/basic.tsx Outdated Show resolved Hide resolved

packages/web3/src/token/index.tsx Outdated Show resolved Hide resolved

packages/web3/src/token/demos/token.tsx Outdated Show resolved Hide resolved

vercel bot deployed to Preview May 21, 2024 10:07 View deployment

vercel bot deployed to Preview May 21, 2024 15:13 View deployment

vercel bot deployed to Preview May 23, 2024 17:20 View deployment

vercel bot deployed to Preview May 23, 2024 17:34 View deployment

yutingzhao1991 reviewed May 29, 2024

View reviewed changes

MarioJames and others added 20 commits May 29, 2024 22:31

feat: add swap token component

cd30497

chore: 新增 changset

d003559

feat: 调整组件设计思路，将 swap 修改为 token 组件，提供单独的 token select 组件以及 token outp…

f2d4487

…ut 组件

feat: 精简 Token 组件，删除无用代码

98a27ae

feat: 样式组织逻辑调整；组件功能完善

5acc3c3

feat: Token.Output 组件添加数量受控

6c05fa5

feat: add TokenSelect and CryptoInput component, build for token sele…

9b58fa7

…ct and token select with amount scene

feat: improve token-select style, token-select support clear seleted

f66ffa9

status, search and filter token addon

feat: add coomon token type, add chain vm type

1da49d0

docs: modify changeset

e7ed7de

feat: add ChainType enum, support EVM/SVM/Bitcoin

6853039

feat: TokenSelect component introduce Token type

42bb65b

feat: add TokenSelect and CryptoInput component, build for token sele…

7d10015

…ct and token select with amount scene

release: 1.12.0 (#906)

49eef82

feat: add ant design meetup 2024 sbt dapp (#912)

401b53a

* feat: add ant design meetup 2024 sbt dapp * fix: update ui --------- Co-authored-by: tingzhao.ytz <tingzhao.ytz@antgroup.com>

feat: improve CryptoInput component and fill demo; improve TokenSelec…

fdcc456

…t component demo

MarioJames force-pushed the feature/swap branch from a3ecb88 to fdcc456 Compare May 29, 2024 14:34

vercel bot deployed to Preview May 29, 2024 14:36 View deployment

MarioJames closed this May 29, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add swap token component #893

feat: add swap token component #893

MarioJames commented May 20, 2024 •

edited

vercel bot commented May 20, 2024 •

edited

changeset-bot bot commented May 20, 2024 •

edited

github-actions bot commented May 20, 2024 •

edited

LCJove commented May 20, 2024

github-actions bot commented May 20, 2024

codecov bot commented May 20, 2024 •

edited

yutingzhao1991 May 29, 2024 •

edited

yutingzhao1991 May 29, 2024

yutingzhao1991 May 29, 2024

yutingzhao1991 May 29, 2024

MarioJames May 29, 2024

yutingzhao1991 May 29, 2024

MarioJames May 29, 2024

thinkasany commented May 29, 2024 •

edited

MarioJames commented May 29, 2024

		@@ -0,0 +1,91 @@
		import { Suspense, useDeferredValue, useState } from 'react';


		import { useTokenSelectStyle } from './style';

		export interface TokenSelectProps {

feat: add swap token component #893

feat: add swap token component #893

Conversation

MarioJames commented May 20, 2024 • edited

vercel bot commented May 20, 2024 • edited

changeset-bot bot commented May 20, 2024 • edited

🦋 Changeset detected

github-actions bot commented May 20, 2024 • edited

LCJove commented May 20, 2024

github-actions bot commented May 20, 2024

codecov bot commented May 20, 2024 • edited

Codecov Report

yutingzhao1991 May 29, 2024 • edited

Choose a reason for hiding this comment

yutingzhao1991 May 29, 2024

Choose a reason for hiding this comment

yutingzhao1991 May 29, 2024

Choose a reason for hiding this comment

yutingzhao1991 May 29, 2024

Choose a reason for hiding this comment

MarioJames May 29, 2024

Choose a reason for hiding this comment

yutingzhao1991 May 29, 2024

Choose a reason for hiding this comment

MarioJames May 29, 2024

Choose a reason for hiding this comment

thinkasany commented May 29, 2024 • edited

MarioJames commented May 29, 2024

MarioJames commented May 20, 2024 •

edited

vercel bot commented May 20, 2024 •

edited

changeset-bot bot commented May 20, 2024 •

edited

github-actions bot commented May 20, 2024 •

edited

codecov bot commented May 20, 2024 •

edited

yutingzhao1991 May 29, 2024 •

edited

thinkasany commented May 29, 2024 •

edited