From f8502c5214b47e5df70437102436f3eb30c340b5 Mon Sep 17 00:00:00 2001 From: Pedro Yves Fracari Date: Fri, 25 Oct 2024 09:11:13 -0300 Subject: [PATCH] run lint --- apps/deposit-pool/src/app/page.tsx | 4 ++-- apps/deposit-pool/src/components/PoolForm.tsx | 18 +++++++++--------- .../src/components/TokenAmountInput.tsx | 14 +++++++------- apps/deposit-pool/src/contexts/form.tsx | 4 ++-- apps/deposit-pool/src/hooks/useSwapAmount.ts | 19 +++++++++++++++++++ .../src/hooks/useTokenBalanceAfterSwap.ts | 0 apps/deposit-pool/src/utils/math.ts | 8 ++++---- .../cow-hooks-ui/src/TokenLogoWithWeight.tsx | 2 +- .../src/hooks/useReadTokenContract.ts | 3 ++- 9 files changed, 46 insertions(+), 26 deletions(-) create mode 100644 apps/deposit-pool/src/hooks/useSwapAmount.ts create mode 100644 apps/deposit-pool/src/hooks/useTokenBalanceAfterSwap.ts diff --git a/apps/deposit-pool/src/app/page.tsx b/apps/deposit-pool/src/app/page.tsx index dabaaea..32063d3 100644 --- a/apps/deposit-pool/src/app/page.tsx +++ b/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); diff --git a/apps/deposit-pool/src/components/PoolForm.tsx b/apps/deposit-pool/src/components/PoolForm.tsx index 70bfde7..fd228c7 100644 --- a/apps/deposit-pool/src/components/PoolForm.tsx +++ b/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,7 +69,7 @@ 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); @@ -77,7 +77,7 @@ export function PoolForm({ pool }: { pool: IPool | undefined }) { setValue("referenceTokenAddress", address); }, - [poolBalances, tokenPrices, pool, setValue] + [poolBalances, tokenPrices, pool, setValue], ); if (!context) return null; diff --git a/apps/deposit-pool/src/components/TokenAmountInput.tsx b/apps/deposit-pool/src/components/TokenAmountInput.tsx index 61fd5b2..6d9e0b0 100644 --- a/apps/deposit-pool/src/components/TokenAmountInput.tsx +++ b/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" /> { 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, + ), )} {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); }} diff --git a/apps/deposit-pool/src/contexts/form.tsx b/apps/deposit-pool/src/contexts/form.tsx index eb8b500..e3cd752 100644 --- a/apps/deposit-pool/src/contexts/form.tsx +++ b/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 ( diff --git a/apps/deposit-pool/src/hooks/useSwapAmount.ts b/apps/deposit-pool/src/hooks/useSwapAmount.ts new file mode 100644 index 0000000..a0499cf --- /dev/null +++ b/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]); +} diff --git a/apps/deposit-pool/src/hooks/useTokenBalanceAfterSwap.ts b/apps/deposit-pool/src/hooks/useTokenBalanceAfterSwap.ts new file mode 100644 index 0000000..e69de29 diff --git a/apps/deposit-pool/src/utils/math.ts b/apps/deposit-pool/src/utils/math.ts index c1cd1a4..3b94c42 100644 --- a/apps/deposit-pool/src/utils/math.ts +++ b/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), - } + }, ); } diff --git a/packages/cow-hooks-ui/src/TokenLogoWithWeight.tsx b/packages/cow-hooks-ui/src/TokenLogoWithWeight.tsx index 31571ac..72055d7 100644 --- a/packages/cow-hooks-ui/src/TokenLogoWithWeight.tsx +++ b/packages/cow-hooks-ui/src/TokenLogoWithWeight.tsx @@ -15,7 +15,7 @@ export function TokenLogoWithWeight({
{weight * 100}%
diff --git a/packages/cow-hooks-ui/src/hooks/useReadTokenContract.ts b/packages/cow-hooks-ui/src/hooks/useReadTokenContract.ts index 245cfa6..77004b9 100644 --- a/packages/cow-hooks-ui/src/hooks/useReadTokenContract.ts +++ b/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,