Added min/max toasts

Author: mgavrila

src/common/Icon/Icon.tsx

@@ -6,6 +6,7 @@ import { AngleRightIcon } from './components/AngleRightIcon';
 import { AnglesLeftIcon } from './components/AnglesLeftIcon';
 import { AnglesRightIcon } from './components/AnglesRightIcon';
 import { AngleUpIcon } from './components/AngleUpIcon';
+import { ArrowRightIcon } from './components/ArrowRightIcon';
 import { ArrowsRotateIcon } from './components/ArrowsRotateIcon';
 import { ArrowUpRightFromSquareIcon } from './components/ArrowUpRightFromSquare';
 import { ArrowUpRightIcon } from './components/ArrowUpRightIcon';
@@ -22,11 +23,12 @@ import { CopyIcon } from './components/CopyIcon';
 import { HourglassIcon } from './components/HourglassIcon';
 import { LayersIcon } from './components/LayersIcon';
 import { LockIcon } from './components/LockIcon';
+import { MaximizeIcon } from './components/MaximizeIcon';
+import { MinimizeIcon } from './components/MinimizeIcon';
 import { PencilIcon } from './components/PencilIcon';
-import { TriangularWarningIcon } from './components/TriangularWarningIcon';
 import { SpinnerIcon } from './components/SpinnerIcon';
+import { TriangularWarningIcon } from './components/TriangularWarningIcon';
 import type { IconPropsType } from './icon.types';
