feat: add searching by TNS on wallet address inputs

packages/components/Search/SearchBarResults.tsx

@@ -99,22 +99,22 @@ const SearchResultsSection: React.FC<{
   const isMobile = useIsMobile();
   return (
     <View style={style}>
-      <View
-        style={[
-          { backgroundColor: neutral22, paddingVertical: 4 },
-          isFirstSection &&
-            !isMobile && { borderTopStartRadius: 6, borderTopEndRadius: 6 },
-        ]}
-      >
-        <BrandText
+        <View
           style={[
-            { marginLeft: SEARCH_RESULTS_MARGIN, color: neutralA3 },
-            fontSemibold12,
+            { backgroundColor: neutral22, paddingVertical: 4 },
+            isFirstSection &&
+              !isMobile && { borderTopStartRadius: 6, borderTopEndRadius: 6 },
           ]}
         >
-          {title}
-        </BrandText>
-      </View>
+          <BrandText
+            style={[
+              { marginLeft: SEARCH_RESULTS_MARGIN, color: neutralA3 },
+              fontSemibold12,
+            ]}
+          >
+            {title}
+          </BrandText>
+        </View>
       <View style={{ padding: SEARCH_RESULTS_MARGIN }}>{children}</View>
     </View>
   );

packages/components/inputs/SearchNSInputContainer.tsx

@@ -0,0 +1,55 @@
+import React, { FC } from "react";
+import { StyleProp, View, ViewStyle } from "react-native";
+
+import { useNameSearch } from "../../hooks/search/useNameSearch";
+import { useSelectedNetworkId } from "../../hooks/useSelectedNetwork";
+import { parseUserId } from "../../networks";
+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: (address: 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;
+
+  const onPress = (userId: string) => {
+    const [, userAddress] = parseUserId(userId);
+    onPressName(userAddress);
+  };
+
+  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={onPress}
+            />
+          ))}
+        </View>
+      )}
+    </>
+  );
+};

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);

packages/hooks/multisig/index.ts

@@ -9,6 +9,6 @@ export * from "./useCreateMultisig";
 export * from "./useApproveTransaction";
 export * from "./useDeclineTransaction";
 export * from "./useGetTransactionCount";
-export * from "./useBrodcastTransaction";
+export * from "./useBroadcastTransaction";
 export * from "./useMultisigValidator";
 export * from "./useCreateUserWallet";

packages/hooks/multisig/useBrodcastTransaction.ts → packages/hooks/multisig/useBroadcastTransaction.ts

@@ -10,7 +10,7 @@ import { useMultisigContext } from "../../context/MultisigReducer";
 import { completeTransaction } from "../../utils/faunaDB/multisig/multisigGraphql";
 import { DbSignature } from "../../utils/faunaDB/multisig/types";
 
