Skip to content

Commit

Permalink
Merge pull request #62 from bleu/pedro/review-deposit-cow-amm-pt8
Browse files Browse the repository at this point in the history
Pedro/review deposit cow amm pt8
  • Loading branch information
yvesfracari authored Nov 25, 2024
2 parents 8b4d45a + aded44e commit e1d7efa
Show file tree
Hide file tree
Showing 9 changed files with 226 additions and 202 deletions.
3 changes: 2 additions & 1 deletion apps/deposit-pool/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,9 @@
"dependencies": {
"@balancer-labs/sdk": "1.1.6",
"@balancer/sdk": "0.26.1",
"@bleu.builders/ui": "0.1.133",
"@bleu/cow-hooks-ui": "workspace:*",
"@bleu/tsconfig": "workspace:*",
"@bleu.builders/ui": "0.1.133",
"@bleu/utils": "workspace:*",
"@cowprotocol/cow-sdk": "^5.5.1",
"@cowprotocol/hook-dapp-lib": "1.3.1",
Expand All @@ -29,6 +29,7 @@
"ethers": "^5.7.2",
"graphql": "^16.9.0",
"graphql-request": "^6.1.0",
"jotai": "^2.10.2",
"next": "15.0.0-rc.0",
"react": "19.0.0-rc-e4953922-20240919",
"react-dom": "19.0.0-rc-e4953922-20240919",
Expand Down
6 changes: 5 additions & 1 deletion apps/deposit-pool/src/app/layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import "@bleu/cow-hooks-ui/global.css";
import Head from "next/head";

import type * as React from "react";
import { SelectedPoolUpdater } from "./updaters/SelectedPoolUpdater";

export default function Layout({ children }: { children: React.ReactNode }) {
return (
Expand All @@ -14,7 +15,10 @@ export default function Layout({ children }: { children: React.ReactNode }) {
<link rel="manifest" href="/manifest.json" />
</Head>
<RootLayout>
<FormContextProvider>{children}</FormContextProvider>
<FormContextProvider>
<SelectedPoolUpdater />
{children}
</FormContextProvider>
</RootLayout>
</html>
);
Expand Down
5 changes: 5 additions & 0 deletions apps/deposit-pool/src/app/states/selectedPool.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import type { IPool } from "@bleu/cow-hooks-ui";
import { atom } from "jotai";

// Types
export const selectedPoolAtom = atom<IPool | undefined>();
146 changes: 146 additions & 0 deletions apps/deposit-pool/src/app/updaters/SelectedPoolUpdater.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,146 @@
import { useIFrameContext } from "@bleu/cow-hooks-ui";
import { BALANCER_GQL_CLIENT, BalancerChainName } from "@bleu/utils";
import type { SupportedChainId } from "@cowprotocol/cow-sdk";
import { gql } from "graphql-request";
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 { selectedPoolAtom } from "../states/selectedPool";

interface IQuery {
pool: {
id: `0x${string}`;
chain: string;
address: Address;
type: string;
decimals: number;
symbol: string;
protocolVersion: 1 | 2 | 3;
dynamicData: {
aprItems: {
apr: number;
id: string;
}[];
totalLiquidity: string;
volume24h: string;
totalShares: string;
};
allTokens: {
address: Address;
symbol: string;
decimals: number;
isNested: boolean;
weight: number;
}[];
userBalance: {
walletBalance: string;
walletBalanceUsd: number;
stakedBalances: {
balance: string;
stakingId: string;
}[];
};
};
}

const POOL_QUERY = gql`
query GetPool($id: String!, $chainName: GqlChain!) {
pool: poolGetPool(id: $id, chain: $chainName) {
id
chain
decimals
symbol
address
type
protocolVersion
dynamicData {
aprItems {
apr
id
}
totalLiquidity
volume24h
totalShares
}
allTokens {
address
symbol
decimals
isNested
weight
}
userBalance {
walletBalance
walletBalanceUsd
stakedBalances {
balance
stakingId
}
}
}
}
`;

export async function fetchPool(id?: string, chainId?: SupportedChainId) {
if (!id || !chainId) return;
const chainName = BalancerChainName[chainId];
return await BALANCER_GQL_CLIENT[chainId]
.request<IQuery>(POOL_QUERY, {
id,
chainName,
})
.then((result) => {
const pool = result.pool;
return {
...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),
pool.decimals,
),
stakingId: staked.stakingId,
})),
},
dynamicData: {
...pool.dynamicData,
totalShares: parseUnits(
Number(pool.dynamicData.totalShares).toFixed(pool.decimals),
pool.decimals,
),
},
};
});
}

