new font

MattPereira · Dec 1, 2023 · cc42717 · cc42717
1 parent 0844860
commit cc42717
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 24 deletions.
diff --git a/packages/nextjs/components/Footer.tsx b/packages/nextjs/components/Footer.tsx
@@ -1,26 +1,26 @@
 import React from "react";
-// import { formatEther } from "viem";
+import { formatEther } from "viem";
 import { hardhat } from "viem/chains";
-// import { useAccount } from "wagmi";
+import { useAccount } from "wagmi";
 import { HeartIcon } from "@heroicons/react/24/outline";
 import { SwitchTheme } from "~~/components/SwitchTheme";
 import { BuidlGuidlLogo } from "~~/components/assets/BuidlGuidlLogo";
-// import { useScaffoldContractRead } from "~~/hooks/scaffold-eth";
+import { useScaffoldContractRead } from "~~/hooks/scaffold-eth";
 import { getTargetNetwork } from "~~/utils/scaffold-eth";
 
 /**
  * Site footer
  */
 export const Footer = () => {
-  // const account = useAccount();
+  const account = useAccount();
 
   const isLocalNetwork = getTargetNetwork().id === hardhat.id;
 
-  // const { data: userGoldBalance } = useScaffoldContractRead({
-  //   contractName: "GoldToken",
-  //   functionName: "balanceOf",
-  //   args: [account.address],
-  // });
+  const { data: userGoldBalance } = useScaffoldContractRead({
+    contractName: "GoldToken",
+    functionName: "balanceOf",
+    args: [account.address],
+  });
 
   return (
     <div className="min-h-0 py-5 px-1 mb-11 lg:mb-0">
@@ -29,9 +29,9 @@ export const Footer = () => {
           <div className="hidden md:flex md:flex-col md:flex-row gap-2 pointer-events-auto">
             <SwitchTheme className={`pointer-events-auto ${isLocalNetwork ? "self-end md:self-auto" : ""}`} />
           </div>
-          {/* <div className="text-xl border px-2 rounded-md py-1">
-            Your <span className="text-yellow-400">GODL</span> Reserves: {formatEther(userGoldBalance || 0n)}
-          </div> */}
+          <div className="text-xl border px-2 rounded-md py-1">
+            {formatEther(userGoldBalance || 0n)} <span className="text-yellow-400">GODL</span>
+          </div>
         </div>
       </div>
       <div className="w-full">

diff --git a/packages/nextjs/components/vaults-of-fortune/Leaderboard.tsx b/packages/nextjs/components/vaults-of-fortune/Leaderboard.tsx
@@ -3,6 +3,7 @@ import { useEffect, useState } from "react";
 import { formatEther } from "viem";
 import { Address } from "~~/components/scaffold-eth";
 import { useScaffoldContractRead, useScaffoldEventHistory, useScaffoldEventSubscriber } from "~~/hooks/scaffold-eth";
+import { formatWithCommas } from "~~/utils/formatWithCommas";
 
 interface IPlayerScores {
   contestNumber: number | undefined;
@@ -155,7 +156,7 @@ export const Leaderboard = () => {
                   <td>
                     <Address size="lg" address={score.player} />
                   </td>
-                  <td>{score.totalAssets.toFixed(0)}</td>
+                  <td>{formatWithCommas(score.totalAssets.toFixed(0))}</td>
                 </tr>
               );
             })}

diff --git a/packages/nextjs/components/vaults-of-fortune/Portfolio.tsx b/packages/nextjs/components/vaults-of-fortune/Portfolio.tsx
@@ -145,7 +145,7 @@ export const Portfolio = () => {
               )} */}
             </div>
           </div>
