merge develop

Author: banklesss

apps/wallet-mobile/.storybook/storybook.requires.js

@@ -69,6 +69,9 @@ const Yoroi = () => {
                                       <ReviewTxProvider>
                                         <InitApp />
                                       </ReviewTxProvider>
+                                      <ReviewTxProvider>
+                                        <InitApp />
+                                      </ReviewTxProvider>
                                     </AutomaticWalletOpenerProvider>
                                   </BrowserProvider>
                                 </PoolTransitionProvider>

apps/wallet-mobile/src/YoroiApp.tsx

@@ -2,7 +2,7 @@ import {SpacingSize, useTheme} from '@yoroi/theme'
 import * as React from 'react'
 import {StyleSheet, View} from 'react-native'
 
-import {Space} from '../../../components/Space/Space'
+import {Space} from '../Space/Space'
 
 export const Divider = ({verticalSpace = 'none'}: {verticalSpace?: SpacingSize}) => {
   const {styles} = useStyles()

apps/wallet-mobile/src/features/ReviewTx/common/Divider.tsx apps/wallet-mobile/src/components/Divider/Divider.tsx

@@ -13,7 +13,7 @@ import {useSelectedWallet} from '../../../../WalletManager/common/hooks/useSelec
 import {useWalletManager} from '../../../../WalletManager/context/WalletManagerProvider'
 import {Accordion} from '../../../common/Accordion'
 import {CopiableText} from '../../../common/CopiableText'
-import {Divider} from '../../../common/Divider'
+import {Divider} from '../../../../../components/Divider/Divider'
 import {useAddressType} from '../../../common/hooks/useAddressType'
 import {useStrings} from '../../../common/hooks/useStrings'
 import {ReviewTxState} from '../../../common/ReviewTxProvider'

apps/wallet-mobile/src/features/ReviewTx/useCases/ReviewTxScreen/Overview/OverviewTab.tsx

@@ -5,7 +5,7 @@ import {StyleSheet, Text, View} from 'react-native'
 import {Space} from '../../../../../components/Space/Space'
 import {Accordion} from '../../../common/Accordion'
 import {CopiableText} from '../../../common/CopiableText'
-import {Divider} from '../../../common/Divider'
+import {Divider} from '../../../../../components/Divider/Divider'
 import {useStrings} from '../../../common/hooks/useStrings'
 import {TokenItem} from '../../../common/TokenItem'
 import {FormattedInput, FormattedInputs, FormattedOutput, FormattedOutputs, FormattedTx} from '../../../common/types'

apps/wallet-mobile/src/features/ReviewTx/useCases/ReviewTxScreen/UTxOs/UTxOsTab.tsx

@@ -0,0 +1,77 @@
+import {defineMessages, useIntl} from 'react-intl'
+
+export const useStrings = () => {
+  const intl = useIntl()
+  return {
+    lockedAsCollateral: intl.formatMessage(messages.lockedAsCollateral),
+    removeCollateral: intl.formatMessage(messages.removeCollateral),
+    collateralSpent: intl.formatMessage(messages.collateralSpent),
+    generateCollateral: intl.formatMessage(messages.generateCollateral),
+    notEnoughFundsAlertTitle: intl.formatMessage(messages.notEnoughFundsAlertTitle),
+    notEnoughFundsAlertMessage: intl.formatMessage(messages.notEnoughFundsAlertMessage),
+    notEnoughFundsAlertOK: intl.formatMessage(messages.notEnoughFundsAlertOK),
+    collateralInfoModalLabel: intl.formatMessage(messages.collateralInfoModalLabel),
+    collateralInfoModalTitle: intl.formatMessage(messages.collateralInfoModalTitle),
+    collateralInfoModalText: intl.formatMessage(messages.collateralInfoModalText),
+    initialCollateralInfoModalTitle: intl.formatMessage(messages.initialCollateralInfoModalTitle),
+    initialCollateralInfoModalText: intl.formatMessage(messages.initialCollateralInfoModalText),
+    initialCollateralInfoModalButton: intl.formatMessage(messages.initialCollateralInfoModalButton),
+  }
+}
+
+const messages = defineMessages({
+  lockedAsCollateral: {
+    id: 'components.settings.collateral.lockedAsCollateral',
+    defaultMessage: '!!!Locked as collateral',
+  },
+  removeCollateral: {
+    id: 'components.settings.collateral.removeCollateral',
+    defaultMessage: '!!!If you want to return the amount locked as collateral to your balance press the remove icon',
+  },
+  collateralSpent: {
+    id: 'components.settings.collateral.collateralSpent',
+    defaultMessage: '!!!Your collateral is gone, please generate new collateral',
+  },
+  generateCollateral: {
+    id: 'components.settings.collateral.generateCollateral',
+    defaultMessage: '!!!Generate collateral',
+  },
+  notEnoughFundsAlertTitle: {
+    id: 'components.settings.collateral.notEnoughFundsAlertTitle',
+    defaultMessage: '!!!Not enough funds',
+  },
+  notEnoughFundsAlertMessage: {
+    id: 'components.settings.collateral.notEnoughFundsAlertMessage',
+    defaultMessage: '!!!We could not find enough funds in this wallet to create collateral.',
+  },
+  notEnoughFundsAlertOK: {
+    id: 'components.settings.collateral.notEnoughFundsAlertOK',
+    defaultMessage: '!!!OK',
+  },
+  collateralInfoModalLabel: {
+    id: 'components.settings.collateral.collateralInfoModalLabel',
+    defaultMessage: '!!!Collateral creation',
+  },
+  collateralInfoModalTitle: {
+    id: 'components.settings.collateral.collateralInfoModalTitle',
+    defaultMessage: '!!!What is collateral?',
+  },
+  collateralInfoModalText: {
+    id: 'components.settings.collateral.collateralInfoModalText',
+    defaultMessage:
+      '!!!The collateral mechanism is an important feature that has been designed to ensure successful smart contract execution. It is used to guarantee that Cardano nodes are compensated for their work in case phase-2 validation fails.',
+  },
+  initialCollateralInfoModalTitle: {
+    id: 'components.settings.collateral.initialCollateralInfoModalTitle',
+    defaultMessage: '!!!Collateral creation',
+  },
+  initialCollateralInfoModalText: {
+    id: 'components.settings.collateral.initialCollateralInfoModalText',
+    defaultMessage:
+      '!!!The collateral mechanism is designed to ensure smart contracts on Cardano execute successfully. It guarantees that nodes are compensated for their work if a contract fails during validation.',
+  },
+  initialCollateralInfoModalButton: {
+    id: 'components.settings.collateral.initialCollateralInfoModalButton',
+    defaultMessage: '!!!Add collateral',
+  },
+})

apps/wallet-mobile/src/features/Settings/ManageCollateral/strings.ts

@@ -10,6 +10,7 @@ import {
   TouchableOpacity,
   TouchableOpacityProps,
   useWindowDimensions,
+  useWindowDimensions,
   View,
   ViewProps,
 } from 'react-native'
@@ -39,6 +40,7 @@ import {useSelectedWallet} from '../../../../WalletManager/common/hooks/useSelec
 import {CollateralInfoModal} from './CollateralInfoModal'
 import {createCollateralEntry} from './helpers'
 import {InitialCollateralInfoModal} from './InitialCollateralInfoModal'
+import {InitialCollateralInfoModal} from './InitialCollateralInfoModal'
 import {useNavigateTo} from './navigation'
 import {useStrings} from './strings'
 
@@ -49,15 +51,19 @@ export const ManageCollateralScreen = () => {
     meta: {addressMode},
   } = useSelectedWallet()
   const screenHeight = useWindowDimensions().height
+  const screenHeight = useWindowDimensions().height
   const {amount, collateralId, utxo} = useCollateralInfo(wallet)
   const hasCollateral = collateralId !== '' && utxo !== undefined
   const didSpend = collateralId !== '' && utxo === undefined
   const navigateTo = useNavigateTo()
   const {openModal} = useModal()
+  const {openModal} = useModal()
   const strings = useStrings()
   const balances = useBalances(wallet)
   const {navigateToTxReview} = useWalletNavigation()
   const {unsignedTxChanged, onSuccessChanged, onErrorChanged, operationsChanged} = useReviewTx()
+  const {navigateToTxReview} = useWalletNavigation()
+  const {unsignedTxChanged, onSuccessChanged, onErrorChanged, operationsChanged} = useReviewTx()
   const lockedAmount = asQuantity(wallet.primaryBreakdown.lockedAsStorageCost.toString())
 
   const params = useUnsafeParams<SettingsStackRoutes['manage-collateral']>()
@@ -88,6 +94,16 @@ export const ManageCollateralScreen = () => {
     navigateTo.failedTx()
   }
 
+  const onSuccess = (signedTx: YoroiSignedTx) => {
+    navigateTo.submittedTx()
+    const collateralId = `${signedTx.signedTx.id}:0`
+    setCollateralId(collateralId)
+  }
+
+  const onError = () => {
+    navigateTo.failedTx()
+  }
+
   const createCollateralTransaction = () => {
     LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
 
@@ -98,6 +114,11 @@ export const ManageCollateralScreen = () => {
         onSuccessChanged(onSuccess)
         onErrorChanged(onError)
         navigateToTxReview()
+        unsignedTxChanged(yoroiUnsignedTx)
+        operationsChanged([<Operation key="0" />])
+        onSuccessChanged(onSuccess)
+        onErrorChanged(onError)
+        navigateToTxReview()
       },
     })
   }
