From 12fdc42a520a7768de32fade66f496e37518378e Mon Sep 17 00:00:00 2001 From: Sergey Date: Wed, 12 Jun 2024 00:40:43 +0200 Subject: [PATCH 1/2] 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 --------- Co-authored-by: Alexander <69318224+owlsua@users.noreply.github.com> --- src/assets/images/icon-warning.svg | 11 ++++ src/components/basic/Tooltip/Tooltip.css | 2 +- .../CurrentStaking/CurrentStaking.css | 17 ++++++ .../composed/CurrentStaking/CurrentStaking.js | 55 ++++++++++++++++++- .../StakingWarning/StakingWarning.css | 20 +++++++ .../composed/StakingWarning/StakingWarning.js | 27 +++++++++ .../containers/Wallet/Delegation.css | 51 +++++++++++++++++ .../containers/Wallet/Delegation.js | 35 ++++++++++-- .../containers/Wallet/DelegationDetails.css | 2 +- .../containers/Wallet/DelegationDetails.js | 9 +++ .../NetworkProvider/NetworkProvider.js | 14 +++++ src/pages/Wallet/Wallet.css | 1 + src/pages/Wallet/Wallet.js | 14 +++-- src/services/API/Mintlayer/Mintlayer.js | 12 ++++ 14 files changed, 257 insertions(+), 13 deletions(-) create mode 100644 src/assets/images/icon-warning.svg create mode 100644 src/components/composed/StakingWarning/StakingWarning.css create mode 100644 src/components/composed/StakingWarning/StakingWarning.js diff --git a/src/assets/images/icon-warning.svg b/src/assets/images/icon-warning.svg new file mode 100644 index 00000000..b43838bc --- /dev/null +++ b/src/assets/images/icon-warning.svg @@ -0,0 +1,11 @@ + + + + + \ No newline at end of file diff --git a/src/components/basic/Tooltip/Tooltip.css b/src/components/basic/Tooltip/Tooltip.css index 2723a456..fa57993c 100644 --- 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 index 5abd2310..7759585a 100644 --- 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 index 63148260..7d08fdb1 100644 --- 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 (
@@ -52,6 +82,27 @@ const CurrentStaking = ({ addressList }) => { Total staked: {ML.getAmountInCoins(mlDelegationsBalance)} ML

+ {decommissionedPools.length > 0 && ( +
+
+
+ +
+
+ +
+ )} delegation.decommissioned && delegation.balance.length > 11) + + if (decommissionedPools.length === 0) { + return null + } + + return ( +
+
!
+
+ ) +} diff --git a/src/components/containers/Wallet/Delegation.css b/src/components/containers/Wallet/Delegation.css index 7f1ca58a..35ceb50a 100644 --- 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 index 5a35a58d..0e87f38b 100644 --- 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 (
  • 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 }) => { )}
    - + {delegation.decommissioned && !inactiveOpen ? ( + '!' + ) : ( + + )}
    @@ -117,6 +139,10 @@ const Delegation = ({ delegation }) => { {delegation && delegationOject.pool_id ? ML.formatAddress(delegationOject.pool_id) : ''} + + {delegationOject.decommissioned && ( + Inactive + )}

    {delegationOject.creation_time && ( @@ -150,6 +176,7 @@ const Delegation = ({ delegation }) => { diff --git a/src/components/containers/Wallet/DelegationDetails.css b/src/components/containers/Wallet/DelegationDetails.css index 1ff2e172..dfd77bf8 100644 --- a/src/components/containers/Wallet/DelegationDetails.css +++ b/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; } diff --git a/src/components/containers/Wallet/DelegationDetails.js b/src/components/containers/Wallet/DelegationDetails.js index b894c642..e9f6b344 100644 --- a/src/components/containers/Wallet/DelegationDetails.js +++ b/src/components/containers/Wallet/DelegationDetails.js @@ -57,6 +57,14 @@ const DelegationDetails = ({ delegation }) => { data-testid="delegation-details" >
    + {delegation.decommissioned && ( + + )}{' '} { diff --git a/src/contexts/NetworkProvider/NetworkProvider.js b/src/contexts/NetworkProvider/NetworkProvider.js index ab76d00f..1a515f93 100644 --- a/src/contexts/NetworkProvider/NetworkProvider.js +++ b/src/contexts/NetworkProvider/NetworkProvider.js @@ -227,9 +227,23 @@ const NetworkProvider = ({ value: propValue, children }) => { ), ) + const pools = delegation_details.map((delegation) => delegation.pool_id) + + const uniquePools = [...new Set(pools)] + + const pools_data = await Mintlayer.getPoolsData(uniquePools) + + const emptyPoolsDataMap = uniquePools.reduce((acc, pool, index) => { + if (pools_data[index].staker_balance.atoms === '0') { + acc[pool] = pools_data[index] + } + return acc + }, {}) + const mergedDelegations = delegations.map((delegation, index) => { return { ...delegation, + decommissioned: emptyPoolsDataMap[delegation.pool_id] ? true : false, balance: delegation.balance.atoms, creation_block_height: delegation_details[index].creation_block_height, diff --git a/src/pages/Wallet/Wallet.css b/src/pages/Wallet/Wallet.css index 2120273e..dad98e59 100644 --- a/src/pages/Wallet/Wallet.css +++ b/src/pages/Wallet/Wallet.css @@ -1,4 +1,5 @@ .transactions-buttons-wrapper { + position: relative; display: flex; min-width: max-content; } diff --git a/src/pages/Wallet/Wallet.js b/src/pages/Wallet/Wallet.js index 548cce1f..3ab1c4f0 100644 --- a/src/pages/Wallet/Wallet.js +++ b/src/pages/Wallet/Wallet.js @@ -11,6 +11,7 @@ import { BTC } from '@Helpers' import { AppInfo } from '@Constants' import './Wallet.css' +import { StakingWarning } from '../../components/composed/StakingWarning/StakingWarning' const WalletPage = () => { const navigate = useNavigate() @@ -79,11 +80,14 @@ const WalletPage = () => { />
    {walletType.name === 'Mintlayer' && ( - + <> + + + )} { @@ -236,6 +237,9 @@ const getDelegation = (delegation) => MINTLAYER_ENDPOINTS.GET_DELEGATION.replace(':delegation', delegation), ) +const getPool = (pool) => + tryServers(MINTLAYER_ENDPOINTS.GET_POOL_DATA.replace(':hash', pool)) + const getBlockDataByHeight = (height) => { return tryServers( MINTLAYER_ENDPOINTS.GET_BLOCK_HASH.replace(':height', height), @@ -271,6 +275,13 @@ const getBlocksData = (heights) => { ) } +const getPoolsData = (pools) => { + const poolsPromises = pools.map((pool) => getPool(pool)) + return Promise.all(poolsPromises).then((results) => + results.flatMap(JSON.parse), + ) +} + const getChainTip = async () => { return tryServers(MINTLAYER_ENDPOINTS.GET_CHAIN_TIP) } @@ -301,5 +312,6 @@ export { getFeesEstimates, getBlocksData, getTokensData, + getPoolsData, MINTLAYER_ENDPOINTS, } From 6689311201ba2598cf49c9576800945bc450f168 Mon Sep 17 00:00:00 2001 From: owlsua Date: Wed, 12 Jun 2024 10:10:09 +0200 Subject: [PATCH 2/2] uopdate version --- package-lock.json | 4 ++-- package.json | 2 +- public/manifestDefault.json | 2 +- public/manifestFirefox.json | 2 +- src/pages/CreateRestore/CreateRestore.js | 2 +- 5 files changed, 6 insertions(+), 6 deletions(-) diff --git a/package-lock.json b/package-lock.json index c92fcb38..1cf38eaf 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "browser-extension", - "version": "1.2.5", + "version": "1.2.6", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "browser-extension", - "version": "1.2.5", + "version": "1.2.6", "dependencies": { "@mintlayer/entropy-generator": "^1.0.2", "@testing-library/jest-dom": "^6.1.4", diff --git a/package.json b/package.json index 8cb6a4d9..3be7d27c 100644 --- 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 index 1f9a2cb6..c5f5a008 100644 --- 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 index 5e33cd92..2bab51b1 100644 --- 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/pages/CreateRestore/CreateRestore.js b/src/pages/CreateRestore/CreateRestore.js index 8276a6bb..191eceb6 100644 --- a/src/pages/CreateRestore/CreateRestore.js +++ b/src/pages/CreateRestore/CreateRestore.js @@ -76,7 +76,7 @@ const CreateRestorePage = () => { className="footnote-version" data-testid="footnote-name" > - v1.2.5 + v1.2.6