Skip to content

Commit

Permalink
fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@retroboydev
retroboydev committed Nov 27, 2023
1 parent 6fe4320 commit c30f635
Showing 1 changed file with 77 additions and 79 deletions.
156 changes: 77 additions & 79 deletions src/components/FeeSelector/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,26 @@
import { Trans } from '@lingui/macro'
import { FeePoolSelectAction, LiquidityEventName } from '@uniswap/analytics-events'
import { Currency } from '@uniswap/sdk-core'
import { FeeAmount } from '@uniswap/v3-sdk'
import { useWeb3React } from '@web3-react/core'
import { sendAnalyticsEvent, useTrace } from 'analytics'
import { ButtonGray } from 'components/Button'
import Card from 'components/Card'
import { AutoColumn } from 'components/Column'
import { RowBetween } from 'components/Row'
import { useFeeTierDistribution } from 'hooks/useFeeTierDistribution'
import { PoolState, usePools } from 'hooks/usePools'
import usePrevious from 'hooks/usePrevious'
import { DynamicSection } from 'pages/AddLiquidity/styled'
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import { Box } from 'rebass'
import styled, { keyframes } from 'styled-components'
import { ThemedText } from 'theme/components'

import { FeeOption } from './FeeOption'
import { FeeTierPercentageBadge } from './FeeTierPercentageBadge'
import { FEE_AMOUNT_DETAIL } from './shared'
// @ts-nocheck
import { Trans } from '@lingui/macro';
import { FeePoolSelectAction, LiquidityEventName } from '@uniswap/analytics-events';
import { Currency } from '@uniswap/sdk-core';
import { FeeAmount } from '@uniswap/v3-sdk';
import { useWeb3React } from '@web3-react/core';
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { Box } from 'rebass';
import styled, { keyframes } from 'styled-components';

import { sendAnalyticsEvent, useTrace } from 'analytics';
import { ButtonGray } from 'components/Button';
import Card from 'components/Card';
import { AutoColumn } from 'components/Column';
import { RowBetween } from 'components/Row';
import { useFeeTierDistribution } from 'hooks/useFeeTierDistribution';
import { PoolState, usePools } from 'hooks/usePools';
import usePrevious from 'hooks/usePrevious';
import { DynamicSection } from 'pages/AddLiquidity/styled';
import { ThemedText } from 'theme/components';
import { FeeOption } from './FeeOption';
import { FeeTierPercentageBadge } from './FeeTierPercentageBadge';
import { FEE_AMOUNT_DETAIL } from './shared';

const pulse = (color: string) => keyframes`
0% {
Expand All @@ -33,116 +34,113 @@ const pulse = (color: string) => keyframes`
100% {
box-shadow: 0 0 0 0 ${color};
}
`
`;
const FocusedOutlineCard = styled(Card) <{ pulsing: boolean, feeAmount: FeeAmount }>`
border: 1px solid ${({ theme, feeAmount }) => feeAmount ? theme.jediBlue : theme.surface3};
border: 1px solid ${({ theme, feeAmount }) => (feeAmount ? theme.jediBlue : theme.surface3)};
animation: ${({ pulsing, theme }) => pulsing && pulse(theme.accent1)} 0.6s linear;
align-self: center;
border-radius: 8px;
`
`;

const Select = styled.div`
align-items: flex-start;
display: grid;
grid-auto-flow: column;
grid-gap: 8px;
`
`;

