From ebc6fd097bbb1d0bf444e9a2a07498fd4e817a74 Mon Sep 17 00:00:00 2001 From: lelenei Date: Mon, 27 Dec 2021 10:51:53 +0800 Subject: [PATCH 01/14] feat: the opensea token is-tweet bid, the token should be brought into the opensea token. --- .../SNSAdaptor/MakeOfferDialog.tsx | 4 +- .../SNSAdaptor/SelectTokenListPanel.tsx | 83 +++++++++++++++++++ 2 files changed, 85 insertions(+), 2 deletions(-) create mode 100644 packages/mask/src/plugins/Collectible/SNSAdaptor/SelectTokenListPanel.tsx diff --git a/packages/mask/src/plugins/Collectible/SNSAdaptor/MakeOfferDialog.tsx b/packages/mask/src/plugins/Collectible/SNSAdaptor/MakeOfferDialog.tsx index 70ca8345e838..8af5dc765f14 100644 --- a/packages/mask/src/plugins/Collectible/SNSAdaptor/MakeOfferDialog.tsx +++ b/packages/mask/src/plugins/Collectible/SNSAdaptor/MakeOfferDialog.tsx @@ -26,7 +26,6 @@ import { useRemoteControlledDialog } from '@masknet/shared' import { InjectedDialog } from '../../../components/shared/InjectedDialog' import { UnreviewedWarning } from './UnreviewedWarning' import ActionButton, { ActionButtonPromise } from '../../../extension/options-page/DashboardComponents/ActionButton' -import { SelectTokenAmountPanel } from '../../ITO/SNSAdaptor/SelectTokenAmountPanel' import { EthereumWalletConnectedBoundary } from '../../../web3/UI/EthereumWalletConnectedBoundary' import type { useAsset } from '../hooks/useAsset' import { DateTimePanel } from '../../../web3/UI/DateTimePanel' @@ -37,6 +36,7 @@ import { Trans } from 'react-i18next' import getUnixTime from 'date-fns/getUnixTime' import { rightShift, ZERO } from '@masknet/web3-shared-base/utils/number' import type { Coin } from '../../Trader/types' +import { SelectTokenListPanel } from './SelectTokenListPanel' const useStyles = makeStyles()((theme) => { return { @@ -163,7 +163,7 @@ export function MakeOfferDialog(props: MakeOfferDialogProps) { )} - void + onTokenChange: (token: FungibleTokenDetailed) => void + FungibleTokenListProps?: Partial + TokenAmountPanelProps?: Partial +} + +export function SelectTokenListPanel(props: SelectTokenPanelProps) { + const { + amount, + balance, + token, + disableNativeToken = false, + onAmountChange, + onTokenChange, + FungibleTokenListProps, + TokenAmountPanelProps, + } = props + + const [haveMenu, setHaveMenu] = useState(true) + + useEffect(() => { + if (!FungibleTokenListProps?.tokens || FungibleTokenListProps.tokens.length === 0) setHaveMenu(false) + if (token?.symbol === 'WETH') setHaveMenu(false) + }, [FungibleTokenListProps, token]) + + const [menu, openMenu] = useMenu( + FungibleTokenListProps?.tokens?.map((x, i) => ( + { + onTokenChange(x) + }}> + {x.logoURI} + {x.name} + + )) ?? [], + false, + { + anchorOrigin: { + vertical: 'bottom', + horizontal: 'left', + }, + transformOrigin: { + vertical: 'bottom', + horizontal: 'left', + }, + }, + ) + + return ( + <> + + {menu} + + ) +} From ebbf5095a9ab157293f88446e1808a5e3e04a610 Mon Sep 17 00:00:00 2001 From: lelenei Date: Mon, 27 Dec 2021 10:51:53 +0800 Subject: [PATCH 02/14] feat: the opensea token is-tweet bid, the token should be brought into the opensea token. --- packages/mask/shared-ui/locales/en-US.json | 10 --- packages/mask/shared-ui/locales/ko-KR.json | 3 +- packages/mask/shared-ui/locales/qya-AA.json | 10 --- packages/mask/shared-ui/locales/zh-CN.json | 10 --- .../SNSAdaptor/MakeOfferDialog.tsx | 4 +- .../SNSAdaptor/SelectTokenListPanel.tsx | 83 +++++++++++++++++++ 6 files changed, 86 insertions(+), 34 deletions(-) create mode 100644 packages/mask/src/plugins/Collectible/SNSAdaptor/SelectTokenListPanel.tsx diff --git a/packages/mask/shared-ui/locales/en-US.json b/packages/mask/shared-ui/locales/en-US.json index 9ba7b8a6b726..50a3af768c12 100644 --- a/packages/mask/shared-ui/locales/en-US.json +++ b/packages/mask/shared-ui/locales/en-US.json @@ -968,17 +968,7 @@ "popups_password_do_not_match": "Incorrect backup password", "popups_backup_password": "Backup Password", "popups_rename_error_tip": "Maximum length is {{length}} characters long.", - "nft_button_set_avatar": "Set NFT Avatar", - "nft_input_address_label": "Please input contract address", - "nft_input_tokenid_label": "Please input token ID", - "nft_owner_hint": "This NFT does not exist or does not belong to you.", - "nft_add_dialog_title": "Add Collectible", - "nft_add_button_label": "Add", - "nft_list_title": "NFT Avatar", "nft_wallet_label": "Wallet", - "nft_wallet_change": "Change", - "nft_button_add_collectible": "Add Collectible", - "nft_avatar": "NFT Avatar", "plugin_profile_no_wallets": "Connect your wallet here.
This section will be shown to your encrypted friends.
The display content includes digital art, donations, badges
and other public information on chain.", "plugin_profile_binding_rules_title": "The wallet address discovery rules:", "plugin_profile_binding_rule1": "The nickname is ENS or RNS.", diff --git a/packages/mask/shared-ui/locales/ko-KR.json b/packages/mask/shared-ui/locales/ko-KR.json index f97676d66097..9b8125f17bd0 100644 --- a/packages/mask/shared-ui/locales/ko-KR.json +++ b/packages/mask/shared-ui/locales/ko-KR.json @@ -840,6 +840,5 @@ "popups_persona_persona_name_exists": "이미 존재된 페르소나입니다", "popups_password_do_not_match": "잘못된 백업 비밀번호", "popups_backup_password": "백업 비밀번호", - "popups_rename_error_tip": "최대 길이는 {{length}} 자입니다.", - "nft_button_set_avatar": "NFT 아바타 설정" + "popups_rename_error_tip": "최대 길이는 {{length}} 자입니다." } diff --git a/packages/mask/shared-ui/locales/qya-AA.json b/packages/mask/shared-ui/locales/qya-AA.json index 7d70c57bed10..f615f4b73828 100644 --- a/packages/mask/shared-ui/locales/qya-AA.json +++ b/packages/mask/shared-ui/locales/qya-AA.json @@ -968,17 +968,7 @@ "popups_password_do_not_match": "crwdns8983:0crwdne8983:0", "popups_backup_password": "crwdns8985:0crwdne8985:0", "popups_rename_error_tip": "crwdns8987:0{{length}}crwdne8987:0", - "nft_button_set_avatar": "crwdns9191:0crwdne9191:0", - "nft_input_address_label": "crwdns9193:0crwdne9193:0", - "nft_input_tokenid_label": "crwdns9195:0crwdne9195:0", - "nft_owner_hint": "crwdns9197:0crwdne9197:0", - "nft_add_dialog_title": "crwdns9199:0crwdne9199:0", - "nft_add_button_label": "crwdns9201:0crwdne9201:0", - "nft_list_title": "crwdns9203:0crwdne9203:0", "nft_wallet_label": "crwdns9205:0crwdne9205:0", - "nft_wallet_change": "crwdns9207:0crwdne9207:0", - "nft_button_add_collectible": "crwdns9209:0crwdne9209:0", - "nft_avatar": "crwdns9211:0crwdne9211:0", "plugin_profile_no_wallets": "crwdns9327:0crwdne9327:0", "plugin_profile_binding_rules_title": "crwdns10417:0crwdne10417:0", "plugin_profile_binding_rule1": "crwdns10419:0crwdne10419:0", diff --git a/packages/mask/shared-ui/locales/zh-CN.json b/packages/mask/shared-ui/locales/zh-CN.json index 43adfe412533..2d288f4cc2c7 100644 --- a/packages/mask/shared-ui/locales/zh-CN.json +++ b/packages/mask/shared-ui/locales/zh-CN.json @@ -852,17 +852,7 @@ "popups_password_do_not_match": "备份密码不正确", "popups_backup_password": "备份密码", "popups_rename_error_tip": "最大长度为 {{length}} 个字符。", - "nft_button_set_avatar": "设置 NFT 头像", - "nft_input_address_label": "请输入合约地址", - "nft_input_tokenid_label": "请输入Token ID", - "nft_owner_hint": "此 NFT 不存在或不属于您。", - "nft_add_dialog_title": "添加收藏品", - "nft_add_button_label": "添加", - "nft_list_title": "NFT 头像", "nft_wallet_label": "钱包", - "nft_wallet_change": "更改", - "nft_button_add_collectible": "添加收藏品", - "nft_avatar": "NFT 头像", "plugin_profile_no_wallets": "在此连接您的钱包。
此部分将显示给您的加密朋友。
显示内容包括数字艺术、捐赠、徽章
和其他链上的公开信息。", "plugin_profile_binding_rules_title": "Web3 按如下规则发现钱包地址：", "plugin_profile_binding_rule1": "您的昵称为 ENS 或者 RNS。", diff --git a/packages/mask/src/plugins/Collectible/SNSAdaptor/MakeOfferDialog.tsx b/packages/mask/src/plugins/Collectible/SNSAdaptor/MakeOfferDialog.tsx index 70ca8345e838..8af5dc765f14 100644 --- a/packages/mask/src/plugins/Collectible/SNSAdaptor/MakeOfferDialog.tsx +++ b/packages/mask/src/plugins/Collectible/SNSAdaptor/MakeOfferDialog.tsx @@ -26,7 +26,6 @@ import { useRemoteControlledDialog } from '@masknet/shared' import { InjectedDialog } from '../../../components/shared/InjectedDialog' import { UnreviewedWarning } from './UnreviewedWarning' import ActionButton, { ActionButtonPromise } from '../../../extension/options-page/DashboardComponents/ActionButton' -import { SelectTokenAmountPanel } from '../../ITO/SNSAdaptor/SelectTokenAmountPanel' import { EthereumWalletConnectedBoundary } from '../../../web3/UI/EthereumWalletConnectedBoundary' import type { useAsset } from '../hooks/useAsset' import { DateTimePanel } from '../../../web3/UI/DateTimePanel' @@ -37,6 +36,7 @@ import { Trans } from 'react-i18next' import getUnixTime from 'date-fns/getUnixTime' import { rightShift, ZERO } from '@masknet/web3-shared-base/utils/number' import type { Coin } from '../../Trader/types' +import { SelectTokenListPanel } from './SelectTokenListPanel' const useStyles = makeStyles()((theme) => { return { @@ -163,7 +163,7 @@ export function MakeOfferDialog(props: MakeOfferDialogProps) { )} - void + onTokenChange: (token: FungibleTokenDetailed) => void + FungibleTokenListProps?: Partial + TokenAmountPanelProps?: Partial +} + +export function SelectTokenListPanel(props: SelectTokenPanelProps) { + const { + amount, + balance, + token, + disableNativeToken = false, + onAmountChange, + onTokenChange, + FungibleTokenListProps, + TokenAmountPanelProps, + } = props + + const [haveMenu, setHaveMenu] = useState(true) + + useEffect(() => { + if (!FungibleTokenListProps?.tokens || FungibleTokenListProps.tokens.length === 0) setHaveMenu(false) + if (token?.symbol === 'WETH') setHaveMenu(false) + }, [FungibleTokenListProps, token]) + + const [menu, openMenu] = useMenu( + FungibleTokenListProps?.tokens?.map((x, i) => ( + { + onTokenChange(x) + }}> + {x.logoURI} + {x.name} + + )) ?? [], + false, + { + anchorOrigin: { + vertical: 'bottom', + horizontal: 'left', + }, + transformOrigin: { + vertical: 'bottom', + horizontal: 'left', + }, + }, + ) + + return ( + <> + + {menu} + + ) +} From 2b86a40fe5d8f444ac523232e4145cfcead73b77 Mon Sep 17 00:00:00 2001 From: lelenei Date: Mon, 27 Dec 2021 18:03:18 +0800 Subject: [PATCH 03/14] fix: drop menu --- .../src/plugins/Collectible/SNSAdaptor/SelectTokenListPanel.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mask/src/plugins/Collectible/SNSAdaptor/SelectTokenListPanel.tsx b/packages/mask/src/plugins/Collectible/SNSAdaptor/SelectTokenListPanel.tsx index f345306fa8b1..b9781064a03a 100644 --- a/packages/mask/src/plugins/Collectible/SNSAdaptor/SelectTokenListPanel.tsx +++ b/packages/mask/src/plugins/Collectible/SNSAdaptor/SelectTokenListPanel.tsx @@ -53,7 +53,7 @@ export function SelectTokenListPanel(props: SelectTokenPanelProps) { horizontal: 'left', }, transformOrigin: { - vertical: 'bottom', + vertical: 'top', horizontal: 'left', }, }, From 095864f1a35778f189b5b48c710c817d4f2d224f Mon Sep 17 00:00:00 2001 From: lelenei Date: Mon, 27 Dec 2021 19:46:06 +0800 Subject: [PATCH 04/14] fix: show token icon --- .../SNSAdaptor/SelectTokenListPanel.tsx | 40 ++++++++++++++----- 1 file changed, 29 insertions(+), 11 deletions(-) diff --git a/packages/mask/src/plugins/Collectible/SNSAdaptor/SelectTokenListPanel.tsx b/packages/mask/src/plugins/Collectible/SNSAdaptor/SelectTokenListPanel.tsx index b9781064a03a..34e340807033 100644 --- a/packages/mask/src/plugins/Collectible/SNSAdaptor/SelectTokenListPanel.tsx +++ b/packages/mask/src/plugins/Collectible/SNSAdaptor/SelectTokenListPanel.tsx @@ -4,6 +4,8 @@ import { ListItemIcon, MenuItem, Typography } from '@mui/material' import { useMenu } from '../../../utils' import { useEffect, useState } from 'react' import { noop } from 'lodash-unified' +import { TokenIcon } from '@masknet/shared' +import { makeStyles } from '@masknet/theme' export interface SelectTokenPanelProps { amount: string @@ -16,6 +18,12 @@ export interface SelectTokenPanelProps { TokenAmountPanelProps?: Partial } +const useStyles = makeStyles()((theme) => ({ + icon: { + width: 24, + height: 24, + }, +})) export function SelectTokenListPanel(props: SelectTokenPanelProps) { const { amount, @@ -28,24 +36,34 @@ export function SelectTokenListPanel(props: SelectTokenPanelProps) { TokenAmountPanelProps, } = props + const { classes } = useStyles() + const [haveMenu, setHaveMenu] = useState(true) useEffect(() => { if (!FungibleTokenListProps?.tokens || FungibleTokenListProps.tokens.length === 0) setHaveMenu(false) - if (token?.symbol === 'WETH') setHaveMenu(false) }, [FungibleTokenListProps, token]) const [menu, openMenu] = useMenu( - FungibleTokenListProps?.tokens?.map((x, i) => ( - { - onTokenChange(x) - }}> - {x.logoURI} - {x.name} - - )) ?? [], + FungibleTokenListProps?.tokens?.map((x, i) => { + return ( + { + onTokenChange(x) + }}> + + + + {x.name} + + ) + }) ?? [], false, { anchorOrigin: { From de213d6dd8be3ea6625337677eef0358db8c9d67 Mon Sep 17 00:00:00 2001 From: lelenei Date: Tue, 28 Dec 2021 11:58:36 +0800 Subject: [PATCH 05/14] fix: i18n key --- packages/mask/shared-ui/locales/en-US.json | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/packages/mask/shared-ui/locales/en-US.json b/packages/mask/shared-ui/locales/en-US.json index 0cc12d02e6e2..a55eeeb3cc8f 100644 --- a/packages/mask/shared-ui/locales/en-US.json +++ b/packages/mask/shared-ui/locales/en-US.json @@ -992,5 +992,15 @@ "plugin_profile_rss3_inactive_project": "Inactive Project", "plugin_profile_rss3_no_activity_time": "No activity time", "plugin_profile_rss3_attended": "Attended", - "plugin_vcent_last_offer_at": "LATEST OFFER at" + "plugin_vcent_last_offer_at": "LATEST OFFER at", + "nft_input_address_label": "Please input contract address", + "nft_input_tokenid_label": "Please input token ID", + "nft_owner_hint": "This NFT does not exist or does not belong to you.", + "nft_add_dialog_title": "Add Collectible", + "nft_add_button_label": "Add", + "nft_list_title": "NFT Avatar", + "nft_wallet_change": "Change", + "nft_button_add_collectible": "Add Collectible", + "nft_avatar": "NFT Avatar", + "nft_button_set_avatar": "Set NFT Avatar" } From 8a7644540eed0401fd4baa90498b4dd2b87cf9f4 Mon Sep 17 00:00:00 2001 From: lelenei Date: Wed, 29 Dec 2021 16:29:52 +0800 Subject: [PATCH 06/14] fix: show all tokens --- .../Collectible/SNSAdaptor/MakeOfferDialog.tsx | 17 ++++++++++++++--- .../SNSAdaptor/SelectTokenListPanel.tsx | 2 +- 2 files changed, 15 insertions(+), 4 deletions(-) diff --git a/packages/mask/src/plugins/Collectible/SNSAdaptor/MakeOfferDialog.tsx b/packages/mask/src/plugins/Collectible/SNSAdaptor/MakeOfferDialog.tsx index 36ee578a27ab..6215b141ebcb 100644 --- a/packages/mask/src/plugins/Collectible/SNSAdaptor/MakeOfferDialog.tsx +++ b/packages/mask/src/plugins/Collectible/SNSAdaptor/MakeOfferDialog.tsx @@ -11,7 +11,7 @@ import { Link, } from '@mui/material' import { makeStyles } from '@masknet/theme' -import { first } from 'lodash-unified' +import { first, uniqBy } from 'lodash-unified' import BigNumber from 'bignumber.js' import { FungibleTokenDetailed, @@ -82,7 +82,12 @@ export function MakeOfferDialog(props: MakeOfferDialogProps) { asset?.value && asset.value.desktopOrder ? new BigNumber(asset.value.desktopOrder.current_price ?? '0') : ZERO const paymentTokens = (isAuction ? asset?.value?.offer_payment_tokens : asset?.value?.order_payment_tokens) ?? [] - const selectedPaymentToken = first(paymentTokens) + const selectedPaymentToken = first( + uniqBy( + [...(asset?.value?.offer_payment_tokens ?? []), ...(asset?.value?.order_payment_tokens ?? [])], + (x) => x.address, + ), + ) const { t } = useI18N() const { classes } = useStyles() @@ -177,7 +182,13 @@ export function MakeOfferDialog(props: MakeOfferDialogProps) { }} FungibleTokenListProps={{ selectedTokens: selectedPaymentToken ? [selectedPaymentToken.address] : [], - tokens: paymentTokens, + tokens: uniqBy( + [ + ...(asset?.value?.offer_payment_tokens ?? []), + ...(asset?.value?.order_payment_tokens ?? []), + ], + (x) => x.address, + ), whitelist: paymentTokens.map((x) => x.address), }} /> diff --git a/packages/mask/src/plugins/Collectible/SNSAdaptor/SelectTokenListPanel.tsx b/packages/mask/src/plugins/Collectible/SNSAdaptor/SelectTokenListPanel.tsx index 34e340807033..74d83e33814c 100644 --- a/packages/mask/src/plugins/Collectible/SNSAdaptor/SelectTokenListPanel.tsx +++ b/packages/mask/src/plugins/Collectible/SNSAdaptor/SelectTokenListPanel.tsx @@ -41,7 +41,7 @@ export function SelectTokenListPanel(props: SelectTokenPanelProps) { const [haveMenu, setHaveMenu] = useState(true) useEffect(() => { - if (!FungibleTokenListProps?.tokens || FungibleTokenListProps.tokens.length === 0) setHaveMenu(false) + if (!FungibleTokenListProps?.tokens || FungibleTokenListProps.tokens.length <= 1) setHaveMenu(false) }, [FungibleTokenListProps, token]) const [menu, openMenu] = useMenu( From 6154fed166cbf62a4fbd15389f2d576532621fb6 Mon Sep 17 00:00:00 2001 From: lelenei Date: Thu, 30 Dec 2021 11:33:57 +0800 Subject: [PATCH 07/14] feat: new token input --- .../SNSAdaptor/SelectTokenListPanel.tsx | 145 +++++++++++++++--- 1 file changed, 120 insertions(+), 25 deletions(-) diff --git a/packages/mask/src/plugins/Collectible/SNSAdaptor/SelectTokenListPanel.tsx b/packages/mask/src/plugins/Collectible/SNSAdaptor/SelectTokenListPanel.tsx index 74d83e33814c..758372831b78 100644 --- a/packages/mask/src/plugins/Collectible/SNSAdaptor/SelectTokenListPanel.tsx +++ b/packages/mask/src/plugins/Collectible/SNSAdaptor/SelectTokenListPanel.tsx @@ -1,11 +1,20 @@ -import type { FungibleTokenDetailed } from '@masknet/web3-shared-evm' -import { ERC20TokenListProps, TokenAmountPanel, TokenAmountPanelProps } from '@masknet/shared' -import { ListItemIcon, MenuItem, Typography } from '@mui/material' +import { FungibleTokenDetailed, isSameAddress } from '@masknet/web3-shared-evm' +import type { ERC20TokenListProps, TokenAmountPanelProps } from '@masknet/shared' +import { + FormControl, + InputAdornment, + ListItemIcon, + MenuItem, + MenuProps, + OutlinedInput, + Typography, +} from '@mui/material' import { useMenu } from '../../../utils' -import { useEffect, useState } from 'react' -import { noop } from 'lodash-unified' +import { useEffect, useState, useCallback, useRef, useMemo, ChangeEvent } from 'react' import { TokenIcon } from '@masknet/shared' import { makeStyles } from '@masknet/theme' +import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown' +import Check from '@mui/icons-material/Check' export interface SelectTokenPanelProps { amount: string @@ -16,13 +25,33 @@ export interface SelectTokenPanelProps { onTokenChange: (token: FungibleTokenDetailed) => void FungibleTokenListProps?: Partial TokenAmountPanelProps?: Partial + SelectMenuProps?: Partial } +const MIN_AMOUNT_LENGTH = 1 +const MAX_AMOUNT_LENGTH = 79 + const useStyles = makeStyles()((theme) => ({ + root: { + display: 'block', + }, + title: { + display: 'flex', + justifyContent: 'space-between', + flex: 1, + }, icon: { width: 24, height: 24, }, + input: {}, + + check: { + flex: 1, + display: 'flex', + justifyContent: 'end', + color: theme.palette.text.primary, + }, })) export function SelectTokenListPanel(props: SelectTokenPanelProps) { const { @@ -35,11 +64,18 @@ export function SelectTokenListPanel(props: SelectTokenPanelProps) { FungibleTokenListProps, TokenAmountPanelProps, } = props + const ref = useRef(null) const { classes } = useStyles() const [haveMenu, setHaveMenu] = useState(true) + const width = useMemo(() => { + if (!ref.current) return + const style = window.getComputedStyle(ref.current) + return style.width + }, [ref.current]) + useEffect(() => { if (!FungibleTokenListProps?.tokens || FungibleTokenListProps.tokens.length <= 1) setHaveMenu(false) }, [FungibleTokenListProps, token]) @@ -60,7 +96,10 @@ export function SelectTokenListPanel(props: SelectTokenPanelProps) { logoURI={x.logoURI} /> - {x.name} + {x.symbol} + + {isSameAddress(x.address, token?.address) ? : null} + ) }) ?? [], @@ -74,28 +113,84 @@ export function SelectTokenListPanel(props: SelectTokenPanelProps) { vertical: 'top', horizontal: 'left', }, + paperProps: { + style: { width }, + }, + }, + ) + + const onClick = useCallback(() => { + if (!ref.current) return + + openMenu(ref.current) + }, [openMenu, ref.current]) + + //#region update amount by self + const { RE_MATCH_WHOLE_AMOUNT, RE_MATCH_FRACTION_AMOUNT } = useMemo( + () => ({ + RE_MATCH_FRACTION_AMOUNT: new RegExp(`^\\.\\d{0,${token?.decimals}}$`), // .ddd...d + RE_MATCH_WHOLE_AMOUNT: new RegExp(`^\\d*\\.?\\d{0,${token?.decimals}}$`), // d.ddd...d + }), + [token?.decimals], + ) + const onChange = useCallback( + (ev: ChangeEvent) => { + const amount_ = ev.currentTarget.value.replace(/,/g, '.') + if (RE_MATCH_FRACTION_AMOUNT.test(amount_)) onAmountChange(`0${amount_}`) + else if (amount_ === '' || RE_MATCH_WHOLE_AMOUNT.test(amount_)) onAmountChange(amount_) }, + [onAmountChange, RE_MATCH_WHOLE_AMOUNT, RE_MATCH_FRACTION_AMOUNT], ) + //#endregion return ( - <> - - {menu} - +
+
+ + Amount + + {`Balance: ${balance} ${token?.symbol}`} +
+ + + {token?.address ? ( + <> + + {token?.symbol} + + ) : null} + {haveMenu ? : null} + + } + /> + {menu} + +
) } From 30f9f5671c8ad46a5615fcdbaa3ca98c1b335087 Mon Sep 17 00:00:00 2001 From: lelenei Date: Fri, 31 Dec 2021 17:07:58 +0800 Subject: [PATCH 08/14] fix: build error --- .../Collectible/SNSAdaptor/SelectTokenListPanel.tsx | 2 +- pnpm-lock.yaml | 11 +++++------ 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/packages/mask/src/plugins/Collectible/SNSAdaptor/SelectTokenListPanel.tsx b/packages/mask/src/plugins/Collectible/SNSAdaptor/SelectTokenListPanel.tsx index 758372831b78..de1f6ead125e 100644 --- a/packages/mask/src/plugins/Collectible/SNSAdaptor/SelectTokenListPanel.tsx +++ b/packages/mask/src/plugins/Collectible/SNSAdaptor/SelectTokenListPanel.tsx @@ -147,7 +147,7 @@ export function SelectTokenListPanel(props: SelectTokenPanelProps) {
- Amount + Price {`Balance: ${balance} ${token?.symbol}`}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 1935102b547c..71abef900029 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1072,7 +1072,7 @@ packages: bintrees: 1.0.2 bn.js: 4.12.0 compare-versions: 3.6.0 - ethereumjs-abi: 0.6.6 + ethereumjs-abi: 0.6.8 ethereumjs-blockstream: 2.0.7 ethereumjs-util: 5.2.1 find-versions: 2.0.0 @@ -9492,7 +9492,7 @@ packages: /axios/0.21.1: resolution: {integrity: sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==} dependencies: - follow-redirects: 1.14.6 + follow-redirects: 1.14.5 transitivePeerDependencies: - debug dev: false @@ -13531,11 +13531,11 @@ packages: resolution: {integrity: sha512-5qwJ5n3YhjSpE6O/WEBXCAb2nagUgyagJ6C0lGUBWC4LjKp/rRzD+pwtDJ6KCiITFEAoX4eIrWOjRy0Sylq5Hg==} dev: false - /ethereumjs-abi/0.6.6: - resolution: {integrity: sha512-w8KubDsA/+OAuqtIR9RGsMcoZ5nhM8vxwjJAJvEIY+clhxA3BHoLG3+ClYQaQhD0n3mlDt3U5rBrmSVJvI3c8A==} + /ethereumjs-abi/0.6.8: + resolution: {integrity: sha512-Tx0r/iXI6r+lRsdvkFDlut0N08jWMnKRZ6Gkq+Nmw75lZe4e6o3EkSnkaBP5NF6+m5PTGAr9JP43N3LyeoglsA==} dependencies: bn.js: 4.12.0 - ethereumjs-util: 5.2.1 + ethereumjs-util: 6.2.1 dev: false /ethereumjs-account/2.0.5: @@ -14372,7 +14372,6 @@ packages: peerDependenciesMeta: debug: optional: true - dev: true /for-each/0.3.3: resolution: {integrity: sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==} From a6911bf65db1e23c5cc0ee05862faeffef67f0ef Mon Sep 17 00:00:00 2001 From: lelenei Date: Fri, 31 Dec 2021 18:06:51 +0800 Subject: [PATCH 09/14] fix: adjust margin --- .../src/plugins/Collectible/SNSAdaptor/SelectTokenListPanel.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/mask/src/plugins/Collectible/SNSAdaptor/SelectTokenListPanel.tsx b/packages/mask/src/plugins/Collectible/SNSAdaptor/SelectTokenListPanel.tsx index de1f6ead125e..e0064d89b309 100644 --- a/packages/mask/src/plugins/Collectible/SNSAdaptor/SelectTokenListPanel.tsx +++ b/packages/mask/src/plugins/Collectible/SNSAdaptor/SelectTokenListPanel.tsx @@ -43,6 +43,7 @@ const useStyles = makeStyles()((theme) => ({ icon: { width: 24, height: 24, + paddingRight: theme.spacing(0.5), }, input: {}, From 9106240c03e53f13d72c06e9fa3b82f3d6c3900c Mon Sep 17 00:00:00 2001 From: lelenei Date: Tue, 4 Jan 2022 21:05:50 +0800 Subject: [PATCH 10/14] fix: adjust margin --- .../Collectible/SNSAdaptor/SelectTokenListPanel.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/mask/src/plugins/Collectible/SNSAdaptor/SelectTokenListPanel.tsx b/packages/mask/src/plugins/Collectible/SNSAdaptor/SelectTokenListPanel.tsx index e0064d89b309..c3f7796cfa3c 100644 --- a/packages/mask/src/plugins/Collectible/SNSAdaptor/SelectTokenListPanel.tsx +++ b/packages/mask/src/plugins/Collectible/SNSAdaptor/SelectTokenListPanel.tsx @@ -43,7 +43,6 @@ const useStyles = makeStyles()((theme) => ({ icon: { width: 24, height: 24, - paddingRight: theme.spacing(0.5), }, input: {}, @@ -183,7 +182,13 @@ export function SelectTokenListPanel(props: SelectTokenPanelProps) { name={token?.name} logoURI={token?.logoURI} /> - {token?.symbol} + theme.spacing(0.5), + }}> + {token?.symbol} + ) : null} {haveMenu ? : null} From ff7b0b92da121c79caaffa2cd821f451fb64cadf Mon Sep 17 00:00:00 2001 From: lelenei Date: Fri, 7 Jan 2022 16:22:53 +0800 Subject: [PATCH 11/14] fix: show balance --- .../SNSAdaptor/MakeOfferDialog.tsx | 41 ++++---------- .../SNSAdaptor/SelectTokenListPanel.tsx | 54 ++++++++----------- 2 files changed, 32 insertions(+), 63 deletions(-) diff --git a/packages/mask/src/plugins/Collectible/SNSAdaptor/MakeOfferDialog.tsx b/packages/mask/src/plugins/Collectible/SNSAdaptor/MakeOfferDialog.tsx index b9e5aa819241..ae915573207e 100644 --- a/packages/mask/src/plugins/Collectible/SNSAdaptor/MakeOfferDialog.tsx +++ b/packages/mask/src/plugins/Collectible/SNSAdaptor/MakeOfferDialog.tsx @@ -13,13 +13,7 @@ import { import { makeStyles } from '@masknet/theme' import { first, uniqBy } from 'lodash-unified' import BigNumber from 'bignumber.js' -import { - FungibleTokenDetailed, - EthereumTokenType, - useAccount, - useFungibleTokenWatched, - isNativeTokenAddress, -} from '@masknet/web3-shared-evm' +import { FungibleTokenDetailed, EthereumTokenType, useAccount, useFungibleTokenWatched } from '@masknet/web3-shared-evm' import formatDateTime from 'date-fns/format' import { useI18N } from '../../../utils' import { useRemoteControlledDialog } from '@masknet/shared' @@ -81,13 +75,13 @@ export function MakeOfferDialog(props: MakeOfferDialogProps) { const leastPrice = asset?.value && asset.value.desktopOrder ? new BigNumber(asset.value.desktopOrder.current_price ?? '0') : ZERO - const paymentTokens = (isAuction ? asset?.value?.offer_payment_tokens : asset?.value?.order_payment_tokens) ?? [] - const selectedPaymentToken = first( - uniqBy( - [...(asset?.value?.offer_payment_tokens ?? []), ...(asset?.value?.order_payment_tokens ?? [])], - (x) => x.address, - ), + const paymentTokens = uniqBy( + [...(asset?.value?.offer_payment_tokens ?? []), ...(asset?.value?.order_payment_tokens ?? [])], + (x) => x.address, ) + + const selectedPaymentToken = first(paymentTokens) + const { t } = useI18N() const { classes } = useStyles() @@ -98,7 +92,8 @@ export function MakeOfferDialog(props: MakeOfferDialogProps) { const [ToS_Checked, setToS_Checked] = useState(false) const [insufficientBalance, setInsufficientBalance] = useState(false) - const { amount, token, balance, setAmount, setToken } = useFungibleTokenWatched(selectedPaymentToken) + const { amount: _amount, token, balance, setAmount, setToken } = useFungibleTokenWatched(selectedPaymentToken) + const amount = '' const onMakeOffer = useCallback(async () => { if (!asset?.value) return @@ -144,7 +139,7 @@ export function MakeOfferDialog(props: MakeOfferDialogProps) { const validationMessage = useMemo(() => { setInsufficientBalance(false) - const amount_ = rightShift(amount, token.value?.decimals) + const amount_ = rightShift(amount ?? '0', token.value?.decimals ?? 0) const balance_ = new BigNumber(balance.value ?? '0') if (amount_.isNaN() || amount_.isZero()) return t('plugin_collectible_enter_a_price') if (balance_.isZero() || amount_.isGreaterThan(balance_)) { @@ -179,23 +174,9 @@ export function MakeOfferDialog(props: MakeOfferDialogProps) { amount={amount} balance={balance.value ?? '0'} token={token.value as FungibleTokenDetailed} - disableNativeToken={!paymentTokens.some(isNativeTokenAddress)} onAmountChange={setAmount} onTokenChange={setToken} - TokenAmountPanelProps={{ - label: t('plugin_collectible_price'), - }} - FungibleTokenListProps={{ - selectedTokens: selectedPaymentToken ? [selectedPaymentToken.address] : [], - tokens: uniqBy( - [ - ...(asset?.value?.offer_payment_tokens ?? []), - ...(asset?.value?.order_payment_tokens ?? []), - ], - (x) => x.address, - ), - whitelist: paymentTokens.map((x) => x.address), - }} + tokens={paymentTokens} /> {!isAuction ? ( diff --git a/packages/mask/src/plugins/Collectible/SNSAdaptor/SelectTokenListPanel.tsx b/packages/mask/src/plugins/Collectible/SNSAdaptor/SelectTokenListPanel.tsx index c3f7796cfa3c..4151decbec3e 100644 --- a/packages/mask/src/plugins/Collectible/SNSAdaptor/SelectTokenListPanel.tsx +++ b/packages/mask/src/plugins/Collectible/SNSAdaptor/SelectTokenListPanel.tsx @@ -1,17 +1,8 @@ -import { FungibleTokenDetailed, isSameAddress } from '@masknet/web3-shared-evm' -import type { ERC20TokenListProps, TokenAmountPanelProps } from '@masknet/shared' -import { - FormControl, - InputAdornment, - ListItemIcon, - MenuItem, - MenuProps, - OutlinedInput, - Typography, -} from '@mui/material' -import { useMenu } from '../../../utils' +import { formatBalance, FungibleTokenDetailed, isSameAddress } from '@masknet/web3-shared-evm' +import { FormControl, InputAdornment, ListItemIcon, MenuItem, OutlinedInput, Typography } from '@mui/material' +import { useI18N, useMenu } from '../../../utils' import { useEffect, useState, useCallback, useRef, useMemo, ChangeEvent } from 'react' -import { TokenIcon } from '@masknet/shared' +import { FormattedBalance, TokenIcon } from '@masknet/shared' import { makeStyles } from '@masknet/theme' import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown' import Check from '@mui/icons-material/Check' @@ -20,12 +11,9 @@ export interface SelectTokenPanelProps { amount: string balance: string token?: FungibleTokenDetailed - disableNativeToken?: boolean onAmountChange: (amount: string) => void onTokenChange: (token: FungibleTokenDetailed) => void - FungibleTokenListProps?: Partial - TokenAmountPanelProps?: Partial - SelectMenuProps?: Partial + tokens?: FungibleTokenDetailed[] } const MIN_AMOUNT_LENGTH = 1 @@ -54,16 +42,8 @@ const useStyles = makeStyles()((theme) => ({ }, })) export function SelectTokenListPanel(props: SelectTokenPanelProps) { - const { - amount, - balance, - token, - disableNativeToken = false, - onAmountChange, - onTokenChange, - FungibleTokenListProps, - TokenAmountPanelProps, - } = props + const { t } = useI18N() + const { amount, balance, token, onAmountChange, onTokenChange, tokens = [] } = props const ref = useRef(null) const { classes } = useStyles() @@ -77,11 +57,11 @@ export function SelectTokenListPanel(props: SelectTokenPanelProps) { }, [ref.current]) useEffect(() => { - if (!FungibleTokenListProps?.tokens || FungibleTokenListProps.tokens.length <= 1) setHaveMenu(false) - }, [FungibleTokenListProps, token]) + if (tokens.length <= 1) setHaveMenu(false) + }, [tokens]) const [menu, openMenu] = useMenu( - FungibleTokenListProps?.tokens?.map((x, i) => { + tokens.map((x, i) => { return ( { if (!ref.current) return - openMenu(ref.current) }, [openMenu, ref.current]) @@ -147,9 +126,18 @@ export function SelectTokenListPanel(props: SelectTokenPanelProps) {
- Price + {t('plugin_collectible_price')} + + + {t('wallet_balance')}: + + {token?.symbol} - {`Balance: ${balance} ${token?.symbol}`}
Date: Mon, 10 Jan 2022 21:01:24 +0800 Subject: [PATCH 12/14] fix: can not input price --- .../src/plugins/Collectible/SNSAdaptor/MakeOfferDialog.tsx | 5 ++--- .../plugins/Collectible/SNSAdaptor/SelectTokenListPanel.tsx | 2 +- packages/web3-shared/evm/hooks/useFungibleTokenWatched.tsx | 1 + pnpm-lock.yaml | 6 +++--- 4 files changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/mask/src/plugins/Collectible/SNSAdaptor/MakeOfferDialog.tsx b/packages/mask/src/plugins/Collectible/SNSAdaptor/MakeOfferDialog.tsx index ae915573207e..38f4056c815e 100644 --- a/packages/mask/src/plugins/Collectible/SNSAdaptor/MakeOfferDialog.tsx +++ b/packages/mask/src/plugins/Collectible/SNSAdaptor/MakeOfferDialog.tsx @@ -92,8 +92,7 @@ export function MakeOfferDialog(props: MakeOfferDialogProps) { const [ToS_Checked, setToS_Checked] = useState(false) const [insufficientBalance, setInsufficientBalance] = useState(false) - const { amount: _amount, token, balance, setAmount, setToken } = useFungibleTokenWatched(selectedPaymentToken) - const amount = '' + const { amount, token, balance, setAmount, setToken } = useFungibleTokenWatched(selectedPaymentToken) const onMakeOffer = useCallback(async () => { if (!asset?.value) return @@ -139,7 +138,7 @@ export function MakeOfferDialog(props: MakeOfferDialogProps) { const validationMessage = useMemo(() => { setInsufficientBalance(false) - const amount_ = rightShift(amount ?? '0', token.value?.decimals ?? 0) + const amount_ = rightShift(amount ?? '0', Number.isNaN(token.value?.decimals ?? 0) ? 0 : token.value?.decimals) const balance_ = new BigNumber(balance.value ?? '0') if (amount_.isNaN() || amount_.isZero()) return t('plugin_collectible_enter_a_price') if (balance_.isZero() || amount_.isGreaterThan(balance_)) { diff --git a/packages/mask/src/plugins/Collectible/SNSAdaptor/SelectTokenListPanel.tsx b/packages/mask/src/plugins/Collectible/SNSAdaptor/SelectTokenListPanel.tsx index 4151decbec3e..6e686aaef730 100644 --- a/packages/mask/src/plugins/Collectible/SNSAdaptor/SelectTokenListPanel.tsx +++ b/packages/mask/src/plugins/Collectible/SNSAdaptor/SelectTokenListPanel.tsx @@ -129,7 +129,7 @@ export function SelectTokenListPanel(props: SelectTokenPanelProps) { {t('plugin_collectible_price')} - {t('wallet_balance')}: + {`${t('wallet_balance')}: `} Date: Tue, 25 Jan 2022 16:07:45 +0800 Subject: [PATCH 13/14] fix: reply review --- .../plugins/Collectible/SNSAdaptor/MakeOfferDialog.tsx | 2 +- .../Collectible/SNSAdaptor/SelectTokenListPanel.tsx | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/mask/src/plugins/Collectible/SNSAdaptor/MakeOfferDialog.tsx b/packages/mask/src/plugins/Collectible/SNSAdaptor/MakeOfferDialog.tsx index 38f4056c815e..cff8df940666 100644 --- a/packages/mask/src/plugins/Collectible/SNSAdaptor/MakeOfferDialog.tsx +++ b/packages/mask/src/plugins/Collectible/SNSAdaptor/MakeOfferDialog.tsx @@ -138,7 +138,7 @@ export function MakeOfferDialog(props: MakeOfferDialogProps) { const validationMessage = useMemo(() => { setInsufficientBalance(false) - const amount_ = rightShift(amount ?? '0', Number.isNaN(token.value?.decimals ?? 0) ? 0 : token.value?.decimals) + const amount_ = rightShift(amount ?? '0', token.value?.decimals || 0) const balance_ = new BigNumber(balance.value ?? '0') if (amount_.isNaN() || amount_.isZero()) return t('plugin_collectible_enter_a_price') if (balance_.isZero() || amount_.isGreaterThan(balance_)) { diff --git a/packages/mask/src/plugins/Collectible/SNSAdaptor/SelectTokenListPanel.tsx b/packages/mask/src/plugins/Collectible/SNSAdaptor/SelectTokenListPanel.tsx index 6e686aaef730..fcce62a5a556 100644 --- a/packages/mask/src/plugins/Collectible/SNSAdaptor/SelectTokenListPanel.tsx +++ b/packages/mask/src/plugins/Collectible/SNSAdaptor/SelectTokenListPanel.tsx @@ -104,7 +104,7 @@ export function SelectTokenListPanel(props: SelectTokenPanelProps) { openMenu(ref.current) }, [openMenu, ref.current]) - //#region update amount by self + // #region update amount by self const { RE_MATCH_WHOLE_AMOUNT, RE_MATCH_FRACTION_AMOUNT } = useMemo( () => ({ RE_MATCH_FRACTION_AMOUNT: new RegExp(`^\\.\\d{0,${token?.decimals}}$`), // .ddd...d @@ -120,7 +120,7 @@ export function SelectTokenListPanel(props: SelectTokenPanelProps) { }, [onAmountChange, RE_MATCH_WHOLE_AMOUNT, RE_MATCH_FRACTION_AMOUNT], ) - //#endregion + // #endregion return (
@@ -129,7 +129,7 @@ export function SelectTokenListPanel(props: SelectTokenPanelProps) { {t('plugin_collectible_price')} - {`${t('wallet_balance')}: `} + {t('wallet_balance')}: Date: Tue, 22 Feb 2022 21:20:58 +0800 Subject: [PATCH 14/14] fix: locale-kit error --- packages/mask/shared-ui/locales/en-US.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/mask/shared-ui/locales/en-US.json b/packages/mask/shared-ui/locales/en-US.json index d6d88f6b1f75..196a6eaf93a8 100644 --- a/packages/mask/shared-ui/locales/en-US.json +++ b/packages/mask/shared-ui/locales/en-US.json @@ -1027,5 +1027,6 @@ "plugin_artblocks_contract_row": "Contract:", "plugin_artblocks_smt_wrong": "Something went wrong!", "plugin_artblocks_share": "I just purchased a beautiful piece of art from '{{name}}' collection for {{price}} {{symbol}}. Install @realMaskNetwork to get yours.", - "plugin_artblocks_share_no_official_account": "I just purchased a beautiful piece of art from '{{name}}' collection for {{price}} {{symbol}}. Welcome to join." + "plugin_artblocks_share_no_official_account": "I just purchased a beautiful piece of art from '{{name}}' collection for {{price}} {{symbol}}. Welcome to join.", + "nft_button_set_avatar": "Set NFT Avatar" }