From f13e37e07f7eb8287b3a76e699c71bfa42bfacbd Mon Sep 17 00:00:00 2001 From: heisenberg Date: Mon, 14 Oct 2024 18:57:09 +0800 Subject: [PATCH] fix: footbar --- _raw/locales/en/messages.json | 2 +- src/ui/utils/hooks.ts | 4 +-- src/ui/utils/useDeviceConnect.ts | 32 +++++++++++++++++-- .../FooterBar/GridPlusProcessActions.tsx | 9 +----- .../FooterBar/ImKeyProcessActions.tsx | 9 +----- .../FooterBar/LedgerProcessActions.tsx | 2 -- .../components/FooterBar/SubmitActions.tsx | 9 ++++-- .../FooterBar/WalletConnectProcessActions.tsx | 8 +---- src/ui/views/Approval/components/SignText.tsx | 2 +- 9 files changed, 43 insertions(+), 34 deletions(-) diff --git a/_raw/locales/en/messages.json b/_raw/locales/en/messages.json index 2fe3e4ff065..5bcab55b490 100644 --- a/_raw/locales/en/messages.json +++ b/_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", diff --git a/src/ui/utils/hooks.ts b/src/ui/utils/hooks.ts index 4c826ea9b84..a5492735586 100644 --- a/src/ui/utils/hooks.ts +++ b/src/ui/utils/hooks.ts @@ -16,7 +16,7 @@ export const useApproval = () => { const { showPopup, enablePopup } = useApprovalPopup(); const getApproval: () => Promise = 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; } diff --git a/src/ui/utils/useDeviceConnect.ts b/src/ui/utils/useDeviceConnect.ts index ccee8dd8d4d..c96950e1927 100644 --- a/src/ui/utils/useDeviceConnect.ts +++ b/src/ui/utils/useDeviceConnect.ts @@ -2,6 +2,9 @@ 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 @@ -9,8 +12,14 @@ import { useCommonPopupView } from './WalletContext'; */ 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) { @@ -18,11 +27,30 @@ export const useDeviceConnect = () => { 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; diff --git a/src/ui/views/Approval/components/FooterBar/GridPlusProcessActions.tsx b/src/ui/views/Approval/components/FooterBar/GridPlusProcessActions.tsx index 62ebaf1ad46..5cd83e7b789 100644 --- a/src/ui/views/Approval/components/FooterBar/GridPlusProcessActions.tsx +++ b/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) => { const { disabledProcess } = props; - const { status } = useGridPlusStatus(); - return ( - - ); + return ; }; diff --git a/src/ui/views/Approval/components/FooterBar/ImKeyProcessActions.tsx b/src/ui/views/Approval/components/FooterBar/ImKeyProcessActions.tsx index 86098962b96..0a7c04f152c 100644 --- a/src/ui/views/Approval/components/FooterBar/ImKeyProcessActions.tsx +++ b/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) => { const { disabledProcess } = props; - const { status } = useImKeyStatus(); - return ( - - ); + return ; }; diff --git a/src/ui/views/Approval/components/FooterBar/LedgerProcessActions.tsx b/src/ui/views/Approval/components/FooterBar/LedgerProcessActions.tsx index d529af6f8ed..a4fb10cd34d 100644 --- a/src/ui/views/Approval/components/FooterBar/LedgerProcessActions.tsx +++ b/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) => { const { disabledProcess } = props; - const { status } = useLedgerStatus(); return ; }; diff --git a/src/ui/views/Approval/components/FooterBar/SubmitActions.tsx b/src/ui/views/Approval/components/FooterBar/SubmitActions.tsx index 485d75c4e8a..3aa59b6b49c 100644 --- a/src/ui/views/Approval/components/FooterBar/SubmitActions.tsx +++ b/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 = ({ ) : ( - = ({ {t('page.signFooterBar.signAndSubmitButton')} - + )} ); diff --git a/src/ui/views/Approval/components/FooterBar/WalletConnectProcessActions.tsx b/src/ui/views/Approval/components/FooterBar/WalletConnectProcessActions.tsx index bf2bc889cd5..215ba3c5f23 100644 --- a/src/ui/views/Approval/components/FooterBar/WalletConnectProcessActions.tsx +++ b/src/ui/views/Approval/components/FooterBar/WalletConnectProcessActions.tsx @@ -44,13 +44,7 @@ export const WalletConnectProcessActions: React.FC = (props) => { ); }; diff --git a/src/ui/views/Approval/components/SignText.tsx b/src/ui/views/Approval/components/SignText.tsx index a7200af9fd3..e173092bdce 100644 --- a/src/ui/views/Approval/components/SignText.tsx +++ b/src/ui/views/Approval/components/SignText.tsx @@ -273,7 +273,7 @@ const SignText = ({ params }: { params: SignTextProps }) => { if (accountType === KEYRING_TYPE.WatchAddressKeyring) { setIsWatch(true); setCantProcessReason( -
You can only use imported addresses to sign
+
{t('page.signTx.canOnlyUseImportedAddress')}
); } if (accountType === KEYRING_TYPE.GnosisKeyring && !params.account) {