export function SelectedPoolUpdater() {
const { context } = useIFrameContext();

const { data: pools } = useTokenBuyPools();
const poolId = useWatch({ name: "poolId" });
const setSelectedPool = useSetAtom(selectedPoolAtom);

useEffect(() => {
if (!pools || !poolId) return;
const newSelectedPool = pools?.find(
(pool) => pool.id.toLowerCase() === poolId.toLowerCase(),
);
if (newSelectedPool) {
setSelectedPool(newSelectedPool);
return;
}
fetchPool(poolId, context?.chainId).then((pool) => {
if (!pool) return;
setSelectedPool(pool);
});
}, [poolId, pools, context, setSelectedPool]);

return null;
}
18 changes: 9 additions & 9 deletions apps/deposit-pool/src/components/PoolForm.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,12 @@ import {
Spinner,
useIFrameContext,
} from "@bleu/cow-hooks-ui";
import { useCallback, useEffect, useMemo } from "react";
import { useCallback, useMemo } from "react";
import { useFormContext, useWatch } from "react-hook-form";
import { type Address, formatUnits } from "viem";
import { usePoolBalance } from "#/hooks/usePoolBalance";
import type { FormType } from "#/types";
import { formDefaultValues } from "#/utils/formDefaultValues";
// import { formDefaultValues } from "#/utils/formDefaultValues";
import { calculateProportionalTokenAmounts, getTokenPrice } from "#/utils/math";
// import { AmountTypeCheckbox } from "./AmountTypeCheckbox";
import { FormButton } from "./FormButton";
Expand All @@ -19,7 +19,7 @@ import { TokenAmountInput } from "./TokenAmountInput";

export function PoolForm({ pool }: { pool: IPool | undefined }) {
const { context } = useIFrameContext();
const { control, setValue, reset } = useFormContext<FormType>();
const { control, setValue } = useFormContext<FormType>();

// const { buyAmount } = useSwapAmount();
// const _buyAmountAfterSwap = useTokenBalanceAfterSwap(
Expand All @@ -31,16 +31,16 @@ export function PoolForm({ pool }: { pool: IPool | undefined }) {
chainId: context?.chainId,
});

const poolId = useWatch({ control, name: "poolId" });
// const poolId = useWatch({ control, name: "poolId" });

const amounts = useWatch({ control, name: "amounts" });
// const amountType = useWatch({ control, name: "amountType" });

useEffect(() => {
if (pool?.id.toLowerCase() !== poolId.toLowerCase()) {
reset({ ...formDefaultValues, poolId: pool?.id });
}
}, [reset, pool, poolId]);
// useEffect(() => {
// if (pool?.id.toLowerCase() !== poolId.toLowerCase()) {
// reset({ ...formDefaultValues, poolId: pool?.id });
// }
// }, [reset, pool, poolId]);

const tokenPrices = useMemo(
() => poolBalances?.map((poolBalance) => getTokenPrice(poolBalance)),
Expand Down
17 changes: 5 additions & 12 deletions apps/deposit-pool/src/contexts/form.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
"use client";

import { type PropsWithChildren, useCallback, useMemo } from "react";
import { type PropsWithChildren, useCallback } from "react";

import { Form } from "@bleu.builders/ui";
import { useIFrameContext } from "@bleu/cow-hooks-ui";
import { useRouter } from "next/navigation";
import { useForm, useWatch } from "react-hook-form";
import { useForm } from "react-hook-form";
import { useGetHookInfo } from "#/hooks/useGetHookInfo";
import { useTokenBuyPools } from "#/hooks/useTokenBuyPools";
import { useSelectedPool } from "#/hooks/useSelectedPool";
import type { FormType } from "#/types";
// import { formDefaultValues } from "#/utils/formDefaultValues";

Expand All @@ -17,18 +17,11 @@ export function FormContextProvider({ children }: PropsWithChildren) {
// defaultValues: formDefaultValues,
});

const { handleSubmit, control } = form;
const { handleSubmit } = form;

const router = useRouter();

const { data: pools } = useTokenBuyPools();

const { poolId } = useWatch({ control });

const selectedPool = useMemo(
() => pools?.find((pool) => pool.id === poolId),
[pools, poolId],
);
const selectedPool = useSelectedPool();

const getHookInfo = useGetHookInfo(selectedPool);

Expand Down
Loading

0 comments on commit e1d7efa

Please sign in to comment.