feature flag out liquidity visualiser

fluidity-money · Jun 20, 2024 · 800c196 · 800c196
1 parent 67f8996
commit 800c196
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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;
 }
 
 /**