From 41cf9a62a47ccadddcd4a4d775168f53f73a3c8a Mon Sep 17 00:00:00 2001 From: vvvvvv1vvvvvv <86296331+vvvvvv1vvvvvv@users.noreply.github.com> Date: Fri, 14 Jun 2024 16:45:47 +0800 Subject: [PATCH] feat: not display balance change in some conditions (#2322) * feat: not display balance change in some conditions * fix: CI * fix: remove yarnPath * feat: background color of sign * fix: some style issue * fix: wrap --- src/constant/theme-colors.js | 2 + src/ui/style/cssvars.css | 6 +++ .../components/Actions/components/Table.tsx | 2 + .../components/Actions/components/Values.tsx | 49 +++++++++++++++++-- .../Actions/components/ViewMore.tsx | 2 + .../ViewMorePopup/CollectionPopup.tsx | 5 +- .../ViewMorePopup/ContractPopup.tsx | 2 +- .../ViewMorePopup/NFTSpenderPopup.tsx | 2 +- .../ViewMorePopup/ReceiverPopup.tsx | 2 +- .../components/ViewMorePopup/SpenderPopup.tsx | 2 +- .../Approval/components/Actions/index.tsx | 48 +++++++++++++----- .../Approval/components/CommonAction.tsx | 17 +------ .../TxComponents/GasSelectorHeader.tsx | 2 +- src/ui/views/Approval/style.less | 4 +- 14 files changed, 105 insertions(+), 40 deletions(-) diff --git a/src/constant/theme-colors.js b/src/constant/theme-colors.js index ecacbc1e10f..9e2bb900d2b 100644 --- a/src/constant/theme-colors.js +++ b/src/constant/theme-colors.js @@ -28,6 +28,7 @@ const themeColors = { 'neutral-bg-2': 'rgba(242, 244, 247, 1)', 'neutral-bg3': 'rgba(247, 250, 252, 1)', 'neutral-bg-3': 'rgba(247, 250, 252, 1)', + 'neutral-bg-4': 'rgba(235, 238, 247, 1)', 'neutral-card1': 'rgba(255, 255, 255, 1)', 'neutral-card-1': 'rgba(255, 255, 255, 1)', 'neutral-card2': 'rgba(242, 244, 247, 1)', @@ -67,6 +68,7 @@ const themeColors = { 'neutral-bg-2': 'rgba(28, 31, 43, 1)', 'neutral-bg3': 'rgba(28, 31, 43, 1)', 'neutral-bg-3': 'rgba(28, 31, 43, 1)', + 'neutral-bg-4': 'rgba(32, 36, 54, 1)', 'neutral-card1': 'rgba(255, 255, 255, 0.06)', 'neutral-card-1': 'rgba(255, 255, 255, 0.06)', 'neutral-card2': 'rgba(255, 255, 255, 0.06)', diff --git a/src/ui/style/cssvars.css b/src/ui/style/cssvars.css index 6ca0fc59933..40ef4f35976 100644 --- a/src/ui/style/cssvars.css +++ b/src/ui/style/cssvars.css @@ -31,6 +31,7 @@ --rabby-light-neutral-bg-2: rgba(242, 244, 247, 1); --rabby-light-neutral-bg3: rgba(247, 250, 252, 1); --rabby-light-neutral-bg-3: rgba(247, 250, 252, 1); + --rabby-light-neutral-bg-4: rgba(235, 238, 247, 1); --rabby-light-neutral-card1: rgba(255, 255, 255, 1); --rabby-light-neutral-card-1: rgba(255, 255, 255, 1); --rabby-light-neutral-card2: rgba(242, 244, 247, 1); @@ -67,6 +68,7 @@ --rabby-dark-neutral-bg-2: rgba(28, 31, 43, 1); --rabby-dark-neutral-bg3: rgba(28, 31, 43, 1); --rabby-dark-neutral-bg-3: rgba(28, 31, 43, 1); + --rabby-dark-neutral-bg-4: rgba(32, 36, 54, 1); --rabby-dark-neutral-card1: rgba(255, 255, 255, 0.06); --rabby-dark-neutral-card-1: rgba(255, 255, 255, 0.06); --rabby-dark-neutral-card2: rgba(255, 255, 255, 0.06); @@ -132,6 +134,8 @@ --r-neutral-bg3: var(--rabby-light-neutral-bg3); --r-neutral-bg-3-rgb: 247, 250, 252; --r-neutral-bg-3: var(--rabby-light-neutral-bg-3); + --r-neutral-bg-4-rgb: 235, 238, 247; + --r-neutral-bg-4: var(--rabby-light-neutral-bg-4); --r-neutral-card1-rgb: 255, 255, 255; --r-neutral-card1: var(--rabby-light-neutral-card1); --r-neutral-card-1-rgb: 255, 255, 255; @@ -206,6 +210,8 @@ html.dark, body.dark { --r-neutral-bg3: var(--rabby-dark-neutral-bg3); --r-neutral-bg-3-rgb: 28, 31, 43; --r-neutral-bg-3: var(--rabby-dark-neutral-bg-3); + --r-neutral-bg-4-rgb: 32, 36, 54; + --r-neutral-bg-4: var(--rabby-dark-neutral-bg-4); --r-neutral-card1-rgb: 255, 255, 255; --r-neutral-card1: var(--rabby-dark-neutral-card1); --r-neutral-card-1-rgb: 255, 255, 255; diff --git a/src/ui/views/Approval/components/Actions/components/Table.tsx b/src/ui/views/Approval/components/Actions/components/Table.tsx index efcf003874b..f6e83fd2dee 100644 --- a/src/ui/views/Approval/components/Actions/components/Table.tsx +++ b/src/ui/views/Approval/components/Actions/components/Table.tsx @@ -68,6 +68,8 @@ const RowWrapper = styled.div` &.title { flex-shrink: 0; flex: 1; + color: var(--r-neutral-title, #192945); + font-weight: 400; .icon-tip { display: inline; diff --git a/src/ui/views/Approval/components/Actions/components/Values.tsx b/src/ui/views/Approval/components/Actions/components/Values.tsx index c25f556d66b..06b35c6615f 100644 --- a/src/ui/views/Approval/components/Actions/components/Values.tsx +++ b/src/ui/views/Approval/components/Actions/components/Values.tsx @@ -19,8 +19,7 @@ import IconScam from 'ui/assets/sign/tx/token-scam.svg'; import IconFake from 'ui/assets/sign/tx/token-fake.svg'; import { ReactComponent as IconAddressCopy } from 'ui/assets/icon-copy-cc.svg'; import { ReactComponent as IconExternal } from 'ui/assets/icon-share-currentcolor.svg'; -import IconInteracted from 'ui/assets/sign/tx/interacted.svg'; -import IconNotInteracted from 'ui/assets/sign/tx/not-interacted.svg'; +import { ReactComponent as IconArrowRight } from 'ui/assets/sign/arrow-right-lite.svg'; import { TooltipWithMagnetArrow } from '@/ui/component/Tooltip/TooltipWithMagnetArrow'; import AccountAlias from '../../AccountAlias'; import { getAddressScanLink } from '@/utils'; @@ -295,6 +294,23 @@ const TokenLabel = ({ const AddressWrapper = styled.div` display: flex; + .address-box { + padding: 3px 6px; + border: 0.5px solid var(--r-neutral-line, #d3d8e0); + cursor: pointer; + color: var(--r-neutral-title1, #192945); + font-size: 14px; + font-weight: 500; + border-radius: 900px; + display: flex; + .icon-arrow-right { + margin-left: 2px; + } + &:hover { + border-color: var(--r-blue-default, #7084ff); + background-color: var(--r-blue-light1, #eef1ff); + } + } `; const Address = ({ address, @@ -309,7 +325,32 @@ const Address = ({ hasHover?: boolean; id?: string; }) => { - const { t } = useTranslation(); + return ( + + +
+ {ellipsis(address)} + +
+ + + ); +}; + +const AddressWithCopy = ({ + address, + chain, + iconWidth = '14px', + hasHover = false, +}: { + address: string; + chain?: Chain; + iconWidth?: string; + hasHover?: boolean; +}) => { const handleClickContractId = (e) => { e.stopPropagation(); if (!chain) return; @@ -332,7 +373,6 @@ const Address = ({ 'cursor-pointer group-hover:underline hover:text-r-blue-default': hasHover && !isHoverToolbar, })} - id={id} > {ellipsis(address)} @@ -469,4 +509,5 @@ export { TokenSymbol, AccountAlias, KnownAddress, + AddressWithCopy, }; diff --git a/src/ui/views/Approval/components/Actions/components/ViewMore.tsx b/src/ui/views/Approval/components/Actions/components/ViewMore.tsx index 364df0ceab9..7115beb07fa 100644 --- a/src/ui/views/Approval/components/Actions/components/ViewMore.tsx +++ b/src/ui/views/Approval/components/Actions/components/ViewMore.tsx @@ -51,6 +51,7 @@ const PopupContainer = styled.div` padding: 0px 16px; display: flex; flex-direction: column; + font-weight: 400; .col { display: flex; @@ -62,6 +63,7 @@ const PopupContainer = styled.div` .row { &:nth-child(1) { color: var(--r-neutral-body, #3e495e); + font-weight: 400; justify-content: flex-start; align-items: center; } diff --git a/src/ui/views/Approval/components/Actions/components/ViewMorePopup/CollectionPopup.tsx b/src/ui/views/Approval/components/Actions/components/ViewMorePopup/CollectionPopup.tsx index bb54d02ec5d..19147e0aff8 100644 --- a/src/ui/views/Approval/components/Actions/components/ViewMorePopup/CollectionPopup.tsx +++ b/src/ui/views/Approval/components/Actions/components/ViewMorePopup/CollectionPopup.tsx @@ -60,7 +60,10 @@ export const CollectionPopup: React.FC = ({ data }) => { {t('page.signTx.contractAddress')} - + diff --git a/src/ui/views/Approval/components/Actions/components/ViewMorePopup/ContractPopup.tsx b/src/ui/views/Approval/components/Actions/components/ViewMorePopup/ContractPopup.tsx index 4c4a49c9bf5..34252da426f 100644 --- a/src/ui/views/Approval/components/Actions/components/ViewMorePopup/ContractPopup.tsx +++ b/src/ui/views/Approval/components/Actions/components/ViewMorePopup/ContractPopup.tsx @@ -51,7 +51,7 @@ export const ContractPopup: React.FC = ({ data }) => {
{data.title || t('page.signTx.interactContract')}{' '} - = ({ data }) => { {data.isRevoke ? t('page.signTx.revokeTokenApprove.revokeFrom') : t('page.signTx.tokenApprove.approveTo')}{' '} - = ({ data }) => {
{data.title || t('page.signTx.send.sendTo')}{' '} - = ({ data }) => { {data.isRevoke ? t('page.signTx.revokeTokenApprove.revokeFrom') : t('page.signTx.tokenApprove.approveTo')}{' '} - { return getActionTypeText(data); }, [data]); + + const notShowBalanceChange = useMemo(() => { + if ( + data.approveNFT || + data.approveNFTCollection || + data.approveToken || + data.cancelTx || + data.deployContract || + data.pushMultiSig || + data.revokeNFT || + data.revokeNFTCollection || + data.revokeToken + ) { + const balanceChange = txDetail.balance_change; + if (!txDetail.pre_exec.success) return false; + if ( + balanceChange.receive_nft_list.length + + balanceChange.receive_token_list.length + + balanceChange.send_nft_list.length + + balanceChange.send_nft_list.length <= + 0 + ) { + return true; + } + } + return false; + }, [data, txDetail]); + const { t } = useTranslation(); const handleViewRawClick = () => { @@ -111,10 +131,12 @@ const Actions = ({ engineResults={engineResults} /> - + {!notShowBalanceChange && ( + + )} diff --git a/src/ui/views/Approval/components/CommonAction.tsx b/src/ui/views/Approval/components/CommonAction.tsx index f4ba9854cf9..8dd29d167aa 100644 --- a/src/ui/views/Approval/components/CommonAction.tsx +++ b/src/ui/views/Approval/components/CommonAction.tsx @@ -139,21 +139,8 @@ export const CommonAction = ({ {t('page.signTx.common.description')} - - {actionData.desc} - {/* - {actionData.is_asset_changed || - actionData.is_involving_privacy ? ( - - ) : null} - {!actionData.is_asset_changed && - !actionData.is_involving_privacy ? ( - - ) : null} - */} + + {actionData.desc} {(requireData as ContractCallRequireData)?.payNativeTokenAmount && diff --git a/src/ui/views/Approval/components/TxComponents/GasSelectorHeader.tsx b/src/ui/views/Approval/components/TxComponents/GasSelectorHeader.tsx index 1d2c5ec7b11..07e028883e3 100644 --- a/src/ui/views/Approval/components/TxComponents/GasSelectorHeader.tsx +++ b/src/ui/views/Approval/components/TxComponents/GasSelectorHeader.tsx @@ -777,7 +777,7 @@ const GasSelectorHeader = ({ )}
{gas.success && ( -
+
{isGasHovering ? calcGasEstimated(selectedGas?.estimated_seconds) : `~${gasCostAmountStr}`} diff --git a/src/ui/views/Approval/style.less b/src/ui/views/Approval/style.less index 11716ffb0fc..10d359268fc 100644 --- a/src/ui/views/Approval/style.less +++ b/src/ui/views/Approval/style.less @@ -187,7 +187,7 @@ flex: 1; overflow: auto; // background-color: var(--r-neutral-bg-1, #fff); - background: var(--r-neutral-bg-2, #F2F4F7); + background: var(--r-neutral-bg-4, #F2F4F7); .view-raw { line-height: 16px !important; @@ -641,7 +641,7 @@ padding: 15px 18px 25px; display: flex; flex-direction: column; - background: var(--r-neutral-bg-2, #3D4251); + background: var(--r-neutral-bg-4, #3D4251); flex: 1; margin-bottom: -10px; row-gap: 12px;