From aa3f9d2224ae36484a0b3a76a537a3d934c27164 Mon Sep 17 00:00:00 2001
From: heisenberg <heisenberg-2077@outlook.com>
Date: Wed, 22 May 2024 12:28:32 +0800
Subject: [PATCH] feat: text & typeddata header

---
 src/ui/views/Approval/components/SignText.tsx |   1 +
 .../Approval/components/SignTypedData.tsx     |   1 +
 .../Approval/components/TextActions/index.tsx | 138 +++---
 .../components/TypedDataActions/index.tsx     | 432 +++++++++---------
 4 files changed, 289 insertions(+), 283 deletions(-)

diff --git a/src/ui/views/Approval/components/SignText.tsx b/src/ui/views/Approval/components/SignText.tsx
index 8a5fc7fb374..d51e26b03d7 100644
--- a/src/ui/views/Approval/components/SignText.tsx
+++ b/src/ui/views/Approval/components/SignText.tsx
@@ -360,6 +360,7 @@ const SignText = ({ params }: { params: SignTextProps }) => {
             raw={hexData}
             message={signText}
             origin={params.session.origin}
+            originLogo={params.session.icon}
           />
         )}
       </div>
diff --git a/src/ui/views/Approval/components/SignTypedData.tsx b/src/ui/views/Approval/components/SignTypedData.tsx
index d0f6ad234fb..dbf7643a137 100644
--- a/src/ui/views/Approval/components/SignTypedData.tsx
+++ b/src/ui/views/Approval/components/SignTypedData.tsx
@@ -538,6 +538,7 @@ const SignTypedData = ({ params }: { params: SignTypedDataProps }) => {
             raw={isSignTypedDataV1 ? data[0] : signTypedData || data[1]}
             message={parsedMessage}
             origin={params.session.origin}
+            originLogo={params.session.icon}
           />
         )}
         {!isLoading && chain?.isTestnet ? (
diff --git a/src/ui/views/Approval/components/TextActions/index.tsx b/src/ui/views/Approval/components/TextActions/index.tsx
index 4c57a34dd26..dcd6ce42fce 100644
--- a/src/ui/views/Approval/components/TextActions/index.tsx
+++ b/src/ui/views/Approval/components/TextActions/index.tsx
@@ -10,7 +10,7 @@ import IconArrowRight, {
 import CreateKey from './CreateKey';
 import VerifyAddress from './VerifyAddress';
 import { TooltipWithMagnetArrow } from '@/ui/component/Tooltip/TooltipWithMagnetArrow';
-import IconQuestionMark from 'ui/assets/sign/question-mark-24.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,
@@ -21,6 +21,8 @@ import { NoActionAlert } from '../NoActionAlert/NoActionAlert';
 import ThemeIcon from '@/ui/component/ThemeMode/ThemeIcon';
 import { CommonAction } from '../CommonAction';
 import { ActionWrapper } from '../ActionWrapper';
+import { Card } from '../Card';
+import { OriginInfo } from '../OriginInfo';
 
 const { TabPane } = Tabs;
 
@@ -104,12 +106,14 @@ const Actions = ({
   raw,
   message,
   origin,
+  originLogo,
 }: {
   data: TextActionData | null;
   engineResults: Result[];
   raw: string;
   message: string;
   origin: string;
+  originLogo?: string;
 }) => {
   const actionName = useMemo(() => {
     return getActionTypeText(data);
@@ -120,7 +124,8 @@ const Actions = ({
   const handleViewRawClick = () => {
     Popup.info({
       closable: true,
-      height: 720,
+      height: 520,
+      isNew: true,
       content: (
         <Tabs defaultActiveKey="raw">
           {raw && (
@@ -138,70 +143,77 @@ const Actions = ({
 
   return (
     <>
-      <SignTitle>
-        <div className="left relative">{t('page.signText.title')}</div>
-        <div
-          className="float-right text-12 cursor-pointer flex items-center view-raw"
-          onClick={handleViewRawClick}
-        >
-          {t('page.signTx.viewRaw')}
-          <ThemeIcon className="icon icon-arrow-right" src={RcIconArrowRight} />
-        </div>
-      </SignTitle>
       <ActionWrapper isEmptyBody={isUnknown}>
-        <div
-          className={clsx('action-header', {
-            'is-unknown': isUnknown,
-          })}
-        >
-          <div className="left">{actionName}</div>
-          <div className="right">
-            <TooltipWithMagnetArrow
-              placement="bottom"
-              overlayClassName="rectangle w-[max-content] decode-tooltip"
-              title={
-                isUnknown ? (
-                  <NoActionAlert
-                    data={{
-                      origin,
-                      text: message,
-                    }}
-                  />
-                ) : (
-                  <span className="flex w-[358px] p-12 items-center">
-                    <ThemeIcon src={RcIconCheck} className="mr-4 w-12" />
-                    {t('page.signTx.decodedTooltip')}
-                  </span>
-                )
-              }
-            >
-              {isUnknown ? (
-                <img src={IconQuestionMark} className="w-24" />
-              ) : (
-                <img
-                  src={IconRabbyDecoded}
-                  className="icon icon-rabby-decoded"
-                />
+        <Card>
+          <OriginInfo
+            origin={origin}
+            originLogo={originLogo}
+            engineResults={engineResults}
+          />
+        </Card>
+
+        <Card>
+          <div
+            className={clsx('action-header', {
+              'is-unknown': isUnknown,
+            })}
+          >
+            <div className="left">
+              <span>{actionName}</span>
+              {isUnknown && (
+                <TooltipWithMagnetArrow
+                  placement="bottom"
+                  overlayClassName="rectangle w-[max-content] decode-tooltip"
+                  title={
+                    <NoActionAlert
+                      data={{
+                        origin,
+                        text: message,
+                      }}
+                    />
+                  }
+                >
+                  <IconQuestionMark className="w-14 text-r-neutral-foot ml-2 mt-2" />
+                </TooltipWithMagnetArrow>
               )}
-            </TooltipWithMagnetArrow>
-          </div>
-        </div>
-        {data && (
-          <div className="container">
-            {data.createKey && (
-              <CreateKey data={data.createKey} engineResults={engineResults} />
-            )}
-            {data.verifyAddress && (
-              <VerifyAddress
-                data={data.verifyAddress}
-                engineResults={engineResults}
-              />
-            )}
-            {data.common && (
-              <CommonAction data={data.common} engineResults={engineResults} />
-            )}
+            </div>
+            <div className="right">
+              <div
+                className="float-right text-12 cursor-pointer flex items-center view-raw"
+                onClick={handleViewRawClick}
+              >
+                {t('page.signTx.viewRaw')}
+                <ThemeIcon
+                  className="icon icon-arrow-right"
+                  src={RcIconArrowRight}
+                />
+              </div>
+            </div>
           </div>
-        )}
+
+          {data && (
+            <div className="container">
+              {data.createKey && (
+                <CreateKey
+                  data={data.createKey}
+                  engineResults={engineResults}
+                />
+              )}
+              {data.verifyAddress && (
+                <VerifyAddress
+                  data={data.verifyAddress}
+                  engineResults={engineResults}
+                />
+              )}
+              {data.common && (
+                <CommonAction
+                  data={data.common}
+                  engineResults={engineResults}
+                />
+              )}
+            </div>
+          )}
+        </Card>
       </ActionWrapper>
       <MessageWrapper
         className={clsx({
diff --git a/src/ui/views/Approval/components/TypedDataActions/index.tsx b/src/ui/views/Approval/components/TypedDataActions/index.tsx
index c50cb058e76..1258585e5e8 100644
--- a/src/ui/views/Approval/components/TypedDataActions/index.tsx
+++ b/src/ui/views/Approval/components/TypedDataActions/index.tsx
@@ -29,7 +29,7 @@ import BatchSellNFT from './BatchSellNFT';
 import BatchPermit2 from './BatchPermit2';
 import Send from '../Actions/Send';
 import { TooltipWithMagnetArrow } from '@/ui/component/Tooltip/TooltipWithMagnetArrow';
-import IconQuestionMark from 'ui/assets/sign/question-mark-24.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,
@@ -52,6 +52,8 @@ import {
   SendRequireData,
 } from '../Actions/utils';
 import { Chain } from '@debank/common';
+import { OriginInfo } from '../OriginInfo';
+import { Card } from '../Card';
 
 export const SignTitle = styled.div`
   display: flex;
@@ -136,6 +138,7 @@ const Actions = ({
   raw,
   message,
   origin,
+  originLogo,
 }: {
   data: TypedDataActionData | null;
   requireData: TypedDataRequireData;
@@ -144,6 +147,7 @@ const Actions = ({
   raw: Record<string, any>;
   message: string;
   origin: string;
+  originLogo?: string;
 }) => {
   const { t } = useTranslation();
 
@@ -160,229 +164,217 @@ const Actions = ({
 
   return (
     <>
-      <SignTitle>
-        <div className="left relative">
-          {t('page.signTypedData.signTypeDataOnChain', {
-            chain: chain ? chain.name : '',
-          })}
-        </div>
-        <div
-          className="float-right text-12 cursor-pointer flex items-center view-raw"
-          onClick={handleViewRawClick}
-        >
-          {t('page.signTx.viewRaw')}
-          <ThemeIcon className="icon icon-arrow-right" src={RcIconArrowRight} />
-        </div>
-      </SignTitle>
-
       <ActionWrapper>
-        <div
-          className={clsx('action-header', {
-            'is-unknown': isUnknown,
-          })}
-        >
-          <div className="left flex items-center">
-            {data?.brand ? (
-              <img
-                src={data?.brand?.logo_url}
-                title={data?.brand?.name}
-                className="mr-8 w-20 h-20 rounded-full object-cover"
-              />
-            ) : null}
-            <span>{actionName}</span>
-          </div>
-          <div className="right">
-            <TooltipWithMagnetArrow
-              placement="bottom"
-              overlayClassName="rectangle w-[max-content] decode-tooltip"
-              title={
-                isUnknown ? (
-                  <NoActionAlert
-                    data={{
-                      origin,
-                      text: message,
-                    }}
-                  />
-                ) : (
-                  <span className="flex w-[358px] p-12 items-center">
-                    <ThemeIcon src={RcIconCheck} className="mr-4 w-12" />
-                    {t('page.signTx.decodedTooltip')}
-                  </span>
-                )
-              }
-            >
-              {isUnknown ? (
-                <img src={IconQuestionMark} className="w-24" />
-              ) : (
-                <img
-                  src={IconRabbyDecoded}
-                  className="icon icon-rabby-decoded"
-                />
+        <Card>
+          <OriginInfo
+            chain={chain}
+            origin={origin}
+            originLogo={originLogo}
+            engineResults={engineResults}
+          />
+        </Card>
+
+        <Card>
+          <div
+            className={clsx('action-header', {
+              'is-unknown': isUnknown,
+            })}
+          >
+            <div className="left">
+              <span>{actionName}</span>
+              {isUnknown && (
+                <TooltipWithMagnetArrow
+                  placement="bottom"
+                  overlayClassName="rectangle w-[max-content] decode-tooltip"
+                  title={
+                    <NoActionAlert
+                      data={{
+                        origin,
+                        text: message,
+                      }}
+                    />
+                  }
+                >
+                  <IconQuestionMark className="w-14 text-r-neutral-foot ml-2 mt-2" />
+                </TooltipWithMagnetArrow>
               )}
-            </TooltipWithMagnetArrow>
-          </div>
-        </div>
-        {chain?.isTestnet ? (
-          <>
-            <div className="p-[15px] whitespace-pre-wrap break-all overflow-y-auto text-[13px] leading-[16px] text-r-neutral-body h-[260px] font-medium">
-              {JSON.stringify(raw, null, 2)}
             </div>
-          </>
-        ) : (
-          <>
-            {(data?.actionType || data?.actionType === null) && (
-              <div className="container">
-                {data.permit && (
-                  <Permit
-                    data={data.permit}
-                    requireData={requireData as ApproveTokenRequireData}
-                    chain={chain}
-                    engineResults={engineResults}
-                  />
-                )}
-                {data.revokePermit && chain && (
-                  <RevokePermit2
-                    data={data.revokePermit}
-                    requireData={requireData as RevokeTokenApproveRequireData}
-                    chain={chain}
-                    engineResults={engineResults}
-                  />
-                )}
-                {data.permit2 && chain && (
-                  <Permit2
-                    data={data.permit2}
-                    requireData={requireData as ApproveTokenRequireData}
-                    chain={chain}
-                    engineResults={engineResults}
-                  />
-                )}
-                {data.approveNFT && chain && (
-                  <ApproveNFT
-                    data={data.approveNFT}
-                    requireData={requireData as ApproveNFTRequireData}
-                    chain={chain}
-                    engineResults={engineResults}
-                  />
-                )}
-                {data.batchPermit2 && chain && (
-                  <BatchPermit2
-                    data={data.batchPermit2}
-                    requireData={requireData as BatchApproveTokenRequireData}
-                    chain={chain}
-                    engineResults={engineResults}
-                  />
-                )}
-                {data.swapTokenOrder && chain && (
-                  <SwapTokenOrder
-                    data={data.swapTokenOrder}
-                    requireData={requireData as SwapTokenOrderRequireData}
-                    chain={chain}
-                    engineResults={engineResults}
-                  />
-                )}
-                {data.buyNFT && chain && (
-                  <BuyNFT
-                    data={data.buyNFT}
-                    requireData={requireData as ContractRequireData}
-                    chain={chain}
-                    engineResults={engineResults}
-                    sender={data.sender}
-                  />
-                )}
-                {data.batchSellNFT && chain && (
-                  <BatchSellNFT
-                    data={data.batchSellNFT}
-                    requireData={requireData as ContractRequireData}
-                    chain={chain}
-                    engineResults={engineResults}
-                    sender={data.sender}
-                  />
-                )}
-                {data.sellNFT && chain && (
-                  <SellNFT
-                    data={data.sellNFT}
-                    requireData={requireData as ContractRequireData}
-                    chain={chain}
-                    engineResults={engineResults}
-                    sender={data.sender}
-                  />
-                )}
-                {data.assetOrder && chain && (
-                  <AssetOrder
-                    data={data.assetOrder}
-                    requireData={requireData as ContractRequireData}
-                    chain={chain}
-                    engineResults={engineResults}
-                    sender={data.sender}
-                  />
-                )}
-                {data.signMultiSig && (
-                  <SignMultisig
-                    data={data.signMultiSig}
-                    requireData={requireData as MultiSigRequireData}
-                    chain={chain}
-                    engineResults={engineResults}
-                  />
-                )}
-                {data.send && chain && (
-                  <Send
-                    data={data.send}
-                    requireData={requireData as SendRequireData}
-                    chain={chain}
-                    engineResults={engineResults}
-                  />
-                )}
-                {data.createKey && (
-                  <CreateKey
-                    data={data.createKey}
-                    engineResults={engineResults}
-                  />
-                )}
-                {data.verifyAddress && (
-                  <VerifyAddress
-                    data={data.verifyAddress}
-                    engineResults={engineResults}
-                  />
-                )}
-                {data.contractCall && chain && (
-                  <ContractCall
-                    data={data.permit}
-                    requireData={requireData as ContractRequireData}
-                    chain={chain}
-                    engineResults={engineResults}
-                    raw={raw}
-                  />
-                )}
-                {data.coboSafeCreate && (
-                  <CoboSafeCreate data={data.coboSafeCreate} />
-                )}
-                {data.coboSafeModificationRole && (
-                  <CoboSafeModificationRule
-                    data={data.coboSafeModificationRole}
-                  />
-                )}
-                {data.coboSafeModificationDelegatedAddress && (
-                  <CoboSafeModificationDelegatedAddress
-                    data={data.coboSafeModificationDelegatedAddress}
-                  />
-                )}
-                {data.coboSafeModificationTokenApproval && (
-                  <CoboSafeModificationTokenApproval
-                    data={data.coboSafeModificationTokenApproval}
-                  />
-                )}
-                {data.common && (
-                  <CommonAction
-                    data={data.common}
-                    requireData={requireData as ContractRequireData}
-                    chain={chain}
-                    engineResults={engineResults}
-                  />
-                )}
+            <div className="right">
+              <div
+                className="float-right text-12 cursor-pointer flex items-center view-raw"
+                onClick={handleViewRawClick}
+              >
+                {t('page.signTx.viewRaw')}
+                <ThemeIcon
+                  className="icon icon-arrow-right"
+                  src={RcIconArrowRight}
+                />
               </div>
-            )}
-          </>
-        )}
+            </div>
+          </div>
+
+          {chain?.isTestnet ? (
+            <>
+              <div className="p-[15px] whitespace-pre-wrap break-all overflow-y-auto text-[13px] leading-[16px] text-r-neutral-body h-[260px] font-medium">
+                {JSON.stringify(raw, null, 2)}
+              </div>
+            </>
+          ) : (
+            <>
+              {(data?.actionType || data?.actionType === null) && (
+                <div className="container">
+                  {data.permit && (
+                    <Permit
+                      data={data.permit}
+                      requireData={requireData as ApproveTokenRequireData}
+                      chain={chain}
+                      engineResults={engineResults}
+                    />
+                  )}
+                  {data.revokePermit && chain && (
+                    <RevokePermit2
+                      data={data.revokePermit}
+                      requireData={requireData as RevokeTokenApproveRequireData}
+                      chain={chain}
+                      engineResults={engineResults}
+                    />
+                  )}
+                  {data.permit2 && chain && (
+                    <Permit2
+                      data={data.permit2}
+                      requireData={requireData as ApproveTokenRequireData}
+                      chain={chain}
+                      engineResults={engineResults}
+                    />
+                  )}
+                  {data.approveNFT && chain && (
+                    <ApproveNFT
+                      data={data.approveNFT}
+                      requireData={requireData as ApproveNFTRequireData}
+                      chain={chain}
+                      engineResults={engineResults}
+                    />
+                  )}
+                  {data.batchPermit2 && chain && (
+                    <BatchPermit2
+                      data={data.batchPermit2}
+                      requireData={requireData as BatchApproveTokenRequireData}
+                      chain={chain}
+                      engineResults={engineResults}
+                    />
+                  )}
+                  {data.swapTokenOrder && chain && (
+                    <SwapTokenOrder
+                      data={data.swapTokenOrder}
+                      requireData={requireData as SwapTokenOrderRequireData}
+                      chain={chain}
+                      engineResults={engineResults}
+                    />
+                  )}
+                  {data.buyNFT && chain && (
+                    <BuyNFT
+                      data={data.buyNFT}
+                      requireData={requireData as ContractRequireData}
+                      chain={chain}
+                      engineResults={engineResults}
+                      sender={data.sender}
+                    />
+                  )}
+                  {data.batchSellNFT && chain && (
+                    <BatchSellNFT
+                      data={data.batchSellNFT}
+                      requireData={requireData as ContractRequireData}
+                      chain={chain}
+                      engineResults={engineResults}
+                      sender={data.sender}
+                    />
+                  )}
+                  {data.sellNFT && chain && (
+                    <SellNFT
+                      data={data.sellNFT}
+                      requireData={requireData as ContractRequireData}
+                      chain={chain}
+                      engineResults={engineResults}
+                      sender={data.sender}
+                    />
+                  )}
+                  {data.assetOrder && chain && (
+                    <AssetOrder
+                      data={data.assetOrder}
+                      requireData={requireData as ContractRequireData}
+                      chain={chain}
+                      engineResults={engineResults}
+                      sender={data.sender}
+                    />
+                  )}
+                  {data.signMultiSig && (
+                    <SignMultisig
+                      data={data.signMultiSig}
+                      requireData={requireData as MultiSigRequireData}
+                      chain={chain}
+                      engineResults={engineResults}
+                    />
+                  )}
+                  {data.send && chain && (
+                    <Send
+                      data={data.send}
+                      requireData={requireData as SendRequireData}
+                      chain={chain}
+                      engineResults={engineResults}
+                    />
+                  )}
+                  {data.createKey && (
+                    <CreateKey
+                      data={data.createKey}
+                      engineResults={engineResults}
+                    />
+                  )}
+                  {data.verifyAddress && (
+                    <VerifyAddress
+                      data={data.verifyAddress}
+                      engineResults={engineResults}
+                    />
+                  )}
+                  {data.contractCall && chain && (
+                    <ContractCall
+                      data={data.permit}
+                      requireData={requireData as ContractRequireData}
+                      chain={chain}
+                      engineResults={engineResults}
+                      raw={raw}
+                    />
+                  )}
+                  {data.coboSafeCreate && (
+                    <CoboSafeCreate data={data.coboSafeCreate} />
+                  )}
+                  {data.coboSafeModificationRole && (
+                    <CoboSafeModificationRule
+                      data={data.coboSafeModificationRole}
+                    />
+                  )}
+                  {data.coboSafeModificationDelegatedAddress && (
+                    <CoboSafeModificationDelegatedAddress
+                      data={data.coboSafeModificationDelegatedAddress}
+                    />
+                  )}
+                  {data.coboSafeModificationTokenApproval && (
+                    <CoboSafeModificationTokenApproval
+                      data={data.coboSafeModificationTokenApproval}
+                    />
+                  )}
+                  {data.common && (
+                    <CommonAction
+                      data={data.common}
+                      requireData={requireData as ContractRequireData}
+                      chain={chain}
+                      engineResults={engineResults}
+                    />
+                  )}
+                </div>
+              )}
+            </>
+          )}
+        </Card>
       </ActionWrapper>
       <MessageWrapper
         className={clsx({