Merge pull request #45 from bleu/withdraw-review-pt10

Withdraw review pt10
bleu · Oct 23, 2024 · eb6277f · eb6277f
2 parents 813a3d3 + ebe8088
commit eb6277f
Show file tree

Hide file tree

Showing 15 changed files with 138 additions and 171 deletions.
diff --git a/apps/withdraw-pool/src/app/page.tsx b/apps/withdraw-pool/src/app/page.tsx
@@ -88,7 +88,7 @@ export default function Page() {
         PoolItemInfo={PoolItemInfo}
         selectedPool={selectedPool}
       />
-      <PoolForm poolId={poolId} />
+      <PoolForm selectedPool={selectedPool} />
     </div>
   );
 }
diff --git a/apps/withdraw-pool/src/components/PoolBalancePreview.tsx b/apps/withdraw-pool/src/components/PoolBalancePreview.tsx
@@ -1,12 +1,22 @@
 "use client";
 
-import { BalancesPreview, type IBalance } from "@bleu/cow-hooks-ui";
+import {
+  type IBalance,
+  InfoTooltip,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  TokenAmount,
+  TokenInfo,
+} from "@bleu/cow-hooks-ui";
 import { useMemo } from "react";
 import { useFormContext, useWatch } from "react-hook-form";
+import { formatUnits } from "viem";
 import { multiplyValueByPct } from "#/utils/math";
 
