Skip to content

Commit

Permalink
unhardcode liquidty and 24h volume in swap pro
Browse files Browse the repository at this point in the history
  • Loading branch information
@eli-d
eli-d committed Jun 24, 2024
1 parent 9970856 commit 21b97dc
Show file tree
Hide file tree
Showing 4 changed files with 41 additions and 16 deletions.
3 changes: 3 additions & 0 deletions web/src/components/SwapPro/SwapProPoolFragment.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,9 @@ export const SwapProPoolFragment = graphql(`
address
symbol
}
liquidity {
liquidity
}
priceOverTime {
daily
monthly
Expand Down
26 changes: 24 additions & 2 deletions web/src/components/SwapPro/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import { useFragment } from "@/gql";
import { SwapProPoolFragment } from "@/components/SwapPro/SwapProPoolFragment";
import { useMemo } from "react";
import { useFeatureFlag } from "@/hooks/useFeatureFlag";
import { usdFormat } from "@/lib/usdFormat";

const variants = {
hidden: { opacity: 0, width: 0 },
Expand Down Expand Up @@ -57,6 +58,27 @@ export const SwapPro = ({

const poolSwapPro = useFragment(SwapProPoolFragment, pool);

const volume24H = useMemo(() => {
const [
{
fusdc: {
valueUsd: fusdcValue
},
token1: {
valueUsd: token1Value
} }
] = poolSwapPro?.volumeOverTime.daily || []
return usdFormat(parseFloat(fusdcValue) + parseFloat(token1Value))
}, [poolSwapPro])

const poolBalance = useMemo(() => (
usdFormat(poolSwapPro ?
poolSwapPro.liquidity.reduce((total, { liquidity }) =>
total + parseFloat(liquidity) + parseFloat(liquidity),
0) :
0
)), [poolSwapPro])

const transactions = poolSwapPro?.swaps.swaps

const showMockData = useFeatureFlag("ui show demo data");
Expand Down Expand Up @@ -140,12 +162,12 @@ export const SwapPro = ({
<div className="hidden w-full flex-row flex-wrap items-center justify-between gap-2 md:flex">
<div>
<p className="text-2xs">Liquidity</p>
<p className="text-xl">$1.01M</p>
<p className="text-xl">{poolBalance}</p>
</div>

<div>
<p className="text-2xs">Volume 24H</p>
<p className="text-xl">$115.21K</p>
<p className="text-xl">{volume24H}</p>
</div>

<div>
Expand Down
12 changes: 6 additions & 6 deletions web/src/gql/gql.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,15 +17,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 liquidityIncentives {\n valueUsd\n }\n superIncentives {\n valueUsd\n }\n positions {\n positions {\n lower\n upper\n }\n }\n }\n": types.AllPoolsFragmentFragmentDoc,
"\n fragment MyPositionsWalletFragment on Wallet {\n id\n positions {\n positions {\n positionId\n pool {\n token {\n name\n address\n symbol\n }\n }\n liquidity {\n fusdc {\n valueUsd\n }\n token1 {\n valueUsd\n }\n }\n }\n }\n }\n": types.MyPositionsWalletFragmentFragmentDoc,
"\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 token {\n symbol\n name\n decimals\n }\n liquidityIncentives {\n valueScaled\n }\n superIncentives {\n valueScaled\n }\n utilityIncentives {\n amountGivenOut\n maximumAmount\n }\n earnedFeesAPRFUSDC\n }\n": types.ManagePoolFragmentFragmentDoc,
"\nfragment PositionsFragment on Wallet {\n positions {\n positions {\n positionId\n pool {\n address\n }\n lower\n upper\n liquidity {\n fusdc {\n valueUsd\n }\n token1 {\n valueUsd\n }\n }\n }\n }\n}\n": types.PositionsFragmentFragmentDoc,
"\n fragment ManagePoolFragment on SeawaterPool {\n address\n id\n liquidity {\n liquidity\n }\n token {\n symbol\n name\n decimals\n }\n liquidityIncentives {\n valueScaled\n }\n superIncentives {\n valueScaled\n }\n utilityIncentives {\n amountGivenOut\n maximumAmount\n }\n earnedFeesAPRFUSDC\n }\n": types.ManagePoolFragmentFragmentDoc,
"\nfragment PositionsFragment on Wallet {\n positions {\n positions {\n positionId\n pool {\n address\n }\n lower\n upper\n }\n }\n}\n": types.PositionsFragmentFragmentDoc,
"\nfragment 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 }\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 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 }\n": types.StakeFormFragmentFragmentDoc,
"\nfragment DepositPositionsFragment on Wallet {\n positions {\n positions {\n positionId\n lower\n upper\n }\n }\n}\n": types.DepositPositionsFragmentFragmentDoc,
"\n fragment SwapProPoolFragment on SeawaterPool {\n address\n token {\n address\n symbol\n }\n priceOverTime {\n daily\n monthly\n }\n volumeOverTime {\n monthly {\n timestamp\n token1 {\n valueUsd\n }\n fusdc {\n valueUsd\n }\n }\n daily {\n timestamp # TODO: timestamp is always 0\n token1 {\n valueUsd\n }\n fusdc {\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 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 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 timestamp\n token1 {\n valueUsd\n }\n fusdc {\n valueUsd\n }\n }\n daily {\n timestamp # TODO: timestamp is always 0\n token1 {\n valueUsd\n }\n fusdc {\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 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 swaps {\n # add transaction fragments here\n ...TradeTabTransactionsFragment\n }\n }\n\n getWallet(address: $wallet) {\n # add wallet fragments here\n ...MyPositionsWalletFragment\n ...MyPositionsInventoryWalletFragment\n ...PositionsFragment\n ...WithdrawPositionsFragment\n ...DepositPositionsFragment\n }\n }\n": types.ForUserDocument,
};
Expand Down Expand Up @@ -63,11 +63,11 @@ 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 token {\n symbol\n name\n decimals\n }\n liquidityIncentives {\n valueScaled\n }\n superIncentives {\n valueScaled\n }\n utilityIncentives {\n amountGivenOut\n maximumAmount\n }\n earnedFeesAPRFUSDC\n }\n"): (typeof documents)["\n fragment ManagePoolFragment on SeawaterPool {\n address\n id\n token {\n symbol\n name\n decimals\n }\n liquidityIncentives {\n valueScaled\n }\n superIncentives {\n valueScaled\n }\n utilityIncentives {\n amountGivenOut\n maximumAmount\n }\n earnedFeesAPRFUSDC\n }\n"];
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 liquidityIncentives {\n valueScaled\n }\n superIncentives {\n valueScaled\n }\n utilityIncentives {\n amountGivenOut\n maximumAmount\n }\n earnedFeesAPRFUSDC\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 liquidityIncentives {\n valueScaled\n }\n superIncentives {\n valueScaled\n }\n utilityIncentives {\n amountGivenOut\n maximumAmount\n }\n earnedFeesAPRFUSDC\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: "\nfragment PositionsFragment on Wallet {\n positions {\n positions {\n positionId\n pool {\n address\n }\n lower\n upper\n liquidity {\n fusdc {\n valueUsd\n }\n token1 {\n valueUsd\n }\n }\n }\n }\n}\n"): (typeof documents)["\nfragment PositionsFragment on Wallet {\n positions {\n positions {\n positionId\n pool {\n address\n }\n lower\n upper\n liquidity {\n fusdc {\n valueUsd\n }\n token1 {\n valueUsd\n }\n }\n }\n }\n}\n"];
export function graphql(source: "\nfragment PositionsFragment on Wallet {\n positions {\n positions {\n positionId\n pool {\n address\n }\n lower\n upper\n }\n }\n}\n"): (typeof documents)["\nfragment PositionsFragment on Wallet {\n positions {\n positions {\n positionId\n pool {\n address\n }\n lower\n upper\n }\n }\n}\n"];
/**
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/
Expand Down Expand Up @@ -95,7 +95,7 @@ export function graphql(source: "\nfragment DepositPositionsFragment on Wallet {
/**
* 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 SwapProPoolFragment on SeawaterPool {\n address\n token {\n address\n symbol\n }\n priceOverTime {\n daily\n monthly\n }\n volumeOverTime {\n monthly {\n timestamp\n token1 {\n valueUsd\n }\n fusdc {\n valueUsd\n }\n }\n daily {\n timestamp # TODO: timestamp is always 0\n token1 {\n valueUsd\n }\n fusdc {\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 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"): (typeof documents)["\n fragment SwapProPoolFragment on SeawaterPool {\n address\n token {\n address\n symbol\n }\n priceOverTime {\n daily\n monthly\n }\n volumeOverTime {\n monthly {\n timestamp\n token1 {\n valueUsd\n }\n fusdc {\n valueUsd\n }\n }\n daily {\n timestamp # TODO: timestamp is always 0\n token1 {\n valueUsd\n }\n fusdc {\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 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"];
export function graphql(source: "\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 timestamp\n token1 {\n valueUsd\n }\n fusdc {\n valueUsd\n }\n }\n daily {\n timestamp # TODO: timestamp is always 0\n token1 {\n valueUsd\n }\n fusdc {\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 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"): (typeof documents)["\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 timestamp\n token1 {\n valueUsd\n }\n fusdc {\n valueUsd\n }\n }\n daily {\n timestamp # TODO: timestamp is always 0\n token1 {\n valueUsd\n }\n fusdc {\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 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"];
/**
* 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 21b97dc

Please sign in to comment.