Dev-12-06-2024

src/components/basic/Tooltip/Tooltip.css

@@ -4,7 +4,7 @@
   align-items: center;
   justify-content: center;
   width: max-content;
-  max-width: 110px;
+  max-width: 122px;
   max-height: fit-content;
   padding: 4px 8px;
   background: rgb(var(--color-green));

src/components/composed/CurrentStaking/CurrentStaking.css

@@ -11,6 +11,7 @@
   margin: 30px 0 0;
   display: flex;
   justify-content: space-between;
+  overflow: visible;
 }
 
 .delegation-button-wrapper {
@@ -39,3 +40,19 @@
   padding: 0;
   font-size: 1.2rem;
 }
+
+.delegation-inactive {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid #e0e0e0;
+  padding: 2px 5px;
+  border-radius: 5px;
+  background: #ffc680;
+  text-align: center;
+  cursor: pointer;
+}
+
+.delegation-inactive:hover {
+  background: #ff9f00;
+}

src/components/composed/CurrentStaking/CurrentStaking.js

@@ -1,18 +1,22 @@
-import { useContext } from 'react'
+import { useState, useContext } from 'react'
 import { Button } from '@BasicComponents'
 import { HelpTooltip } from '@ComposedComponents'
 import { VerticalGroup } from '@LayoutComponents'
 import { Wallet } from '@ContainerComponents'
 import { useMlWalletInfo } from '@Hooks'
 import { ML } from '@Helpers'
+import { Tooltip } from '@BasicComponents'
 
 import { SettingsContext } from '@Contexts'
 
 import './CurrentStaking.css'
 import { useNavigate, useParams } from 'react-router-dom'
 
