CP-13626: Fusion Refunded UI (#3655)

Author: atn4z7

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

@@ -1,6 +1,6 @@
 import { create } from 'zustand'
 import { persist, PersistOptions } from 'zustand/middleware'
-import { zustandMMKVStorage } from 'utils/mmkv/storages'
+import { zustandPersistStorage } from 'utils/mmkv/storages'
 
 /**
  * A lightweight utility for creating isolated Zustand stores that behave like `useState`
@@ -64,7 +64,7 @@ export function createZustandStore<T>(
           ...options.persist,
           storage:
             options.persist.storage ??
-            (zustandMMKVStorage as unknown as NonNullable<
+            (zustandPersistStorage as unknown as NonNullable<
               PersistOptions<StoreState<T>, { value: T }>['storage']
             >),
           partialize:

packages/core-mobile/app/new/features/accountSettings/store.ts

@@ -8,7 +8,7 @@ import {
 import { Platform } from 'react-native'
 import { ZustandStorageKeys } from 'resources/Constants'
 import AnalyticsService from 'services/analytics/AnalyticsService'
-import { zustandMMKVStorage } from 'utils/mmkv/storages'
+import { zustandPersistStorage } from 'utils/mmkv/storages'
 import { isDebugOrInternalBuild } from 'utils/Utils'
 import { create } from 'zustand'
 import { persist } from 'zustand/middleware'
@@ -49,7 +49,7 @@ export const recentAccountsStore = create<RecentAccountsState>()(
     }),
     {
       name: ZustandStorageKeys.RECENT_ACCOUNTS,
-      storage: zustandMMKVStorage,
+      storage: zustandPersistStorage,
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       migrate: (persistedState: any) => {
         // Check if this is legacy data with recentAccountIndexes

packages/core-mobile/app/new/features/activity/store.ts

@@ -1,7 +1,7 @@
 import { AvatarType } from '@avalabs/k2-alpine'
 import { createZustandStore } from 'common/utils/createZustandStore'
 import { ZustandStorageKeys } from 'resources/Constants'
-import { zustandMMKVStorage } from 'utils/mmkv/storages'
+import { zustandPersistStorage } from 'utils/mmkv/storages'
 import { create } from 'zustand'
 import { persist } from 'zustand/middleware'
 import { ActivityNetworkFilter } from './hooks/useActivityFilterAndSearch'
@@ -27,7 +27,9 @@ export const activityStore = create<ActivityState>()(
     }),
     {
       name: ZustandStorageKeys.ACTIVITY,
-      storage: zustandMMKVStorage,
+      storage: zustandPersistStorage,
+      // TODO use correct type
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       migrate: (persistedState: any) => {
         // Check if this is legacy data with recentAccountIndexes
         if (

packages/core-mobile/app/new/features/appReview/store.ts

@@ -1,5 +1,5 @@
 import { ZustandStorageKeys } from 'resources/Constants'
-import { zustandMMKVStorage } from 'utils/mmkv/storages'
+import { zustandPersistStorage } from 'utils/mmkv/storages'
 import { create } from 'zustand'
 import { persist } from 'zustand/middleware'
 import { getAppReviewConfig } from 'features/appReview/config'
@@ -70,7 +70,7 @@ export const appReviewStore = create<AppReviewState>()(
     }),
     {
       name: ZustandStorageKeys.APP_REVIEW,
-      storage: zustandMMKVStorage,
+      storage: zustandPersistStorage,
       version: 1
     }
   )

packages/core-mobile/app/new/features/ledger/store.ts

@@ -1,6 +1,6 @@
 import { ZustandStorageKeys } from 'resources/Constants'
 import { LedgerDerivationPathType, LedgerDevice } from 'services/ledger/types'
-import { zustandMMKVStorage } from 'utils/mmkv/storages'
+import { zustandPersistStorage } from 'utils/mmkv/storages'
 import { create } from 'zustand'
 import { persist } from 'zustand/middleware'
 import { Network } from '@avalabs/core-chains-sdk'
@@ -87,7 +87,7 @@ export const ledgerWalletMapStore = create<LedgerWalletMapState>()(
     }),
     {
       name: ZustandStorageKeys.LEDGER_WALLET_MAP,
-      storage: zustandMMKVStorage
+      storage: zustandPersistStorage
     }
   )
 )

packages/core-mobile/app/new/features/notifications/components/FusionTransferItem.tsx

@@ -4,9 +4,15 @@ import { TokenUnit } from '@avalabs/core-utils-sdk'
 import { useNetworks } from 'hooks/networks/useNetworks'
 import { FusionTransfer } from 'features/swap/types'
 import { mapTransferToSwapStatus } from '../utils'
+import { NotificationSwapStatus } from '../types'
 import NotificationListItem from './NotificationListItem'
 import { SwapIcon } from './SwapIcon'
-import { RetrySwapButton } from './RetrySwapButton'
+
+const SUBTITLE_MAP = {
+  [NotificationSwapStatus.Completed]: 'Completed',
+  [NotificationSwapStatus.Failed]: 'Failed',
+  [NotificationSwapStatus.Refunded]: undefined
+} as const
 
 type FusionTransferItemProps = {
   item: FusionTransfer
@@ -58,43 +64,51 @@ export const FusionTransferItem: FC<FusionTransferItemProps> = ({
     }
   }, [item.transfer])
 
-  const shouldBePlural = useMemo(() => {
-    return !!fromAmount?.gt(1)
-  }, [fromAmount])
-
   const title = useMemo(() => {
+    if (
+      status === NotificationSwapStatus.Refunded &&
+      'refund' in item.transfer
+    ) {
+      const { refund } = item.transfer
+      if (refund.asset) {
+        const refundUnit = new TokenUnit(
+          refund.amount,
+          refund.asset.decimals,
+          refund.asset.symbol
+        )
+        return `${refundUnit.toDisplay()} ${
+          refund.asset.symbol
+        } refunded to your wallet`
+      }
+    }
     const from = fromAmount
       ? `${fromAmount.toDisplay()} ${fromSymbol}`
       : fromSymbol
     const to = toAmount ? `${toAmount.toDisplay()} ${toSymbol}` : toSymbol
-    return status === 'failed'
-      ? `${from} swapped for ${to}`
-      : status === 'completed'
-      ? `${from} ${shouldBePlural ? 'were' : 'was'} swapped for ${to}`
-      : `Swapping ${fromSymbol} to ${toSymbol} in progress...`
-  }, [fromAmount, fromSymbol, shouldBePlural, toAmount, toSymbol, status])
+    return status === NotificationSwapStatus.InProgress
+      ? `Swapping ${fromSymbol} to ${toSymbol} in progress...`
+      : `${from} swapped for ${to}`
+  }, [fromAmount, fromSymbol, toAmount, toSymbol, status, item.transfer])
 
   const subtitle =
-    status === 'completed'
-      ? 'Completed'
-      : status === 'failed'
-      ? 'Failed'
+    status in SUBTITLE_MAP
+      ? SUBTITLE_MAP[status as keyof typeof SUBTITLE_MAP]
       : 'Tap for more details'
 
-  const accessoryType =
-    status === 'completed' || status === 'failed' ? 'none' : 'chevron'
+  const accessoryType = 'chevron'
 
   const renderSubtitle = useCallback(() => {
+    if (!subtitle) return null
     return (
       <Text
         variant="body2"
         sx={{
           lineHeight: 15,
           fontWeight: 500,
           color:
-            status === 'completed'
+            status === NotificationSwapStatus.Completed
               ? '$textSuccess'
-              : status === 'failed'
+              : status === NotificationSwapStatus.Failed
               ? '$textDanger'
               : '$textSecondary'
         }}
@@ -110,11 +124,10 @@ export const FusionTransferItem: FC<FusionTransferItemProps> = ({
       title={title}
       subtitle={renderSubtitle()}
       icon={<SwapIcon status={status} networkLogoUri={fromNetworkLogoUri} />}
-      timestamp={status === 'failed' ? undefined : item.timestamp}
+      timestamp={item.timestamp}
       showSeparator={showSeparator}
       accessoryType={accessoryType}
       testID={testID}
-      rightAccessory={<RetrySwapButton status={status} item={item} />}
     />
   )
 }

packages/core-mobile/app/new/features/notifications/components/RetrySwapButton.tsx

@@ -13,16 +13,44 @@ type SwapIconProps = {
 
 /**
  * Icon shown on the left of each swap item:
- *  - completed  → grey circle with Compare arrows (→←) + optional network badge
- *  - failed     → grey circle with Compare arrows (→←) + optional network badge
+ *  - completed   → grey circle with Compare arrows (→←) + optional network badge
+ *  - failed      → grey circle with Compare arrows (→←) + optional network badge
+ *  - refunded    → grey circle with Restart icon + optional network badge
  *  - in_progress → grey circle with a continuously spinning sync icon + optional network badge
  */
 export const SwapIcon: FC<SwapIconProps> = ({ status, networkLogoUri }) => {
   const {
     theme: { colors }
   } = useTheme()
 
-  if (status === 'completed' || status === 'failed') {
+  if (status === NotificationSwapStatus.Refunded) {
+    return (
+      <View sx={{ width: ICON_SIZE }}>
+        <View
+          sx={{
+            width: ICON_SIZE,
+            height: ICON_SIZE,
+            borderRadius: ICON_SIZE / 2,
+            backgroundColor: '$surfaceSecondary',
+            justifyContent: 'center',
+            alignItems: 'center'
+          }}>
+          <Icons.Custom.Restart color={colors.$textPrimary} />
+        </View>
+        {networkLogoUri && (
+          <NetworkBadge
+            logoUri={networkLogoUri}
+            borderColor={colors.$surfacePrimary}
+          />
+        )}
+      </View>
+    )
+  }
+
+  if (
+    status === NotificationSwapStatus.Completed ||
+    status === NotificationSwapStatus.Failed
+  ) {
     return (
       <View sx={{ width: ICON_SIZE }}>
         <View