Skip to content

Commit

Permalink
feat: enhance AMMV3 components with new InRangeDot indicator, improve…
Browse files Browse the repository at this point in the history 
…d liquidity data handling, and styling updates
  • Loading branch information
@yrjkqq
yrjkqq committed Nov 29, 2024
1 parent 052c1ba commit 4af6170
Show file tree
Hide file tree
Showing 13 changed files with 674 additions and 301 deletions.
14 changes: 7 additions & 7 deletions packages/doc/src/stories/widgets/AMMV3PositionsView.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,23 +26,23 @@ export const Primary = (props: any) => {
<AMMV3PositionsView
chainId={11155111}
baseToken={{
address: '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE',
address: '0x8f2a9f23d5d70226491B0c10365dE88f64cD4a01',
decimals: 18,
symbol: 'ETH',
name: 'ETH',
symbol: 'TK1A',
name: 'token1A',
chainId: 11155111,
// chainId: 1,
}}
quoteToken={{
address: '0x1c7D4B196Cb0C7B01d743Fbc6116a902379C7238',
address: '0xd05553BC85FA8c004073d91097B7611CD5E478f5',
// address: '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48',
decimals: 6,
symbol: 'USDC',
name: 'USDC',
symbol: 'USDT-A',
name: 'usdtA',
chainId: 11155111,
// chainId: 1,
}}
feeAmount={500}
feeAmount={100}
onClose={() => window.alert('onClose')}
handleGoToAddLiquidityV3={() =>
window.alert('handleGoToAddLiquidityV3')
Expand Down
4 changes: 2 additions & 2 deletions packages/dodoex-api/src/gql/gql.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ const documents = {
types.FetchPoolListDocument,
'\n query FetchLiquidityList($where: Liquiditylist_filter) {\n liquidity_list(where: $where) {\n currentPage\n pageSize\n totalCount\n lqList {\n id\n pair {\n id\n chainId\n type\n lpFeeRate\n mtFeeRate\n creator\n baseLpToken {\n id\n }\n quoteLpToken {\n id\n }\n baseToken {\n id\n symbol\n name\n decimals\n logoImg\n }\n quoteToken {\n id\n symbol\n name\n decimals\n logoImg\n }\n tvl\n apy {\n miningBaseApy\n miningQuoteApy\n transactionBaseApy\n transactionQuoteApy\n }\n miningAddress\n volume24H\n }\n }\n }\n }\n ':
types.FetchLiquidityListDocument,
'\n query FetchMyLiquidityList($where: Liquiditylist_filter) {\n liquidity_list(where: $where) {\n lqList {\n id\n liquidityPositions {\n id\n liquidityTokenBalance\n poolShare\n }\n pair {\n id\n chainId\n type\n lpFeeRate\n mtFeeRate\n creator\n baseLpToken {\n id\n }\n quoteLpToken {\n id\n }\n baseToken {\n id\n symbol\n name\n decimals\n logoImg\n }\n quoteToken {\n id\n symbol\n name\n decimals\n logoImg\n }\n tvl\n apy {\n miningBaseApy\n miningQuoteApy\n transactionBaseApy\n transactionQuoteApy\n }\n miningAddress\n volume24H\n }\n }\n }\n }\n ':
'\n query FetchMyLiquidityList($where: Liquiditylist_filter) {\n liquidity_list(where: $where) {\n lqList {\n id\n liquidityPositions {\n id\n liquidityTokenBalance\n liquidityTokenInMining\n poolShare\n liquidityUSD\n tokenId\n outOfRange\n priceRange {\n token0LowerPrice\n token0UpperPrice\n token1LowerPrice\n token1UpperPrice\n }\n tickLower {\n id\n tickIdx\n liquidityGross\n liquidityNet\n price0\n price1\n }\n tickUpper {\n id\n tickIdx\n liquidityGross\n liquidityNet\n price0\n price1\n }\n }\n pair {\n id\n chainId\n type\n lpFeeRate\n mtFeeRate\n creator\n baseLpToken {\n id\n }\n quoteLpToken {\n id\n }\n baseToken {\n id\n symbol\n name\n decimals\n logoImg\n }\n quoteToken {\n id\n symbol\n name\n decimals\n logoImg\n }\n tvl\n apy {\n miningBaseApy\n miningQuoteApy\n transactionBaseApy\n transactionQuoteApy\n }\n miningAddress\n volume24H\n }\n }\n }\n }\n ':
types.FetchMyLiquidityListDocument,
'\n query FetchDashboardPairList($where: Dashboardtype_list_filter) {\n dashboard_pairs_list(where: $where) {\n list {\n chainId\n pairAddress\n poolType\n baseReserve\n quoteReserve\n totalFee\n baseAddress\n quoteAddress\n baseSymbol\n quoteSymbol\n tvl\n baseTvl\n quoteTvl\n baseTvlRate\n quoteTvlRate\n }\n }\n }\n ':
types.FetchDashboardPairListDocument,
Expand Down Expand Up @@ -96,7 +96,7 @@ export function graphql(
* 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 FetchMyLiquidityList($where: Liquiditylist_filter) {\n liquidity_list(where: $where) {\n lqList {\n id\n liquidityPositions {\n id\n liquidityTokenBalance\n poolShare\n }\n pair {\n id\n chainId\n type\n lpFeeRate\n mtFeeRate\n creator\n baseLpToken {\n id\n }\n quoteLpToken {\n id\n }\n baseToken {\n id\n symbol\n name\n decimals\n logoImg\n }\n quoteToken {\n id\n symbol\n name\n decimals\n logoImg\n }\n tvl\n apy {\n miningBaseApy\n miningQuoteApy\n transactionBaseApy\n transactionQuoteApy\n }\n miningAddress\n volume24H\n }\n }\n }\n }\n ',
source: '\n query FetchMyLiquidityList($where: Liquiditylist_filter) {\n liquidity_list(where: $where) {\n lqList {\n id\n liquidityPositions {\n id\n liquidityTokenBalance\n liquidityTokenInMining\n poolShare\n liquidityUSD\n tokenId\n outOfRange\n priceRange {\n token0LowerPrice\n token0UpperPrice\n token1LowerPrice\n token1UpperPrice\n }\n tickLower {\n id\n tickIdx\n liquidityGross\n liquidityNet\n price0\n price1\n }\n tickUpper {\n id\n tickIdx\n liquidityGross\n liquidityNet\n price0\n price1\n }\n }\n pair {\n id\n chainId\n type\n lpFeeRate\n mtFeeRate\n creator\n baseLpToken {\n id\n }\n quoteLpToken {\n id\n }\n baseToken {\n id\n symbol\n name\n decimals\n logoImg\n }\n quoteToken {\n id\n symbol\n name\n decimals\n logoImg\n }\n tvl\n apy {\n miningBaseApy\n miningQuoteApy\n transactionBaseApy\n transactionQuoteApy\n }\n miningAddress\n volume24H\n }\n }\n }\n }\n ',
): typeof import('./graphql').FetchMyLiquidityListDocument;
/**
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
Expand Down
80 changes: 80 additions & 0 deletions packages/dodoex-api/src/gql/graphql.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6821,8 +6821,16 @@ export type LiquidityLp = {
id?: Maybe<Scalars['String']['output']>;
liquidityTokenBalance?: Maybe<Scalars['String']['output']>;
liquidityTokenInMining?: Maybe<Scalars['String']['output']>;
/** my liquidity usd */
liquidityUSD?: Maybe<Scalars['String']['output']>;
outOfRange?: Maybe<Scalars['Boolean']['output']>;
/** Share in the pool */
poolShare?: Maybe<Scalars['String']['output']>;
priceRange?: Maybe<LiquidityLpPriceRange>;
tickLower?: Maybe<LiquidityTick>;
tickUpper?: Maybe<LiquidityTick>;
/** AMM V3 info */
tokenId?: Maybe<Scalars['String']['output']>;
};

export type LiquidityListInfo = {
Expand Down Expand Up @@ -6857,6 +6865,17 @@ export type LiquidityLpPartnerRewardsResult = {
partnerRewards?: Maybe<Array<Maybe<LiquidityLpPartnerRewards>>>;
};

export type LiquidityLpPriceRange = {
/** token0 lower price */
token0LowerPrice: Scalars['BigDecimal']['output'];
/** token0 upper price */
token0UpperPrice: Scalars['BigDecimal']['output'];
/** token1 lower price */
token1LowerPrice: Scalars['BigDecimal']['output'];
/** token1 upper price */
token1UpperPrice: Scalars['BigDecimal']['output'];
};

export type LiquidityLpToken = {
/** token decimals */
decimals: Scalars['BigInt']['output'];
Expand Down Expand Up @@ -7333,6 +7352,15 @@ export type LiquidityPosition_OrderBy =
| 'vault'
| 'yesterdayInterest';

export type LiquidityTick = {
id: Scalars['ID']['output'];
liquidityGross: Scalars['BigInt']['output'];
liquidityNet: Scalars['BigInt']['output'];
price0: Scalars['BigDecimal']['output'];
price1: Scalars['BigDecimal']['output'];
tickIdx: Scalars['BigInt']['output'];
};

export type LiquidityToken = {
/** token decimals */
decimals: Scalars['BigInt']['output'];
Expand Down Expand Up @@ -20698,7 +20726,33 @@ export type FetchMyLiquidityListQuery = {
liquidityPositions?: Array<{
id?: string | null;
liquidityTokenBalance?: string | null;
liquidityTokenInMining?: string | null;
poolShare?: string | null;
liquidityUSD?: string | null;
tokenId?: string | null;
outOfRange?: boolean | null;
priceRange?: {
token0LowerPrice: any;
token0UpperPrice: any;
token1LowerPrice: any;
token1UpperPrice: any;
} | null;
tickLower?: {
id: string;
tickIdx: any;
liquidityGross: any;
liquidityNet: any;
price0: any;
price1: any;
} | null;
tickUpper?: {
id: string;
tickIdx: any;
liquidityGross: any;
liquidityNet: any;
price0: any;
price1: any;
} | null;
} | null> | null;
pair?: {
id: string;
Expand Down Expand Up @@ -21477,7 +21531,33 @@ export const FetchMyLiquidityListDocument = new TypedDocumentString(`
liquidityPositions {
id
liquidityTokenBalance
liquidityTokenInMining
poolShare
liquidityUSD
tokenId
outOfRange
priceRange {
token0LowerPrice
token0UpperPrice
token1LowerPrice
token1UpperPrice
}
tickLower {
id
tickIdx
liquidityGross
liquidityNet
price0
price1
}
tickUpper {
id
tickIdx
liquidityGross
liquidityNet
price0
price1
}
}
pair {
id
Expand Down
26 changes: 26 additions & 0 deletions packages/dodoex-api/src/services/pool/graphqlQuery.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,33 @@ export const poolGraphqlQuery = {
liquidityPositions {
id
liquidityTokenBalance
liquidityTokenInMining
poolShare
liquidityUSD
tokenId
outOfRange
priceRange {
token0LowerPrice
token0UpperPrice
token1LowerPrice
token1UpperPrice
}
tickLower {
id
tickIdx
liquidityGross
liquidityNet
price0
price1
}
tickUpper {
id
tickIdx
liquidityGross
liquidityNet
price0
price1
}
}
pair {
id
Expand Down
1 change: 1 addition & 0 deletions packages/dodoex-widgets/src/widgets/PoolWidget/AMMV3/AMMV3PositionManage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -452,6 +452,7 @@ export const AMMV3PositionManage = ({
return (
<Box
sx={{
borderRadius: 16,
backgroundColor: theme.palette.background.paper,
}}
>
Expand Down
48 changes: 48 additions & 0 deletions packages/dodoex-widgets/src/widgets/PoolWidget/AMMV3/components/InRangeDot.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
import { Box, Tooltip, useTheme } from '@dodoex/components';
import { t } from '@lingui/macro';

export interface InRangeDotProps {
outOfRange: boolean;
}

export const InRangeDot = ({ outOfRange }: InRangeDotProps) => {
const theme = useTheme();

return (
<Tooltip title={outOfRange ? t`Out of range` : t`In range`}>
<Box
sx={{
display: 'flex',
alignItems: 'center',
}}
>
{outOfRange ? (
<svg
xmlns="http://www.w3.org/2000/svg"
width="14"
height="14"
viewBox="0 0 14 14"
fill="none"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M0.583252 12.5416L6.99992 1.45825L13.4166 12.5416H0.583252ZM11.3924 11.3749L6.9999 3.78575L2.6074 11.3749H11.3924ZM7.58328 9.62492H6.41661V10.7916H7.58328V9.62492ZM6.41661 6.12492H7.58328V8.45825H6.41661V6.12492Z"
fill={theme.palette.warning.main}
/>
</svg>
) : (
<svg
xmlns="http://www.w3.org/2000/svg"
width="8"
height="8"
viewBox="0 0 8 8"
fill="none"
>
<circle cx="4" cy="4" r="4" fill={theme.palette.success.main} />
</svg>
)}
</Box>
</Tooltip>
);
};
32 changes: 4 additions & 28 deletions packages/dodoex-widgets/src/widgets/PoolWidget/AMMV3/components/PositionViewCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,16 @@ import { Box, Button, useTheme } from '@dodoex/components';
import { t } from '@lingui/macro';
import { useMemo } from 'react';
import { TokenInfo } from '../../../../hooks/Token';
import { formatTokenAmountNumber } from '../../../../utils';
import useIsTickAtLimit from '../hooks/useIsTickAtLimit';
import { usePool } from '../hooks/usePools';
import { Currency, Price, Token } from '../sdks/sdk-core';
import { Position as V3Position } from '../sdks/v3-sdk';
import { Bound } from '../types';
import { PositionDetails } from '../types/position';
import { buildCurrency } from '../utils';
import { formatTickPrice } from '../utils/formatTickPrice';
import { Bound } from '../types';
import { formatTokenAmountNumber } from '../../../../utils';
import { InRangeDot } from './InRangeDot';

export interface PriceOrdering {
priceLower?: Price<Currency, Currency>;
Expand Down Expand Up @@ -232,32 +233,7 @@ export const PositionViewCard = ({
</Box> */}
</Box>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 4 }}>
{outOfRange ? (
<svg
xmlns="http://www.w3.org/2000/svg"
width="14"
height="14"
viewBox="0 0 14 14"
fill="none"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M0.583252 12.5416L6.99992 1.45825L13.4166 12.5416H0.583252ZM11.3924 11.3749L6.9999 3.78575L2.6074 11.3749H11.3924ZM7.58328 9.62492H6.41661V10.7916H7.58328V9.62492ZM6.41661 6.12492H7.58328V8.45825H6.41661V6.12492Z"
fill={theme.palette.warning.main}
/>
</svg>
) : (
<svg
xmlns="http://www.w3.org/2000/svg"
width="8"
height="8"
viewBox="0 0 8 8"
fill="none"
>
<circle cx="4" cy="4" r="4" fill={theme.palette.success.main} />
</svg>
)}
<InRangeDot outOfRange={outOfRange} />

<Box
sx={{
Expand Down
4 changes: 2 additions & 2 deletions packages/dodoex-widgets/src/widgets/PoolWidget/AMMV3/utils/formatTickPrice.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ export function formatTickPrice({
atLimit,
direction,
}: {
price?: Price<Currency, Currency>;
price?: Price<Currency, Currency> | string;
atLimit: { [bound in Bound]?: boolean | undefined };
direction: Bound;
}) {
Expand All @@ -16,6 +16,6 @@ export function formatTickPrice({
}

return formatTokenAmountNumber({
input: price?.toSignificant(),
input: typeof price === 'string' ? price : price?.toSignificant(),
});
}
Loading

0 comments on commit 4af6170

Please sign in to comment.