Add banner for HyperVue Miles program (#1694)

Author: DannyDelott

apps/hyperdrive-trading/src/ui/app/Navbar/DevtoolsMenu.tsx

@@ -23,6 +23,13 @@ export function DevtoolsMenu(): ReactElement {
         <FeatureFlagMenuItem flagName="points-markets">
           Points markets
         </FeatureFlagMenuItem>
+        <MenuItem
+          onClick={() => {
+            window.localStorage.clear();
+            location.reload();
+          }}
+          title={"Clear prefs"}
+        />
         <MenuItem
           onClick={() => {
             throw new Error(

apps/hyperdrive-trading/src/ui/app/Page.tsx

@@ -6,6 +6,7 @@ import { Navbar } from "src/ui/app/Navbar/Navbar";
 import { TermsOfUseAndPrivacyPolicyModal } from "src/ui/compliance/TermsOfUseAndPrivacyPolicyModal";
 import { useAddressScreen } from "src/ui/compliance/hooks/useAddressScreen";
 import { useVpnScreen } from "src/ui/compliance/hooks/useVpnScreen";
+import { MilesBanner } from "src/ui/rewards/MilesBanner";
 
 export function Page({ children }: PropsWithChildren): ReactElement {
   // compliance
@@ -16,6 +17,7 @@ export function Page({ children }: PropsWithChildren): ReactElement {
     <div className="flex min-h-screen flex-col items-center justify-between gap-9">
       <div className="flex w-full grow flex-col items-center gap-9">
         <Navbar />
+        <MilesBanner />
 
         {/* compliance */}
         <TermsOfUseAndPrivacyPolicyModal />

apps/hyperdrive-trading/src/ui/base/components/CustomBanner.tsx

@@ -1,16 +1,19 @@
+import classNames from "classnames";
 import { ReactNode } from "react";
 
 export default function CustomBanner({
   icon,
   description,
+  className,
 }: {
   icon?: ReactNode;
-  description: string;
+  description: ReactNode;
+  className?: string;
 }): JSX.Element {
   return (
-    <div className="daisy-alert">
+    <div className={classNames("daisy-alert", className)}>
       {icon}
-      <span>{description}</span>
+      {description}
     </div>
   );
 }

apps/hyperdrive-trading/src/ui/globals.css

@@ -55,4 +55,7 @@ div[data-rk] {
   .gradient-text {
     @apply bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent;
   }
+  .gradient-hypervue {
+    @apply from-hypervue-red to-hypervue-pink bg-gradient-to-r;
+  }
 }

apps/hyperdrive-trading/src/ui/rewards/MilesBanner.tsx

@@ -0,0 +1,51 @@
+import { XMarkIcon } from "@heroicons/react/24/outline";
+import { ReactElement } from "react";
+import { useLocalStorage } from "react-use";
+import { ExternalLink } from "src/ui/analytics/ExternalLink";
+import CustomBanner from "src/ui/base/components/CustomBanner";
+
+export function MilesBanner(): ReactElement | null {
+  const { isBannerDismissed, setIsBannerDismissed } = useMilesBannerDismissed();
+  if (isBannerDismissed) {
+    return null;
+  }
+  return (
+    <CustomBanner
+      className="gradient-hypervue rounded-none"
+      icon={<img src="/hyperdrive-solo-logo-white.svg" className="size-8" />}
+      description={
+        <div className="flex w-full justify-between">
+          <span className="text-base-content">
+            You can now earn Miles by providing liquidity on Hyperdrive! Learn
+            more about the{" "}
+            <ExternalLink
+              newTab
+              href="https://mirror.xyz/0xdB081d7cedeDB2cFb4fff2330D9a31f54A025E38/qVENDIYTfUiZw6QZroXBpNxF8UjTGV8YkVq0lOaTznU"
+              className="daisy-link font-medium text-white"
+            >
+              HyperVue Foundation points program
+            </ExternalLink>
+            .
+          </span>
+          <button onClick={() => setIsBannerDismissed(true)}>
+            <XMarkIcon className="h-6 cursor-pointer" />
+          </button>
+        </div>
+      }
+    />
+  );
+}
+function useMilesBannerDismissed(): {
+  isBannerDismissed: boolean;
+  setIsBannerDismissed: (isDismissed: boolean) => void;
+} {
+  const [isBannerDismissed, setIsBannerDismissed] = useLocalStorage(
+    "miles-banner-dismissed",
+    false,
+  );
+  return {
+    // safe to case because default value is set to false
+    isBannerDismissed: isBannerDismissed as boolean,
+    setIsBannerDismissed,
+  };
+}

apps/hyperdrive-trading/tailwind.config.js

@@ -48,6 +48,9 @@ module.exports = {
       "warpcast-purple": "#472b92",
       "farcaster-purple": "#8A63D2",
 
+      "hypervue-red": "#E26360",
+      "hypervue-pink": "#DC70D4",
+
       gray: {
         50: "#EFF4F6",
         100: "#BDD2DB",