Merge branch 'ui/diamond' of https://github.com/bojan07/ubiquity-dollar…

… into ui/diamond

packages/dapp/components/layout/inventory.tsx

@@ -1,6 +1,7 @@
 import Tippy from "@tippyjs/react";
 import { BaseContract, BigNumber, ethers } from "ethers";
-import { useEffect } from "react";
+import { useState } from "react";
+import useEffectAsync from "../lib/hooks/use-effect-async";
 
 import useWeb3 from "@/lib/hooks/use-web-3";
 import icons from "@/ui/icons";
@@ -17,8 +18,12 @@ const Inventory = () => {
   const [balances, refreshBalances] = useBalances();
   const protocolContracts = useProtocolContracts();
   const namedContracts = useNamedContracts();
+  const [contracts, setContracts] = useState<ProtocolContracts>();
+
+  useEffectAsync(async () => {
+    const contract = await protocolContracts;
+    setContracts(contract);
 
-  useEffect(() => {
     if (walletAddress) {
       refreshBalances();
     }
@@ -65,17 +70,14 @@ const Inventory = () => {
     }
 
     const balance = balances[key];
-    (async function () {
-      const contracts = await protocolContracts;
-      if (Number(balance) && contracts) {
-        let selectedContract = contracts[id as keyof ProtocolContracts] as BaseContract;
-        if (!selectedContract && namedContracts) {
-          selectedContract = namedContracts[key as keyof typeof namedContracts];
-        }
-
-        return <Token token={name} balance={balance} accountAddr={walletAddress as string} tokenAddr={selectedContract.address} decimals={usdcFix()} />;
+    if (Number(balance) && contracts) {
+      let selectedContract = contracts[id as keyof ProtocolContracts] as BaseContract;
+      if (!selectedContract && namedContracts) {
+        selectedContract = namedContracts[key as keyof typeof namedContracts];
       }
-    })();
+
+      return <Token token={name} balance={balance} accountAddr={walletAddress as string} tokenAddr={selectedContract.address} decimals={usdcFix()} />;
+    }
   }
 };
 

packages/dapp/pages/styles/queries.css

@@ -127,4 +127,7 @@
   #Staking > tbody > tr > td:nth-child(4) {
     display: none;
   }
+  #Inventory {
+    bottom: 0;
+  }
 }

packages/dapp/pages/styles/ubiquity.css

@@ -179,7 +179,7 @@ video {
   text-align: center;
   position: absolute;
   left: 0;
-  bottom: 0;
+  bottom: 32px;
   width: 100%;
 }
 #Inventory > div:nth-child(2) > div > div > div {