feat: add retrieval of AR and IO balances for Profile

ar-io · Apr 29, 2024 · 9576c47 · 9576c47
1 parent bdb365d
commit 9576c47
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 35 deletions.
diff --git a/src/components/Profile.tsx b/src/components/Profile.tsx
@@ -1,6 +1,6 @@
 import { Popover } from '@headlessui/react';
 import { useGlobalState } from '@src/store';
-import { formatWalletAddress } from '@src/utils';
+import { formatBalance, formatWalletAddress } from '@src/utils';
 import { forwardRef, useState } from 'react';
 import Button, { ButtonType } from './Button';
 import {
@@ -33,6 +33,7 @@ const Profile = () => {
   );
 
   const wallet = useGlobalState((state) => state.wallet);
+  const balances = useGlobalState((state) => state.balances);
   const updateWallet = useGlobalState((state) => state.updateWallet);
   const walletAddress = useGlobalState((state) => state.walletAddress);
 
@@ -47,16 +48,18 @@ const Profile = () => {
         <div className="flex gap-[8px] py-[20px]">
           <WalletIcon />
           <div className="text-sm text-high">
-            {formatWalletAddress(walletAddress)}
+            {formatWalletAddress(walletAddress.toString())}
           </div>
         </div>
         <div className="rounded-[6px] border border-grey-800 py-[12px]">
           <div className="px-[16px] text-xs text-low">IO Balance</div>
           <div className="border-b border-grey-800 px-[16px] pb-[12px] pt-[4px] text-high">
-            13.7k
+            {formatBalance(balances.io)}
           </div>
           <div className="px-[16px] pt-[12px] text-xs text-low">AR Balance</div>
-          <div className="px-[16px] pt-[4px] text-high">0.06</div>
+          <div className="px-[16px] pt-[4px] text-high">
+            {formatBalance(balances.ar)}
+          </div>
         </div>
         <div className="flex flex-col gap-[12px] py-[12px] text-mid">
           <button className="flex items-center gap-[8px]">

diff --git a/src/components/WalletProvider.tsx b/src/components/WalletProvider.tsx
@@ -2,66 +2,76 @@ import { useEffectOnce } from '@src/hooks/useEffectOnce';
 import { ArConnectWalletConnector } from '@src/services/wallets/ArConnectWalletConnector';
 import { useGlobalState } from '@src/store';
 import { WALLET_TYPES } from '@src/types';
+import { ArweaveTransactionID } from '@src/utils/ArweaveTransactionId';
+import Ar from 'arweave/web/ar';
 import { ReactElement, useEffect } from 'react';
 
+const AR = new Ar();
+
 const WalletProvider = ({ children }: { children: ReactElement }) => {
-  const { setWalletStateInitialized, updateWallet } = useGlobalState();
+  const blockHeight = useGlobalState((state) => state.blockHeight);
+  const walletAddress = useGlobalState((state) => state.walletAddress);
+  const setWalletStateInitialized = useGlobalState(
+    (state) => state.setWalletStateInitialized,
+  );
+  const updateWallet = useGlobalState((state) => state.updateWallet);
+  const setBalances = useGlobalState((state) => state.setBalances);
+  const arweave = useGlobalState((state) => state.arweave);
+  const arIOReadSDK = useGlobalState((state) => state.arIOReadSDK);
 
   useEffect(() => {
     window.addEventListener('arweaveWalletLoaded', updateIfConnected);
 
     return () => {
       window.removeEventListener('arweaveWalletLoaded', updateIfConnected);
     };
-  }, []);
+  });
 
   useEffectOnce(() => {
     setTimeout(() => {
       setWalletStateInitialized(true);
     }, 5000);
   });
 
-  //   useEffect(() => {
-  //     if (walletAddress) {
-  //       updateBalances(walletAddress);
-  //     }
-  //   }, [walletAddress, blockHeight]);
+  useEffect(() => {
+    if (walletAddress) {
+      const updateBalances = async (address: ArweaveTransactionID) => {
+        try {
+          const [mioBalance, arBalance] = await Promise.all([
+            arIOReadSDK.getBalance({ address: address.toString() }),
+            arweave.wallets.getBalance(address.toString()),
+          ]);
 
-  //   const updateBalances = async (address: ArweaveTransactionID) => {
-  //     try {
-  //       const [ioBalance, arBalance] = await Promise.all([
-  //         arweaveDataProvider.getTokenBalance(address, ARNS_REGISTRY_ADDRESS),
-  //         arweaveDataProvider.getArBalance(address),
-  //       ]);
+          const arBalanceNum = +AR.winstonToAr(arBalance);
+          // convert micro IO balance to IO
+          const ioBalance = mioBalance / 1000000;
 
-  //       dispatchWalletState({
-  //         type: 'setBalances',
-  //         payload: {
-  //           [ioTicker]: ioBalance,
-  //           ar: arBalance,
-  //         },
-  //       });
-  //     } catch (error) {
-  //       eventEmitter.emit('error', error);
-  //     }
-  //   };
+          setBalances(arBalanceNum, ioBalance);
+        } catch (error) {
+          // eventEmitter.emit('error', error);
+        }
+      };
+
+      updateBalances(walletAddress);
+    }
+  }, [walletAddress, blockHeight, arIOReadSDK, arweave, setBalances]);
 
-  async function updateIfConnected() {
+  const updateIfConnected = async () => {
     const walletType = window.localStorage.getItem('walletType');
 
     try {
       if (walletType === WALLET_TYPES.ARCONNECT) {
         const connector = new ArConnectWalletConnector();
         const address = await connector?.getWalletAddress();
 
-        updateWallet(address.toString(), connector);
+        updateWallet(address, connector);
       }
     } catch (error) {
       //   eventEmitter.emit('error', error);
     } finally {
       setWalletStateInitialized(true);
     }
-  }
+  };
 
   return <>{children}</>;
 };

