Navbar Cleanup (#1206)

* updates connect button

* version picker added

* version picker cleanup

* cleanup

* updates per comments

Author: jackburrus

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

@@ -19,6 +19,9 @@ export function DevtoolsMenu(): ReactElement {
         <FeatureFlagMenuItem flagName="bridge">
           Bridge Assets
         </FeatureFlagMenuItem>
+        <FeatureFlagMenuItem flagName="version-picker">
+          Show Version Picker
+        </FeatureFlagMenuItem>
         <MenuItem
           onClick={() => {
             throw new Error(
@@ -57,7 +60,6 @@ function FeatureFlagMenuItem({
     </li>
   );
 }
-
 function MenuItem({ onClick, title }: { onClick?: () => void; title: string }) {
   return (
     <li>

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

@@ -7,9 +7,12 @@ import { ReactElement } from "react";
 import { DevtoolsMenu } from "src/ui/app/Navbar/DevtoolsMenu";
 import { HyperdriveLogo } from "src/ui/app/Navbar/HyperdriveLogo";
 import { ConnectWalletButton } from "src/ui/base/components/ConnectWallet";
+import VersionPicker from "src/ui/base/components/VersionPicker";
+import { useFeatureFlag } from "src/ui/base/featureFlags/featureFlags";
 import { useIsTailwindSmallScreen } from "src/ui/base/mediaBreakpoints";
 export function Navbar(): ReactElement {
   const isTailwindSmallScreen = useIsTailwindSmallScreen();
+  const { isFlagEnabled: showVersionPicker } = useFeatureFlag("version-picker");
   return (
     <div className="daisy-navbar">
       <div className="daisy-navbar-start ml-2">
@@ -33,19 +36,24 @@ export function Navbar(): ReactElement {
           </span>
           <ArrowTopRightOnSquareIcon className="-mt-0.5 inline h-4" />
         </a>
-        <a
-          target="_blank"
-          rel="noreferrer"
-          href="https://warpcast.com/~/compose?text=Can%20you%20outtrade%20me%20on%20Hyperdrive%3F%20Warp%20your%20best%20Hyperdrive%20trade%20screenshot%20below%20%F0%9F%93%88%20%2Fdelv&embeds[]=https://frames.hyperdrive.trade"
-          className="text-white daisy-btn rounded-full"
-        >
-          <span className="hidden sm:inline">Cast on Warpcast</span>
-          <span className="inline sm:hidden">Cast</span>
-          <img
-            className="h-4"
-            src="https://raw.githubusercontent.com/vrypan/farcaster-brand/ea95543f6d1308dd52631f5e81f395a60447df0b/icons/icon-transparent/transparent-white.svg"
-          />
-        </a>
+        {showVersionPicker ? (
+          <VersionPicker />
+        ) : (
+          <a
+            target="_blank"
+            rel="noreferrer"
+            href="https://warpcast.com/~/compose?text=Can%20you%20outtrade%20me%20on%20Hyperdrive%3F%20Warp%20your%20best%20Hyperdrive%20trade%20screenshot%20below%20%F0%9F%93%88%20%2Fdelv&embeds[]=https://frames.hyperdrive.trade"
+            className="text-white daisy-btn rounded-full"
+          >
+            <span className="hidden sm:inline">Cast on Warpcast</span>
+            <span className="inline sm:hidden">Cast</span>
+            <img
+              className="h-4"
+              src="https://raw.githubusercontent.com/vrypan/farcaster-brand/ea95543f6d1308dd52631f5e81f395a60447df0b/icons/icon-transparent/transparent-white.svg"
+            />
+          </a>
+        )}
+
         {import.meta.env.DEV && !isTailwindSmallScreen ? (
           <DevtoolsMenu />
         ) : null}

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

@@ -40,15 +40,15 @@ export function ConnectWalletButton(): JSX.Element {
                 );
               }
               return (
-                <div className="flex items-center gap-4">
+                <div className="daisy-join flex items-center rounded-full">
                   <button
+                    className="daisy-btn daisy-btn-circle daisy-join-item flex size-12 bg-base-300"
                     onClick={openChainModal}
-                    className="daisy-btn rounded-full"
                   >
-                    {chain.name}
+                    <img className="w-6 hover:scale-105" src={chain.iconUrl} />
                   </button>
                   <button
-                    className="daisy-btn daisy-btn-circle daisy-btn-primary mx-0 w-24 md:w-32"
+                    className="daisy-btn daisy-btn-circle daisy-join-item mx-0 w-24 md:w-32"
                     onClick={openAccountModal}
                   >
                     {account.displayName}

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

@@ -0,0 +1,29 @@
+import { ChevronDownIcon } from "@heroicons/react/24/outline";
+
+export default function VersionPicker(): JSX.Element {
+  return (
+    <div className="daisy-dropdown">
+      <div
+        tabIndex={0}
+        className="daisy-btn flex items-center justify-center rounded-full"
+      >
+        Latest Version
+        <ChevronDownIcon className="hidden h-4 sm:inline" />
+      </div>
+      <ul
+        tabIndex={0}
+        className="daisy-menu daisy-dropdown-content z-[1] w-auto gap-2 rounded-lg bg-base-100 p-4 shadow"
+      >
+        <li>
+          <a
+            rel="noreferrer"
+            target="_blank"
+            href="https://testnet-v1.hyperdrive.box/"
+          >
+            V1 Pools
+          </a>
+        </li>
+      </ul>
+    </div>
+  );
+}