feat: add search by name on address inputs (#643)

* feat: add searching by TNS on wallet address inputs * Update packages/components/modals/SendModal.tsx Co-authored-by: n0izn0iz <[email protected]> --------- Co-authored-by: n0izn0iz <[email protected]>
TERITORI · Jul 12, 2023 · 9391963 · 9391963
1 parent bdd2e17
commit 9391963
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 18 deletions.
diff --git a/packages/components/inputs/SearchNSInputContainer.tsx b/packages/components/inputs/SearchNSInputContainer.tsx
@@ -0,0 +1,50 @@
+import React, { FC } from "react";
+import { StyleProp, View, ViewStyle } from "react-native";
+
+import { useNameSearch } from "../../hooks/search/useNameSearch";
+import { useSelectedNetworkId } from "../../hooks/useSelectedNetwork";
+import { layout } from "../../utils/style/layout";
+import { AvatarWithName } from "../user/AvatarWithName";
+
+// Used as a wrapper on a TextInput or something like. It allows to search a name in TNS and returns the address.
+export const SearchNSInputContainer: FC<{
+  searchText: string;
+  onPressName: (userId: string) => void;
+  style?: StyleProp<ViewStyle>;
+}> = ({ searchText, onPressName, style, children }) => {
+  const selectedNetworkId = useSelectedNetworkId();
+  const { names } = useNameSearch({
+    networkId: selectedNetworkId,
+    input: searchText,
+    limit: 12,
+  });
+  const hasNames = !!names.length;
+
+  return (
+    <>
+      {children}
+      {hasNames && (
+        <View
+          style={[
+            {
+              flexDirection: "row",
+              flexWrap: "wrap",
+              marginTop: layout.padding_x1_5,
+            },
+            style,
+          ]}
+        >
+          {names.map((n) => (
+            <AvatarWithName
+              key={n}
+              networkId={selectedNetworkId}
+              name={n}
+              onPress={(userId) => onPressName(userId)}
+              style={{ marginRight: layout.padding_x1 }}
+            />
+          ))}
+        </View>
+      )}
+    </>
+  );
+};
diff --git a/packages/components/modals/SendModal.tsx b/packages/components/modals/SendModal.tsx
@@ -36,6 +36,7 @@ import { SVG } from "../SVG";
 import { MaxButton } from "../buttons/MaxButton";
 import { PrimaryButton } from "../buttons/PrimaryButton";
 import { DAOSelector } from "../dao/DAOSelector";
+import { SearchNSInputContainer } from "../inputs/SearchNSInputContainer";
 import { TextInputCustom } from "../inputs/TextInputCustom";
 import { SpacerColumn, SpacerRow } from "../spacer";
 
@@ -64,7 +65,7 @@ export const SendModal: React.FC<SendModalProps> = ({
 }) => {
   const { setToastError, setToastSuccess } = useFeedbacks();
   const selectedWallet = useSelectedWallet();
-  const { control, setValue, handleSubmit } = useForm<TransactionForm>();
+  const { control, setValue, handleSubmit, watch } = useForm<TransactionForm>();
   const [selectedDAOId, setSelectedDAOId] = useState("");
   const makeProposal = useDAOMakeProposal(selectedDAOId);
   const [, daoAddress] = parseUserId(selectedDAOId);
@@ -206,19 +207,27 @@ export const SendModal: React.FC<SendModalProps> = ({
     >
       <FlexRow alignItems="flex-end">
         <FlexCol alignItems="flex-start" width={356}>
-          <TextInputCustom<TransactionForm>
-            height={48}
-            width={320}
-            control={control}
-            variant="labelOutside"
-            label="Receiver"
-            name="toAddress"
-            rules={{ required: true }}
-            placeHolder={`Enter a ${
-              getNetwork(networkId)?.displayName || networkId
-            } address`}
-            defaultValue=""
-          />
+          <SearchNSInputContainer
+            onPressName={(userId) => {
+              const [, userAddress] = parseUserId(userId);
+              setValue("toAddress", userAddress);
+            }}
+            searchText={watch("toAddress")}
+          >
+            <TextInputCustom<TransactionForm>
+              height={48}
+              width={320}
+              control={control}
+              variant="labelOutside"
+              label="Receiver"
+              name="toAddress"
+              rules={{ required: true }}
+              placeHolder={`Enter a ${
+                getNetwork(networkId)?.displayName || networkId
+              } name or address`}
+              defaultValue=""
+            />
+          </SearchNSInputContainer>
         </FlexCol>
         <ContactButton />
       </FlexRow>

diff --git a/packages/components/user/AvatarWithName.tsx b/packages/components/user/AvatarWithName.tsx
@@ -18,7 +18,7 @@ export const AvatarWithName: React.FC<
         userId: string | undefined;
       }
   ) & {
-    style: StyleProp<ViewStyle>;
+    style?: StyleProp<ViewStyle>;
     onPress: (userId: string) => void;
   }
 > = (props) => {
@@ -31,7 +31,7 @@ export const AvatarWithName: React.FC<
 export const AvatarWithNameFromName: React.FC<{
   networkId: string | undefined;
   name: string | undefined;
-  style: StyleProp<ViewStyle>;
+  style?: StyleProp<ViewStyle>;
   onPress: (userId: string) => void;
 }> = ({ networkId, name, style, onPress }) => {
   const { nameOwner } = useNSNameOwner(networkId, name);
@@ -47,7 +47,7 @@ export const AvatarWithNameFromName: React.FC<{
 
 export const AvatarWithNameFromUserId: React.FC<{
   userId: string | undefined;
-  style: StyleProp<ViewStyle>;
+  style?: StyleProp<ViewStyle>;
   onPress: (userId: string) => void;
 }> = ({ userId, style, onPress }) => {
   const { primaryAlias } = useNSPrimaryAlias(userId);
@@ -64,7 +64,7 @@ export const AvatarWithNameFromUserId: React.FC<{
 export const AvatarWithNameView: React.FC<{
   name: string | undefined;
   userId: string | undefined;
-  style: StyleProp<ViewStyle>;
+  style?: StyleProp<ViewStyle>;
   onPress: (userId: string) => void;
 }> = ({ name, userId, style, onPress }) => {
   const [, userAddress] = parseUserId(userId);