merge develop

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

@@ -13,7 +13,6 @@ import {Resolver, Swap} from '@yoroi/types'
 import React from 'react'
 import {defineMessages, useIntl} from 'react-intl'
 import {StyleSheet, Text, TouchableOpacity, TouchableOpacityProps, View, ViewProps} from 'react-native'
-import {Easing} from 'react-native-reanimated'
 
 import {Boundary, Icon, Spacer} from '../components'
 import {claimApiMaker} from '../features/Claim/module/api'
@@ -165,8 +164,6 @@ export const TxHistoryNavigator = () => {
                   component={RampOnOffScreen}
                   options={{
                     headerShown: false,
-                    cardStyleInterpolator: rampOnOffCardStyleInterpolator,
-                    transitionSpec: rampOnOffTransitionSpec,
                   }}
                 />
 
@@ -501,39 +498,3 @@ const sendOptions = {
     backgroundColor: '#fff',
   },
 }
-
-const rampOnOffTransitionSpec = {
-  open: {
-    animation: 'spring',
-    config: {
-      stiffness: 300,
-      damping: 25,
-      mass: 1,
-      overshootClamping: false,
-      restDisplacementThreshold: 0.01,
-      restSpeedThreshold: 2,
-    },
-  },
-  close: {
-    animation: 'timing',
-    config: {
-      easing: Easing.inOut(Easing.sin),
-      duration: 300,
-    },
-  },
-} as const
-
-const rampOnOffCardStyleInterpolator = ({current, layouts}) =>
-  ({
-    cardStyle: {
-      opacity: current.progress,
-      transform: [
-        {
-          translateY: current.progress.interpolate({
-            inputRange: [0, 1],
-            outputRange: [-layouts.screen.height, 0],
-          }),
-        },
-      ],
-    },
-  } as const)

apps/wallet-mobile/src/components/AmountItem/AmountItem.tsx

