add price range template

.eslintignore

@@ -3,3 +3,4 @@
 
 public/vendor/*
 src/libs/*
+pages/Pool-V3/packages/*

babel.config.js

@@ -6,7 +6,8 @@ module.exports = function (api) {
         '@oraichain/operator-overloading',
         {
           classNames: ['BigDecimal']
-        }
+        },
+        "@babel/plugin-proposal-import-wasm-source"
       ]
     ]
   };

package.json

@@ -6,6 +6,7 @@
   "author": "Oraichain Labs",
   "license": "Apache-2.0",
   "dependencies": {
+    "@babel/plugin-proposal-import-wasm-source": "^7.24.7",
     "@cosmjs/cosmwasm-stargate": "^0.31.0",
     "@cosmjs/proto-signing": "^0.31.0",
     "@cosmjs/stargate": "^0.31.0",
@@ -14,6 +15,8 @@
     "@injectivelabs/sdk-ts": "1.12.1",
     "@leapwallet/cosmos-snap-provider": "0.1.25",
     "@lucky-canvas/react": "^0.1.13",
+    "@nivo/bar": "^0.87.0",
+    "@nivo/line": "^0.86.0",
     "@oraichain/common-contracts-sdk": "^1.0.31",
     "@oraichain/ethereum-multicall": "^1.0.2",
     "@oraichain/kawaiiverse-txs": "^0.0.3",

src/pages/Pool-V3/components/CreatePosition/index.module.scss

@@ -60,6 +60,156 @@
 
     .item {
       flex: 1;
+
+      .wrapper {
+        width: 100%;
+        display: flex;
+        margin-bottom: 48px;
+
+        .itemTitleWrapper {
+          width: 70%;
+
+          .itemTitle {
+            color: var(--Colors-Neutral-Text-text-token-name, #f7f7f7);
+            font-weight: 600;
+            font-size: 16px;
+          }
+
+          .liquidityActive {
+            color: #979995;
+            font-size: 12px;
+            font-weight: 400;
+            line-height: 18px;
+
+            .activeLiquidityIcon {
+              display: inline-block;
+              height: 14px;
+              width: 14px;
+              border: 2px solid;
+              border-color: #979995;
+              color: #979995;
+              border-radius: 50%;
+              font-size: 8px;
+              line-height: 10px;
+              font-weight: bolder;
+              text-align: center;
+              box-sizing: border-box;
+              cursor: default;
+            }
+          }
+        }
+
+        .itemSwitcherWrapper {
+          width: 30%;
+          display: flex;
+          flex-direction: row-reverse;
+
+          .switcherContainer {
+            overflow: visible;
+            height: 33px;
+            border-radius: 14px;
+            display: flex;
+            justify-content: space-evenly;
+            width: 90px;
+            align-items: end;
+            background-color: #232521;
+
+            .singleTabClasses {
+              z-index: 1;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+
+              .continuous {
+                display: block;
+              }
+
+              .discrete {
+                display: block;
+              }
+            }
+          }
+        }
+      }
+
+      .itemChartAndPriceWrapper {
+        gap: 12px;
+        display: flex;
+        flex-direction: column;
+
+        .currentPriceWrapper {
+          border-radius: 8px;
+          padding: 12px;
+          display: flex;
+          background-color: #232521;
+          align-items: center;
+          justify-content: space-between;
+
+          .currentPriceTitle {
+            color: var(--Colors-Neutral-Text-text-token-name, #979995);
+            font-size: 13px;
+            font-weight: 400;
+            line-height: 18px;
+          }
+
+          .currentPriceValue {
+            color: var(--Colors-Neutral-Text-text-token-name, #f7f7f7);
+            text-align: end;
+            font-size: 18px;
+            font-weight: 600;
+            line-height: 30px;
+
+            .pair {
+              color: var(--Colors-Neutral-Text-text-token-name, #979995);
+              font-size: 12px;
+              font-weight: 400;
+              line-height: 18px;
+            }
+          }
+        }
+
+        .minMaxPriceWrapper {
+          display: flex;
+          gap: 12px;
+          align-items: center;
+          justify-content: space-between;
+          width: 100%;
+
+          .minMaxPrice {
+            border-radius: 8px;
+            display: flex;
+            gap: 12px;
+            align-items: center;
+            justify-content: space-between;
+            background-color: #232521;
+            width: 100%;
+            padding: 12px;
+
+            .minMaxPriceTitle {
+              color: var(--Colors-Neutral-Text-text-token-name, #979995);
+              font-size: 13px;
+              text-align: end;
+              font-weight: 400;
+              line-height: 18px;
+            }
+
+            .minMaxPriceValue {
+              color: var(--Colors-Neutral-Text-text-token-name, #f7f7f7);
+              font-size: 18px;
+              text-align: end;
+              font-weight: 600;
+              line-height: 30px;
+
+              .pair {
+                color: var(--Colors-Neutral-Text-text-token-name, #979995);
+                font-size: 12px;
+                font-weight: 400;
+                line-height: 18px;
+              }
+            }
+          }
+        }
+      }
     }
 
     @include mobile {