feature(resolver): multiresolution new features

apps/wallet-mobile/src/features/Send/common/ButtonGroup/ButtonGroup.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import {StyleSheet, Text, TouchableOpacity, View, ViewProps} from 'react-native'
+import LinearGradient from 'react-native-linear-gradient'
 
 import {Spacer} from '../../../../components/Spacer/Spacer'
-import {COLORS} from '../../../../theme'
 
 type ButtonGroupProps<T> = {
   labels: T[]
@@ -25,15 +25,22 @@ export const ButtonGroup = <T extends string>({
         <>
           {index > 0 && <Spacer width={8} />}
 
-          <TouchableOpacity
-            onPress={() => {
-              setSelected(index)
-              onSelect(index, label)
-            }}
-            style={[styles.button, index === selected && styles.selected]}
+          <LinearGradient
+            style={{borderRadius: 8, padding: 3}}
+            start={{x: 0, y: 0}}
+            end={{x: 1, y: 1}}
+            colors={['#C6F7ED', '#E4E8F7']}
           >
-            <Text style={styles.label}>{label}</Text>
-          </TouchableOpacity>
+            <TouchableOpacity
+              onPress={() => {
+                setSelected(index)
+                onSelect(index, label)
+              }}
+              style={[styles.button, index !== selected && styles.selected]}
+            >
+              <Text style={styles.label}>{label}</Text>
+            </TouchableOpacity>
+          </LinearGradient>
         </>
       ))}
     </View>
