diff --git a/package.json b/package.json index c4aeb32..6445ddf 100644 --- a/package.json +++ b/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", diff --git a/src/example/components/AccountSelector.tsx b/src/example/components/AccountSelector.tsx index 88fb973..a16a6dc 100644 --- a/src/example/components/AccountSelector.tsx +++ b/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", diff --git a/src/ui-kit/components/organisms/AccountSelector/Account.tsx b/src/ui-kit/components/organisms/AccountSelector/Account.tsx index e185cc6..22ae764 100644 --- a/src/ui-kit/components/organisms/AccountSelector/Account.tsx +++ b/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 = ({ } + {freeBalance &&
+
+