Skip to content

Commit

Permalink
update StakeForm and withdraw-liquidity to use usePositions
Browse files Browse the repository at this point in the history
  • Loading branch information
@eli-d
eli-d committed Oct 2, 2024
1 parent 6dcb707 commit a0a66e7
Show file tree
Hide file tree
Showing 5 changed files with 14 additions and 78 deletions.
40 changes: 5 additions & 35 deletions web/src/app/stake/pool/withdraw-liquidity/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,7 @@ import Slider from "@/components/Slider";
import ArrowDown from "@/assets/icons/arrow-down-white.svg";
import { useStakeStore } from "@/stores/useStakeStore";
import { useAccount, useChainId, useSimulateContract } from "wagmi";
import { graphql, useFragment } from "@/gql";
import { useGraphqlUser } from "@/hooks/useGraphql";
import { graphql } from "@/gql";
import { useEffect, useMemo, useState } from "react";
import { usdFormat } from "@/lib/usdFormat";
import { sqrtPriceX96ToPrice } from "@/lib/math";
Expand All @@ -24,32 +23,7 @@ import { useContracts } from "@/config/contracts";
import { useFeatureFlag } from "@/hooks/useFeatureFlag";
import { CheckboxContainer } from "@/components/ui/checkbox";
import { superpositionTestnet } from "@/config/chains";

const PositionsFragment = graphql(`
fragment WithdrawPositionsFragment on Wallet {
positions {
positions {
positionId
lower
upper
owner {
address
}
liquidity {
fusdc {
valueUsd
valueScaled
}
token1 {
valueUsd
valueScaled
}
}
isVested
}
}
}
`);
import { usePositions } from "@/hooks/usePostions";

