refactor: integrate AddRecipient in SendTransaction (#2462)

src/app/__snapshots__/App.test.tsx.snap

@@ -6,7 +6,7 @@ exports[`App should render 1`] = `
     class="debug-screens"
   >
     <div
-      class="sc-fzqMdD fRMNNm"
+      class="sc-fzoJus cXGpQF"
       data-testid="RouterView__wrapper"
     >
       <div

src/app/assets/svg/index.ts

@@ -68,6 +68,7 @@ import { ReactComponent as PortfolioTag } from "./portfolio-tag.svg";
 import { ReactComponent as Portfolio } from "./portfolio.svg";
 import { ReactComponent as Profile } from "./profile.svg";
 import { ReactComponent as Qrcode } from "./qrcode.svg";
+import { ReactComponent as QuestionMark } from "./questionmark.svg";
 import { ReactComponent as Receive } from "./receive.svg";
 import { ReactComponent as Received } from "./received.svg";
 import { ReactComponent as Reddit } from "./reddit.svg";
@@ -188,4 +189,5 @@ export const SvgCollection: any = {
 	EyeTag,
 	ChartActiveDot,
 	Placeholder,
+	QuestionMark,
 };

src/domains/profile/components/SelectAddress/SelectAddress.tsx

@@ -5,7 +5,7 @@ import { useFormField } from "app/components/Form/useFormField";
 import { Icon } from "app/components/Icon";
 import { Input } from "app/components/Input";
 import { SearchContact } from "domains/contact/components/SearchContact";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 
 import { SelectAddressWrapper } from "./SelectAddress.styles";
 
@@ -43,6 +43,7 @@ export const SelectAddress = React.forwardRef<HTMLInputElement, SelectAddressPro
 	) => {
 		const [isContactSearchOpen, setIsContactSearchOpen] = useState(false);
 		const [selectedAddress, setSelectedAddress] = useState(address);
+		useEffect(() => setSelectedAddress(address), [address]);
 
 		const fieldContext = useFormField();
 		const isInvalidField = fieldContext?.isInvalid || isInvalid;

src/domains/transaction/components/AddRecipient/AddRecipient.models.ts

@@ -0,0 +1,24 @@
+import { RecipientListItem } from "domains/transaction/components/RecipientList/RecipientList.models";
+
+export type AddRecipientProps = {
+	maxAvailableAmount: number;
+	availableAmount: number;
+	assetSymbol: string;
+	isSingleRecipient?: boolean;
+	singleLabel?: string;
+	multipleLabel?: string;
+	recipients?: RecipientListItem[];
+	contacts?: any;
+	labelText?: string;
+	helpText?: string;
+	onChange?: (recipients: RecipientListItem[]) => void;
+};
+
+export type ToggleButtonProps = {
+	labelText?: string;
+	helpText?: string;
+	isSingle?: boolean;
+	singleLabel?: string;
+	multipleLabel?: string;
+	onChange?: (isSingle: boolean) => void;
+};

src/domains/transaction/components/AddRecipient/AddRecipient.styles.ts

@@ -1,17 +1,29 @@
-export const defaultStyle = `
-    .ProfileFormField {
-        &__select-contact {
-            > div:first-child {
-                width: 100%;
-                svg {
-                    display: none;
-                }
-            }
-        }
-    }
+import { styled } from "twin.macro";
 
-	.MultiRecipientWrapper {
-		background: var(--theme-color-neutral-100);
-		box-shadow: 0 1px 1px 1rem var(--theme-color-neutral-100);
+const defaultStyle = `
+	& {
+		.MultiRecipientWrapper {
+			background: var(--theme-color-neutral-100);
+			border-radius: 0.625rem;
+			border: 1.5rem solid var(--theme-color-neutral-100);
+			margin-left: -1.25rem;
+			margin-right: -1.25rem;
+		}
+
+		.select-buttons {
+			button:first-child {
+				border-top-right-radius: 0;
+				border-bottom-right-radius: 0;
+			}
+
+			button:last-child {
+				border-top-left-radius: 0;
+				border-bottom-left-radius: 0;
+			}
+		}
 	}
 `;
+
+export const AddRecipientWrapper = styled.div`
+	${defaultStyle}
+`;

src/domains/transaction/components/AddRecipient/AddRecipient.test.tsx

@@ -14,14 +14,10 @@ const recipients = [
 	{
 		address: "AhFJKDSALJFKASLJFKSDEAJ333FKFKDSAJFKSAJFKLASJKDFJ",
 		walletName: "Recipient Multisig",
-		formatted: " Recipient Multisig AhFJKDSALJFKA...SAJFKLASJKDFJ",
-		isMultisig: true,
 	},
 	{
 		address: "FAhFJKDSALJFKASLJFKSFDAJ333FKFKDSAJFKSAJFKLASJKDFJ",
 		walletName: "Recipient in Ark",
-		formatted: "Recipient in Ark FAhFJKDSALJFK...SAJFKLASJKDFJ",
-		isInArkNetwork: true,
 	},
 ];
 
@@ -40,26 +36,14 @@ describe("AddRecipient", () => {
 
 	it("should render with multiple recipients tab", () => {
 		const { container } = render(
-			<AddRecipient
-				assetSymbol="ARK"
-				maxAvailableAmount={80}
-				availableAmount={0}
-				recipients={recipients}
-				isSingleRecipient={false}
-			/>,
+			<AddRecipient assetSymbol="ARK" maxAvailableAmount={80} availableAmount={0} isSingleRecipient={false} />,
 		);
 		expect(container).toMatchSnapshot();
 	});
 
 	it("should select recipient", () => {
 		const { getByTestId, getAllByTestId, container } = render(
-			<AddRecipient
-				assetSymbol="ARK"
-				maxAvailableAmount={80}
-				availableAmount={0}
-				recipients={recipients}
-				contacts={contacts}
-			/>,
+			<AddRecipient assetSymbol="ARK" maxAvailableAmount={80} availableAmount={0} contacts={contacts} />,
 		);
 
 		expect(() => getByTestId("modal__inner")).toThrow(/Unable to find an element by/);
@@ -86,7 +70,7 @@ describe("AddRecipient", () => {
 
 	it("should set available amount", async () => {
 		const { getByTestId, container } = render(
-			<AddRecipient assetSymbol="ARK" maxAvailableAmount={80} availableAmount={0} recipients={recipients} />,
+			<AddRecipient assetSymbol="ARK" maxAvailableAmount={80} availableAmount={0} />,
 		);
 		const sendAll = getByTestId("add-recipient__send-all");
 		const amountInput = getByTestId("add-recipient__amount-input");
@@ -123,7 +107,6 @@ describe("AddRecipient", () => {
 				assetSymbol="ARK"
 				maxAvailableAmount={80}
 				availableAmount={0}
-				recipients={recipients}
 				isSingleRecipient={false}
 				contacts={contacts}
 			/>,
@@ -159,7 +142,6 @@ describe("AddRecipient", () => {
 				assetSymbol="ARK"
 				maxAvailableAmount={80}
 				availableAmount={0}
-				recipients={recipients}
 				isSingleRecipient={false}
 				contacts={contacts}
 			/>,
@@ -202,13 +184,12 @@ describe("AddRecipient", () => {
 		});
 	});
 
-	it("should remove added recipient", async () => {
+	it("should add and remove recipient", async () => {
 		const { getByTestId, getAllByTestId, queryByText } = render(
 			<AddRecipient
 				assetSymbol="ARK"
 				maxAvailableAmount={80}
 				availableAmount={0}
-				recipients={recipients}
 				isSingleRecipient={false}
 				contacts={contacts}
 			/>,
@@ -221,21 +202,20 @@ describe("AddRecipient", () => {
 		});
 
 		expect(getByTestId("modal__inner")).toBeTruthy();
-		const firstAddress = getAllByTestId("ContactListItem__one-option-button-0")[0];
 
+		const firstAddress = getAllByTestId("ContactListItem__one-option-button-0")[0];
 		act(() => {
 			fireEvent.click(firstAddress);
 		});
 
-		const addedRecipientBtn1 = getByTestId("add-recipient__add-btn");
 		act(() => {
-			fireEvent.click(addedRecipientBtn1);
+			fireEvent.click(getByTestId("add-recipient__add-btn"));
 		});
 
-		const removeBtn = getByTestId("recipient-list__remove-recipient");
-		expect(removeBtn).toBeTruthy();
+		const removeBtn = getAllByTestId("recipient-list__remove-recipient");
+		expect(removeBtn[0]).toBeTruthy();
 		act(() => {
-			fireEvent.click(removeBtn);
+			fireEvent.click(removeBtn[0]);
 		});
 
 		const addedRecipient = queryByText("Recipient wallet");