feat: display locked balance and free balance

package.json

@@ -37,6 +37,7 @@
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.2.0",
     "bignumber.js": "^9.0.2",
+    "ethers": "5.7.0",
     "qrcode.react": "^3.0.1",
     "react-localization": "^1.0.19",
     "react-syntax-highlighter": "^15.5.0",

src/example/components/AccountSelector.tsx

@@ -10,6 +10,7 @@ import MetaMaskIcon from "./MetaMaskIcon";
 import ReefIcon from "../../ui-kit/components/assets/ReefIcon";
 import ReefSign from "../../ui-kit/components/assets/ReefSign";
 import { WalletConnectLogo } from "../../ui-kit/components/assets/WalletConnect";
+import {BigNumber} from "ethers";
 
 const availableExtensions: Extension[] = [
   {
@@ -52,6 +53,8 @@ const accounts = [
     name: "Test Account 1",
     address: "5CSJtNRJHEazGS4xs5PvmRddTb5xGSwLkhQcs7KAyHAdshpY",
     evmAddress: "0x8Cc9EB01a8B68696768dB0b8D5C6dDF8dE467523",
+    freeBalance: BigNumber.from("0x0d0a800fbbfc34d69740"),
+    lockedBalance: BigNumber.from("0x00"),
   },
   {
     name: "Test Account 2",
@@ -148,7 +151,7 @@ const code = `const accounts = [
   {
     name: "Test Account 1",
     address: "5CSJtNRJHEazGS4xs5PvmRddTb5xGSwLkhQcs7KAyHAdshpY",
-    evmAddress: "0x8Cc9EB01a8B68696768dB0b8D5C6dDF8dE467523"
+    evmAddress: "0x8Cc9EB01a8B68696768dB0b8D5C6dDF8dE467523",
   },
   {
     name: "Test Account 2",

src/ui-kit/components/organisms/AccountSelector/Account.tsx

@@ -1,5 +1,5 @@
 import Identicon from "@polkadot/react-identicon";
-import { formatAddress } from "../../../utils/format";
+import { formatAddress, formatHumanAmount } from "../../../utils/format";
 import CopyButton from "../CopyButton";
 import Button from "../../atoms/Button";
 import QRCode from "../../atoms/QRCode";
@@ -12,6 +12,7 @@ import Input from "../../atoms/Input";
 import Form from "../../atoms/Form";
 import Text from "../../atoms/Text";
 import * as util from '@reef-chain/util-lib';
+import { BigNumber, ethers } from "ethers";
 
 export interface Props {
   name?: string;
@@ -26,6 +27,8 @@ export interface Props {
   onForget?: () => any;
   className?: string;
   isEvmClaimed?: boolean;
+  lockedBalance?:BigNumber;
+  freeBalance?:BigNumber;
 }
 
 const Account = ({
@@ -35,6 +38,8 @@ const Account = ({
   source,
   isSelected,
   isEvmClaimed,
+  lockedBalance,
+  freeBalance,
   showOptions,
   onSelect,
   onRename,
@@ -139,6 +144,29 @@ const Account = ({
         </div>
       }
 
+      {freeBalance && <div className="uik-account-selector-account__balance">
+      <div className="uik-account-selector-account__address">
+        Free Balance : 
+      </div>
+      <div className="uik-account-selector-account__balance">
+        <img src="/logo512.png" alt="" className="uik-account-selector-account__balance-icon"/>
+        <div className="uik-account-selector-account__address">
+        {freeBalance && freeBalance.gt(0)? `${ethers.utils.formatEther(freeBalance).substring(0,ethers.utils.formatEther(freeBalance).indexOf('.'))} REEFs`:"0 REEF"}
+        </div>
+      </div>
+      </div>}
+      {lockedBalance && <div className="uik-account-selector-account__balance">
+      <div className="uik-account-selector-account__address">
+        Locked Balance : 
+      </div>
+      <div className="uik-account-selector-account__balance">
+        <img src="/logo512.png" alt="" className="uik-account-selector-account__balance-icon"/>
+        <div className="uik-account-selector-account__address">
+        {lockedBalance && lockedBalance.gt(0)? `${ethers.utils.formatEther(lockedBalance).substring(0,ethers.utils.formatEther(lockedBalance).indexOf('.'))} REEFs`:"0 REEF"}
+        </div>
+      </div>
+      </div>}
+
         <a
           className="uik-account-selector-account__open-btn"
           href={`https://reefscan.com/account/${address}`}

src/ui-kit/components/organisms/AccountSelector/AccountSelector.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useRef, useState } from "react";
 import { CSSTransition } from "react-transition-group";
+import { BigNumber } from "ethers";
 
 import Icon from "./../../atoms/Icon";
 import {
@@ -46,6 +47,8 @@ export type Account = {
   evmAddress?: string;
   source?: string;
   isEvmClaimed?: boolean;
+  lockedBalance?:BigNumber;
+  freeBalance?:BigNumber;
 };
 
 export type Network = "mainnet" | "testnet";
@@ -566,6 +569,8 @@ function AccountSelector({
                     address={account.address}
                     evmAddress={account.evmAddress}
                     source={account.source}
+                    lockedBalance={account.lockedBalance}
+                    freeBalance={account.freeBalance}
                     isEvmClaimed={account.isEvmClaimed}
                     onSelect={() => select(account)}
                     onRename={
@@ -602,6 +607,8 @@ function AccountSelector({
                     evmAddress={account.evmAddress}
                     source={account.source}
                     isEvmClaimed={account.isEvmClaimed}
+                    lockedBalance={account.lockedBalance}
+                    freeBalance={account.freeBalance}
                     onSelect={() => select(account)}
                     onRename={
                       onRename

src/ui-kit/components/organisms/AccountSelector/index.css

@@ -1,4 +1,14 @@
 .extension-icon{
     display: flex;
     padding-right: 4px;
+}
+
+.uik-account-selector-account__balance{
+    display: flex;
+}
+
+.uik-account-selector-account__balance-icon{
+    width: 1rem;
+    margin-left: 0.5rem;
+    margin-right: 0.2rem;
 }