export default function FeeSelector({
disabled = false,
export default function FeeSelector({ disabled = false,
feeAmount,
handleFeePoolSelect,
currencyA,
currencyB,
}: {
currencyB }: {
disabled?: boolean
feeAmount?: FeeAmount
handleFeePoolSelect: (feeAmount: FeeAmount) => void
currencyA?: Currency
currencyB?: Currency
}) {
const { chainId } = useWeb3React()
const trace = useTrace()
const { chainId } = useWeb3React();
const trace = useTrace();

const { isLoading, isError, largestUsageFeeTier, distributions } = useFeeTierDistribution(currencyA, currencyB)
const { isLoading, isError, largestUsageFeeTier, distributions } = useFeeTierDistribution(currencyA, currencyB);

// get pool data on-chain for latest states
const pools = usePools([
[currencyA, currencyB, FeeAmount.LOWEST],
[currencyA, currencyB, FeeAmount.LOW],
[currencyA, currencyB, FeeAmount.MEDIUM],
[currencyA, currencyB, FeeAmount.HIGH],
])
]);

const poolsByFeeTier: Record<FeeAmount, PoolState> = useMemo(
() =>
pools.reduce(
(acc, [curPoolState, curPool]) => {
acc = {
...acc,
...{ [curPool?.fee as FeeAmount]: curPoolState },
}
return acc
},
{
// default all states to NOT_EXISTS
[FeeAmount.LOWEST]: PoolState.NOT_EXISTS,
[FeeAmount.LOW]: PoolState.NOT_EXISTS,
[FeeAmount.MEDIUM]: PoolState.NOT_EXISTS,
[FeeAmount.HIGH]: PoolState.NOT_EXISTS,
}
),
[pools]
)

const [showOptions, setShowOptions] = useState(false)
const [pulsing, setPulsing] = useState(false)

const previousFeeAmount = usePrevious(feeAmount)

const recommended = useRef(false)
() => pools.reduce(
(acc, [curPoolState, curPool]) => {
acc = {
...acc,
...{ [curPool?.fee as FeeAmount]: curPoolState },
};
return acc;
},
{
// default all states to NOT_EXISTS
[FeeAmount.LOWEST]: PoolState.NOT_EXISTS,
[FeeAmount.LOW]: PoolState.NOT_EXISTS,
[FeeAmount.MEDIUM]: PoolState.NOT_EXISTS,
[FeeAmount.HIGH]: PoolState.NOT_EXISTS,
},
),
[pools],
);

const [showOptions, setShowOptions] = useState(false);
const [pulsing, setPulsing] = useState(false);

const previousFeeAmount = usePrevious(feeAmount);

const recommended = useRef(false);

const handleFeePoolSelectWithEvent = useCallback(
(fee: FeeAmount) => {
sendAnalyticsEvent(LiquidityEventName.SELECT_LIQUIDITY_POOL_FEE_TIER, {
action: FeePoolSelectAction.MANUAL,
...trace,
})
handleFeePoolSelect(fee)
});
handleFeePoolSelect(fee);
},
[handleFeePoolSelect, trace]
)
[handleFeePoolSelect, trace],
);

useEffect(() => {
if (feeAmount || isLoading || isError) {
return
return;
}

if (!largestUsageFeeTier) {
// cannot recommend, open options
setShowOptions(true)
setShowOptions(true);
} else {
setShowOptions(false)
setShowOptions(false);

recommended.current = true
recommended.current = true;
sendAnalyticsEvent(LiquidityEventName.SELECT_LIQUIDITY_POOL_FEE_TIER, {
action: FeePoolSelectAction.RECOMMENDED,
...trace,
})
});

handleFeePoolSelect(largestUsageFeeTier)
handleFeePoolSelect(largestUsageFeeTier);
}
}, [feeAmount, isLoading, isError, largestUsageFeeTier, handleFeePoolSelect, trace])
}, [feeAmount, isLoading, isError, largestUsageFeeTier, handleFeePoolSelect, trace]);

useEffect(() => {
setShowOptions(isError)
}, [isError])
setShowOptions(isError);
}, [isError]);

useEffect(() => {
if (feeAmount && previousFeeAmount !== feeAmount) {
setPulsing(true)
setPulsing(true);
}
}, [previousFeeAmount, feeAmount])
}, [previousFeeAmount, feeAmount]);

return (
<AutoColumn gap="16px">
Expand Down Expand Up @@ -189,7 +187,7 @@ export default function FeeSelector({
{chainId && (
<Select>
{[FeeAmount.LOWEST, FeeAmount.LOW, FeeAmount.MEDIUM, FeeAmount.HIGH].map((_feeAmount, i) => {
const { supportedChains } = FEE_AMOUNT_DETAIL[_feeAmount]
const { supportedChains } = FEE_AMOUNT_DETAIL[_feeAmount];
if (supportedChains.includes(chainId)) {
return (
<FeeOption
Expand All @@ -200,13 +198,13 @@ export default function FeeSelector({
poolState={poolsByFeeTier[_feeAmount]}
key={i}
/>
)
);
}
return null
return null;
})}
</Select>
)}
</DynamicSection>
</AutoColumn>
)
);
}

0 comments on commit c30f635

Please sign in to comment.