-          <div className="text-center text-2xl mt-3">{formatEther(userGoldBalance || 0n)} GODL </div>
+          {/* <div className="text-center text-2xl mt-3">{formatEther(userGoldBalance || 0n)} GODL </div> */}
         </>
       ) : (
         <div className="text-center h-full flex flex-col justify-center items-center">

diff --git a/packages/nextjs/components/vaults-of-fortune/Vaults.tsx b/packages/nextjs/components/vaults-of-fortune/Vaults.tsx
@@ -3,6 +3,7 @@ import { formatEther, formatUnits, parseEther } from "viem";
 import { useAccount } from "wagmi";
 import { useScaffoldContractRead } from "~~/hooks/scaffold-eth";
 import { IVaultManager, useVaultManager } from "~~/hooks/useVaultManager";
+import { formatWithCommas } from "~~/utils/formatWithCommas";
 
 /** Component to render the vaults
  *
@@ -139,13 +140,13 @@ export const Vaults = () => {
             <div className="flex justify-between items-center mb-3 gap-5 xl:gap-10">
               <h2 className="mb-3 ml-3 text-3xl xl:text-4xl font-cubano text-center">{vault.title}</h2>
               <div>
-                <h6 className="text-center text-2xl mb-3 bg-base-200 py-5 rounded-xl w-44">
+                <h6 className="text-center text-2xl mb-3 bg-base-200 py-5 rounded-xl w-48 font-cubano">
                   <span
-                    className={`mr-1 font-bold ${Number(vault.minimumROI) < 0 ? "text-red-500" : "text-green-500"}`}
+                    className={`mr-1 font-cubano ${Number(vault.minimumROI) < 0 ? "text-red-500" : "text-green-500"}`}
                   >
                     {Number(vault.minimumROI) || 0}%
                   </span>{" "}
-                  to <span className="text-green-500 font-bold ml-1">{Number(vault.maximumROI) || 0}%</span>
+                  to <span className="text-green-500 font-cubano ml-1">{Number(vault.maximumROI) || 0}%</span>
                 </h6>
               </div>
             </div>
@@ -163,14 +164,14 @@ export const Vaults = () => {
                   <tbody>
                     <tr className="border-b-2 border-[#FFFFFF22]">
                       <th>Assets</th>
-                      <td>{Number(formatUnits(vault.totalAssets || 0n, 18)).toFixed(1)}</td>
-                      <td>{Number(formatUnits(vault.maxWithdraw || 0n, 18)).toFixed(1)}</td>
-                      <td>GLD</td>
+                      <td>{formatWithCommas(Number(formatUnits(vault.totalAssets || 0n, 18)).toFixed(0))}</td>
+                      <td>{formatWithCommas(Number(formatUnits(vault.maxWithdraw || 0n, 18)).toFixed(0))}</td>
+                      <td>GODL</td>
                     </tr>
                     <tr>
                       <th>Supply</th>
-                      <td>{Number(formatUnits(vault.totalSupply || 0n, 18)).toFixed(1)}</td>
-                      <td>{Number(formatUnits(vault.maxRedeem || 0n, 18)).toFixed(1)}</td>
+                      <td>{formatWithCommas(Number(formatUnits(vault.totalSupply || 0n, 18)).toFixed(0))}</td>
+                      <td>{formatWithCommas(Number(formatUnits(vault.maxRedeem || 0n, 18)).toFixed(0))}</td>
                       <td>Shares</td>
                     </tr>
                   </tbody>

diff --git a/packages/nextjs/styles/globals.css b/packages/nextjs/styles/globals.css
@@ -1,4 +1,5 @@
-@import url("https://fonts.googleapis.com/css2?family=Didact+Gothic");
+/* @import url("https://fonts.googleapis.com/css2?family=Didact+Gothic"); */
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Lobster&display=swap");
 @import url("https://fonts.cdnfonts.com/css/cubano");
 
 @import "tailwindcss/base";

diff --git a/packages/nextjs/tailwind.config.js b/packages/nextjs/tailwind.config.js
@@ -72,7 +72,7 @@ module.exports = {
   },
   theme: {
     fontFamily: {
-      sans: ["Didact Gothic", "Tahoma", "Verdana", "sans-serif"],
+      sans: ["Inter", "Tahoma", "Verdana", "sans-serif"],
     },
     extend: {
       colors: {
-Original file line number
+Diff line change
@@ Expand Up / @@ -145,7 +145,7 @@ export const Portfolio = () => { @@
                   )} */}
                 </div>
               </div>
-              <div className="text-center text-2xl mt-3">{formatEther(userGoldBalance || 0n)} GODL </div>
+              {/* <div className="text-center text-2xl mt-3">{formatEther(userGoldBalance || 0n)} GODL </div> */}
             </>
           ) : (
             <div className="text-center h-full flex flex-col justify-center items-center">
@@ Expand Down @@