-export const useBrodcastTransaction = () => {
+export const useBroadcastTransaction = () => {
   const { state } = useMultisigContext();
   const { setToastError, setToastSuccess } = useFeedbacks();
 

packages/screens/Multisig/MultisigCreateScreen.tsx

@@ -12,6 +12,7 @@ import { SVG } from "../../components/SVG";
 import { ScreenContainer } from "../../components/ScreenContainer";
 import { PrimaryButton } from "../../components/buttons/PrimaryButton";
 import { SecondaryButton } from "../../components/buttons/SecondaryButton";
+import { SearchNSInputContainer } from "../../components/inputs/SearchNSInputContainer";
 import { TextInputCustom } from "../../components/inputs/TextInputCustom";
 import { TextInputOutsideLabel } from "../../components/inputs/TextInputOutsideLabel";
 import { SpacerColumn, SpacerRow } from "../../components/spacer";
@@ -44,7 +45,7 @@ import { layout } from "../../utils/style/layout";
 const emptyPubKeyGroup = () => ({ address: "", compressedPubkey: "" });
 
 export const MultisigCreateScreen = () => {
-  const { control, handleSubmit, watch } =
+  const { control, handleSubmit, watch, setValue } =
     useForm<CreateMultisigWalletFormType>();
   const [addressIndexes, setAddressIndexes] = useState([
     emptyPubKeyGroup(),
@@ -155,28 +156,35 @@ export const MultisigCreateScreen = () => {
           <SpacerColumn size={3} />
           {addressIndexes.map((_, index) => (
             <View style={styles.inputContainer} key={index.toString()}>
-              <TextInputCustom<CreateMultisigWalletFormType>
-                control={control}
-                name={`addresses.${index}.address`}
-                variant="labelOutside"
-                noBrokenCorners
-                label={"Address #" + (index + 1)}
-                rules={{
-                  required: true,
-                  validate: (value) => onAddressChange(index, value),
-                }}
-                placeHolder="Account address"
-                iconSVG={walletInputSVG}
+              <SearchNSInputContainer
+                searchText={watch(`addresses.${index}.address`)}
+                onPressName={(address) =>
+                  setValue(`addresses.${index}.address`, address)
+                }
               >
-                {addressIndexes.length > 2 && (
-                  <Pressable
-                    style={styles.trashContainer}
-                    onPress={() => removeAddressField(index)}
-                  >
-                    <SVG source={trashSVG} width={12} height={12} />
-                  </Pressable>
-                )}
-              </TextInputCustom>
+                <TextInputCustom<CreateMultisigWalletFormType>
+                  control={control}
+                  name={`addresses.${index}.address`}
+                  variant="labelOutside"
+                  noBrokenCorners
+                  label={"Address #" + (index + 1)}
+                  rules={{
+                    required: true,
+                    validate: (value) => onAddressChange(index, value),
+                  }}
+                  placeHolder="Account address"
+                  iconSVG={walletInputSVG}
+                >
+                  {addressIndexes.length > 2 && (
+                    <Pressable
+                      style={styles.trashContainer}
+                      onPress={() => removeAddressField(index)}
+                    >
+                      <SVG source={trashSVG} width={12} height={12} />
+                    </Pressable>
+                  )}
+                </TextInputCustom>
+              </SearchNSInputContainer>
             </View>
           ))}
           <View style={styles.row}>

packages/screens/Multisig/components/MultisigTransactionForm.tsx

@@ -10,6 +10,7 @@ import { BrandText } from "../../../components/BrandText";
 import { SVG } from "../../../components/SVG";
 import { AnimationExpand } from "../../../components/animations";
 import { PrimaryButton } from "../../../components/buttons/PrimaryButton";
+import { SearchNSInputContainer } from "../../../components/inputs/SearchNSInputContainer";
 import { GeneralSelect } from "../../../components/select/GeneralSelect";
 import { SpacerColumn } from "../../../components/spacer";
 import { useMultisigContext } from "../../../context/MultisigReducer";
@@ -48,7 +49,7 @@ export const MultisigTransactionForm: React.FC<
   } = useRoute<AppRouteType<"MultisigTransfer" | "MultisigDelegate">>();
   const selectedNetworkId = useSelectedNetworkId();
   const { isLoading, data } = useGetMultisigAccount(address);
-  const { control, handleSubmit, setValue } =
+  const { control, handleSubmit, setValue, watch } =
     useForm<MultisigTransactionDelegateFormType>();
   const { coinSimplified, participantAddressesFromMultisig } =
     useMultisigHelpers();
@@ -152,24 +153,31 @@ export const MultisigTransactionForm: React.FC<
             {!isFetching && (
               <>
                 {type === "transfer" ? (
-                  <MultisigFormInput<MultisigTransactionDelegateFormType>
-                    control={control}
-                    label=""
-                    hideLabel
-                    name="recipientAddress"
-                    isDisabled={!membersAddress?.length}
-                    rules={{
-                      required: true,
-                      validate: (value) =>
-                        validateMultisigAddress(
-                          value,
-                          type === "transfer"
-                            ? state.chain?.addressPrefix || ""
-                            : state.chain?.validatorPrefix || ""
-                        ),
-                    }}
-                    placeHolder="E.g : torix23Jkj1ZSQJ128D928XJSkL2K30Dld1ksl"
-                  />
+                  <SearchNSInputContainer
+                    searchText={watch("recipientAddress")}
+                    onPressName={(address) =>
+                      setValue("recipientAddress", address)
+                    }
+                  >
+                    <MultisigFormInput<MultisigTransactionDelegateFormType>
+                      control={control}
+                      label=""
+                      hideLabel
+                      name="recipientAddress"
+                      isDisabled={!membersAddress?.length}
+                      rules={{
+                        required: true,
+                        validate: (value) =>
+                          validateMultisigAddress(
+                            value,
+                            type === "transfer"
+                              ? state.chain?.addressPrefix || ""
+                              : state.chain?.validatorPrefix || ""
+                          ),
+                      }}
+                      placeHolder="E.g : torix23Jkj1ZSQJ128D928XJSkL2K30Dld1ksl"
+                    />
+                  </SearchNSInputContainer>
                 ) : (
                   <GeneralSelect
                     data={activeValidators.map((v) => v.moniker)}

packages/screens/OrganizerDeployer/components/TransactionItemButtons.tsx

@@ -15,7 +15,7 @@ import { MainConnectWalletButton } from "../../../components/connectWallet/MainC
 import { SpacerRow } from "../../../components/spacer";
 import {
   useApproveTransaction,
-  useBrodcastTransaction,
+  useBroadcastTransaction,
   useDeclineTransaction,
 } from "../../../hooks/multisig";
 import useSelectedWallet from "../../../hooks/useSelectedWallet";
@@ -66,7 +66,7 @@ export const TransactionItemButtons: React.FC<TransactionItemButtonsProps> = ({
     mutate: broadcast,
     isLoading: isBroacasting,
     data: resTxHash,
-  } = useBrodcastTransaction();
+  } = useBroadcastTransaction();
   const { copyToClipboard } = useCopyToClipboard();
 
   const hasSigned = useMemo(
@@ -110,7 +110,7 @@ export const TransactionItemButtons: React.FC<TransactionItemButtonsProps> = ({
       addDecliner,
     });
 
-  const onBrodcast = () =>
+  const onBroadcast = () =>
     broadcast({
       tx: {
         fee,
@@ -198,7 +198,7 @@ export const TransactionItemButtons: React.FC<TransactionItemButtonsProps> = ({
           color={successColor}
           borderColor={successColor}
           isLoading={isBroacasting}
-          onPress={onBrodcast}
+          onPress={onBroadcast}
         />
       </AnimationFadeIn>
     );