refactor texts and spacing of cow amm page

bleu · Jun 13, 2024 · 653a2dd · 653a2dd
1 parent e058f5b
commit 653a2dd
Show file tree

Hide file tree

Showing 6 changed files with 10 additions and 8 deletions.
diff --git a/apps/cow-amm-deployer/src/app/[userId]/amms/[id]/(components)/Header.tsx b/apps/cow-amm-deployer/src/app/[userId]/amms/[id]/(components)/Header.tsx
@@ -35,7 +35,7 @@ export function Header({
         <LinkComponent href={`/${ammData.user.id}/amms`}>
           <Button className="flex items-center gap-1 p-1" variant="ghost">
             <ArrowLeftIcon />
-            Back to AMMs table
+            CoW AMMs
           </Button>
         </LinkComponent>
         <Card.Title className="text-3xl flex flex-row gap-2 my-2 p-0 items-center">

diff --git a/apps/cow-amm-deployer/src/app/[userId]/amms/[id]/(components)/Manage.tsx b/apps/cow-amm-deployer/src/app/[userId]/amms/[id]/(components)/Manage.tsx
@@ -31,7 +31,7 @@ export function Manage({
       <Card.Header className="py-1 px-0">
         <Card.Title className="px-0 text-xl">Manage</Card.Title>
         <Card.Description className="px-0 text-base">
-          Manage your CoW AMM pool
+          Manage your CoW AMM
         </Card.Description>
         <Separator />
       </Card.Header>

diff --git a/apps/cow-amm-deployer/src/app/[userId]/amms/[id]/(components)/PoolComposition.tsx b/apps/cow-amm-deployer/src/app/[userId]/amms/[id]/(components)/PoolComposition.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { Card } from "@bleu/ui";
+import { formatNumber } from "@bleu/utils/formatNumber";
 
 import { ICowAmm } from "#/lib/fetchAmmData";
 
@@ -12,7 +13,10 @@ export function PoolComposition({ ammData }: { ammData: ICowAmm }) {
       <Card.Header className="py-1 px-0">
         <Card.Title className="px-0 text-xl">Pool composition</Card.Title>
         <Card.Description className="px-0 text-base">
-          Check your current CoW AMM pool composition
+          The current pool TVL is{" "}
+          <span className="font-semibold">
+            ${formatNumber(ammData.totalUsdValue, 2)}
+          </span>
         </Card.Description>
       </Card.Header>
       <Card.Content className="px-0">

diff --git a/apps/cow-amm-deployer/src/app/[userId]/amms/[id]/(components)/PoolCompositionTable.tsx b/apps/cow-amm-deployer/src/app/[userId]/amms/[id]/(components)/PoolCompositionTable.tsx
@@ -13,9 +13,7 @@ export function PoolCompositionTable({ ammData }: { ammData: ICowAmm }) {
   return (
     <Table color="sand">
       <Table.HeaderRow>
-        <Table.HeaderCell>
-          Balance $({formatNumber(ammData.totalUsdValue, 4)})
-        </Table.HeaderCell>
+        <Table.HeaderCell>Balance</Table.HeaderCell>
         <Table.HeaderCell>Weight</Table.HeaderCell>
       </Table.HeaderRow>
       <Table.Body>

diff --git a/apps/cow-amm-deployer/src/app/[userId]/amms/[id]/page.tsx b/apps/cow-amm-deployer/src/app/[userId]/amms/[id]/page.tsx
@@ -33,7 +33,7 @@ export default async function Page({
     <div className="w-full flex flex-col space-y-4 px-32">
       <Header ammData={ammData} oldVersionOfAmm={oldVersionOfAmm} />
       {oldVersionOfAmm && <OldVersionOfAMMAlert ammData={ammData} />}
-      <div className="flex flex-row w-full space-x-4">
+      <div className="flex flex-row w-full space-x-8">
         <div className="w-2/3">
           <Manage
             ammData={ammData}

diff --git a/apps/cow-amm-deployer/src/components/DepositForm.tsx b/apps/cow-amm-deployer/src/components/DepositForm.tsx
@@ -33,7 +33,7 @@ export function DepositForm({
 }) {
   const schema = getDepositSchema(
     Number(walletBalanceToken0),
-    Number(walletBalanceToken1)
+    Number(walletBalanceToken1),
   );
 
   const form = useForm<z.input<typeof schema>>({