-const PREVIEW_LABELS = ["Current balance", "Withdraw balance"];
-
 export function PoolBalancesPreview({
   poolBalances,
 }: {
@@ -16,7 +26,7 @@ export function PoolBalancesPreview({
 
   const { withdrawPct } = useWatch({ control });
 
-  const withdrawBalance = useMemo(() => {
+  const _withdrawBalance = useMemo(() => {
     if (!poolBalances || !withdrawPct) return [];
     return poolBalances.map((poolBalance) => ({
       ...poolBalance,
@@ -26,9 +36,64 @@ export function PoolBalancesPreview({
   }, [poolBalances, withdrawPct]);
 
   return (
-    <BalancesPreview
-      labels={PREVIEW_LABELS}
-      balancesList={[poolBalances, withdrawBalance]}
-    />
+    <div className="border border-color-text/25 rounded-2xl">
+      <Table className="overflow-grow">
+        <TableHeader className="[&_tr]:border-b border-color-text/25 dark:[&_tr]:border-b-1">
+          <TableRow className="hover:bg-transparent border-color-text/25">
+            <TableHead>
+              <span className="font-normal text-sm">Token</span>
+            </TableHead>
+            <TableHead>
+              <span className="flex gap-1 text-sm font-normal">
+                Wallet balance
+                <InfoTooltip text="Withdraw of staked balances is not supported" />
+              </span>
+            </TableHead>
+            <TableHead>
+              <span className="text-sm font-normal">Withdraw balance</span>
+            </TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {poolBalances.map((balance, _index) => {
+            return (
+              <TableRow
+                className="hover:bg-transparent border-none"
+                key={balance.token.address}
+              >
+                <TableCell>
+                  <TokenInfo token={balance.token} showExplorerLink={true} />
+                </TableCell>
+                <TableCell>
+                  <TokenAmount
+                    token={balance.token}
+                    balance={Number(
+                      formatUnits(
+                        BigInt(balance.balance.toString()),
+                        balance.token.decimals,
+                      ),
+                    )}
+                    fiatValue={balance.fiatAmount}
+                  />
+                </TableCell>
+                <TableCell>
+                  <TokenAmount
+                    token={balance.token}
+                    balance={Number(
+                      formatUnits(
+                        BigInt(balance.balance.toString()),
+                        balance.token.decimals,
+                      ),
+                    )}
+                    fiatValue={balance.fiatAmount}
+                    className="font-semibold"
+                  />
+                </TableCell>
+              </TableRow>
+            );
+          })}
+        </TableBody>
+      </Table>
+    </div>
   );
 }
diff --git a/apps/withdraw-pool/src/components/PoolForm.tsx b/apps/withdraw-pool/src/components/PoolForm.tsx
@@ -1,16 +1,16 @@
-import { Spinner, useIFrameContext } from "@bleu/cow-hooks-ui";
+import { type IPool, Spinner, useIFrameContext } from "@bleu/cow-hooks-ui";
 import { Suspense } from "react";
 import { useUserPoolBalance } from "#/hooks/useUserPoolBalance";
 import { PoolBalancesPreview } from "./PoolBalancePreview";
 import { SubmitButton } from "./SubmitButton";
 import { WithdrawPctSlider } from "./WithdrawPctSlider";
 
-export function PoolForm({ poolId }: { poolId?: string }) {
+export function PoolForm({ selectedPool }: { selectedPool?: IPool }) {
   const { context } = useIFrameContext();
   const { data: poolBalances, isLoading } = useUserPoolBalance({
     user: context?.account,
     chainId: context?.chainId,
-    poolId,
+    poolId: selectedPool?.id,
   });
 
   if (!poolBalances?.length && isLoading) {
@@ -21,14 +21,15 @@ export function PoolForm({ poolId }: { poolId?: string }) {
     );
   }
 
-  if (!context || !poolId || !poolBalances || !poolBalances.length) return null;
+  if (!context || !selectedPool || !poolBalances || !poolBalances.length)
+    return null;
 
   return (
     <Suspense fallback={<Spinner size="xl" />}>
       <div className="size-full flex flex-col gap-2">
         <WithdrawPctSlider />
         <PoolBalancesPreview poolBalances={poolBalances} />
-        <SubmitButton poolId={poolId} />
+        <SubmitButton poolId={selectedPool?.id} />
       </div>
     </Suspense>
   );

diff --git a/apps/withdraw-pool/src/components/PoolItemInfo.tsx b/apps/withdraw-pool/src/components/PoolItemInfo.tsx
@@ -2,5 +2,5 @@ import type { IPool } from "@bleu/cow-hooks-ui";
 import { formatNumber } from "@bleu/ui";
 
 export function PoolItemInfo({ pool }: { pool: IPool }) {
-  return <i>${formatNumber(pool.userBalance.totalBalanceUsd, 2)}</i>;
+  return <i>${formatNumber(pool.userBalance.walletBalanceUsd, 2)}</i>;
 }
diff --git a/apps/withdraw-pool/src/components/SubmitButton.tsx b/apps/withdraw-pool/src/components/SubmitButton.tsx
@@ -7,7 +7,7 @@ export function SubmitButton({ poolId }: { poolId?: string }) {
   const { control } = useFormContext();
   const { context } = useIFrameContext();
 
-  const { isSubmitting } = useFormState({ control });
+  const { isSubmitting, isSubmitSuccessful } = useFormState({ control });
 
   const withdrawPct = useWatch({ control, name: "withdrawPct" });
   const buttonProps = useMemo(() => {
@@ -27,7 +27,7 @@ export function SubmitButton({ poolId }: { poolId?: string }) {
         type="submit"
         className="my-2 w-full rounded-2xl text-lg h-[58px]"
         disabled={buttonProps.disabled}
-        loading={isSubmitting}
+        loading={isSubmitting || isSubmitSuccessful}
         loadingText="Creating hook..."
       >
         {buttonProps.message}

diff --git a/apps/withdraw-pool/src/hooks/useGetBalancerGaugeArgs.ts b/apps/withdraw-pool/src/hooks/useGetBalancerGaugeArgs.ts
@@ -41,7 +41,7 @@ export function getSingleBalancerGaugeArgs({
       from: cowShedProxy,
       to: cowShedProxy,
       amount: amountToWithdraw.toBigInt(),
-      symbol: "pool stacked", // TODO: get symbol from token
+      symbol: "pool staked", // TODO: get symbol from token
     },
     {
       gaugeAddress,
@@ -86,7 +86,7 @@ export function useGetBalancerGaugeArgs(
               stackedBalanceAlreadyWithdraw,
             ),
             maxBptToWithdraw: BigNumber.from(stakedBalance.balance),
-            gaugeAddress: poolData.address,
+            gaugeAddress: stakedBalance.stakingId as Address,
             context,
             cowShedProxy,
           });

diff --git a/apps/withdraw-pool/src/hooks/useGetHookInfo.ts b/apps/withdraw-pool/src/hooks/useGetHookInfo.ts
@@ -6,34 +6,35 @@ import {
 import { useCallback } from "react";
 import type { IHooksInfo } from "#/types";
 import { multiplyValueByPct } from "#/utils/math";
-import { useGetBalancerGaugeArgs } from "./useGetBalancerGaugeArgs";
+// import { useGetBalancerGaugeArgs } from "./useGetBalancerGaugeArgs";
 import { useGetPoolWithdrawArgs } from "./useGetPoolWithdrawArgs";
 
 export function useGetHookInfo(pool?: IPool) {
   const getPoolWithdrawArgs = useGetPoolWithdrawArgs(pool);
-  const getBalancerGaugeArgs = useGetBalancerGaugeArgs(pool);
+  // Removed gauge related code
+  // const getBalancerGaugeArgs = useGetBalancerGaugeArgs(pool);
 
   return useCallback(
     async (withdrawPct: number): Promise<IHooksInfo | undefined> => {
       if (!pool) return;
 
       const bptAmount = multiplyValueByPct(
-        pool.userBalance.totalBalance,
+        pool.userBalance.walletBalance,
         withdrawPct,
       );
-      const balancerGaugeArgs = getBalancerGaugeArgs(bptAmount);
+      // const balancerGaugeArgs = getBalancerGaugeArgs(bptAmount);
       const poolWithdrawArgs = await getPoolWithdrawArgs(bptAmount);
       if (!poolWithdrawArgs) return;
 
-      const argsArray = [...balancerGaugeArgs, ...poolWithdrawArgs];
+      // const argsArray = [...balancerGaugeArgs, ...poolWithdrawArgs];
 
       const txs = await Promise.all(
-        argsArray.map((arg) => {
+        poolWithdrawArgs.map((arg) => {
           return TransactionFactory.createRawTx(arg.type, arg);
         }),
       );
 
-      const permitData = argsArray
+      const permitData = poolWithdrawArgs
         .filter((arg) => arg.type === TRANSACTION_TYPES.ERC20_TRANSFER_FROM)
         .map((arg) => {
           return {
@@ -47,6 +48,6 @@ export function useGetHookInfo(pool?: IPool) {
         permitData: permitData,
       };
     },
-    [getPoolWithdrawArgs, getBalancerGaugeArgs, pool],
+    [getPoolWithdrawArgs, pool],
   );
 }
diff --git a/apps/withdraw-pool/src/hooks/useUserPoolBalance.tsx b/apps/withdraw-pool/src/hooks/useUserPoolBalance.tsx
@@ -21,8 +21,8 @@ interface IQuery {
     totalShares: `${number}`;
   };
   userBalance: {
-    totalBalance: `${number}`;
-    totalBalanceUsd: number;
+    walletBalance: `${number}`;
+    walletBalanceUsd: number;
   };
   poolTokens: {
     id: `0x${string}`;
@@ -50,8 +50,8 @@ export const POOL_QUERY = gql`
         totalShares
       }
       userBalance {
-        totalBalance
-        totalBalanceUsd
+        walletBalance
+        walletBalanceUsd
       }
       poolTokens {
         id
@@ -85,7 +85,7 @@ async function fetchUserPoolBalance(
     throw new Error("Pool not found");
   }
   const userBpt = parseUnits(
-    result.pool.userBalance.totalBalance.toString(),
+    result.pool.userBalance.walletBalance.toString(),
     result.pool.decimals,
   );
   const totalBpt = parseUnits(

diff --git a/packages/cow-hooks-ui/src/BalancesPreview.tsx b/packages/cow-hooks-ui/src/BalancesPreview.tsx