From c8978266e74fe218fde5ab0fa5b6b4c49add7509 Mon Sep 17 00:00:00 2001
From: heisenberg <heisenberg-2077@outlook.com>
Date: Mon, 20 May 2024 16:23:41 +0800
Subject: [PATCH] feat: send nft

---
 _raw/locales/en/messages.json                 |   3 +-
 _raw/locales/zh-CN/messages.json              |   3 +-
 .../Approval/components/Actions/Send.tsx      |   8 +
 .../Approval/components/Actions/SendNFT.tsx   | 203 ++++++++++--------
 .../Actions/components/LogoWithText.tsx       |   1 +
 .../Actions/components/NFTWithName.tsx        |  16 +-
 .../Actions/components/SecurityListItem.tsx   |   4 +-
 .../components/Actions/components/Table.tsx   |  12 +-
 .../components/Actions/components/Values.tsx  |   4 +-
 .../Dashboard/components/NFT/NFTAvatar.tsx    |   2 +-
 10 files changed, 153 insertions(+), 103 deletions(-)

diff --git a/_raw/locales/en/messages.json b/_raw/locales/en/messages.json
index f23282f5c77..f127a1fc136 100644
--- a/_raw/locales/en/messages.json
+++ b/_raw/locales/en/messages.json
@@ -299,7 +299,8 @@
       "no": "No",
       "hasInteraction": "Interacted before",
       "address": "Address",
