chore(swap): add unsignedTx (#2659)

apps/wallet-mobile/package.json

@@ -104,7 +104,7 @@
     "@emurgo/csl-mobile-bridge": "^5.1.2",
     "@emurgo/react-native-blockies-svg": "^0.0.2",
     "@emurgo/react-native-hid": "^5.15.6",
-    "@emurgo/yoroi-lib": "0.6.2",
+    "@emurgo/yoroi-lib": "^0.7.0",
     "@formatjs/intl-datetimeformat": "^6.7.0",
     "@formatjs/intl-getcanonicallocales": "^2.1.0",
     "@formatjs/intl-locale": "^3.2.1",

apps/wallet-mobile/src/Receive/Addresses.tsx

@@ -8,7 +8,6 @@ import {useSelectedWallet} from '../SelectedWallet'
 import {COLORS} from '../theme'
 import {isEmptyString} from '../utils/utils'
 import {useReceiveAddresses} from '../yoroi-wallets/hooks'
-import {Address as AddressType} from '../yoroi-wallets/types'
 import AddressModal from './AddressModal'
 
 export const UnusedAddresses = () => {
@@ -187,11 +186,11 @@ const useAddressIndex = (address: string) => {
 }
 
 type Addresses = {
-  used: AddressType[]
-  unused: AddressType[]
+  used: string[]
+  unused: string[]
 }
 
-const useAddresses = (): Addresses => {
+export const useAddresses = (): Addresses => {
   const wallet = useSelectedWallet()
   const receiveAddresses = useReceiveAddresses(wallet)
   const isUsedAddressIndex = wallet.isUsedAddressIndex

apps/wallet-mobile/src/features/Swap/common/helpers.ts

@@ -1,6 +1,8 @@
+import {Swap} from '@yoroi/types'
 import {BalanceQuantity} from '@yoroi/types/lib/balance/token'
 import BigNumber from 'bignumber.js'
 
+import {YoroiEntry} from '../../../yoroi-wallets/types'
 import {Quantities} from '../../../yoroi-wallets/utils'
 
 export const getBuyQuantityForLimitOrder = (
@@ -32,3 +34,24 @@ export const getSellQuantityForLimitOrder = (
     sellTokenDecimals,
   ).toString() as BalanceQuantity
 }
+
+export const createYoroiEntry = (createOrder: Swap.CreateOrderData, address: string): YoroiEntry => {
+  const amountEntry = {}
+  const tokenId = createOrder?.amounts?.sell.tokenId
+  if (tokenId != null && createOrder.amounts.sell.quantity !== undefined) {
+    if (createOrder?.amounts?.sell.tokenId === '') {
+      amountEntry[tokenId] = Quantities.sum([
+        createOrder.selectedPool.deposit.quantity,
+        createOrder.amounts.sell.quantity,
+      ])
+    } else {
+      amountEntry[''] = createOrder.selectedPool.deposit.quantity
+      amountEntry[tokenId] = createOrder.amounts.sell.quantity
+    }
+  }
+
+  return {
+    address: address,
+    amounts: amountEntry,
+  }
+}

apps/wallet-mobile/src/features/Swap/common/useSwapTx.ts

@@ -0,0 +1,27 @@
+import {UseMutationOptions} from 'react-query'
+
+import {useSelectedWallet} from '../../../SelectedWallet'
+import {useMutationWithInvalidations} from '../../../yoroi-wallets/hooks'
+import {YoroiEntry, YoroiUnsignedTx} from '../../../yoroi-wallets/types'
+
+export const useSwapTx = (
+  options?: UseMutationOptions<YoroiUnsignedTx, Error, {entry: YoroiEntry; datum: {hash: string}}>,
+) => {
+  const metadata = [
+    {
+      label: 'Yoroi-Swap',
+      data: {msg: ['Yoroi: Swap B for A Order Request']},
+    },
+  ]
+  const wallet = useSelectedWallet()
+  const mutation = useMutationWithInvalidations({
+    mutationFn: (data) => wallet.createUnsignedTx(data.entry, metadata, data.datum),
+    invalidateQueries: ['useCreateOrder'],
+    ...options,
+  })
+
+  return {
+    createUnsignedTx: mutation.mutate,
+    ...mutation,
+  }
+}

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

@@ -1,38 +1,34 @@
 import {useSwap} from '@yoroi/swap'
 import React from 'react'
-import {StyleSheet, TextInput as RNTextInput, TouchableOpacity, View, ViewProps} from 'react-native'
+import {StyleSheet, TextInput as RNTextInput, View, ViewProps} from 'react-native'
 import {SafeAreaView} from 'react-native-safe-area-context'
 
-import {Button, Icon, Spacer, Text, TextInput} from '../../../../components'
-import {AmountItem} from '../../../../components/AmountItem/AmountItem'
+import {Button, Spacer, Text, TextInput} from '../../../../components'
 import {BottomSheetModal} from '../../../../components/BottomSheetModal'
 import {useSelectedWallet} from '../../../../SelectedWallet'
 import {COLORS} from '../../../../theme'
 import {useTokenInfo} from '../../../../yoroi-wallets/hooks'
 import {Quantities} from '../../../../yoroi-wallets/utils'
 import {useStrings} from '../../common/strings'
+import {TransactionSummary} from './TransactionSummary'
 
 export const ConfirmTxScreen = () => {
   const spendingPasswordRef = React.useRef<RNTextInput>(null)
   const [confirmationModal, setConfirmationModal] = React.useState<boolean>(false)
-  const [bottomSheetState, setBottomSheetState] = React.useState<{isOpen: boolean; title: string; content?: string}>({
-    isOpen: false,
-    title: '',
-    content: '',
-  })
 
   const [spendingPassword, setSpendingPassword] = React.useState('')
   const strings = useStrings()
   const wallet = useSelectedWallet()
 
-  const {createOrder} = useSwap()
-  const {selectedPool, amounts} = createOrder
+  const {createOrder, unsignedTx} = useSwap()
+  const {amounts} = createOrder
   const buyTokenInfo = useTokenInfo({wallet, tokenId: amounts.buy.tokenId})
-  const sellTokenInfo = useTokenInfo({wallet, tokenId: amounts.sell.tokenId})
   const tokenToBuyName = buyTokenInfo.ticker ?? buyTokenInfo.name
 
-  const calculatedFee = (Number(selectedPool?.fee) / 100) * Number(createOrder.amounts.sell.quantity)
-  const poolFee = Quantities.format(`${calculatedFee}`, sellTokenInfo.decimals ?? 0)
+  const poolFee = Quantities.denominated(
+    `${Number(Object.values(unsignedTx?.fee))}`,
+    Number(wallet.primaryTokenInfo.decimals),
+  )
 
   const orderInfo = [
     {
@@ -54,66 +50,16 @@ export const ConfirmTxScreen = () => {
 
   return (
     <SafeAreaView style={styles.container}>
-      <View>
-        <View style={styles.card}>
-          <Text style={styles.cardText}>{strings.total}</Text>
-
-          <View>
-            <Text style={[styles.cardText, styles.cardTextValue]}>{`${Quantities.format(
-              amounts.buy.quantity,
-              buyTokenInfo.decimals ?? 0,
-            )} ${tokenToBuyName}`}</Text>
-
-            <Spacer height={6} />
-
-            <Text style={styles.cardTextUSD}></Text>
-          </View>
-        </View>
-
-        <Spacer height={24} />
-
-        {orderInfo.map((orderInfo) => {
-          return (
-            <View key={orderInfo.label}>
-              <Spacer height={8} />
-
-              <View style={styles.flexBetween}>
-                <View style={styles.flex}>
-                  <Text style={[styles.text, styles.gray]}>{orderInfo.label}</Text>
-
-                  <Spacer width={8} />
-
-                  <TouchableOpacity
-                    onPress={() => {
-                      setBottomSheetState({
-                        isOpen: true,
-                        title: orderInfo.label,
-                        content: orderInfo.info,
-                      })
-                    }}
-                  >
-                    <Icon.Info size={24} />
-                  </TouchableOpacity>
-                </View>
-
-                <Text style={styles.text}>{orderInfo.value}</Text>
-              </View>
-            </View>
-          )
-        })}
-
-        <Spacer height={24} />
-
-        <Text style={styles.amountItemLabel}>{strings.swapFrom}</Text>
-
-        <AmountItem wallet={wallet} amount={{tokenId: amounts.sell.tokenId, quantity: amounts.sell.quantity}} />
-
-        <Spacer height={16} />
-
-        <Text style={styles.amountItemLabel}>{strings.swapTo}</Text>
-
-        <AmountItem wallet={wallet} amount={{tokenId: amounts.buy.tokenId, quantity: amounts.buy.quantity}} />
-      </View>
+      <TransactionSummary
+        feesInfo={orderInfo}
+        buyToken={{
+          id: amounts.buy.tokenId,
+          quantity: amounts.buy.quantity,
+          name: tokenToBuyName,
+          decimals: buyTokenInfo.decimals,
+        }}
+        sellToken={{id: amounts.sell.tokenId, quantity: amounts.sell.quantity}}
+      />
 
       <Actions>
         <Button
@@ -152,16 +98,6 @@ export const ConfirmTxScreen = () => {
           <Button testID="swapButton" shelleyTheme title={strings.sign} />
         </>
       </BottomSheetModal>
-
-      <BottomSheetModal
-        isOpen={bottomSheetState.isOpen}
-        title={bottomSheetState.title}
-        onClose={() => {
-          setBottomSheetState({isOpen: false, title: '', content: ''})
-        }}
-      >
-        <Text style={styles.text}>{bottomSheetState.content}</Text>
-      </BottomSheetModal>
     </SafeAreaView>
   )
 }
@@ -173,55 +109,9 @@ const styles = StyleSheet.create({
     flex: 1,
     flexDirection: 'column',
     paddingHorizontal: 16,
-    paddingTop: 16,
     backgroundColor: COLORS.WHITE,
     justifyContent: 'space-between',
   },
-  card: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'flex-start',
-    backgroundColor: COLORS.SHELLEY_BLUE,
-    padding: 16,
-    borderRadius: 8,
-  },
-  cardText: {
-    fontSize: 18,
-    color: COLORS.WHITE,
-  },
-  cardTextValue: {
-    fontWeight: '500',
-    fontFamily: 'Rubik-Medium',
-  },
-  cardTextUSD: {
-    fontSize: 14,
-    color: COLORS.WHITE,
-    opacity: 0.5,
-  },
-  flexBetween: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-  },
-  flex: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  text: {
-    textAlign: 'left',
-    fontSize: 16,
-    lineHeight: 24,
-    fontWeight: '400',
-    color: '#242838',
-  },
-  gray: {
-    color: COLORS.GRAY,
-  },
-  amountItemLabel: {
-    fontSize: 12,
-    color: '#242838',
-    paddingBottom: 8,
-  },
   actions: {
     paddingVertical: 16,
   },