fix header width, rebates panel, and spot flag (#19)

Author: dwjanus

src/App.tsx

@@ -198,7 +198,7 @@ const Content = () => {
   return (
     <>
       <GlobalStyle />
-      <$AppContainer isTradePage={isTradePage || isSpotPage}>
+      <$AppContainer>
         <$Content
           isShowingHeader={isShowingHeader}
           isShowingFooter={isShowingFooter}
@@ -207,7 +207,7 @@ const Content = () => {
           <GlobalBackground />
           {isShowingHeader && <HeaderDesktop />}
           <RestrictionWarning />
-          <$Main>
+          <$Main isTradePage={isTradePage || isSpotPage}>
             <Suspense fallback={<LoadingSpace id="main" />}>
               <Routes>
                 <Route path={`${AppRoute.Referrals}/*`} element={<AffiliatesPage />} />
@@ -362,16 +362,9 @@ function shouldForwardProp(propName: string, target: WebTarget): boolean {
   return true;
 }
 
-const $AppContainer = styled.div<{ isTradePage?: boolean }>`
+const $AppContainer = styled.div`
   width: 100%;
-  ${({ isTradePage }) =>
-    isTradePage
-      ? css`
-          max-width: 1800px;
-        `
-      : css`
-          max-width: 1600px;
-        `}
+  max-width: 1800px;
   margin-left: auto;
   margin-right: auto;
 `;
@@ -461,8 +454,23 @@ const $Content = styled.div<{
   transition: 0.3s var(--ease-out-expo);
 `;
 
-const $Main = styled.main`
+const $Main = styled.main<{ isTradePage?: boolean }>`
   ${layoutMixins.contentSectionAttached}
+
+  ${({ isTradePage }) =>
+    isTradePage
+      ? css`
+          width: 100%;
+          max-width: 1800px;
+        `
+      : css`
+          width: 100%;
+          max-width: 1600px;
+        `}
+
+  margin-left: auto;
+  margin-right: auto;
+
   box-shadow: none;
 
   grid-area: Main;
@@ -476,8 +484,8 @@ const $Main = styled.main`
   padding-right: 1rem;
 
   /* Override min-width from contentSectionAttached to allow proper grid constraints */
-  min-width: 0;
-  max-width: 100%;
+  /* min-width: 0;
+  max-width: 100%; */
   overflow-x: hidden;
 `;
 

src/constants/statsig.ts

@@ -18,6 +18,7 @@ export enum StatsigFlags {
   ffSwapEnabled = 'ff_swap_ui_web',
   ffSpot = 'ff_spot',
   abPopupDeposit = 'ab_popup_deposit',
+  ffSpotBonk = 'ff_spot_bonk',
 }
 
 export enum CustomFlags {

src/hooks/useEnableSpot.ts

@@ -1,5 +1,9 @@
+// import { isDev } from '@/constants/networks';
+import { StatsigFlags } from '@/constants/statsig';
+
+import { useStatsigGateValue } from './useStatsig';
+
 export const useEnableSpot = () => {
-  // const forcedSpot = testFlags.spot;
-  // const spotFF = useStatsigGateValue(StatsigFlags.ffSpot);
-  return true;
+  const spotFF = useStatsigGateValue(StatsigFlags.ffSpotBonk);
+  return spotFF; // could also do only spotFF;
 };

src/layout/Header/HeaderDesktop.tsx

@@ -217,7 +217,7 @@ const $Header = styled.header`
   margin-top: 2rem;
   margin-bottom: 2rem;
   width: 100%;
-  max-width: 1600px;
+  max-width: 1800px;
   margin-left: auto;
   margin-right: auto;
   padding-left: 1rem;

src/pages/spot/Spot.tsx

@@ -16,6 +16,7 @@ import { AppRoute } from '@/constants/routes';
 import { SPOT_DUST_USD_THRESHOLD } from '@/constants/spot';
 
 import { useCurrentSpotToken } from '@/hooks/useCurrentSpotToken';
+import { useEnableSpot } from '@/hooks/useEnableSpot';
 import { useSpotTokenSearch } from '@/hooks/useSpotTokenSearch';
 
 import breakpoints from '@/styles/breakpoints';
@@ -70,6 +71,7 @@ const SpotPage = () => {
     useAppSelector(BonsaiCore.spot.portfolioTrades.loading) !== 'success' && canLoadSpotData;
 
   const horizontalPanelHeightPxBase = useAppSelector(getHorizontalPanelHeightPx);
+
   const setPanelHeight = useCallback(
     (h: number) => {
       dispatch(setHorizontalPanelHeightPx(h));
@@ -255,6 +257,12 @@ const SpotPage = () => {
     }
   }, [isSearchOpen]);
 
+  const isSpotEnabled = useEnableSpot();
+  if (!isSpotEnabled) {
+    navigate(AppRoute.Trade);
+    return null;
+  }
+
   return (
     <$SpotLayout
       tradeLayout={tradeLayout}

src/pages/token/CompetitionIncentivesPanel.tsx

@@ -5,14 +5,11 @@ import styled from 'styled-components';
 import tw from 'twin.macro';
 
 import { STRING_KEYS } from '@/constants/localization';
-import { isDev } from '@/constants/networks';
-import { StatsigFlags } from '@/constants/statsig';
 
 import { useChaosLabsPnlDistribution } from '@/hooks/rewards/hooks';
 import { DEC_2025_COMPETITION_DETAILS } from '@/hooks/rewards/util';
 import { useAccounts } from '@/hooks/useAccounts';
 import { useNow } from '@/hooks/useNow';
-import { useStatsigGateValue } from '@/hooks/useStatsig';
 import { useStringGetter } from '@/hooks/useStringGetter';
 
 import { layoutMixins } from '@/styles/layoutMixins';
@@ -25,13 +22,7 @@ import { SuccessTag, TagSize } from '@/components/Tag';
 import { WithTooltip } from '@/components/WithTooltip';
 
 export const CompetitionIncentivesPanel = () => {
-  const isSept2025RewardsBase = useStatsigGateValue(StatsigFlags.ffSeptember2025Rewards);
-  const isSept2025Rewards = isDev ? true : isSept2025RewardsBase;
-  if (isSept2025Rewards) {
-    return <September2025RewardsPanel />;
-  }
-
-  return null;
+  return <September2025RewardsPanel />;
 };
 
 const September2025RewardsPanel = () => {