CP-13373: Avoid showing alert if user cancelled the tx (#3577)

Author: ruijialin-avalabs

packages/core-mobile/app/new/common/utils/boundedMap.test.ts

@@ -0,0 +1,169 @@
+/* eslint-disable sonarjs/no-element-overwrite */
+import { BoundedMap } from './boundedMap'
+
+describe('BoundedMap', () => {
+  describe('basic Map functionality', () => {
+    it('should set and get values', () => {
+      const map = new BoundedMap<string, number>(3)
+      map.set('a', 1)
+      map.set('b', 2)
+
+      expect(map.get('a')).toBe(1)
+      expect(map.get('b')).toBe(2)
+      expect(map.get('c')).toBeUndefined()
+    })
+
+    it('should check if keys exist', () => {
+      const map = new BoundedMap<string, number>(3)
+      map.set('a', 1)
+
+      expect(map.has('a')).toBe(true)
+      expect(map.has('b')).toBe(false)
+    })
+
+    it('should track size correctly', () => {
+      const map = new BoundedMap<string, number>(3)
+
+      expect(map.size).toBe(0)
+      map.set('a', 1)
+      expect(map.size).toBe(1)
+      map.set('b', 2)
+      expect(map.size).toBe(2)
+    })
+
+    it('should delete entries', () => {
+      const map = new BoundedMap<string, number>(3)
+      map.set('a', 1)
+      map.set('b', 2)
+
+      expect(map.delete('a')).toBe(true)
+      expect(map.has('a')).toBe(false)
+      expect(map.size).toBe(1)
+      expect(map.delete('a')).toBe(false)
+    })
+  })
+
+  describe('FIFO eviction behavior', () => {
+    it('should evict oldest entry when maxSize is reached', () => {
+      const map = new BoundedMap<string, number>(3)
+
+      map.set('a', 1)
+      map.set('b', 2)
+      map.set('c', 3)
+      expect(map.size).toBe(3)
+      expect(map.has('a')).toBe(true)
+
+      // Adding 4th entry should evict 'a' (oldest)
+      map.set('d', 4)
+      expect(map.size).toBe(3)
+      expect(map.has('a')).toBe(false)
+      expect(map.has('b')).toBe(true)
+      expect(map.has('c')).toBe(true)
+      expect(map.has('d')).toBe(true)
+    })
+
+    it('should continue evicting in FIFO order', () => {
+      const map = new BoundedMap<string, number>(2)
+
+      map.set('a', 1)
+      map.set('b', 2)
+      map.set('c', 3) // evicts 'a'
+      map.set('d', 4) // evicts 'b'
+
+      expect(map.has('a')).toBe(false)
+      expect(map.has('b')).toBe(false)
+      expect(map.has('c')).toBe(true)
+      expect(map.has('d')).toBe(true)
+      expect(map.size).toBe(2)
+    })
+
+    it('should NOT refresh position when updating existing key', () => {
+      const map = new BoundedMap<string, number>(3)
+
+      map.set('a', 1)
+      map.set('b', 2)
+      map.set('c', 3)
+
+      // Update 'a' (oldest) - does NOT move it to the end in FIFO
+      map.set('a', 10)
+
+      // Adding 'd' should still evict 'a' (oldest by insertion order)
+      map.set('d', 4)
+
+      expect(map.has('a')).toBe(false) // 'a' was evicted despite being updated
+      expect(map.get('b')).toBe(2)
+      expect(map.get('c')).toBe(3)
+      expect(map.get('d')).toBe(4)
+    })
+
+    it('should update value without changing eviction order', () => {
+      const map = new BoundedMap<string, string>(2)
+
+      map.set('first', 'v1')
+      map.set('second', 'v2')
+
+      // Update first entry's value
+      map.set('first', 'updated')
+      expect(map.get('first')).toBe('updated')
+
+      // Adding third entry should evict 'first' (still oldest)
+      map.set('third', 'v3')
+
+      expect(map.has('first')).toBe(false)
+      expect(map.has('second')).toBe(true)
+      expect(map.has('third')).toBe(true)
+    })
+  })
+
+  describe('edge cases', () => {
+    it('should handle maxSize of 1', () => {
+      const map = new BoundedMap<string, number>(1)
+
+      map.set('a', 1)
+      expect(map.size).toBe(1)
+
+      map.set('b', 2)
+      expect(map.size).toBe(1)
+      expect(map.has('a')).toBe(false)
+      expect(map.has('b')).toBe(true)
+    })
+
+    it('should handle updating the only entry when maxSize is 1', () => {
+      const map = new BoundedMap<string, number>(1)
+
+      map.set('a', 1)
+      map.set('a', 2)
+
+      expect(map.size).toBe(1)
+      expect(map.get('a')).toBe(2)
+    })
+
+    it('should handle different key types', () => {
+      const map = new BoundedMap<number, string>(2)
+
+      map.set(1, 'one')
+      map.set(2, 'two')
+      map.set(3, 'three')
+
+      expect(map.has(1)).toBe(false)
+      expect(map.get(2)).toBe('two')
+      expect(map.get(3)).toBe('three')
+    })
+
+    it('should maintain correct iteration order', () => {
+      const map = new BoundedMap<string, number>(3)
+
+      map.set('a', 1)
+      map.set('b', 2)
+      map.set('c', 3)
+
+      const keys = Array.from(map.keys())
+      expect(keys).toEqual(['a', 'b', 'c'])
+
+      // After eviction, order should be preserved
+      map.set('d', 4)
+      const keysAfterEviction = Array.from(map.keys())
+      expect(keysAfterEviction).toEqual(['b', 'c', 'd'])
+    })
+  })
+})

packages/core-mobile/app/new/common/utils/boundedMap.ts

@@ -0,0 +1,18 @@
+export class BoundedMap<K, V> extends Map<K, V> {
+  private readonly maxSize: number
+  constructor(maxSize: number) {
+    super()
+    this.maxSize = Math.max(1, maxSize)
+  }
+  // Enforce a maximum size with FIFO eviction: oldest entries are removed first.
+  // Note: updating an existing key does NOT refresh its position.
+  override set(key: K, value: V): this {
+    if (!this.has(key) && this.size >= this.maxSize) {
+      const oldestKey = this.keys().next().value as K | undefined
+      if (oldestKey !== undefined) {
+        this.delete(oldestKey)
+      }
+    }
+    return super.set(key, value)
+  }
+}

packages/core-mobile/app/new/features/ledger/screens/LedgerReviewTransactionScreen.tsx

@@ -13,6 +13,9 @@ import { AnimatedIconWithText } from 'new/features/ledger/components/AnimatedIco
 import { useSelector } from 'react-redux'
 import { selectActiveWalletId } from 'store/wallet/slice'
 import LedgerService from 'services/ledger/LedgerService'
+import { BackHandler } from 'react-native'
+import { useNavigation } from 'expo-router'
+import { TRANSACTION_CANCELLED_BY_USER } from 'vmModule/ApprovalController/utils'
 import { LedgerReviewTransactionParams } from '../services/ledgerParamsCache'
 import { useLedgerWalletMap } from '../store'
 import { getLedgerAppName } from '../utils'
@@ -23,7 +26,9 @@ const LedgerReviewTransactionScreen = ({
 }: {
   params: LedgerReviewTransactionParams
 }): JSX.Element => {
+  const navigation = useNavigation()
   const approvalTriggeredRef = useRef(false)
+  const dismissInProgressRef = useRef(false)
   const walletId = useSelector(selectActiveWalletId)
   const { ledgerWalletMap } = useLedgerWalletMap()
   const [isConnected, setIsConnected] = useState(false)
@@ -96,12 +101,47 @@ const LedgerReviewTransactionScreen = ({
     return () => clearTimeout(timer)
   }, [])
 
+  // Handle Android hardware back button
+  useEffect(() => {
+    const onBackPress = (): boolean => {
+      if (isCancelEnabled && !dismissInProgressRef.current) {
+        dismissInProgressRef.current = true
+        onReject(TRANSACTION_CANCELLED_BY_USER)
+        return true // Prevent default back behavior, onReject handles navigation
+      }
+      return false
+    }
+
+    const backHandler = BackHandler.addEventListener(
+      'hardwareBackPress',
+      onBackPress
+    )
+
+    return () => backHandler.remove()
+  }, [onReject, isCancelEnabled])
+
+  // Handle gesture dismissal (swipe down)
+  useEffect(() => {
+    return navigation.addListener('beforeRemove', e => {
+      if (
+        e.data.action.type === 'POP' && // gesture dismissed
+        isCancelEnabled &&
+        !dismissInProgressRef.current
+      ) {
+        e.preventDefault()
+        dismissInProgressRef.current = true
+        // Modal is being dismissed via gesture
+        onReject(TRANSACTION_CANCELLED_BY_USER)
+      }
+    })
+  }, [navigation, onReject, isCancelEnabled])
+
   const renderFooter = useCallback(() => {
     return (
       <Button
         type="secondary"
         size="large"
-        onPress={onReject}
+        onPress={() => onReject(TRANSACTION_CANCELLED_BY_USER)}
         disabled={!isCancelEnabled}>
         Cancel
       </Button>

packages/core-mobile/app/vmModule/ApprovalController/ApprovalController.ts

@@ -22,11 +22,14 @@ import { showLedgerReviewTransaction } from 'features/ledger/utils'
 import { promptForAppReviewAfterSuccessfulTransaction } from 'features/appReview/utils/promptForAppReviewAfterSuccessfulTransaction'
 import { CONFETTI_DURATION_MS } from 'common/consts'
 import { currentRouteStore } from 'new/routes/store'
+import { BoundedMap } from 'common/utils/boundedMap'
 import { onApprove } from './onApprove'
 import { onReject } from './onReject'
 import { handleLedgerErrorAndShowAlert } from './utils'
 
 class ApprovalController implements VmModuleApprovalController {
+  private userCancelledMap = new BoundedMap<string, boolean>(10)
+
   async requestPublicKey({
     secretId,
     derivationPath,
@@ -142,6 +145,10 @@ class ApprovalController implements VmModuleApprovalController {
     displayData,
     signingData
   }: ApprovalParams): Promise<ApprovalResponse> {
+    const requestId = request.requestId
+    // Clear any previous cancellation state for this request
+    this.userCancelledMap.delete(requestId)
+
     return new Promise<ApprovalResponse>(resolve => {
       walletConnectCache.approvalParams.set({
         request,
@@ -156,6 +163,12 @@ class ApprovalController implements VmModuleApprovalController {
               value: ApprovalResponse | PromiseLike<ApprovalResponse>
             ): void => {
               if ('error' in value) {
+                // Don't show alert if user explicitly cancelled
+                if (this.userCancelledMap.get(requestId)) {
+                  this.userCancelledMap.delete(requestId)
+                  return
+                }
+
                 handleLedgerErrorAndShowAlert({
                   error: value.error,
                   network: params.network,
@@ -166,13 +179,15 @@ class ApprovalController implements VmModuleApprovalController {
                       resolve: resolveWithRetry
                     }),
                   onCancel: () => {
+                    this.userCancelledMap.set(requestId, true)
                     this.handleGoBackIfNeeded()
                     this.handleLedgerOnReject({ resolve })
                   }
                 })
               } else {
                 resolve(value)
                 this.handleGoBackIfNeeded()
+                this.userCancelledMap.delete(requestId)
               }
             }
 
@@ -185,6 +200,7 @@ class ApprovalController implements VmModuleApprovalController {
                   resolve: resolveWithRetry
                 }),
               onReject: () => {
+                this.userCancelledMap.set(requestId, true)
                 this.handleLedgerOnReject({ resolve })
                 this.handleGoBackIfNeeded()
               }

packages/core-mobile/app/vmModule/ApprovalController/utils.ts

@@ -4,6 +4,8 @@ import { RpcError } from '@avalabs/vm-module-types'
 import { getLedgerAppName } from 'features/ledger/utils'
 import { LEDGER_ERROR_CODES } from 'services/ledger/types'
 
+export const TRANSACTION_CANCELLED_BY_USER = 'Transaction cancelled by user'
+
 export const handleLedgerErrorAndShowAlert = ({
   error,
   network,
@@ -16,7 +18,7 @@ export const handleLedgerErrorAndShowAlert = ({
   onCancel: () => void
 }): void => {
   // @ts-ignore
-  const message = error.data?.cause?.message || ''
+  const message = error.data?.cause?.message || error.message || ''
   const lowercasedMessage = message.toLowerCase()
 
   const ledgerAppName = getLedgerAppName(network)
@@ -45,7 +47,11 @@ export const handleLedgerErrorAndShowAlert = ({
   } else if (lowercasedMessage.includes(LEDGER_ERROR_CODES.UPDATE_REQUIRED)) {
     title = 'Update required'
     description = `Update the ${ledgerAppName} app on your Ledger device to continue`
-  } else if (lowercasedMessage.includes(LEDGER_ERROR_CODES.USER_CANCELLED)) {
+  } else if (
+    lowercasedMessage.includes(LEDGER_ERROR_CODES.USER_CANCELLED) ||
+    lowercasedMessage.includes(TRANSACTION_CANCELLED_BY_USER.toLowerCase()) ||
+    lowercasedMessage.includes('action cancelled by user')
+  ) {
     // User cancelled, no need to show alert
     return
   } else if (