run lint

apps/deposit-pool/src/app/page.tsx

@@ -9,12 +9,12 @@ import {
 import { ALL_SUPPORTED_CHAIN_IDS } from "@cowprotocol/cow-sdk";
 import { useCallback, useState } from "react";
 import { useFormContext } from "react-hook-form";
+import { PoolForm } from "#/components/PoolForm";
 import { PoolItemInfo } from "#/components/PoolItemInfo";
 import { useSelectedPool } from "#/hooks/useSelectedPool";
 import { useTokenBuyPools } from "#/hooks/useTokenBuyPools";
 import type { FormType } from "#/types";
 import { decodeCalldata } from "#/utils/decodeCalldata";
-import { PoolForm } from "#/components/PoolForm";
 
 export default function Page() {
   const { context } = useIFrameContext();
@@ -28,7 +28,7 @@ export default function Page() {
   const loadHookInfo = useCallback(() => {
     if (!context?.hookToEdit || !context.account || !isEditHookLoading) return;
     const data = decodeCalldata(
-      context?.hookToEdit?.hook.callData as `0x${string}`
+      context?.hookToEdit?.hook.callData as `0x${string}`,
     );
     if (data) {
       setValue("poolId", data.poolId);

apps/deposit-pool/src/components/PoolForm.tsx

@@ -1,11 +1,11 @@
-import { usePoolBalance } from "#/hooks/usePoolBalance";
-import { FormType } from "#/types";
-import { calculateProportionalTokenAmounts, getTokenPrice } from "#/utils/math";
-import { IPool, Spinner, useIFrameContext } from "@bleu/cow-hooks-ui";
-import { Button, formatNumber, Label } from "@bleu/ui";
+import { type IPool, Spinner, useIFrameContext } from "@bleu/cow-hooks-ui";
+import { Button, Label, formatNumber } from "@bleu/ui";
 import { useCallback, useMemo } from "react";
 import { useFormContext, useFormState, useWatch } from "react-hook-form";
-import { Address, formatUnits } from "viem";
+import { type Address, formatUnits } from "viem";
+import { usePoolBalance } from "#/hooks/usePoolBalance";
+import type { FormType } from "#/types";
+import { calculateProportionalTokenAmounts, getTokenPrice } from "#/utils/math";
 import { TokenAmountInput } from "./TokenAmountInput";
 
 export function PoolForm({ pool }: { pool: IPool | undefined }) {
@@ -33,7 +33,7 @@ export function PoolForm({ pool }: { pool: IPool | undefined }) {
 
   const tokenPrices = useMemo(
     () => poolBalances?.map((poolBalance) => getTokenPrice(poolBalance)),
-    [poolBalances]
+    [poolBalances],
   );
 
   const totalUsd = useMemo(() => {
@@ -69,15 +69,15 @@ export function PoolForm({ pool }: { pool: IPool | undefined }) {
         const tokenAmountKey = `amounts.${tokenAmountAddress}` as const;
         const calculatedAmount = formatUnits(
           tokenAmount.rawAmount,
-          tokenAmount.decimals
+          tokenAmount.decimals,
         );
 
         setValue(tokenAmountKey, calculatedAmount);
       }
 
       setValue("referenceTokenAddress", address);
     },
-    [poolBalances, tokenPrices, pool, setValue]
+    [poolBalances, tokenPrices, pool, setValue],
   );
 
   if (!context) return null;

apps/deposit-pool/src/components/TokenAmountInput.tsx

@@ -37,7 +37,7 @@ export function TokenAmountInput({
         updateTokenAmounts(amount, poolBalance.token.address as Address);
       }
     },
-    [updateTokenAmounts, poolBalance.token.address]
+    [updateTokenAmounts, poolBalance.token.address],
   );
 
   const tokenInfo = useReadTokenContract({
@@ -52,7 +52,7 @@ export function TokenAmountInput({
         className="text-lg"
       />
       <Input
-        className="bg-transparent col-span-2 border-transparent text-xl text-right placeholder:text-foreground/50 px-0"
+        className="bg-transparent col-span-2 border-transparent text-xl text-right placeholder:text-foreground/50 pr-0 pl-2 truncate ..."
         type="number"
         placeholder="0.0"
         {...register(`amounts.${poolBalance.token.address.toLowerCase()}`, {
@@ -63,7 +63,7 @@ export function TokenAmountInput({
         onKeyDown={(e) => {
           if (
             ["Enter", "-", "e", "E", "+", "ArrowUp", "ArrowDown"].includes(
-              e.key
+              e.key,
             )
           )
             e.preventDefault();
@@ -85,8 +85,8 @@ export function TokenAmountInput({
                 formatNumber(
                   formatUnits(
                     tokenInfo.userBalance || BigInt(0),
-                    tokenInfo.tokenDecimals || 18
-                  )
+                    tokenInfo.tokenDecimals || 18,
+                  ),
                 )}
             </span>
             {tokenInfo.userBalance &&
@@ -102,11 +102,11 @@ export function TokenAmountInput({
                       return;
                     const maxValue = formatUnits(
                       tokenInfo.userBalance,
-                      tokenInfo.tokenDecimals
+                      tokenInfo.tokenDecimals,
                     );
                     setValue(
                       `amounts.${poolBalance.token.address.toLowerCase()}`,
-                      maxValue
+                      maxValue,
                     );
                     onChange(maxValue);
                   }}

apps/deposit-pool/src/contexts/form.tsx

@@ -24,7 +24,7 @@ export function FormContextProvider({ children }: PropsWithChildren) {
 
   const selectedPool = useMemo(
     () => pools?.find((pool) => pool.id === poolId),
-    [pools, poolId]
+    [pools, poolId],
   );
 
   const getHookInfo = useGetHookInfo(selectedPool);
@@ -36,7 +36,7 @@ export function FormContextProvider({ children }: PropsWithChildren) {
       setHookInfo(hookInfo);
       router.push("/signing");
     },
-    [getHookInfo, setHookInfo, router]
+    [getHookInfo, setHookInfo, router],
   );
 
   return (

apps/deposit-pool/src/hooks/useSwapAmount.ts

@@ -0,0 +1,19 @@
+import { useIFrameContext, useReadTokenContract } from "@bleu/cow-hooks-ui";
+import { useMemo } from "react";
+import { type Address, formatUnits } from "viem";
+
+export function useSwapAmount(): `${number}` | undefined {
+  const { context } = useIFrameContext();
+
+  const { tokenDecimals } = useReadTokenContract({
+    tokenAddress: context?.orderParams?.buyTokenAddress as Address,
+  });
+
+  return useMemo(() => {
+    if (!context?.orderParams?.buyAmount || !tokenDecimals) return;
+    return formatUnits(
+      BigInt(context.orderParams.buyAmount),
+      tokenDecimals,
+    ) as `${number}`;
+  }, [context?.orderParams?.buyAmount, tokenDecimals]);
+}

apps/deposit-pool/src/utils/math.ts

@@ -22,7 +22,7 @@ export function calculateProportionalTokenAmounts({
 }) {
   const referenceToken = poolBalances.find(
     (balance) =>
-      balance.token.address.toLowerCase() === tokenAddress.toLowerCase()
+      balance.token.address.toLowerCase() === tokenAddress.toLowerCase(),
   );
 
   if (!referenceToken) {
@@ -34,13 +34,13 @@ export function calculateProportionalTokenAmounts({
       address: pool.address,
       totalShares: formatUnits(
         BigInt(pool.dynamicData.totalShares.toString()),
-        pool.decimals
+        pool.decimals,
       ) as `${number}`,
       tokens: poolBalances.map((balance) => ({
         address: balance.token.address.toLowerCase() as Address,
         balance: formatUnits(
           BigInt(balance.balance.toString()),
-          balance.token.decimals
+          balance.token.decimals,
         ) as `${number}`,
         decimals: balance.token.decimals,
       })),
@@ -49,6 +49,6 @@ export function calculateProportionalTokenAmounts({
       address: referenceToken.token.address.toLowerCase() as Address,
       decimals: referenceToken.token.decimals,
       rawAmount: parseUnits(tokenAmount, referenceToken.token.decimals),
-    }
+    },
   );
 }

packages/cow-hooks-ui/src/TokenLogoWithWeight.tsx

@@ -15,7 +15,7 @@ export function TokenLogoWithWeight({
     <div
       className={cn(
         "flex items-center rounded-xl text-md py-1 px-2 gap-1 bg-background text-foreground border border-1 border-muted w-fit",
-        className
+        className,
       )}
     >
       <div>{weight * 100}%</div>

packages/cow-hooks-ui/src/hooks/useReadTokenContract.ts

@@ -9,6 +9,7 @@ export const useReadTokenContract = ({
   tokenAddress: Address | undefined;
 }) => {
   const { publicClient, context } = useIFrameContext();
+  const tokenAddressLowerCase = tokenAddress?.toLowerCase();
 
   const readTokenContract = useCallback(
     async (address: Address) => {
@@ -55,7 +56,7 @@ export const useReadTokenContract = ({
     data: tokenData,
     isLoading: isLoadingToken,
     error: errorToken,
-  } = useSWR(tokenAddress ? tokenAddress : null, readTokenContract, {
+  } = useSWR(tokenAddressLowerCase, readTokenContract, {
     revalidateOnFocus: false,
     revalidateOnReconnect: false,
     refreshWhenOffline: false,