fix: display decimals

EKOKE-DAO · Jan 22, 2024 · a8e65c0 · a8e65c0
1 parent 3612b1a
commit a8e65c0
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 16 deletions.
diff --git a/ethereum/fly/app/src/js/components/Form/Balance.tsx b/ethereum/fly/app/src/js/components/Form/Balance.tsx
@@ -5,20 +5,32 @@ import Container from '../reusable/Container';
 import Heading from '../reusable/Heading';
 import { ChainId } from '../MetamaskConnect';
 
-const Balance = () => {
+const Balance = ({ decimals }: { decimals: number }) => {
   const { account, ethereum, chainId } = useConnectedMetaMask();
-  const [balance, setBalance] = React.useState(0);
+  const [balance, setBalance] = React.useState<string>('0');
 
   React.useEffect(() => {
     const client = new Web3Client(account, ethereum, chainId as ChainId);
-    client.balanceOf(account).then((balance) => {
-      setBalance(balance);
-    });
-  });
+    client
+      .balanceOf(account)
+      .then((accountBalance) => {
+        console.log('balance', accountBalance);
+        // put comma in `decimals` position
+        const balanceStr = accountBalance.toString();
+        const balanceArr = balanceStr.split('');
+        balanceArr.splice(balanceArr.length - decimals, 0, ',');
+        console.log(balanceArr);
+        setBalance(balanceArr.join(''));
+      })
+      .catch((e) => {
+        console.log('failed to get balance', e);
+      });
+  }, [decimals]);
 
   return (
     <Container.Container>
       <Heading.H2>Your current balance: {balance}</Heading.H2>
+      <span>decimals: {decimals}</span>
     </Container.Container>
   );
 };

diff --git a/ethereum/fly/app/src/js/components/Form/Form.tsx b/ethereum/fly/app/src/js/components/Form/Form.tsx
@@ -11,15 +11,34 @@ import RenounceOwnershipForm from './RenounceOwnership/RenounceOwnershipForm';
 import SwappedSupply from './SwappedSupply';
 import MintTestnetTokens from './MintTestnetTokens/MintTestnetTokens';
 import SetFlyCanisterAddressForm from './SetFlyCanisterAddress/SetFlyCanisterAddressForm';
+import Web3Client from '../../web3/Web3Client';
+import { ChainId } from '../MetamaskConnect';
 
 const Form = () => {
-  const { status } = useMetaMask();
+  const { status, account, ethereum, chainId } = useMetaMask();
+
+  const [decimals, setDecimals] = React.useState<number>(0);
+
+  React.useEffect(() => {
+    if (status === 'connected' && account && ethereum && chainId) {
+      const client = new Web3Client(account, ethereum, chainId as ChainId);
+      client
+        .decimals()
+        .then((decs) => {
+          console.log('decimals', decs);
+          setDecimals(Number(decs));
+        })
+        .catch((e) => {
+          console.log('failed to get balance', e);
+        });
+    }
+  }, [status, account, ethereum, chainId]);
 
   const content =
     status === 'connected' ? (
       <Container.FlexCols className="gap-8">
-        <Balance />
-        <SwappedSupply />
+        <Balance decimals={decimals} />
+        <SwappedSupply decimals={decimals} />
         <Card>
           <MintTestnetTokens />
         </Card>

diff --git a/ethereum/fly/app/src/js/components/Form/SetFlyCanisterAddress/SetFlyCanisterAddressForm.tsx b/ethereum/fly/app/src/js/components/Form/SetFlyCanisterAddress/SetFlyCanisterAddressForm.tsx
@@ -44,7 +44,7 @@ const setFlyCanisterAddressForm = () => {
           setAddressSet(address);
         })
         .catch((e) => {
-          console.log(e);
+          console.log('fly canister is probably unset', e);
           setAddressSet(null);
         });
     }

diff --git a/ethereum/fly/app/src/js/components/Form/SwappedSupply.tsx b/ethereum/fly/app/src/js/components/Form/SwappedSupply.tsx
@@ -5,16 +5,21 @@ import Container from '../reusable/Container';
 import Heading from '../reusable/Heading';
 import { ChainId } from '../MetamaskConnect';
 
-const SwappedSupply = () => {
+const SwappedSupply = ({ decimals }: { decimals: number }) => {
   const { account, ethereum, chainId } = useConnectedMetaMask();
-  const [swappedSupply, setSwappedSupply] = React.useState(0);
+  const [swappedSupply, setSwappedSupply] = React.useState<string>('0');
 
   React.useEffect(() => {
     const client = new Web3Client(account, ethereum, chainId as ChainId);
     client.swappedSupply().then((supply) => {
-      setSwappedSupply(supply);
+      // put comma in `decimals` position
+      const supplyStr = supply.toString();
+      const arr = supplyStr.split('');
+      arr.splice(arr.length - decimals, 0, ',');
+      console.log(arr);
+      setSwappedSupply(arr.join(''));
     });
-  });
+  }, [decimals]);
 
   return (
     <Container.Container>

diff --git a/ethereum/fly/app/src/js/web3/Web3Client.ts b/ethereum/fly/app/src/js/web3/Web3Client.ts
@@ -52,12 +52,17 @@ export default class Web3Client {
       .send({ from: this.address });
   }
 
-  async balanceOf(address: string): Promise<number> {
+  async balanceOf(address: string): Promise<BigInt> {
     const contract = this.getContract();
     return contract.methods.balanceOf(address).call();
   }
 
-  async swappedSupply(): Promise<number> {
+  async decimals(): Promise<BigInt> {
+    const contract = this.getContract();
+    return contract.methods.decimals().call();
+  }
+
+  async swappedSupply(): Promise<BigInt> {
     const contract = this.getContract();
     return contract.methods.swappedSupply().call();
   }