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) => { -
+ {showLiquidityVisualiser &&
Visualiser
{ Liquidity Distribution
- + }
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; } /**