logion-network · gdethier · May 8, 2024 · May 8, 2024
diff --git a/package.json b/package.json
@@ -10,10 +10,10 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@creativecommons/cc-assets": "^0.1.0",
-    "@logion/client": "^0.43.1-5",
+    "@logion/client": "^0.44.0-1",
     "@logion/client-browser": "^0.3.5",
     "@logion/crossmint": "^0.1.32",
-    "@logion/extension": "^0.8.0",
+    "@logion/extension": "^0.8.1-1",
     "@logion/multiversx": "^0.1.13",
     "@multiversx/sdk-extension-provider": "^2.0.7",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",

diff --git a/public/assets/dot.png b/public/assets/dot.png
diff --git a/src/__mocks__/@logion/node-api/index.ts b/src/__mocks__/@logion/node-api/index.ts
@@ -14,8 +14,7 @@ export {
 } from "@logion/node-api";
 
 export type {
-    Coin,
-    CoinBalance,
+    TypesAccountData,
 } from "@logion/node-api";
 
 import { api } from "src/__mocks__/LogionMock";

diff --git a/src/common/AccountAddress.test.tsx b/src/common/AccountAddress.test.tsx
@@ -1,4 +1,4 @@
-import { Numbers } from "@logion/node-api";
+import { Lgnt, Numbers } from "@logion/node-api";
 import { shallowRender } from '../tests';
 
 import AccountAddress from './AccountAddress';
