A-1207660367546315

src/components/composed/Balance/Balance.css

@@ -47,6 +47,7 @@
   bottom: -25px;
   opacity: 0.2;
   white-space: nowrap;
+  cursor: pointer;
 }
 
 .balance-locked:hover {

src/components/composed/Balance/Balance.js

@@ -1,4 +1,5 @@
 import React, { useContext } from 'react'
+import { useNavigate, useParams } from 'react-router-dom'
 
 import { ReactComponent as BtcLogo } from '@Assets/images/btc-logo.svg'
 import { LogoRound } from '@BasicComponents'
@@ -12,6 +13,8 @@ import TokenLogoRound from '../../basic/TokenLogoRound/TokenLogoRound'
 const Balance = ({ balance, balanceLocked, exchangeRate, walletType }) => {
   const { networkType } = useContext(SettingsContext)
   const { tokenBalances } = useContext(NetworkContext)
+  const { coinType } = useParams()
+  const navigate = useNavigate()
   // TODO Consider the correct format for 0,00 that might also be 0.00
   const balanceInUSD =
     networkType === AppInfo.NETWORK_TYPES.TESTNET
@@ -44,6 +47,10 @@ const Balance = ({ balance, balanceLocked, exchangeRate, walletType }) => {
     )
   }
 
+  const onLockedClick = () => {
+     navigate('/wallet/' + coinType + '/locked-balance')
+  }
+
   return (
     <div
       className="balance-wrapper"
@@ -64,7 +71,7 @@ const Balance = ({ balance, balanceLocked, exchangeRate, walletType }) => {
           <span>{Format.fiatValue(balanceInUSD)}</span> USD
         </p>
         {parseFloat(balanceLocked) > 0 ? (
-          <div className="balance-locked">
+          <div className="balance-locked" onClick={onLockedClick}>
             Locked: {balanceLocked} {symbol()}
           </div>
         ) : (

src/components/composed/LockedBalanceList/LockedBalanceList.css

@@ -0,0 +1,25 @@
+.locked-table {
+  width: 100%;
+}
+
+.locked-table-wrapper {
+  display: flex;
+  justify-content: center;
+  height: 465px;
+  overflow: auto;
+}
+
+.locked-title {
+  text-align: left;
+  padding: 10px;
+  background: rgb(var(--color-green));
+  width: 50%;
+  color: rgb(var(--color-white));
+}
+
+.locked-loading-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 465px;
+}

src/components/composed/LockedBalanceList/LockedBalanceList.js

@@ -0,0 +1,53 @@
+import React, { useContext } from 'react'
+import { NetworkContext } from '@Contexts'
+
+import { Loading } from '@ComposedComponents'
+import LockedBalanceListItem from './LockedBalanceListItem'
+import './LockedBalanceList.css'
+
+const LockedBalanceList = () => {
+  const { lockedUtxos, fetchingUtxos } = useContext(NetworkContext)
+
+  return (
+    <>
+      <div className="locked-table-wrapper">
+        {fetchingUtxos ? (
+          <div className='locked-loading-wrapper'>
+            <Loading />
+          </div>
+        ) : (
+          <table
+            className="locked-table"
+            data-testid="locked-table"
+          >
+            <thead>
+              <tr>
+                <th
+                  style={{ padding: '10px', textAlign: 'left' }}
+                  className="locked-title"
+                >
+                  Time
+                </th>
+                <th
+                  style={{ padding: '10px', textAlign: 'left' }}
+                  className="locked-title"
+                >
+                  Amount
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              {lockedUtxos &&
+                lockedUtxos.map((utxo, index) => (
+                  <LockedBalanceListItem index={index} utxo={utxo}/>
+                ))}
+            </tbody>
+          </table>
+        )}
+      </div>
+    </>
+  )
+}
+
+export default LockedBalanceList
+

src/components/composed/LockedBalanceList/LockedBalanceListItem.js

@@ -0,0 +1,24 @@
+import { format } from 'date-fns'
+
+import './LockedBalanceListItem.css'
+
+const LockedBalanceListItem = ({ index, utxo }) => {
+  return (
+    <tr
+      key={index}
+      style={{
+        backgroundColor: index % 2 === 0 ? 'white' : 'rgb(247, 250, 250)',
+      }}
+    >
+      <td style={{ padding: '10px' }}>
+        {format(
+          new Date(utxo.utxo.lock.content.timestamp * 1000),
+          'dd/MM/yyyy HH:mm',
+        )}
+      </td>
+      <td style={{ padding: '10px' }}>{utxo.utxo.value.amount.decimal}</td>
+    </tr>
+  )
+}
+
+export default LockedBalanceListItem

src/components/composed/index.js

@@ -20,6 +20,7 @@ import CurrentStaking from './CurrentStaking/CurrentStaking'
 import HelpTooltip from './HelpTooltip/HelpTooltip'
 import RestoreSeedField from './RestoreSeedField/RestoreSeedField'
 import UpdateButton from './UpdateButton/UpdateButton'
+import LockedBalanceList from './LockedBalanceList/LockedBalanceList'
 
 export {
   Balance,
@@ -44,4 +45,5 @@ export {
   HelpTooltip,
   RestoreSeedField,
   UpdateButton,
+  LockedBalanceList,
 }

src/contexts/NetworkProvider/NetworkProvider.js

@@ -1,9 +1,5 @@
 import React, { createContext, useContext, useEffect, useState } from 'react'
-import {
-  getAddressData,
-  getChainTip,
-  getTransactionData,
-} from '../../services/API/Mintlayer/Mintlayer'
+
 import { AccountContext, SettingsContext } from '@Contexts'
 import { AppInfo } from '@Constants'
 import { ML_ATOMS_PER_COIN } from '../../utils/Constants/AppInfo/AppInfo'
@@ -33,6 +29,7 @@ const NetworkProvider = ({ value: propValue, children }) => {
   const [lockedBalance, setLockedBalance] = useState(0)
   const [unusedAddresses, setUnusedAddresses] = useState({})
   const [utxos, setUtxos] = useState([])
+  const [lockedUtxos, setLockedUtxos] = useState([])
   const [transactions, setTransactions] = useState([])
   const [feerate, setFeerate] = useState(0)
 
@@ -84,12 +81,12 @@ const NetworkProvider = ({ value: propValue, children }) => {
 
     const addresses_data_receive = await Promise.all(
       currentMlAddresses.mlReceivingAddresses.map((address) =>
-        getAddressData(address),
+        Mintlayer.getAddressData(address),
       ),
     )
     const addresses_data_change = await Promise.all(
       currentMlAddresses.mlChangeAddresses.map((address) =>
-        getAddressData(address),
+        Mintlayer.getAddressData(address),
       ),
     )
     const addresses_data = [...addresses_data_receive, ...addresses_data_change]
@@ -143,7 +140,9 @@ const NetworkProvider = ({ value: propValue, children }) => {
     setCurrentAccountId(accountID)
 
     // fetch transactions data
-    const transactions = transaction_ids.map((txid) => getTransactionData(txid))
+    const transactions = transaction_ids.map((txid) =>
+      Mintlayer.getTransactionData(txid),
+    )
     const transactions_data = await Promise.all(transactions)
 
     const parsedTransactions = ML.getParsedTransactions(
@@ -160,11 +159,19 @@ const NetworkProvider = ({ value: propValue, children }) => {
     const unconfirmedTransactions =
       LocalStorageService.getItem(unconfirmedTransactionString) || []
 
-    const utxos = await Mintlayer.getWalletUtxos(addressList)
-    const parsedUtxos = utxos
+    const fetchedUtxos = await Mintlayer.getWalletUtxos(addressList)
+    const fetchedSpendableUtxos =
+      await Mintlayer.getWalletSpendableUtxos(addressList)
+
+    const parsedUtxos = fetchedUtxos
+      .map((utxo) => JSON.parse(utxo))
+      .filter((utxo) => utxo.length > 0)
+
+    const parsedSpendableUtxos = fetchedSpendableUtxos
       .map((utxo) => JSON.parse(utxo))
       .filter((utxo) => utxo.length > 0)
-    const available = parsedUtxos
+
+    const available = parsedSpendableUtxos
       .flatMap((utxo) => [...utxo])
       .filter((item) => item.utxo.value)
       .filter((item) => {
@@ -189,7 +196,12 @@ const NetworkProvider = ({ value: propValue, children }) => {
     setCurrentNetworkType(networkType)
 
     const availableUtxos = available.map((item) => item)
+    const lockedUtxos = parsedUtxos
+      .flat()
+      .filter((obj) => obj.utxo.type === 'LockThenTransfer')
+
     setUtxos(availableUtxos)
+    setLockedUtxos(lockedUtxos)
 
     setFetchingUtxos(false)
 
@@ -305,7 +317,7 @@ const NetworkProvider = ({ value: propValue, children }) => {
 
   useEffect(() => {
     const getData = async () => {
-      const result = await getChainTip()
+      const result = await Mintlayer.getChainTip()
       const { block_height } = JSON.parse(result)
       setOnlineHeight(block_height)
     }
@@ -321,6 +333,7 @@ const NetworkProvider = ({ value: propValue, children }) => {
     tokenBalances,
     // addresses,
     utxos,
+    lockedUtxos,
     transactions,
     currentHeight,
     onlineHeight,

src/index.js

@@ -26,6 +26,7 @@ import {
   CreateDelegationPage,
   DelegationStakePage,
   DelegationWithdrawPage,
+  LockedBalancePage,
 } from '@Pages'
 
 import {
@@ -232,6 +233,10 @@ const App = () => {
           path="/wallet/:coinType/staking/create-delegation"
           element={<CreateDelegationPage />}
         />
+        <Route
+          path="/wallet/:coinType/locked-balance"
+          element={<LockedBalancePage />}
+        />
         <Route
           exact
           path="/"

src/pages/LockedBalance/LockedBalance.css

@@ -0,0 +1,5 @@
+.animate-list-accounts {
+  overflow: hidden;
+  transform: translateX(-200%);
+  transition: transform 1s ease-in-out;
+}

src/pages/LockedBalance/LockedBalance.js

@@ -0,0 +1,14 @@
+import { LockedBalanceList } from '@ComposedComponents'
+
+import './LockedBalance.css'
+
+const LockedBalancePage = () => {
+
+  return (
+    <>
+    <LockedBalanceList />
+    </>
+  )
+}
+
+export default LockedBalancePage

src/pages/index.js

@@ -13,6 +13,7 @@ import ConnectionPage from './ConnectionPage/ConnectionPage'
 import CreateDelegationPage from './CreateDelegation/CreateDelegation'
 import DelegationStakePage from './DelegationStake/DelegationStake'
 import DelegationWithdrawPage from './DelegationWithdraw/DelegationWithdraw'
+import LockedBalancePage from './LockedBalance/LockedBalance'
 
 export {
   CreateAccountPage,
@@ -30,4 +31,5 @@ export {
   CreateDelegationPage,
   DelegationStakePage,
   DelegationWithdrawPage,
+  LockedBalancePage
 }

src/services/API/Mintlayer/Mintlayer.js

@@ -7,7 +7,8 @@ const prefix = '/api/v2'
 const MINTLAYER_ENDPOINTS = {
   GET_ADDRESS_DATA: '/address/:address',
   GET_TRANSACTION_DATA: '/transaction/:txid',
-  GET_ADDRESS_UTXO: '/address/:address/spendable-utxos',
+  GET_ADDRESS_UTXO: '/address/:address/all-utxos',
+  GET_ADDRESS_SPENDABLE_UTXO: '/address/:address/spendable-utxos',
   POST_TRANSACTION: '/transaction',
   GET_FEES_ESTIMATES: '/feerate',
   GET_ADDRESS_DELEGATIONS: '/address/:address/delegations',
@@ -211,6 +212,18 @@ const getWalletUtxos = (addresses) => {
   return Promise.all(utxosPromises)
 }
 
+const getAddressSpendableUtxo = (address) =>
+  tryServers(
+    MINTLAYER_ENDPOINTS.GET_ADDRESS_SPENDABLE_UTXO.replace(':address', address),
+  )
+
+const getWalletSpendableUtxos = (addresses) => {
+  const utxosPromises = addresses.map((address) =>
+    getAddressSpendableUtxo(address),
+  )
+  return Promise.all(utxosPromises)
+}
+
 const getTokensData = async (tokens) => {
   const tokensData = {}
   tokens.forEach((token) => {
@@ -304,6 +317,8 @@ export {
   requestMintlayer,
   getAddressUtxo,
   getWalletUtxos,
+  getAddressSpendableUtxo,
+  getWalletSpendableUtxos,
   getAddressDelegations,
   getWalletDelegations,
   getDelegationDetails,