feat(analytics): swap remainder events

apps/wallet-mobile/src/features/Swap/SwapNavigator.tsx

@@ -14,6 +14,7 @@ import {ListOrders} from './useCases/StartSwapScreen/ListOrders/ListOrders'
 const Tab = createMaterialTopTabNavigator<SwapTabRoutes>()
 export const SwapTabNavigator = () => {
   const strings = useStrings()
+
   useHideBottomTabBar()
 
   return (

apps/wallet-mobile/src/features/Swap/useCases/ConfirmTxScreen/ConfirmTxScreen.tsx

@@ -5,11 +5,12 @@ import {SafeAreaView} from 'react-native-safe-area-context'
 
 import {BottomSheet, BottomSheetRef, Button, Spacer} from '../../../../components'
 import {LoadingOverlay} from '../../../../components/LoadingOverlay'
+import {useMetrics} from '../../../../metrics/metricsManager'
 import {useWalletNavigation} from '../../../../navigation'
 import {useSelectedWallet} from '../../../../SelectedWallet'
 import {COLORS} from '../../../../theme'
 import {useAuthOsWithEasyConfirmation} from '../../../../yoroi-wallets/auth'
-import {useSignAndSubmitTx} from '../../../../yoroi-wallets/hooks'
+import {useSignAndSubmitTx, useTokenInfo} from '../../../../yoroi-wallets/hooks'
 import {useNavigateTo} from '../../common/navigation'
 import {useStrings} from '../../common/strings'
 import {ConfirmTx} from './ConfirmTx'
@@ -29,11 +30,21 @@ export const ConfirmTxScreen = () => {
   const strings = useStrings()
   const wallet = useSelectedWallet()
   const navigate = useNavigateTo()
+  const {track} = useMetrics()
 
   const {unsignedTx, createOrder} = useSwap()
 
   const {resetToTxHistory} = useWalletNavigation()
 
+  const sellTokenInfo = useTokenInfo({
+    wallet,
+    tokenId: createOrder.amounts.sell.tokenId,
+  })
+  const buyTokenInfo = useTokenInfo({
+    wallet,
+    tokenId: createOrder.amounts.buy.tokenId,
+  })
+
   const {authWithOs, isLoading: authenticating} = useAuthOsWithEasyConfirmation(
     {id: wallet.id},
     {onSuccess: (rootKey) => signAndSubmitTx({unsignedTx, rootKey})},
@@ -45,6 +56,21 @@ export const ConfirmTxScreen = () => {
       signTx: {useErrorBoundary: true},
       submitTx: {
         onSuccess: () => {
+          track.swapOrderSubmitted({
+            from_asset: [
+              {asset_name: sellTokenInfo.name, asset_ticker: sellTokenInfo.ticker, policy_id: sellTokenInfo.group},
+            ],
+            to_asset: [
+              {asset_name: buyTokenInfo.name, asset_ticker: buyTokenInfo.ticker, policy_id: buyTokenInfo.group},
+            ],
+            order_type: createOrder.type,
+            slippage_tolerance: createOrder.slippage,
+            from_amount: createOrder.amounts.sell.quantity,
+            to_amount: createOrder.amounts.buy.quantity,
+            pool_source: createOrder.selectedPool.provider,
+            swap_fees: Number(createOrder.selectedPool.fee),
+          })
+
           navigate.startSwap()
         },
         useErrorBoundary: true,

apps/wallet-mobile/src/features/Swap/useCases/StartSwapScreen/CreateOrder/CreateOrder.tsx

@@ -10,7 +10,7 @@ import {LoadingOverlay} from '../../../../../components/LoadingOverlay'
 import {useMetrics} from '../../../../../metrics/metricsManager'
 import {useSelectedWallet} from '../../../../../SelectedWallet'
 import {COLORS} from '../../../../../theme'
-import {useTokenInfos} from '../../../../../yoroi-wallets/hooks'
+import {useTokenInfo} from '../../../../../yoroi-wallets/hooks'
 import {Quantities} from '../../../../../yoroi-wallets/utils'
 import {createYoroiEntry} from '../../../common/helpers'
 import {useNavigateTo} from '../../../common/navigation'
@@ -35,9 +35,13 @@ export const CreateOrder = () => {
   const wallet = useSelectedWallet()
   const {track} = useMetrics()
 
-  const tokenInfos = useTokenInfos({
+  const sellTokenInfo = useTokenInfo({
     wallet,
-    tokenIds: [createOrder.amounts.buy.tokenId, createOrder.amounts.sell.tokenId],
+    tokenId: createOrder.amounts.sell.tokenId,
+  })
+  const buyTokenInfo = useTokenInfo({
+    wallet,
+    tokenId: createOrder.amounts.buy.tokenId,
   })
   const [showLimitPriceWarning, setShowLimitPriceWarning] = useState(false)
   const {isBuyTouched, isSellTouched, poolDefaulted} = useSwapTouched()
@@ -87,9 +91,6 @@ export const CreateOrder = () => {
     (createOrder.type === 'limit' && createOrder.limitPrice !== undefined && Quantities.isZero(createOrder.limitPrice))
 
   const swap = () => {
-    const sellTokenInfo = tokenInfos.filter((tokenInfo) => tokenInfo.id === createOrder.amounts.sell.tokenId)[0]
-    const buyTokenInfo = tokenInfos.filter((tokenInfo) => tokenInfo.id === createOrder.amounts.buy.tokenId)[0]
-
     track.swapOrderSelected({
       from_asset: [
         {asset_name: sellTokenInfo.name, asset_ticker: sellTokenInfo.ticker, policy_id: sellTokenInfo.group},

apps/wallet-mobile/src/features/Swap/useCases/StartSwapScreen/ListOrders/CompletedOrders.tsx

@@ -1,3 +1,4 @@
+import {useFocusEffect} from '@react-navigation/native'
 import {useSwapOrdersByStatusCompleted} from '@yoroi/swap'
 import _ from 'lodash'
 import React from 'react'
@@ -15,6 +16,7 @@ import {
   TokenIcon,
 } from '../../../../../components'
 import {useLanguage} from '../../../../../i18n'
+import {useMetrics} from '../../../../../metrics/metricsManager'
 import {useSearch} from '../../../../../Search/SearchContext'
 import {useSelectedWallet} from '../../../../../SelectedWallet'
 import {COLORS} from '../../../../../theme'
@@ -35,6 +37,14 @@ export const CompletedOrders = () => {
 
   const orders = useSwapOrdersByStatusCompleted()
 
+  const {track} = useMetrics()
+
+  useFocusEffect(
+    React.useCallback(() => {
+      track.swapConfirmedPageViewed({swap_tab: 'Completed Orders'})
+    }, [track]),
+  )
+
   const tokenIds = React.useMemo(() => _.uniq(orders.flatMap((o) => [o.from.tokenId, o.to.tokenId])), [orders])
   const tokenInfos = useTokenInfos({wallet, tokenIds})
   const normalizedOrders = React.useMemo(

apps/wallet-mobile/src/features/Swap/useCases/StartSwapScreen/ListOrders/OpenOrders.tsx

@@ -1,4 +1,5 @@
 import {PrivateKey} from '@emurgo/csl-mobile-bridge'
+import {useFocusEffect} from '@react-navigation/native'
 import {useSwap, useSwapOrdersByStatusOpen} from '@yoroi/swap'
 import {BalanceQuantity} from '@yoroi/types/src/balance/token'
 import {Buffer} from 'buffer'
@@ -24,6 +25,7 @@ import {
   TokenIcon,
 } from '../../../../../components'
 import {useLanguage} from '../../../../../i18n'
+import {useMetrics} from '../../../../../metrics/metricsManager'
 import {useSearch} from '../../../../../Search/SearchContext'
 import {useSelectedWallet} from '../../../../../SelectedWallet'
 import {COLORS} from '../../../../../theme'
@@ -75,12 +77,40 @@ export const OpenOrders = () => {
     [normalizedOrders, search],
   )
 
+  const {track} = useMetrics()
+
+  useFocusEffect(
+    React.useCallback(() => {
+      track.swapConfirmedPageViewed({swap_tab: 'Open Orders'})
+    }, [track]),
+  )
+
   const handlePasswordConfirm = async (password: string) => {
     const order = normalizedOrders.find((o) => o.id === orderId)
     if (!order || order.owner === undefined || order.utxo === undefined) return
     const tx = await createCancellationTxAnsSign(order.id, password)
     if (!tx) return
     await wallet.submitTransaction(tx.txBase64)
+
+    track.swapCancelationSubmitted({
+      from_amount: Number(order?.from.quantity) ?? 0,
+      to_amount: Number(order?.to.quantity) ?? 0,
+      from_asset: [
+        {
+          asset_name: order?.fromTokenInfo?.name,
+          asset_ticker: order?.fromTokenInfo?.ticker,
+          policy_id: order?.fromTokenInfo?.group,
+        },
+      ],
+      to_asset: [
+        {
+          asset_name: order?.toTokenInfo?.name,
+          asset_ticker: order?.toTokenInfo?.ticker,
+          policy_id: order?.toTokenInfo?.group,
+        },
+      ],
+      pool_source: order?.provider ?? '',
+    })
     closeBottomSheet()
   }
 

apps/wallet-mobile/src/features/Swap/useCases/StartSwapScreen/ListOrders/mapOrders.ts

@@ -1,7 +1,11 @@
 import {isString} from '@yoroi/common'
 import {getPoolUrlByProvider} from '@yoroi/swap'
 import {Balance} from '@yoroi/types'
+import {BalanceAmount, BalanceCardanoMetadatas} from '@yoroi/types/lib/balance/token'
 import {SwapCompletedOrder, SwapOpenOrder} from '@yoroi/types/lib/swap/order'
+import {SwapPoolProvider} from '@yoroi/types/lib/swap/pool'
+import {BalanceTokenInfo} from '@yoroi/types/src/balance/token'
+import {isString} from '@yoroi/wallets'
 import BigNumber from 'bignumber.js'
 
 import {NumberLocale} from '../../../../../i18n/languages'
@@ -10,15 +14,36 @@ import {Quantities} from '../../../../../yoroi-wallets/utils'
 
 const MAX_DECIMALS = 10
 
+export type MappedOrder = {
+  owner: unknown
+  utxo: string | undefined
+  tokenPrice: string
+  tokenAmount: string
+  id: string
+  assetFromLabel: string
+  assetToLabel: string
+  date: string
+  txId: string
+  total: string
+  txLink: string
+  toTokenInfo: BalanceTokenInfo<BalanceCardanoMetadatas> | undefined
+  provider: SwapPoolProvider | undefined
+  poolUrl: string | undefined
+  fromTokenInfo: BalanceTokenInfo<BalanceCardanoMetadatas> | undefined
+  fromTokenAmount: string
+  from: BalanceAmount
+  to: BalanceAmount
+}
+
 export const mapOrders = (
   orders: Array<SwapOpenOrder | SwapCompletedOrder>,
   tokenInfos: Balance.TokenInfo[],
   numberLocale: NumberLocale,
   transactionInfos: TransactionInfo[],
-) => {
+): Array<MappedOrder> => {
   if (orders.length === 0) return []
 
-  return orders.map((order) => {
+  return orders.map((order: SwapOpenOrder | SwapCompletedOrder) => {
     const {from, to} = order
     const [txIdOpen] = 'utxo' in order ? order.utxo.split('#', 1) : [undefined]
     const txIdComplete = 'txHash' in order ? order.txHash : undefined
@@ -69,6 +94,8 @@ export const mapOrders = (
       fromTokenAmount: BigNumber(Quantities.denominated(order.from.quantity, fromTokenInfo?.decimals ?? 0)).toFormat(
         numberLocale,
       ),
+      from,
+      to,
     }
   })
 }