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 @@
)
: (
- } className="nyi">
- {t("address.buttonAddContact")}
-
+
+ : }>
+ {t(myContact
+ ? "address.buttonEditContact"
+ : "address.buttonAddContact")}
+
+
)}
>;
}
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 @@
),