feat: Pool Metrics component

- Rename section to "Pool Funds" - Change "Fund Available" to "Balance" - Change "Fund Pool" button to "Add funds" - Upgrade pool balance data styling
1Hive · Aug 9, 2024 · 3fc0c46 · 3fc0c46
1 parent 85787f3
commit 3fc0c46
Showing 1 changed file with 14 additions and 22 deletions.
diff --git a/apps/web/components/PoolMetrics.tsx b/apps/web/components/PoolMetrics.tsx
@@ -116,28 +116,20 @@ export const PoolMetrics: FC<PoolMetricsProps> = ({
           <DisplayNumber number={amount} tokenSymbol={tokenGarden.symbol} />
         </div>
       </TransactionModal>
-      <section className="section-layout gap-8 flex flex-col">
-        <header>
-          <h2>Pool Metrics</h2>
-        </header>
-        <div className="flex justify-between">
-          <div className="flex flex-col gap-6">
-            <div className="flex gap-3 items-baseline">
-              <h5>Funds Available:</h5>
-              <p className="">
-                {formatTokenAmount(poolAmount, tokenGarden.decimals)}{" "}
-                {tokenGarden.symbol}
-              </p>
-            </div>
-            <div className="flex gap-3 items-baseline">
-              <h5>Spending Limit:</h5>
-              <p className="">
-                {`${(spendingLimitPct * MAX_RATIO_CONSTANT).toFixed(2)} %`}
-              </p>
-            </div>
+      <section className="section-layout gap-4 flex flex-col">
+        <h2>Pool Funds</h2>
+        <div className="flex justify-between items-center">
+          <div className="flex gap-3 items-baseline">
+            <h4>Balance:</h4>
+            <DisplayNumber
+              number={formatTokenAmount(poolAmount, tokenGarden.decimals)}
+              tokenSymbol={tokenGarden.symbol}
+              compact={true}
+              className="font-semibold text-primary-content text-2xl"
+            />
           </div>
           <form
-            className="flex flex-col gap-4"
+            className="flex gap-2"
             onSubmit={(e) => {
               e.preventDefault();
               handleFundPool();
@@ -147,7 +139,6 @@ export const PoolMetrics: FC<PoolMetricsProps> = ({
               type="number"
               placeholder="0"
               required
-              className=""
               step={INPUT_TOKEN_MIN_VALUE}
               onChange={(e) => setAmount(e.target.value)}
               value={amount}
@@ -164,8 +155,9 @@ export const PoolMetrics: FC<PoolMetricsProps> = ({
               type="submit"
               disabled={missmatchUrl || !accountAddress}
               tooltip={tooltipMessage}
+              className="min-w-[200px]"
             >
-              Fund pool
+              Add Funds
             </Button>
           </form>
         </div>