chore: better demo

Author: jorgen

src/components/AmountInput/AmountInput.tsx

@@ -9,14 +9,13 @@ import { Tooltip } from "components/Tooltip";
 import { Input, InputGroup } from "components/Input";
 import { useTokenConversion } from "hooks/useTokenConversion";
 import {
-  formatUnitsWithMaxFractions,
+  QUERIESV2,
   formatUSD,
+  formatUnitsWithMaxFractions,
   getToken,
   isNumberEthersParseable,
   parseUnits,
-  QUERIESV2,
 } from "utils";
-import { useFeatureFlag } from "../../hooks";
 
 export type Props = {
   balance?: BigNumber;
@@ -51,8 +50,6 @@ export function AmountInput({
 }: Props) {
   const token = getToken(inputTokenSymbol);
 
-  const hasDemoFlag = useFeatureFlag("demo-flag");
-
   const validationLevel =
     (amountInput ?? "") === ""
       ? "valid"
@@ -96,7 +93,7 @@ export function AmountInput({
         <Input
           type="number"
           validationLevel={validationLevel}
-          placeholder={hasDemoFlag ? "WORKS!" : "Enter amount. NOT"}
+          placeholder="Enter amount"
           value={amountInput}
           onWheel={(e) => e.currentTarget.blur()}
           onChange={(e) => {

src/components/LayoutV2/LayoutV2.tsx

@@ -1,6 +1,7 @@
 import styled from "@emotion/styled";
 import Footer from "components/Footer";
 import { QUERIESV2 } from "utils";
+import { useFeatureFlag } from "../../hooks";
 
 type LayoutProp = {
   maxWidth?: number;
@@ -13,21 +14,22 @@ const LayoutV2 = ({
   children,
   transparentBackground,
 }: LayoutProp) => {
+  const hasDemoFlag = useFeatureFlag("demo-flag");
   return (
-    <Wrapper transparentBackground={transparentBackground}>
+    <Wrapper transparentBackground={transparentBackground} demo={hasDemoFlag}>
       <InnerWrapper maxWidth={maxWidth ?? 600}>{children}</InnerWrapper>
       <Footer />
     </Wrapper>
   );
 };
 
-const Wrapper = styled.div<{ transparentBackground?: boolean }>`
+const Wrapper = styled.div<{ transparentBackground?: boolean; demo: boolean }>`
   display: flex;
   flex-direction: column;
   justify-content: space-between;
 
-  background-color: ${({ transparentBackground }) =>
-    transparentBackground ? "transparent" : "#2d2e33"};
+  background-color: ${({ transparentBackground, demo }) =>
+    demo ? "#bada55" : transparentBackground ? "transparent" : "#2d2e33"};
 
   /* Subtract to account for header */
   min-height: calc(100vh - 72px);

src/hooks/feature-flags/featureFlagsProvider.tsx

@@ -24,7 +24,7 @@ export function FeatureFlagsProvider({ children }: { children: ReactNode }) {
       publicDeploymentKey,
       {}
     );
-    // set flags from localstorage before a fetch is initialized
+    // set flags from localstorage cache before a fetch is initialized
     setFlags(experimentClientRef.current.all());
     setIsInitialized(true);
   }, []);

src/hooks/feature-flags/useFeatureFlags.tsx renamed to src/hooks/feature-flags/useFeatureFlagsContext.tsx

@@ -1,7 +1,7 @@
 import { useContext } from "react";
 import { FeatureFlagsContext } from "./featureFlagsContext";
 
-export const useFeatureFlags = () => {
+export const useFeatureFlagsContext = () => {
   const context = useContext(FeatureFlagsContext);
   if (!context) {
     throw new Error("useFeatureFlags must be used within FeatureFlagsProvider");

src/hooks/useInitialUserPropTraces.ts

@@ -8,10 +8,10 @@ import {
   setUserId,
 } from "utils/amplitude";
 import { ampli } from "ampli";
-import { useFeatureFlags } from "./feature-flags/useFeatureFlags";
+import { useFeatureFlagsContext } from "./feature-flags/useFeatureFlagsContext";
 
 export function useInitialUserPropTraces(isAmpliLoaded: boolean) {
-  const { fetchFlags } = useFeatureFlags();
+  const { fetchFlags } = useFeatureFlagsContext();
   const [areInitialUserPropsSet, setAreInitialUserPropsSet] = useState(false);
   const [prevTrackedAccount, setPrevTrackedAccount] = useState<
     string | undefined

src/hooks/useLoadAmpli.ts

@@ -8,11 +8,11 @@ import {
   isAmplitudeLoggingEnabled,
   isProductionBuild,
 } from "utils";
-import { useFeatureFlags } from "./feature-flags/useFeatureFlags";
+import { useFeatureFlagsContext } from "./feature-flags/useFeatureFlagsContext";
 
 export function useLoadAmpli() {
   const [isAmpliLoaded, setIsAmpliLoaded] = useState(false);
-  const { initializeFeatureFlags } = useFeatureFlags();
+  const { initializeFeatureFlags } = useFeatureFlagsContext();
 
   useEffect(() => {
     if (amplitudeAPIKey && !isAmpliLoaded) {