feat: feedback for unsupported sign types and chains (#1765)

* feat: feedback for unsupported sign types and chains

* fix: remove console

_raw/locales/en/messages.json

@@ -1250,7 +1250,13 @@
     "switchChain": {
       "title": "Switching to {{chain}}",
       "chainNotSupport": "The requested chain is not supported by Rabby yet",
-      "testnetTip": "Please turn on \"Enable Testnets\" under \"More\" before connecting to testnets"
+      "testnetTip": "Please turn on \"Enable Testnets\" under \"More\" before connecting to testnets",
+      "chainNotSupportYet": "The requested chain is not supported by Rabby yet",
+      "chainId": "Chain ID:",
+      "unknownChain": "Unknown chain",
+      "requestsReceived": "1 request received",
+      "requestsReceivedPlural": "{{count}} requests received",
+      "requestRabbyToSupport": "Request Rabby to Support"
     },
     "signText": {
       "title": "Sign Text",

package.json

@@ -42,7 +42,7 @@
     "@rabby-wallet/eth-watch-keyring": "^1.0.0",
     "@rabby-wallet/gnosis-sdk": "^1.3.5",
     "@rabby-wallet/page-provider": "^0.1.20",
-    "@rabby-wallet/rabby-api": "^0.6.21",
+    "@rabby-wallet/rabby-api": "^0.6.22",
     "@rabby-wallet/rabby-security-engine": "^1.1.16",
     "@rabby-wallet/rabby-swap": "^0.0.29",
     "@rabby-wallet/widgets": "^1.0.9",

src/background/controller/provider/controller.ts

@@ -50,7 +50,7 @@ import { Account } from 'background/service/preference';
 import { validateGasPriceRange, is1559Tx } from '@/utils/transaction';
 import stats from '@/stats';
 import BigNumber from 'bignumber.js';
-import { AddEthereumChainParams } from 'ui/views/Approval/components/AddChain';
+import { AddEthereumChainParams } from '@/ui/views/Approval/components/AddChain/type';
 import { formatTxMetaForRpcResult } from 'background/utils/tx';
 import { findChainByEnum } from '@/utils/chain';
 import eventBus from '@/eventBus';

src/background/controller/wallet.ts

@@ -3296,6 +3296,8 @@ export class WalletController extends BaseController {
       isModuleEnabled,
     };
   };
+
+  updateNotificationWinProps = notificationService.updateNotificationWinProps;
 }
 
 const wallet = new WalletController();

src/background/service/notification.ts

@@ -1,4 +1,4 @@
-import { browser } from 'webextension-polyfill-ts';
+import { Windows, browser } from 'webextension-polyfill-ts';
 import Events from 'events';
 import { ethErrors } from 'eth-rpc-errors';
 import { v4 as uuidv4 } from 'uuid';
@@ -378,6 +378,12 @@ class NotificationService extends Events {
     });
   };
 
+  updateNotificationWinProps = (winProps: Windows.UpdateUpdateInfoType) => {
+    if (this.notifiWindowId !== null) {
+      browser.windows.update(this.notifiWindowId!, winProps);
+    }
+  };
+
   setCurrentRequestDeferFn = (fn: () => void) => {
     this.currentRequestDeferFn = fn;
   };

src/ui/views/Approval/components/Actions/index.tsx

@@ -42,6 +42,7 @@ import IconArrowRight 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/tx/question-mark.svg';
 import { TooltipWithMagnetArrow } from '@/ui/component/Tooltip/TooltipWithMagnetArrow';
