Merge pull request #167 from mintlayer/dev

* A-1207521803806993: mark inactive pools (#162) * A-1207521803806993: mark inactive pools * add styles * cleanup * add inactive text * A-1207544340370272 (#166) * A-1207537672759448: change utxo format (#164) * update version * feat: decommisioned pools UI UX improvements * fix: delegation details message --------- Co-authored-by: Sergey <[email protected]> --------- Co-authored-by: Alexander <[email protected]> * update version --------- Co-authored-by: Sergey <[email protected]>
mintlayer · Jun 12, 2024 · c66bca8 · c66bca8
2 parents 1f3345d + 6689311
commit c66bca8
Show file tree

Hide file tree

Showing 19 changed files with 263 additions and 19 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "browser-extension",
-  "version": "1.2.5",
+  "version": "1.2.6",
   "private": true,
   "dependencies": {
     "@mintlayer/entropy-generator": "^1.0.2",

diff --git a/public/manifestDefault.json b/public/manifestDefault.json
@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "Mojito - A Mintlayer Wallet",
-  "version": "1.2.5",
+  "version": "1.2.6",
   "short_name": "Mojito",
   "description": "Mojito is a non-custodial decentralized crypto wallet that lets you send and receive BTC and ML from any other address.",
   "homepage_url": "https://www.mintlayer.org/",

diff --git a/public/manifestFirefox.json b/public/manifestFirefox.json
@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "Mojito - A Mintlayer Wallet",
-  "version": "1.2.5",
+  "version": "1.2.6",
   "description": "Mojito is a non-custodial decentralized crypto wallet that lets you send and receive BTC and ML from any other address.",
   "homepage_url": "https://www.mintlayer.org/",
   "icons": {

diff --git a/src/assets/images/icon-warning.svg b/src/assets/images/icon-warning.svg
diff --git a/src/components/basic/Tooltip/Tooltip.css b/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));

diff --git a/src/components/composed/CurrentStaking/CurrentStaking.css b/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;
+}
diff --git a/src/components/composed/CurrentStaking/CurrentStaking.js b/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"

diff --git a/src/components/composed/StakingWarning/StakingWarning.css b/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;
+}
diff --git a/src/components/composed/StakingWarning/StakingWarning.js b/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>
+  )
+}
diff --git a/src/components/containers/Wallet/Delegation.css b/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;
+}
diff --git a/src/components/containers/Wallet/Delegation.js b/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>