diff --git a/src/components/addresses/picker/AddressPicker.tsx b/src/components/addresses/picker/AddressPicker.tsx index 11e63e6..07583e5 100644 --- a/src/components/addresses/picker/AddressPicker.tsx +++ b/src/components/addresses/picker/AddressPicker.tsx @@ -1,9 +1,9 @@ // Copyright (c) 2020-2021 Drew Lemmy // This file is part of KristWeb 2 under GPL-3.0. // Full details: https://github.com/tmpim/KristWeb2/blob/master/LICENSE.txt -import React, { useMemo, Ref } from "react"; +import React, { useMemo, Ref, useEffect } from "react"; import classNames from "classnames"; -import { AutoComplete, Form } from "antd"; +import { AutoComplete, Form, FormInstance } from "antd"; import { Rule } from "antd/lib/form"; import { ValidateStatus } from "antd/lib/form/FormItem"; import { RefSelectProps } from "antd/lib/select"; @@ -25,6 +25,8 @@ import "./AddressPicker.less"; interface Props { + form?: FormInstance; + name: string; label?: string; value?: string; @@ -45,6 +47,8 @@ } export function AddressPicker({ + form, + name, label, value, @@ -118,10 +122,15 @@ : options; // Fetch an address or name hint if possible - const pickerHints = usePickerHints( + const { pickerHints, foundName } = usePickerHints( nameHint, cleanValue, hasExactName, suppressUpdates ); + // Re-validate this field if the picker hints foundName changed + useEffect(() => { + form?.validateFields([name]); + }, [form, name, foundName, otherPickerValue]); + const classes = classNames("address-picker", className, { "address-picker-wallets-only": walletsOnly, "address-picker-no-names": noNames, @@ -183,6 +192,11 @@ async validator(_, value): Promise { if (value === otherPickerValue) throw t("addressPicker.errorEqual"); + + // If the value is a name, and we know the name's owner, assert that + // it's not the same as the otherPickerValue as well + if (hasExactName && foundName && foundName.owner === otherPickerValue) + throw t("addressPicker.errorEqual"); } } as Rule] : []) ]} diff --git a/src/components/addresses/picker/PickerHints.tsx b/src/components/addresses/picker/PickerHints.tsx index 44665c3..ed6b627 100644 --- a/src/components/addresses/picker/PickerHints.tsx +++ b/src/components/addresses/picker/PickerHints.tsx @@ -28,12 +28,18 @@ const HINT_LOOKUP_DEBOUNCE = 250; +interface PickerHintsRes { + pickerHints: JSX.Element | null; + foundAddress?: KristAddressWithNames | false; + foundName?: KristName | false; +} + export function usePickerHints( nameHint?: boolean, value?: string, hasExactName?: boolean, suppressUpdates?: boolean -): JSX.Element | null { +): PickerHintsRes { debug("using picker hints for %s", value); // Used for clean-up @@ -169,29 +175,31 @@ const showSep = (showWalletHint || showVerifiedHint) && (showAddressHint || showNameHint); - if (foundAnything) return
- {/* Show a wallet hint if possible */} - {foundWallet && } + const pickerHints = foundAnything + ?
+ {/* Show a wallet hint if possible */} + {foundWallet && } - {/* Show a verified hint if possible */} - {foundVerified && ( - // Make it look like a contextual address to inherit the styles - - - - )} + {/* Show a verified hint if possible */} + {foundVerified && ( + // Make it look like a contextual address to inherit the styles + + + + )} - {/* Show a separator if there are two hints */} - {showSep && } + {/* Show a separator if there are two hints */} + {showSep && } - {/* Show an address hint if possible */} - {showAddressHint && ( - - )} + {/* Show an address hint if possible */} + {showAddressHint && ( + + )} - {/* Show a name hint if possible */} - {showNameHint && } -
; + {/* Show a name hint if possible */} + {showNameHint && } +
+ : null; - return null; + return { pickerHints, foundAddress, foundName }; } diff --git a/src/pages/transactions/send/SendTransactionForm.tsx b/src/pages/transactions/send/SendTransactionForm.tsx index 6fdf677..eb4861d 100644 --- a/src/pages/transactions/send/SendTransactionForm.tsx +++ b/src/pages/transactions/send/SendTransactionForm.tsx @@ -137,6 +137,7 @@ {/* To */}