@@ -137,6 +158,14 @@ export const ManageCollateralScreen = () => {
     )
   }
 
+  const handleCollateralInfoModal = () => {
+    openModal(
+      strings.initialCollateralInfoModalTitle,
+      <InitialCollateralInfoModal onConfirm={handleGenerateCollateral} />,
+      Math.min(screenHeight * 0.9, 650),
+    )
+  }
+
   const shouldShowPrimaryButton = !hasCollateral || didSpend
   const shouldShowBackButton = !shouldShowPrimaryButton && !!params?.backButton
 
@@ -183,6 +212,7 @@ export const ManageCollateralScreen = () => {
         <Button
           title={strings.generateCollateral}
           onPress={handleCollateralInfoModal}
+          onPress={handleCollateralInfoModal}
           shelleyTheme
           disabled={isLoading}
         />
@@ -261,20 +291,49 @@ const Operation = () => {
   )
 }
 
+const Operation = () => {
+  const {styles, colors} = useStyles()
+  const strings = useStrings()
+  const {openModal} = useModal()
+
+  const handleOnPressInfo = () => {
+    openModal(strings.collateralInfoModalTitle, <CollateralInfoModal />, 500)
+  }
+
+  return (
+    <View style={styles.operation}>
+      <Text style={styles.operationText}>{strings.collateralInfoModalLabel}</Text>
+
+      <Space width="xs" />
+
+      <TouchableOpacity onPress={handleOnPressInfo}>
+        <Info size={24} color={colors.iconColor} />
+      </TouchableOpacity>
+    </View>
+  )
+}
+
 const useStyles = () => {
+  const {color, atoms} = useTheme()
   const {color, atoms} = useTheme()
   const styles = StyleSheet.create({
     safeAreaView: {
       backgroundColor: color.bg_color_max,
       ...atoms.flex_1,
       ...atoms.px_lg,
+      ...atoms.flex_1,
+      ...atoms.px_lg,
     },
     amountItem: {
       ...atoms.flex_row,
       ...atoms.justify_between,
       ...atoms.align_center,
+      ...atoms.flex_row,
+      ...atoms.justify_between,
+      ...atoms.align_center,
     },
     heading: {
+      ...atoms.flex_1,
       ...atoms.flex_1,
       alignSelf: 'center',
     },
@@ -286,11 +345,21 @@ const useStyles = () => {
       ...atoms.body_2_md_regular,
       color: color.text_gray_medium,
     },
+    operation: {
+      ...atoms.flex_row,
+      ...atoms.align_center,
+    },
+    operationText: {
+      ...atoms.body_2_md_regular,
+      color: color.text_gray_medium,
+    },
   })
 
   const colors = {
     iconColor: color.gray_900,
+    iconColor: color.gray_900,
   }
 
   return {styles, colors} as const
+  return {styles, colors} as const
 }

apps/wallet-mobile/src/features/Settings/useCases/changeWalletSettings/ManageCollateral/ManageCollateralScreen.tsx

@@ -14,6 +14,7 @@ export const useNavigateTo = () => {
     selectSellToken: () => swapNavigation.navigate('swap-select-sell-token'),
     startSwap: () => swapNavigation.navigate('swap-start-swap', {screen: 'token-swap'}),
     confirmTx: () => swapNavigation.navigate('swap-confirm-tx'),
+    reviewSwap: () => swapNavigation.navigate('swap-review'),
     submittedTx: (txId: string) => swapNavigation.navigate('swap-submitted-tx', {txId}),
     failedTx: () => swapNavigation.navigate('swap-failed-tx'),
     swapOpenOrders: () =>