From 8ba54bb9cde8a674aca1afc44bbe62108a4f8b0b Mon Sep 17 00:00:00 2001 From: Pedro Yves Fracari Date: Wed, 9 Oct 2024 13:46:56 -0300 Subject: [PATCH 1/8] connect deposit with pool data and pool balances --- apps/deposit-pool/src/app/page.tsx | 40 +++-- .../src/components/DropdownPoolComponent.tsx | 49 +++++++ apps/deposit-pool/src/global.css | 2 +- ...UserPoolBalance.tsx => usePoolBalance.tsx} | 46 ++---- apps/deposit-pool/src/hooks/useTokenPools.ts | 12 ++ apps/withdraw-pool/src/app/page.tsx | 7 +- .../src/components/DropdownPoolComponent.tsx | 37 +++++ .../src/hooks/useGetBalancerGaugeArgs.ts | 4 +- .../withdraw-pool/src/hooks/useGetHookInfo.ts | 4 +- .../src/hooks/useGetPoolWithdrawArgs.ts | 4 +- apps/withdraw-pool/src/hooks/useUserPools.ts | 137 +----------------- .../src/utils/poolDataConverter.ts | 4 +- .../cow-hooks-ui/src/PoolsDropdownMenu.tsx | 59 ++------ packages/cow-hooks-ui/src/hooks/index.ts | 4 + .../cow-hooks-ui/src/hooks/usePools.ts | 41 ++++-- packages/cow-hooks-ui/src/index.tsx | 4 +- packages/cow-hooks-ui/src/types.ts | 7 +- pnpm-lock.yaml | 6 + 18 files changed, 219 insertions(+), 248 deletions(-) create mode 100644 apps/deposit-pool/src/components/DropdownPoolComponent.tsx rename apps/deposit-pool/src/hooks/{useUserPoolBalance.tsx => usePoolBalance.tsx} (64%) create mode 100644 apps/deposit-pool/src/hooks/useTokenPools.ts create mode 100644 apps/withdraw-pool/src/components/DropdownPoolComponent.tsx create mode 100644 packages/cow-hooks-ui/src/hooks/index.ts rename apps/deposit-pool/src/hooks/useUserPools.ts => packages/cow-hooks-ui/src/hooks/usePools.ts (83%) diff --git a/apps/deposit-pool/src/app/page.tsx b/apps/deposit-pool/src/app/page.tsx index 06fb710..11c37d5 100644 --- a/apps/deposit-pool/src/app/page.tsx +++ b/apps/deposit-pool/src/app/page.tsx @@ -8,20 +8,24 @@ import { useForm, useWatch } from "react-hook-form"; import { depositSchema } from "#/utils/schema"; import { BalancesPreview, - IMinimalPool, + IPool, PoolsDropdownMenu, Spinner, useIFrameContext, } from "@bleu/cow-hooks-ui"; import { ALL_SUPPORTED_CHAIN_IDS } from "@cowprotocol/cow-sdk"; -import { useUserPools } from "#/hooks/useUserPools"; -import { useUserPoolBalance } from "#/hooks/useUserPoolBalance"; +import { useTokenPools } from "#/hooks/useTokenPools"; +import { usePoolBalance } from "#/hooks/usePoolBalance"; +import { DropdownPoolComponent } from "#/components/DropdownPoolComponent"; const PREVIEW_LABELS = ["Pool Balance", "Deposit"]; export default function Page() { const { context } = useIFrameContext(); - const { data: pools } = useUserPools(context?.chainId, context?.account); + const { data: pools, isLoading: isPoolsLoading } = useTokenPools( + context?.chainId, + context?.orderParams?.buyTokenAddress + ); const form = useForm({ resolver: zodResolver(depositSchema), @@ -38,11 +42,6 @@ export default function Page() { const { poolId } = useWatch({ control }); - const selectedPool = useMemo( - () => pools?.find((pool) => pool.id === poolId), - [pools, poolId] - ); - const onSubmitCallback = useCallback( async (data: typeof depositSchema._type) => { console.log(data); @@ -55,9 +54,8 @@ export default function Page() { [form, onSubmitCallback] ); - const { data: poolBalances, isLoading } = useUserPoolBalance({ + const { data: poolBalances, isLoading: isBalanceLoading } = usePoolBalance({ poolId, - user: context?.account, chainId: context?.chainId, }); @@ -76,6 +74,16 @@ export default function Page() { return Unsupported chain; } + console.log(context.orderParams); + + if (!context?.orderParams?.buyTokenAddress) { + return ( +
+ Please specify your swap order before proceeding +
+ ); + } + return (
setValue("poolId", pool.id)} - selectedPool={selectedPool} + onSelect={(pool: IPool) => setValue("poolId", pool.id)} + loading={isPoolsLoading} + PoolComponent={DropdownPoolComponent} pools={pools || []} + poolsEmptyMessage="None CoW pool with the buy token was found" /> {poolId && (
@@ -94,11 +104,11 @@ export default function Page() { balancesList={ poolBalances ? [poolBalances, poolBalances] : undefined } - isLoading={isLoading} + isLoading={isBalanceLoading} />
- {"Alert + viewBox="0 0 32 32" + className={`w-full h-full fill-muted-foreground/50`} + > + {/* Copied from cowswap assets: https://github.com/cowprotocol/cowswap/blob/4b89ecbf661e6c30193586c704e23c78b2bfc22b/libs/assets/src/cow-swap/alert-circle.svg */} + +
Once you add the hook, any changes to the swap won't automatically update it. Review and adjust before swapping. From c31165cabc9e1fa52f2d4713a15b165c367bba75 Mon Sep 17 00:00:00 2001 From: Pedro Yves Fracari Date: Tue, 15 Oct 2024 10:36:00 -0300 Subject: [PATCH 5/8] fix wrong colors --- apps/deposit-pool/src/app/layout.tsx | 2 +- packages/cow-hooks-ui/global.css | 2 +- packages/cow-hooks-ui/src/PoolsDropdownMenu.tsx | 8 ++++---- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/apps/deposit-pool/src/app/layout.tsx b/apps/deposit-pool/src/app/layout.tsx index 0a36e1e..0d548b6 100644 --- a/apps/deposit-pool/src/app/layout.tsx +++ b/apps/deposit-pool/src/app/layout.tsx @@ -12,7 +12,7 @@ export default function Layout({ children }: { children: React.ReactNode }) { - + {children} diff --git a/packages/cow-hooks-ui/global.css b/packages/cow-hooks-ui/global.css index abdbbb7..a804397 100644 --- a/packages/cow-hooks-ui/global.css +++ b/packages/cow-hooks-ui/global.css @@ -79,7 +79,7 @@ div[data-rk] { --secondary-foreground: var(--cow-color-secondary-text); --destructive: var(--cow-color-danger); --destructive-foreground: var(--cow-color-danger-text); - --muted: var(--cow-color-paper-darkest); + --muted: var(--cow-color-paper-darker); --muted-foreground: var(--cow-color-secondary-text); --accent: var(--cow-color-info); --accent-foreground: var(--cow-color-white); diff --git a/packages/cow-hooks-ui/src/PoolsDropdownMenu.tsx b/packages/cow-hooks-ui/src/PoolsDropdownMenu.tsx index 8b8398e..baf4a06 100644 --- a/packages/cow-hooks-ui/src/PoolsDropdownMenu.tsx +++ b/packages/cow-hooks-ui/src/PoolsDropdownMenu.tsx @@ -51,9 +51,9 @@ export function PoolsDropdownMenu({ setOpen(true)} @@ -86,7 +86,7 @@ export function PoolsDropdownMenu({ setOpen(false); onSelect(pool); }} - className="group hover:bg-muted hover:text-muted-foreground rounded-md px-2 cursor-pointer flex flex-col gap-1 items-start" + className="group hover:bg-color-paper-darkest hover:text-muted-foreground rounded-md px-2 cursor-pointer flex flex-col gap-1 items-start" > @@ -97,7 +97,7 @@ export function PoolsDropdownMenu({ {poolLink && ( From 07bc3b4b0fd66dcf039772f2ac6270362db30add Mon Sep 17 00:00:00 2001 From: Pedro Yves Fracari Date: Wed, 16 Oct 2024 11:11:11 -0300 Subject: [PATCH 6/8] fix jean feedbacks --- apps/deposit-pool/src/app/page.tsx | 15 ++++++++------- .../src/components/TokenAmountInputs.tsx | 6 +++--- apps/deposit-pool/src/hooks/useTokenPools.ts | 4 ++-- apps/deposit-pool/src/utils/schema.ts | 2 +- 4 files changed, 14 insertions(+), 13 deletions(-) diff --git a/apps/deposit-pool/src/app/page.tsx b/apps/deposit-pool/src/app/page.tsx index 02fac29..f3bd825 100644 --- a/apps/deposit-pool/src/app/page.tsx +++ b/apps/deposit-pool/src/app/page.tsx @@ -2,10 +2,10 @@ import { Button, Form } from "@bleu/ui"; -import { zodResolver } from "@hookform/resolvers/zod"; import { useCallback, useMemo } from "react"; -import { useForm, useWatch } from "react-hook-form"; -import { depositSchema, depositSchemaType } from "#/utils/schema"; +import { zodResolver } from "@hookform/resolvers/zod"; +import { useForm, useFormContext, useWatch } from "react-hook-form"; +import { depositSchema, DepositSchemaType } from "#/utils/schema"; import { IPool, PoolsDropdownMenu, @@ -16,15 +16,16 @@ import { ALL_SUPPORTED_CHAIN_IDS } from "@cowprotocol/cow-sdk"; import { useTokenPools } from "#/hooks/useTokenPools"; import { PoolItemInfo } from "#/components/PoolItemInfo"; import { TokenAmountInputs } from "#/components/TokenAmountInputs"; +import { Address } from "viem"; export default function Page() { const { context } = useIFrameContext(); const { data: pools, isLoading: isLoadingPools } = useTokenPools( context?.chainId, - context?.orderParams?.buyTokenAddress + context?.orderParams?.buyTokenAddress as Address ); - const form = useForm({ + const form = useForm({ resolver: zodResolver(depositSchema), defaultValues: { poolId: "", @@ -35,7 +36,7 @@ export default function Page() { setValue, control, formState: { isSubmitting, isSubmitSuccessful }, - } = form; + } = useFormContext(); const { poolId } = useWatch({ control }); @@ -44,7 +45,7 @@ export default function Page() { [pools, poolId] ); - const onSubmitCallback = useCallback(async (data: depositSchemaType) => { + const onSubmitCallback = useCallback(async (data: DepositSchemaType) => { console.log(data); }, []); diff --git a/apps/deposit-pool/src/components/TokenAmountInputs.tsx b/apps/deposit-pool/src/components/TokenAmountInputs.tsx index 888c82b..e8df049 100644 --- a/apps/deposit-pool/src/components/TokenAmountInputs.tsx +++ b/apps/deposit-pool/src/components/TokenAmountInputs.tsx @@ -11,12 +11,12 @@ import { formatNumber, Input, Label } from "@bleu/ui"; import { useCallback, useEffect, useMemo, useState } from "react"; import { calculateProportionalTokenAmounts, getTokenPrice } from "#/utils/math"; import { useFormContext, useWatch } from "react-hook-form"; -import { depositSchemaType } from "#/utils/schema"; +import { DepositSchemaType } from "#/utils/schema"; import { Address, formatUnits } from "viem"; export function TokenAmountInputs({ pool }: { pool: IPool | undefined }) { const { context } = useIFrameContext(); - const { control, setValue } = useFormContext(); + const { control, setValue } = useFormContext(); const { data: poolBalances, isLoading: isBalanceLoading } = usePoolBalance({ poolId: pool?.id, @@ -131,7 +131,7 @@ export function TokenAmountInput({ tokenPrice?: number; updateTokenAmounts: (amount: number, address: Address) => void; }) { - const { register, control } = useFormContext(); + const { register, control } = useFormContext(); const amount = useWatch({ control, diff --git a/apps/deposit-pool/src/hooks/useTokenPools.ts b/apps/deposit-pool/src/hooks/useTokenPools.ts index 6a80b7f..49b1692 100644 --- a/apps/deposit-pool/src/hooks/useTokenPools.ts +++ b/apps/deposit-pool/src/hooks/useTokenPools.ts @@ -3,9 +3,9 @@ import { SupportedChainId } from "@cowprotocol/cow-sdk"; import { usePools } from "@bleu/cow-hooks-ui"; import { Address } from "viem"; -export function useTokenPools(chainId?: SupportedChainId, token?: string) { +export function useTokenPools(chainId?: SupportedChainId, token?: Address) { return usePools( - { poolTypeIn: ["COW_AMM"], tokensIn: token ? [token as Address] : [] }, + { poolTypeIn: ["COW_AMM"], tokensIn: token ? [token] : [] }, chainId, "totalLiquidity" ); diff --git a/apps/deposit-pool/src/utils/schema.ts b/apps/deposit-pool/src/utils/schema.ts index 9ff76fa..ced45ca 100644 --- a/apps/deposit-pool/src/utils/schema.ts +++ b/apps/deposit-pool/src/utils/schema.ts @@ -6,4 +6,4 @@ export const depositSchema = z.object({ referenceTokenAddress: z.string(), }); -export type depositSchemaType = z.infer; +export type DepositSchemaType = z.infer; From a319bccc2c6e41686fe71aa470e19518d660d601 Mon Sep 17 00:00:00 2001 From: Pedro Yves Fracari Date: Wed, 16 Oct 2024 11:11:19 -0300 Subject: [PATCH 7/8] fix elena feedbacks --- apps/withdraw-pool/src/app/layout.tsx | 9 ++- apps/withdraw-pool/src/app/page.tsx | 48 +++----------- apps/withdraw-pool/src/app/signing/page.tsx | 25 +++++-- .../src/components/PoolItemInfo.tsx | 4 +- .../src/components/SubmitButton.tsx | 6 +- apps/withdraw-pool/src/context/form.tsx | 65 +++++++++++++++++++ .../src/hooks/useUserPoolBalance.tsx | 12 +++- apps/withdraw-pool/src/utils/schema.ts | 2 + .../cow-hooks-ui/src/PoolsDropdownMenu.tsx | 2 +- packages/cow-hooks-ui/src/hooks/usePools.ts | 4 ++ .../cow-hooks-ui/src/hooks/useSubmitHook.ts | 20 +++--- .../cow-hooks-ui/src/ui/WaitingSignature.tsx | 32 ++++++--- pnpm-lock.yaml | 28 +------- 13 files changed, 162 insertions(+), 95 deletions(-) create mode 100644 apps/withdraw-pool/src/context/form.tsx diff --git a/apps/withdraw-pool/src/app/layout.tsx b/apps/withdraw-pool/src/app/layout.tsx index 6d0b5cf..ba65a05 100644 --- a/apps/withdraw-pool/src/app/layout.tsx +++ b/apps/withdraw-pool/src/app/layout.tsx @@ -6,17 +6,20 @@ import "@bleu/cow-hooks-ui/global.css"; import Head from "next/head"; import type * as React from "react"; +import { FormContextProvider } from "#/context/form"; export default function Layout({ children }: { children: React.ReactNode }) { return ( - + -
- {children} +
+ + {children} +
diff --git a/apps/withdraw-pool/src/app/page.tsx b/apps/withdraw-pool/src/app/page.tsx index ef8abab..7cabc6b 100644 --- a/apps/withdraw-pool/src/app/page.tsx +++ b/apps/withdraw-pool/src/app/page.tsx @@ -2,11 +2,9 @@ import { Form } from "@bleu/ui"; -import { zodResolver } from "@hookform/resolvers/zod"; import { useCallback, useEffect, useMemo, useState } from "react"; -import { useForm, useWatch } from "react-hook-form"; -import { withdrawSchema } from "#/utils/schema"; -import { useGetHookInfo } from "#/hooks/useGetHookInfo"; +import { useFormContext, useWatch } from "react-hook-form"; +import { WithdrawSchemaType } from "#/utils/schema"; import { IPool, PoolsDropdownMenu, @@ -14,7 +12,6 @@ import { useIFrameContext, } from "@bleu/cow-hooks-ui"; import { useUserPoolContext } from "#/context/userPools"; -import { useRouter } from "next/navigation"; import { ALL_SUPPORTED_CHAIN_IDS } from "@cowprotocol/cow-sdk"; import { decodeExitPoolHookCalldata } from "#/utils/decodeExitPoolHookCalldata"; import { PoolForm } from "#/components/PoolForm"; @@ -22,22 +19,12 @@ import { PoolItemInfo } from "#/components/PoolItemInfo"; export default function Page() { const [isEditHookLoading, setIsEditHookLoading] = useState(true); - const { context, setHookInfo, publicClient } = useIFrameContext(); + const { context, publicClient } = useIFrameContext(); const { userPoolSwr: { data: pools, isLoading: isLoadingPools }, } = useUserPoolContext(); - const form = useForm({ - resolver: zodResolver(withdrawSchema), - defaultValues: { - poolId: "", - withdrawPct: 100, - }, - }); - - const router = useRouter(); - - const { setValue, control, handleSubmit } = form; + const { setValue, control } = useFormContext(); const poolId = useWatch({ control, name: "poolId" }); @@ -57,27 +44,16 @@ export default function Page() { } }, [context?.hookToEdit]); - useEffect(() => { - loadHookInfo(); - }, [loadHookInfo]); - const selectedPool = useMemo(() => { return pools?.find( (pool) => pool.id.toLowerCase() === poolId?.toLowerCase() ); }, [pools, poolId]); - const getHooksTransactions = useGetHookInfo(selectedPool); - - const onSubmitCallback = useCallback( - async (data: typeof withdrawSchema._type) => { - const hookInfo = await getHooksTransactions(data.withdrawPct); - if (!hookInfo) return; - setHookInfo(hookInfo); - router.push("/signing"); - }, - [context?.account, getHooksTransactions, setHookInfo, router] - ); + useEffect(() => { + if (poolId) return; + loadHookInfo(); + }, [loadHookInfo]); if (!context) return null; @@ -106,11 +82,7 @@ export default function Page() { } return ( - +
setValue("poolId", pool.id)} pools={pools || []} @@ -118,6 +90,6 @@ export default function Page() { selectedPool={selectedPool} /> - +
); } diff --git a/apps/withdraw-pool/src/app/signing/page.tsx b/apps/withdraw-pool/src/app/signing/page.tsx index 1022f91..5a00de5 100644 --- a/apps/withdraw-pool/src/app/signing/page.tsx +++ b/apps/withdraw-pool/src/app/signing/page.tsx @@ -12,7 +12,8 @@ import { useSubmitHook, } from "@bleu/cow-hooks-ui"; import { BigNumber, type BigNumberish } from "ethers"; -import { useCallback, useMemo, useState } from "react"; +import { useRouter } from "next/navigation"; +import { useCallback, useEffect, useMemo, useState } from "react"; import type { Address } from "viem"; export default function Page() { @@ -28,6 +29,8 @@ export default function Page() { publicClient, cowShedProxy, } = useIFrameContext(); + const [account, setAccount] = useState(); + const router = useRouter(); const submitHook = useSubmitHook({ actions, context, @@ -46,13 +49,27 @@ export default function Page() { spender: cowShedProxy, }); + useEffect(() => { + if (!account && context?.account) { + setAccount(context.account); + return; + } + if ( + account && + context?.account && + context.account.toLowerCase() !== account.toLowerCase() + ) { + router.push("/"); + } + }, [context?.account]); + const cowShedCallback = useCallback(async () => { if (!cowShedSignature || !hookInfo || !cowShed) return; const txs = [...permitTxs, ...hookInfo.txs]; const cowShedCall = await cowShedSignature(txs); if (!cowShedCall) throw new Error("Error signing hooks"); - submitHook({ + await submitHook({ target: cowShed.getFactoryAddress(), callData: cowShedCall, }); @@ -66,7 +83,7 @@ export default function Page() { }) => { const permitData = await handleTokenAllowance( BigNumber.from(permit.amount), - permit.tokenAddress as Address, + permit.tokenAddress as Address ); if (permitData) { @@ -81,7 +98,7 @@ export default function Page() { } setCurrentStepIndex((prev) => prev + 1); }, - [handleTokenAllowance], + [handleTokenAllowance] ); const steps = useMemo(() => { diff --git a/apps/withdraw-pool/src/components/PoolItemInfo.tsx b/apps/withdraw-pool/src/components/PoolItemInfo.tsx index a4836ac..1697b2b 100644 --- a/apps/withdraw-pool/src/components/PoolItemInfo.tsx +++ b/apps/withdraw-pool/src/components/PoolItemInfo.tsx @@ -2,5 +2,7 @@ import { IPool } from "@bleu/cow-hooks-ui"; import { formatNumber } from "@bleu/ui"; export function PoolItemInfo({ pool }: { pool: IPool }) { - return ${formatNumber(pool.userBalance.totalBalanceUsd, 2)}; + return ( + Your liquidity: ${formatNumber(pool.userBalance.totalBalanceUsd, 2)} + ); } diff --git a/apps/withdraw-pool/src/components/SubmitButton.tsx b/apps/withdraw-pool/src/components/SubmitButton.tsx index 9f2f922..0402ab1 100644 --- 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 { isSubmitSuccessful, isSubmitting } = useFormState({ control }); + const { isSubmitting } = useFormState({ control }); const withdrawPct = useWatch({ control, name: "withdrawPct" }); const buttonProps = useMemo(() => { @@ -15,7 +15,7 @@ export function SubmitButton({ poolId }: { poolId?: string }) { return { disabled: true, message: "Define percentage" }; return { disabled: false, - message: context?.hookToEdit ? "Edit pre-hook" : "Add pre-hook", + message: context?.hookToEdit ? "Update pre-hook" : "Add pre-hook", }; }, [withdrawPct, poolId, context?.hookToEdit]); @@ -26,7 +26,7 @@ export function SubmitButton({ poolId }: { poolId?: string }) { type="submit" className="my-2 rounded-2xl text-lg min-h-[58px]" disabled={buttonProps.disabled} - loading={isSubmitting || isSubmitSuccessful} + loading={isSubmitting} loadingText="Creating hook..." > {buttonProps.message} diff --git a/apps/withdraw-pool/src/context/form.tsx b/apps/withdraw-pool/src/context/form.tsx new file mode 100644 index 0000000..1e32dd0 --- /dev/null +++ b/apps/withdraw-pool/src/context/form.tsx @@ -0,0 +1,65 @@ +"use client"; + +import { type PropsWithChildren, useCallback, useEffect, useMemo } from "react"; + +import { useForm, useWatch } from "react-hook-form"; +import { zodResolver } from "@hookform/resolvers/zod"; +import { withdrawSchema, WithdrawSchemaType } from "#/utils/schema"; +import { Form } from "@bleu/ui"; +import { useIFrameContext } from "@bleu/cow-hooks-ui"; +import { useRouter } from "next/navigation"; +import { useGetHookInfo } from "#/hooks/useGetHookInfo"; +import { useUserPoolContext } from "./userPools"; + +export function FormContextProvider({ children }: PropsWithChildren) { + const { context, setHookInfo } = useIFrameContext(); + const form = useForm({ + resolver: zodResolver(withdrawSchema), + defaultValues: { + poolId: "", + withdrawPct: 100, + }, + }); + + const { control, handleSubmit, setValue } = form; + + const { + userPoolSwr: { data: pools }, + } = useUserPoolContext(); + + const poolId = useWatch({ control, name: "poolId" }); + + const selectedPool = useMemo(() => { + return pools?.find( + (pool) => pool.id.toLowerCase() === poolId?.toLowerCase() + ); + }, [pools, poolId]); + + const getHooksTransactions = useGetHookInfo(selectedPool); + + const router = useRouter(); + + const onSubmitCallback = useCallback( + async (data: WithdrawSchemaType) => { + const hookInfo = await getHooksTransactions(data.withdrawPct); + if (!hookInfo) return; + setHookInfo(hookInfo); + router.push("/signing"); + }, + [context?.account, getHooksTransactions, setHookInfo, router] + ); + + useEffect(() => { + setValue("poolId", ""); + }, [context?.account]); + + return ( +
+ {children} +
+ ); +} diff --git a/apps/withdraw-pool/src/hooks/useUserPoolBalance.tsx b/apps/withdraw-pool/src/hooks/useUserPoolBalance.tsx index 778f483..246210c 100644 --- a/apps/withdraw-pool/src/hooks/useUserPoolBalance.tsx +++ b/apps/withdraw-pool/src/hooks/useUserPoolBalance.tsx @@ -32,6 +32,7 @@ interface IQuery { symbol: string; balance: string; balanceUSD: number; + weight: number; }[]; } @@ -60,6 +61,7 @@ export const POOL_QUERY = gql` symbol balance balanceUSD + weight } } } @@ -105,6 +107,7 @@ async function fetchUserPoolBalance( fiatAmount: Number( formatUnits(balanceUSDTotal.mul(userBpt).div(totalBpt), 18) ), + weight: token.weight, }; }); } @@ -118,7 +121,12 @@ export function useUserPoolBalance({ poolId?: string; user?: string; }) { - return useSWR([chainId, poolId, user], () => - fetchUserPoolBalance(chainId, poolId, user) + return useSWR( + [chainId, poolId, user], + () => fetchUserPoolBalance(chainId, poolId, user), + { + revalidateOnFocus: false, + revalidateOnReconnect: false, + } ); } diff --git a/apps/withdraw-pool/src/utils/schema.ts b/apps/withdraw-pool/src/utils/schema.ts index 122eb9e..1d0841d 100644 --- a/apps/withdraw-pool/src/utils/schema.ts +++ b/apps/withdraw-pool/src/utils/schema.ts @@ -4,3 +4,5 @@ export const withdrawSchema = z.object({ poolId: z.string(), withdrawPct: z.coerce.number().min(0).max(100), }); + +export type WithdrawSchemaType = z.infer; diff --git a/packages/cow-hooks-ui/src/PoolsDropdownMenu.tsx b/packages/cow-hooks-ui/src/PoolsDropdownMenu.tsx index baf4a06..a8ec6b3 100644 --- a/packages/cow-hooks-ui/src/PoolsDropdownMenu.tsx +++ b/packages/cow-hooks-ui/src/PoolsDropdownMenu.tsx @@ -53,7 +53,7 @@ export function PoolsDropdownMenu({ className={cn( "w-full flex p-2 justify-between rounded-xl space-x-1 items-center text-sm bg-background bg-muted text-foreground group", selectedPool - ? "bg-muted shadow-sm text-foreground hover:bg-color-paper-darkest hover:text-primary" + ? "bg-muted shadow-sm text-foreground hover:bg-primary hover:text-primary-foreground" : "bg-primary text-primary-foreground hover:bg-color-primary-lighter" )} onClick={() => setOpen(true)} diff --git a/packages/cow-hooks-ui/src/hooks/usePools.ts b/packages/cow-hooks-ui/src/hooks/usePools.ts index cc21cc0..b9e799a 100644 --- a/packages/cow-hooks-ui/src/hooks/usePools.ts +++ b/packages/cow-hooks-ui/src/hooks/usePools.ts @@ -146,6 +146,10 @@ export function usePools( }, })); }); + }, + { + revalidateOnFocus: false, + revalidateOnReconnect: false, } ); } diff --git a/packages/cow-hooks-ui/src/hooks/useSubmitHook.ts b/packages/cow-hooks-ui/src/hooks/useSubmitHook.ts index f42dfda..b8b694c 100644 --- a/packages/cow-hooks-ui/src/hooks/useSubmitHook.ts +++ b/packages/cow-hooks-ui/src/hooks/useSubmitHook.ts @@ -20,14 +20,18 @@ export function useSubmitHook({ async (hook: Omit) => { if (!context || !actions) return; - const estimatedGas = await publicClient?.estimateGas({ - account: COW_PROTOCOL_SETTLEMENT_CONTRACT_ADDRESS[ - context.chainId - ] as `0x${string}`, - to: hook.target as Address, - value: BigInt(0), - data: hook.callData as `0x${string}`, - }); + const estimatedGas = await publicClient + ?.estimateGas({ + account: COW_PROTOCOL_SETTLEMENT_CONTRACT_ADDRESS[ + context.chainId + ] as `0x${string}`, + to: hook.target as Address, + value: BigInt(0), + data: hook.callData as `0x${string}`, + }) + .catch(() => { + throw new Error("Failed to estimate hook gas"); + }); const gasLimit = BigNumber.from(estimatedGas) .mul(120) diff --git a/packages/cow-hooks-ui/src/ui/WaitingSignature.tsx b/packages/cow-hooks-ui/src/ui/WaitingSignature.tsx index 1494f7a..f8589cc 100644 --- a/packages/cow-hooks-ui/src/ui/WaitingSignature.tsx +++ b/packages/cow-hooks-ui/src/ui/WaitingSignature.tsx @@ -5,6 +5,7 @@ import useSWR from "swr"; import type { SignatureStepsProps } from "../types"; import { Spinner } from "./Spinner"; import { InfoTooltip } from "./TooltipBase"; +import { useRouter } from "next/navigation"; export function WaitingSignature({ callback, @@ -24,6 +25,8 @@ export function WaitingSignature({ }, }); + const router = useRouter(); + return (
@@ -33,14 +36,27 @@ export function WaitingSignature({
{isValidating && } {error && !isValidating && ( - +
+ + {error.message + .replace(error?.code || "", "") + .replace(":", "") + .trim()} + +
+ + +
+
)}
); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index eeb7534..2bc7dff 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -291,7 +291,7 @@ importers: version: 6.1.0(encoding@0.1.13)(graphql@16.9.0) next: specifier: 15.0.0-rc.0 - version: 15.0.0-rc.0(react-dom@19.0.0-rc-e4953922-20240919(react@19.0.0-rc-e4953922-20240919))(react@19.0.0-rc-e4953922-20240919) + version: 15.0.0-rc.0(babel-plugin-react-compiler@0.0.0-experimental-6067d4e-20240923)(react-dom@19.0.0-rc-e4953922-20240919(react@19.0.0-rc-e4953922-20240919))(react@19.0.0-rc-e4953922-20240919) react: specifier: 19.0.0-rc-e4953922-20240919 version: 19.0.0-rc-e4953922-20240919 @@ -11476,32 +11476,6 @@ snapshots: - '@babel/core' - babel-plugin-macros - next@15.0.0-rc.0(react-dom@19.0.0-rc-e4953922-20240919(react@19.0.0-rc-e4953922-20240919))(react@19.0.0-rc-e4953922-20240919): - dependencies: - '@next/env': 15.0.0-rc.0 - '@swc/helpers': 0.5.11 - busboy: 1.6.0 - caniuse-lite: 1.0.30001666 - graceful-fs: 4.2.11 - postcss: 8.4.31 - react: 19.0.0-rc-e4953922-20240919 - react-dom: 19.0.0-rc-e4953922-20240919(react@19.0.0-rc-e4953922-20240919) - styled-jsx: 5.1.3(react@19.0.0-rc-e4953922-20240919) - optionalDependencies: - '@next/swc-darwin-arm64': 15.0.0-rc.0 - '@next/swc-darwin-x64': 15.0.0-rc.0 - '@next/swc-linux-arm64-gnu': 15.0.0-rc.0 - '@next/swc-linux-arm64-musl': 15.0.0-rc.0 - '@next/swc-linux-x64-gnu': 15.0.0-rc.0 - '@next/swc-linux-x64-musl': 15.0.0-rc.0 - '@next/swc-win32-arm64-msvc': 15.0.0-rc.0 - '@next/swc-win32-ia32-msvc': 15.0.0-rc.0 - '@next/swc-win32-x64-msvc': 15.0.0-rc.0 - sharp: 0.33.5 - transitivePeerDependencies: - - '@babel/core' - - babel-plugin-macros - nice-try@1.0.5: {} node-fetch@1.7.3: From 739e5010001cf821e512852130517e52986bdd46 Mon Sep 17 00:00:00 2001 From: Pedro Yves Fracari Date: Wed, 16 Oct 2024 13:29:52 -0300 Subject: [PATCH 8/8] fix build errors --- packages/cow-hooks-ui/src/PoolsDropdownMenu.tsx | 2 +- packages/cow-hooks-ui/src/hooks/usePools.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/cow-hooks-ui/src/PoolsDropdownMenu.tsx b/packages/cow-hooks-ui/src/PoolsDropdownMenu.tsx index a8ec6b3..df13475 100644 --- a/packages/cow-hooks-ui/src/PoolsDropdownMenu.tsx +++ b/packages/cow-hooks-ui/src/PoolsDropdownMenu.tsx @@ -13,11 +13,11 @@ import { } from "@bleu/ui"; import { ArrowTopRightIcon, ChevronDownIcon } from "@radix-ui/react-icons"; import { useMemo, useState } from "react"; -import { IPool } from "./types"; import { BalancerChainName } from "@bleu/utils"; import { useIFrameContext } from "./context/iframe"; import { TokenLogoWithWeight } from "./TokenLogoWithWeight"; import { Token } from "@uniswap/sdk-core"; +import { IPool } from "./types"; export function PoolsDropdownMenu({ onSelect, diff --git a/packages/cow-hooks-ui/src/hooks/usePools.ts b/packages/cow-hooks-ui/src/hooks/usePools.ts index b9e799a..522453c 100644 --- a/packages/cow-hooks-ui/src/hooks/usePools.ts +++ b/packages/cow-hooks-ui/src/hooks/usePools.ts @@ -1,9 +1,9 @@ -import { IPool } from "#/types"; import { BalancerChainName, GQL_CLIENT } from "@bleu/utils"; import { SupportedChainId } from "@cowprotocol/cow-sdk"; import { gql } from "graphql-request"; import useSWR from "swr"; import { Address, parseUnits } from "viem"; +import { IPool } from "../types"; interface IQuery { pools: {