feat(limit-orders): remove limit orders flag, make all conditional st… (

#3910) * feat(limit-orders): remove limit orders flag, make all conditional styles permanent * fix(table-headers): fix all table header styles throughout app * fix(useFeatureFlags): remove extra imports * fix(main): remove useFeatureFlags instance * style(css): remove commented out css * fix(pools-table): remove empty object
osmosis-labs · Oct 25, 2024 · b663a85 · b663a85
1 parent 2c78b54
commit b663a85
Show file tree

Hide file tree

Showing 17 changed files with 65 additions and 266 deletions.
diff --git a/packages/web/components/chart/light-weight-charts/advanced-chart.tsx b/packages/web/components/chart/light-weight-charts/advanced-chart.tsx
@@ -23,12 +23,9 @@ export const AdvancedChart = (props: AdvancedChartProps) => {
   const themeOptions: Partial<ChartingLibraryWidgetOptions> = {
     theme: "dark",
     overrides: {
-      "paneProperties.background":
-        theme.colors.osmoverse[featureFlags.limitOrders ? 1000 : 900],
-      "paneProperties.horzGridProperties.color":
-        theme.colors.osmoverse[featureFlags.limitOrders ? 1000 : 900],
-      "paneProperties.vertGridProperties.color":
-        theme.colors.osmoverse[featureFlags.limitOrders ? 1000 : 900],
+      "paneProperties.background": theme.colors.osmoverse[1000],
+      "paneProperties.horzGridProperties.color": theme.colors.osmoverse[1000],
+      "paneProperties.vertGridProperties.color": theme.colors.osmoverse[1000],
       "linetoolarc.backgroundColor": theme.colors.osmoverse[850],
       "linetoolnote.backgroundColor": theme.colors.osmoverse[850],
       "linetooltext.backgroundColor": theme.colors.osmoverse[850],
@@ -45,21 +42,17 @@ export const AdvancedChart = (props: AdvancedChartProps) => {
       "mainSeriesProperties.statusViewStyle.symbolTextSource": "ticker",
 
       "scalesProperties.textColor": theme.colors.white.full,
-      "scalesProperties.backgroundColor":
-        theme.colors.osmoverse[featureFlags.limitOrders ? 1000 : 900],
-      "scalesProperties.lineColor":
-        theme.colors.osmoverse[featureFlags.limitOrders ? 1000 : 900],
+      "scalesProperties.backgroundColor": theme.colors.osmoverse[1000],
+      "scalesProperties.lineColor": theme.colors.osmoverse[1000],
     },
     studies_overrides: {
       "volume.volume.color.1": theme.colors.bullish[400],
       "volume.volume ma.visible": false,
     },
 
     loading_screen: {
-      backgroundColor:
-        theme.colors.osmoverse[featureFlags.limitOrders ? 1000 : 900],
-      foregroundColor:
-        theme.colors.osmoverse[featureFlags.limitOrders ? 1000 : 900],
+      backgroundColor: theme.colors.osmoverse[1000],
+      foregroundColor: theme.colors.osmoverse[1000],
     },
   };
 
@@ -70,9 +63,7 @@ export const AdvancedChart = (props: AdvancedChartProps) => {
       interval: "1d" as ResolutionString,
       container,
       library_path: "/tradingview/",
-      custom_css_url: featureFlags.limitOrders
-        ? "/tradingview/custom-limit.css"
-        : "/tradingview/custom.css",
+      custom_css_url: "/tradingview/custom-limit.css",
       custom_font_family: '"Inter", sans-serif',
       locale: "en",
       disabled_features: [

diff --git a/packages/web/components/complex/orders-history/index.tsx b/packages/web/components/complex/orders-history/index.tsx
@@ -220,14 +220,7 @@ export const OrderHistory = observer(() => {
       >
         {!isLoading && (
           <thead className="border-b border-osmoverse-700 bg-osmoverse-1000">
-            <tr
-              className={classNames(
-                {
-                  "!bg-osmoverse-1000": featureFlags.limitOrders,
-                },
-                gridClasses
-              )}
-            >
+            <tr className={classNames("bg-osmoverse-1000", gridClasses)}>
               {headers.map((header) => (
                 <th
                   key={header}

diff --git a/packages/web/components/complex/pools-table.tsx b/packages/web/components/complex/pools-table.tsx
@@ -26,12 +26,7 @@ import { Spinner } from "~/components/loaders";
 import { PoolQuickActionCell } from "~/components/table/cells";
 import { SortHeader } from "~/components/table/headers/sort";
 import { AprDisclaimerTooltip } from "~/components/tooltip/apr-disclaimer";
-import {
-  Breakpoint,
-  useFeatureFlags,
-  useTranslation,
-  useWindowSize,
-} from "~/hooks";
+import { Breakpoint, useTranslation, useWindowSize } from "~/hooks";
 import { api, RouterOutputs } from "~/utils/trpc";
 
 import { Tooltip } from "../tooltip";
@@ -97,7 +92,6 @@ export interface PoolsTableProps {
 export const PoolsTable = (props: PropsWithChildren<PoolsTableProps>) => {
   const { t } = useTranslation();
   const { width } = useWindowSize();
-  const featureFlags = useFeatureFlags();
   const router = useRouter();
   const {
     topOffset,
@@ -415,10 +409,7 @@ export const PoolsTable = (props: PropsWithChildren<PoolsTableProps>) => {
             "table-auto",
             isPreviousData &&
               isFetching &&
-              "animate-[deepPulse_2s_ease-in-out_infinite] cursor-progress",
-            {
-              "[&>thead>tr]:!bg-osmoverse-1000": featureFlags.limitOrders,
-            }
+              "animate-[deepPulse_2s_ease-in-out_infinite] cursor-progress"
           )}
         >
           <thead>

diff --git a/packages/web/components/complex/portfolio/portfolio-page.tsx b/packages/web/components/complex/portfolio/portfolio-page.tsx
@@ -74,16 +74,7 @@ export const PortfolioPage: FunctionComponent = observer(() => {
     userHasNoAssets === true || userHasNoAssets === undefined;
 
   return (
-    <div
-      className={classNames(
-        "flex justify-center p-8 pt-4",
-        "1.5xl:flex-col",
-        "md:p-4",
-        {
-          "bg-osmoverse-900": !featureFlags.limitOrders,
-        }
-      )}
-    >
+    <div className="flex justify-center p-8 pt-4 1.5xl:flex-col md:p-4">
       {isWalletLoading ? (
         <SkeletonLoader className="h-24 w-1/2 lg:w-full" />
       ) : isWalletConnected ? (
@@ -182,7 +173,7 @@ export const PortfolioPage: FunctionComponent = observer(() => {
               )}
             </div>
             <div className="flex w-full flex-col">
-              {featureFlags.limitOrders && <OpenOrders />}
+              <OpenOrders />
               <RecentActivity />
             </div>
           </aside>

diff --git a/packages/web/components/layouts/main.tsx b/packages/web/components/layouts/main.tsx
@@ -10,7 +10,6 @@ import { NavbarOsmoPrice } from "~/components/navbar-osmo-price";
 import { NavbarOsmosisUpdate } from "~/components/navbar-osmosis-update";
 import {
   useCurrentLanguage,
-  useFeatureFlags,
   useHasAssetVariants,
   useWindowSize,
 } from "~/hooks";
@@ -25,7 +24,6 @@ export const MainLayout = observer(
     secondaryMenuItems: MainLayoutMenu[];
   }>) => {
     const router = useRouter();
-    const featureFlags = useFeatureFlags();
     useCurrentLanguage();
 
     const { height, isMobile } = useWindowSize();
@@ -48,15 +46,7 @@ export const MainLayout = observer(
             <OsmosisFullLogo onClick={() => router.push("/")} />
           </div>
         )}
-        <div
-          className={classNames(
-            "fixed inset-y-0 z-40 flex w-sidebar flex-col overflow-y-auto overflow-x-hidden px-2 py-6 md:hidden",
-            {
-              "xl:bg-osmoverse-1000": featureFlags.limitOrders,
-              "bg-osmoverse-900": !featureFlags.limitOrders,
-            }
-          )}
-        >
+        <div className="fixed inset-y-0 z-40 flex w-sidebar flex-col overflow-y-auto overflow-x-hidden px-2 py-6 xl:bg-osmoverse-1000 md:hidden">
           {showBlockLogo && (
             <div className="z-50 mx-auto ml-3 w-sidebar grow-0">
               <OsmosisFullLogo onClick={() => router.push("/")} />

diff --git a/packages/web/components/navbar/index.tsx b/packages/web/components/navbar/index.tsx
@@ -171,11 +171,8 @@ export const NavBar: FunctionComponent<
       <>
         <div
           className={classNames(
-            "fixed z-[60] flex h-navbar w-[calc(100vw_-_14.58rem)] place-content-between items-center bg-osmoverse-900 px-8 shadow-md lg:gap-5 md:h-navbar-mobile md:w-full md:place-content-start md:px-4",
-            className,
-            {
-              "bg-osmoverse-1000": featureFlags.limitOrders,
-            }
+            "fixed z-[60] flex h-navbar w-[calc(100vw_-_14.58rem)] place-content-between items-center bg-osmoverse-900 bg-osmoverse-1000 px-8 shadow-md lg:gap-5 md:h-navbar-mobile md:w-full md:place-content-start md:px-4",
+            className
           )}
         >
           <div className="relative hidden shrink-0 items-center md:flex">
@@ -301,12 +298,9 @@ export const NavBar: FunctionComponent<
         {/* Back-layer element to occupy space for the caller */}
         <div
           className={classNames(
-            "bg-osmoverse-900",
+            "bg-osmoverse-1000",
             showBanner ? "h-[124px]" : "h-navbar md:h-navbar-mobile",
-            backElementClassNames,
-            {
-              "!bg-osmoverse-1000": featureFlags.limitOrders,
-            }
+            backElementClassNames
           )}
         />
         {showBanner && (

diff --git a/packages/web/components/pool-detail/concentrated.tsx b/packages/web/components/pool-detail/concentrated.tsx
@@ -61,7 +61,6 @@ export const ConcentratedLiquidityPool: FunctionComponent<{ poolId: string }> =
     const { isLoading: isWalletLoading } = useWalletSelect();
     const account = accountStore.getWallet(chainStore.osmosis.chainId);
     const openCreatePosition = useSearchParam(OpenCreatePositionSearchParam);
-    const featureFlags = useFeatureFlags();
 
     const chartConfig = useHistoricalAndLiquidityData(poolId);
     const [activeModal, setActiveModal] = useState<
@@ -154,11 +153,7 @@ export const ConcentratedLiquidityPool: FunctionComponent<{ poolId: string }> =
           />
         )}
         <section className="flex flex-col gap-8">
-          <div
-            className={classNames("flex flex-col rounded-3xl p-8", {
-              "bg-osmoverse-1000": !featureFlags.limitOrders,
-            })}
-          >
+          <div className="flex flex-col rounded-3xl p-8">
             <div className="flex flex-row lg:flex-col lg:gap-3">
               <div className="flex flex-col gap-3">
                 <div className="flex flex-wrap items-center gap-2">
@@ -357,10 +352,7 @@ export const ConcentratedLiquidityPool: FunctionComponent<{ poolId: string }> =
                   onSecondaryClick={() => {
                     setActiveModal("learn-more");
                   }}
-                  className={classNames({
-                    "bg-osmoverse-800": !featureFlags.limitOrders,
-                    "bg-osmoverse-900": featureFlags.limitOrders,
-                  })}
+                  className="bg-osmoverse-900"
                 />
                 <ConcentratedLiquidityLearnMoreModal
                   isOpen={activeModal === "learn-more"}
@@ -475,14 +467,7 @@ const UserAssetsAndExternalIncentives: FunctionComponent<{ poolId: string }> =
 
     return (
       <div className="flex flex-wrap gap-4">
-        <div
-          className={classNames(
-            "flex shrink-0 items-center gap-8 rounded-3xl px-8 py-7",
-            {
-              "bg-osmoverse-1000": !featureFlags.limitOrders,
-            }
-          )}
-        >
+        <div className="flex shrink-0 items-center gap-8 rounded-3xl px-8 py-7">
           <div className="flex h-full flex-col place-content-between">
             <span className="body2 text-osmoverse-300">
               {t("clPositions.totalBalance")}
@@ -523,24 +508,15 @@ const UserAssetsAndExternalIncentives: FunctionComponent<{ poolId: string }> =
         {featureFlags.aprBreakdown && (
           <SkeletonLoader isLoaded={!isLoadingIncentives}>
             <AprBreakdown
-              className={classNames("shrink-0 rounded-3xl", {
-                "bg-osmoverse-1000": !featureFlags.limitOrders,
-              })}
+              className="shrink-0 rounded-3xl"
               showDisclaimerTooltip
               {...incentives?.aprBreakdown}
             />
           </SkeletonLoader>
         )}
 
         {hasIncentives && (
-          <div
-            className={classNames(
-              "flex h-full w-full flex-col place-content-between items-center rounded-3xl px-8 py-7",
-              {
-                "bg-osmoverse-1000": !featureFlags.limitOrders,
-              }
-            )}
-          >
+          <div className="flex h-full w-full flex-col place-content-between items-center rounded-3xl px-8 py-7">
             <span className="body2 mr-auto text-osmoverse-300">
               {t("pool.incentives")}
             </span>

diff --git a/packages/web/components/table/asset-info.tsx b/packages/web/components/table/asset-info.tsx
@@ -27,7 +27,6 @@ import {
   Breakpoint,
   useAmplitudeAnalytics,
   useDimension,
-  useFeatureFlags,
   useTranslation,
   useUserWatchlist,
   useWindowSize,
@@ -66,7 +65,6 @@ export const AssetsInfoTable: FunctionComponent<{
   const router = useRouter();
   const { t } = useTranslation();
   const { logEvent } = useAmplitudeAnalytics();
-  const featureFlags = useFeatureFlags();
 
   // State
 
@@ -497,10 +495,7 @@ export const AssetsInfoTable: FunctionComponent<{
           "mt-3",
           isPreviousData &&
             isFetching &&
-            "animate-[deepPulse_2s_ease-in-out_infinite] cursor-progress",
-          {
-            "[&>thead>tr]:!bg-osmoverse-1000": featureFlags.limitOrders,
-          }
+            "animate-[deepPulse_2s_ease-in-out_infinite] cursor-progress"
         )}
       >
         <thead className="sm:hidden">

diff --git a/packages/web/components/table/portfolio-asset-balances.tsx b/packages/web/components/table/portfolio-asset-balances.tsx
@@ -74,7 +74,6 @@ export const PortfolioAssetBalancesTable: FunctionComponent<{
   const { width, isMobile } = useWindowSize();
   const router = useRouter();
   const { t } = useTranslation();
-  const featureFlags = useFeatureFlags();
 
   // search
   const [searchQuery, setSearchQuery] = useState<Search | undefined>();
@@ -337,10 +336,7 @@ export const PortfolioAssetBalancesTable: FunctionComponent<{
         className={classNames(
           isPreviousData &&
             isFetching &&
-            "animate-[deepPulse_2s_ease-in-out_infinite] cursor-progress",
-          {
-            "[&>thead>tr]:!bg-osmoverse-1000": featureFlags.limitOrders,
-          }
+            "animate-[deepPulse_2s_ease-in-out_infinite] cursor-progress"
         )}
       >
         <thead>