Added custom notification support

CHANGELOG.md

@@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+- [Added custom notification support](https://github.com/multiversx/mx-sdk-dapp-core-ui/pull/21)
+
 ## [[0.0.0-alpha.1](https://github.com/multiversx/mx-sdk-dapp-core-ui/pull/16)] - 2025-01-20
 
 - [Updated formatAmount component and removed dependencies](https://github.com/multiversx/mx-sdk-dapp-core-ui/pull/17)
-- [Updated formatAmount component](https://github.com/multiversx/mx-sdk-dapp-core-ui/pull/15)
+- [Updated formatAmount component](https://github.com/multiversx/mx-sdk-dapp-core-ui/pull/15)

src/assets/notification.js

@@ -67,7 +67,7 @@ function showNotification() {
   newToast.toastId = notificationId.toString();
   newToast.transactions = [{ hash: 'erd1...8ctr', status: 'success' }];
 
-  const transactionListElement = document.getElementById('transaction-list');
+  const transactionListElement = document.getElementById('toast-list');
   if (transactionListElement) {
     transactionListElement.appendChild(newToast);
   }

src/components/format-amount/format-amount.tsx

@@ -4,7 +4,7 @@ import { DataTestIdsEnum } from 'constants/dataTestIds.enum';
 @Component({
   tag: 'format-amount',
   styleUrl: 'format-amount.css',
-  shadow: true
+  shadow: true,
 })
 export class FormatAmount {
   @Prop() class?: string;
@@ -15,15 +15,14 @@ export class FormatAmount {
   @Prop() valueDecimal: string;
   @Prop() valueInteger: string;
 
-
   render() {
     return this.isValid ? this.renderValid() : this.renderInvalid();
   }
 
   private renderInvalid() {
     return (
       <span data-testid={this.dataTestId} class={this.class}>
-        <span class='int-amount' data-testid={DataTestIdsEnum.formatAmountInt}>
+        <span class="int-amount" data-testid={DataTestIdsEnum.formatAmountInt}>
           ...
         </span>
       </span>
@@ -33,19 +32,19 @@ export class FormatAmount {
   private renderValid() {
     return (
       <span data-testid={this.dataTestId} class={this.class}>
-        <span class='int-amount' data-testid={DataTestIdsEnum.formatAmountInt}>
+        <span class="int-amount" data-testid={DataTestIdsEnum.formatAmountInt}>
           {this.valueInteger}
         </span>
         {this.valueDecimal && (
-          <span class='decimals' data-testid={DataTestIdsEnum.formatAmountDecimals}>
+          <span class="decimals" data-testid={DataTestIdsEnum.formatAmountDecimals}>
             .{this.valueDecimal}
           </span>
         )}
         {this.label && (
           <span
             class={{
-              'symbol': true,
-              [this.labelClass]: Boolean(this.labelClass)
+              symbol: true,
+              [this.labelClass]: Boolean(this.labelClass),
             }}
             data-testid={DataTestIdsEnum.formatAmountSymbol}
           >
@@ -55,5 +54,4 @@ export class FormatAmount {
       </span>
     );
   }
-
 }

src/components/toasts-list/components/custom-toast/components/custom-create-toast/custom-toast.css

@@ -0,0 +1,35 @@
+.toast-wrapper {
+  border-radius: 0.25rem;
+  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
+  margin-bottom: 0.7rem;
+  padding: 0.5rem;
+  background-color: #fff;
+  position: relative;
+}
+
+.icon-close {
+  position: absolute;
+  right: 16px;
+  top: 16px;
+  cursor: pointer;
+  font-size: 1.5rem;
+  font-weight: 700;
+  line-height: 1;
+  color: #000;
+  text-shadow: 0 1px 0 #fff;
+  opacity: 0.5;
+  padding: 0;
+  background-color: rgba(0, 0, 0, 0);
+  border: 0;
+  display: flex;
+  align-items: center;
+  margin: 0 0.5rem;
+  width: 12px;
+}
+
+.toast-body {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  font-size: 16px;
+}

src/components/toasts-list/components/custom-toast/components/custom-create-toast/custom-toast.tsx

@@ -0,0 +1,35 @@
+import { faTimes } from '@fortawesome/free-solid-svg-icons';
+import { Component, Prop, Event, h, EventEmitter } from '@stencil/core';
+import { IComponentToast } from 'components/toasts-list/components/transaction-toast/transaction-toast.type';
+import { getIconHtmlFromIconDefinition } from 'utils/icons/getIconHtmlFromIconDefinition';
+
+@Component({
+  tag: 'custom-toast',
+  styleUrl: 'custom-toast.css',
+  shadow: true,
+})
+export class CustomToast {
+  @Prop() toast: IComponentToast;
+  @Event() handleDeleteToast: EventEmitter<string>;
+
+  render() {
+    const customToast = (
+      <div class="toast-wrapper">
+        <button onClick={() => this.handleDeleteToast.emit()} type="button" class="icon-close" innerHTML={getIconHtmlFromIconDefinition(faTimes)}></button>
+        <div class="toast-body" ref={container => this.initializeToast(container)}></div>
+      </div>
+    );
+    return customToast;
+  }
+
+  private initializeToast(container: HTMLElement) {
+    if (!container || container.hasChildNodes()) {
+      return;
+    }
+    const customElement = this.toast.instantiateToastElement();
+    if (!customElement) {
+      return;
+    }
+    container.appendChild(customElement);
+  }
+}

src/components/toasts-list/components/custom-toast/components/custom-create-toast/readme.md

@@ -0,0 +1,37 @@
+# custom-create-toast
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property | Attribute | Description | Type              | Default     |
+| -------- | --------- | ----------- | ----------------- | ----------- |
+| `toast`  | --        |             | `IComponentToast` | `undefined` |
+
+
+## Events
+
+| Event               | Description | Type                  |
+| ------------------- | ----------- | --------------------- |
+| `handleDeleteToast` |             | `CustomEvent<string>` |
+
+
+## Dependencies
+
+### Used by
+
+ - [generic-toast](../..)
+
+### Graph
+```mermaid
+graph TD;
+  generic-toast --> custom-toast
+  style custom-toast fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

src/components/toasts-list/components/custom-toast/components/simple-toast/readme.md

@@ -0,0 +1,42 @@
+# simple-toast
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property | Attribute | Description | Type           | Default     |
+| -------- | --------- | ----------- | -------------- | ----------- |
+| `toast`  | --        |             | `ISimpleToast` | `undefined` |
+
+
+## Events
+
+| Event               | Description | Type                |
+| ------------------- | ----------- | ------------------- |
+| `handleDeleteToast` |             | `CustomEvent<void>` |
+
+
+## Dependencies
+
+### Used by
+
+ - [generic-toast](../..)
+
+### Depends on
+
+- [transaction-toast-wrapper](../../../transaction-toast/components/transaction-toast-wrapper)
+
+### Graph
+```mermaid
+graph TD;
+  simple-toast --> transaction-toast-wrapper
+  generic-toast --> simple-toast
+  style simple-toast fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

src/components/toasts-list/components/custom-toast/components/simple-toast/simple-toast.css

@@ -0,0 +1,102 @@
+.content {
+  display: flex;
+  align-items: center;
+}
+
+.content-left {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  padding-left: 0.5rem;
+  padding-right: 0.75rem;
+
+  &.no-icon {
+    display: none;
+  }
+}
+
+.content-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 3rem;
+  height: 3rem;
+  border-radius: 50%;
+
+  svg {
+    height: auto;
+    width: 20px;
+
+    path {
+      fill: white;
+    }
+  }
+}
+
+.icon-close {
+  position: absolute;
+  right: 16px;
+  top: 16px;
+  font-size: 1.5rem;
+  font-weight: 700;
+  line-height: 1;
+  color: #000;
+  text-shadow: 0 1px 0 #fff;
+  opacity: 0.5;
+  padding: 0;
+  background-color: rgba(0, 0, 0, 0);
+  border: 0;
+  display: flex;
+  align-items: center;
+  margin: 0 0.5rem;
+  width: 12px;
+}
+
+.content-right {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: 100%;
+}
+
+.content-heading {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.25rem;
+
+  h5 {
+    margin: 0;
+    margin-bottom: 0.5rem;
+    font-weight: 500;
+    line-height: 1.2;
+    font-size: 1.25rem;
+  }
+}
+
+.content-message {
+  margin-top: 0.25rem;
+  font-size: 1rem;
+  &.no-margin {
+    margin-top: 0rem;
+  }
+}
+
+.subtitle {
+  font-size: 0.9rem;
+  font-weight: 500;
+  color: #6c757d;
+}
+
+.success {
+  background-color: #5cb85c;
+}
+
+.warning {
+  background-color: #ffc107;
+}
+
+.danger {
+  background-color: #d9534f;
+}

src/components/toasts-list/components/custom-toast/components/simple-toast/simple-toast.tsx

@@ -0,0 +1,56 @@
+import { faTimes } from '@fortawesome/free-solid-svg-icons';
+import { Component, EventEmitter, Prop, Event, h } from '@stencil/core';
+import classNames from 'classnames';
+import { ISimpleToast } from 'components/toasts-list/components/transaction-toast/transaction-toast.type';
+import { DataTestIdsEnum } from 'constants/dataTestIds.enum';
+import { getIconHtmlFromIconDefinition } from 'utils/icons/getIconHtmlFromIconDefinition';
+import { getIconHtmlFromIconName } from 'utils/icons/getIconHtmlFromIconName';
+
+@Component({
+  tag: 'simple-toast',
+  styleUrl: 'simple-toast.css',
+  shadow: true,
+})
+export class SimpleToast {
+  @Prop() toast: ISimpleToast;
+  @Event() handleDeleteToast: EventEmitter<void>;
+
+  render() {
+    const { icon, iconClassName, title, message, subtitle } = this.toast;
+
+    let iconHtml = null;
+    if (typeof icon === 'string') {
+      iconHtml = getIconHtmlFromIconName(icon);
+    }
+    if (icon instanceof HTMLElement) {
+      iconHtml = icon.outerHTML;
+    }
+
+    return (
+      <transaction-toast-wrapper wrapperId={`toast-${this.toast.toastId}`}>
+        <div class="content" data-testid={DataTestIdsEnum.transactionToastContent}>
+          {iconHtml && (
+            <div class={classNames('content-left', { 'no-icon': !iconHtml })}>
+              <div class={classNames('content-icon', iconClassName)} innerHTML={iconHtml}></div>
+            </div>
+          )}
+
+          <div class="content-right">
+            {title && (
+              <div class="content-heading">
+                <h5 class="content-heading-title" data-testid={DataTestIdsEnum.transactionToastTitle}>
+                  {title}
+                </h5>
+              </div>
+            )}
+
+            <button onClick={() => this.handleDeleteToast.emit()} type="button" class="icon-close" innerHTML={getIconHtmlFromIconDefinition(faTimes)}></button>
+
+            {subtitle && <div class="subtitle">{subtitle}</div>}
+            {message && <div class={classNames('content-message', { 'no-margin': !title && !subtitle })}>{message}</div>}
+          </div>
+        </div>
+      </transaction-toast-wrapper>
+    );
+  }
+}