-      "advancedSettings": "Advanced Settings"
+      "advancedSettings": "Advanced Settings",
+      "amount": "Amount"
     },
     "signFooterBar": {
       "requestFrom": "Request from",
diff --git a/_raw/locales/zh-CN/messages.json b/_raw/locales/zh-CN/messages.json
index b09d490c3e3..f8243d5bea2 100644
--- a/_raw/locales/zh-CN/messages.json
+++ b/_raw/locales/zh-CN/messages.json
@@ -1373,7 +1373,8 @@
       "no": "否",
       "yes": "是",
       "address": "地址",
-      "advancedSettings": "高级设置"
+      "advancedSettings": "高级设置",
+      "amount": "数量"
     },
     "signTypedData": {
       "buyNFT": {
diff --git a/src/ui/views/Approval/components/Actions/Send.tsx b/src/ui/views/Approval/components/Actions/Send.tsx
index 42ad1bbafc0..1f61f483108 100644
--- a/src/ui/views/Approval/components/Actions/Send.tsx
+++ b/src/ui/views/Approval/components/Actions/Send.tsx
@@ -103,6 +103,12 @@ const Send = ({
           </Row>
         </Col>
         <SubTable target="send-contract">
+          <SubCol>
+            <SubRow isTitle>{t('page.signTx.addressNote')}</SubRow>
+            <SubRow>
+              <Values.AddressMemo address={actionData.to} />
+            </SubRow>
+          </SubCol>
           {!!requireData.name && (
             <SubCol>
               <SubRow isTitle>{t('page.signTx.protocol')} </SubRow>
@@ -138,11 +144,13 @@ const Send = ({
                 </SubRow>
               </SubCol>
               <SecurityListItem
+                noTitle
                 engineResult={engineResultMap['1021']}
                 dangerText={t('page.signTx.send.notTopupAddress')}
                 id="1021"
               />
               <SecurityListItem
+                noTitle
                 engineResult={engineResultMap['1020']}
                 dangerText={t('page.signTx.send.tokenNotSupport', [
                   ellipsisTokenSymbol(getTokenSymbol(actionData.token)),
diff --git a/src/ui/views/Approval/components/Actions/SendNFT.tsx b/src/ui/views/Approval/components/Actions/SendNFT.tsx
index 501192030e3..4011ab22817 100644
--- a/src/ui/views/Approval/components/Actions/SendNFT.tsx
+++ b/src/ui/views/Approval/components/Actions/SendNFT.tsx
@@ -11,6 +11,7 @@ import NFTWithName from './components/NFTWithName';
 import * as Values from './components/Values';
 import ViewMore from './components/ViewMore';
 import { SecurityListItem } from './components/SecurityListItem';
+import { SubCol, SubRow, SubTable } from './components/SubTable';
 
 const Wrapper = styled.div`
   .header {
@@ -77,102 +78,126 @@ const SendNFT = ({
       <Table>
         <Col>
           <Row isTitle>{t('page.signTx.sendNFT.title')}</Row>
-          <Row>
-            <NFTWithName nft={actionData?.nft}></NFTWithName>
-            <ul className="desc-list">
-              {actionData?.nft?.amount > 1 && (
-                <li>Amount: {actionData?.nft?.amount}</li>
-              )}
-              <li>
-                <ViewMore
-                  type="nft"
-                  data={{
-                    nft: actionData.nft,
-                    chain,
-                  }}
-                />
-              </li>
-            </ul>
+          <Row className="overflow-hidden">
+            <ViewMore
+              type="nft"
+              data={{
+                nft: actionData.nft,
+                chain,
+              }}
+            >
+              <NFTWithName
+                id="send-nft"
+                hasHover
+                nft={actionData?.nft}
+              ></NFTWithName>
+            </ViewMore>
           </Row>
         </Col>
+        <SubTable target="send-nft">
+          {actionData?.nft?.amount > 1 && (
+            <SubCol>
+              <SubRow isTitle>{t('page.signTx.amount')}</SubRow>
+              <SubRow>{actionData?.nft?.amount}</SubRow>
+            </SubCol>
+          )}
+        </SubTable>
         <Col>
           <Row isTitle>{t('page.signTx.send.sendTo')}</Row>
           <Row>
-            <div>
-              <Values.Address address={actionData.to} chain={chain} />
-              <ul className="desc-list">
-                <li>
-                  <Values.AddressMemo address={actionData.to} />
-                </li>
-                {requireData.name && <li>{requireData.name}</li>}
-                <SecurityListItem
-                  engineResult={engineResultMap['1016']}
-                  dangerText={t('page.signTx.send.receiverIsTokenAddress')}
-                  id="1016"
-                />
-                <SecurityListItem
-                  engineResult={engineResultMap['1037']}
-                  dangerText={t('page.signTx.send.contractNotOnThisChain')}
-                  id="1037"
-                />
-                {requireData.cex && (
-                  <>
-                    <li>
-                      <LogoWithText
-                        logo={requireData.cex.logo}
-                        text={requireData.cex.name}
-                        logoSize={14}
-                        textStyle={{
-                          fontSize: '13px',
-                          lineHeight: '15px',
-                          color: '#4B4D59',
-                          fontWeight: 'normal',
-                        }}
-                      />
-                    </li>
-                    <SecurityListItem
-                      engineResult={engineResultMap['1039']}
-                      dangerText={t('page.signTx.send.notTopupAddress')}
-                      id="1039"
-                    />
-                    <SecurityListItem
-                      engineResult={engineResultMap['1038']}
-                      dangerText={t('page.signTx.sendNFT.nftNotSupport')}
-                      id="1038"
-                    />
-                  </>
-                )}
-                <SecurityListItem
-                  engineResult={engineResultMap['1036']}
-                  warningText={<Values.Transacted value={false} />}
-                  id="1036"
-                />
-                <SecurityListItem
-                  engineResult={engineResultMap['1042']}
-                  safeText={t('page.signTx.send.onMyWhitelist')}
-                  id="1042"
-                />
-                <li>
-                  <ViewMore
-                    type="receiver"
-                    data={{
-                      address: actionData.to,
-                      chain,
-                      eoa: requireData.eoa,
-                      cex: requireData.cex,
-                      contract: requireData.contract,
-                      usd_value: requireData.usd_value,
-                      hasTransfer: requireData.hasTransfer,
-                      isTokenContract: requireData.isTokenContract,
-                      name: requireData.name,
-                      onTransferWhitelist: requireData.onTransferWhitelist,
-                    }}
-                  />
-                </li>
-              </ul>
-            </div>
+            <ViewMore
+              type="receiver"
+              data={{
+                address: actionData.to,
+                chain,
+                eoa: requireData.eoa,
+                cex: requireData.cex,
+                contract: requireData.contract,
+                usd_value: requireData.usd_value,
+                hasTransfer: requireData.hasTransfer,
+                isTokenContract: requireData.isTokenContract,
+                name: requireData.name,
+                onTransferWhitelist: requireData.onTransferWhitelist,
+              }}
+            >
+              <Values.Address
+                hasHover
+                id="send-nft-address"
+                address={actionData.to}
+                chain={chain}
+              />
+            </ViewMore>
           </Row>
         </Col>
+        <SubTable target="send-nft-address">
+          <SubCol>
+            <SubRow isTitle>{t('page.signTx.addressNote')}</SubRow>
+            <SubRow>
+              <Values.AddressMemo address={actionData.to} />
+            </SubRow>
+          </SubCol>
+          {!!requireData.name && (
+            <SubCol>
+              <SubRow isTitle>{t('page.signTx.protocolTitle')}</SubRow>
+              <SubRow>{requireData.name}</SubRow>
+            </SubCol>
+          )}
+          <SecurityListItem
+            engineResult={engineResultMap['1016']}
+            dangerText={t('page.signTx.send.receiverIsTokenAddress')}
+            id="1016"
+          />
+          <SecurityListItem
+            engineResult={engineResultMap['1037']}
+            dangerText={t('page.signTx.send.contractNotOnThisChain')}
+            id="1037"
+          />
+          {requireData.cex && (
+            <>
+              <SubCol>
+                <SubRow isTitle>{t('page.signTx.send.cexAddress')}</SubRow>
+                <SubRow>
+                  {' '}
+                  <LogoWithText
+                    logo={requireData.cex.logo}
+                    text={requireData.cex.name}
+                    logoSize={14}
+                    textStyle={{
+                      fontSize: '13px',
+                      lineHeight: '15px',
+                      color: '#4B4D59',
+                      fontWeight: 'normal',
+                    }}
+                  />
+                </SubRow>
+              </SubCol>
+              <SecurityListItem
+                noTitle
+                engineResult={engineResultMap['1039']}
+                dangerText={t('page.signTx.send.notTopupAddress')}
+                id="1039"
+              />
+              <SecurityListItem
+                noTitle
+                engineResult={engineResultMap['1038']}
+                dangerText={t('page.signTx.sendNFT.nftNotSupport')}
+                id="1038"
+              />
+            </>
+          )}
+          <SecurityListItem
+            title={t('page.signTx.transacted')}
+            engineResult={engineResultMap['1036']}
+            warningText={<Values.Transacted value={false} />}
+            id="1036"
+          />
+          <SecurityListItem
+            title={t('page.signTx.send.whitelistTitle')}
+            engineResult={engineResultMap['1042']}
+            safeText={t('page.signTx.send.onMyWhitelist')}
+            id="1042"
+          />
+        </SubTable>
       </Table>
     </Wrapper>
   );
diff --git a/src/ui/views/Approval/components/Actions/components/LogoWithText.tsx b/src/ui/views/Approval/components/Actions/components/LogoWithText.tsx
index 4181716989a..823ec90ee08 100644
--- a/src/ui/views/Approval/components/Actions/components/LogoWithText.tsx
+++ b/src/ui/views/Approval/components/Actions/components/LogoWithText.tsx
@@ -8,6 +8,7 @@ import IconUnknown from 'ui/assets/token-default.svg';
 const Wrapper = styled.div`
   display: flex;
   align-items: center;
+  justify-content: flex-end;
   .logo {
     width: 16px;
     height: 16px;
diff --git a/src/ui/views/Approval/components/Actions/components/NFTWithName.tsx b/src/ui/views/Approval/components/Actions/components/NFTWithName.tsx
index 8728d74cb8f..e8083702eef 100644
--- a/src/ui/views/Approval/components/Actions/components/NFTWithName.tsx
+++ b/src/ui/views/Approval/components/Actions/components/NFTWithName.tsx
@@ -45,26 +45,35 @@ const NFTWithName = ({
   nft,
   textStyle,
   showTokenLabel = false,
+  id,
+  hasHover,
 }: {
   nft: NFTItem;
   textStyle?: React.CSSProperties;
   showTokenLabel?: boolean;
+  id?: string;
+  hasHover?: boolean;
 }) => {
   const [focusingNFT, setFocusingNFT] = React.useState<NFTItem | null>(null);
   return (
     <>
       <Wrapper>
         <NFTAvatar
-          onPreview={() => setFocusingNFT(nft)}
+          onPreview={(e) => {
+            e.stopPropagation();
+            setFocusingNFT(nft);
+          }}
           className="nft-item-avatar"
           thumbnail
           content={nft?.content}
           type={nft?.content_type}
         />
         <div
+          id={id}
           style={textStyle}
           className={clsx('name', {
             'flex-1': !showTokenLabel,
+            'cursor-pointer group-hover:underline hover:text-r-blue-default': hasHover,
           })}
           title={nft?.name || '-'}
         >
@@ -88,7 +97,10 @@ const NFTWithName = ({
       {focusingNFT && (
         <ModalPreviewNFTItem
           nft={(focusingNFT as unknown) as TransferingNFTItem}
-          onCancel={() => setFocusingNFT(null)}
+          onCancel={(e) => {
+            e.stopPropagation();
+            setFocusingNFT(null);
+          }}
         />
       )}
     </>
diff --git a/src/ui/views/Approval/components/Actions/components/SecurityListItem.tsx b/src/ui/views/Approval/components/Actions/components/SecurityListItem.tsx
index 70273761827..457ee52d44a 100644
--- a/src/ui/views/Approval/components/Actions/components/SecurityListItem.tsx
+++ b/src/ui/views/Approval/components/Actions/components/SecurityListItem.tsx
@@ -13,6 +13,7 @@ export interface Props {
   defaultText?: string | React.ReactNode;
   forbiddenText?: string | React.ReactNode;
   title?: string;
+  noTitle?: boolean;
 }
 
 export const SecurityListItem: React.FC<Props> = ({
@@ -24,6 +25,7 @@ export const SecurityListItem: React.FC<Props> = ({
   defaultText,
   forbiddenText,
   title,
+  noTitle = false,
 }) => {
   if (!engineResult) {
     if (defaultText) {
@@ -40,7 +42,7 @@ export const SecurityListItem: React.FC<Props> = ({
 
   return (
     <SubCol>
-      <SubRow isTitle>{displayTitle}</SubRow>
+      <SubRow isTitle>{noTitle ? '' : displayTitle}</SubRow>
       <SubRow>
         <div className="text-13 leading-[15px]">
           <span>
diff --git a/src/ui/views/Approval/components/Actions/components/Table.tsx b/src/ui/views/Approval/components/Actions/components/Table.tsx
index 1dbe2567d65..445edaeec57 100644
--- a/src/ui/views/Approval/components/Actions/components/Table.tsx
+++ b/src/ui/views/Approval/components/Actions/components/Table.tsx
@@ -43,7 +43,7 @@ const RowWrapper = styled.div`
   color: var(--r-neutral-body, #3e495e);
   white-space: nowrap;
   display: flex;
-  align-items: center;
+  align-items: flex-start;
 
   &:not(.title) {
     text-align: right;
@@ -64,14 +64,14 @@ const RowWrapper = styled.div`
   }
   .desc-list {
     font-size: 13px;
-    line-height: 15px;
-    color: var(--r-neutral-body, #3e495e);
+    line-height: 16px;
+    color: var(--r-neutral-foot, #6a7587);
     margin: 0;
     font-weight: 400;
     li {
       padding-left: 10px;
       margin-bottom: 8px;
-      padding-right: 10px;
+      padding-right: 0;
       position: relative;
       &::before {
         content: '';
@@ -79,12 +79,12 @@ const RowWrapper = styled.div`
         left: 3px;
         width: 3px;
         height: 3px;
-        background-color: var(--r-neutral-body);
+        background-color: var(--r-neutral-foot, #6a7587);
         border-radius: 100%;
         top: 6px;
       }
       &:nth-child(1) {
-        margin-top: 8px;
+        margin-top: 4px;
       }
       &:nth-last-child(1) {
         margin-bottom: 0;
diff --git a/src/ui/views/Approval/components/Actions/components/Values.tsx b/src/ui/views/Approval/components/Actions/components/Values.tsx
index 37a3dab3af9..ab21b3f7e81 100644
--- a/src/ui/views/Approval/components/Actions/components/Values.tsx
+++ b/src/ui/views/Approval/components/Actions/components/Values.tsx
@@ -390,12 +390,12 @@ const Transacted = ({ value }: { value: boolean }) => {
       {value ? (
         <>
           <img src={IconInteracted} className="mr-4 w-14" />{' '}
-          {t('page.signTx.transacted')}
+          {t('page.signTx.yes')}
         </>
       ) : (
         <>
           <img src={IconNotInteracted} className="mr-4 w-14" />{' '}
-          {t('page.signTx.neverTransacted')}
+          {t('page.signTx.no')}
         </>
       )}
     </span>
diff --git a/src/ui/views/Dashboard/components/NFT/NFTAvatar.tsx b/src/ui/views/Dashboard/components/NFT/NFTAvatar.tsx
index f33db9ee3f0..5f65069c182 100644
--- a/src/ui/views/Dashboard/components/NFT/NFTAvatar.tsx
+++ b/src/ui/views/Dashboard/components/NFT/NFTAvatar.tsx
@@ -17,7 +17,7 @@ type AvatarProps = {
   type?: NFTItem['content_type'];
   className?: string;
   style?: React.CSSProperties;
-  onPreview?: () => void;
+  onPreview?: (e) => void;
   amount?: number;
   unknown?: string;
 };