feat: expose reserved balance.

logion-network/logion-internal#1055
logion-network · Nov 9, 2023 · 8445d75 · 8445d75
1 parent 60605be
commit 8445d75
Show file tree

Hide file tree

Showing 19 changed files with 233 additions and 78 deletions.
diff --git a/src/common/AccountAddress.css b/src/common/AccountAddress.css
@@ -40,8 +40,8 @@
     text-overflow: ellipsis;
 }
 
-.AccountAddress .text .balance .symbol {
-    font-size: 0.7rem;
+.AccountAddress .text .balance .reserved {
+    opacity: 0.5;
 }
 
 .AccountAddress .text .name {

diff --git a/src/common/AccountAddress.test.tsx b/src/common/AccountAddress.test.tsx
@@ -9,7 +9,8 @@ test("renders", () => {
         <AccountAddress
             balance={{
                 available: new Numbers.PrefixedNumber("2", Numbers.NONE),
-                balance: new Numbers.PrefixedNumber("2", Numbers.NONE),
+                total: new Numbers.PrefixedNumber("2", Numbers.NONE),
+                reserved: new Numbers.PrefixedNumber("0", Numbers.NONE),
                 coin: {
                     id: "lgnt",
                     symbol: "LGNT"

diff --git a/src/common/AccountAddress.tsx b/src/common/AccountAddress.tsx
@@ -9,6 +9,7 @@ import Icon from './Icon';
 
 import './AccountAddress.css';
 import { Spinner } from "react-bootstrap";
+import InlineAmount from "src/components/inlineamount/InlineAmount";
 
 export interface Props {
     balance?: CoinBalance | null;
@@ -83,8 +84,23 @@ export default function AccountAddress(props: Props) {
                             color: colorTheme.accounts.foreground,
                         }}
                     >
-                        <span className="amount">{ props.balance === null ? <Spinner size="sm"/> : props.balance.balance.coefficient.toFixedPrecision(2) }</span>{" "}
-                        <span className="symbol">{ (props.balance?.balance.prefix.symbol || "") + (props.balance?.coin.symbol || "LGNT") }</span>
+                        {
+                            props.balance === null &&
+                            <Spinner size="sm"/>
+                        }
+                        {
+                            props.balance !== null &&
+                            <>
+                            <InlineAmount amount={ props.balance.available } coin={ props.balance.coin } />{" "}
+                            {
+                                !props.balance.reserved.coefficient.isZero() &&
+                                <span className="reserved">
+                                    +{" "}
+                                    <InlineAmount amount={ props.balance.reserved } coin={ props.balance.coin } />
+                                </span>
+                            }
+                            </>
+                        }
                     </div>
                 }
             </div>

diff --git a/src/common/BalanceDetails.css b/src/common/BalanceDetails.css
@@ -0,0 +1,21 @@
+.BalanceDetails {
+    font-size: 1rem;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.BalanceDetails .detail {
+    display: flex;
+    justify-content: space-between;
+}
+
+.BalanceDetails .label {
+    display: inline-block;
+    width: 130px;
+}
+
+.BalanceDetails.arc {
+    width: 300px;
+    padding-top: 40px;
+    padding-bottom: 30px;
+}
diff --git a/src/common/BalanceDetails.tsx b/src/common/BalanceDetails.tsx
@@ -0,0 +1,33 @@
+import { CoinBalance } from "@logion/node-api";
+import InlineAmount from "src/components/inlineamount/InlineAmount";
+import "./BalanceDetails.css";
+
+export interface Props {
+    balance: CoinBalance;
+    type: 'arc' | 'linear';
+}
+
+export default function BalanceDetails(props: Props) {
+    return (
+        <div className={ `BalanceDetails ${props.type}` }>
+            <div className="detail">
+                <div className="label">Available:</div>
+                <div className="amount">
+                    <InlineAmount amount={ props.balance.available } coin={ props.balance.coin } />
+                </div>
+            </div>
+            <div className="detail">
+                <div className="label">Reserved:</div>
+                <div className="amount">
+                    <InlineAmount amount={ props.balance.reserved } coin={ props.balance.coin } />
+                </div>
+            </div>
+            <div className="detail">
+                <div className="label">Total:</div>
+                <div className="amount">
+                    <InlineAmount amount={ props.balance.total } coin={ props.balance.coin } />
+                </div>
+            </div>
+        </div>
+    );
+}
diff --git a/src/common/TestData.ts b/src/common/TestData.ts
@@ -127,8 +127,9 @@ export const DEFAULT_COIN: Coin = {
 
 export const DEFAULT_COIN_BALANCE: CoinBalance = {
     coin: DEFAULT_COIN,
-    balance: new Numbers.PrefixedNumber("42", Numbers.ATTO),
+    total: new Numbers.PrefixedNumber("42", Numbers.ATTO),
     available: new Numbers.PrefixedNumber("42", Numbers.ATTO),
+    reserved: new Numbers.PrefixedNumber("0", Numbers.ATTO),
     level: 0.1,
 };
 

diff --git a/src/common/Transactions.tsx b/src/common/Transactions.tsx
@@ -156,10 +156,8 @@ function Content(props: ContentProps) {
                             title={ <BalanceFrameTitle coin={ balance.coin } /> }
                         >
                             <WalletGauge
-                                coin={ balance.coin }
-                                balance={ balance.balance }
+                                balance={ balance }
                                 type='linear'
-                                level={ balance.level }
                                 vaultAddress={ vaultAddress }
                             />
                         </Frame>
@@ -188,10 +186,8 @@ function Content(props: ContentProps) {
                             className="gauge-container"
                         >
                             <WalletGauge
-                                coin={ balance.coin }
-                                balance={ balance.balance }
+                                balance={ balance }
                                 type='arc'
-                                level={ balance.level }
                                 sendButton={ false }
                             />
                         </Frame>

diff --git a/src/common/Wallet.tsx b/src/common/Wallet.tsx
@@ -63,7 +63,6 @@ export function Content(props: Props & { type: WalletType }) {
 
     const latestTransaction = transactions[0];
 
-    const gaugeCoin = balances[0].coin;
     return (
         <>
         {
@@ -98,7 +97,7 @@ export function Content(props: Props & { type: WalletType }) {
                             },
                             {
                                 header: "Balance",
-                                render: balance => <Cell content={ balance.balance.coefficient.toFixedPrecision(2) } />,
+                                render: balance => <Cell content={ balance.available.coefficient.toFixedPrecision(2) } />,
                                 width: width({
                                     onSmallScreen: "120px",
                                     otherwise: "140px"
@@ -115,7 +114,7 @@ export function Content(props: Props & { type: WalletType }) {
                             },
                             {
                                 header: "Last transaction amount",
-                                render: balance => <Cell content={ balance.coin.id !== 'dot' && latestTransaction !== undefined ? toPrefixedLgnt(transactionAmount(latestTransaction)).convertTo(balance.balance.prefix).coefficient.toFixedPrecision(2) : '-' } />,
+                                render: balance => <Cell content={ balance.coin.id !== 'dot' && latestTransaction !== undefined ? toPrefixedLgnt(transactionAmount(latestTransaction)).convertTo(balance.available.prefix).coefficient.toFixedPrecision(2) : '-' } />,
                                 align: 'right',
                             },
                             {
@@ -145,9 +144,7 @@ export function Content(props: Props & { type: WalletType }) {
                         className="gauge-container"
                     >
                         <WalletGauge
-                            coin={ gaugeCoin }
-                            balance={ balances[0].balance }
-                            level={ balances[0].level }
+                            balance={ balances[0] }
                             type='arc'
                             vaultAddress={ vaultAddress }
                         />
@@ -167,7 +164,7 @@ export function AssetNameCell(props: AssetNameCellProps) {
 
     return (
         <div className="asset-name-cell">
-            <span className="name"><CoinName coinId={ props.balance.coin.id }/> ({ props.balance.balance.prefix.symbol }{ props.balance.coin.symbol })</span>
+            <span className="name"><CoinName coinId={ props.balance.coin.id }/> ({ props.balance.available.prefix.symbol }{ props.balance.coin.symbol })</span>
         </div>
     );
 }

diff --git a/src/common/WalletGauge.css b/src/common/WalletGauge.css
@@ -4,7 +4,6 @@
 }
 
 .WalletGauge.arc .actions {
-    margin-top: 60px;
     margin-bottom: 30px;
     margin-left: auto;
     margin-right: auto;

diff --git a/src/common/WalletGauge.test.tsx b/src/common/WalletGauge.test.tsx
@@ -1,7 +1,7 @@
 jest.mock("../logion-chain");
 
 import { shallowRender } from '../tests';
-import { Queries, Numbers } from '@logion/node-api';
+import { CoinBalance, Queries, Numbers } from '@logion/node-api';
 
 import WalletGauge from './WalletGauge';
 
@@ -10,10 +10,15 @@ test("renders arc", () => {
 });
 
 function testWalletGauge(type: 'arc' | 'linear') {
+    const balance: CoinBalance = {
+        coin: Queries.getCoin('lgnt'),
+        available: new Numbers.PrefixedNumber("20.00", Numbers.MILLI),
+        reserved: new Numbers.PrefixedNumber("0", Numbers.NONE),
+        total: new Numbers.PrefixedNumber("20.00", Numbers.MILLI),
+        level: 0.5,
+    };
     const result = shallowRender(<WalletGauge
-        coin={ Queries.getCoin('lgnt') }
-        balance={ new Numbers.PrefixedNumber("20.00", Numbers.MILLI) }
-        level={ 0.5 }
+        balance={ balance }
         type={ type }
     />);
     expect(result).toMatchSnapshot();

diff --git a/src/common/WalletGauge.tsx b/src/common/WalletGauge.tsx
@@ -1,7 +1,7 @@
 import { useState, useCallback } from 'react';
 import { Form, Spinner, InputGroup, DropdownButton, Dropdown } from 'react-bootstrap';
-import { BalanceState } from '@logion/client/dist/Balance.js';
-import { Numbers, Coin, Currency } from '@logion/node-api';
+import { BalanceState } from '@logion/client';
+import { Numbers, CoinBalance, Currency } from '@logion/node-api';
 
 import { useLogionChain } from '../logion-chain';
 import ClientExtrinsicSubmitter, { Call, CallCallback } from '../ClientExtrinsicSubmitter';
@@ -16,11 +16,10 @@ import Alert from './Alert';
 import TransactionConfirmation, { Status } from "./TransactionConfirmation";
 
 import './WalletGauge.css';
+import BalanceDetails from './BalanceDetails';
 
 export interface Props {
-    coin: Coin,
-    balance: Numbers.PrefixedNumber,
-    level: number,
+    balance: CoinBalance,
     type: 'arc' | 'linear',
     vaultAddress?: string,
     sendButton?: boolean
@@ -72,10 +71,14 @@ export default function WalletGauge(props: Props) {
             children={ (status, startTransferringCallback, cancelCallback, successCallback) => {
                 return <div className={ "WalletGauge " + props.type }>
                     <Gauge
-                        readingIntegerPart={ props.balance.coefficient.toInteger() }
-                        readingDecimalPart={ props.balance.coefficient.toFixedPrecisionDecimals(2) }
-                        unit={ props.balance.prefix.symbol + Currency.SYMBOL }
-                        level={ props.level }
+                        readingIntegerPart={ props.balance.available.coefficient.toInteger() }
+                        readingDecimalPart={ props.balance.available.coefficient.toFixedPrecisionDecimals(2) }
+                        unit={ props.balance.available.prefix.symbol + Currency.SYMBOL }
+                        level={ props.balance.level }
+                        type={ props.type }
+                    />
+                    <BalanceDetails
+                        balance={ props.balance }
                         type={ props.type }
                     />
                     { (sendButton === undefined || sendButton) &&

diff --git a/src/common/__snapshots__/AccountAddress.test.tsx.snap b/src/common/__snapshots__/AccountAddress.test.tsx.snap
@@ -79,17 +79,34 @@ exports[`renders 1`] = `
         }
       }
     >
-      <span
-        className="amount"
-      >
-        2.00
-      </span>
-       
-      <span
-        className="symbol"
-      >
-        LGNT
-      </span>
+      <React.Fragment>
+        <InlineAmount
+          amount={
+            PrefixedNumber {
+              "_prefix": Object {
+                "symbol": "",
+                "tenExponent": 0,
+              },
+              "_scientificNumber": ScientificNumber {
+                "_normalized": NormalizedNumber {
+                  "_decimalPart": "",
+                  "_integerPart": "2",
+                  "_negative": false,
+                  "_normalized": "2.",
+                },
+                "_tenExponent": 0,
+              },
+            }
+          }
+          coin={
+            Object {
+              "id": "lgnt",
+              "symbol": "LGNT",
+            }
+          }
+        />
+         
+      </React.Fragment>
     </div>
   </div>
 </div>