refactor: send step 1/summary

Emurgo · Dec 18, 2023 · 5e15c7c · 5e15c7c
1 parent 94adaf9
commit 5e15c7c
Show file tree

Hide file tree

Showing 35 changed files with 768 additions and 546 deletions.
diff --git a/apps/wallet-mobile/.storybook/storybook.requires.js b/apps/wallet-mobile/.storybook/storybook.requires.js
diff --git a/apps/wallet-mobile/src/WalletInit/WalletForm.tsx b/apps/wallet-mobile/src/WalletInit/WalletForm.tsx
@@ -80,7 +80,7 @@ export const WalletForm = ({onSubmit}: Props) => {
           onChangeText={setPassword}
           errorText={passwordErrorText}
           returnKeyType="next"
-          helperText={strings.passwordStrengthRequirement({
+          helper={strings.passwordStrengthRequirement({
             requiredPasswordLength: REQUIRED_PASSWORD_LENGTH,
           })}
           right={!passwordErrors.passwordIsWeak ? <Checkmark /> : undefined}

diff --git a/apps/wallet-mobile/src/components/TextInput/TextInput.stories.tsx b/apps/wallet-mobile/src/components/TextInput/TextInput.stories.tsx
@@ -83,7 +83,7 @@ storiesOf('TextInput', module)
       autoFocus
       label="with helper text"
       onChangeText={action('onChangeText')}
-      helperText="This is what helper text looks like"
+      helper="This is what helper text looks like"
       autoComplete="off"
     />
   ))
@@ -92,7 +92,7 @@ storiesOf('TextInput', module)
       autoFocus
       label="with helper text and error text"
       onChangeText={action('onChangeText')}
-      helperText="This is what helper text looks like"
+      helper="This is what helper text looks like"
       errorText="This is what an error looks likes"
       autoComplete="off"
     />

diff --git a/apps/wallet-mobile/src/components/TextInput/TextInput.tsx b/apps/wallet-mobile/src/components/TextInput/TextInput.tsx
@@ -1,3 +1,4 @@
+import {isString} from '@yoroi/common'
 import React, {ForwardedRef} from 'react'
 import {
   StyleSheet,
@@ -18,7 +19,7 @@ export type TextInputProps = RNTextInputProps &
   Omit<React.ComponentProps<typeof RNPTextInput>, 'theme'> & {
     containerStyle?: ViewStyle
     renderComponentStyle?: ViewStyle
-    helperText?: string
+    helper?: string | React.ReactNode
     errorText?: string
     disabled?: boolean
     errorOnMount?: boolean
@@ -52,7 +53,7 @@ export const TextInput = React.forwardRef((props: TextInputProps, ref: Forwarded
     containerStyle,
     renderComponentStyle,
     secureTextEntry,
-    helperText,
+    helper,
     errorText,
     errorOnMount,
     errorDelay,
@@ -75,6 +76,20 @@ export const TextInput = React.forwardRef((props: TextInputProps, ref: Forwarded
     value,
     errorDelay,
   )
+  const showError = errorTextEnabled && !isEmptyString(errorText)
+  const showHelperComponent = helper != null && !isString(helper)
+
+  const helperToShow = showError ? (
+    <HelperText type="error" visible>
+      {errorText}
+    </HelperText>
+  ) : showHelperComponent ? (
+    helper
+  ) : (
+    <HelperText type="info" visible>
+      {helper}
+    </HelperText>
+  )
 
   return (
     <View style={containerStyle}>
@@ -129,11 +144,7 @@ export const TextInput = React.forwardRef((props: TextInputProps, ref: Forwarded
         {...restProps}
       />
 
-      {!noHelper && (
-        <HelperText type={errorTextEnabled && !isEmptyString(errorText) ? 'error' : 'info'} visible>
-          {errorTextEnabled && !isEmptyString(errorText) ? errorText : helperText}
-        </HelperText>
-      )}
+      {!noHelper && helperToShow}
     </View>
   )
 })
@@ -151,6 +162,7 @@ export const HelperText = ({
   visible?: boolean
 }) => (
   <HelperTextRNP
+    style={{paddingHorizontal: 0}}
     theme={{
       roundness: 8,
       colors: {

diff --git a/apps/wallet-mobile/src/features/Send/common/ButtonGroup/ButtonGroup.stories.tsx b/apps/wallet-mobile/src/features/Send/common/ButtonGroup/ButtonGroup.stories.tsx
@@ -6,8 +6,8 @@ import {StyleSheet, View} from 'react-native'
 import {ButtonGroup} from './ButtonGroup'
 
 const WithInitial = ({initial}: {initial: number}) => {
-  const handleActive = (label: string) => {
-    action(`onSelect ${label}`)
+  const handleActive = (index: number, label: string) => {
+    action(`onSelect ${index}:${label}`)
   }
   return (
     <View>
@@ -17,8 +17,8 @@ const WithInitial = ({initial}: {initial: number}) => {
 }
 
 const NoInitial = () => {
-  const handleActive = (label: string) => {
-    action(`onSelect ${label}`)
+  const handleActive = (index: number, label: string) => {
+    action(`onSelect ${index}:${label}`)
   }
   return (
     <View>

diff --git a/apps/wallet-mobile/src/features/Send/common/SendContext.tsx b/apps/wallet-mobile/src/features/Send/common/SendContext.tsx
@@ -186,7 +186,7 @@ const targetsReducer = (state: SendState, action: TargetAction) => {
             if (addressRecords !== undefined) {
               const keys = Object.keys(addressRecords).filter(isNameServer)
               const nameServer = keys.length === 1 ? keys[0] : undefined
-              target.receiver.selectedNameServer =nameServer 
+              target.receiver.selectedNameServer = nameServer
               if (nameServer !== undefined) {
                 target.entry.address = addressRecords[nameServer] ?? ''
               }
@@ -273,7 +273,7 @@ export const initialState: SendState = {
       },
     },
   ],
-} 
+}
 
 export const useTokenQuantities = (tokenId: string) => {
   const wallet = useSelectedWallet()

diff --git a/apps/wallet-mobile/src/features/Send/common/constants.ts b/apps/wallet-mobile/src/features/Send/common/constants.ts
@@ -0,0 +1 @@
+export const memoMaxLenght = 256
diff --git a/apps/wallet-mobile/src/features/Send/common/errors.ts b/apps/wallet-mobile/src/features/Send/common/errors.ts
@@ -0,0 +1,2 @@
+export class AddressErrorWrongNetwork extends Error {}
+export class AddressErrorInvalid extends Error {}
diff --git a/apps/wallet-mobile/src/features/Send/common/strings.ts b/apps/wallet-mobile/src/features/Send/common/strings.ts
@@ -6,8 +6,6 @@ export const useStrings = () => {
   const intl = useIntl()
 
   return {
-    addressInputErrorInvalidAddress: intl.formatMessage(messages.addressInputErrorInvalidAddress),
-    addressInputErrorInvalidDomain: intl.formatMessage(messages.addressInputErrorInvalidDomain),
     addressInputLabel: intl.formatMessage(messages.addressInputLabel),
     addressReaderQrText: intl.formatMessage(messages.addressReaderQrText),
     all: intl.formatMessage(globalMessages.all),
@@ -36,8 +34,14 @@ export const useStrings = () => {
     feeLabel: intl.formatMessage(messages.feeLabel),
     feeNotAvailable: intl.formatMessage(messages.feeNotAvailable),
     found: intl.formatMessage(messages.found),
+    helperAddressErrorInvalid: intl.formatMessage(messages.helperAddressErrorInvalid),
+    helperAddressErrorWrongNetwork: intl.formatMessage(messages.helperAddressErrorWrongNetwork),
+    helperMemoErrorTooLong: intl.formatMessage(messages.helperMemoErrorTooLong),
+    helperMemoInstructions: intl.formatMessage(messages.helperMemoInstructions),
+    helperResolverErrorUnsupportedDomain: intl.formatMessage(messages.helperResolverErrorUnsupportedDomain),
     manyNameServersWarning: intl.formatMessage(messages.manyNameServersWarning),
     max: intl.formatMessage(globalMessages.max),
+    memoLabel: intl.formatMessage(messages.memoLabel),
     minPrimaryBalanceForTokens: intl.formatMessage(amountInputErrorMessages.minPrimaryBalanceForTokens),
     next: intl.formatMessage(globalMessages.next),
     nfts: (qty: number) => intl.formatMessage(globalMessages.nfts, {qty}),
@@ -279,7 +283,31 @@ export const messages = defineMessages({
     defaultMessage: '!!!Yoroi Supports Name Resolution',
   },
   manyNameServersWarning: {
-    id: 'send.resolver.manyNameServersWarning',
+    id: 'send.warning.resolver.manyNameServers',
     defaultMessage: '!!!Multiple name servers found. Please select one.',
   },
+  helperAddressErrorInvalid: {
+    id: 'send.helper.addressError.invalid',
+    defaultMessage: '!!!Please enter valid address',
+  },
+  helperAddressErrorWrongNetwork: {
+    id: 'send.helper.addressError.wrongNetwork',
+    defaultMessage: '!!!Please enter valid domain',
+  },
+  helperResolverErrorUnsupportedDomain: {
+    id: 'send.helper.resolverError.unsupportedDomain',
+    defaultMessage: '!!!Domain is not supported',
+  },
+  memoLabel: {
+    id: 'components.send.memofield.label',
+    defaultMessage: '!!!Memo',
+  },
+  helperMemoInstructions: {
+    id: 'components.send.memofield.message',
+    defaultMessage: '!!!(Optional) Memo is stored locally',
+  },
+  helperMemoErrorTooLong: {
+    id: 'components.send.memofield.error',
+    defaultMessage: '!!!Memo is too long',
+  },
 })
diff --git a/apps/wallet-mobile/src/features/Send/common/useSendAddress.tsx b/apps/wallet-mobile/src/features/Send/common/useSendAddress.tsx
@@ -3,6 +3,7 @@ import {useQuery, UseQueryOptions} from 'react-query'
 
 import {useSelectedWallet} from '../../../SelectedWallet'
 import {normalizeToAddress, toCardanoNetworkId} from '../../../yoroi-wallets/cardano/utils'
+import {AddressErrorInvalid, AddressErrorWrongNetwork} from './errors'
 import {useSend} from './SendContext'
 
 export const useSendAddress = () => {
@@ -58,10 +59,10 @@ const useValidateAddress = (
 // NOTE: should be a wallet function from address manager
 const validateAddress = async (address: string, chainId: number) => {
   const chainAddress = await normalizeToAddress(address)
-  if (!chainAddress) throw new Error('Invalid address')
+  if (!chainAddress) throw new AddressErrorInvalid()
 
   const chainAddressChainId = await chainAddress.networkId()
-  if (chainAddressChainId !== chainId) throw new Error('Wrong network')
+  if (chainAddressChainId !== chainId) throw new AddressErrorWrongNetwork()
 
   return true
 }
diff --git a/...ures/Send/common/useSendInputReceiver.tsx → .../features/Send/common/useSendReceiver.tsx b/...ures/Send/common/useSendInputReceiver.tsx → .../features/Send/common/useSendReceiver.tsx
@@ -1,16 +1,17 @@
-import {isNameServer, useResolverCryptoAddresses} from '@yoroi/resolver'
+import {isDomain, isNameServer, isResolvableDomain, useResolverCryptoAddresses} from '@yoroi/resolver'
 import {Resolver} from '@yoroi/types'
 import * as React from 'react'
 import {useQueryClient} from 'react-query'
 
 import {debounceMaker} from '../../../utils/debounceMaker'
 import {useSend} from './SendContext'
 
-export const useSendInputReceiver = () => {
+export const useSendReceiver = () => {
   const queryClient = useQueryClient()
 
   const {targets, selectedTargetIndex, receiverResolveChanged, addressRecordsFetched} = useSend()
   const receiver = targets[selectedTargetIndex].receiver
+  const isUnsupportedDomain = !isResolvableDomain(receiver.resolve) && isDomain(receiver.resolve)
 
   const {
     error: receiverError,
@@ -59,18 +60,13 @@ export const useSendInputReceiver = () => {
         },
         undefined,
       )
-      // TODO: revisit
-      // addressRecordsFetched(records)
-      console.log(records)
-      addressRecordsFetched({
-        handle: 'addr1vxggvx6uq9mtf6e0tyda2mahg84w8azngpvkwr5808ey6qsy2ww7d',
-        cns: 'addr1qywgh46dqu7lq6mp5c6tzldpmzj6uwx335ydrpq8k7rru4q6yhkfqn5pc9f3z76e4cr64e5mf98aaeht6zwf8xl2nc9qr66sqg',
-      })
+      addressRecordsFetched(records)
     }
   }, [addressRecordsFetched, cryptoAddresses, isSuccess])
 
   return {
     isResolvingAddressess,
+    isUnsupportedDomain,
     receiverError,
   }
 }
diff --git a/apps/wallet-mobile/src/features/Send/useCases/ConfirmTx/ConfirmTxScreen.tsx b/apps/wallet-mobile/src/features/Send/useCases/ConfirmTx/ConfirmTxScreen.tsx
@@ -85,8 +85,7 @@ export const ConfirmTxScreen = () => {
         <Spacer height={16} />
 
         {targets.map((target, index) => (
-          // TODO: revisit 
-          <ReceiverInfo key={index} receiver={target.receiver.resolve} />
+          <ReceiverInfo key={`${target.receiver.resolve}:${index}`} target={target} />
         ))}
       </View>
 
@@ -103,15 +102,13 @@ export const ConfirmTxScreen = () => {
         <SecondaryTotals yoroiUnsignedTx={yoroiUnsignedTx} />
 
         {!wallet.isEasyConfirmationEnabled && !wallet.isHW && (
-          <>
-            <ValidatedTextInput
-              secureTextEntry
-              value={password}
-              label={strings.password}
-              onChangeText={setPassword}
-              testID="spendingPasswordInput"
-            />
-          </>
+          <ValidatedTextInput
+            secureTextEntry
+            value={password}
+            label={strings.password}
+            onChangeText={setPassword}
+            testID="spendingPasswordInput"
+          />
         )}
 
         <KeyboardSpacer />

diff --git a/apps/wallet-mobile/src/features/Send/useCases/ConfirmTx/Summary/ReceiverInfo.tsx b/apps/wallet-mobile/src/features/Send/useCases/ConfirmTx/Summary/ReceiverInfo.tsx
@@ -1,37 +1,33 @@
+import {nameServerName} from '@yoroi/resolver'
 import * as React from 'react'
 import {View} from 'react-native'
 
 import {Spacer} from '../../../../../components/Spacer'
 import {Text} from '../../../../../components/Text'
+import {YoroiTarget} from '../../../../../yoroi-wallets/types'
 import {useStrings} from '../../../common/strings'
-// import {Service} from '../../StartMultiTokenTx/InputReceiver/ResolveAddress'
 
 type Props = {
-  receiver: string
+  target: YoroiTarget
 }
-export const ReceiverInfo = ({receiver}: Props) => {
+export const ReceiverInfo = ({target}: Props) => {
   const strings = useStrings()
-
-  // const {resolvedAddressSelected} = useResolver()
-
-  // TODO: revisit
-  const isResolved = true
-    // !isEmptyString(resolvedAddressSelected?.address) && !isEmptyString(resolvedAddressSelected?.service)
+  const {receiver, entry} = target
 
   return (
     <View>
       <Text>{strings.receiver}:</Text>
 
       <Spacer height={12} />
 
-      {isResolved ? (
+      {target.receiver.as === 'domain' ? (
         <>
           <View style={{flexDirection: 'row'}}>
-            {/* <Text>{Service[resolvedAddressSelected?.service ?? ''] ?? ''}:</Text> */}
+            <Text>{receiver.selectedNameServer ? nameServerName[receiver.selectedNameServer] : ''}:</Text>
 
             <Spacer width={5} />
 
-            <Text>{receiver}</Text>
+            <Text>{receiver.resolve}</Text>
           </View>
 
           <Spacer height={12} />
@@ -40,10 +36,10 @@ export const ReceiverInfo = ({receiver}: Props) => {
 
           <Spacer height={12} />
 
-          {/* <Text testID="receiverAddressText">{resolvedAddressSelected?.address}</Text> */}
+          <Text testID="receiverAddressText">{entry.address}</Text>
         </>
       ) : (
-        <Text testID="receiverAddressText">{receiver}</Text>
+        <Text testID="receiverAddressText">{entry.address}</Text>
       )}
     </View>
   )
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export class AddressErrorWrongNetwork extends Error {}
		export class AddressErrorInvalid extends Error {}