chore(staking): update TOS

apps/staking/src/components/Header/index.tsx

@@ -0,0 +1,45 @@
+import clsx from "clsx";
+import type { HTMLAttributes } from "react";
+
+import { CurrentStakeAccount } from "./current-stake-account";
+import { HelpMenu } from "./help-menu";
+import Logo from "./logo.svg";
+import Logomark from "./logomark.svg";
+import { Stats } from "./stats";
+import { Link } from "../Link";
+import { MaxWidth } from "../MaxWidth";
+import { WalletButton } from "../WalletButton";
+
+export const Header = ({
+  className,
+  ...props
+}: Omit<HTMLAttributes<HTMLElement>, "children">) => (
+  <>
+    <header
+      className={clsx("sticky top-0 w-full lg:px-4", className)}
+      {...props}
+    >
+      <div className="border-b border-neutral-600/50 bg-pythpurple-800 lg:border-x">
+        <MaxWidth className="flex h-header items-center justify-between gap-2 lg:-mx-4">
+          <div className="flex flex-row items-center gap-8 lg:gap-12">
+            <Link
+              href="/"
+              className="-mx-2 h-[calc(var(--header-height)_-_0.5rem)] rounded-sm p-2 text-pythpurple-100 focus:outline-none focus-visible:ring-1 focus-visible:ring-pythpurple-400"
+            >
+              <Logo className="hidden h-full lg:block" />
+              <Logomark className="h-full lg:hidden" />
+              <span className="sr-only">Pyth Staking</span>
+            </Link>
+            <Stats className="hidden gap-4 sm:flex lg:gap-6" />
+          </div>
+          <div className="flex flex-none flex-row items-stretch gap-4 md:gap-8">
+            <CurrentStakeAccount />
+            <WalletButton className="flex-none" />
+            <HelpMenu />
+          </div>
+        </MaxWidth>
+      </div>
+    </header>
+    <Stats className="border-b border-neutral-600/50 py-4 text-center sm:hidden" />
+  </>
+);