Merge pull request #1009 from oraichain/feat/update-strategy-v3

update new icon strategy
oraichain · Oct 25, 2024 · 56f50c8 · 56f50c8
2 parents 3df08cb + bab9b6e
commit 56f50c8
Show file tree

Hide file tree

Showing 7 changed files with 96 additions and 29 deletions.
diff --git a/src/assets/icons/active.svg b/src/assets/icons/active.svg
diff --git a/src/assets/icons/balanced.svg b/src/assets/icons/balanced.svg
diff --git a/src/assets/icons/custom.svg b/src/assets/icons/custom.svg
diff --git a/src/assets/icons/passive.svg b/src/assets/icons/passive.svg
diff --git 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
@@ -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<CreatePositionFormProps> = ({ poolId, slippage, sho
           <p className={styles.title}>Select Volatility Strategy</p>
           {historicalChartData && (
             <div className={styles.strategyBtnList}>
-              <div
-                onClick={() => {
-                  if (!cache7Day) return;
-                  setOptionType(OptionType.CUSTOM);
-                  handleOptionCustom();
-                }}
-                className={classNames(styles.btn, { [styles.chosen]: optionType === OptionType.CUSTOM })}
-              >
-                <CustomIcon />
-                <br />
-                <span>Custom</span>
-              </div>
               <div
                 onClick={() => {
                   if (!cache3Month) return;
@@ -286,13 +274,22 @@ const CreatePositionForm: FC<CreatePositionFormProps> = ({ poolId, slippage, sho
                 <br />
                 <span>Full range</span>
               </div>
+              <div
+                onClick={() => {
+                  if (!cache7Day) return;
+                  setOptionType(OptionType.CUSTOM);
+                  handleOptionCustom();
+                }}
+                className={classNames(styles.btn, { [styles.chosen]: optionType === OptionType.CUSTOM })}
+              >
+                <CustomIcon />
+                <br />
+                <span>Custom</span>
+              </div>
             </div>
           )}
           <div className={styles.explain}>
-            <p>
-              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
-            </p>
+            <p>{optionType}</p>
           </div>
         </div>
 

diff --git 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 = {