Merge pull request #1907 from cprussin/re-do-feedback

feat(staking): re do feedback

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

@@ -0,0 +1,77 @@
+import { ClipboardDocumentIcon, CheckIcon } from "@heroicons/react/24/outline";
+import clsx from "clsx";
+import { type ComponentProps, useCallback, useEffect, useState } from "react";
+import { Button } from "react-aria-components";
+
+import { useLogger } from "../../hooks/use-logger";
+
+type CopyButtonProps = ComponentProps<typeof Button> & {
+  text: string;
+};
+
+export const CopyButton = ({
+  text,
+  children,
+  className,
+  ...props
+}: CopyButtonProps) => {
+  const [isCopied, setIsCopied] = useState(false);
+  const logger = useLogger();
+  const copy = useCallback(() => {
+    // eslint-disable-next-line n/no-unsupported-features/node-builtins
+    navigator.clipboard
+      .writeText(text)
+      .then(() => {
+        setIsCopied(true);
+      })
+      .catch((error: unknown) => {
+        /* TODO do something here? */
+        logger.error(error);
+      });
+  }, [text, logger]);
+
+  useEffect(() => {
+    setIsCopied(false);
+  }, [text]);
+
+  useEffect(() => {
+    if (isCopied) {
+      const timeout = setTimeout(() => {
+        setIsCopied(false);
+      }, 2000);
+      return () => {
+        clearTimeout(timeout);
+      };
+    } else {
+      return;
+    }
+  }, [isCopied]);
+
+  return (
+    <Button
+      onPress={copy}
+      isDisabled={isCopied}
+      className={clsx(
+        "group -mt-0.5 rounded-md px-2 py-0.5 align-middle transition hover:bg-white/10 focus:outline-none focus-visible:ring-1 focus-visible:ring-pythpurple-400",
+        className,
+      )}
+      {...(isCopied && { "data-is-copied": true })}
+      {...props}
+    >
+      {(...args) => (
+        <>
+          <span className="align-middle">
+            {typeof children === "function" ? children(...args) : children}
+          </span>
+          <span className="relative ml-[0.25em] inline-block align-middle">
+            <span className="opacity-50 transition-opacity duration-100 group-data-[is-copied]:opacity-0">
+              <ClipboardDocumentIcon className="size-[1em]" />
+              <div className="sr-only">Copy code to clipboaord</div>
+            </span>
+            <CheckIcon className="absolute inset-0 text-green-600 opacity-0 transition-opacity duration-100 group-data-[is-copied]:opacity-100" />
+          </span>
+        </>
+      )}
+    </Button>
+  );
+};

apps/staking/src/components/Header/current-stake-account.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import clsx from "clsx";
+import { type HTMLProps } from "react";
+
+import { StateType as ApiStateType, useApi } from "../../hooks/use-api";
+import { CopyButton } from "../CopyButton";
+import { TruncatedKey } from "../TruncatedKey";
+
+export const CurrentStakeAccount = ({
+  className,
+  ...props
+}: HTMLProps<HTMLDivElement>) => {
+  const api = useApi();
+
+  return api.type === ApiStateType.Loaded ? (
+    <div className={clsx("grid place-content-center", className)} {...props}>
+      <div className="flex flex-col items-end text-xs md:flex-row md:items-baseline md:text-sm">
+        <div className="font-semibold">Stake account:</div>
+        <CopyButton
+          text={api.account.address.toBase58()}
+          className="-mr-2 ml-2 text-pythpurple-400 md:mr-0"
+        >
+          <TruncatedKey>{api.account.address}</TruncatedKey>
+        </CopyButton>
+      </div>
+    </div>
+  ) : // eslint-disable-next-line unicorn/no-null
+  null;
+};

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

@@ -1,7 +1,9 @@
 import clsx from "clsx";
 import type { HTMLAttributes } from "react";
 
+import { CurrentStakeAccount } from "./current-stake-account";
 import Logo from "./logo.svg";
+import Logomark from "./logomark.svg";
 import { MaxWidth } from "../MaxWidth";
 import { WalletButton } from "../WalletButton";
 
@@ -14,9 +16,13 @@ export const Header = ({
     {...props}
   >
     <div className="border-b border-neutral-600/50 bg-pythpurple-800 sm:border-x">
-      <MaxWidth className="flex h-16 items-center justify-between gap-8 sm:-mx-4">
-        <Logo className="max-h-full py-4 text-pythpurple-100" />
-        <WalletButton className="flex-none" />
+      <MaxWidth className="flex h-16 items-center justify-between gap-2 sm:-mx-4">
+        <Logo className="hidden max-h-full py-4 text-pythpurple-100 sm:block" />
+        <Logomark className="max-h-full py-4 text-pythpurple-100 sm:hidden" />
+        <div className="flex flex-none flex-row items-stretch gap-8">
+          <CurrentStakeAccount />
+          <WalletButton className="flex-none" />
+        </div>
       </MaxWidth>
     </div>
   </header>