From 800c196a7580e72d6c6aa72ab258d27bae00f66b Mon Sep 17 00:00:00 2001
From: eli-d <64763513+eli-d@users.noreply.github.com>
Date: Thu, 20 Jun 2024 19:00:47 +0930
Subject: [PATCH] feature flag out liquidity visualiser

---
 web/src/app/_layout/FeatureFlagConfig.tsx | 1 +
 web/src/components/StakeForm.tsx          | 5 +++--
 web/src/hooks/useFeatureFlag.tsx          | 5 +++++
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/web/src/app/_layout/FeatureFlagConfig.tsx b/web/src/app/_layout/FeatureFlagConfig.tsx
index 280c4f9f..b146c1e4 100644
--- a/web/src/app/_layout/FeatureFlagConfig.tsx
+++ b/web/src/app/_layout/FeatureFlagConfig.tsx
@@ -42,6 +42,7 @@ const featureFlagsLabels: { [K in FeatureFlagKey]: string } = {
   "ui show pools tab": "UI Show Pools Tab",
   "ui show swap breakdown": "UI Show Swap Breakdown",
   "ui show tokens given out": "UI Show Tokens Given Out",
+  "ui show liquidity visualiser": "UI Show Liquidity Visualiser",
 };
 
 export const FeatureFlagConfig = () => {
diff --git a/web/src/components/StakeForm.tsx b/web/src/components/StakeForm.tsx
index e761d79c..1e1af20c 100644
--- a/web/src/components/StakeForm.tsx
+++ b/web/src/components/StakeForm.tsx
@@ -158,6 +158,7 @@ export const StakeForm = ({ mode, poolId, positionId }: StakeFormProps) => {
   const showDynamicFeesPopup = useFeatureFlag("ui show optimising fee route");
   const showSingleToken = useFeatureFlag("ui show single token stake");
   const showCampaignBanner = useFeatureFlag("ui show campaign banner");
+  const showLiquidityVisualiser = useFeatureFlag("ui show liquidity visualiser")
 
   const onSubmit = () => {
     if (mode === "new") {
@@ -797,7 +798,7 @@ export const StakeForm = ({ mode, poolId, positionId }: StakeFormProps) => {
             </div>
           </div>
 
-          <div className="mt-[22px]">
+          {showLiquidityVisualiser && <div className="mt-[22px]">
             <div className="text-3xs text-gray-2 md:text-2xs">Visualiser</div>
             <ReactECharts
               className="mt-1"
@@ -836,7 +837,7 @@ export const StakeForm = ({ mode, poolId, positionId }: StakeFormProps) => {
                 <LiquidityDistribution /> Liquidity Distribution
               </div>
             </div>
-          </div>
+          </div> }
         </div>
 
         <div className="mt-[21px] flex w-[318px] flex-row justify-end md:w-[392px]">
diff --git a/web/src/hooks/useFeatureFlag.tsx b/web/src/hooks/useFeatureFlag.tsx
index fb288697..deed447d 100644
--- a/web/src/hooks/useFeatureFlag.tsx
+++ b/web/src/hooks/useFeatureFlag.tsx
@@ -147,6 +147,11 @@ export interface FeatureFlags {
    * Show breakdown of fees, rewards, and route in the swap form.
    */
   "ui show swap breakdown": boolean;
+
+  /**
+   * Show liquidity range visualiser in the stake form
+   */
+  "ui show liquidity visualiser": boolean;
 }
 
 /**