diff --git a/src/assets/translations/en/main.json b/src/assets/translations/en/main.json index dd1abc14ae1..3b9d21f77c1 100644 --- a/src/assets/translations/en/main.json +++ b/src/assets/translations/en/main.json @@ -1880,7 +1880,8 @@ }, "ledgerOpenApp": { "title": "Open the %{appName} App", - "description": "To continue, you will need to open the %{appName} app on your Ledger device." + "description": "To continue, you will need to open the %{appName} app on your Ledger device.", + "signingDescription": "Signing prompt will automatically pop-up in your device after opening the app" }, "loremIpsum": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sed lectus efficitur, iaculis sapien eu, luctus tellus. Maecenas eget sapien dignissim, finibus mauris nec, mollis ipsum. Donec sodales sit amet felis sagittis vestibulum. Ut in consectetur lacus. Suspendisse potenti. Aenean at massa consequat lectus semper pretium. Cras sed bibendum enim. Mauris euismod sit amet dolor in placerat.", "transactionHistory": { diff --git a/src/components/ManageAccountsDrawer/ManageAccountsDrawer.tsx b/src/components/ManageAccountsDrawer/ManageAccountsDrawer.tsx index 27ae0ebd00d..51c0bff7e77 100644 --- a/src/components/ManageAccountsDrawer/ManageAccountsDrawer.tsx +++ b/src/components/ManageAccountsDrawer/ManageAccountsDrawer.tsx @@ -25,7 +25,7 @@ export const ManageAccountsDrawer = ({ const [step, setStep] = useState('selectChain') const [selectedChainId, setSelectedChainId] = useState(null) - const checkLedgerAppOpenIfLedgerConnected = useLedgerOpenApp() + const checkLedgerAppOpenIfLedgerConnected = useLedgerOpenApp({ isSigning: false }) const handleClose = useCallback(() => { setStep('selectChain') diff --git a/src/components/Modals/LedgerOpenApp/LedgerOpenAppModal.tsx b/src/components/Modals/LedgerOpenApp/LedgerOpenAppModal.tsx index 5a506fa1362..a95a9300cc8 100644 --- a/src/components/Modals/LedgerOpenApp/LedgerOpenAppModal.tsx +++ b/src/components/Modals/LedgerOpenApp/LedgerOpenAppModal.tsx @@ -1,4 +1,5 @@ import { + Alert, Button, Modal, ModalBody, @@ -21,9 +22,10 @@ import { useLedgerAppDetails } from './hooks/useLedgerAppDetails' export type LedgerOpenAppModalProps = { chainId: ChainId onCancel: () => void + isSigning: boolean } -export const LedgerOpenAppModal = ({ chainId, onCancel }: LedgerOpenAppModalProps) => { +export const LedgerOpenAppModal = ({ chainId, onCancel, isSigning }: LedgerOpenAppModalProps) => { const { close: closeModal, isOpen } = useModal('ledgerOpenApp') const translate = useTranslate() @@ -50,12 +52,15 @@ export const LedgerOpenAppModal = ({ chainId, onCancel }: LedgerOpenAppModalProp - + {translate('ledgerOpenApp.description', { appName, })} - + {isSigning ? ( + {translate('ledgerOpenApp.signingDescription')} + ) : null} + diff --git a/src/components/MultiHopTrade/components/MultiHopTradeConfirm/components/ApprovalStep.tsx b/src/components/MultiHopTrade/components/MultiHopTradeConfirm/components/ApprovalStep.tsx index 20fbd97feae..af0f774afbf 100644 --- a/src/components/MultiHopTrade/components/MultiHopTradeConfirm/components/ApprovalStep.tsx +++ b/src/components/MultiHopTrade/components/MultiHopTradeConfirm/components/ApprovalStep.tsx @@ -123,7 +123,7 @@ const ApprovalStepPending = ({ // Default to exact allowance for LiFi due to contract vulnerabilities const [isExactAllowance, toggleIsExactAllowance] = useToggle(isLifiStep ? true : false) - const checkLedgerAppOpenIfLedgerConnected = useLedgerOpenApp() + const checkLedgerAppOpenIfLedgerConnected = useLedgerOpenApp({ isSigning: true }) const hopExecutionMetadataFilter = useMemo(() => { return { tradeId: activeTradeId, diff --git a/src/components/MultiHopTrade/components/MultiHopTradeConfirm/components/HopTransactionStep.tsx b/src/components/MultiHopTrade/components/MultiHopTradeConfirm/components/HopTransactionStep.tsx index ca88e36b7de..005bb1e6e32 100644 --- a/src/components/MultiHopTrade/components/MultiHopTradeConfirm/components/HopTransactionStep.tsx +++ b/src/components/MultiHopTrade/components/MultiHopTradeConfirm/components/HopTransactionStep.tsx @@ -52,7 +52,7 @@ export const HopTransactionStep = ({ } = useLocaleFormatter() const translate = useTranslate() - const checkLedgerAppOpenIfLedgerConnected = useLedgerOpenApp() + const checkLedgerAppOpenIfLedgerConnected = useLedgerOpenApp({ isSigning: true }) const hopExecutionMetadataFilter = useMemo(() => { return { diff --git a/src/components/MultiHopTrade/components/VerifyAddresses/VerifyAddresses.tsx b/src/components/MultiHopTrade/components/VerifyAddresses/VerifyAddresses.tsx index d097225799a..f306067d558 100644 --- a/src/components/MultiHopTrade/components/VerifyAddresses/VerifyAddresses.tsx +++ b/src/components/MultiHopTrade/components/VerifyAddresses/VerifyAddresses.tsx @@ -220,7 +220,7 @@ export const VerifyAddresses = () => { ], ) - const checkLedgerAppOpenIfLedgerConnected = useLedgerOpenApp() + const checkLedgerAppOpenIfLedgerConnected = useLedgerOpenApp({ isSigning: true }) const handleBuyVerify = useCallback(async () => { // Only proceed to verify the buy address if the promise is resolved, i.e the user has opened diff --git a/src/hooks/useLedgerOpenApp/useLedgerOpenApp.tsx b/src/hooks/useLedgerOpenApp/useLedgerOpenApp.tsx index 1da517ab6c4..c8eebf16192 100644 --- a/src/hooks/useLedgerOpenApp/useLedgerOpenApp.tsx +++ b/src/hooks/useLedgerOpenApp/useLedgerOpenApp.tsx @@ -50,6 +50,10 @@ export const getSlip44KeyFromChainId = (chainId: ChainId): Slip44Key | undefined } } +type UseLedgerOpenAppProps = { + isSigning: boolean +} + /** * This hook provides a function that can be used to check if the Ledger app is open for the given chainId. * @@ -57,7 +61,7 @@ export const getSlip44KeyFromChainId = (chainId: ChainId): Slip44Key | undefined * * The function will resolve when the app is open, or reject if the user cancels the request. */ -export const useLedgerOpenApp = () => { +export const useLedgerOpenApp = ({ isSigning }: UseLedgerOpenAppProps) => { const { close: closeModal, open: openModal } = useModal('ledgerOpenApp') const wallet = useWallet().state.wallet @@ -113,10 +117,10 @@ export const useLedgerOpenApp = () => { } // Display the request to open the Ledger app - openModal({ chainId, onCancel }) + openModal({ chainId, onCancel, isSigning }) }) }, - [checkIsCorrectAppOpen, closeModal, openModal, wallet], + [checkIsCorrectAppOpen, closeModal, openModal, wallet, isSigning], ) return checkLedgerApp diff --git a/src/pages/RFOX/components/ChangeAddress/ChangeAddressConfirm.tsx b/src/pages/RFOX/components/ChangeAddress/ChangeAddressConfirm.tsx index 4d8853e07a4..771692c34ff 100644 --- a/src/pages/RFOX/components/ChangeAddress/ChangeAddressConfirm.tsx +++ b/src/pages/RFOX/components/ChangeAddress/ChangeAddressConfirm.tsx @@ -71,7 +71,7 @@ export const ChangeAddressConfirm: React.FC< () => (feeAsset ? assertGetEvmChainAdapter(fromAssetId(feeAsset.assetId).chainId) : undefined), [feeAsset], ) - const checkLedgerAppOpenIfLedgerConnected = useLedgerOpenApp() + const checkLedgerAppOpenIfLedgerConnected = useLedgerOpenApp({ isSigning: true }) const stakingAssetAccountAddress = useMemo( () => fromAccountId(confirmedQuote.stakingAssetAccountId).account, diff --git a/src/pages/RFOX/components/Claim/ClaimConfirm.tsx b/src/pages/RFOX/components/Claim/ClaimConfirm.tsx index d49610c8fae..705e9192a3c 100644 --- a/src/pages/RFOX/components/Claim/ClaimConfirm.tsx +++ b/src/pages/RFOX/components/Claim/ClaimConfirm.tsx @@ -65,7 +65,7 @@ export const ClaimConfirm: FC & ClaimCo const history = useHistory() const translate = useTranslate() const wallet = useWallet().state.wallet - const checkLedgerAppOpenIfLedgerConnected = useLedgerOpenApp() + const checkLedgerAppOpenIfLedgerConnected = useLedgerOpenApp({ isSigning: true }) const handleGoBack = useCallback(() => { history.push(ClaimRoutePaths.Select) diff --git a/src/pages/RFOX/components/Stake/Bridge/BridgeConfirm.tsx b/src/pages/RFOX/components/Stake/Bridge/BridgeConfirm.tsx index b6a91ebb2de..7ceac17893c 100644 --- a/src/pages/RFOX/components/Stake/Bridge/BridgeConfirm.tsx +++ b/src/pages/RFOX/components/Stake/Bridge/BridgeConfirm.tsx @@ -44,7 +44,7 @@ const CustomRow: React.FC = props =>