diff --git a/packages/components/Search/SearchBarResults.tsx b/packages/components/Search/SearchBarResults.tsx
index 42acde5626..0352dcb72c 100644
--- a/packages/components/Search/SearchBarResults.tsx
+++ b/packages/components/Search/SearchBarResults.tsx
@@ -99,22 +99,24 @@ const SearchResultsSection: React.FC<{
const isMobile = useIsMobile();
return (
-
-
- {title}
-
-
+
+ {title}
+
+
+ )}
{children}
);
diff --git a/packages/components/inputs/SearchNSInputContainer.tsx b/packages/components/inputs/SearchNSInputContainer.tsx
new file mode 100644
index 0000000000..bfac9ed2fc
--- /dev/null
+++ b/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;
+}> = ({ 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 && (
+
+ {names.map((n) => (
+
+ ))}
+
+ )}
+ >
+ );
+};
diff --git a/packages/components/user/AvatarWithName.tsx b/packages/components/user/AvatarWithName.tsx
index 3b585d5292..e366631d02 100644
--- 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;
+ style?: StyleProp;
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;
+ style?: StyleProp;
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;
+ style?: StyleProp;
onPress: (userId: string) => void;
}> = ({ userId, style, onPress }) => {
const { primaryAlias } = useNSPrimaryAlias(userId);
diff --git a/packages/hooks/multisig/index.ts b/packages/hooks/multisig/index.ts
index 05499eb9db..d86e7b7042 100644
--- a/packages/hooks/multisig/index.ts
+++ b/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";
diff --git a/packages/hooks/multisig/useBrodcastTransaction.ts b/packages/hooks/multisig/useBroadcastTransaction.ts
similarity index 98%
rename from packages/hooks/multisig/useBrodcastTransaction.ts
rename to packages/hooks/multisig/useBroadcastTransaction.ts
index 0c0cc83780..c736e4d492 100644
--- a/packages/hooks/multisig/useBrodcastTransaction.ts
+++ b/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();
diff --git a/packages/screens/Multisig/MultisigCreateScreen.tsx b/packages/screens/Multisig/MultisigCreateScreen.tsx
index 6b69ebe23e..c2fb8d5d6b 100644
--- a/packages/screens/Multisig/MultisigCreateScreen.tsx
+++ b/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();
const [addressIndexes, setAddressIndexes] = useState([
emptyPubKeyGroup(),
@@ -155,28 +156,35 @@ export const MultisigCreateScreen = () => {
{addressIndexes.map((_, index) => (
-
- 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}
+
+ setValue(`addresses.${index}.address`, address)
+ }
>
- {addressIndexes.length > 2 && (
- removeAddressField(index)}
- >
-
-
- )}
-
+
+ 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 && (
+ removeAddressField(index)}
+ >
+
+
+ )}
+
+
))}
diff --git a/packages/screens/Multisig/components/MultisigTransactionForm.tsx b/packages/screens/Multisig/components/MultisigTransactionForm.tsx
index 5ce5055e68..e6ef9368f7 100644
--- a/packages/screens/Multisig/components/MultisigTransactionForm.tsx
+++ b/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>();
const selectedNetworkId = useSelectedNetworkId();
const { isLoading, data } = useGetMultisigAccount(address);
- const { control, handleSubmit, setValue } =
+ const { control, handleSubmit, setValue, watch } =
useForm();
const { coinSimplified, participantAddressesFromMultisig } =
useMultisigHelpers();
@@ -152,24 +153,31 @@ export const MultisigTransactionForm: React.FC<
{!isFetching && (
<>
{type === "transfer" ? (
-
- 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"
- />
+
+ setValue("recipientAddress", address)
+ }
+ >
+
+ 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"
+ />
+
) : (
v.moniker)}
diff --git a/packages/screens/OrganizerDeployer/components/TransactionItemButtons.tsx b/packages/screens/OrganizerDeployer/components/TransactionItemButtons.tsx
index b26b137d0c..130ed49187 100644
--- a/packages/screens/OrganizerDeployer/components/TransactionItemButtons.tsx
+++ b/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 = ({
mutate: broadcast,
isLoading: isBroacasting,
data: resTxHash,
- } = useBrodcastTransaction();
+ } = useBroadcastTransaction();
const { copyToClipboard } = useCopyToClipboard();
const hasSigned = useMemo(
@@ -110,7 +110,7 @@ export const TransactionItemButtons: React.FC = ({
addDecliner,
});
- const onBrodcast = () =>
+ const onBroadcast = () =>
broadcast({
tx: {
fee,
@@ -198,7 +198,7 @@ export const TransactionItemButtons: React.FC = ({
color={successColor}
borderColor={successColor}
isLoading={isBroacasting}
- onPress={onBrodcast}
+ onPress={onBroadcast}
/>
);