+import { ReactComponent as IconWarning } from '@Assets/images/icon-warning.svg'
+
 const CurrentStaking = ({ addressList }) => {
   const navigate = useNavigate()
+  const [tooltipVisible, setTooltipVisible] = useState(false)
   const { coinType } = useParams()
   const { networkType } = useContext(SettingsContext)
 
@@ -25,7 +29,8 @@ const CurrentStaking = ({ addressList }) => {
   const { mlDelegationList, mlDelegationsBalance, fetchingDelegations } =
     useMlWalletInfo(addressList)
 
-  const delegationsLoading = fetchingDelegations && mlDelegationList.length === 0
+  const delegationsLoading =
+    fetchingDelegations && mlDelegationList.length === 0
   const onDelegationCreateButtonClick = () => {
     navigate('/wallet/' + walletType.name + '/staking/create-delegation')
   }
@@ -36,6 +41,31 @@ const CurrentStaking = ({ addressList }) => {
       ? 'https://lovelace.explorer.mintlayer.org/pools'
       : 'https://explorer.mintlayer.org/pools'
 
+  const decommissionedPools = mlDelegationList.filter(
+    (delegation) => delegation.decommissioned && delegation.balance.length > 11,
+  )
+
+  const handleScrollToPool = () => {
+    const firstDecommissionedPool = mlDelegationList.find(
+      (delegation) =>
+        delegation.decommissioned === true && delegation.balance.length > 11,
+    ).pool_id
+    const poolList = document.querySelectorAll(
+      `[data-poolid="${firstDecommissionedPool}"]`,
+    )[0]
+    poolList.scrollIntoView({ behavior: 'smooth' })
+  }
+
+  const toggleTooltip = () => {
+    setTooltipVisible(!tooltipVisible)
+  }
+
+  const tooltipMesage = `Some of your delegations are inactive. ${
+    decommissionedPools.length
+  }${' '} pool${
+    decommissionedPools.length > 1 ? 's are' : ' is'
+  } decommissioned.`
+
   return (
     <VerticalGroup>
       <div className="staking-title-wrapper">
@@ -52,6 +82,27 @@ const CurrentStaking = ({ addressList }) => {
             Total staked: {ML.getAmountInCoins(mlDelegationsBalance)} ML
           </p>
         </div>
+        {decommissionedPools.length > 0 && (
+          <div
+            className="tooltipWrapper"
+            onMouseEnter={toggleTooltip}
+            onMouseLeave={toggleTooltip}
+          >
+            <div className="delegation-inactive">
+              <div
+                onClick={handleScrollToPool}
+                className="warning-inactive"
+              >
+                <IconWarning />
+              </div>
+            </div>
+            <Tooltip
+              message={tooltipMesage}
+              visible={tooltipVisible}
+              position="left"
+            />
+          </div>
+        )}
         <a
           href={poolListLink}
           target="_blank"

src/components/composed/StakingWarning/StakingWarning.css

@@ -0,0 +1,20 @@
+.staking-warning {
+  position: absolute;
+  z-index: 20;
+  top: 5px;
+  left: 5px;
+}
+
+.warning-icon {
+  width: 22px;
+  height: 22px;
+  color: #fff;
+  background: #ffc680;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: bold;
+  z-index: 20;
+  pointer-events: none;
+}

src/components/composed/StakingWarning/StakingWarning.js

@@ -0,0 +1,27 @@
+import { useMlWalletInfo } from '@Hooks'
+import './StakingWarning.css'
+import React from 'react'
+
+export function StakingWarning({addressList}) {
+  const { mlDelegationList } = useMlWalletInfo(addressList)
+
+  if (!mlDelegationList) {
+    return null
+  }
+
+  if (mlDelegationList.length === 0) {
+    return null
+  }
+
+  const decommissionedPools = mlDelegationList.filter(delegation => delegation.decommissioned && delegation.balance.length > 11)
+
+  if (decommissionedPools.length === 0) {
+    return null
+  }
+
+  return (
+    <div className="staking-warning">
+      <div className="warning-icon" title="you delegatied to inactive pool">!</div>
+    </div>
+  )
+}

src/components/containers/Wallet/Delegation.css

@@ -7,6 +7,7 @@
   background: rgb(var(--color-extra-light-gray));
   word-break: break-all;
   cursor: pointer;
+  justify-content: flex-end;
 }
 
 .transaction-logo-type {
@@ -18,11 +19,16 @@
   height: 72px;
   background: rgb(var(--color-light-green));
   border-radius: 50%;
+  color: rgb(var(--color-white));
+  font-size: 43px;
 }
 
 .transaction-detail {
+  /* display: flex;
+  align-items: center; */
   margin-left: 30px;
   flex-grow: 1;
+  max-width: 546px;
 }
 
 .transaction-logo-out {
@@ -45,9 +51,13 @@
 }
 
 .transaction-id {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   font-size: 1.7rem;
   font-weight: 600;
   margin-bottom: 10px;
+  margin-top: 4px;
   word-break: break-all;
 }
 
@@ -68,6 +78,15 @@
   color: #fff;
 }
 
+.delegation-staking-icon.decommissioned,
+.transaction-logo-type.decommissioned {
+  background: rgb(var(--color-red));
+
+  /* height: 30px;
+  width: 30px;
+  min-width: 30px; */
+}
+
 .delegation-actions {
   display: flex;
   margin-top: 10px;
@@ -92,3 +111,35 @@
     width: 95%;
   }
 }
+
+.transaction.decommissioned {
+  height: 55px;
+}
+.transaction.decommissioned .transaction-detail {
+  height: 40px;
+}
+
+/* ROLLUP DELEGATION */
+.transaction.decommissioned.inactive-open {
+  height: auto;
+}
+.transaction.decommissioned.inactive-open .transaction-detail {
+  height: auto;
+}
+
+.transaction.decommissioned.non-empty {
+  background: rgba(255, 223, 182, 0.5);
+}
+
+/* .transaction.decommissioned.empty {
+  opacity: 30%;
+} */
+
+.decommissioned-text {
+  background: rgb(var(--color-red));
+  color: rgb(var(--color-white));
+  padding: 5px;
+  border-radius: 20px;
+  margin-left: 20px;
+  font-size: 15px;
+}

src/components/containers/Wallet/Delegation.js

@@ -25,6 +25,7 @@ const Delegation = ({ delegation }) => {
   }
 
   const [detailPopupOpen, setDetailPopupOpen] = useState(false)
+  const [inactiveOpen, setInactiveOpen] = useState(false)
 
   let delegationOject = delegation
 
@@ -70,11 +71,22 @@ const Delegation = ({ delegation }) => {
     ? format(new Date(delegationOject.creation_time * 1000), 'dd/MM/yyyy HH:mm')
     : 'not confirmed'
 
+  const delegationClickHandle = (delegation) => {
+    delegationOject.decommissioned && !inactiveOpen
+      ? setInactiveOpen(true)
+      : setDetailPopupOpen(true)
+  }
+
   return (
     <li
-      className="transaction"
+      className={`transaction ${
+        delegationOject.decommissioned ? 'decommissioned' : ''
+      } ${inactiveOpen ? 'inactive-open' : ''} ${
+        delegationOject.balance.length > 11 ? 'non-empty' : 'empty'
+      }`}
       data-testid="delegation"
-      onClick={() => setDetailPopupOpen(true)}
+      data-poolid={delegationOject.pool_id}
+      onClick={delegationClickHandle}
     >
       {delegation.type === 'Unconfirmed' && delegation.mode === 'delegation' && (
         <>
@@ -103,10 +115,20 @@ const Delegation = ({ delegation }) => {
         </>
       )}
       <div
-        className={'transaction-logo-type transaction-logo-out'}
+        className={`transaction-logo-type transaction-logo-out ${
+          delegation.decommissioned ? 'decommissioned' : ''
+        }`}
         data-testid="delegation-icon"
       >
-        <StakeIcon className={'delegation-staking-icon'} />
+        {delegation.decommissioned && !inactiveOpen ? (
+          '!'
+        ) : (
+          <StakeIcon
+            className={`delegation-staking-icon ${
+              delegation.decommissioned ? 'decommissioned' : ''
+            }`}
+          />
+        )}
       </div>
       <div className="transaction-detail">
         <div>
@@ -117,6 +139,10 @@ const Delegation = ({ delegation }) => {
             {delegation && delegationOject.pool_id
               ? ML.formatAddress(delegationOject.pool_id)
               : ''}
+
+            {delegationOject.decommissioned && (
+              <span className="decommissioned-text">Inactive</span>
+            )}
           </p>
           <div className="transaction-date-amount">
             {delegationOject.creation_time && (
@@ -150,6 +176,7 @@ const Delegation = ({ delegation }) => {
               <Button
                 extraStyleClasses={buttonExtraStyles}
                 onClickHandle={addFundsClickHandle}
+                disabled={delegation.decommissioned}
               >
                 Add funds
               </Button>

src/components/containers/Wallet/DelegationDetails.css

@@ -25,7 +25,7 @@
 .delegation-details-content {
   font-size: 1.5rem;
   font-weight: 600;
-  word-break: break-all;
+  word-break: break-word;
   cursor: auto;
 }
 

src/components/containers/Wallet/DelegationDetails.js

@@ -57,6 +57,14 @@ const DelegationDetails = ({ delegation }) => {
       data-testid="delegation-details"
     >
       <div className="delegation-details-items-wrapper">
+        {delegation.decommissioned && (
+          <DelegationDetailsItem
+            title={'IMPORTANT:'}
+            content={
+              'This pool is decommissioned and will not receive rewards. Please withdraw your funds and delegate to an active pool.'
+            }
+          />
+        )}{' '}
         <DelegationDetailsItem
           title={'Date:'}
           content={date}
@@ -85,6 +93,7 @@ const DelegationDetails = ({ delegation }) => {
             <Button
               extraStyleClasses={buttonExtraStyles}
               onClickHandle={addFundsClickHandle}
+              disabled={delegation.decommissioned}
             >
               Add funds
             </Button>