fix: footbar

_raw/locales/en/messages.json

@@ -37,7 +37,7 @@
       "gasLimitLessThanGasUsed": "Gas limit is too low. There is 95% chance that the transaction may fail.",
       "nativeTokenNotEngouthForGas": "Gas balance is not enough for transaction",
       "nonceLowerThanExpect": "Nonce is too low, the minimum should be {{0}}",
-      "canOnlyUseImportedAddress": "You can only use imported addresses to sign",
+      "canOnlyUseImportedAddress": "You cannot sign transactions with a watch-only address.",
       "multiSigChainNotMatch": "Multi-signature addresses are not on this chain and cannot initiate transactions",
       "safeAddressNotSupportChain": "Current safe address is not supported on {{0}} chain",
       "noGasRequired": "No gas required",

src/ui/utils/hooks.ts

@@ -16,7 +16,7 @@ export const useApproval = () => {
   const { showPopup, enablePopup } = useApprovalPopup();
 
   const getApproval: () => Promise<Approval> = wallet.getApproval;
-  const connectDevice = useDeviceConnect();
+  const deviceConnect = useDeviceConnect();
 
   const resolveApproval = async (
     data?: any,
@@ -25,7 +25,7 @@ export const useApproval = () => {
     approvalId?: string
   ) => {
     // handle connect
-    if (!connectDevice(data.type)) {
+    if (!deviceConnect(data.type)) {
       return;
     }
 

src/ui/utils/useDeviceConnect.ts

@@ -2,27 +2,55 @@ import { KEYRING_CLASS } from '@/constant';
 import React from 'react';
 import { useLedgerStatus } from '../component/ConnectStatus/useLedgerStatus';
 import { useCommonPopupView } from './WalletContext';
+import { useSessionStatus } from '../component/WalletConnect/useSessionStatus';
+import { useCurrentAccount } from '../hooks/backgroundState/useAccount';
+import { useImKeyStatus } from '../component/ConnectStatus/useImKeyStatus';
 
 /**
  * some devices require a connection to the device to sign transactions
  * ledger, walletConnect, gridplus, etc
  */
 export const useDeviceConnect = () => {
   const ledgerStatus = useLedgerStatus();
-  const { activePopup } = useCommonPopupView();
+  const account = useCurrentAccount();
+  const walletConnectStatus = useSessionStatus(account!);
+  const imKeyStatus = useImKeyStatus();
+  const { activePopup, setAccount } = useCommonPopupView();
 
+  /**
+   * @returns {boolean} true if connected, false if not connected and popup is shown
+   */
   const connect = React.useCallback(
     (type: string) => {
       if (type === KEYRING_CLASS.HARDWARE.LEDGER) {
         if (ledgerStatus.status === 'DISCONNECTED') {
           activePopup('Ledger');
           return false;
         }
+      } else if (type === KEYRING_CLASS.WALLETCONNECT) {
+        if (
+          !walletConnectStatus.status ||
+          walletConnectStatus.status === 'DISCONNECTED'
+        ) {
+          if (account) {
+            setAccount({
+              ...account,
+              type,
+            });
+          }
+          activePopup('WalletConnect');
+          return false;
+        }
+      } else if (type === KEYRING_CLASS.HARDWARE.IMKEY) {
+        if (imKeyStatus.status === 'DISCONNECTED') {
+          activePopup('ImKeyPermission');
+          return false;
+        }
       }
 
       return true;
     },
-    [ledgerStatus]
+    [ledgerStatus, walletConnectStatus, imKeyStatus, account]
   );
 
   return connect;

src/ui/views/Approval/components/FooterBar/GridPlusProcessActions.tsx

@@ -1,16 +1,9 @@
 import React from 'react';
 import { Props } from './ActionsContainer';
 import { ProcessActions } from './ProcessActions';
-import { useGridPlusStatus } from '@/ui/component/ConnectStatus/useGridPlusStatus';
 
 export const GridPlusProcessActions: React.FC<Props> = (props) => {
   const { disabledProcess } = props;
-  const { status } = useGridPlusStatus();
 
-  return (
-    <ProcessActions
-      {...props}
-      disabledProcess={status !== 'CONNECTED' || disabledProcess}
-    />
-  );
+  return <ProcessActions {...props} disabledProcess={disabledProcess} />;
 };

src/ui/views/Approval/components/FooterBar/ImKeyProcessActions.tsx

@@ -1,16 +1,9 @@
 import React from 'react';
 import { Props } from './ActionsContainer';
 import { ProcessActions } from './ProcessActions';
-import { useImKeyStatus } from '@/ui/component/ConnectStatus/useImKeyStatus';
 
 export const ImKeyProcessActions: React.FC<Props> = (props) => {
   const { disabledProcess } = props;
-  const { status } = useImKeyStatus();
 
-  return (
-    <ProcessActions
-      {...props}
-      disabledProcess={status !== 'CONNECTED' || disabledProcess}
-    />
-  );
+  return <ProcessActions {...props} disabledProcess={disabledProcess} />;
 };

src/ui/views/Approval/components/FooterBar/LedgerProcessActions.tsx

@@ -1,11 +1,9 @@
 import React from 'react';
 import { Props } from './ActionsContainer';
 import { ProcessActions } from './ProcessActions';
-import { useLedgerStatus } from '@/ui/component/ConnectStatus/useLedgerStatus';
 
 export const LedgerProcessActions: React.FC<Props> = (props) => {
   const { disabledProcess } = props;
-  const { status } = useLedgerStatus();
 
   return <ProcessActions {...props} disabledProcess={disabledProcess} />;
 };

src/ui/views/Approval/components/FooterBar/SubmitActions.tsx

@@ -1,4 +1,4 @@
-import { Button, Tooltip } from 'antd';
+import { Button } from 'antd';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { ActionsContainer, Props } from './ActionsContainer';
@@ -7,6 +7,7 @@ import { ReactComponent as IconClose } from 'ui/assets/close-16-cc.svg';
 import { GasLessAnimatedWrapper } from './GasLessComponents';
 import styled from 'styled-components';
 import { LoadingOutlined } from '@ant-design/icons';
+import { TooltipWithMagnetArrow } from '@/ui/component/Tooltip/TooltipWithMagnetArrow';
 
 const ButtonStyled = styled(Button)`
   &:hover {
@@ -86,9 +87,11 @@ export const SubmitActions: React.FC<Props> = ({
           </button>
         </div>
       ) : (
-        <Tooltip
+        <TooltipWithMagnetArrow
           overlayClassName="rectangle sign-tx-forbidden-tooltip"
           title={enableTooltip ? tooltipContent : null}
+          inApproval
+          viewportOffset={[20, -20, -20, 20]}
         >
           <GasLessAnimatedWrapper>
             <ButtonStyled
@@ -116,7 +119,7 @@ export const SubmitActions: React.FC<Props> = ({
               {t('page.signFooterBar.signAndSubmitButton')}
             </ButtonStyled>
           </GasLessAnimatedWrapper>
-        </Tooltip>
+        </TooltipWithMagnetArrow>
       )}
     </ActionsContainer>
   );

src/ui/views/Approval/components/FooterBar/WalletConnectProcessActions.tsx

@@ -44,13 +44,7 @@ export const WalletConnectProcessActions: React.FC<Props> = (props) => {
     <ProcessActions
       {...props}
       tooltipContent={content}
-      disabledProcess={
-        (status !== 'CONNECTED' &&
-          status !== 'DISCONNECTED' &&
-          status !== 'CHAIN_CHANGED') ||
-        // chainError ||
-        disabledProcess
-      }
+      disabledProcess={disabledProcess}
     />
   );
 };

src/ui/views/Approval/components/SignText.tsx

@@ -273,7 +273,7 @@ const SignText = ({ params }: { params: SignTextProps }) => {
     if (accountType === KEYRING_TYPE.WatchAddressKeyring) {
       setIsWatch(true);
       setCantProcessReason(
-        <div>You can only use imported addresses to sign</div>
+        <div>{t('page.signTx.canOnlyUseImportedAddress')}</div>
       );
     }
     if (accountType === KEYRING_TYPE.GnosisKeyring && !params.account) {