feat: add transaction require signing inside ledger ACK component (#7601

)

* feat: add transaction require signing inside ledger ACK componenet

* fix: review

src/assets/translations/en/main.json

@@ -1882,7 +1882,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": {

src/components/ManageAccountsDrawer/ManageAccountsDrawer.tsx

@@ -25,7 +25,7 @@ export const ManageAccountsDrawer = ({
   const [step, setStep] = useState<ManageAccountsStep>('selectChain')
   const [selectedChainId, setSelectedChainId] = useState<ChainId | null>(null)
 
-  const checkLedgerAppOpenIfLedgerConnected = useLedgerOpenApp()
+  const checkLedgerAppOpenIfLedgerConnected = useLedgerOpenApp({ isSigning: false })
 
   const handleClose = useCallback(() => {
     setStep('selectChain')

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
         </ModalHeader>
         <ModalBody>
           <VStack spacing={2}>
-            <RawText color='whiteAlpha.600'>
+            <RawText color='whiteAlpha.600' textAlign='center'>
               {translate('ledgerOpenApp.description', {
                 appName,
               })}
             </RawText>
-            <Spinner size='lg' />
+            {isSigning ? (
+              <Alert status='warning'>{translate('ledgerOpenApp.signingDescription')}</Alert>
+            ) : null}
+            <Spinner mt={4} size='lg' />
           </VStack>
         </ModalBody>
         <ModalFooter justifyContent='center' pb={6}>

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,

src/components/MultiHopTrade/components/MultiHopTradeConfirm/components/HopTransactionStep.tsx

@@ -56,7 +56,7 @@ export const HopTransactionStep = ({
   } = useLocaleFormatter()
   const translate = useTranslate()
 
-  const checkLedgerAppOpenIfLedgerConnected = useLedgerOpenApp()
+  const checkLedgerAppOpenIfLedgerConnected = useLedgerOpenApp({ isSigning: true })
 
   const hopExecutionMetadataFilter = useMemo(() => {
     return {

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

src/hooks/useLedgerOpenApp/useLedgerOpenApp.tsx

@@ -50,14 +50,18 @@ 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.
  *
  * If the app is not open, it will display a modal to prompt the user to open the app.
  *
  * 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

src/pages/RFOX/components/ChangeAddress/ChangeAddressConfirm.tsx

@@ -70,7 +70,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,

src/pages/RFOX/components/Claim/ClaimConfirm.tsx

@@ -64,7 +64,7 @@ export const ClaimConfirm: FC<Pick<ClaimRouteProps, 'headerComponent'> & 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)

src/pages/RFOX/components/Stake/Bridge/BridgeConfirm.tsx

@@ -44,7 +44,7 @@ const CustomRow: React.FC<RowProps> = props => <Row fontSize='sm' fontWeight='me
 export const BridgeConfirm: FC<BridgeRouteProps & BridgeConfirmProps> = ({ confirmedQuote }) => {
   const history = useHistory()
   const translate = useTranslate()
-  const checkLedgerAppOpenIfLedgerConnected = useLedgerOpenApp()
+  const checkLedgerAppOpenIfLedgerConnected = useLedgerOpenApp({ isSigning: true })
 
   const {
     sellAsset,

src/pages/RFOX/components/Stake/Bridge/BridgeStatus.tsx

@@ -20,7 +20,7 @@ export const BridgeStatus: React.FC<BridgeRouteProps & BridgeStatusProps> = ({
 }) => {
   const translate = useTranslate()
   const history = useHistory()
-  const checkLedgerAppOpenIfLedgerConnected = useLedgerOpenApp()
+  const checkLedgerAppOpenIfLedgerConnected = useLedgerOpenApp({ isSigning: true })
 
   const {
     sellAsset,

src/pages/RFOX/components/Stake/StakeConfirm.tsx

@@ -64,7 +64,7 @@ export const StakeConfirm: React.FC<StakeConfirmProps & StakeRouteProps> = ({
   const queryClient = useQueryClient()
   const history = useHistory()
   const translate = useTranslate()
-  const checkLedgerAppOpenIfLedgerConnected = useLedgerOpenApp()
+  const checkLedgerAppOpenIfLedgerConnected = useLedgerOpenApp({ isSigning: true })
 
   const stakingAsset = useAppSelector(state =>
     selectAssetById(state, confirmedQuote.stakingAssetId),

src/pages/RFOX/components/Unstake/UnstakeConfirm.tsx

@@ -45,7 +45,7 @@ export const UnstakeConfirm: React.FC<UnstakeRouteProps & UnstakeConfirmProps> =
 }) => {
   const history = useHistory()
   const translate = useTranslate()
-  const checkLedgerAppOpenIfLedgerConnected = useLedgerOpenApp()
+  const checkLedgerAppOpenIfLedgerConnected = useLedgerOpenApp({ isSigning: true })
 
   const stakingAsset = useAppSelector(state =>
     selectAssetById(state, confirmedQuote.stakingAssetId),