subtract locked tokens from balance

.gitignore

@@ -5,3 +5,5 @@ dist
 coverage
 .npmrc
 .vscode
+/.yarn/
+.yarnrc

packages/core/README.md

@@ -49,7 +49,7 @@ import { useAccountBalance, useSystemProperties, useAssetBalance } from '@substr
 
 const App = () => {
     const { accounts, w3enable, w3Enabled } = usePolkadotExtension();
-    const { balanceFormatted } = useAccountBalance(accounts?.[0]?.address || '');
+    const balancePayload = useAccountBalance(accounts?.[0]?.address || '');
     const assetPayload = useAssetBalance(accounts?.[0]?.address || '', 8, NETWORKS.statemine);
     const systemProperties = useSystemProperties()
 
@@ -67,10 +67,10 @@ const App = () => {
 
     return (
         <>
-          <h1>Balance</h1>
-          {balanceFormatted && (
-              <div>{balanceFormatted}</div>
-          )}
+          <div>Balance: {balancePayload?.balance.formatted}</div>
+          <div>Locked Balance: {balancePayload && balancePayload?.locked?.formatted}</div>
+          <div>Reserved Balance: {balancePayload?.reserved?.formatted}</div>
+          <div>Total Balance: {balancePayload?.total?.formatted}</div>
         </>
     )
 }

packages/core/src/helpers/get-account-balance.ts

@@ -2,9 +2,16 @@ import { ISystemProperties } from '../types/system-properties';
 import { ApiPromise } from '@polkadot/api';
 import { formatPrice } from './format-price';
 
+interface BalanceDataType {
+  raw: bigint | null;
+  formatted: string | null;
+}
+
 export interface BalanceReturnType {
-  balanceRaw: bigint | null;
-  balanceFormatted: string | null;
+  balance: BalanceDataType;
+  locked?: BalanceDataType;
+  reserved?: BalanceDataType;
+  total?: BalanceDataType;
 }
 
 export const getAccountBalance = (
@@ -13,11 +20,47 @@ export const getAccountBalance = (
   api: ApiPromise,
   callback: (balance: BalanceReturnType) => void,
 ) => {
-  api.query.system.account(account, ({ data: { free: currentFree } }) => {
-    const balanceRaw = currentFree.toBigInt();
-    const balanceFormatted = formatPrice(balanceRaw, systemProperties, true);
-    if (callback) {
-      callback({ balanceFormatted, balanceRaw });
-    }
-  });
+  api.query.system.account(
+    account,
+    ({ data: { free: currentFree, feeFrozen: currentLocked, reserved: currentReserved } }) => {
+      const balanceRaw = currentFree.toBigInt();
+      const balanceLockedRaw = currentLocked.toBigInt();
+      const balanceReservedRaw = currentReserved.toBigInt();
+      const balanceTotalRaw = balanceRaw + balanceReservedRaw;
+
+      const balanceFormatted = formatPrice(balanceRaw, systemProperties, true);
+      const balanceLockedFormatted = formatPrice(balanceLockedRaw, systemProperties, true);
+      const balanceReservedFormatted = formatPrice(balanceReservedRaw, systemProperties, true);
+      const balanceTotalFormatted = formatPrice(balanceTotalRaw, systemProperties, true);
+
+      const balance = {
+        raw: balanceRaw,
+        formatted: balanceFormatted,
+      };
+
+      const locked = {
+        raw: balanceLockedRaw,
+        formatted: balanceLockedFormatted,
+      };
+
+      const reserved = {
+        raw: balanceReservedRaw,
+        formatted: balanceReservedFormatted,
+      };
+
+      const total = {
+        raw: balanceTotalRaw,
+        formatted: balanceTotalFormatted,
+      };
+
+      if (callback) {
+        callback({
+          balance,
+          locked,
+          reserved,
+          total,
+        });
+      }
+    },
+  );
 };

packages/core/src/helpers/get-asset-balance.ts

@@ -3,7 +3,7 @@ import { ApiPromise } from '@polkadot/api';
 import { formatPrice } from './format-price';
 import { fetchSystemProperties } from './fetch-system-properties';
 import { BalanceReturnType } from './get-account-balance';
-import {hexToString} from "@polkadot/util";
+import { hexToString } from '@polkadot/util';
 
 export const getAssetBalance = async (
   account: string,
@@ -25,7 +25,13 @@ export const getAssetBalance = async (
           { tokenDecimals, tokenSymbol, ss58Format: _systemProperties.ss58Format },
           true,
         );
-        callback({ balanceFormatted, balanceRaw });
+
+        const balance = {
+          raw: balanceRaw,
+          formatted: balanceFormatted,
+        };
+
+        callback({ balance });
       });
     }
   });

