feat(swap): Integrate open orders with MuesliSwap API

apps/wallet-mobile/src/TxHistory/TxHistoryNavigator.tsx

@@ -27,7 +27,7 @@ import {BackButton, defaultStackNavigationOptions, TxHistoryRoutes, useWalletNav
 import {ReceiveScreen} from '../Receive/ReceiveScreen'
 import {useSelectedWallet} from '../SelectedWallet'
 import {COLORS} from '../theme'
-import {useWalletName} from '../yoroi-wallets/hooks'
+import {useStakingKey, useWalletName} from '../yoroi-wallets/hooks'
 import {ModalInfo} from './ModalInfo'
 import {TxDetails} from './TxDetails'
 import {TxHistory} from './TxHistory'
@@ -41,11 +41,12 @@ export const TxHistoryNavigator = () => {
   const [modalInfoState, setModalInfoState] = React.useState(false)
   const showModalInfo = () => setModalInfoState(true)
   const hideModalInfo = () => setModalInfoState(false)
+  const stakingKey = useStakingKey(wallet)
 
   const swapStorage = makeSwapStorage()
   const swapAPI = makeSwapApi({
     network: 0,
-    stakingKey: wallet.rewardAddressHex,
+    stakingKey,
   })
   const swapManager = makeSwapManager(swapStorage, swapAPI)
 

apps/wallet-mobile/src/features/Swap/common/PoolIcon/PoolIcon.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+
+import {Icon} from '../../../../components'
+import {COLORS} from '../../../../theme'
+
+// TODO add icons for each pool and change it depending on name
+/* eslint-disable @typescript-eslint/no-unused-vars */
+export const PoolIcon = ({providerId, size}: {providerId: string; size: number}) => {
+  return <Icon.YoroiNightly size={size} color={COLORS.SHELLEY_BLUE} />
+}

apps/wallet-mobile/src/features/Swap/common/SelectPool/SelectPoolFromList/SelectPoolFromList.tsx

@@ -4,10 +4,11 @@ import React, {useState} from 'react'
 import {StyleSheet, Text, TouchableOpacity, View} from 'react-native'
 import LinearGradient from 'react-native-linear-gradient'
 
-import {Icon, Spacer} from '../../../../../components'
+import {Spacer} from '../../../../../components'
 import {useMetrics} from '../../../../../metrics/metricsManager'
 import {COLORS} from '../../../../../theme'
 import {useNavigateTo} from '../../navigation'
+import {PoolIcon} from '../../PoolIcon/PoolIcon'
 import {useStrings} from '../../strings'
 
 type Props = {
@@ -42,9 +43,8 @@ export const SelectPoolFromList = ({data = []}: Props) => {
             >
               <TouchableOpacity key={pool.poolId} onPress={() => handleCardSelect(pool)} style={[styles.card]}>
                 <View style={styles.cardHeader}>
-                  {/* TODO add icons for each pool and change it depending on name */}
                   <View style={styles.icon}>
-                    <Icon.YoroiNightly size={40} color={COLORS.SHELLEY_BLUE} />
+                    <PoolIcon size={40} providerId={pool.poolId} />
                   </View>
 
                   <Text style={styles.label}>{protocolCapitalize(pool.provider)}</Text>

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

@@ -1,4 +1,3 @@
-import {useOrderByStatusCompleted} from '@yoroi/swap'
 import React from 'react'
 import {Linking, ScrollView, StyleSheet, TouchableOpacity, View} from 'react-native'
 
@@ -14,7 +13,8 @@ import {
   MainInfoWrapper,
 } from '../../../common/SelectPool/ExpendableCard/ExpandableInfoCard'
 import {useStrings} from '../../../common/strings'
-import {mapOrders, OrderProps} from './mapOrders'
+import {OrderProps} from './mapOrders'
+import {getMockOrders} from './mocks'
 
 export const CompletedOrders = () => {
   const strings = useStrings()
@@ -26,13 +26,7 @@ export const CompletedOrders = () => {
   })
   const [hiddenInfoOpenId, setHiddenInfoOpenId] = React.useState<string | null>(null)
 
-  const data = useOrderByStatusCompleted({
-    onError: (err) => {
-      console.log(err)
-    },
-  })
-
-  const orders = mapOrders(data).filter(
+  const orders = getMockOrders().filter(
     ({assetFromLabel, assetToLabel}) =>
       assetFromLabel.toLocaleLowerCase().includes(search.toLocaleLowerCase()) ||
       assetToLabel.toLocaleLowerCase().includes(search.toLocaleLowerCase()),

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

@@ -1,11 +1,17 @@
 import {useOrderByStatusOpen} from '@yoroi/swap'
+import {uniq} from 'lodash'
 import React from 'react'
+import {useIntl} from 'react-intl'
 import {Linking, ScrollView, StyleSheet, TouchableOpacity, View} from 'react-native'
 
-import {BottomSheetModal, Button, Icon, Spacer, Text, TextInput} from '../../../../../components'
+import {BottomSheetModal, Button, Spacer, Text, TextInput, TokenIcon} from '../../../../../components'
+import {useLanguage} from '../../../../../i18n'
 import {useSearch} from '../../../../../Search/SearchContext'
+import {useSelectedWallet} from '../../../../../SelectedWallet'
 import {COLORS} from '../../../../../theme'
+import {useTokenInfos, useTransactionInfos} from '../../../../../yoroi-wallets/hooks'
 import {Counter} from '../../../common/Counter/Counter'
+import {PoolIcon} from '../../../common/PoolIcon/PoolIcon'
 import {
   BottomSheetState,
   ExpandableInfoCard,
@@ -14,59 +20,98 @@ import {
   MainInfoWrapper,
 } from '../../../common/SelectPool/ExpendableCard/ExpandableInfoCard'
 import {useStrings} from '../../../common/strings'
-import {mapOrders, OrderProps} from './mapOrders'
+import {mapOrders} from './mapOrders'
 
 export const OpenOrders = () => {
   const [bottomSheetState, setBottomSheetState] = React.useState<BottomSheetState>({
     openId: null,
     title: '',
     content: '',
   })
+  const wallet = useSelectedWallet()
   const [hiddenInfoOpenId, setHiddenInfoOpenId] = React.useState<string | null>(null)
   const [confirmationModal, setConfirmationModal] = React.useState(false)
   const strings = useStrings()
   const [spendingPassword, setSpendingPassword] = React.useState('')
-
   const {search} = useSearch()
+  const transactionsInfos = useTransactionInfos(wallet)
+  const {numberLocale} = useLanguage()
+  const intl = useIntl()
 
-  const data = useOrderByStatusOpen({
+  const orders = useOrderByStatusOpen({
     onError: (err) => {
       console.log(err)
     },
   })
+  const tokenIds = uniq(orders.flatMap((o) => [o.from.tokenId, o.to.tokenId]))
 
-  const orders = mapOrders(data).filter(
-    ({assetFromLabel, assetToLabel}) =>
-      assetFromLabel.toLocaleLowerCase().includes(search.toLocaleLowerCase()) ||
-      assetToLabel.toLocaleLowerCase().includes(search.toLocaleLowerCase()),
-  )
+  const tokenInfos = useTokenInfos({wallet, tokenIds: tokenIds})
+
+  const normalizedOrders = mapOrders(orders, tokenInfos, numberLocale, Object.values(transactionsInfos))
+
+  const searchLower = search.toLocaleLowerCase()
+
+  const filteredOrders = normalizedOrders.filter((order) => {
+    return (
+      order.assetFromLabel.toLocaleLowerCase().includes(searchLower) ||
+      order.assetToLabel.toLocaleLowerCase().includes(searchLower)
+    )
+  })
 
   return (
     <>
       <View style={styles.container}>
         <ScrollView style={styles.flex}>
-          {orders.map((order) => {
-            const id = `${order.assetFromLabel}-${order.assetToLabel}-${order.date}`
+          {filteredOrders.map((order) => {
+            const fromIcon = <TokenIcon wallet={wallet} tokenId={order.fromTokenInfo?.id ?? ''} variant="swap" />
+            const toIcon = <TokenIcon wallet={wallet} tokenId={order.toTokenInfo?.id ?? ''} variant="swap" />
+            const liquidityPoolIcon = <PoolIcon size={32} providerId={order.provider} />
             return (
               <ExpandableInfoCard
-                id={id}
-                key={id}
+                id={order.id}
+                key={order.id}
                 bottomSheetState={bottomSheetState}
                 setBottomSheetState={setBottomSheetState}
                 setHiddenInfoOpenId={setHiddenInfoOpenId}
                 hiddenInfoOpenId={hiddenInfoOpenId}
-                label={<Label assetFromLabel={order.assetFromLabel} assetToLabel={order.assetToLabel} />}
-                hiddenInfo={<HiddenInfo id={id} order={order} setBottomSheetState={setBottomSheetState} />}
-                mainInfo={<MainInfo order={order} />}
+                label={
+                  <Label
+                    assetFromIcon={fromIcon}
+                    assetToIcon={toIcon}
+                    assetFromLabel={order.assetFromLabel}
+                    assetToLabel={order.assetToLabel}
+                  />
+                }
+                hiddenInfo={
+                  <HiddenInfo
+                    id={order.id}
+                    txId={order.txId}
+                    total={`${order.total} ${order.assetFromLabel}`}
+                    txLink={order.txLink}
+                    date={intl.formatDate(new Date(order.date), {dateStyle: 'short', timeStyle: 'short'})}
+                    liquidityPoolIcon={liquidityPoolIcon}
+                    liquidityPoolName={order.provider}
+                    poolUrl={order.poolUrl}
+                    setBottomSheetState={setBottomSheetState}
+                  />
+                }
+                mainInfo={
+                  <MainInfo
+                    tokenAmount={`${order.tokenAmount} ${order.assetToLabel}`}
+                    tokenPrice={`${order.tokenPrice} ${order.assetFromLabel}`}
+                  />
+                }
                 buttonLabel={strings.listOrdersSheetButtonText.toLocaleUpperCase()}
                 onPress={() => {
                   setBottomSheetState({
-                    openId: id,
+                    openId: order.id,
                     title: strings.listOrdersSheetTitle,
                     content: (
                       <ModalContent
-                        assetFromIcon={order.assetFromIcon}
-                        assetToIcon={order.assetToIcon}
+                        assetFromIcon={
+                          <TokenIcon wallet={wallet} tokenId={order.fromTokenInfo?.id ?? ''} variant="swap" />
+                        }
+                        assetToIcon={<TokenIcon wallet={wallet} tokenId={order.toTokenInfo?.id ?? ''} variant="swap" />}
                         confirmationModal={confirmationModal}
                         onConfirm={() => {
                           setBottomSheetState({openId: null, title: '', content: ''})
@@ -130,38 +175,51 @@ export const OpenOrders = () => {
 
 const HiddenInfo = ({
   id,
-  order,
   setBottomSheetState,
+  total,
+  liquidityPoolIcon,
+  liquidityPoolName,
+  poolUrl,
+  date,
+  txId,
+  txLink,
 }: {
   id: string
-  order: OrderProps
+  total: string
+  liquidityPoolIcon: React.ReactNode
+  liquidityPoolName: string
+  poolUrl: string
+  date: string
+  txId: string
+  txLink: string
   setBottomSheetState: (state: BottomSheetState) => void
 }) => {
+  const shortenedTxId = `${txId.substring(0, 9)}...${txId.substring(txId.length - 4, txId.length)}`
   const strings = useStrings()
   return (
     <View>
       {[
         {
           label: strings.listOrdersTotal,
-          value: order.total,
+          value: total,
         },
         {
           label: strings.listOrdersLiquidityPool,
           value: (
             <LiquidityPool
-              liquidityPoolIcon={order.liquidityPoolIcon}
-              liquidityPoolName={order.liquidityPoolName}
-              poolUrl={order.poolUrl}
+              liquidityPoolIcon={liquidityPoolIcon}
+              liquidityPoolName={liquidityPoolName}
+              poolUrl={poolUrl}
             />
           ),
         },
         {
           label: strings.listOrdersTimeCreated,
-          value: order.date,
+          value: date,
         },
         {
           label: strings.listOrdersTxId,
-          value: <TxLink txId={order.txId} txLink={order.txLink} />,
+          value: <TxLink txId={shortenedTxId} txLink={txLink} />,
         },
       ].map((item) => (
         <HiddenInfoWrapper
@@ -180,13 +238,13 @@ const HiddenInfo = ({
   )
 }
 
-const MainInfo = ({order}: {order: OrderProps}) => {
+const MainInfo = ({tokenPrice, tokenAmount}: {tokenPrice: string; tokenAmount: string}) => {
   const strings = useStrings()
   return (
     <View>
       {[
-        {label: strings.listOrdersSheetAssetPrice, value: order.tokenPrice},
-        {label: strings.listOrdersSheetAssetAmount, value: order.tokenAmount},
+        {label: strings.listOrdersSheetAssetPrice, value: tokenPrice},
+        {label: strings.listOrdersSheetAssetAmount, value: tokenAmount},
       ].map((item, index) => (
         <MainInfoWrapper key={index} label={item.label} value={item.value} isLast={index === 1} />
       ))}
@@ -224,10 +282,20 @@ const LiquidityPool = ({
   )
 }
 
-const Label = ({assetFromLabel, assetToLabel}: {assetFromLabel: string; assetToLabel: string}) => {
+const Label = ({
+  assetFromLabel,
+  assetFromIcon,
+  assetToIcon,
+  assetToLabel,
+}: {
+  assetFromLabel: string
+  assetToLabel: string
+  assetFromIcon: React.ReactNode
+  assetToIcon: React.ReactNode
+}) => {
   return (
     <View style={styles.label}>
-      <Icon.YoroiNightly size={24} />
+      {assetFromIcon}
 
       <Spacer width={4} />
 
@@ -237,7 +305,7 @@ const Label = ({assetFromLabel, assetToLabel}: {assetFromLabel: string; assetToL
 
       <Spacer width={4} />
 
-      <Icon.Assets size={24} />
+      {assetToIcon}
 
       <Spacer width={4} />