@@ -10,14 +10,9 @@ describe("AccountAddress", () => {
         const result = shallowRender(
             <AccountAddress
                 balance={{
-                    available: 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"
-                    },
-                    level: 1
+                    available: Lgnt.from(2),
+                    total: Lgnt.from(2),
+                    reserved: Lgnt.zero(),
                 }}
                 account={{
                     name: "Name 1",

diff --git a/src/common/AccountAddress.tsx b/src/common/AccountAddress.tsx
@@ -1,4 +1,4 @@
-import { CoinBalance } from "@logion/node-api";
+import { Lgnt, TypesAccountData } from '@logion/node-api';
 import { CSSProperties, useCallback } from 'react';
 import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
 import Tooltip from 'react-bootstrap/Tooltip';
@@ -13,7 +13,7 @@ import { Spinner } from "react-bootstrap";
 import InlineAmount from "src/components/inlineamount/InlineAmount";
 
 export interface Props {
-    balance?: CoinBalance | null;
+    balance?: TypesAccountData | null;
     account: Account;
     disabled: boolean;
     login?: () => void;
@@ -101,12 +101,12 @@ export default function AccountAddress(props: Props) {
                         {
                             props.balance !== null &&
                             <>
-                            <InlineAmount amount={ props.balance.available } coin={ props.balance.coin } />{" "}
+                            <InlineAmount amount={ props.balance.available } />{" "}
                             {
-                                !props.balance.reserved.coefficient.isZero() &&
+                                props.balance.reserved.compareTo(Lgnt.zero()) !== 0 &&
                                 <span className="reserved">
                                     +{" "}
-                                    <InlineAmount amount={ props.balance.reserved } coin={ props.balance.coin } />
+                                    <InlineAmount amount={ props.balance.reserved } />
                                 </span>
                             }
                             </>

diff --git a/src/common/AddressSwitcher.tsx b/src/common/AddressSwitcher.tsx
@@ -25,13 +25,7 @@ export default function AddressSwitcher() {
         selectAddressCallback(address);
     }, [ authenticate, selectAddressCallback ]);
 
-    const balance = useMemo(() => {
-        if(balanceState && balanceState.balances.length > 0) {
-            return balanceState.balances[0];
-        } else {
-            return null;
-        }
-    }, [ balanceState ]);
+    const balance = useMemo(() => balanceState?.balance || null, [ balanceState ]);
 
     if(accounts === null || selectAddress === null || accounts.current === undefined) {
         return null;

diff --git a/src/common/Amount.ts b/src/common/Amount.ts
@@ -0,0 +1,20 @@
+import { Lgnt, Numbers, TypesAccountData } from "@logion/node-api";
+import { useMemo } from "react";
+
+export function useAvailableMemo(balance: TypesAccountData | undefined) {
+    return useMemo(() => {
+        if(balance) {
+            return toOptimizedNumber(balance.available);
+        } else {
+            return Numbers.PrefixedNumber.ZERO;
+        }
+    }, [ balance ]);
+}
+
+export function toOptimizedNumber(amount: Lgnt) {
+    return amount.toPrefixedNumber().optimizeScale(3);
+}
+
+export function balanceLevel(amount: Numbers.PrefixedNumber) {
+    return amount.toNumber() === 0 ? 0 : 1;
+}
diff --git a/src/common/AssetNameCell.tsx b/src/common/AssetNameCell.tsx
@@ -1,15 +1,14 @@
-import { CoinBalance } from "@logion/node-api";
-import CoinName from "src/components/coin/CoinName";
+import { Lgnt, Numbers } from "@logion/node-api";
 
 export interface Props {
-    balance: CoinBalance;
+    unit: Numbers.UnitPrefix;
 }
 
 export default function AssetNameCell(props: Props) {
 
     return (
         <div className="asset-name-cell">
-            <span className="name"><CoinName coinId={ props.balance.coin.id }/> ({ props.balance.available.prefix.symbol }{ props.balance.coin.symbol })</span>
+            <span className="name">Logion Token ({ props.unit.symbol }{ Lgnt.CODE })</span>
         </div>
     );
 }
diff --git a/src/common/BalanceDetails.tsx b/src/common/BalanceDetails.tsx
@@ -1,9 +1,9 @@
-import { CoinBalance } from "@logion/node-api";
+import { TypesAccountData } from "@logion/node-api";
 import InlineAmount from "src/components/inlineamount/InlineAmount";
 import "./BalanceDetails.css";
 
 export interface Props {
-    balance: CoinBalance;
+    balance: TypesAccountData;
 }
 
 export default function BalanceDetails(props: Props) {
@@ -12,19 +12,19 @@ export default function BalanceDetails(props: Props) {
             <div className="detail">
                 <div className="label">Available:</div>
                 <div className="amount">
-                    <InlineAmount amount={ props.balance.available } coin={ props.balance.coin } />
+                    <InlineAmount amount={ props.balance.available } />
                 </div>
             </div>
             <div className="detail">
                 <div className="label">Reserved:</div>
                 <div className="amount">
-                    <InlineAmount amount={ props.balance.reserved } coin={ props.balance.coin } />
+                    <InlineAmount amount={ props.balance.reserved } />
                 </div>
             </div>
             <div className="detail">
                 <div className="label">Total:</div>
                 <div className="amount">
-                    <InlineAmount amount={ props.balance.total } coin={ props.balance.coin } />
+                    <InlineAmount amount={ props.balance.total } />
                 </div>
             </div>
         </div>

diff --git a/src/common/BalanceGauge.tsx b/src/common/BalanceGauge.tsx
@@ -0,0 +1,21 @@
+import { Lgnt, TypesAccountData } from "@logion/node-api";
+import Gauge from "./Gauge";
+import { balanceLevel, useAvailableMemo } from "./Amount";
+
+export interface Props {
+    balance?: TypesAccountData;
+}
+
+export default function BalanceGauge(props: Props) {
+
+    const balance = useAvailableMemo(props.balance);
+
+    return (
+        <Gauge
+            readingIntegerPart={ balance.coefficient.toInteger() }
+            readingDecimalPart={ balance.coefficient.toFixedPrecisionDecimals(2) }
+            unit={ balance.prefix.symbol + Lgnt.CODE }
+            level={ balanceLevel(balance) }
+        />
+    );
+}
diff --git a/src/common/BalanceReading.tsx b/src/common/BalanceReading.tsx
@@ -0,0 +1,22 @@
+import { Lgnt, TypesAccountData } from '@logion/node-api';
+import './Reading.css';
+import Reading from './Reading';
+import { balanceLevel, useAvailableMemo } from './Amount';
+
+export interface Props {
+    balance?: TypesAccountData;
+}
+
+export default function BalanceReading(props: Props) {
+
+    const balance = useAvailableMemo(props.balance);
+
+    return (
+        <Reading
+            readingIntegerPart={ balance.coefficient.toInteger() }
+            readingDecimalPart={ balance.coefficient.toFixedPrecisionDecimals(2) }
+            unit={ balance.prefix.symbol + Lgnt.CODE }
+            level={ balanceLevel(balance) }
+        />
+    );
+}
diff --git a/src/common/TestData.ts b/src/common/TestData.ts
@@ -1,7 +1,7 @@
 import { LegalOfficer, PostalAddress, UserIdentity } from '@logion/client';
 import { LegalOfficerClass } from "@logion/client/dist/Types.js";
 import { Transaction } from '@logion/client';
-import { Coin, CoinBalance, Numbers, Lgnt } from '@logion/node-api';
+import { TypesAccountData, Numbers, Lgnt } from '@logion/node-api';
 
 import { ColorTheme, rgbaToHex } from './ColorTheme';
 
@@ -121,17 +121,16 @@ export const COLOR_THEME: ColorTheme = {
     },
 };
 
-export const DEFAULT_COIN: Coin = {
-    id: 'lgnt',
-    symbol: Lgnt.CODE,
+export const DEFAULT_COIN_BALANCE: TypesAccountData = {
+    total: Lgnt.fromCanonical(42n),
+    available: Lgnt.fromCanonical(42n),
+    reserved: Lgnt.zero(),
 };
 
-export const DEFAULT_COIN_BALANCE: CoinBalance = {
-    coin: DEFAULT_COIN,
-    total: new Numbers.PrefixedNumber("42", Numbers.ATTO),
-    available: new Numbers.PrefixedNumber("42", Numbers.ATTO),
-    reserved: new Numbers.PrefixedNumber("0", Numbers.ATTO),
-    level: 0.1,
+export const ZERO_BALANCE: TypesAccountData = {
+    total: Lgnt.zero(),
+    available: Lgnt.zero(),
+    reserved: Lgnt.zero(),
 };
 
 export const DEFAULT_TRANSACTION: Transaction = {

diff --git a/src/common/Transactions.test.tsx b/src/common/Transactions.test.tsx
@@ -4,47 +4,34 @@ jest.mock("./CommonContext");
 import { shallowRender } from '../tests';
 
 import Transactions from './Transactions';
-import { setBalanceState } from './__mocks__/CommonContextMock';
-import { setParams } from '../__mocks__/ReactRouterMock';
-import { DEFAULT_COIN_BALANCE, DEFAULT_TRANSACTION, DEFAULT_FAILED_TRANSACTION } from './TestData';
-import { BalanceState } from '@logion/client/dist/Balance.js';
+import { DEFAULT_COIN_BALANCE, DEFAULT_FAILED_TRANSACTION, ZERO_BALANCE } from './TestData';
 import { TEST_WALLET_USER } from 'src/wallet-user/TestData';
 
 test('renders null with missing data', () => {
     const result = shallowRender(<Transactions
         account={ TEST_WALLET_USER }
-        balances={ [] }
+        balance={ null }
         transactions={ [] }
         type="Wallet"
     />);
     expect(result).toMatchSnapshot();
 });
 
 test('renders with all data', () => {
-    setParams({coinId: 'lgnt'});
-    setBalanceState({
-        balances: [ DEFAULT_COIN_BALANCE ],
-        transactions: [ DEFAULT_TRANSACTION ],
-    } as BalanceState);
     const result = shallowRender(<Transactions
         account={ TEST_WALLET_USER }
-        balances={ [] }
+        balance={ DEFAULT_COIN_BALANCE }
         transactions={ [] }
         type="Wallet"
     />);
     expect(result).toMatchSnapshot();
 });
 
 test('renders failed transaction', () => {
-    setParams({coinId: 'lgnt'});
-    setBalanceState({
-        balances: [ DEFAULT_COIN_BALANCE ],
-        transactions: [ DEFAULT_FAILED_TRANSACTION ],
-    } as BalanceState);
     const result = shallowRender(<Transactions
         account={ TEST_WALLET_USER }
-        balances={ [] }
-        transactions={ [] }
+        balance={ DEFAULT_COIN_BALANCE }
+        transactions={ [ DEFAULT_FAILED_TRANSACTION ] }
         type="Wallet"
     />);
     expect(result).toMatchSnapshot();

diff --git a/src/common/Transactions.tsx b/src/common/Transactions.tsx
@@ -1,10 +1,9 @@
-import { useParams } from 'react-router';
 import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
 import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
 import Tooltip from 'react-bootstrap/Tooltip';
 import { Transaction } from '@logion/client';
-import { CoinBalance, ValidAccountId } from '@logion/node-api';
+import { TypesAccountData, ValidAccountId } from '@logion/node-api';
 
 import { FullWidthPane } from './Dashboard';
 import Frame from './Frame';
@@ -31,17 +30,17 @@ export type WalletType = "Wallet" | "Vault";
 
 export interface Props {
     account?: ValidAccountId,
-    balances: CoinBalance[] | null,
+    balance: TypesAccountData | null,
     transactions: Transaction[] | null,
     type: WalletType,
     vaultAddress?: ValidAccountId,
 }
 
 export default function Transactions(props: Props) {
     const { colorTheme } = useCommonContext();
-    const { account, balances, transactions, type, vaultAddress } = props;
+    const { account, balance, transactions, type, vaultAddress } = props;
 
-    if (balances === null || transactions === null) {
+    if (balance === null || transactions === null) {
         return null;
     }
 
@@ -56,22 +55,21 @@ export default function Transactions(props: Props) {
                 background: colorTheme.topMenuItems.iconGradient,
             } }
         >
-            <Content account={ account } balances={ balances } transactions={ transactions } type={ type } vaultAccount={ vaultAddress }/>
+            <Content account={ account } balance={ balance } transactions={ transactions } type={ type } vaultAccount={ vaultAddress }/>
         </FullWidthPane>
     );
 }
 
 interface ContentProps {
     account?: ValidAccountId,
-    balances: CoinBalance[],
+    balance: TypesAccountData,
     transactions: Transaction[],
     type: WalletType,
     vaultAccount?: ValidAccountId,
 }
 
 function Content(props: ContentProps) {
-    const { account, balances, transactions, type, vaultAccount } = props;
-    const { coinId } = useParams<"coinId">();
+    const { account, balance, transactions, type, vaultAccount } = props;
     const { width } = useResponsiveContext();
 
     const addressTitle = useMemo(() => {
@@ -82,11 +80,10 @@ function Content(props: ContentProps) {
         }
     }, [ props.type ]);
 
-    if (balances === null || transactions === null) {
+    if (balance === null || transactions === null) {
         return <Loader />;
     }
 
-    const balance = balances.filter(balance => balance.coin.id === coinId)[0];
     const columns: Column<Transaction>[] = [
         {
             header: "Status",

diff --git a/src/common/WalletGauge.test.tsx b/src/common/WalletGauge.test.tsx
@@ -1,19 +1,17 @@
 jest.mock("../logion-chain");
 
 import { shallowRender } from '../tests';
-import { CoinBalance, Queries, Numbers } from '@logion/node-api';
+import { TypesAccountData, Lgnt } from '@logion/node-api';
 
 import WalletGauge from './WalletGauge';
 
 describe("WalletGauge", () => {
 
     it("renders", () => {
-        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 balance: TypesAccountData = {
+            available: Lgnt.from(0.02),
+            reserved: Lgnt.zero(),
+            total: Lgnt.from(0.02),
         };
         const result = shallowRender(<WalletGauge
             balance={ balance }