feat: add Search Contact modal (#2265)

src/app/assets/svg/index.ts

@@ -6,6 +6,8 @@ import { ReactComponent as ArrowDown } from "./arrowdown.svg";
 import { ReactComponent as ArrowUp } from "./arrowup.svg";
 import { ReactComponent as Article } from "./article.svg";
 import { ReactComponent as Back } from "./back.svg";
+import { ReactComponent as Bridgechain } from "./bridgechain.svg";
+import { ReactComponent as Business } from "./business.svg";
 import { ReactComponent as ChartActiveDot } from "./chart-active-dot.svg";
 import { ReactComponent as Checkmark } from "./checkmark.svg";
 import { ReactComponent as ChevronDown } from "./chevron-down.svg";
@@ -84,6 +86,8 @@ export const SvgCollection: any = {
 	ArrowUp,
 	Back,
 	Bitcoin,
+	Business,
+	Bridgechain,
 	Checkmark,
 	ChevronDown,
 	Close,

src/domains/contact/components/ContactForm/ContactForm.test.tsx

@@ -4,18 +4,11 @@ import { i18n } from "app/i18n";
 import React from "react";
 import { I18nextProvider } from "react-i18next";
 
+import { contact2 as contact } from "../../data";
 import { translations } from "../../i18n";
 import { ContactForm } from "./ContactForm";
 
 describe("ContactForm", () => {
-	const contact = {
-		name: () => "Oleg Gelo",
-		addresses: () => [
-			{ coin: "Btc", network: "Bitcoin", address: "15pyr1HRAxpq3x64duXav1csmyCtXXu9G8", avatar: "test1" },
-			{ coin: "Bch", network: "Bitcoin Cash", address: "15pyr1HRAxpq3x64duXav1csmyCtXXu9G8", avatar: "test1" },
-		],
-	};
-
 	const networks = [
 		{
 			label: "Ark Ecosystem",
@@ -24,6 +17,7 @@ describe("ContactForm", () => {
 		},
 	];
 
+	const onDelete = jest.fn();
 	const onSave = jest.fn();
 	const onCancel = jest.fn();
 
@@ -83,13 +77,13 @@ describe("ContactForm", () => {
 
 		const { getAllByTestId } = renderContext;
 
-		expect(getAllByTestId("contact-form__address-list-item")).toHaveLength(2);
+		expect(getAllByTestId("contact-form__address-list-item")).toHaveLength(contact.addresses().length);
 
 		await act(async () => {
 			fireEvent.click(getAllByTestId("contact-form__remove-address-btn")[0]);
 		});
 
-		expect(getAllByTestId("contact-form__address-list-item")).toHaveLength(1);
+		expect(getAllByTestId("contact-form__address-list-item")).toHaveLength(contact.addresses().length - 1);
 	});
 
 	it("should handle save", async () => {
@@ -110,7 +104,7 @@ describe("ContactForm", () => {
 
 	describe("when creating a new contact", () => {
 		it("should render the form", () => {
-			const { asFragment, getByTestId } = render(
+			const { asFragment, getAllByTestId, getByTestId } = render(
 				<I18nextProvider i18n={i18n}>
 					<ContactForm onCancel={onCancel} onSave={onSave} />
 				</I18nextProvider>,
@@ -119,33 +113,14 @@ describe("ContactForm", () => {
 			expect(getByTestId("contact-form")).toHaveTextContent(translations.CONTACT_FORM.NAME);
 			expect(getByTestId("contact-form")).toHaveTextContent(translations.CONTACT_FORM.NETWORK);
 			expect(getByTestId("contact-form")).toHaveTextContent(translations.CONTACT_FORM.ADDRESS);
+			expect(getByTestId("contact-form__save-btn")).toBeTruthy();
+			expect(() => getAllByTestId("contact-form__address-list")).toThrow(/Unable to find an element by/);
+			expect(() => getAllByTestId("contact-form__delete-btn")).toThrow(/Unable to find an element by/);
 			expect(asFragment()).toMatchSnapshot();
 		});
 	});
 
 	describe("when editing an existing contact", () => {
-		let contact;
-
-		beforeEach(() => {
-			contact = {
-				name: () => "Oleg Gelo",
-				addresses: () => [
-					{
-						coin: "Bitcoin",
-						network: "livenet",
-						address: "15pyr1HRAxpq3x64duXav1csmyCtXXu9G8",
-						avatar: "test1",
-					},
-					{
-						coin: "Ethereum",
-						network: "livenet",
-						address: "0x5e8f7a63e31c759ef0ad5e71594e838b380d7c33",
-						avatar: "test2",
-					},
-				],
-			};
-		});
-
 		it("should render the form", async () => {
 			let renderContext;
 
@@ -157,14 +132,38 @@ describe("ContactForm", () => {
 				);
 			});
 
-			const { asFragment, getByTestId, getAllByTestId } = renderContext;
+			const { asFragment, getAllByTestId, getByTestId } = renderContext;
 
 			expect(getByTestId("contact-form")).toHaveTextContent(translations.CONTACT_FORM.NAME);
 			expect(getByTestId("contact-form")).toHaveTextContent(translations.CONTACT_FORM.NETWORK);
 			expect(getByTestId("contact-form")).toHaveTextContent(translations.CONTACT_FORM.ADDRESS);
 			expect(getByTestId("contact-form__address-list")).toBeTruthy();
-			expect(getAllByTestId("contact-form__address-list-item")).toHaveLength(2);
+			expect(getByTestId("contact-form__save-btn")).toBeTruthy();
+			expect(getByTestId("contact-form__delete-btn")).toBeTruthy();
+			expect(getAllByTestId("contact-form__address-list-item")).toHaveLength(contact.addresses().length);
 			expect(asFragment()).toMatchSnapshot();
 		});
+
+		it("should call onDelete callback", async () => {
+			let renderContext;
+
+			await act(async () => {
+				renderContext = render(
+					<ContactForm
+						contact={contact}
+						networks={networks}
+						onCancel={onCancel}
+						onDelete={onDelete}
+						onSave={onSave}
+					/>,
+				);
+			});
+
+			await act(async () => {
+				fireEvent.click(renderContext.getByTestId("contact-form__delete-btn"));
+			});
+
+			expect(onDelete).toHaveBeenCalled();
+		});
 	});
 });

src/domains/contact/components/ContactForm/ContactForm.tsx

@@ -1,4 +1,3 @@
-import { ContactAddress } from "@arkecosystem/platform-sdk-profiles";
 import { Address } from "app/components/Address";
 import { Button } from "app/components/Button";
 import { Circle } from "app/components/Circle";
@@ -11,7 +10,7 @@ import { useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 
 type AddressListItemProps = {
-	address: ContactAddress;
+	address: any;
 	onRemove: any;
 };
 
@@ -46,7 +45,7 @@ const AddressListItem = ({ address, onRemove }: AddressListItemProps) => {
 };
 
 type AddressListProps = {
-	addresses: ContactAddress[];
+	addresses: any[];
 	onRemove: any;
 };
 
@@ -60,7 +59,7 @@ const AddressList = ({ addresses, onRemove }: AddressListProps) => {
 			</span>
 
 			<div data-testid="contact-form__address-list">
-				{addresses.map((address: ContactAddress, index: number) => (
+				{addresses.map((address: any, index: number) => (
 					<AddressListItem key={index} address={address} onRemove={onRemove} />
 				))}
 			</div>
@@ -71,11 +70,12 @@ const AddressList = ({ addresses, onRemove }: AddressListProps) => {
 type ContactFormProps = {
 	contact?: any;
 	networks: any;
-	onCancel: any;
+	onCancel?: any;
+	onDelete?: any;
 	onSave: any;
 };
 
-export const ContactForm = ({ contact, networks, onCancel, onSave }: ContactFormProps) => {
+export const ContactForm = ({ contact, networks, onCancel, onDelete, onSave }: ContactFormProps) => {
 	const [contactAddresses, setContactAddresses] = useState(() => {
 		return contact ? contact.addresses() : [];
 	});
@@ -102,9 +102,9 @@ export const ContactForm = ({ contact, networks, onCancel, onSave }: ContactForm
 		form.setValue("address", null);
 	};
 
-	const handleRemoveAddress = (address: ContactAddress) => {
+	const handleRemoveAddress = (address: any) => {
 		setContactAddresses(
-			contactAddresses.filter((curr: ContactAddress) => {
+			contactAddresses.filter((curr: any) => {
 				return !(curr.address === address.address && curr.network === address.network);
 			}),
 		);
@@ -169,19 +169,28 @@ export const ContactForm = ({ contact, networks, onCancel, onSave }: ContactForm
 				<AddressList addresses={contactAddresses} onRemove={handleRemoveAddress} />
 			)}
 
-			<div className="flex justify-end mt-8 space-x-3">
-				<Button data-testid="contact-form__cancel-btn" variant="plain" onClick={onCancel}>
-					{t("COMMON.CANCEL")}
-				</Button>
-
-				<Button
-					data-testid="contact-form__save-btn"
-					type="submit"
-					variant="solid"
-					disabled={!contactAddresses.length}
-				>
-					{t("COMMON.SAVE")}
-				</Button>
+			<div className={`flex w-full ${contact ? "justify-between" : "justify-end"}`}>
+				{contact && (
+					<Button data-testid="contact-form__delete-btn" onClick={onDelete} color="danger" variant="plain">
+						<Icon name="Trash" />
+						<span>{t("CONTACTS.CONTACT_FORM.DELETE_CONTACT")}</span>
+					</Button>
+				)}
+
+				<div className="space-x-3">
+					<Button data-testid="contact-form__cancel-btn" variant="plain" onClick={onCancel}>
+						{t("COMMON.CANCEL")}
+					</Button>
+
+					<Button
+						data-testid="contact-form__save-btn"
+						type="submit"
+						variant="solid"
+						disabled={!contactAddresses.length}
+					>
+						{t("COMMON.SAVE")}
+					</Button>
+				</div>
 			</div>
 		</Form>
 	);