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
RabbyHub · Jun 14, 2024 · 41cf9a6 · 41cf9a6
1 parent 27fc36d
commit 41cf9a6
Show file tree

Hide file tree

Showing 14 changed files with 105 additions and 40 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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 (
+    <AddressWrapper className="value-address relative">
+      <TooltipWithMagnetArrow
+        title={address}
+        className="rectangle w-[max-content]"
+      >
+        <div className="address-box" id={id}>
+          {ellipsis(address)}
+          <IconArrowRight className="icon-arrow-right" />
+        </div>
+      </TooltipWithMagnetArrow>
+    </AddressWrapper>
+  );
+};
+
+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)}
         </span>
@@ -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
@@ -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
@@ -60,7 +60,10 @@ export const CollectionPopup: React.FC<Props> = ({ data }) => {
         <Col>
           <Row>{t('page.signTx.contractAddress')}</Row>
           <Row>
-            <Values.Address address={data.collection.id} chain={data.chain} />
+            <Values.AddressWithCopy
+              address={data.collection.id}
+              chain={data.chain}
+            />
           </Row>
         </Col>
       </Table>

diff --git 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<Props> = ({ data }) => {
     <div>
       <div className="title">
         {data.title || t('page.signTx.interactContract')}{' '}
-        <Values.Address
+        <Values.AddressWithCopy
           address={data.address}
           chain={data.chain}
           iconWidth="14px"

diff --git a/src/ui/views/Approval/components/Actions/components/ViewMorePopup/NFTSpenderPopup.tsx b/src/ui/views/Approval/components/Actions/components/ViewMorePopup/NFTSpenderPopup.tsx
@@ -57,7 +57,7 @@ export const NFTSpenderPopup: React.FC<Props> = ({ data }) => {
         {data.isRevoke
           ? t('page.signTx.revokeTokenApprove.revokeFrom')
           : t('page.signTx.tokenApprove.approveTo')}{' '}
-        <Values.Address
+        <Values.AddressWithCopy
           address={data.spender}
           chain={data.chain}
           iconWidth="14px"

diff --git a/src/ui/views/Approval/components/Actions/components/ViewMorePopup/ReceiverPopup.tsx b/src/ui/views/Approval/components/Actions/components/ViewMorePopup/ReceiverPopup.tsx
@@ -87,7 +87,7 @@ export const ReceiverPopup: React.FC<Props> = ({ data }) => {
     <div>
       <div className="title">
         {data.title || t('page.signTx.send.sendTo')}{' '}
-        <Values.Address
+        <Values.AddressWithCopy
           address={data.address}
           chain={data.chain}
           iconWidth="14px"

diff --git a/src/ui/views/Approval/components/Actions/components/ViewMorePopup/SpenderPopup.tsx b/src/ui/views/Approval/components/Actions/components/ViewMorePopup/SpenderPopup.tsx
@@ -57,7 +57,7 @@ export const SpenderPopup: React.FC<Props> = ({ data }) => {
         {data.isRevoke
           ? t('page.signTx.revokeTokenApprove.revokeFrom')
           : t('page.signTx.tokenApprove.approveTo')}{' '}
-        <Values.Address
+        <Values.AddressWithCopy
           address={data.spender}
           chain={data.chain}
           iconWidth="14px"

diff --git a/src/ui/views/Approval/components/Actions/index.tsx b/src/ui/views/Approval/components/Actions/index.tsx
@@ -2,7 +2,6 @@ import { Result } from '@rabby-wallet/rabby-security-engine';
 import { Chain, ExplainTxResponse } from 'background/service/openapi';
 import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import styled from 'styled-components';
 import BalanceChange from '../TxComponents/BalanceChange';
 import ViewRawModal from '../TxComponents/ViewRawModal';
 import ApproveNFT from './ApproveNFT';
@@ -40,15 +39,9 @@ import {
   getActionTypeText,
   AssetOrderRequireData,
 } from './utils';
-import IconArrowRight, {
-  ReactComponent as RcIconArrowRight,
-} from 'ui/assets/approval/edit-arrow-right.svg';
+import { ReactComponent as RcIconArrowRight } from 'ui/assets/approval/edit-arrow-right.svg';
 import IconSpeedUp from 'ui/assets/sign/tx/speedup.svg';
 import { ReactComponent as IconQuestionMark } from 'ui/assets/sign/question-mark.svg';
-import IconRabbyDecoded from 'ui/assets/sign/rabby-decoded.svg';
-import IconCheck, {
-  ReactComponent as RcIconCheck,
-} from 'src/ui/assets/approval/icon-check.svg';
 import { TooltipWithMagnetArrow } from '@/ui/component/Tooltip/TooltipWithMagnetArrow';
 import { NoActionAlert } from '../NoActionAlert/NoActionAlert';
 import clsx from 'clsx';
@@ -61,7 +54,6 @@ import { Card } from '../Card';
 import { Divide } from '../Divide';
 import { Col, Row } from './components/Table';
 import LogoWithText from './components/LogoWithText';
-import { Tooltip } from 'antd';
 
 const Actions = ({
   data,
@@ -89,6 +81,34 @@ const Actions = ({
   const actionName = useMemo(() => {
     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}
           />
           <Divide />
-          <BalanceChange
-            version={txDetail.pre_exec_version}
-            data={txDetail.balance_change}
-          />
+          {!notShowBalanceChange && (
+            <BalanceChange
+              version={txDetail.pre_exec_version}
+              data={txDetail.balance_change}
+            />
+          )}
         </Card>
 
         <Card>

diff --git a/src/ui/views/Approval/components/CommonAction.tsx b/src/ui/views/Approval/components/CommonAction.tsx
@@ -139,21 +139,8 @@ export const CommonAction = ({
           <Row className="w-[100px]" isTitle>
             {t('page.signTx.common.description')}
           </Row>
-          <Row className="flex flex-row items-center gap-x-4">
-            <span className="break-all">{actionData.desc}</span>
-            {/* <TooltipWithMagnetArrow
-              overlayClassName="rectangle w-[260px]"
-              title={descTip}
-            >
-              {actionData.is_asset_changed ||
-              actionData.is_involving_privacy ? (
-                <img src={Warning2SVG} />
-              ) : null}
-              {!actionData.is_asset_changed &&
-              !actionData.is_involving_privacy ? (
-                <img src={CertifiedSVG} />
-              ) : null}
-            </TooltipWithMagnetArrow> */}
+          <Row className="flex flex-row items-center gap-x-4" wrap>
+            {actionData.desc}
           </Row>
         </Col>
         {(requireData as ContractCallRequireData)?.payNativeTokenAmount &&

diff --git a/src/ui/views/Approval/components/TxComponents/GasSelectorHeader.tsx b/src/ui/views/Approval/components/TxComponents/GasSelectorHeader.tsx
@@ -777,7 +777,7 @@ const GasSelectorHeader = ({
             )}
           </div>
           {gas.success && (
-            <div className="text-r-neutral-body text-14 mt-2 flex-shrink-0 cursor-pointer">
+            <div className="text-r-neutral-body text-14 mt-2 flex-shrink-0">
               {isGasHovering
                 ? calcGasEstimated(selectedGas?.estimated_seconds)
                 : `~${gasCostAmountStr}`}

diff --git 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;