@@ -47,13 +54,13 @@ const styles = StyleSheet.create({
   button: {
     paddingHorizontal: 8,
     paddingVertical: 8,
-    borderRadius: 8,
+    borderRadius: 6,
   },
   selected: {
-    backgroundColor: COLORS.BORDER_GRAY,
+    backgroundColor: 'white',
   },
   label: {
-    color: COLORS.BLACK,
+    color: '#3154CB',
     fontFamily: 'Rubik-Medium',
     fontWeight: '500',
     lineHeight: 24,

apps/wallet-mobile/src/features/Send/common/SendContext.tsx

@@ -185,7 +185,7 @@ const targetsReducer = (state: SendState, action: TargetAction) => {
           if (index === selectedTargetIndex) {
             if (addressRecords !== undefined) {
               const keys = Object.keys(addressRecords).filter(isNameServer)
-              const nameServer = keys[0]
+              const nameServer = keys.length === 1 ? keys[0] : undefined
               target.receiver.selectedNameServer = nameServer
               if (nameServer !== undefined) {
                 target.entry.address = addressRecords[nameServer] ?? ''

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

@@ -39,7 +39,7 @@ export const useStrings = () => {
     helperMemoErrorTooLong: intl.formatMessage(messages.helperMemoErrorTooLong),
     helperMemoInstructions: intl.formatMessage(messages.helperMemoInstructions),
     helperResolverErrorDomainNotFound: intl.formatMessage(messages.helperResolverErrorDomainNotFound),
-    manyNameServersWarning: intl.formatMessage(messages.manyNameServersWarning),
+    manyNameServersWarning: (options) => intl.formatMessage(messages.manyNameServersWarning, options),
     max: intl.formatMessage(globalMessages.max),
     memoLabel: intl.formatMessage(messages.memoLabel),
     minPrimaryBalanceForTokens: intl.formatMessage(amountInputErrorMessages.minPrimaryBalanceForTokens),
@@ -204,6 +204,10 @@ export const messages = defineMessages({
     id: 'components.send.assetselectorscreen.youHave',
     defaultMessage: '!!!You have',
   },
+  manyNameServersWarning: {
+    id: 'send.warning.resolver.manyNameServers',
+    defaultMessage: '!!!There are <b>two addresses</b> for this domain. Please SELECT the desired domain.',
+  },
   noAssetsAddedYet: {
     id: 'components.send.assetselectorscreen.noAssetsAddedYet',
     defaultMessage: '!!!No {fungible} added yet',
@@ -288,10 +292,6 @@ export const messages = defineMessages({
     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',
-    defaultMessage: '!!!Multiple name servers found. Please select one.',
-  },
   helperAddressErrorInvalid: {
     id: 'send.helper.addressError.invalid',
     defaultMessage: '!!!Please enter a valid receiver address, ADA Handle or domain',

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

@@ -1,10 +1,11 @@
 import {isNameServer, nameServerName} from '@yoroi/resolver'
 import {Resolver} from '@yoroi/types'
 import * as React from 'react'
-import {Animated, StyleSheet, Text, View} from 'react-native'
+import {Animated, StyleSheet, Text as RNText, View} from 'react-native'
 
 import {Icon} from '../../../../../components/Icon'
 import {Spacer} from '../../../../../components/Spacer/Spacer'
+import {Text} from '../../../../../components/Text'
 import {ButtonGroup} from '../../../common/ButtonGroup/ButtonGroup'
 import {useSend} from '../../../common/SendContext'
 import {useStrings} from '../../../common/strings'
@@ -20,6 +21,7 @@ export const SelectNameServer = () => {
 
   const [animatedValue] = React.useState(new Animated.Value(0))
   const [waitAnimation, setWaitAnimation] = React.useState(false)
+
   React.useEffect(() => {
     animatedValue.stopAnimation()
     if (shouldShow) {
@@ -43,19 +45,21 @@ export const SelectNameServer = () => {
     nameServerSelectedChanged(nameServer)
   }
 
-  const initial = receiver.selectedNameServer ? labels.indexOf(nameServerName[receiver.selectedNameServer]) : 0
-
   return (
     <Animated.View style={{opacity: animatedValue}}>
+      {shouldShow && <Spacer height={16} />}
+
       {(waitAnimation || shouldShow) && (
         <>
-          <ShowManyAddressWarning />
+          <ButtonGroup labels={labels} onSelect={handleOnSelectNameServer} />
 
-          <Spacer height={16} />
+          {!receiver.selectedNameServer && shouldShow && (
+            <>
+              <Spacer height={16} />
 
-          <ButtonGroup initial={initial} labels={labels} onSelect={handleOnSelectNameServer} />
-
-          <Spacer height={16} />
+              <ShowManyAddressWarning />
+            </>
+          )}
         </>
       )}
     </Animated.View>
@@ -71,7 +75,7 @@ export const ShowManyAddressWarning = () => {
 
       <Spacer height={8} />
 
-      <Text style={styles.text}>{strings.manyNameServersWarning}</Text>
+      <RNText style={styles.text}>{strings.manyNameServersWarning(bold)}</RNText>
     </View>
   )
 }
@@ -90,9 +94,9 @@ const styles = StyleSheet.create({
     padding: 12,
   },
   text: {
-    fontFamily: 'Rubik-Medium',
     fontSize: 14,
-    fontWeight: '500',
     lineHeight: 22,
   },
 })
+
+const bold = {b: (text) => <Text bold>{text}</Text>}

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

@@ -79,8 +79,6 @@ export const StartMultiTokenTxScreen = () => {
 
           <NotifySupportedNameServers />
 
-          <SelectNameServer />
-
           <InputReceiver
             value={receiver.resolve}
             onChangeText={handleOnChangeReceiver}
@@ -90,6 +88,8 @@ export const StartMultiTokenTxScreen = () => {
             errorText={receiverErrorMessage}
           />
 
+          <SelectNameServer />
+
           <Spacer height={16} />
 
           <InputMemo value={memo} onChangeText={handleOnChangeMemo} isValid={!hasMemoError} />

apps/wallet-mobile/src/i18n/locales/en-US.json

@@ -773,7 +773,7 @@
   "send.helper.addressError.wrongNetwork": "Please enter an address for the current wallet network",
   "send.helper.resolver.resolvedAddress": "Resolved address",
   "send.helper.resolverError.domainNotFound": "Receiver address, ADA Handle or domain you entered doesn't exist. Please double-check it and try again",
-  "send.warning.resolver.manyNameServers": "There are more than one address for this domain. Please choose the desired name server.",
+  "send.warning.resolver.manyNameServers": "There are <b>two addresses</b> for this domain. Please SELECT the desired domain.",
   "swap.listOrders.card.buttonText": "Cancel order",
   "swap.listOrders.completed": "completed orders",
   "swap.listOrders.emptyCompletedOrders": "No orders completed yet",