feat: add side panel component

src/app/components/SidePanel/SidePanel.test.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+import { SidePanel } from "./SidePanel";
+import userEvent from "@testing-library/user-event";
+import { render, screen } from "@testing-library/react";
+
+describe("SidePanel", () => {
+	it("should render string header", () => {
+		render(
+			<SidePanel open={true} onOpenChange={vi.fn()} header="side panel header">
+				{" "}
+				panel body{" "}
+			</SidePanel>,
+		);
+
+		expect(screen.getByText("side panel header")).toBeInTheDocument();
+	});
+
+	it("should render component header", () => {
+		render(
+			<SidePanel open={true} onOpenChange={vi.fn()} header={<div>side panel header</div>}>
+				{" "}
+				panel body{" "}
+			</SidePanel>,
+		);
+
+		expect(screen.getByText("side panel header")).toBeInTheDocument();
+	});
+
+	it("should render body", () => {
+		render(
+			<SidePanel open={true} onOpenChange={vi.fn()}>
+				{" "}
+				panel body{" "}
+			</SidePanel>,
+		);
+
+		expect(screen.getByText("panel body")).toBeInTheDocument();
+	});
+
+	it("should close the panel", async () => {
+		const onOpenChangeMock = vi.fn();
+		render(
+			<SidePanel open={true} onOpenChange={onOpenChangeMock}>
+				{" "}
+				panel body{" "}
+			</SidePanel>,
+		);
+
+		expect(screen.getByText("panel body")).toBeInTheDocument();
+
+		await userEvent.click(screen.getByTestId("SidePanel__close-button"));
+
+		expect(onOpenChangeMock).toHaveBeenCalledWith(false);
+	});
+});

src/app/components/SidePanel/SidePanel.tsx

@@ -0,0 +1,100 @@
+import {
+	FloatingFocusManager,
+	FloatingOverlay,
+	FloatingPortal,
+	useClick,
+	useDismiss,
+	useFloating,
+	useInteractions,
+	useRole,
+	useTransitionStyles,
+} from "@floating-ui/react";
+import React from "react";
+import { Button } from "@/app/components/Button";
+import { Icon } from "@/app/components/Icon";
+
+interface SidePanelProps {
+	children: React.ReactNode;
+	open: boolean;
+	onOpenChange: (open: boolean) => void;
+	header?: React.ReactNode | string;
+	dataTestId?: string;
+}
+
+export const SidePanel = ({ children, open, onOpenChange, header, dataTestId }: SidePanelProps): JSX.Element => {
+	const { refs, context } = useFloating({
+		onOpenChange,
+		open,
+	});
+
+	const click = useClick(context);
+	const role = useRole(context);
+	const dismiss = useDismiss(context, { outsidePressEvent: "mousedown" });
+
+	const { getFloatingProps } = useInteractions([click, role, dismiss]);
+
+	const { isMounted, styles } = useTransitionStyles(context, {
+		close: {
+			transform: "translateX(100%)",
+			transition: "transform 300ms ease-in",
+		},
+		common: {
+			transformOrigin: "right",
+		},
+		duration: 350,
+		initial: {
+			transform: "translateX(100%)",
+		},
+		open: {
+			transform: "translateX(0%)",
+			transition: "transform 300ms ease-out",
+		},
+	});
+
+	return (
+		<>
+			<FloatingPortal>
+				{isMounted && (
+					<FloatingOverlay
+						className="z-50 bg-theme-secondary-900-rgba/40 transition-opacity duration-300 dark:bg-black-rgba/40 dark:bg-opacity-80"
+						lockScroll
+					>
+						<FloatingFocusManager context={context}>
+							<div
+								data-testid={dataTestId}
+								className="Dialog"
+								ref={refs.setFloating}
+								{...getFloatingProps()}
+							>
+								<div
+									style={{ ...styles }}
+									className="custom-scroll fixed right-0 top-0 h-screen w-full overflow-y-scroll bg-theme-background p-4 text-theme-text shadow-[0_15px_35px_0px_rgba(33,34,37,0.08)] md:w-[512px] md:p-8"
+								>
+									<div className="relative mb-4 flex items-center justify-between">
+										{typeof header === "string" ? (
+											<h2 className="mb-0 text-lg font-bold md:pt-0 md:text-2xl">{header}</h2>
+										) : (
+											<>{header}</>
+										)}
+										<div className="h-8 w-8 rounded bg-theme-primary-100 transition-all duration-100 ease-linear hover:bg-theme-primary-800 hover:text-white green:hover:bg-theme-primary-700 dark:bg-theme-secondary-800 dark:text-theme-secondary-200 dark:hover:bg-theme-primary-500 dark:hover:text-white">
+											<Button
+												data-testid="SidePanel__close-button"
+												variant="transparent"
+												size="icon"
+												onClick={() => onOpenChange(false)}
+												className="h-8 w-8"
+											>
+												<Icon name="Cross" />
+											</Button>
+										</div>
+									</div>
+									<div>{children}</div>
+								</div>
+							</div>
+						</FloatingFocusManager>
+					</FloatingOverlay>
+				)}
+			</FloatingPortal>
+		</>
+	);
+};

src/domains/wallet/pages/WalletDetails/components/WalletHeader/WalletHeader.test.tsx

@@ -4,7 +4,10 @@ import { createHashHistory } from "history";
 
 import { WalletHeader } from "./WalletHeader";
 import * as envHooks from "@/app/hooks/env";
