feature flag swap breakdown

fluidity-money · Jun 5, 2024 · 04d9edc · 04d9edc
1 parent e226b59
commit 04d9edc
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 13 deletions.
diff --git a/features/features.json b/features/features.json
@@ -24,5 +24,6 @@
 	"ui show trade rewards": false,
 	"ui show utility incentives": false,
 	"ui show yield over time": false,
-	"ui show pools tab": false
+	"ui show pools tab": false,
+	"ui show swap breakdown": false
 }
diff --git a/web/src/app/SwapForm.tsx b/web/src/app/SwapForm.tsx
@@ -69,6 +69,7 @@ export const SwapForm = () => {
   const showSuperloopPopover = useFeatureFlag("ui show superloop");
   const showCampaignBanner = useFeatureFlag("ui show campaign banner");
   const showMockData = useFeatureFlag("ui show demo data");
+  const showSwapBreakdown = useFeatureFlag("ui show swap breakdown")
 
   useEffect(() => {
     if (!welcome) {
@@ -587,17 +588,19 @@ export const SwapForm = () => {
                   onClick={() => setBreakdownHidden((v) => !v)}
                   className="flex cursor-pointer flex-row"
                 >
-                  {breakdownHidden ? (
-                    <>
-                      <div className="underline">See breakdown</div>
-                      <div className="ml-1">{"->"}</div>
-                    </>
-                  ) : (
-                    <>
-                      <div className="underline">Hide breakdown</div>
-                      <div className="ml-1 rotate-90">{"<-"}</div>
-                    </>
-                  )}
+                  {showSwapBreakdown ?
+                    breakdownHidden ? (
+                      <>
+                        <div className="underline">See breakdown</div>
+                        <div className="ml-1">{"->"}</div>
+                      </>
+                    ) : (
+                      <>
+                        <div className="underline">Hide breakdown</div>
+                        <div className="ml-1 rotate-90">{"<-"}</div>
+                      </>
+                    ) : <></>
+                  }
                 </div>
               </div>
             </div>

diff --git a/web/src/app/_layout/FeatureFlagConfig.tsx b/web/src/app/_layout/FeatureFlagConfig.tsx
@@ -38,7 +38,8 @@ const featureFlagsLabels: { key: keyof FeatureFlags; label: string }[] = [
   { key: "ui show claim yield", label: "UI Show Claim Yield"},
   { key: "ui show earned fees apr", label: "UI Show Earned Fees Apr"},
   { key: "ui show pool filters", label: "UI Show Pool Filters"},
-  { key: "ui show pools tab", label: "UI Show Pools Tab"}
+  { key: "ui show pools tab", label: "UI Show Pools Tab"},
+  { key: "ui show swap breakdown", label: "UI Show Swap Breakdown"}
 ];
 
 export const FeatureFlagConfig = () => {

diff --git a/web/src/hooks/useFeatureFlag.tsx b/web/src/hooks/useFeatureFlag.tsx
@@ -142,6 +142,11 @@ export interface FeatureFlags {
    * Show pools tab in inventory drawer.
    */
   "ui show pools tab": boolean;
+
+  /**
+   * Show breakdown of fees, rewards, and route in the swap form.
+   */
+  "ui show swap breakdown": boolean;
 }
 
 /**