Display circulating supply on home page (#95)

Author: dboreham

web-app/src/modules/core/routes/Home/Stats/Stats.tsx

@@ -4,7 +4,7 @@ import { Link, NavLink } from 'react-router-dom';
 import useAptos from '../../../../aptos';
 import {
   useLedgerInfo,
-  useTotalSupply,
+  useCirculatingSupply,
   useValidatorSet,
   useAccountsStats,
   useTotalTransactions,
@@ -56,7 +56,7 @@ const Stats: FC = () => {
   const [nextEpoch, setNextEpoch] = useState<Date>();
   const [nextEpochDate, setNextEpochDate] = useState<string>();
 
-  const totalSupply = useTotalSupply();
+  const circulatingSupply = useCirculatingSupply();
   const ledgerInfo = useLedgerInfo();
   const accountsStats = useAccountsStats();
   const totalTransactions = useTotalTransactions();
@@ -114,13 +114,13 @@ const Stats: FC = () => {
         </div>
 
         <div className="flex flex-col bg-[#F5F5F5] p-5 gap-2">
-          <span className="text-sm font-medium text-[#525252]">Total Supply</span>
+          <span className="text-sm font-medium text-[#525252]">Circulating Supply</span>
           <span
             className={`text-2xl md:text-3xl tracking-tight text-[#141414] h-8 rounded ${
-              !totalSupply ? 'animate-pulse bg-gray-300 text-2xl space-y-4' : ''
+              !circulatingSupply ? 'animate-pulse bg-gray-300 text-2xl space-y-4' : ''
             }`}
           >
-            {totalSupply ? `${d3Format('.3f')(Math.floor(totalSupply.amount / 1e6) / 1e3)}B` : null}
+            {circulatingSupply ? `${d3Format('.3f')(Math.floor(circulatingSupply.amount / 1e3) / 1e3)}M` : null}
           </span>
         </div>
 

web-app/src/modules/ol/index.ts

@@ -114,6 +114,40 @@ export const useTotalSupply = (): Money | undefined => {
   return value;
 };
 
+// Code below copied from api/src/ol/ol.service.ts
+// TODO: fold this function into a common library used by both web-app and api
+export const useCirculatingSupply = (): Money | undefined => {
+  const aptos = useAptos();
+  const [value, setValue] = useState<Money>();
+
+  useEffect(() => {
+    const load = async () => {
+      const supplyStats = await aptos.view({
+        function: '0x1::supply::get_stats',
+        type_arguments: [],
+        arguments: [],
+      });
+
+      const supplyInfo =  {
+        totalSupply: parseFloat(supplyStats[0] as string) / 1e6,
+        slowLockedSupply: parseFloat(supplyStats[1] as string) / 1e6,
+        cwSupply: parseFloat(supplyStats[2] as string) / 1e6,
+        infraEscrowSupply: parseFloat(supplyStats[3] as string) / 1e6,
+        circulatingSupply: parseFloat(supplyStats[4] as string) / 1e6,
+      }
+
+      setValue({
+        amount: supplyInfo.circulatingSupply,
+        symbol: "LIBRA",
+      });
+    };
+
+    load();
+  }, []);
+
+  return value;
+};
+
 export const useLedgerInfo = (): Types.IndexResponse | undefined => {
   const [ledgerInfo, setLedgerInfo] = useState<Types.IndexResponse>();
   const aptos = useAptos();