feat: implement wallet transaction export (#92)

package.json

@@ -68,6 +68,7 @@
 		"locale-currency": "^0.0.2",
 		"multiformats": "^9.6.4",
 		"react": "^17.0.0",
+		"react-datepicker": "^4.8.0",
 		"react-dom": "^17.0.0",
 		"react-error-boundary": "^3.1.4",
 		"react-hook-form": "^6.15.5",
@@ -106,6 +107,7 @@
 		"@testing-library/user-event": "^13.5.0",
 		"@types/postcss-import": "^14.0.0",
 		"@types/react": "^17.0.0",
+		"@types/react-datepicker": "^4.4.2",
 		"@types/react-dom": "^17.0.0",
 		"@types/react-linkify": "^1.0.0",
 		"@types/react-router-config": "^5.0.6",
@@ -199,6 +201,7 @@
 				"locale-currency",
 				"multiformats",
 				"react",
+				"react-datepicker",
 				"react-dom",
 				"react-error-boundary",
 				"react-hook-form",

src/app/assets/images/index.ts

@@ -82,6 +82,10 @@ export const images = {
 		ErrorBannerDarkNavy,
 		ErrorBannerLightGreen,
 		ErrorBannerLightNavy,
+		ErrorDarkGreen: ErrorBannerDarkGreen,
+		ErrorDarkNavy: ErrorBannerDarkGreen,
+		ErrorLightGreen: ErrorBannerLightGreen,
+		ErrorLightNavy: ErrorBannerLightGreen,
 		GenericWarningDarkGreen,
 		GenericWarningDarkNavy,
 		GenericWarningLightGreen,
@@ -99,7 +103,11 @@ export const images = {
 		IOsInstructionsStep3LightBlue,
 		IOsInstructionsStep3LightGreen,
 		InfoDark,
+		InfoDarkGreen: InfoDark,
+		InfoDarkNavy: InfoDark,
 		InfoLight,
+		InfoLightGreen: InfoLight,
+		InfoLightNavy: InfoLight,
 		NoResultsDarkGreen,
 		NoResultsDarkNavy,
 		NoResultsLightGreen,
@@ -108,6 +116,10 @@ export const images = {
 		SuccessBannerDarkNavy,
 		SuccessBannerLightGreen,
 		SuccessBannerLightNavy,
+		SuccessDarkGreen: SuccessBannerDarkGreen,
+		SuccessDarkNavy: SuccessBannerDarkGreen,
+		SuccessLightGreen: SuccessBannerLightGreen,
+		SuccessLightNavy: SuccessBannerLightGreen,
 		TrashDark,
 		TrashLight,
 		WarningBannerDarkGreen,

src/app/assets/svg/index.ts

@@ -3,6 +3,7 @@ import { FC, SVGProps } from "react";
 import { ArrowIcons } from "./arrows";
 import { ReactComponent as Bell } from "./bell.svg";
 import { ReactComponent as Categories } from "./categories.svg";
+import { ReactComponent as Calendar } from "./calendar.svg";
 import { ReactComponent as ChartActiveDot } from "./chart-active-dot.svg";
 import { ReactComponent as Checkmark } from "./check-mark.svg";
 import { ReactComponent as CheckmarkSmall } from "./check-mark-small.svg";
@@ -27,6 +28,7 @@ import { ReactComponent as Dash } from "./dash.svg";
 import { ReactComponent as EllipsisVertical } from "./ellipsis-vertical.svg";
 import { ReactComponent as ExtensionWwe } from "./extension-wwe.svg";
 import { ReactComponent as ExtensionJson } from "./extension-json.svg";
+import { ReactComponent as ExtensionCsv } from "./extension-csv.svg";
 import { ReactComponent as Eye } from "./eye.svg";
 import { ReactComponent as EyeSlash } from "./eye-slash.svg";
 import { ReactComponent as File } from "./file.svg";
@@ -76,6 +78,7 @@ export const SvgCollection: Record<string, FC<SVGProps<SVGSVGElement>>> = {
 	...Currencies,
 	...TransactionIcons,
 	Bell,
+	Calendar,
 	Categories,
 	ChartActiveDot,
 	Checkmark,
@@ -100,6 +103,7 @@ export const SvgCollection: Record<string, FC<SVGProps<SVGSVGElement>>> = {
 	Delegate: TransactionIcons.DelegateRegistration,
 	Download,
 	EllipsisVertical,
+	ExtensionCsv,
 	ExtensionJson,
 	ExtensionWwe,
 	Eye,

src/app/components/Collapse/CollapseToggleButton.tsx

@@ -6,7 +6,7 @@ import { Icon } from "@/app/components/Icon";
 
 const ToggleIcon = styled.span<{ isOpen: boolean; isDisabled?: boolean }>`
 	${tw`inline-flex items-center justify-center rounded-full transition duration-200 md:bg-theme-primary-100 md:dark:bg-theme-secondary-800 text-theme-primary-600 dark:text-theme-secondary-200`}
-	${({ isOpen }) => (isOpen ? tw`bg-theme-primary-600 text-theme-primary-100 rotate-180` : "")}
+	${({ isOpen }) => (isOpen ? tw`md:bg-theme-primary-600 text-theme-primary-100 rotate-180` : "")}
 	${({ isDisabled }) =>
 		isDisabled
 			? tw`md:bg-theme-secondary-200 text-theme-secondary-400 md:dark:bg-theme-secondary-800 dark:text-theme-secondary-700`

src/app/components/Collapse/__snapshots__/CollapseToggleButton.test.tsx.snap

@@ -13,7 +13,7 @@ exports[`CollapseToggleButton should render disabled 1`] = `
       Hide
     </span>
     <span
-      class="css-145dqyl"
+      class="css-yuwh5q"
     >
       <div
         class="p-1 css-15txs7d"

src/app/components/Dropdown/Dropdown.contracts.ts

@@ -8,7 +8,7 @@ export interface DropdownOption {
 	iconClassName?: string | ((option: DropdownOption) => string);
 	iconSize?: Size;
 	label: string;
-	secondaryLabel?: string;
+	secondaryLabel?: string | Function;
 	value: string | number;
 	active?: boolean;
 	[key: string]: any;

src/app/components/Dropdown/Dropdown.helpers.tsx

@@ -34,7 +34,7 @@ const renderOptionGroup = ({ key, hasDivider, title, options, onSelect }: Dropdo
 	}
 
 	return (
-		<div key={key} className="mt-4 first:mt-0">
+		<div key={key} className={cn({ "mt-4": title || hasDivider })}>
 			{hasDivider && (
 				<div className="mx-8 -my-2">
 					<Divider className="border-theme-secondary-300 dark:border-theme-secondary-600" />
@@ -52,6 +52,14 @@ const renderOptionGroup = ({ key, hasDivider, title, options, onSelect }: Dropdo
 	);
 };
 
+const renderSecondaryLabel = (value: string | Function, isActive: boolean) => {
+	if (typeof value === "function") {
+		return value(isActive);
+	}
+
+	return value;
+};
+
 export const renderOptions = ({ options, key, onSelect }: OptionsProperties) => {
 	const onSelectItem = (event: React.MouseEvent | React.KeyboardEvent, option: DropdownOption) => {
 		event.preventDefault();
@@ -61,7 +69,7 @@ export const renderOptions = ({ options, key, onSelect }: OptionsProperties) =>
 
 	if (isOptionGroup(options)) {
 		return (
-			<div className="pt-5 pb-1">
+			<div className="py-1">
 				{(options as DropdownOptionGroup[]).map((optionGroup: DropdownOptionGroup) =>
 					renderOptionGroup({ ...optionGroup, onSelect }),
 				)}
@@ -90,7 +98,7 @@ export const renderOptions = ({ options, key, onSelect }: OptionsProperties) =>
 						{option.label}
 						{option.secondaryLabel && (
 							<span className="ml-1 text-theme-secondary-500 dark:text-theme-secondary-600">
-								{option.secondaryLabel}
+								{renderSecondaryLabel(option.secondaryLabel, !!option.active)}
 							</span>
 						)}
 					</span>

src/app/components/Dropdown/Dropdown.test.tsx

@@ -69,6 +69,26 @@ describe("Dropdown", () => {
 		expect(container).toContainHTML("option-1--class");
 	});
 
+	it("should render with secondary label", () => {
+		const optionsWithIcon = [
+			{
+				icon: "trash",
+				iconClassName: (option) => option.label + "--class",
+				label: "option-1",
+				secondaryLabel: () => "1",
+				value: "1",
+			},
+		];
+
+		const { container } = render(<Dropdown options={optionsWithIcon} />);
+
+		const dropdown = screen.getByTestId("dropdown__toggle");
+
+		userEvent.click(dropdown);
+
+		expect(container).toContainHTML("option-1--class");
+	});
+
 	it("should open dropdown options on icon click", () => {
 		render(<Dropdown options={options} />);
 		const toggle = screen.getByTestId("dropdown__toggle");
@@ -283,6 +303,7 @@ describe("Dropdown", () => {
 
 	it("should render dropdown group options with divider, icon and secondary label", () => {
 		const primaryOptions: DropdownOptionGroup = {
+			hasDivider: false,
 			key: "primary",
 			options: [
 				{
@@ -315,7 +336,6 @@ describe("Dropdown", () => {
 					value: "value 1.2",
 				},
 			],
-			title: "Secondary Options 1",
 		};
 		const { container } = render(<Dropdown options={[primaryOptions, secondaryOptions]} position="top-right" />);
 		const toggle = screen.getByTestId("dropdown__toggle");