Skip to content

Commit

Permalink
feat: add OnlyV3Toggle component and enhance AMMV3 position managemen…
Browse files Browse the repository at this point in the history
…t with new filtering options
  • Loading branch information
yrjkqq committed Nov 28, 2024
1 parent a29de47 commit 052c1ba
Show file tree
Hide file tree
Showing 7 changed files with 125 additions and 54 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -450,7 +450,11 @@ export const AMMV3PositionManage = ({
{ key: 'claim', value: t`Claim` },
];
return (
<>
<Box
sx={{
backgroundColor: theme.palette.background.paper,
}}
>
<Box
sx={{
display: 'flex',
Expand Down Expand Up @@ -805,7 +809,7 @@ export const AMMV3PositionManage = ({
</Box>
</TabPanel>
</Tabs>
</>
</Box>
);
}, [
approvalA,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,61 +4,28 @@ type AddressMap = { [chainId: number]: string };

type ChainAddresses = {
v3CoreFactoryAddress: string;
multicallAddress: string;
quoterAddress: string;
v3MigratorAddress?: string;
nonfungiblePositionManagerAddress?: string;
tickLensAddress?: string;
swapRouter02Address?: string;
mixedRouteQuoterV1Address?: string;
mixedRouteQuoterV2Address?: string;

// v4
v4PoolManagerAddress?: string;
v4PositionManagerAddress?: string;
v4StateView?: string;
v4QuoterAddress?: string;
};

// Networks that share most of the same addresses i.e. Mainnet, Goerli, Optimism, Arbitrum, Polygon
const DEFAULT_ADDRESSES: ChainAddresses = {
v3CoreFactoryAddress: '0x1F98431c8aD98523631AE4a59f267346ea31F984',
multicallAddress: '0x1F98415757620B543A52E61c46B32eB19261F984',
quoterAddress: '0xb27308f9F90D607463bb33eA1BeBb41C27CE5AB6',
v3MigratorAddress: '0xA5644E29708357803b5A882D272c41cC0dF92B34',
v3CoreFactoryAddress: '0x3d2A7Bac4E8439ABe86B58324695e921a5FC0987',
nonfungiblePositionManagerAddress:
'0xC36442b4a4522E871399CD717aBDD847Ab11FE88',
'0x483E5c0f309577f79b0a19cE65E332DD388aD7A8',
};
const MAINNET_ADDRESSES: ChainAddresses = {
...DEFAULT_ADDRESSES,
mixedRouteQuoterV1Address: '0x84E44095eeBfEC7793Cd7d5b57B7e401D7f1cA2E',
};

const ARBITRUM_ONE_ADDRESSES: ChainAddresses = {
...DEFAULT_ADDRESSES,
multicallAddress: '0xadF885960B47eA2CD9B55E6DAc6B42b7Cb2806dB',
tickLensAddress: '0xbfd8137f7d1516D3ea5cA83523914859ec47F573',
};

// sepolia v3 addresses
const SEPOLIA_ADDRESSES: ChainAddresses = {
v3CoreFactoryAddress: '0x0227628f3F023bb0B980b67D528571c95c6DaC1c',
multicallAddress: '0xD7F33bCdb21b359c8ee6F0251d30E94832baAd07',
quoterAddress: '0xEd1f6473345F45b75F8179591dd5bA1888cf2FB3',
v3MigratorAddress: '0x729004182cF005CEC8Bd85df140094b6aCbe8b15',
v3CoreFactoryAddress: '0x3d2A7Bac4E8439ABe86B58324695e921a5FC0987',
nonfungiblePositionManagerAddress:
'0x1238536071E1c677A632429e3655c799b22cDA52',
tickLensAddress: '0xd7f33bcdb21b359c8ee6f0251d30e94832baad07',
swapRouter02Address: '0x3bFA4769FB09eefC5a80d6E87c3B9C650f7Ae48E',

// TODO: update mixedRouteQuoterV2Address once v4 on sepolia redeployed
mixedRouteQuoterV2Address: '0x4745f77b56a0e2294426e3936dc4fab68d9543cd',

// TODO: update all below once v4 on sepolia redeployed
v4PoolManagerAddress: '0x8C4BcBE6b9eF47855f97E675296FA3F6fafa5F1A',
v4PositionManagerAddress: '0x1B1C77B606d13b09C84d1c7394B96b147bC03147',
v4StateView: '0x823d45b1329bcF3b369F08F36ba2690Ff8e058C3',
v4QuoterAddress: '0xCd8716395D55aD17496448a4b2C42557001e9743',
'0x483E5c0f309577f79b0a19cE65E332DD388aD7A8',
};

export const CHAIN_TO_ADDRESSES_MAP: Record<
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ export const ADDRESS_ZERO = '0x0000000000000000000000000000000000000000';

// @deprecated please use poolInitCodeHash(chainId: ChainId)
export const POOL_INIT_CODE_HASH =
'0xe34f199b19b2b4f47f68442619d555527d244f78a3297ea89325f843f87b8b54';
'0x4509fa1e2d1989ac1632a56fe87c53e8d1e9d05847694e00f62b23e28cec98c4';

export function poolInitCodeHash(chainId?: ChainId): string {
switch (chainId) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ import { useGraphQLRequests } from '../../../hooks/useGraphQLRequests';
import { CardStatus } from '../../../components/CardWidgets';
import LiquidityLpPartnerReward from '../../../components/LiquidityLpPartnerReward';
import GoPoolDetailBtn from './components/GoPoolDetailBtn';
import { OnlyV3Toggle } from './components/OnlyV3Toggle';

function CardList({
account,
Expand Down Expand Up @@ -892,7 +893,8 @@ export default function MyLiquidity({
const theme = useTheme();
const { minDevice, isMobile } = useWidgetDevice();
const queryClient = useQueryClient();
const { onlyChainId, supportAMMV2 } = useUserOptions();
const { onlyChainId, supportAMMV2, supportAMMV3 } = useUserOptions();
const [onlyV3, setOnlyV3] = React.useState(false);

const {
filterTokens,
Expand All @@ -908,9 +910,15 @@ export default function MyLiquidity({
const defaultQueryFilter = {
currentPage: 1,
pageSize: 1000,
user: account,
// user: account,
user: '0x483e5c0f309577f79b0a19ce65e332dd388ad7a8',
filterState: {
viewOnlyOwn: true,
filterTypes: supportAMMV3
? onlyV3
? ['AMMV3']
: ['CLASSICAL', 'DVM', 'DSP', 'GSP', 'AMMV2']
: undefined,
},
};

Expand Down Expand Up @@ -982,6 +990,9 @@ export default function MyLiquidity({
setChainId={handleChangeActiveChainId}
/>
)}
{supportAMMV3 && (
<OnlyV3Toggle onlyV3={onlyV3} setOnlyV3={setOnlyV3} />
)}
<TokenAndPoolFilter
value={filterTokens}
onChange={handleChangeFilterTokens}
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
import { Box, ButtonBase, useTheme } from '@dodoex/components';
import { t } from '@lingui/macro';

export interface OnlyV3ToggleProps {
onlyV3: boolean;
setOnlyV3: React.Dispatch<React.SetStateAction<boolean>>;
}

export const OnlyV3Toggle = ({ onlyV3, setOnlyV3 }: OnlyV3ToggleProps) => {
const theme = useTheme();

return (
<Box
component={ButtonBase}
onClick={() => setOnlyV3(!onlyV3)}
sx={{
display: 'flex',
alignItems: 'center',
p: 2,
borderRadius: 8,
backgroundColor: theme.palette.border.main,
}}
>
<Box
sx={{
display: 'flex',
alignItems: 'center',
}}
>
<Box
sx={{
px: 16,
py: 4,
borderRadius: 6,
textAlign: 'center',
typography: 'body2',
...(onlyV3
? {
color: theme.palette.text.primary,
backgroundColor: theme.palette.background.paper,
}
: {
color: theme.palette.text.secondary,
backgroundColor: 'transparent',
}),
}}
>
{t`V3`}
</Box>
<Box
sx={{
px: 12,
py: 4,
borderRadius: 6,
textAlign: 'center',
typography: 'body2',
...(!onlyV3
? {
color: theme.palette.text.primary,
backgroundColor: theme.palette.background.paper,
}
: {
color: theme.palette.text.secondary,
backgroundColor: 'transparent',
}),
}}
>
{t`V2 & PMM`}
</Box>
</Box>
</Box>
);
};
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export function usePoolListTabs({
}) {
const { i18n } = useLingui();
const [poolTab, setPoolTab] = React.useState(PoolTab.addLiquidity);
const { supportAMMV2 } = useUserOptions();
const { supportAMMV2, supportAMMV3 } = useUserOptions();
const tabs = React.useMemo(
() => [
{ key: PoolTab.addLiquidity, value: t`Add Liquidity` },
Expand All @@ -29,10 +29,10 @@ export function usePoolListTabs({
},
{
key: PoolTab.myCreated,
value: supportAMMV2 ? t`My Pools (PMM)` : t`My Pools`,
value: supportAMMV2 || supportAMMV3 ? t`My Pools (PMM)` : t`My Pools`,
},
],
[i18n._, supportAMMV2],
[i18n._, supportAMMV2, supportAMMV3],
);

const isSetPoolTabCache = React.useRef(false);
Expand Down
34 changes: 25 additions & 9 deletions packages/dodoex-widgets/src/widgets/PoolWidget/PoolList/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ import { PoolTab, usePoolListTabs } from './hooks/usePoolListTabs';
import MyCreated from './MyCreated';
import MyLiquidity from './MyLiquidity';
import { ReactComponent as LeftImage } from './pool-left.svg';
import { AMMV3PositionManage } from '../AMMV3/AMMV3PositionManage';

function TabPanelFlexCol({ sx, ...props }: Parameters<typeof TabPanel>[0]) {
return (
Expand Down Expand Up @@ -333,15 +334,30 @@ export default function PoolList({
LeftImage={LeftImage}
/>
)}
{operatePool?.pool?.type === 'AMMV3' && operatePool.chainId ? (
<AMMV3PositionsView
account={account}
chainId={operatePool.chainId}
baseToken={operatePool.pool.baseToken}
quoteToken={operatePool.pool.quoteToken}
feeAmount={FeeAmount.HIGH}
onClose={() => setOperatePool(null)}
/>
{operatePool?.pool?.type === 'AMMV3' && operatePool.pool.chainId ? (
poolTab === PoolTab.myLiquidity ? (
<AMMV3PositionManage
baseToken={operatePool.pool.baseToken}
quoteToken={operatePool.pool.quoteToken}
feeAmount={FeeAmount.LOWEST}
tokenId={'1'}
chainId={operatePool.pool.chainId}
onClose={() => setOperatePool(null)}
/>
) : (
<AMMV3PositionsView
chainId={operatePool.pool.chainId}
baseToken={operatePool.pool.baseToken}
quoteToken={operatePool.pool.quoteToken}
feeAmount={FeeAmount.HIGH}
onClose={() => setOperatePool(null)}
handleGoToAddLiquidityV3={() => {
useRouterStore.getState().push({
type: PageType.createPoolAMMV3,
});
}}
/>
)
) : isMobile ? (
<PoolOperateDialog
account={account}
Expand Down

0 comments on commit 052c1ba

Please sign in to comment.