packages/core/src/hooks/use-account-balance.ts

@@ -20,11 +20,19 @@ export const useAccountBalance = (
 
   useEffect(() => {
     if (account && apiProvider && systemProperties) {
-      const callback = ({ balanceFormatted, balanceRaw }: BalanceReturnType) => {
+      const callback = ({ balance, locked, reserved, total }: BalanceReturnType) => {
         if (isMountedRef.current) {
           balancesDispatch({
             type: BalanceTypes.SET_BALANCE,
-            payload: { network: networkId, balance: { balanceFormatted, balanceRaw } },
+            payload: {
+              network: networkId,
+              balance: {
+                balance,
+                locked,
+                reserved,
+                total,
+              },
+            },
           });
         }
       };

packages/core/src/hooks/use-asset-balance.ts

@@ -22,11 +22,11 @@ export const useAssetBalance = (
 
   useEffect(() => {
     if (account && apiProvider && assetId) {
-      const callback = ({ balanceFormatted, balanceRaw }: BalanceReturnType) => {
+      const callback = ({ balance }: BalanceReturnType) => {
         if (isMountedRef.current) {
           balancesDispatch({
             type: BalanceTypes.SET_ASSET,
-            payload: { network: networkId, balance: { balanceFormatted, balanceRaw }, assetId },
+            payload: { network: networkId, balance: { balance }, assetId },
           });
         }
       };

packages/example-nextjs/package.json

@@ -9,16 +9,17 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@substra-hooks/core": "^0.0.28",
     "next": "12.0.3",
     "react": "17.0.2",
     "react-dom": "17.0.2"
   },
   "devDependencies": {
+    "@substra-hooks/core": "*",
     "@types/node": "16.11.6",
     "@types/react": "17.0.34",
     "eslint": "7",
     "eslint-config-next": "12.0.3",
-    "@substra-hooks/core": "*",
     "typescript": "4.4.4"
   }
 }

packages/example-nextjs/pages/index.tsx

@@ -1,6 +1,5 @@
 import type { NextPage } from 'next';
 import Head from 'next/head';
-import Image from 'next/image';
 import styles from '../styles/Home.module.css';
 import {
   useAccountBalance,
@@ -9,12 +8,18 @@ import {
   useSystemProperties,
 } from '@substra-hooks/core';
 import { useEffect } from 'react';
-import Link from 'next/link'
+import Link from 'next/link';
 
 const Home: NextPage = () => {
   const { accounts, w3enable, w3Enabled } = usePolkadotExtension();
-  const balancePayload = useAccountBalance(accounts?.[5]?.address || '');
-  const assetPayload = useAssetBalance(accounts?.[5]?.address || '', 8, 'statemine');
+  const balancePayload = useAccountBalance(
+    accounts?.[5]?.address || 'D6HSL6nGXHLYWSN8jiL9MSNixH2F2o382KkHsZAtfZvBnxM',
+  );
+  const assetPayload = useAssetBalance(
+    accounts?.[5]?.address || 'D6HSL6nGXHLYWSN8jiL9MSNixH2F2o382KkHsZAtfZvBnxM',
+    8,
+    'statemine',
+  );
   const systemProperties = useSystemProperties();
 
   console.log('systemProperties', systemProperties);
@@ -27,8 +32,7 @@ const Home: NextPage = () => {
 
   console.log('accounts', accounts);
 
-  console.log('balancePayload', accounts?.[5]?.address || '', balancePayload);
-  console.log('assetPayload', assetPayload);
+  console.log('balancePayload', balancePayload);
 
   return (
     <div className={styles.container}>
@@ -38,14 +42,18 @@ const Home: NextPage = () => {
         <link rel="icon" href="/favicon.ico" />
       </Head>
 
-
       <main className={styles.main}>
-        <div>Balance: {balancePayload?.balanceFormatted}</div>
-        <div>Asset balance: {assetPayload?.balanceFormatted}</div>
-        <Link href={'/page-two'}>Page two</Link>
-      </main>
+        <div>Balance: {balancePayload?.balance.formatted}</div>
+        <div>Locked Balance: {balancePayload && balancePayload?.locked?.formatted}</div>
+        <div>Reserved Balance: {balancePayload?.reserved?.formatted}</div>
+        <div>Total Balance: {balancePayload?.total?.formatted}</div>
 
+        <br />
+        <div>Asset balance: {assetPayload?.balance.formatted}</div>
 
+        <br />
+        <Link href={'/page-two'}>Page two</Link>
+      </main>
     </div>
   );
 };