Add Liquidity Rewards notifications

solidity/dashboard/src/App.js

@@ -13,15 +13,15 @@ import Footer from "./components/Footer"
 
 const App = () => (
   <Provider store={store}>
-    <Messages>
-      <Web3ContextProvider>
-        <ModalContextProvider>
-          <Router>
+    <Router>
+      <Messages>
+        <Web3ContextProvider>
+          <ModalContextProvider>
             <AppLayout />
-          </Router>
-        </ModalContextProvider>
-      </Web3ContextProvider>
-    </Messages>
+          </ModalContextProvider>
+        </Web3ContextProvider>
+      </Messages>
+    </Router>
   </Provider>
 )
 

solidity/dashboard/src/actions/messages.js

@@ -20,6 +20,7 @@ export class Message {
   content
   type
   sticky
+  classes
 }
 
 export const showMessage = (options) => {

solidity/dashboard/src/components/Message.jsx

@@ -4,16 +4,25 @@ import Banner from "./Banner"
 import { showMessage, closeMessage } from "../actions/messages"
 import { connect } from "react-redux"
 import { ViewInBlockExplorer } from "./ViewInBlockExplorer"
-import * as Icons from "./Icons"
+import LiquidityRewardsEarnedMessage from "./messages/LiquidityRewardsEarnedMessage"
+import LPTokensInWalletMessage from "./messages/LPTokensInWalletMessage"
+import WalletMessage from "./messages/WalletMessage"
+import PendingActionMessage from "./messages/PendingActionMessage"
+import SuccessMessage from "./messages/SuccessMessage"
+import ErrorMessage from "./messages/ErrorMessage"
+import DelegationAlreadyCopiedMessage from "./messages/DelegationAlreadyCopiedMessage"
 
 export const MessagesContext = React.createContext({})
 
 export const messageType = {
-  SUCCESS: { icon: Icons.Success, iconClassName: "success-icon green" },
-  ERROR: { icon: Icons.Warning },
-  PENDING_ACTION: { icon: Icons.Time },
-  INFO: { icon: Icons.Question },
-  WALLET: { icon: Icons.Wallet, iconClassName: "wallet-icon grey-50" },
+  SUCCESS: SuccessMessage,
+  ERROR: ErrorMessage,
+  PENDING_ACTION: PendingActionMessage,
+  INFO: LiquidityRewardsEarnedMessage,
+  WALLET: WalletMessage,
+  NEW_LP_TOKENS_IN_WALLET: LPTokensInWalletMessage,
+  LIQUIDITY_REWARDS_EARNED: LiquidityRewardsEarnedMessage,
+  DELEGATION_ALREADY_COPIED: DelegationAlreadyCopiedMessage,
 }
 
 const messageTransitionTimeoutInMs = 500
@@ -23,8 +32,19 @@ class MessagesComponent extends React.Component {
     this.props.showMessage(options)
   }
 
-  onMessageClose = (message) => {
-    this.props.closeMessage(message.id)
+  onMessageClose = (messageId) => {
+    this.props.closeMessage(messageId)
+  }
+
+  renderSpecificMessageType = (message) => {
+    const SpecificComponent = message.messageType
+    return (
+      <SpecificComponent
+        {...message.messageProps}
+        messageId={message.id}
+        onMessageClose={this.onMessageClose}
+      />
+    )
   }
 
   render() {
@@ -43,11 +63,7 @@ class MessagesComponent extends React.Component {
                 key={message.id}
                 classNames="banner"
               >
-                <Message
-                  key={message.id}
-                  message={message}
-                  onMessageClose={this.onMessageClose}
-                />
+                {this.renderSpecificMessageType(message)}
               </CSSTransition>
             ))}
           </TransitionGroup>
@@ -74,40 +90,49 @@ export const Messages = connect(
 
 const closeMessageTimeoutInMs = 3250
 
-const Message = ({ message, onMessageClose }) => {
+export const Message = ({
+  icon,
+  sticky,
+  title,
+  content,
+  classes,
+  withTransactionHash,
+  txHash,
+  messageId,
+  onMessageClose,
+}) => {
   useEffect(() => {
-    if (!message.sticky) {
+    if (!sticky) {
       const timeout = setTimeout(
-        () => onMessageClose(message),
+        () => onMessageClose(messageId),
         closeMessageTimeoutInMs
       )
       return () => clearTimeout(timeout)
     }
-  }, [message, onMessageClose])
+  }, [sticky, messageId, onMessageClose])
 
   return (
     <Banner>
       <div className="flex row">
-        <Banner.Icon
-          icon={message.type.icon}
-          className={`${message.type.iconClassName} mr-1`}
-        />
+        <Banner.Icon icon={icon} className={`${classes?.iconClassName} mr-1`} />
         <div style={styles.messageContentWrapper}>
-          <Banner.Title>{message.title}</Banner.Title>
-          {message.content && (
-            <Banner.Description>{message.content}</Banner.Description>
+          <Banner.Title>{title}</Banner.Title>
+          {content && (
+            <Banner.Description className={classes?.bannerDescription}>
+              {content}
+            </Banner.Description>
           )}
-          {message.withTransactionHash && (
+          {withTransactionHash && (
             <Banner.Action>
               <ViewInBlockExplorer
                 type="tx"
                 className="arrow-link"
-                id={message.txHash}
+                id={txHash}
               />
             </Banner.Action>
           )}
         </div>
-        <Banner.CloseIcon onClick={() => onMessageClose(message)} />
+        <Banner.CloseIcon onClick={() => onMessageClose(messageId)} />
       </div>
     </Banner>
   )

solidity/dashboard/src/components/SelectedWalletModal.jsx

@@ -73,9 +73,11 @@ const SelectedWalletModal = ({
             handleError(error)
           }
           showMessage({
-            type: messageType.ERROR,
-            title: error.message,
-            sticky: true,
+            messageType: messageType.ERROR,
+            messageProps: {
+              content: error.message,
+              sticky: true,
+            },
           })
         })
     }
@@ -106,7 +108,13 @@ const SelectedWalletModal = ({
       closeModal()
     } catch (error) {
       handleError(error)
-      showMessage({ type: messageType.ERROR, title: error.message })
+      showMessage({
+        messageType: messageType.ERROR,
+        messageProps: {
+          content: error.message,
+          sticky: true,
+        },
+      })
     }
   }
 

solidity/dashboard/src/components/messages/DelegationAlreadyCopiedMessage.jsx

@@ -0,0 +1,32 @@
+import * as Icons from "../Icons"
+import { Message } from "../Message"
+import React from "react"
+
+const DelegationAlreadyCopiedMessage = ({
+  sticky,
+  withTransactionHash,
+  txHash,
+  messageId,
+  onMessageClose,
+}) => {
+  const icon = Icons.Success
+  const title = `Delegation already copied`
+  const classes = {
+    iconClassName: "success-icon green",
+  }
+
+  return (
+    <Message
+      sticky={sticky}
+      icon={icon}
+      title={title}
+      classes={classes}
+      withTransactionHash={withTransactionHash}
+      txHash={txHash}
+      messageId={messageId}
+      onMessageClose={onMessageClose}
+    />
+  )
+}
+
+export default React.memo(DelegationAlreadyCopiedMessage)

solidity/dashboard/src/components/messages/ErrorMessage.jsx

@@ -0,0 +1,21 @@
+import * as Icons from "../Icons"
+import { Message } from "../Message"
+import React from "react"
+
+const ErrorMessage = ({ sticky, content, messageId, onMessageClose }) => {
+  const icon = Icons.Warning
+  const title = `Error`
+
+  return (
+    <Message
+      sticky={sticky}
+      icon={icon}
+      title={title}
+      content={content}
+      messageId={messageId}
+      onMessageClose={onMessageClose}
+    />
+  )
+}
+
+export default React.memo(ErrorMessage)

solidity/dashboard/src/components/messages/InfoMessage.jsx

@@ -0,0 +1,22 @@
+import * as Icons from "../Icons"
+import { Message } from "../Message"
+import React from "react"
+
+// TODO: use info message somewhere or delete this component completely
+const InfoMessage = ({ sticky, content, messageId, onMessageClose }) => {
+  const icon = Icons.MoreInfo
+  const title = `Info`
+
+  return (
+    <Message
+      sticky={sticky}
+      icon={icon}
+      title={title}
+      content={content}
+      messageId={messageId}
+      onMessageClose={onMessageClose}
+    />
+  )
+}
+
+export default React.memo(InfoMessage)

solidity/dashboard/src/components/messages/LPTokensInWalletMessage.jsx

@@ -0,0 +1,33 @@
+import React from "react"
+import * as Icons from "../Icons"
+import { Message } from "../Message"
+import { Link } from "react-router-dom"
+
+const LPTokensInWalletMessage = ({
+  liquidityRewardPairName,
+  sticky,
+  messageId,
+  onMessageClose,
+}) => {
+  const icon = Icons.Wallet
+  const title = `[${liquidityRewardPairName}] Your wallet has LP Tokens!`
+  const content = <Link to={"/liquidity"}>Deposit them and earn rewards</Link>
+  const classes = {
+    bannerDescription: "m-0",
+    iconClassName: "wallet-icon grey-50",
+  }
+
+  return (
+    <Message
+      sticky={sticky}
+      icon={icon}
+      title={title}
+      content={content}
+      classes={classes}
+      messageId={messageId}
+      onMessageClose={onMessageClose}
+    />
+  )
+}
+
+export default React.memo(LPTokensInWalletMessage)

solidity/dashboard/src/components/messages/LiquidityRewardsEarnedMessage.jsx

@@ -0,0 +1,33 @@
+import React from "react"
+import { Message } from "../Message"
+import * as Icons from "../Icons"
+import { Link } from "react-router-dom"
+
+const LiquidityRewardsEarnedMessage = ({
+  liquidityRewardPairName,
+  sticky,
+  messageId,
+  onMessageClose,
+}) => {
+  const icon = Icons.Rewards
+  const title = `[${liquidityRewardPairName}] You've earned rewards!`
+  const content = <Link to={"/liquidity"}>View your balance</Link>
+  const classes = {
+    bannerDescription: "m-0",
+    iconClassName: "reward-icon brand-violet",
+  }
+
+  return (
+    <Message
+      sticky={sticky}
+      icon={icon}
+      title={title}
+      content={content}
+      classes={classes}
+      messageId={messageId}
+      onMessageClose={onMessageClose}
+    />
+  )
+}
+
+export default React.memo(LiquidityRewardsEarnedMessage)

solidity/dashboard/src/components/messages/PendingActionMessage.jsx

@@ -0,0 +1,28 @@
+import * as Icons from "../Icons"
+import { Message } from "../Message"
+import React from "react"
+
+const PendingActionMessage = ({
+  sticky,
+  withTransactionHash,
+  txHash,
+  messageId,
+  onMessageClose,
+}) => {
+  const icon = Icons.Time
+  const title = `Pending transaction`
+
+  return (
+    <Message
+      sticky={sticky}
+      icon={icon}
+      title={title}
+      withTransactionHash={withTransactionHash}
+      txHash={txHash}
+      messageId={messageId}
+      onMessageClose={onMessageClose}
+    />
+  )
+}
+
+export default React.memo(PendingActionMessage)