@@ -153,6 +153,7 @@ const styles = StyleSheet.create({
     textAlign: 'right',
     fontSize: 16,
     fontFamily: 'Rubik-Regular',
+    flexGrow: 1,
   },
   row: {
     display: 'flex',

apps/wallet-mobile/src/components/ConfirmTxWithSpendingPasswordModal/ConfirmTxWithSpendingPasswordModal.stories.tsx

@@ -2,11 +2,16 @@ import {storiesOf} from '@storybook/react-native'
 import React from 'react'
 import {StyleSheet, View} from 'react-native'
 
+import {SelectedWalletProvider} from '../../SelectedWallet'
 import {mocks} from '../../yoroi-wallets/mocks'
 import {ConfirmTxWithSpendingPasswordModal} from './ConfirmTxWithSpendingPasswordModal'
 
 storiesOf('ConfirmTxWithSpendingPasswordModal', module)
-  .addDecorator((story) => <View style={styles.container}>{story()}</View>)
+  .addDecorator((story) => (
+    <SelectedWalletProvider wallet={mocks.wallet}>
+      <View style={styles.container}>{story()}</View>
+    </SelectedWalletProvider>
+  ))
   .add('Default', () => <ConfirmTxWithSpendingPasswordModal unsignedTx={mocks.yoroiUnsignedTx} />)
 
 const styles = StyleSheet.create({

apps/wallet-mobile/src/components/ConfirmTxWithSpendingPasswordModal/ConfirmTxWithSpendingPasswordModal.tsx

@@ -42,6 +42,9 @@ export const ConfirmTxWithSpendingPasswordModal = ({onSuccess, unsignedTx, onErr
 
   const error = signError || submitError
   const isLoading = signIsLoading || submitIsLoading
+
+  const errorMessage = error ? getErrorMessage(error, strings) : null
+
   return (
     <>
       <Text style={styles.modalText}>{strings.enterSpendingPassword}</Text>
@@ -57,12 +60,10 @@ export const ConfirmTxWithSpendingPasswordModal = ({onSuccess, unsignedTx, onErr
         right={isPasswordCorrect ? <Checkmark /> : null}
       />
 
-      {error != null && (
-        <View>
-          <Text style={styles.errorMessage} numberOfLines={3}>
-            {getErrorMessage(error, strings)}
-          </Text>
-        </View>
+      {errorMessage != null && (
+        <Text style={styles.errorMessage} numberOfLines={3}>
+          {errorMessage}
+        </Text>
       )}
 
       <Spacer fill />

apps/wallet-mobile/src/features/Send/common/strings.ts

@@ -54,6 +54,7 @@ export const useStrings = () => {
     receiver: intl.formatMessage(messages.receiver),
     resolvedAddress: intl.formatMessage(messages.resolvedAddress),
     resolverNoticeTitle: intl.formatMessage(messages.resolverNoticeTitle),
+    resolverNoticeText: intl.formatMessage(messages.resolverNoticeText),
     searchTokens: intl.formatMessage(messages.searchTokens),
     selecteAssetTitle: intl.formatMessage(messages.selectAssetTitle),
     sendAllContinueButton: intl.formatMessage(confirmationMessages.commonButtons.continueButton),
@@ -280,7 +281,12 @@ export const messages = defineMessages({
   },
   resolverNoticeTitle: {
     id: 'components.send.sendscreen.resolverNoticeTitle',
-    defaultMessage: '!!!Yoroi Supports Name Resolution',
+    defaultMessage: '!!!Yoroi supports more addresses',
+  },
+  resolverNoticeText: {
+    id: 'components.send.sendscreen.resolverNoticeText',
+    defaultMessage:
+      '!!!Yoroi offers a unique chance to use custom and lightning-fast alternatives to the traditional wallet address, such as',
   },
   manyNameServersWarning: {
     id: 'send.warning.resolver.manyNameServers',

apps/wallet-mobile/src/features/Send/useCases/StartMultiTokenTx/InputReceiver/InputReceiver.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import {ActivityIndicator, StyleSheet} from 'react-native'
+import {ActivityIndicator, StyleSheet, Text} from 'react-native'
 
 import {Icon, TextInput, TextInputProps} from '../../../../../components'
 import {useNavigateTo} from '../../../common/navigation'
@@ -25,7 +25,7 @@ export const InputReceiver = ({
   return (
     <TextInput
       right={rightAdornment}
-      label={strings.addressInputLabel}
+      label={<Text style={styles.label}>{strings.addressInputLabel}</Text>}
       testID="receiverInput"
       style={styles.receiver}
       autoCorrect={false}
@@ -45,4 +45,7 @@ const styles = StyleSheet.create({
   receiver: {
     height: 120,
   },
+  label: {
+    fontSize: 15,
+  },
 })

apps/wallet-mobile/src/features/Send/useCases/StartMultiTokenTx/NotifySupportedNameServers/NotifySupportedNameServers.tsx

@@ -25,18 +25,20 @@ export const NotifySupportedNameServers = () => {
     <View>
       <LinearGradient style={styles.gradient} start={{x: 0, y: 0}} end={{x: 1, y: 1}} colors={['#C6F7ED', '#E4E8F7']}>
         <View style={styles.header}>
-          <Text style={styles.title}>{strings.resolverNoticeTitle}</Text>
+          <Text style={styles.title}>{`${strings.resolverNoticeTitle} `}😇</Text>
 
           <PressableIcon icon={Icon.CrossCircle} onPress={handleOnClose} size={24} />
         </View>
 
         <Spacer height={10} />
 
-        <NameServer text={nameServerName[Resolver.NameServer.Handle]} />
+        <Text style={styles.text}>{strings.resolverNoticeText}:</Text>
 
-        <NameServer text={nameServerName[Resolver.NameServer.Cns]} />
+        <NameServer text={nameServerName[Resolver.NameServer.Handle]} />
 
         <NameServer text={nameServerName[Resolver.NameServer.Unstoppable]} />
+
+        <NameServer text={nameServerName[Resolver.NameServer.Cns]} />
       </LinearGradient>
 
       <Spacer height={16} />
@@ -75,8 +77,8 @@ const styles = StyleSheet.create({
     color: '#000',
   },
   nameServerText: {
-    fontWeight: '400',
-    fontFamily: 'Rubik-Regular',
+    fontWeight: '500',
+    fontFamily: 'Rubik-Medium',
     fontSize: 14,
     lineHeight: 22,
     color: '#000',
@@ -87,4 +89,11 @@ const styles = StyleSheet.create({
     fontWeight: '500',
     color: '#000',
   },
+  text: {
+    fontFamily: 'Rubik-Regular',
+    fontSize: 14,
+    fontWeight: '400',
+    color: '#000',
+    lineHeight: 22,
+  },
 })

apps/wallet-mobile/src/features/Settings/ManageCollateral/ConfirmTx/ConfirmTxScreen.tsx

@@ -8,6 +8,7 @@ import {ConfirmTx} from '../../../../components/ConfirmTx'
 import globalMessages, {confirmationMessages, errorMessages, txLabels} from '../../../../i18n/global-messages'
 import {useSelectedWallet} from '../../../../SelectedWallet'
 import {COLORS} from '../../../../theme'
+import {useSetCollateralId} from '../../../../yoroi-wallets/cardano/utxoManager/useSetCollateralId'
 import {useSaveMemo} from '../../../../yoroi-wallets/hooks'
 import {YoroiSignedTx} from '../../../../yoroi-wallets/types'
 import {debugWalletInfo, features} from '../../..'
@@ -26,6 +27,7 @@ export const ConfirmTxScreen = () => {
   const navigateTo = useNavigateTo()
   const [password, setPassword] = React.useState('')
   const [useUSB, setUseUSB] = React.useState(false)
+  const {setCollateralId} = useSetCollateralId(wallet)
 
   const {memo, yoroiUnsignedTx, targets} = useSend()
 
@@ -39,7 +41,8 @@ export const ConfirmTxScreen = () => {
 
   const onSuccess = (signedTx: YoroiSignedTx) => {
     navigateTo.submittedTx()
-
+    const collateralId = `${signedTx.signedTx.id}:0`
+    setCollateralId(collateralId)
     if (memo.length > 0) {
       saveMemo({txId: signedTx.signedTx.id, memo: memo.trim()})
     }

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

@@ -25,6 +25,7 @@ const goneCollateral: YoroiWallet = {
       },
       collateralId: mocks.wallet.collateralId,
       utxo: undefined,
+      isConfirmed: true,
     }
   },
 }
@@ -40,6 +41,7 @@ const noCollateral: YoroiWallet = {
       },
       collateralId: '',
       utxo: undefined,
+      isConfirmed: true,
     }
   },
 }
@@ -56,6 +58,7 @@ const noFundsWallet: YoroiWallet = {
       },
       collateralId: '',
       utxo: undefined,
+      isConfirmed: true,
     }
   },
 }

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

@@ -28,6 +28,7 @@ import {RawUtxo, YoroiEntry, YoroiUnsignedTx} from '../../../yoroi-wallets/types
 import {Amounts, Quantities} from '../../../yoroi-wallets/utils'
 import {useSend} from '../../Send/common/SendContext'
 import {usePrivacyMode} from '../PrivacyMode/PrivacyMode'
+import {createCollateralEntry} from './helpers'
 import {useNavigateTo} from './navigation'
 import {useStrings} from './strings'
 
@@ -51,12 +52,7 @@ export const ManageCollateralScreen = () => {
   const {refetch: createUnsignedTx, isFetching: isLoadingTx} = useSendTx(
     {
       wallet,
-      entry: {
-        address: wallet.externalAddresses[0],
-        amounts: {
-          [wallet.primaryTokenInfo.id]: collateralConfig.minLovelace,
-        },
-      },
+      entry: createCollateralEntry(wallet),
     },
     {
       onSuccess: (yoroiUnsignedTx) => yoroiUnsignedTxChanged(yoroiUnsignedTx),

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

@@ -0,0 +1,20 @@
+import {YoroiWallet} from '../../../yoroi-wallets/cardano/types'
+import {collateralConfig} from '../../../yoroi-wallets/cardano/utxoManager/utxos'
+import {YoroiEntry} from '../../../yoroi-wallets/types'
+
+const getCollateralAddress = (wallet: YoroiWallet) => {
+  return wallet.externalAddresses[0]
+}
+
+const getCollateralAmountInLovelace = () => {
+  return collateralConfig.minLovelace
+}
+
+export const createCollateralEntry = (wallet: YoroiWallet): YoroiEntry => {
+  return {
+    address: getCollateralAddress(wallet),
+    amounts: {
+      [wallet.primaryTokenInfo.id]: getCollateralAmountInLovelace(),
+    },
+  }
+}

apps/wallet-mobile/src/features/Settings/SettingsScreenNavigator.tsx

@@ -158,6 +158,7 @@ export const SettingsScreenNavigator = () => {
           name="collateral-tx-submitted"
           options={{
             title: strings.collateral,
+            headerLeft: () => null,
           }}
           component={SubmittedTxScreen}
         />

apps/wallet-mobile/src/features/Staking/Governance/common/LearnMoreLink/LearnMoreLink.tsx

@@ -5,7 +5,7 @@ import {Text} from '../../../../../components'
 import {COLORS} from '../../../../../theme'
 import {useStrings} from '../strings'
 
-const LEARN_MORE_LINK = ''
+const LEARN_MORE_LINK = 'https://emurgohelpdesk.zendesk.com/hc/en-us/sections/8582793481231-Governance'
 
 export const LearnMoreLink = () => {
   const strings = useStrings()

apps/wallet-mobile/src/features/Swap/common/ConfirmRawTx/ConfirmRawTxWithOs.tsx

@@ -4,9 +4,12 @@ import {ActivityIndicator, StyleSheet, Text, View} from 'react-native'
 import {useSelectedWallet} from '../../../../SelectedWallet'
 import {COLORS} from '../../../../theme'
 import {useAuthOsWithEasyConfirmation} from '../../../../yoroi-wallets/auth'
+import {getErrorMessage} from '../errors'
+import {useStrings} from '../strings'
 
 export const ConfirmRawTxWithOs = ({onConfirm}: {onConfirm?: (rootKey: string) => Promise<void>}) => {
   const wallet = useSelectedWallet()
+  const strings = useStrings()
 
   const {authWithOs, error} = useAuthOsWithEasyConfirmation(
     {id: wallet.id},
@@ -18,11 +21,13 @@ export const ConfirmRawTxWithOs = ({onConfirm}: {onConfirm?: (rootKey: string) =
     authWithOs()
   }, [wallet.isEasyConfirmationEnabled, authWithOs])
 
-  if (error) {
+  const errorMessage = error ? getErrorMessage(error, strings) : null
+
+  if (errorMessage != null) {
     return (
       <View style={styles.center}>
         <Text style={styles.errorMessage} numberOfLines={3}>
-          {error.message}
+          {errorMessage}
         </Text>
       </View>
     )

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

@@ -4,8 +4,8 @@ import {ActivityIndicator, StyleSheet, TextInput as RNTextInput, View} from 'rea
 import {Button, Spacer, Text, TextInput} from '../../../../components'
 import {debugWalletInfo, features} from '../../../../features'
 import {COLORS} from '../../../../theme'
-import {WrongPassword} from '../../../../yoroi-wallets/cardano/errors'
 import {useStrings} from '../../common/strings'
+import {getErrorMessage} from '../errors'
 
 export type ErrorData = {
   errorMessage: string
@@ -26,6 +26,8 @@ export const ConfirmWithSpendingPassword = ({onSubmit, isLoading, error, onPassw
   )
   const strings = useStrings()
 
+  const errorMessage = error ? getErrorMessage(error, strings) : null
+
   return (
     <>
       <Text style={styles.modalText}>{strings.enterSpendingPassword}</Text>
@@ -43,12 +45,10 @@ export const ConfirmWithSpendingPassword = ({onSubmit, isLoading, error, onPassw
         autoComplete="off"
       />
 
-      {error != null && (
-        <View>
-          <Text style={styles.errorMessage} numberOfLines={3}>
-            {getErrorMessage(error, strings)}
-          </Text>
-        </View>
+      {errorMessage != null && (
+        <Text style={styles.errorMessage} numberOfLines={3}>
+          {errorMessage}
+        </Text>
       )}
 
       <Spacer fill />
@@ -70,17 +70,6 @@ export const ConfirmWithSpendingPassword = ({onSubmit, isLoading, error, onPassw
   )
 }
 
-const getErrorMessage = (error: unknown, strings: Record<'wrongPasswordMessage' | 'error', string>) => {
-  if (error instanceof WrongPassword) {
-    return strings.wrongPasswordMessage
-  }
-  if (error instanceof Error) {
-    return error.message
-  }
-
-  return strings.error
-}
-
 const styles = StyleSheet.create({
   modalText: {
     paddingHorizontal: 70,