Dev-22-02-2024-v-1-1-6 (#118)

* fix: bitcoin address generation (#113)

* input output adjustments (#112)

* inout output adjustments

* add staking and delegation transactions

* utxo approach to get balance and check locks (#111)

* utxo approach to get balance and check locks

* Nowrap for locked

* fix transactions (#114)

* A-1206655662239730: fix amount if change rate is not updated (#116)

* A-1206655662239724: Locked swap fix for display balances (#115)

* swap lock balance

* fix test

* A-1206655662239727: utxo spend locked support (#117)

* utxo filtering simplified

* fix encoding

* add lock by block count

* improve filtering utxo

* feat: add unconformed transaction type and icon

* test: unit tests improvements

---------

Co-authored-by: owlsua <[email protected]>

---------

Co-authored-by: Sergey <[email protected]>

src/components/composed/Balance/Balance.css

@@ -16,6 +16,8 @@
 
 .balance {
   margin-left: 17px;
+  position: relative;
+  overflow: visible;
 }
 
 .balance-btc {
@@ -38,3 +40,14 @@
   font-weight: 500;
   font-size: 1.5rem;
 }
+
+.balance-locked {
+  position: absolute;
+  bottom: -25px;
+  opacity: 0.2;
+  white-space: nowrap;
+}
+
+.balance-locked:hover {
+  opacity: 1;
+}

src/components/composed/Balance/Balance.js

@@ -8,7 +8,7 @@ import { AppInfo } from '@Constants'
 
 import './Balance.css'
 
-const Balance = ({ balance, exchangeRate }) => {
+const Balance = ({ balance, balanceLocked, exchangeRate }) => {
   const { walletType } = useContext(AccountContext)
   const { networkType } = useContext(SettingsContext)
   // TODO Consider the correct format for 0,00 that might also be 0.00
@@ -38,6 +38,13 @@ const Balance = ({ balance, exchangeRate }) => {
         >
           <span>{Format.fiatValue(balanceInUSD)}</span> USD
         </p>
+        {parseFloat(balanceLocked) > 0 ? (
+          <div className="balance-locked">
+            Locked: {balanceLocked} {symbol}
+          </div>
+        ) : (
+          <></>
+        )}
       </div>
     </div>
   )

src/components/containers/SendTransaction/SendTransaction.js

@@ -20,7 +20,7 @@ const SendTransaction = ({
   totalFeeCrypto: totalFeeCryptoParent,
   setTotalFeeCrypto: setTotalFeeCryptoParent,
   transactionData,
-  exchangeRate,
+  exchangeRate = 0,
   maxValueInToken,
   onSendTransaction,
   calculateTotalFee,
@@ -137,7 +137,8 @@ const SendTransaction = ({
 
   const feeChanged = (value) => setFee(value)
   const amountChanged = (amount) => {
-    if (!exchangeRate) return
+    // TODO process this when/if we will have currency switcher
+    // if (!exchangeRate) return
     if (amount.currency === transactionData.tokenName) {
       setOriginalAmount(amount.value)
       setAmountInCrypto(amount.value ? Format.BTCValue(amount.value) : '0,00')

src/components/containers/SendTransaction/SendTransaction.test.js

@@ -13,7 +13,7 @@ const TRANSACTIONDATASAMPLE = {
 
 test('Send Transaction', async () => {
   await act(async () => {
-    await render(
+    render(
       <AccountProvider>
         <SettingsProvider>
           <SendTransaction

src/components/containers/Wallet/Transaction.css

@@ -7,6 +7,7 @@
   background: rgb(var(--color-extra-light-gray));
   word-break: break-all;
   cursor: pointer;
+  position: relative;
 }
 
 .transaction-logo-type {
@@ -18,6 +19,21 @@
   height: 72px;
   background: rgb(var(--color-light-green));
   border-radius: 50%;
+  position: relative;
+  z-index: 5;
+}
+
+.transaction-logo-type-same {
+  position: absolute;
+  z-index: 10;
+  left: 30px;
+  background: rgb(var(--color-dark-gray));
+}
+
+.transaction-logo-type-same .loop-icon {
+  transform: rotate(90deg);
+  width: 45px;
+  height: 45px;
 }
 
 .transaction-detail {
@@ -29,11 +45,43 @@
   background: rgb(var(--color-black));
 }
 
+.transaction-logo-type-stake {
+  background: rgb(var(--color-dark-gray));
+}
+
+.transaction-logo-type-delegate {
+  background: rgb(var(--color-dark-gray));
+}
+
+.transaction-logo-type-unconfirmed {
+  background: rgb(var(--color-dark-gray));
+}
+
 .arrow-icon {
   width: 30px;
   height: 36px;
 }
 
+.stake-icon {
+  width: 40px;
+  height: 40px;
+  color: #fff;
+}
+
+.unconfirmed-icon {
+  width: 34px;
+  height: 40px;
+  color: #fff;
+}
+
+.delegation-icon {
+  width: 40px;
+  height: 40px;
+  margin-left: 5px;
+  margin-top: -5px;
+  color: #fff;
+}
+
 .arrow-icon-out {
   transform: rotate(180deg);
 }

src/components/containers/Wallet/Transaction.js

@@ -2,6 +2,10 @@ import React, { useState } from 'react'
 import { format } from 'date-fns'
 
 import { ReactComponent as ArrowIcon } from '@Assets/images/icon-arrow.svg'
+import { ReactComponent as LoopIcon } from '@Assets/images/icon-loop.svg'
+import { ReactComponent as StakeIcon } from '@Assets/images/icon-stake.svg'
+import { ReactComponent as DelegationIcon } from '@Assets/images/icon-delegation.svg'
+import { ReactComponent as UnconfirmedIcon } from '@Assets/images/icon-sand.svg'
 import { Format } from '@Helpers'
 import { PopUp } from '@ComposedComponents'
 
@@ -31,18 +35,62 @@ const Transaction = ({ transaction, getConfirmations }) => {
       data-testid="transaction"
       onClick={() => setDetailPopupOpen(true)}
     >
-      <div
-        className={`transaction-logo-type ${
-          transaction.direction === 'out' && 'transaction-logo-out'
-        }`}
-        data-testid="transaction-icon"
-      >
-        <ArrowIcon
-          className={`arrow-icon ${
-            transaction.direction === 'out' && 'arrow-icon-out'
+      {transaction.type === 'Transfer' || !transaction.type ? (
+        <div
+          className={`transaction-logo-type ${
+            transaction.direction === 'out' && 'transaction-logo-out'
           }`}
-        />
-      </div>
+          data-testid="transaction-icon"
+        >
+          <ArrowIcon
+            className={`arrow-icon ${
+              transaction.direction === 'out' && 'arrow-icon-out'
+            }`}
+          />
+        </div>
+      ) : (
+        <></>
+      )}
+      {transaction.sameWalletTransaction ? (
+        <div
+          className="transaction-logo-type transaction-logo-type-same"
+          data-testid="transaction-icon"
+        >
+          <LoopIcon className="loop-icon" />
+        </div>
+      ) : (
+        <></>
+      )}
+      {transaction.type === 'Unconfirmed' ? (
+        <div
+          className="transaction-logo-type transaction-logo-type-unconfirmed"
+          data-testid="transaction-icon"
+        >
+          <UnconfirmedIcon className="unconfirmed-icon" />
+        </div>
+      ) : (
+        <></>
+      )}
+      {transaction.type === 'CreateStakePool' ? (
+        <div
+          className="transaction-logo-type transaction-logo-type-stake transaction-logo-type-stake"
+          data-testid="transaction-icon"
+        >
+          <StakeIcon className="stake-icon" />
+        </div>
+      ) : (
+        <></>
+      )}
+      {transaction.type === 'DelegateStaking' ? (
+        <div
+          className="transaction-logo-type transaction-logo-type-delegate transaction-logo-type-stake"
+          data-testid="transaction-icon"
+        >
+          <DelegationIcon className="delegation-icon" />
+        </div>
+      ) : (
+        <></>
+      )}
       <div className="transaction-detail">
         <p
           className="transaction-id"

src/components/containers/Wallet/Transaction.test.js

@@ -10,6 +10,7 @@ const TRANSCTIONSAMPLE = {
   txid: 'txid',
   value: 1,
   direction: 'in',
+  type: 'Transfer',
   date: 1588888888,
   otherPart: ['2MvTz52JfiHsDgbjRJLEY44hz8aebHGQZyb'],
 }

src/hooks/UseWalletInfo/useMlWalletInfo.js

@@ -9,7 +9,10 @@ const useMlWalletInfo = (addresses) => {
   const effectCalled = useRef(false)
   const [mlTransactionsList, setMlTransactionsList] = useState([])
   const [mlBalance, setMlBalance] = useState(0)
+  const [mlBalanceLocked, setMlBalanceLocked] = useState(0)
   const [mlUnformattedBalance, setMlUnformattedBalance] = useState(0)
+  const [mlUnformattedBalanceLocked, setMlUnformattedBalanceLocked] =
+    useState(0)
   const isMintlayer = walletType.name === 'Mintlayer'
 
   const getTransactions = useCallback(async () => {
@@ -42,14 +45,57 @@ const useMlWalletInfo = (addresses) => {
         ...addresses.mlChangeAddresses,
       ]
 
-      const balance = await Mintlayer.getWalletBalance(addressList)
+      // UTXO approach until api-server will provide both balances
+      const utxos = await Mintlayer.getWalletUtxos(addressList)
+
+      const parsedUtxos = utxos
+        .map((utxo) => JSON.parse(utxo))
+        .filter((utxo) => utxo.length > 0)
+
+      const availableAmount = parsedUtxos
+        .flatMap((utxo) => [...utxo])
+        .reduce((acc, utxo) => {
+          if (utxo.utxo.type === 'LockThenTransfer') {
+            if (utxo.utxo.lock.UntilTime.timestamp < Date.now() / 1000) {
+              return acc + Number(utxo.utxo.value.amount)
+            }
+          }
+          if (utxo.utxo.type === 'Transfer') {
+            return acc + Number(utxo.utxo.value.amount)
+          }
+          return acc
+        }, 0)
+
+      const lockedAmount = parsedUtxos
+        .flatMap((utxo) => [...utxo])
+        .reduce((acc, utxo) => {
+          if (utxo.utxo.type === 'LockThenTransfer') {
+            if (utxo.utxo.lock.UntilTime.timestamp > Date.now() / 1000) {
+              return acc + Number(utxo.utxo.value.amount)
+            }
+          }
+          return acc
+        }, 0)
+
+      // const balance = await Mintlayer.getWalletBalance(addressList)
+      const balance = { balanceInAtoms: availableAmount }
+      const balanceLocked = { balanceInAtoms: lockedAmount }
       const balanceInCoins = ML.getAmountInCoins(balance.balanceInAtoms)
+      const balanceLockedInCoins = ML.getAmountInCoins(
+        balanceLocked.balanceInAtoms,
+      )
       const formattedBalance = Format.BTCValue(balanceInCoins)
+      const formattedBalanceLocked = Format.BTCValue(balanceLockedInCoins)
 
       if (balance) {
         setMlBalance(formattedBalance)
         setMlUnformattedBalance(balance)
       } else setMlBalance(0)
+
+      if (balanceLocked) {
+        setMlBalanceLocked(formattedBalanceLocked)
+        setMlUnformattedBalanceLocked(formattedBalanceLocked)
+      } else setMlBalanceLocked(0)
       setBalanceLoading(false)
     } catch (error) {
       console.error(error)
@@ -68,7 +114,13 @@ const useMlWalletInfo = (addresses) => {
     getBalance()
   }, [getBalance, getTransactions])
 
-  return { mlTransactionsList, mlBalance, mlUnformattedBalance }
+  return {
+    mlTransactionsList,
+    mlBalance,
+    mlBalanceLocked,
+    mlUnformattedBalance,
+    mlUnformattedBalanceLocked,
+  }
 }
 
 export default useMlWalletInfo

src/pages/SendTransaction/SendTransaction.js

@@ -58,14 +58,16 @@ const SendTransactionPage = () => {
     return
   }
 
-  const mlAddressList = [
+  const mlAddressList = currentMlAddresses && [
     ...currentMlAddresses.mlReceivingAddresses,
     ...currentMlAddresses.mlChangeAddresses,
   ]
 
-  const changeAddressesLength = currentMlAddresses.mlChangeAddresses.length
+  const changeAddressesLength =
+    currentMlAddresses && currentMlAddresses.mlChangeAddresses.length
 
-  const changeAddress = currentMlAddresses.mlChangeAddresses
+  const changeAddress =
+    currentMlAddresses && currentMlAddresses.mlChangeAddresses
 
   const calculateBtcTotalFee = async (transactionInfo) => {
     const transactionSize =