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