export default function WithdrawLiquidity() {
const router = useRouter();
Expand Down Expand Up @@ -117,13 +91,9 @@ export default function WithdrawLiquidity() {
? sqrtPriceX96ToPrice(poolSqrtPriceX96.result, token0.decimals)
: 0n;

const { data } = useGraphqlUser();

const positionsData = useFragment(PositionsFragment, data?.getWallet);
const position = positionsData?.positions.positions.find(
(p) =>
p.positionId.toString() === positionId &&
p.owner.address === address?.toLowerCase(),
const { positions } = usePositions();
const position = positions.find(
(p) => p.positionId.toString() === positionId,
);
const {
upper: upperTick,
Expand Down
26 changes: 5 additions & 21 deletions web/src/components/StakeForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ import Index from "@/components/Slider";
import { useWeb3Modal } from "@web3modal/wagmi/react";
import { useFeatureFlag } from "@/hooks/useFeatureFlag";
import { graphql, useFragment } from "@/gql";
import { useGraphqlGlobal, useGraphqlUser } from "@/hooks/useGraphql";
import { useGraphqlGlobal } from "@/hooks/useGraphql";
import { usdFormat } from "@/lib/usdFormat";
import {
getTokenFromAddress,
Expand All @@ -58,6 +58,7 @@ import LiquidityRangeVisualizer from "./LiquidityRangeVisualizer";
import { useContracts } from "@/config/contracts";
import { CheckboxContainer } from "./ui/checkbox";
import { superpositionTestnet } from "@/config/chains";
import { usePositions } from "@/hooks/usePostions";

type StakeFormProps = { poolId: string } & (
| {
Expand Down Expand Up @@ -90,19 +91,6 @@ const StakeFormFragment = graphql(`
}
`);

const PositionsFragment = graphql(`
fragment DepositPositionsFragment on Wallet {
positions {
positions {
positionId
lower
upper
isVested
}
}
}
`);

export const StakeForm = ({ mode, poolId, positionId }: StakeFormProps) => {
const [feeTier, setFeeTier] = useState<"auto" | "manual">("auto");
const { address, chainId } = useAccount();
Expand Down Expand Up @@ -168,7 +156,6 @@ export const StakeForm = ({ mode, poolId, positionId }: StakeFormProps) => {
// Parse the price lower and upper, and set the ticks properly.

const { data } = useGraphqlGlobal();
const { data: userData } = useGraphqlUser();

const poolsData = useFragment(StakeFormFragment, data?.pools);
const poolData = poolsData?.find(
Expand All @@ -185,13 +172,10 @@ export const StakeForm = ({ mode, poolId, positionId }: StakeFormProps) => {
() => poolData?.priceOverTime.daily.map((price) => parseFloat(price)),
[poolData],
);
const positionData_ = useFragment(PositionsFragment, userData?.getWallet);
const { positions } = usePositions();
const positionData = useMemo(
() =>
positionData_?.positions.positions.find(
(p) => p.positionId === positionId,
),
[positionData_, positionId],
() => positions.find((p) => p.positionId === positionId),
[positions, positionId],
);
const { isVested } = positionData || { isVested: false };
const [isVesting, setIsVesting] = useState(isVested);
Expand Down
14 changes: 2 additions & 12 deletions web/src/gql/gql.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,17 +16,15 @@ const documents = {
"\n fragment AllPoolsFragment on SeawaterPool {\n address\n token {\n name\n decimals\n }\n volumeOverTime {\n daily {\n fusdc {\n valueScaled\n }\n }\n }\n tvlOverTime {\n daily\n }\n liquidityOverTime {\n daily {\n fusdc {\n valueScaled\n }\n }\n }\n positions {\n positions {\n lower\n upper\n }\n }\n }\n": types.AllPoolsFragmentFragmentDoc,
"\n fragment SelectPrimeAssetFragment on SeawaterPool {\n address\n volumeOverTime {\n daily {\n fusdc {\n valueUsd\n }\n }\n }\n token {\n name\n symbol\n address\n decimals\n }\n }\n": types.SelectPrimeAssetFragmentFragmentDoc,
"\n fragment ManagePoolFragment on SeawaterPool {\n address\n id\n liquidity {\n liquidity\n }\n token {\n symbol\n name\n decimals\n }\n earnedFeesAPRFUSDC\n liquidityCampaigns {\n campaignId\n tickLower\n tickUpper\n fromTimestamp\n endTimestamp\n }\n }\n": types.ManagePoolFragmentFragmentDoc,
"\n fragment WithdrawPositionsFragment on Wallet {\n positions {\n positions {\n positionId\n lower\n upper\n owner {\n address\n }\n liquidity {\n fusdc {\n valueUsd\n valueScaled\n }\n token1 {\n valueUsd\n valueScaled\n }\n }\n isVested\n }\n }\n }\n": types.WithdrawPositionsFragmentFragmentDoc,
"\n fragment SwapExploreFragment on SeawaterPool {\n token {\n name\n symbol\n address\n decimals\n }\n price\n }\n": types.SwapExploreFragmentFragmentDoc,
"\n fragment NotesFragment on Note {\n content\n placement\n }\n": types.NotesFragmentFragmentDoc,
"\n fragment MyPositionsInventoryWalletFragment on Wallet {\n id\n positions {\n positions {\n id\n pool {\n token {\n name\n address\n symbol\n }\n }\n }\n }\n }\n": types.MyPositionsInventoryWalletFragmentFragmentDoc,
"\n fragment TradeTabTransactionsFragment on SeawaterSwap {\n timestamp\n amountIn {\n token {\n symbol\n }\n valueScaled\n }\n amountOut {\n token {\n symbol\n }\n valueScaled\n }\n }\n": types.TradeTabTransactionsFragmentFragmentDoc,
"\n fragment StakeFormFragment on SeawaterPool {\n address\n earnedFeesAPRFUSDC\n fee\n config {\n classification\n }\n priceOverTime {\n daily\n }\n liquidity {\n tickLower\n tickUpper\n price\n liquidity\n }\n }\n": types.StakeFormFragmentFragmentDoc,
"\n fragment DepositPositionsFragment on Wallet {\n positions {\n positions {\n positionId\n lower\n upper\n isVested\n }\n }\n }\n": types.DepositPositionsFragmentFragmentDoc,
"\n fragment SwapFormFragment on SeawaterPool {\n address\n fee\n earnedFeesAPRFUSDC\n earnedFeesAPRToken1\n token {\n address\n decimals\n name\n symbol\n }\n }\n": types.SwapFormFragmentFragmentDoc,
"\n fragment SwapProPoolFragment on SeawaterPool {\n address\n token {\n address\n symbol\n }\n liquidity {\n liquidity\n }\n priceOverTime {\n daily\n monthly\n }\n volumeOverTime {\n monthly {\n token1 {\n timestamp\n valueUsd\n }\n fusdc {\n timestamp\n valueUsd\n }\n }\n daily {\n token1 {\n timestamp\n valueUsd\n }\n fusdc {\n timestamp\n valueUsd\n }\n }\n }\n liquidityOverTime {\n daily {\n timestamp\n fusdc {\n valueUsd\n }\n }\n monthly {\n timestamp\n fusdc {\n valueUsd\n }\n }\n }\n swaps {\n swaps {\n transactionHash\n timestamp\n amountIn {\n valueScaled\n token {\n symbol\n }\n }\n amountOut {\n valueScaled\n token {\n symbol\n }\n }\n }\n }\n }\n": types.SwapProPoolFragmentFragmentDoc,
"\n query AllData {\n pools {\n # used for the pool selector\n address\n\n # add general fragments here\n ...SwapProPoolFragment\n ...AllPoolsFragment\n ...SelectPrimeAssetFragment\n ...SwapExploreFragment\n ...ManagePoolFragment\n ...SwapFormFragment\n ...StakeFormFragment\n }\n }\n": types.AllDataDocument,
"\n query ForUser($wallet: String!) {\n getSwapsForUser(wallet: $wallet, first: 10) {\n data {\n swaps {\n # add transaction fragments here\n ...TradeTabTransactionsFragment\n }\n }\n }\n\n getWallet(address: $wallet) {\n # add wallet fragments here\n ...MyPositionsInventoryWalletFragment\n ...PositionsFragment\n ...WithdrawPositionsFragment\n ...DepositPositionsFragment\n }\n\n notes(wallet: $wallet) {\n # add notes fragments here\n ...NotesFragment\n }\n }\n": types.ForUserDocument,
"\n query ForUser($wallet: String!) {\n getSwapsForUser(wallet: $wallet, first: 10) {\n data {\n swaps {\n # add transaction fragments here\n ...TradeTabTransactionsFragment\n }\n }\n }\n\n getWallet(address: $wallet) {\n # add wallet fragments here\n ...MyPositionsInventoryWalletFragment\n ...PositionsFragment\n }\n\n notes(wallet: $wallet) {\n # add notes fragments here\n ...NotesFragment\n }\n }\n": types.ForUserDocument,
"\n fragment PositionsFragment on Wallet {\n id\n positions {\n positions {\n created\n served {\n timestamp\n }\n positionId\n pool {\n token {\n name\n address\n symbol\n decimals\n }\n liquidityCampaigns {\n campaignId\n tickLower\n tickUpper\n fromTimestamp\n endTimestamp\n }\n }\n lower\n upper\n liquidity {\n fusdc {\n valueUsd\n }\n token1 {\n valueUsd\n }\n }\n isVested\n }\n }\n }\n": types.PositionsFragmentFragmentDoc,
};

Expand Down Expand Up @@ -56,10 +54,6 @@ export function graphql(source: "\n fragment SelectPrimeAssetFragment on Seawat
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/
export function graphql(source: "\n fragment ManagePoolFragment on SeawaterPool {\n address\n id\n liquidity {\n liquidity\n }\n token {\n symbol\n name\n decimals\n }\n earnedFeesAPRFUSDC\n liquidityCampaigns {\n campaignId\n tickLower\n tickUpper\n fromTimestamp\n endTimestamp\n }\n }\n"): (typeof documents)["\n fragment ManagePoolFragment on SeawaterPool {\n address\n id\n liquidity {\n liquidity\n }\n token {\n symbol\n name\n decimals\n }\n earnedFeesAPRFUSDC\n liquidityCampaigns {\n campaignId\n tickLower\n tickUpper\n fromTimestamp\n endTimestamp\n }\n }\n"];
/**
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/
export function graphql(source: "\n fragment WithdrawPositionsFragment on Wallet {\n positions {\n positions {\n positionId\n lower\n upper\n owner {\n address\n }\n liquidity {\n fusdc {\n valueUsd\n valueScaled\n }\n token1 {\n valueUsd\n valueScaled\n }\n }\n isVested\n }\n }\n }\n"): (typeof documents)["\n fragment WithdrawPositionsFragment on Wallet {\n positions {\n positions {\n positionId\n lower\n upper\n owner {\n address\n }\n liquidity {\n fusdc {\n valueUsd\n valueScaled\n }\n token1 {\n valueUsd\n valueScaled\n }\n }\n isVested\n }\n }\n }\n"];
/**
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/
Expand All @@ -80,10 +74,6 @@ export function graphql(source: "\n fragment TradeTabTransactionsFragment on Se
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/
export function graphql(source: "\n fragment StakeFormFragment on SeawaterPool {\n address\n earnedFeesAPRFUSDC\n fee\n config {\n classification\n }\n priceOverTime {\n daily\n }\n liquidity {\n tickLower\n tickUpper\n price\n liquidity\n }\n }\n"): (typeof documents)["\n fragment StakeFormFragment on SeawaterPool {\n address\n earnedFeesAPRFUSDC\n fee\n config {\n classification\n }\n priceOverTime {\n daily\n }\n liquidity {\n tickLower\n tickUpper\n price\n liquidity\n }\n }\n"];
/**
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/
export function graphql(source: "\n fragment DepositPositionsFragment on Wallet {\n positions {\n positions {\n positionId\n lower\n upper\n isVested\n }\n }\n }\n"): (typeof documents)["\n fragment DepositPositionsFragment on Wallet {\n positions {\n positions {\n positionId\n lower\n upper\n isVested\n }\n }\n }\n"];
/**
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/
Expand All @@ -99,7 +89,7 @@ export function graphql(source: "\n query AllData {\n pools {\n # used
/**
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/
export function graphql(source: "\n query ForUser($wallet: String!) {\n getSwapsForUser(wallet: $wallet, first: 10) {\n data {\n swaps {\n # add transaction fragments here\n ...TradeTabTransactionsFragment\n }\n }\n }\n\n getWallet(address: $wallet) {\n # add wallet fragments here\n ...MyPositionsInventoryWalletFragment\n ...PositionsFragment\n ...WithdrawPositionsFragment\n ...DepositPositionsFragment\n }\n\n notes(wallet: $wallet) {\n # add notes fragments here\n ...NotesFragment\n }\n }\n"): (typeof documents)["\n query ForUser($wallet: String!) {\n getSwapsForUser(wallet: $wallet, first: 10) {\n data {\n swaps {\n # add transaction fragments here\n ...TradeTabTransactionsFragment\n }\n }\n }\n\n getWallet(address: $wallet) {\n # add wallet fragments here\n ...MyPositionsInventoryWalletFragment\n ...PositionsFragment\n ...WithdrawPositionsFragment\n ...DepositPositionsFragment\n }\n\n notes(wallet: $wallet) {\n # add notes fragments here\n ...NotesFragment\n }\n }\n"];
export function graphql(source: "\n query ForUser($wallet: String!) {\n getSwapsForUser(wallet: $wallet, first: 10) {\n data {\n swaps {\n # add transaction fragments here\n ...TradeTabTransactionsFragment\n }\n }\n }\n\n getWallet(address: $wallet) {\n # add wallet fragments here\n ...MyPositionsInventoryWalletFragment\n ...PositionsFragment\n }\n\n notes(wallet: $wallet) {\n # add notes fragments here\n ...NotesFragment\n }\n }\n"): (typeof documents)["\n query ForUser($wallet: String!) {\n getSwapsForUser(wallet: $wallet, first: 10) {\n data {\n swaps {\n # add transaction fragments here\n ...TradeTabTransactionsFragment\n }\n }\n }\n\n getWallet(address: $wallet) {\n # add wallet fragments here\n ...MyPositionsInventoryWalletFragment\n ...PositionsFragment\n }\n\n notes(wallet: $wallet) {\n # add notes fragments here\n ...NotesFragment\n }\n }\n"];
/**
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/
Expand Down
Loading

0 comments on commit a0a66e7

Please sign in to comment.