refactor: handle from/to addresses in multiview (mobile views)

src/domains/dashboard/pages/Dashboard/Dashboard.tsx

@@ -153,6 +153,7 @@ export const Dashboard = () => {
 							isLoading={profileIsSyncing}
 							isUpdatingWallet={isUpdatingWallet}
 							onLoading={setIsUpdatingTransactions}
+							selectedWallets={selectedWallets.length}
 						/>
 					</div>
 				</Section>

src/domains/portfolio/components/PortfolioHeader/PortfolioHeader.blocks.tsx

@@ -34,7 +34,7 @@ export const ViewingAddressInfo = ({
 	}
 
 	return (
-		<div className="dark:textdark-theme-dark-navy-400 text-base text-sm font-semibold leading-[17px] text-theme-primary-600 sm:text-base sm:leading-5">
+		<div className="dark:textdark-theme-dark-navy-400 text-sm font-semibold leading-[17px] text-theme-primary-600 sm:text-base sm:leading-5">
 			{t("COMMON.MULTIPLE_ADDRESSES", {
 				count: wallets.length,
 			})}

src/domains/transaction/components/TransactionTable/TransactionRow/TransactionRow.contracts.ts

@@ -7,4 +7,5 @@ export type TransactionRowProperties = {
 	onClick?: () => void;
 	isLoading?: boolean;
 	profile: Contracts.IProfile;
+	hideSender?: boolean;
 } & React.HTMLProps<any>;

src/domains/transaction/components/TransactionTable/TransactionRow/TransactionRow.test.tsx

@@ -11,6 +11,7 @@ let profile: Contracts.IProfile;
 describe("TransactionRow", () => {
 	const fixture = {
 		...TransactionFixture,
+		isSuccess: () => true,
 		wallet: () => ({
 			...TransactionFixture.wallet(),
 			currency: () => "DARK",
@@ -42,11 +43,11 @@ describe("TransactionRow", () => {
 		);
 
 		expect(asFragment()).toMatchSnapshot();
-		expect(screen.getAllByRole("cell")).toHaveLength(6);
+		expect(screen.getAllByRole("cell")).toHaveLength(7);
 		expect(screen.getByTestId("TransactionRow__id")).toBeInTheDocument();
 		expect(screen.getByTestId("TransactionRow__timestamp")).toBeInTheDocument();
 		expect(screen.getByTestId("TransactionRow__type")).toBeInTheDocument();
-		expect(screen.getAllByTestId("Address__address")).toHaveLength(1);
+		expect(screen.getAllByTestId("Address__address")).toHaveLength(3);
 		expect(screen.getAllByTestId("Amount")).toHaveLength(3);
 	});
 
@@ -68,9 +69,8 @@ describe("TransactionRow", () => {
 		expect(asFragment()).toMatchSnapshot();
 		expect(screen.getByTestId("TableRow__mobile")).toBeInTheDocument();
 		expect(screen.getAllByRole("cell")).toHaveLength(1);
-		expect(screen.getByRole("link", { name: "ea63b…5c79b" })).toBeInTheDocument();
 		expect(screen.getByTestId("TransactionRow__timestamp")).toBeInTheDocument();
-		expect(screen.getAllByTestId("Address__address")).toHaveLength(1);
+		expect(screen.getAllByTestId("Address__address")).toHaveLength(2);
 		expect(screen.getAllByTestId("Amount")).toHaveLength(2);
 	});
 

src/domains/transaction/components/TransactionTable/TransactionRow/TransactionRow.tsx

@@ -15,6 +15,7 @@ import { TransactionRowAddressing } from "./TransactionRowAddressing";
 import { Amount } from "@/app/components/Amount";
 import { TransactionTotalLabel, TransactionFiatAmount } from "./TransactionAmount.blocks";
 import { TransactionRowId } from "./TransactionRowId";
+import cn from "classnames";
 
 export const TransactionRow = memo(
 	({
@@ -24,6 +25,7 @@ export const TransactionRow = memo(
 		onClick,
 		isLoading = false,
 		profile,
+		hideSender = false,
 		...properties
 	}: TransactionRowProperties) => {
 		const { getLabel } = useTransactionTypes();
@@ -38,6 +40,7 @@ export const TransactionRow = memo(
 					transaction={transaction}
 					exchangeCurrency={exchangeCurrency}
 					profile={profile}
+					hideSender={hideSender}
 				/>
 			);
 		}
@@ -52,7 +55,10 @@ export const TransactionRow = memo(
 			<TableRow onClick={onClick} className={twMerge("relative", className)} {...properties}>
 				<TableCell
 					variant="start"
-					innerClassName="items-start py-1 my-1 pr-0 lg:pr-3 min-h-14 xl:min-h-11 xl:max-h-11 xl:pt-2.5"
+					innerClassName={cn("items-start pr-0 lg:pr-3 xl:min-h-11 xl:max-h-11 xl:pt-2.5", {
+						"min-h-14 my-1 pt-1": hideSender,
+						"min-h-[66px] py-2 my-0": !hideSender,
+					})}
 				>
 					<div className="flex flex-col gap-1 font-semibold">
 						<TransactionRowId transaction={transaction} />
@@ -78,7 +84,12 @@ export const TransactionRow = memo(
 					)}
 				</TableCell>
 
-				<TableCell innerClassName="items-start my-1 pt-2 min-h-14 xl:min-h-11 xl:pt-3">
+				<TableCell
+					innerClassName={cn("items-start xl:min-h-11 xl:pt-3", {
+						"min-h-14 my-1 pt-2": hideSender,
+						"min-h-[66px] py-2 my-0": !hideSender,
+					})}
+				>
 					<Label
 						color="secondary"
 						size="xs"
@@ -90,8 +101,37 @@ export const TransactionRow = memo(
 					</Label>
 				</TableCell>
 
-				<TableCell innerClassName="space-x-4 items-start min-h-14 my-1 pt-2 px-0 lg:px-3 xl:pt-3 xl:min-h-11">
-					<TransactionRowAddressing transaction={transaction} profile={profile} />
+				<TableCell
+					className={cn({
+						hidden: hideSender,
+					})}
+					innerClassName={cn("space-x-4 items-start px-0 lg:px-3 xl:pt-3 xl:min-h-11", {
+						"min-h-16 my-1 py-2": !hideSender,
+					})}
+				>
+					<div className="flex flex-col gap-2">
+						<TransactionRowAddressing
+							transaction={transaction}
+							profile={profile}
+							isAdvanced
+							variant="sender"
+						/>
+						<TransactionRowAddressing
+							transaction={transaction}
+							profile={profile}
+							isAdvanced
+							variant="recipient"
+						/>
+					</div>
+				</TableCell>
+
+				<TableCell
+					className={cn({
+						hidden: !hideSender,
+					})}
+					innerClassName="space-x-4 items-start my-1 pt-2 px-0 lg:px-3 xl:pt-3 xl:min-h-11 min-h-14 pt-2 mt-1"
+				>
+					<TransactionRowAddressing transaction={transaction} profile={profile} isAdvanced={false} />
 				</TableCell>
 
 				<TableCell
@@ -111,12 +151,18 @@ export const TransactionRow = memo(
 
 				<TableCell
 					variant="end"
-					innerClassName="justify-end items-start text-sm text-theme-secondary-900 dark:text-theme-secondary-200 font-semibold min-h-14 pt-2 xl:min-h-11 xl:my-0 xl:pt-3"
+					innerClassName={cn(
+						"justify-end items-start text-sm text-theme-secondary-900 dark:text-theme-secondary-200 font-semibold xl:min-h-11 xl:my-0 xl:pt-3",
+						{
+							"min-h-14 my-1 pt-2": hideSender,
+							"min-h-[66px] py-2 my-0": !hideSender,
+						},
+					)}
 				>
 					{isLgAndAbove ? (
 						<Amount value={transaction.convertedTotal()} ticker={exchangeCurrency || ""} />
 					) : (
-						<div className="flex flex-col items-end gap-1">
+						<div className="flex w-40 flex-col items-end gap-1">
 							<TransactionTotalLabel transaction={transaction} />
 							<span
 								className="text-xs font-semibold text-theme-secondary-700 lg:hidden"

src/domains/transaction/components/TransactionTable/TransactionRow/TransactionRowAddressing.test.tsx

@@ -1,14 +1,18 @@
 import { Contracts } from "@ardenthq/sdk-profiles";
 import React from "react";
 import { env, getDefaultProfileId, render, screen } from "@/utils/testing-library";
-import { TransactionRowAddressing } from "./TransactionRowAddressing";
+import { TransactionRowAddressing, TransactionRowLabel } from "./TransactionRowAddressing";
 import { TransactionFixture } from "@/tests/fixtures/transactions";
 
 describe("TransactionRowAddressing", () => {
 	let profile: Contracts.IProfile;
 	const fixture = {
 		...TransactionFixture,
-		wallet: () => ({ ...TransactionFixture.wallet(), currency: () => "DARK" }),
+		wallet: () => ({
+			...TransactionFixture.wallet(),
+			coin: () => ({ link: () => ({ wallet: () => ({ address: () => "D61mfSggzbvQgTUe6JhYKH2doHaqJ3Dyib" }) }) }),
+			currency: () => "DARK",
+		}),
 	};
 
 	beforeAll(() => {
@@ -25,6 +29,7 @@ describe("TransactionRowAddressing", () => {
 		render(<TransactionRowAddressing transaction={voteFixture as any} profile={profile} />);
 
 		expect(screen.queryAllByTestId("TransactionRowAddressing__vote")).toHaveLength(1);
+		expect(screen.getByText("Contract")).toBeInTheDocument();
 
 		const unvoteFixture = { ...fixture, isUnvote: () => true, isVote: () => false };
 		render(<TransactionRowAddressing transaction={unvoteFixture as any} profile={profile} />);
@@ -36,28 +41,24 @@ describe("TransactionRowAddressing", () => {
 		const registrationFixture = { ...fixture, isDelegateRegistration: () => true, username: () => "test" };
 		render(<TransactionRowAddressing transaction={registrationFixture as any} profile={profile} />);
 
-		expect(screen.getByTestId("TransactionRowAddressing__validator_registration")).toBeInTheDocument();
+		expect(screen.getByTestId("TransactionRowAddressing__vote")).toBeInTheDocument();
 	});
 
 	it("should render resignation variant if transaction is validator resignation", () => {
 		const resignationFixture = {
 			...fixture,
 			isDelegateResignation: () => true,
-			wallet: () => ({ ...TransactionFixture.wallet(), username: () => "test" }),
+			wallet: () => ({
+				...TransactionFixture.wallet(),
+				coin: () => ({
+					link: () => ({ wallet: () => ({ address: () => "D61mfSggzbvQgTUe6JhYKH2doHaqJ3Dyib" }) }),
+				}),
+				username: () => "test",
+			}),
 		};
 		render(<TransactionRowAddressing transaction={resignationFixture as any} profile={profile} />);
 
-		expect(screen.getByTestId("TransactionRowAddressing__validator_resignation")).toBeInTheDocument();
-	});
-
-	it("should render as to-contract if transaction is musig registration", () => {
-		const resignationFixture = {
-			...fixture,
-			isMultiSignatureRegistration: () => true,
-		};
-		render(<TransactionRowAddressing transaction={resignationFixture as any} profile={profile} />);
-
-		expect(screen.getByTestId("TransactionRowAddressing__musig_registration")).toBeInTheDocument();
+		expect(screen.getByTestId("TransactionRowAddressing__vote")).toBeInTheDocument();
 	});
 
 	it("should render multipayment variant", () => {
@@ -107,4 +108,92 @@ describe("TransactionRowAddressing", () => {
 
 		expect(screen.getByTestId("TransactionRowAddressing__address-container")).not.toHaveClass("w-30");
 	});
+
+	it("should render advanced sender variant if the props isAdvanced is true and variant is start", () => {
+		render(
+			<TransactionRowAddressing
+				transaction={fixture as any}
+				profile={profile}
+				isAdvanced={true}
+				variant="sender"
+			/>,
+		);
+
+		expect(screen.getByTestId("TransactionRowAddressing__container_advanced_sender")).toBeInTheDocument();
+	});
+
+	it("should render the sender address if the transaction is sent", () => {
+		const sentFixture = { ...fixture, isSent: () => true, sender: () => "DMFzWa3nHt9T1ChXdMwFrBZRTfKMjDyNss" };
+		render(
+			<TransactionRowAddressing
+				transaction={sentFixture as any}
+				profile={profile}
+				isAdvanced={true}
+				variant="sender"
+			/>,
+		);
+
+		expect(screen.getByTestId("TransactionRowAddressing__container_advanced_sender")).toHaveTextContent(
+			"DMFzWa3nHt9T1ChXdMwFrBZRTfKMjDyNss",
+		);
+	});
+
+	it("should render advanced recipient variant if the props isAdvanced is true and variant is recipient", () => {
+		render(
+			<TransactionRowAddressing
+				transaction={fixture as any}
+				profile={profile}
+				isAdvanced={true}
+				variant="recipient"
+			/>,
+		);
+
+		expect(screen.getByTestId("TransactionRowAddressing__container_advanced_recipient")).toBeInTheDocument();
+	});
+
+	it("should render multipayment variant with return style if the variant is recipient and isAdvanced is true", () => {
+		render(
+			<TransactionRowAddressing transaction={fixture as any} profile={profile} isAdvanced variant="recipient" />,
+		);
+
+		expect(screen.getByTestId("TransactionRowAddressing__label")).toHaveClass("bg-theme-secondary-200");
+		expect(screen.getByTestId("TransactionRowAddressing__label")).toHaveTextContent("To");
+	});
+
+	it("should render multipayment variant with default styles if isAdvanced is false", () => {
+		render(<TransactionRowAddressing transaction={fixture as any} profile={profile} isAdvanced={false} />);
+
+		expect(screen.getByTestId("TransactionRowAddressing__label")).not.toHaveClass("bg-theme-secondary-200");
+		expect(screen.getByTestId("TransactionRowAddressing__label")).toHaveTextContent("To");
+	});
+
+	it("should set direction as 'return' when transaction isReturn is true", () => {
+		const returnFixture = { ...fixture, isReturn: () => true };
+		render(<TransactionRowAddressing transaction={returnFixture as any} profile={profile} />);
+
+		expect(screen.getByTestId("TransactionRowAddressing__label")).toHaveTextContent("Return");
+	});
+
+	it("should render vote advanced variant if transaction is a contract transaction and isAdvanced is true", () => {
+		const voteFixture = { ...fixture, isVote: () => true };
+		render(
+			<TransactionRowAddressing
+				transaction={voteFixture as any}
+				profile={profile}
+				isAdvanced={true}
+				variant="recipient"
+			/>,
+		);
+
+		expect(screen.getByTestId("TransactionRowAddressing__vote_advanced_recipient")).toBeInTheDocument();
+		expect(screen.getByText("Contract")).toBeInTheDocument();
+	});
+});
+
+describe("TransactionRowLabel", () => {
+	it("should render prioritizing style prop over direction prop", () => {
+		render(<TransactionRowLabel direction="received" style="return" />);
+
+		expect(screen.getByTestId("TransactionRowAddressing__label")).toHaveClass("bg-theme-secondary-200");
+	});
 });