diff --git a/public/locales/en.json b/public/locales/en.json index 956faaf..b019080 100644 --- a/public/locales/en.json +++ b/public/locales/en.json @@ -436,6 +436,7 @@ "walletLabel": "Label:", "walletCategory": "Category:", + "contactLabel": "Contact:", "balance": "Current balance", "names": "Names", @@ -447,7 +448,7 @@ "buttonSendKrist": "Send Krist to {{address}}", "buttonTransferKrist": "Transfer Krist to {{address}}", "buttonAddContact": "Add to address book", - "buttonEditContact": "Edit in address book", + "buttonEditContact": "Edit contact", "buttonEditWallet": "Edit wallet", "tooltipV1Address": "Transactions cannot be sent to v1 addresses, as they have been deprecated.", diff --git a/src/pages/addresses/AddressButtonRow.tsx b/src/pages/addresses/AddressButtonRow.tsx index 6445046..1fa174c 100644 --- a/src/pages/addresses/AddressButtonRow.tsx +++ b/src/pages/addresses/AddressButtonRow.tsx @@ -10,15 +10,22 @@ import { KristAddressWithNames } from "@api/lookup"; import { Wallet } from "@wallets"; +import { Contact } from "@contacts"; import { WalletEditButton } from "../wallets/WalletEditButton"; +import { ContactEditButton } from "../contacts/ContactEditButton"; import { SendTransactionModalLink } from "@comp/transactions/SendTransactionModalLink"; interface Props { address: KristAddressWithNames; myWallet?: Wallet; + myContact?: Contact; } -export function AddressButtonRow({ address, myWallet }: Props): JSX.Element { +export function AddressButtonRow({ + address, + myWallet, + myContact +}: Props): JSX.Element { const { t } = useTranslation(); const isV1 = address && isV1Address(address.address); @@ -55,9 +62,13 @@ ) : ( - + + + )} ; } diff --git a/src/pages/addresses/AddressPage.less b/src/pages/addresses/AddressPage.less index 0e53861..75d12e8 100644 --- a/src/pages/addresses/AddressPage.less +++ b/src/pages/addresses/AddressPage.less @@ -42,8 +42,13 @@ margin-right: @padding-xs; } - .address-wallet-label:not(:last-child) { - margin-right: @padding-xs; + .address-wallet-verified, + .address-wallet-label, + .address-wallet-category, + .address-wallet-contact { + &:not(:last-child) { + margin-right: @padding-xs; + } } } diff --git a/src/pages/addresses/AddressPage.tsx b/src/pages/addresses/AddressPage.tsx index 46e6f75..b08e932 100644 --- a/src/pages/addresses/AddressPage.tsx +++ b/src/pages/addresses/AddressPage.tsx @@ -17,6 +17,7 @@ import * as api from "@api"; import { lookupAddress, KristAddressWithNames } from "@api/lookup"; import { useWallets } from "@wallets"; +import { useContacts } from "@contacts"; import { useSubscription } from "@global/ws/WebsocketSubscription"; import { useBooleanSetting } from "@utils/settings"; @@ -41,11 +42,13 @@ function PageContents({ address, lastTransactionID }: PageContentsProps): JSX.Element { const { t } = useTranslation(); - const { wallets } = useWallets(); + const { walletAddressMap } = useWallets(); + const { contactAddressMap } = useContacts(); - const myWallet = Object.values(wallets) - .find(w => w.address === address.address); + const myWallet = walletAddressMap[address.address]; + const myContact = contactAddressMap[address.address]; const showWalletTags = myWallet && (myWallet.label || myWallet.category); + const showContactTags = myContact && myContact.label; const verified = getVerified(address.address); const showVerifiedDesc = verified?.description || verified?.website || @@ -60,14 +63,18 @@ {/* Buttons (e.g. Send Krist, Add contact) */} - + - {/* Wallet/verified tags (if applicable) */} - {(showWalletTags || verified) && ( + {/* Wallet/contact/verified tags (if applicable) */} + {(showWalletTags || showContactTags || verified) && ( {/* Verified label */} - {verified?.label && + {verified?.label && {verified.label} @@ -84,6 +91,12 @@ {t("address.walletCategory")} {myWallet.category} } + + {/* Contact label */} + {myContact?.label && + {t("address.contactLabel")} + {myContact.label} + } )} diff --git a/src/pages/contacts/AddContactModal.tsx b/src/pages/contacts/AddContactModal.tsx index 0a8d309..6786816 100644 --- a/src/pages/contacts/AddContactModal.tsx +++ b/src/pages/contacts/AddContactModal.tsx @@ -8,7 +8,7 @@ import { ADDRESS_LIST_LIMIT } from "@wallets"; import { Contact, useContacts, addContact, editContact } from "@contacts"; -import { useAddressPrefix, useNameSuffix, getNameParts } from "@utils/currency"; +import { useNameSuffix, getNameParts } from "@utils/currency"; import { AddressPicker } from "@comp/addresses/picker/AddressPicker"; @@ -18,6 +18,7 @@ } interface Props { + address?: string; editing?: Contact; visible: boolean; @@ -25,6 +26,7 @@ } export function AddContactModal({ + address: initialAddress, editing, visible, @@ -33,11 +35,10 @@ const { t, tStr } = useTFns("addContact."); const [form] = Form.useForm(); - const [address, setAddress] = useState(""); + const [address, setAddress] = useState(editing?.address ?? initialAddress); // Required to check for existing contacts const { contacts, contactAddressMap } = useContacts(); - const addressPrefix = useAddressPrefix(); const nameSuffix = useNameSuffix(); function closeModal() { @@ -123,7 +124,7 @@ initialValues={{ label: editing?.label ?? undefined, - address: editing?.address ?? undefined + address: editing?.address ?? initialAddress }} onValuesChange={onValuesChange} diff --git a/src/pages/contacts/ContactEditButton.tsx b/src/pages/contacts/ContactEditButton.tsx new file mode 100644 index 0000000..d419a61 --- /dev/null +++ b/src/pages/contacts/ContactEditButton.tsx @@ -0,0 +1,37 @@ +// Copyright (c) 2020-2021 Drew Lemmy +// This file is part of KristWeb 2 under AGPL-3.0. +// Full details: https://github.com/tmpim/KristWeb2/blob/master/LICENSE.txt +import React, { useState, FC } from "react"; + +import { AddContactModal } from "./AddContactModal"; + +import { Contact } from "@contacts"; + +interface Props { + address?: string; + contact?: Contact; +} + +export const ContactEditButton: FC = ({ + address, + contact, + children +}): JSX.Element => { + const [editContactVisible, setEditContactVisible] = useState(false); + + const child = React.Children.only(children) as React.ReactElement; + + return <> + {React.cloneElement(child, { onClick: (e: MouseEvent) => { + e.preventDefault(); + setEditContactVisible(true); + }})} + + + ; +}; diff --git a/src/pages/wallets/WalletsTable.tsx b/src/pages/wallets/WalletsTable.tsx index 96476e5..06b2e64 100644 --- a/src/pages/wallets/WalletsTable.tsx +++ b/src/pages/wallets/WalletsTable.tsx @@ -62,6 +62,7 @@ ),