Merge pull request #64 from bleu/pedro/review-deposit-cow-amm-pt10

Review deposit cow amm pt10
bleu · Nov 27, 2024 · 326d465 · 326d465
2 parents bb02322 + 2dc95c2
commit 326d465
Show file tree

Hide file tree

Showing 8 changed files with 106 additions and 95 deletions.
diff --git a/apps/deposit-pool/src/app/page.tsx b/apps/deposit-pool/src/app/page.tsx
@@ -12,15 +12,15 @@ import { useCallback, useMemo, useState } from "react";
 import { useFormContext, useWatch } from "react-hook-form";
 import { PoolForm } from "#/components/PoolForm";
 import { PoolItemInfo } from "#/components/PoolItemInfo";
+import { useCowAmmPools } from "#/hooks/useCowAmmPools";
 import { useSelectedPool } from "#/hooks/useSelectedPool";
 import { useTokenBalanceAfterSwap } from "#/hooks/useTokenBalanceAfterSwap";
-import { useTokenBuyPools } from "#/hooks/useTokenBuyPools";
 import type { FormType } from "#/types";
 import { decodeCalldata } from "#/utils/decodeCalldata";
 
 export default function Page() {
   const { context, publicClient } = useIFrameContext();
-  const { data: pools, isLoading: isLoadingPools } = useTokenBuyPools();
+  const { data: pools, isLoading: isLoadingPools } = useCowAmmPools();
   const [isEditHookLoading, setIsEditHookLoading] = useState(true);
 
   const { setValue, reset, control } = useFormContext<FormType>();

diff --git a/apps/deposit-pool/src/app/updaters/SelectedPoolUpdater.tsx b/apps/deposit-pool/src/app/updaters/SelectedPoolUpdater.tsx
@@ -6,7 +6,7 @@ import { useSetAtom } from "jotai";
 import { useEffect } from "react";
 import { useWatch } from "react-hook-form";
 import { type Address, parseUnits } from "viem";
-import { useTokenBuyPools } from "#/hooks/useTokenBuyPools";
+import { useCowAmmPools } from "#/hooks/useCowAmmPools";
 import { selectedPoolAtom } from "../states/selectedPool";
 
 interface IQuery {
@@ -123,7 +123,7 @@ export async function fetchPool(id?: string, chainId?: SupportedChainId) {
 export function SelectedPoolUpdater() {
   const { context } = useIFrameContext();
 
-  const { data: pools } = useTokenBuyPools();
+  const { data: pools } = useCowAmmPools();
   const poolId = useWatch({ name: "poolId" });
   const setSelectedPool = useSetAtom(selectedPoolAtom);
 

diff --git a/apps/deposit-pool/src/components/PoolForm.tsx b/apps/deposit-pool/src/components/PoolForm.tsx
@@ -102,27 +102,12 @@ export function PoolForm({ pool }: { pool: IPool | undefined }) {
       <div className="flex w-full flex-row justify-between border border-muted px-5 py-2 mb-3 rounded-xl text-md">
         <span>Total</span>
         <span className="text-right">
-          ${totalUsd >= 0 ? formatNumber(totalUsd, 2) : "0"}
+          $
+          {totalUsd >= 0
+            ? formatNumber(totalUsd, 2, "decimal", "standard", 0.01)
+            : "0"}
         </span>
       </div>
-      {/* <div className="w-full flex flex-col gap-y-2 mb-3">
-        <AmountTypeCheckbox
-          option="userInput"
-          label="Input deposit amount manually"
-        />
-        <AmountTypeCheckbox
-          option="allFromSwap"
-          label="Use all tokens from swap"
-          disabled={isBuyTokenNotInPool}
-          tooltip="This option is only available if the buy token is on the pool"
-        />
-        <AmountTypeCheckbox
-          option="allFromAccount"
-          label="Use all your tokens after swap"
-          disabled={isBuyTokenNotInPool}
-          tooltip="This option is only available if the buy token is on the pool"
-        />
-      </div> */}
       <Info content={<InfoContent />} />
       <FormButton poolBalances={poolBalances} />
     </div>

diff --git a/apps/deposit-pool/src/components/TokenAmountInput.tsx b/apps/deposit-pool/src/components/TokenAmountInput.tsx
@@ -106,59 +106,66 @@ export function TokenAmountInput({
       <div className="flex items-center justify-between col-span-2">
         <div className="flex items-center justify-start">
           {tokenBalanceAfterSwap && (
-            <div className="flex items-center">
-              <InfoTooltip
-                className="opacity-70"
-                text="Estimated balance, it might change depending of order and fee update."
-              />
-              <span className="ml-1 text-xs font-normal opacity-70">
-                Balance:{" "}
-                {formatNumber(
-                  tokenBalanceAfterSwap,
-                  4,
-                  "decimal",
-                  "standard",
-                  0.0001,
-                ).replace(/\.?0+$/, "") || "0"}
-              </span>
-              {!maxButtonDisabled && (
-                <Button
-                  type="button"
-                  variant="ghost"
-                  className="ml-1 rounded-sm text-xs py-0 px-1 bg-background text-foreground/50 hover:bg-primary hover:text-primary-foreground h-fit inline"
-                  onClick={() => {
-                    setValue(
-                      `amounts.${poolBalance.token.address.toLowerCase()}`,
-                      tokenBalanceAfterSwap,
-                    );
-                    onChange(tokenBalanceAfterSwap);
-                  }}
-                >
-                  Max
-                </Button>
-              )}
-              {!buyAmountDisabled && buyAmount && (
-                <Button
-                  type="button"
-                  variant="ghost"
-                  className="ml-1 rounded-sm text-xs py-0 px-1 bg-background text-foreground/50 hover:bg-primary hover:text-primary-foreground h-fit inline"
-                  onClick={() => {
-                    setValue(
-                      `amounts.${poolBalance.token.address.toLowerCase()}`,
-                      buyAmount,
-                    );
-                    onChange(buyAmount);
-                  }}
-                >
-                  Buy amount
-                </Button>
-              )}
+            <div className="flex flex-col xsm:flex-row gap-2">
+              <div className="flex items-center">
+                <InfoTooltip
+                  className="opacity-70"
+                  text="Estimated balance, it might change depending of order and fee update."
+                />
+                <span className="ml-1 inline text-xs font-normal opacity-70 w-fit">
+                  Balance:{" "}
+                  {formatNumber(
+                    tokenBalanceAfterSwap,
+                    4,
+                    "decimal",
+                    "standard",
+                    0.0001,
+                  ).replace(/\.?0+$/, "") || "0"}
+                </span>
+              </div>
+              <div className="flex items-center gap-2">
+                {!maxButtonDisabled && (
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    className="rounded-sm text-xs py-0 px-1 bg-background text-foreground/50 hover:bg-primary hover:text-primary-foreground h-fit inline"
+                    onClick={() => {
+                      setValue(
+                        `amounts.${poolBalance.token.address.toLowerCase()}`,
+                        tokenBalanceAfterSwap,
+                      );
+                      onChange(tokenBalanceAfterSwap);
+                    }}
+                  >
+                    Max
+                  </Button>
+                )}
+                {!buyAmountDisabled && buyAmount && (
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    className="rounded-sm text-xs py-0 px-1 bg-background text-foreground/50 hover:bg-primary hover:text-primary-foreground h-fit inline"
+                    onClick={() => {
+                      setValue(
+                        `amounts.${poolBalance.token.address.toLowerCase()}`,
+                        buyAmount,
+                      );
+                      onChange(buyAmount);
+                    }}
+                  >
+                    Buy amount
+                  </Button>
+                )}
+              </div>
             </div>
           )}
         </div>
         <div className="flex items-center justify-end">
           <span className="text-xs text-right font-normal pr-0">
-            ${amountUsd && amountUsd >= 0 ? formatNumber(amountUsd, 2) : "0"}
+            $
+            {amountUsd && amountUsd >= 0
+              ? formatNumber(amountUsd, 2, "decimal", "standard", 0.01)
+              : "0"}
           </span>
         </div>
       </div>

diff --git a/apps/deposit-pool/src/hooks/useCowAmmPools.ts b/apps/deposit-pool/src/hooks/useCowAmmPools.ts
@@ -0,0 +1,13 @@
+import { useIFrameContext, usePools } from "@bleu/cow-hooks-ui";
+
+export function useCowAmmPools() {
+  const { context } = useIFrameContext();
+
+  return usePools(
+    {
+      poolTypeIn: ["COW_AMM"],
+    },
+    context?.chainId,
+    "totalLiquidity",
+  );
+}
diff --git a/packages/cow-hooks-ui/src/PoolsDropdownMenu.tsx b/packages/cow-hooks-ui/src/PoolsDropdownMenu.tsx
@@ -106,7 +106,9 @@ export function PoolsDropdownMenu({
                     className="group hover:bg-color-paper-darkest hover:text-muted-foreground rounded-md px-2 cursor-pointer flex flex-row gap-1 items-center justify-between"
                   >
                     <PoolLogo pool={pool} />
-                    <PoolItemInfo pool={pool} />
+                    <div className="w-2/5">
+                      <PoolItemInfo pool={pool} />
+                    </div>
                   </CommandItem>
                 ))}
               </CommandList>

diff --git a/packages/cow-hooks-ui/src/TokenLogoWithWeight.tsx b/packages/cow-hooks-ui/src/TokenLogoWithWeight.tsx
@@ -18,7 +18,7 @@ export function TokenLogoWithWeight({
         className,
       )}
     >
-      <div className="hidden xsm:flex">{weight * 100}%</div>
+      <div className="hidden xsm:flex">{(weight * 100).toFixed()}%</div>
       <div>
         <TokenLogo token={token} width={20} height={20} />
       </div>

diff --git a/packages/cow-hooks-ui/src/hooks/usePools.ts b/packages/cow-hooks-ui/src/hooks/usePools.ts
@@ -118,30 +118,34 @@ export function usePools(
           orderBy,
         })
         .then((result) => {
-          return result.pools.map((pool) => ({
-            ...pool,
-            userBalance: {
-              ...pool.userBalance,
-              walletBalance: parseUnits(
-                pool.userBalance.walletBalance,
-                pool.decimals,
-              ),
-              stakedBalances: pool.userBalance.stakedBalances.map((staked) => ({
-                balance: parseUnits(
-                  Number(staked.balance).toFixed(pool.decimals),
+          return result.pools
+            .map((pool) => ({
+              ...pool,
+              userBalance: {
+                ...pool.userBalance,
+                walletBalance: parseUnits(
+                  pool.userBalance.walletBalance,
                   pool.decimals,
                 ),
-                stakingId: staked.stakingId,
-              })),
-            },
-            dynamicData: {
-              ...pool.dynamicData,
-              totalShares: parseUnits(
-                Number(pool.dynamicData.totalShares).toFixed(pool.decimals),
-                pool.decimals,
-              ),
-            },
-          }));
+                stakedBalances: pool.userBalance.stakedBalances.map(
+                  (staked) => ({
+                    balance: parseUnits(
+                      Number(staked.balance).toFixed(pool.decimals),
+                      pool.decimals,
+                    ),
+                    stakingId: staked.stakingId,
+                  }),
+                ),
+              },
+              dynamicData: {
+                ...pool.dynamicData,
+                totalShares: parseUnits(
+                  Number(pool.dynamicData.totalShares).toFixed(pool.decimals),
+                  pool.decimals,
+                ),
+              },
+            }))
+            .filter((pool) => pool.allTokens.length === 2);
         });
     },
     {