-import { env, getDefaultProfileId, renderResponsiveWithRoute, screen } from "@/utils/testing-library";
+import { env, getDefaultProfileId, render, renderResponsiveWithRoute, screen } from "@/utils/testing-library";
+import userEvent from "@testing-library/user-event";
+import { expect } from "vitest";
+import { waitFor } from "@testing-library/react";
 
 const history = createHashHistory();
 
@@ -67,4 +70,77 @@ describe("WalletHeader", () => {
 
 		await expect(screen.getByTestId("EmptyVotes")).toBeVisible();
 	});
+
+	it("should show addresses panel when address clicked", async () => {
+		render(
+			<WalletHeader
+				profile={profile}
+				wallet={wallet}
+				votes={votes}
+				isLoadingVotes={false}
+				handleVotesButtonClick={vi.fn()}
+				isUpdatingTransactions={false}
+			/>,
+			{
+				history,
+				route: walletUrl,
+			},
+		);
+
+		await expect(screen.findByText(wallet.address())).resolves.toBeVisible();
+
+		await userEvent.click(screen.getByTestId("ShowAddressesPanel"));
+
+		await expect(screen.findByTestId("AddressesSidePanel")).resolves.toBeVisible();
+	});
+
+	it("should show addresses panel when enter key pressed", async () => {
+		render(
+			<WalletHeader
+				profile={profile}
+				wallet={wallet}
+				votes={votes}
+				isLoadingVotes={false}
+				handleVotesButtonClick={vi.fn()}
+				isUpdatingTransactions={false}
+			/>,
+			{
+				history,
+				route: walletUrl,
+			},
+		);
+
+		await expect(screen.findByText(wallet.address())).resolves.toBeVisible();
+
+		await userEvent.type(screen.getByTestId("ShowAddressesPanel"), "{Enter}");
+
+		await expect(screen.findByTestId("AddressesSidePanel")).resolves.toBeVisible();
+	});
+
+	it("should close the addresses panel when close button clicked", async () => {
+		render(
+			<WalletHeader
+				profile={profile}
+				wallet={wallet}
+				votes={votes}
+				isLoadingVotes={false}
+				handleVotesButtonClick={vi.fn()}
+				isUpdatingTransactions={false}
+			/>,
+			{
+				history,
+				route: walletUrl,
+			},
+		);
+
+		await expect(screen.findByText(wallet.address())).resolves.toBeVisible();
+
+		await userEvent.click(screen.getByTestId("ShowAddressesPanel"));
+
+		await expect(screen.findByTestId("AddressesSidePanel")).resolves.toBeVisible();
+
+		await userEvent.click(screen.getByTestId("SidePanel__close-button"));
+
+		await waitFor(() => expect(screen.queryByTestId("AddressesSidePanel")).not.toBeInTheDocument());
+	});
 });

src/domains/wallet/pages/WalletDetails/components/WalletHeader/WalletHeader.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { Address } from "@/app/components/Address";
 import { Button } from "@/app/components/Button";
 import { Divider } from "@/app/components/Divider";
@@ -16,6 +16,7 @@ import { Copy } from "@/app/components/Copy";
 import { Clipboard } from "@/app/components/Clipboard";
 import { WalletVote } from "@/domains/wallet/pages/WalletDetails/components/WalletVote/WalletVote";
 import { WalletActions } from "./WalletHeader.blocks";
+import { SidePanel } from "@/app/components/SidePanel/SidePanel";
 
 export const WalletHeader = ({
 	profile,
@@ -45,6 +46,8 @@ export const WalletHeader = ({
 		profile,
 	});
 
+	const [showAddressesPanel, setShowAddressesPanel] = useState(false);
+
 	return (
 		<header data-testid="WalletHeader" className="lg:container md:px-10 md:pt-8">
 			<div className="flex flex-col gap-3 bg-theme-primary-100 px-2 pb-2 pt-3 dark:bg-theme-dark-950 sm:gap-2 md:rounded-xl">
@@ -53,13 +56,21 @@ export const WalletHeader = ({
 						<p className="hidden text-base font-semibold leading-5 text-theme-secondary-900 dark:text-theme-dark-50 sm:block">
 							{t("COMMON.VIEWING")}:
 						</p>
-						<Address
-							alignment="center"
-							walletName={alias}
-							truncateOnTable
-							maxNameChars={20}
-							walletNameClass="text-theme-primary-600 text-sm leading-[17px] sm:text-base sm:leading-5 dark:textdark-theme-dark-navy-400"
-						/>
+						<div
+							onClick={() => setShowAddressesPanel(true)}
+							tabIndex={0}
+							onKeyPress={() => setShowAddressesPanel(true)}
+							className="cursor-pointer"
+							data-testid="ShowAddressesPanel"
+						>
+							<Address
+								alignment="center"
+								walletName={alias}
+								truncateOnTable
+								maxNameChars={20}
+								walletNameClass="text-theme-primary-600 text-sm leading-[17px] sm:text-base sm:leading-5 dark:textdark-theme-dark-navy-400"
+							/>
+						</div>
 					</div>
 					<div className="flex flex-row items-center gap-1">
 						<Button
@@ -221,6 +232,15 @@ export const WalletHeader = ({
 					</div>
 				</div>
 			</div>
+
+			<SidePanel
+				header="Addresses"
+				open={showAddressesPanel}
+				onOpenChange={setShowAddressesPanel}
+				dataTestId="AddressesSidePanel"
+			>
+				this is a body
+			</SidePanel>
 		</header>
 	);
 };