diff --git a/.vscode/settings.json b/.vscode/settings.json index 0eb8003..db986d0 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -66,6 +66,7 @@ "typeahead", "uncategorised", "unmount", + "unmounting", "unregistering", "unsyncable", "whatsnew" diff --git a/public/locales/en.json b/public/locales/en.json index 10ec545..255d542 100644 --- a/public/locales/en.json +++ b/public/locales/en.json @@ -769,7 +769,8 @@ "addressHint": "Balance: <1 />", "addressHintWithNames": "Names: <1>{{names, number}}", "nameHint": "Owner: <1 />", - "nameHintNotFound": "Name not found." + "nameHintNotFound": "Name not found.", + "walletHint": "Wallet: <1 />" }, "sendTransaction": { diff --git a/src/components/addresses/picker/AddressPicker.less b/src/components/addresses/picker/AddressPicker.less index 13ad66d..c0529eb 100644 --- a/src/components/addresses/picker/AddressPicker.less +++ b/src/components/addresses/picker/AddressPicker.less @@ -39,3 +39,10 @@ } } } + +.address-picker-hints { + .address-picker-separator { + margin: 0 @padding-xs; + color: @text-color-secondary; + } +} diff --git a/src/components/addresses/picker/PickerHints.tsx b/src/components/addresses/picker/PickerHints.tsx index 38557cc..72655c8 100644 --- a/src/components/addresses/picker/PickerHints.tsx +++ b/src/components/addresses/picker/PickerHints.tsx @@ -7,11 +7,13 @@ isValidAddress, stripNameSuffix, useAddressPrefix, useNameSuffix } from "@utils/currency"; +import { useWallets } from "@wallets"; import * as api from "@api"; import { KristAddressWithNames, lookupAddress } from "@api/lookup"; import { KristName } from "@api/types"; +import { WalletHint } from "./WalletHint"; import { AddressHint } from "./AddressHint"; import { NameHint } from "./NameHint"; @@ -44,6 +46,11 @@ const [validAddress, setValidAddress] = useState(); const lastTransactionID = useSubscription({ address: validAddress }); + // Used to show a wallet hint + const { walletAddressMap, joinedAddressList } = useWallets(); + const foundWallet = validAddress && value + ? walletAddressMap[validAddress] : undefined; + // The actual lookup function (debounced) const lookupHint = useMemo(() => debounce(async ( nameSuffix: string, @@ -125,7 +132,7 @@ lookupHint(nameSuffix, value, hasValidAddress, hasExactName, nameHint); }, [ lookupHint, nameSuffix, value, addressPrefix, hasExactName, nameHint, - validAddress, lastTransactionID + validAddress, lastTransactionID, joinedAddressList ]); // Clean up the debounced function when unmounting @@ -137,15 +144,26 @@ }; }, [lookupHint]); - // Return an address hint if possible - if (foundAddress !== undefined) return ( - - ); + // Whether or not to show a separator between the wallet hint and address or + // name hint (i.e. if two hints are shown) + const showSep = !!foundWallet && (!!foundAddress || !!foundName); + const foundAnything = !!foundWallet || !!foundAddress || !!foundName; - // Return a name hint if possible - if (foundName !== undefined) return ( - - ); + if (foundAnything) return
+ {/* Show a wallet hint if possible */} + {foundWallet && } + + {/* Show a separator if there are two hints */} + {showSep && } + + {/* Show an address hint if possible */} + {foundAddress !== undefined && ( + + )} + + {/* Show a name hint if possible */} + {foundName !== undefined && } +
; return null; } diff --git a/src/components/addresses/picker/WalletHint.tsx b/src/components/addresses/picker/WalletHint.tsx new file mode 100644 index 0000000..4fde4b3 --- /dev/null +++ b/src/components/addresses/picker/WalletHint.tsx @@ -0,0 +1,21 @@ +// 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 { useTranslation, Trans } from "react-i18next"; + +import { Wallet } from "@wallets"; +import { ContextualAddress } from "@comp/addresses/ContextualAddress"; + +interface Props { + wallet: Wallet; +} + +export function WalletHint({ wallet }: Props): JSX.Element { + const { t } = useTranslation(); + + return + + Owner: + + ; +}