From f1089c56e342cb639d04d2395a28d31b2d86d407 Mon Sep 17 00:00:00 2001
From: filip mertens <filip.mertens@ethereum.org>
Date: Mon, 31 Oct 2022 15:15:48 +0100
Subject: [PATCH] add id to toast

---
 apps/remix-ide/src/app/plugins/notification.tsx              | 4 ++--
 libs/remix-ui/app/src/lib/remix-app/actions/modals.ts        | 2 +-
 .../app/src/lib/remix-app/components/modals/dialogs.tsx      | 2 +-
 libs/remix-ui/app/src/lib/remix-app/context/context.tsx      | 4 ++--
 libs/remix-ui/app/src/lib/remix-app/context/provider.tsx     | 4 ++--
 libs/remix-ui/app/src/lib/remix-app/interface/index.ts       | 4 ++--
 libs/remix-ui/app/src/lib/remix-app/reducer/modals.ts        | 3 +--
 libs/remix-ui/toaster/src/lib/toaster.tsx                    | 5 +++--
 8 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/apps/remix-ide/src/app/plugins/notification.tsx b/apps/remix-ide/src/app/plugins/notification.tsx
index 975f6943fa..53354d8d20 100644
--- a/apps/remix-ide/src/app/plugins/notification.tsx
+++ b/apps/remix-ide/src/app/plugins/notification.tsx
@@ -38,7 +38,7 @@ export class NotificationPlugin extends Plugin implements MethodApi<INotificatio
     return this.dispatcher.alert(args)
   }
 
-  async toast (message: string | JSX.Element) {
-    this.dispatcher.toast(message)
+  async toast (message: string | JSX.Element, uid?: string | number) {
+    this.dispatcher.toast(message, uid)
   }
 }