-import { ArrowRightIcon } from './components/ArrowRightIcon';
 
 export const Icon = ({ name, ...properties }: IconPropsType) => {
   if (!name) {
@@ -107,10 +109,16 @@ export const Icon = ({ name, ...properties }: IconPropsType) => {
       return <ArrowsRotateIcon {...properties} />;
 
     case 'spinner':
-      return <SpinnerIcon />
+      return <SpinnerIcon />;
 
     case 'arrow-right':
-      return <ArrowRightIcon />
+      return <ArrowRightIcon />;
+
+    case 'minimize':
+      return <MinimizeIcon />;
+
+    case 'maximize':
+      return <MaximizeIcon />;
 
     default:
       console.error(`No data for the ${name} icon.`);

src/common/Icon/components/MaximizeIcon/MaximizeIcon.tsx

@@ -0,0 +1,21 @@
+import { h } from '@stencil/core';
+
+const styles = {
+  maximizeIcon: 'mvx:text-inherit',
+} satisfies Record<string, string>;
+
+export const MaximizeIcon = ({ class: className }: { class?: string }) => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    class={{ [styles.maximizeIcon]: true, [className]: Boolean(className) }}
+  >
+    <path
+      d="M10 5.28125L14.2812 1H11C10.7188 1 10.5 0.78125 10.5 0.5C10.5 0.25 10.7188 0 11 0H15.5C15.75 0 16 0.25 16 0.5V5C16 5.28125 15.75 5.5 15.5 5.5C15.2188 5.5 15 5.28125 15 5V1.71875L10.7188 6C10.5312 6.1875 10.1875 6.1875 10 6C9.8125 5.8125 9.8125 5.46875 10 5.28125ZM6 10.7188L1.6875 15H5C5.25 15 5.5 15.25 5.5 15.5C5.5 15.7812 5.25 16 5 16H0.5C0.21875 16 0 15.7812 0 15.5V11C0 10.75 0.21875 10.5 0.5 10.5C0.75 10.5 1 10.75 1 11V14.3125L5.28125 10C5.46875 9.8125 5.8125 9.8125 6 10C6.1875 10.1875 6.1875 10.5312 6 10.7188Z"
+      fill="white"
+    />
+  </svg>
+);

src/common/Icon/components/MaximizeIcon/index.ts

@@ -0,0 +1 @@
+export * from './MaximizeIcon';

src/common/Icon/components/MinimizeIcon/MinimizeIcon.tsx

@@ -0,0 +1,25 @@
+import { h } from '@stencil/core';
+
+const styles = {
+  minimizeIcon: 'mvx:text-inherit',
+} satisfies Record<string, string>;
+
+export const MinimizeIcon = ({ class: className }: { class?: string }) => (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    class={{ [styles.minimizeIcon]: true, [className]: Boolean(className) }}
+  >
+    <path
+      d="M2.57031 16.7111L6.88281 12.4298L3.57031 12.4298C3.32031 12.4298 3.07031 12.1798 3.07031 11.9298C3.07031 11.6486 3.32031 11.4298 3.57031 11.4298L8.07031 11.4298C8.35156 11.4298 8.57031 11.6486 8.57031 11.9298L8.57031 16.4298C8.57031 16.6798 8.35156 16.9298 8.07031 16.9298C7.82031 16.9298 7.57031 16.6798 7.57031 16.4298L7.57031 13.1173L3.28906 17.4298C3.10156 17.6173 2.75781 17.6173 2.57031 17.4298C2.38281 17.2423 2.38281 16.8986 2.57031 16.7111Z"
+      fill="white"
+    />
+    <path
+      d="M17.4297 3.28894L13.1484 7.57019L16.4297 7.57019C16.7109 7.57019 16.9297 7.78894 16.9297 8.07019C16.9297 8.32019 16.7109 8.57019 16.4297 8.57019L11.9297 8.57019C11.6797 8.57019 11.4297 8.32019 11.4297 8.07019V3.57019C11.4297 3.28894 11.6797 3.07019 11.9297 3.07019C12.2109 3.07019 12.4297 3.28894 12.4297 3.57019V6.85144L16.7109 2.57019C16.8984 2.38269 17.2422 2.38269 17.4297 2.57019C17.6172 2.75769 17.6172 3.10144 17.4297 3.28894Z"
+      fill="white"
+    />
+  </svg>
+);

src/common/Icon/components/MinimizeIcon/index.ts

@@ -0,0 +1 @@
+export * from './MinimizeIcon';

src/common/Icon/icon.types.ts

@@ -26,7 +26,9 @@ export enum IconNamesEnum {
   coins = 'coins',
   arrowsRotate = 'arrows-rotate',
   spinner = 'spinner',
-  arrowRight = 'arrow-right'
+  arrowRight = 'arrow-right',
+  minimize = 'minimize',
+  maximize = 'maximize',
 }
 
 export type IconPropsType = JSXBase.IntrinsicElements['svg'] & {

src/components/functional/toasts-list/toast-list.scss

@@ -18,16 +18,19 @@
 }
 
 .view-all-button-container {
-  @apply mvx:absolute mvx:-bottom-12 mvx:right-0 mvx:z-1;
+  @apply mvx:absolute mvx:-bottom-12 mvx:right-0 mvx:z-1 mvx:flex;
 }
 
+.minimize-button,
+.maximize-button,
 .view-all-button {
   @apply mvx:backdrop-blur-2xl mvx:py-2 mvx:px-4 mvx:text-base mvx:font-normal mvx:leading-6 mvx:cursor-pointer;
   @apply mvx:ease-in-out mvx:transition-opacity mvx:duration-200;
   border-radius: 100px;
   border: 2px solid var(--mvx-border-color-secondary);
   background: var(--mvx-bg-color-primary);
   color: var(--mvx-text-color-primary);
+  min-height: 44px;
 
   &:hover {
     @apply mvx:opacity-80;

src/components/functional/toasts-list/toast-list.tsx

@@ -1,4 +1,6 @@
 import { Component, h, Method, State } from '@stencil/core';
+import { Icon } from 'common/Icon';
+import { IconNamesEnum } from 'common/Icon/icon.types';
 import { ConnectionMonitor } from 'utils/ConnectionMonitor';
 import type { IEventBus } from 'utils/EventBus';
 import { EventBus } from 'utils/EventBus';
@@ -18,6 +20,7 @@ export class ToastList {
   @State() transactionToasts: ITransactionToast[] = [];
   @State() customToasts: CustomToastType[] = [];
   @State() isVisible: boolean = true;
+  @State() isMinimized: boolean = false;
 
   @Method()
   async getEventBus() {
@@ -80,24 +83,40 @@ export class ToastList {
     this.customToasts = [...payload];
   };
 
+  private readonly toggleMinimize = () => {
+    this.isMinimized = !this.isMinimized;
+  };
+
   private resetState() {
     this.transactionToasts = [];
     this.customToasts = [];
     this.isVisible = true;
+    this.isMinimized = false;
   }
 
   render() {
     const hasTransactionToasts = this.transactionToasts?.length > 0;
 
+    const toastListClasses = {
+      'toast-list': true,
+      'toast-list-bottom': hasTransactionToasts,
+      'hidden': !this.isVisible,
+    };
+
+    if (this.isMinimized && hasTransactionToasts) {
+      return (
+        <div class={toastListClasses} id="toast-list">
+          <div class="view-all-button-container">
+            <button class="maximize-button" onClick={this.toggleMinimize} aria-label="Maximize Toasts">
+              <Icon name={IconNamesEnum.maximize} />
+            </button>
+          </div>
+        </div>
+      );
+    }
+
     return (
-      <div
-        class={{
-          'toast-list': true,
-          'toast-list-bottom': hasTransactionToasts,
-          'hidden': !this.isVisible,
-        }}
-        id="toast-list"
-      >
+      <div class={toastListClasses} id="toast-list">
         {this.customToasts?.map(toast => (
           <mvx-generic-toast toast={toast} onDeleteToast={() => this.handleCustomToastDelete(toast.toastId)} />
         ))}
@@ -108,6 +127,9 @@ export class ToastList {
 
         {hasTransactionToasts && (
           <div class="view-all-button-container">
+            <button class="minimize-button" onClick={this.toggleMinimize} aria-label="Minimize Toasts">
+              <Icon name={IconNamesEnum.minimize} />
+            </button>
             <button class="view-all-button" onClick={this.handleViewAllClick}>
               View All
             </button>