fix: sign page bugs

src/background/controller/provider/rpcFlow.ts

@@ -14,7 +14,6 @@ import * as Sentry from '@sentry/browser';
 import stats from '@/stats';
 import { addHexPrefix, stripHexPrefix } from 'ethereumjs-util';
 import { findChain } from '@/utils/chain';
-import browser from 'webextension-polyfill';
 
 const isSignApproval = (type: string) => {
   const SIGN_APPROVALS = ['SignText', 'SignTypedData', 'SignTx'];
@@ -25,7 +24,7 @@ const lockedOrigins = new Set<string>();
 const connectOrigins = new Set<string>();
 
 const getScreenAvailHeight = async () => {
-  return (await browser.windows.getCurrent()).height || 1000;
+  return 1000;
 };
 
 const flow = new PromiseFlow<{

src/constant/regexp.ts

@@ -0,0 +1,13 @@
+/**
+ * Regex for input number
+ * 1. Can't have more than one dot
+ * 2. Can't have more than one leading zero
+ * 3. Can't have non-numeric characters
+ */
+export const INPUT_NUMBER_RE = /^(?!0{2,})[0-9]*(?!.*\..*\.)[0-9.]*$/;
+
+// filter start with 0 or 0.
+// replace start with . to 0.
+export const filterNumber = (value: string = '') => {
+  return value.replace(/^0*(\d+)/, '$1').replace(/^\./, '0.');
+};

src/ui/component/TokenAmountInput/index.tsx

@@ -21,6 +21,7 @@ import { abstractTokenToTokenItem, getTokenSymbol } from 'ui/utils/token';
 import TokenSelector, { TokenSelectorProps } from '../TokenSelector';
 import TokenWithChain from '../TokenWithChain';
 import './style.less';
+import { INPUT_NUMBER_RE, filterNumber } from '@/constant/regexp';
 
 interface TokenAmountInputProps {
   token: TokenItem;
@@ -166,6 +167,12 @@ const TokenAmountInput = ({
 
   const valueNum = Number(value);
 
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (INPUT_NUMBER_RE.test(e.target.value)) {
+      onChange?.(filterNumber(e.target.value));
+    }
+  };
+
   return (
     <div className={clsx('token-amount-input', className)}>
       <div className="left" onClick={handleSelectToken}>
@@ -186,7 +193,7 @@ const TokenAmountInput = ({
           placeholder="0"
           className={clsx(!valueNum && 'h-[100%]')}
           value={value}
-          onChange={(e) => onChange && onChange(e.target.value)}
+          onChange={handleChange}
           title={value}
         />
         {inlinePrize && (

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

@@ -1,20 +1,25 @@
-import React, { useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button, Form, Input } from 'antd';
 import { useForm } from 'antd/lib/form/Form';
 import { Popup } from 'ui/component';
-import { useAlias } from '@/ui/utils';
 import IconEdit from 'ui/assets/editpen.svg';
+import { useApprovalUtils } from '../../../hooks/useApprovalUtils';
 
 const AddressMemo = ({ address }: { address: string }) => {
-  const [addressAlias, updateAlias] = useAlias(address);
+  const { alias } = useApprovalUtils();
+  const addressAlias = alias.accountMap[address]?.alias;
   const inputRef = useRef<Input>(null);
   const [form] = useForm();
   const { t } = useTranslation();
 
+  useEffect(() => {
+    alias.add(address);
+  }, [address]);
+
   const updateAddressMemo = (
     alias: string | undefined,
-    update: (memo: string) => void
+    update: (addr: string, memo: string) => void
   ) => {
     form.setFieldsValue({
       memo: alias,
@@ -34,7 +39,7 @@ const AddressMemo = ({ address }: { address: string }) => {
               form
                 .validateFields()
                 .then((values) => {
-                  return update(values.memo);
+                  return update(address, values.memo);
                 })
                 .then(() => {
                   destroy();
@@ -80,7 +85,7 @@ const AddressMemo = ({ address }: { address: string }) => {
   return (
     <div
       className="inline-flex cursor-pointer"
-      onClick={() => updateAddressMemo(addressAlias, updateAlias)}
+      onClick={() => updateAddressMemo(addressAlias, alias.update)}
     >
       <span className="mr-6">{addressAlias || '-'}</span>
       <img src={IconEdit} className="icon-edit-alias icon w-[13px]" />

src/ui/views/Approval/components/TxComponents/GasSelecter.tsx

@@ -29,6 +29,7 @@ import { Chain } from '@debank/common';
 import { getGasLevelI18nKey } from '@/ui/utils/trans';
 import ThemeIcon from '@/ui/component/ThemeMode/ThemeIcon';
 import { findChain } from '@/utils/chain';
+import { INPUT_NUMBER_RE, filterNumber } from '@/constant/regexp';
 
 export interface GasSelectorResponse extends GasLevel {
   gasLimit: number;
@@ -380,8 +381,8 @@ const GasSelector = ({
 
   const handleCustomGasChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     e.stopPropagation();
-    if (/^\d*(\.\d*)?$/.test(e.target.value)) {
-      setCustomGas(e.target.value);
+    if (INPUT_NUMBER_RE.test(e.target.value)) {
+      setCustomGas(filterNumber(e.target.value));
     }
   };
 
@@ -473,11 +474,8 @@ const GasSelector = ({
   ) => {
     e.stopPropagation();
 
-    if (/^\d*(\.\d*)?$/.test(e.target.value)) {
-      let value = e?.target?.value || '';
-      if (value.trim() === '.') {
-        value = '0.';
-      }
+    if (INPUT_NUMBER_RE.test(e.target.value)) {
+      const value = filterNumber(e.target.value);
       setCustomGas(value);
 
       const gasObj = {
@@ -652,11 +650,11 @@ const GasSelector = ({
             gas.error || !gas.success ? 'items-start mb-12' : 'mb-12'
           )}
         >
-          <div className="relative flex">
+          <div className="relative flex overflow-hidden">
             <div className="gas-selector-card-title">
               {t('page.signTx.gasSelectorTitle')}
             </div>
-            <div className="gas-selector-card-content ml-4">
+            <div className="gas-selector-card-content ml-4 overflow-hidden">
               {disabled ? (
                 <div className="font-semibold">
                   {t('page.signTx.noGasRequired')}
@@ -669,15 +667,17 @@ const GasSelector = ({
                 </>
               ) : (
                 <div className="gas-selector-card-content-item">
-                  <div className="gas-selector-card-amount translate-y-1 flex items-center">
-                    <span className="text-r-blue-default font-medium text-15">
+                  <div className="gas-selector-card-amount translate-y-1 flex items-center overflow-hidden">
+                    <span className="text-r-blue-default font-medium text-15 truncate">
                       {formatTokenAmount(
                         new BigNumber(gas.gasCostAmount).toString(10),
                         8
                       )}{' '}
                       {chain.nativeTokenSymbol}
                     </span>
-                    &nbsp; ≈${new BigNumber(gas.gasCostUsd).toFixed(2)}
+                    <span className="truncate">
+                      &nbsp; ≈${new BigNumber(gas.gasCostUsd).toFixed(2)}
+                    </span>
                     {L2_ENUMS.includes(chain.enum) &&
                       !CAN_ESTIMATE_L1_FEE_CHAINS.includes(chain.enum) && (
                         <span className="relative ml-6">
@@ -1070,7 +1070,6 @@ const GasSelectPanel = ({
                 'custom-input': item.level === 'custom',
                 active: selectedGas?.level === item.level,
               })}
-              title={new BigNumber(item.price / 1e9).toFixed()}
             >
               {item.level === 'custom' ? (
                 <Input

src/ui/views/Approval/hooks/useApprovalAlias.ts

@@ -0,0 +1,44 @@
+import { useWallet } from '@/ui/utils';
+import React from 'react';
+
+type AccountWithAliasName = {
+  address: string;
+  alias?: string;
+};
+
+export const useApprovalAlias = () => {
+  const [accounts, setAccounts] = React.useState<AccountWithAliasName[]>([]);
+  const wallet = useWallet();
+
+  const accountMap = React.useMemo(() => {
+    return accounts.reduce((acc, account) => {
+      acc[account.address] = account;
+      return acc;
+    }, {} as Record<string, AccountWithAliasName>);
+  }, [accounts]);
+
+  const add = React.useCallback(
+    async (address: string) => {
+      if (accounts.some((account) => account.address === address)) {
+        return accounts;
+      }
+      const alias = await wallet.getAlianName(address);
+      setAccounts([...accounts, { address, alias }]);
+    },
+    [accounts]
+  );
+
+  const update = React.useCallback((address: string, alias: string) => {
+    setAccounts((accounts) => {
+      return accounts.map((account) => {
+        if (account.address === address) {
+          wallet.updateAlianName(address, alias);
+          return { ...account, alias };
+        }
+        return account;
+      });
+    });
+  }, []);
+
+  return { accountMap, add, update };
+};

src/ui/views/Approval/hooks/useApprovalUtils.tsx

@@ -0,0 +1,30 @@
+import React, { createContext, useContext } from 'react';
+import { useApprovalAlias } from './useApprovalAlias';
+
+/**
+ * useApprovalUtils
+ * @description some global state for approval page
+ */
+const useApprovalUtilsState = () => {
+  const alias = useApprovalAlias();
+
+  return { alias };
+};
+
+const ApprovalUtilsContext = createContext<
+  ReturnType<typeof useApprovalUtilsState>
+>({} as any);
+
+export const useApprovalUtils = () => {
+  return useContext(ApprovalUtilsContext);
+};
+
+export const ApprovalUtilsProvider = ({ children }) => {
+  const value = useApprovalUtilsState();
+
+  return (
+    <ApprovalUtilsContext.Provider value={value}>
+      {children}
+    </ApprovalUtilsContext.Provider>
+  );
+};

src/ui/views/Approval/index.tsx

@@ -3,7 +3,7 @@ import { useHistory } from 'react-router-dom';
 import { Approval } from 'background/service/notification';
 import { useWallet, useApproval } from 'ui/utils';
 import { IExtractFromPromise } from '@/ui/utils/type';
-
+import { ApprovalUtilsProvider } from './hooks/useApprovalUtils';
 import * as ApprovalComponent from './components';
 
 import './style.less';
@@ -49,11 +49,13 @@ const Approval: React.FC<{
   return (
     <div className={clsx('approval', className)}>
       {approval && (
-        <CurrentApprovalComponent
-          params={params}
-          origin={origin}
-          // requestDefer={requestDefer}
-        />
+        <ApprovalUtilsProvider>
+          <CurrentApprovalComponent
+            params={params}
+            origin={origin}
+            // requestDefer={requestDefer}
+          />
+        </ApprovalUtilsProvider>
       )}
     </div>
   );

src/ui/views/SendToken/components/GasSelector.tsx

@@ -10,6 +10,7 @@ import styled from 'styled-components';
 import { BigNumber } from 'bignumber.js';
 import { getGasLevelI18nKey } from '@/ui/utils/trans';
 import { findChain } from '@/utils/chain';
+import { INPUT_NUMBER_RE, filterNumber } from '@/constant/regexp';
 
 interface GasSelectorProps {
   chainId: number;
@@ -71,8 +72,8 @@ const GasSelector = ({
 
   const handleCustomGasChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     e.stopPropagation();
-    if (/^\d*(\.\d*)?$/.test(e.target.value)) {
-      setCustomGas(e.target.value);
+    if (INPUT_NUMBER_RE.test(e.target.value)) {
+      setCustomGas(filterNumber(e.target.value));
     }
   };