diff --git a/src/assets/icons/active.svg b/src/assets/icons/active.svg new file mode 100644 index 000000000..409e82929 --- /dev/null +++ b/src/assets/icons/active.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/icons/balanced.svg b/src/assets/icons/balanced.svg new file mode 100644 index 000000000..e988df949 --- /dev/null +++ b/src/assets/icons/balanced.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/assets/icons/custom.svg b/src/assets/icons/custom.svg index 19d1947fa..6ae5afa58 100644 --- a/src/assets/icons/custom.svg +++ b/src/assets/icons/custom.svg @@ -1,4 +1,14 @@ - - - + + + + + + + + + + + + + diff --git a/src/assets/icons/passive.svg b/src/assets/icons/passive.svg new file mode 100644 index 000000000..7bab66735 --- /dev/null +++ b/src/assets/icons/passive.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/pages/Pool-V3/components/CreatePositionForm/index.module.scss b/src/pages/Pool-V3/components/CreatePositionForm/index.module.scss index 89806eb11..da04dc711 100644 --- a/src/pages/Pool-V3/components/CreatePositionForm/index.module.scss +++ b/src/pages/Pool-V3/components/CreatePositionForm/index.module.scss @@ -34,7 +34,7 @@ flex-direction: row; justify-content: space-between; padding-bottom: 28px; - margin-bottom: 32px; + margin-bottom: 20px; @include theme { border-bottom: 1px solid theme-get('colors-neutral-surface-bg-section'); @@ -70,7 +70,7 @@ flex-direction: row; justify-content: space-between; // gap: 5px; - padding: 4px; + padding: 6px; border-radius: 32px; height: fit-content; font-size: 12px; @@ -151,13 +151,19 @@ // gap: 12px; // align-items: center; // justify-content: center; - height: 88px; + height: 132px; border-radius: 15px; cursor: pointer; @media only screen and (max-width: 600px) { padding: 8px 8px 8px 8px; font-size: 10px; + + svg { + margin-top: 10px; + } + + width: 100px; } // svg { diff --git a/src/pages/Pool-V3/components/CreatePositionForm/index.tsx b/src/pages/Pool-V3/components/CreatePositionForm/index.tsx index 12a3fe736..604c2d596 100644 --- a/src/pages/Pool-V3/components/CreatePositionForm/index.tsx +++ b/src/pages/Pool-V3/components/CreatePositionForm/index.tsx @@ -2,10 +2,10 @@ import { CW20_DECIMALS, toDisplay } from '@oraichain/oraidex-common'; import { extractAddress, poolKeyToString } from '@oraichain/oraiswap-v3'; import { isMobile } from '@walletconnect/browser-utils'; import { ReactComponent as CustomIcon } from 'assets/icons/custom.svg'; -import { ReactComponent as FullRangeIcon } from 'assets/icons/full-range.svg'; -import { ReactComponent as NarrowIcon } from 'assets/icons/narrow.svg'; +import { ReactComponent as FullRangeIcon } from 'assets/icons/passive.svg'; +import { ReactComponent as NarrowIcon } from 'assets/icons/active.svg'; import { ReactComponent as RefreshIcon } from 'assets/icons/refresh-ccw.svg'; -import { ReactComponent as WideIcon } from 'assets/icons/wide.svg'; +import { ReactComponent as WideIcon } from 'assets/icons/balanced.svg'; import { ReactComponent as ZoomInIcon } from 'assets/icons/zoom-in.svg'; import { ReactComponent as ZoomOutIcon } from 'assets/icons/zoom-out.svg'; import classNames from 'classnames'; @@ -239,18 +239,6 @@ const CreatePositionForm: FC = ({ poolId, slippage, sho

Select Volatility Strategy

{historicalChartData && (
-
{ - if (!cache7Day) return; - setOptionType(OptionType.CUSTOM); - handleOptionCustom(); - }} - className={classNames(styles.btn, { [styles.chosen]: optionType === OptionType.CUSTOM })} - > - -
- Custom -
{ if (!cache3Month) return; @@ -286,13 +274,22 @@ const CreatePositionForm: FC = ({ poolId, slippage, sho
Full range
+
{ + if (!cache7Day) return; + setOptionType(OptionType.CUSTOM); + handleOptionCustom(); + }} + className={classNames(styles.btn, { [styles.chosen]: optionType === OptionType.CUSTOM })} + > + +
+ Custom +
)}
-

- Add liquidity to a specific price range. Earns the most fees when the price stays in range but stops - earning if the price moves out -

+

{optionType}

diff --git a/src/pages/Pool-V3/hooks/useCreatePositionForm.ts b/src/pages/Pool-V3/hooks/useCreatePositionForm.ts index a1aec1386..b9d7504df 100644 --- a/src/pages/Pool-V3/hooks/useCreatePositionForm.ts +++ b/src/pages/Pool-V3/hooks/useCreatePositionForm.ts @@ -30,10 +30,10 @@ import { CoinGeckoPrices } from 'hooks/useCoingecko'; const ZOOM_STEP = 0.05; export enum OptionType { - CUSTOM, - WIDE, - NARROW, - FULL_RANGE + CUSTOM = "Set your own price range for liquidity. Balance fee potential and risk based on market conditions.", + WIDE = "Adds liquidity to a wider range, balancing fees and risk. Stays active longer than narrow ranges but may earn lower fees.", + NARROW = "Adds liquidity to a specific price range. Earns the most fees when the price stays in range but stops earning if the price moves out", + FULL_RANGE = "Adds liquidity for the full price range. Stays active regardless of price changes, but may earn lower fees." } const TICK_SPACING_TO_RANGE = {