diff --git a/libs/remix-ui/app/src/lib/remix-app/actions/modals.ts b/libs/remix-ui/app/src/lib/remix-app/actions/modals.ts
index 4a567a83c0..7159f8bffc 100644
--- a/libs/remix-ui/app/src/lib/remix-app/actions/modals.ts
+++ b/libs/remix-ui/app/src/lib/remix-app/actions/modals.ts
@@ -22,7 +22,7 @@ export const enum modalActionTypes {
 type ModalPayload = {
   [modalActionTypes.setModal]: AppModal
   [modalActionTypes.handleHideModal]: any
-  [modalActionTypes.setToast]: string | JSX.Element
+  [modalActionTypes.setToast]: { message: string | JSX.Element, uid: string | number }
   [modalActionTypes.handleToaster]: any,
   [modalActionTypes.processQueue]: any
 }
diff --git a/libs/remix-ui/app/src/lib/remix-app/components/modals/dialogs.tsx b/libs/remix-ui/app/src/lib/remix-app/components/modals/dialogs.tsx
index 7aba74f73b..fc153b2130 100644
--- a/libs/remix-ui/app/src/lib/remix-app/components/modals/dialogs.tsx
+++ b/libs/remix-ui/app/src/lib/remix-app/components/modals/dialogs.tsx
@@ -10,7 +10,7 @@ const AppDialogs = () => {
   return (
     <>
       <ModalWrapper {...focusModal} handleHide={handleHideModal}></ModalWrapper>
-      <Toaster message={focusToaster} handleHide={handleToaster} />
+      <Toaster message={focusToaster.message} uid={focusToaster.uid} handleHide={handleToaster} />
     </>)
 }
 export default AppDialogs
diff --git a/libs/remix-ui/app/src/lib/remix-app/context/context.tsx b/libs/remix-ui/app/src/lib/remix-app/context/context.tsx
index ca69771f80..be1cab9350 100644
--- a/libs/remix-ui/app/src/lib/remix-app/context/context.tsx
+++ b/libs/remix-ui/app/src/lib/remix-app/context/context.tsx
@@ -6,7 +6,7 @@ export const AppContext = React.createContext<any>(null)
 
 export interface dispatchModalInterface {
   modal: (data: AppModal) => void
-  toast: (message: string | JSX.Element) => void
+  toast: (message: string | JSX.Element, uid?:string | number) => void
   alert: (data: AlertModal) => void
   handleHideModal: () => void,
   handleToaster: () => void
@@ -14,7 +14,7 @@ export interface dispatchModalInterface {
 
 export const dispatchModalContext = React.createContext<dispatchModalInterface>({
   modal: (data: AppModal) => { },
-  toast: (message: string | JSX.Element) => {},
+  toast: (message: string | JSX.Element, uid?:string | number) => {},
   alert: (data: AlertModal) => {},
   handleHideModal: () => {},
   handleToaster: () => {}
diff --git a/libs/remix-ui/app/src/lib/remix-app/context/provider.tsx b/libs/remix-ui/app/src/lib/remix-app/context/provider.tsx
index 701375265d..b7c21c5389 100644
--- a/libs/remix-ui/app/src/lib/remix-app/context/provider.tsx
+++ b/libs/remix-ui/app/src/lib/remix-app/context/provider.tsx
@@ -36,10 +36,10 @@ export const ModalProvider = ({ children = [], reducer = modalReducer, initialSt
     })
   }
 
-  const toast = (message: string | JSX.Element) => {
+  const toast = (message: string | JSX.Element, uid?: string | number) => {
     dispatch({
       type: modalActionTypes.setToast,
-      payload: message
+      payload: { message, uid }
     })
   }
 
diff --git a/libs/remix-ui/app/src/lib/remix-app/interface/index.ts b/libs/remix-ui/app/src/lib/remix-app/interface/index.ts
index cc0521dd51..9c03109c11 100644
--- a/libs/remix-ui/app/src/lib/remix-app/interface/index.ts
+++ b/libs/remix-ui/app/src/lib/remix-app/interface/index.ts
@@ -33,7 +33,7 @@ export interface AlertModal {
 
 export interface ModalState {
     modals: AppModal[],
-    toasters: (string | JSX.Element)[],
+    toasters: {message: (string | JSX.Element), uid: string | number }[],
     focusModal: AppModal,
-    focusToaster: string | JSX.Element
+    focusToaster:  {message: (string | JSX.Element), uid: string | number }
 }
diff --git a/libs/remix-ui/app/src/lib/remix-app/reducer/modals.ts b/libs/remix-ui/app/src/lib/remix-app/reducer/modals.ts
index 51641c654c..e2961285d6 100644
--- a/libs/remix-ui/app/src/lib/remix-app/reducer/modals.ts
+++ b/libs/remix-ui/app/src/lib/remix-app/reducer/modals.ts
@@ -62,8 +62,7 @@ export const modalReducer = (state: ModalState = ModalInitialState, action: Moda
     }
     case modalActionTypes.setToast: {
       const toasterList = state.toasters.slice()
-      const message = action.payload
-      toasterList.push(message)
+      toasterList.push(action.payload)
       if (toasterList.length === 1) {
         return { ...state, toasters: toasterList, focusToaster: action.payload }
       } else {
diff --git a/libs/remix-ui/toaster/src/lib/toaster.tsx b/libs/remix-ui/toaster/src/lib/toaster.tsx
index 571a0c4afa..2515def65e 100644
--- a/libs/remix-ui/toaster/src/lib/toaster.tsx
+++ b/libs/remix-ui/toaster/src/lib/toaster.tsx
@@ -7,7 +7,8 @@ import './toaster.css'
 export interface ToasterProps {
   message: string | JSX.Element
   timeOut?: number,
-  handleHide?: () => void
+  handleHide?: () => void,
+  uid?: string | number
 }
 
 export const Toaster = (props: ToasterProps) => {
@@ -49,7 +50,7 @@ export const Toaster = (props: ToasterProps) => {
         }
       })
     }
-  }, [props.message])
+  }, [props.message, props.uid])
 
   useEffect(() => {
     if (state.hiding) {