diff --git a/src/store/index.ts b/src/store/index.ts
@@ -1,6 +1,7 @@
 import { ArIO, ArIOReadable, EpochDistributionData } from '@ar.io/sdk/web';
 import { THEME_TYPES } from '@src/constants';
 import { ArweaveWalletConnector } from '@src/types';
+import { ArweaveTransactionID } from '@src/utils/ArweaveTransactionId';
 import Arweave from 'arweave/web';
 import { create } from 'zustand';
 
@@ -12,11 +13,11 @@ export type GlobalState = {
   arIOReadSDK: ArIOReadable;
   blockHeight?: number;
   currentEpoch?: EpochDistributionData;
-  walletAddress?: string;
+  walletAddress?: ArweaveTransactionID;
   wallet?: ArweaveWalletConnector;
   balances: {
     ar: number;
-    [x: string]: number;
+    io: number;
   };
   walletStateInitialized: boolean;
 };
@@ -26,9 +27,10 @@ export type GlobalStateActions = {
   setBlockHeight: (blockHeight: number) => void;
   setCurrentEpoch: (currentEpoch: EpochDistributionData) => void;
   updateWallet: (
-    walletAddress?: string,
+    walletAddress?: ArweaveTransactionID,
     wallet?: ArweaveWalletConnector,
   ) => void;
+  setBalances(ar: number, io: number): void;
   setWalletStateInitialized: (initialized: boolean) => void;
   reset: () => void;
 };
@@ -62,10 +64,14 @@ export class GlobalStateActionBase implements GlobalStateActions {
     this.set({ currentEpoch });
   };
 
-  updateWallet = (walletAddress?: string, wallet?: ArweaveWalletConnector) => {
+  updateWallet = (walletAddress?: ArweaveTransactionID, wallet?: ArweaveWalletConnector) => {
     this.set({ walletAddress, wallet });
   };
 
+  setBalances = (ar: number, io: number) => {
+    this.set ({ balances: { ar, io } });
+  };
+
   setWalletStateInitialized = (initialized: boolean) => {
     this.set({ walletStateInitialized: initialized });
   };

diff --git a/src/utils/index.ts b/src/utils/index.ts
@@ -23,3 +23,11 @@ export const formatWalletAddress = (address: string) => {
     address.length,
   )}`;
 };
+
+export const formatBalance = (ar: number) => {
+  return Intl.NumberFormat('en-US', {
+    notation: 'compact',
+    maximumFractionDigits: 2,
+    compactDisplay: 'short',
+  }).format(ar);
+};