Fix recipient input in send flow

src/components/RecipientInput.tsx

@@ -0,0 +1,53 @@
+import { Flex } from "@ledgerhq/native-ui";
+import { PasteMedium } from "@ledgerhq/native-ui/assets/icons";
+import React, { ForwardedRef } from "react";
+import { useTranslation } from "react-i18next";
+import { TextInput as BaseTextInput } from "react-native";
+import { TouchableOpacity } from "react-native-gesture-handler";
+import styled from "styled-components/native";
+
+import TextInput, { Props as TextInputProps } from "./TextInput";
+
+const PasteButton = styled(TouchableOpacity).attrs(() => ({
+  activeOpacity: 0.6,
+}))`
+  background-color: ${p => p.theme.colors.neutral.c100};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 38px;
+  height: 38px;
+  border-radius: 38px;
+  border-width: 0;
+`;
+
+const PasteIcon = styled(PasteMedium).attrs(p => ({
+  color: p.theme.colors.neutral.c00,
+  size: 20,
+}))``;
+
+type Props = TextInputProps & {
+  ref?: ForwardedRef<BaseTextInput>;
+  onPaste?: () => void;
+};
+
+const RecipientInput = ({ ref, onPaste, ...props }: Props) => {
+  const { t } = useTranslation();
+
+  return (
+    <TextInput
+      ref={ref}
+      placeholder={t("transfer.recipient.input")}
+      renderRight={
+        <Flex alignItems="center" justifyContent="center" pr={2}>
+          <PasteButton onPress={onPaste}>
+            <PasteIcon />
+          </PasteButton>
+        </Flex>
+      }
+      {...props}
+    />
+  );
+};
+
+export default RecipientInput;

src/locales/en/common.json

@@ -1956,6 +1956,9 @@
     }
   },
   "transfer": {
+    "recipient": {
+      "input": "Enter address"
+    },
     "send": {
       "title": "Send"
     },

src/screens/SendFunds/02-SelectRecipient.js

@@ -31,6 +31,7 @@ import RetryButton from "../../components/RetryButton";
 import CancelButton from "../../components/CancelButton";
 import GenericErrorBottomModal from "../../components/GenericErrorBottomModal";
 import NavigationScrollView from "../../components/NavigationScrollView";
+import RecipientInput from "../../components/RecipientInput";
 
 const withoutHiddenError = error =>
   error instanceof RecipientRequired ? null : error;
@@ -202,39 +203,17 @@ export default function SendSelectRecipient({ navigation, route }: Props) {
                 ]}
               />
             </View>
-            <TouchableOpacity
-              style={styles.pasteContainer}
-              onPress={async () => {
-                const text = await Clipboard.getString();
-                onChangeText(text);
-              }}
-            >
-              <Paste size={16} color={colors.live} />
-              <LText style={styles.pasteTitle} semiBold color="live">
-                <Trans i18nKey="common.paste" />
-              </LText>
-            </TouchableOpacity>
             <View style={styles.inputWrapper}>
-              {/* make this a recipient component */}
-              <TextInput
-                placeholder={t("send.recipient.input")}
-                placeholderTextColor={colors.fog}
-                style={[
-                  styles.addressInput,
-                  { color: colors.darkBlue },
-                  error && { color: colors.alert },
-                  warning && { color: colors.orange },
-                ]}
+              <RecipientInput
+                onPaste={async () => {
+                  const text = await Clipboard.getString();
+                  onChangeText(text);
+                }}
                 onFocus={onRecipientFieldFocus}
                 onChangeText={onChangeText}
                 onInputCleared={clear}
                 value={transaction.recipient}
                 ref={input}
-                scrollEnabled={false}
-                multiline
-                blurOnSubmit
-                autoCapitalize="none"
-                clearButtonMode="always"
               />
             </View>
             {(error || warning) && (
@@ -300,15 +279,6 @@ const styles = StyleSheet.create({
     paddingVertical: 16,
     backgroundColor: "transparent",
   },
-  pasteContainer: {
-    alignItems: "center",
-    flexDirection: "row",
-    marginBottom: 8,
-    marginTop: 32,
-  },
-  pasteTitle: {
-    marginLeft: 8,
-  },
   infoBox: {
     marginBottom: 24,
   },
@@ -323,12 +293,6 @@ const styles = StyleSheet.create({
     borderBottomWidth: 1,
     marginHorizontal: 8,
   },
-  addressInput: {
-    flex: 1,
-    ...getFontStyle({ semiBold: true }),
-    fontSize: 20,
-    paddingVertical: 16,
-  },
   warningBox: {
     marginTop: 8,
     ...Platform.select({
@@ -338,6 +302,7 @@ const styles = StyleSheet.create({
     }),
   },
   inputWrapper: {
+    marginTop: 32,
     flexDirection: "row",
     alignItems: "center",
   },