+import { NoActionAlert } from '../NoActionAlert/NoActionAlert';
 
 export const SignTitle = styled.div`
   display: flex;
@@ -170,24 +171,24 @@ const Actions = ({
           <img className="icon icon-arrow-right" src={IconArrowRight} />
         </div>
       </SignTitle>
+      {data.contractCall && (
+        <NoActionAlert
+          data={{
+            chainId: chain.serverId,
+            contractAddress:
+              requireData && 'id' in requireData
+                ? requireData.id
+                : txDetail.type_call?.contract,
+            selector: raw.data.toString(),
+          }}
+        />
+      )}
       <ActionWrapper>
-        <div className="action-header">
-          <div className="left">{actionName}</div>
-          <div className="right">
-            {data.contractCall && (
-              <span className="flex items-center relative">
-                {t('page.signTx.unknownActionType')}{' '}
-                <TooltipWithMagnetArrow
-                  overlayClassName="rectangle w-[max-content]"
-                  title={t('page.signTx.sigCantDecode')}
-                  placement="top"
-                >
-                  <IconQuestionMark className="icon icon-tip" />
-                </TooltipWithMagnetArrow>
-              </span>
-            )}
+        {!data.contractCall && (
+          <div className="action-header">
+            <div className="left">{actionName}</div>
           </div>
-        </div>
+        )}
         <div className="container">
           {data.swap && (
             <Swap

src/ui/views/Approval/components/AddChain.tsx → src/ui/views/Approval/components/AddChain/AddChain.tsx

@@ -3,28 +3,17 @@ import { TooltipWithMagnetArrow } from '@/ui/component/Tooltip/TooltipWithMagnet
 import { useRabbySelector } from '@/ui/store';
 import { CHAINS_LIST, Chain } from '@debank/common';
 import { useSetState } from 'ahooks';
-import { Button, Tooltip } from 'antd';
+import { Button } from 'antd';
 import BigNumber from 'bignumber.js';
 import { CHAINS } from 'consts';
 import { intToHex } from 'ethereumjs-util';
 import React, { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import styled from 'styled-components';
-import IconWarning from 'ui/assets/warning.svg';
 import { FallbackSiteLogo } from 'ui/component';
 import { useApproval, useWallet } from 'ui/utils';
-
-export interface AddEthereumChainParams {
-  chainId: string;
-  chainName: string;
-  nativeCurrency: {
-    name: string;
-    symbol: string;
-    decimals: number;
-  };
-  rpcUrls: string[];
-  blockExplorerUrls: string[];
-}
+import { OptionsWrapper, Footer } from './style';
+import { UnsupportedAlert } from './UnsupportedAlert';
+import { AddEthereumChainParams } from './type';
 
 interface AddChainProps {
   data: AddEthereumChainParams[];
@@ -35,94 +24,6 @@ interface AddChainProps {
   };
 }
 
-const OptionsWrapper = styled.div`
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-
-  .content {
-    padding: 20px;
-  }
-
-  .title {
-    color: #13141a;
-    font-size: 20px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: normal;
-    margin-bottom: 40px;
-  }
-  .connect-site-card {
-    border-radius: 8px;
-    background: #f5f6fa;
-    display: inline-flex;
-    padding: 28px 28px 32px 28px;
-    width: 100%;
-    flex-direction: column;
-    align-items: center;
-    gap: 14px;
-    margin-bottom: 40px;
-
-    .site-origin {
-      color: #13141a;
-      text-align: center;
-      font-size: 22px;
-      font-style: normal;
-      font-weight: 500;
-      line-height: normal;
-    }
-  }
-  .switch-chain {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: 12px;
-  }
-  .chain-card {
-    display: flex;
-    width: 260px;
-    padding: 12px;
-    justify-content: center;
-    align-items: center;
-    gap: 8px;
-    border-radius: 6px;
-    border: 1px solid #e5e9ef;
-
-    color: #13141a;
-    font-size: 20px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: normal;
-
-    img {
-      width: 24px;
-      height: 24px;
-      border-radius: 50%;
-      flex-shrink: 0;
-    }
-  }
-`;
-
-const Footer = styled.div`
-  margin-top: auto;
-  height: 76px;
-  border-top: 1px solid #e5e9ef;
-  padding: 16px 20px;
-  display: flex;
-  justify-content: space-between;
-  .ant-btn-primary[disabled],
-  .ant-btn-primary[disabled]:hover,
-  .ant-btn-primary[disabled]:focus,
-  .ant-btn-primary[disabled]:active {
-    background-color: rgba(112, 132, 255, 0.4);
-    border: none;
-    &:before {
-      display: none;
-    }
-  }
-`;
-
 const AddChain = ({ params }: { params: AddChainProps }) => {
   const wallet = useWallet();
   const [, resolveApproval, rejectApproval] = useApproval();
@@ -182,6 +83,14 @@ const AddChain = ({ params }: { params: AddChainProps }) => {
     init();
   }, []);
 
+  useEffect(() => {
+    if (state.isShowUnsupportAlert) {
+      wallet.updateNotificationWinProps({
+        height: 388,
+      });
+    }
+  }, [state.isShowUnsupportAlert]);
+
   const handleConfirm = () => {
     resolveApproval();
   };
@@ -200,26 +109,7 @@ const AddChain = ({ params }: { params: AddChainProps }) => {
   if (!inited) return <></>;
 
   if (state.isShowUnsupportAlert) {
-    return (
-      <OptionsWrapper>
-        <div className="flex-1 px-28 pt-80">
-          <img src={IconWarning} className="w-[68px] h-[68px] mb-28 mx-auto" />
-          <div className="text-gray-title text-20 w-[344px] mx-auto font-medium text-center">
-            {t('page.switchChain.chainNotSupport')}
-          </div>
-        </div>
-        <Footer className="justify-center">
-          <Button
-            type="primary"
-            size="large"
-            className="w-[200px]"
-            onClick={() => rejectApproval()}
-          >
-            {t('global.ok')}
-          </Button>
-        </Footer>
-      </OptionsWrapper>
-    );
+    return <UnsupportedAlert data={data[0]} />;
   }
 
   if (state.isSwitchToMainnet || state.isSwitchToTestnet) {