Merge pull request #1892 from cprussin/add-button-to-opt-out-and-reas…

…sign-stake-account feat(staking): add publisher account designation buttons
pyth-network · Sep 11, 2024 · 6d39352 · 6d39352
2 parents 55ec07a + d8c6f61
commit 6d39352
Show file tree

Hide file tree

Showing 8 changed files with 459 additions and 121 deletions.
diff --git a/apps/staking/src/api.ts b/apps/staking/src/api.ts
@@ -437,6 +437,23 @@ export const unstakeIntegrityStaking = async (
   );
 };
 
+export const reassignPublisherAccount = async (
+  _client: PythStakingClient,
+  _stakeAccount: PublicKey,
+  _targetAccount: PublicKey,
+): Promise<void> => {
+  await new Promise((resolve) => setTimeout(resolve, MOCK_DELAY));
+  throw new NotImplementedError();
+};
+
+export const optPublisherOut = async (
+  _client: PythStakingClient,
+  _stakeAccount: PublicKey,
+): Promise<void> => {
+  await new Promise((resolve) => setTimeout(resolve, MOCK_DELAY));
+  throw new NotImplementedError();
+};
+
 export const getUpcomingEpoch = (): Date => {
   const d = new Date();
   d.setUTCDate(d.getUTCDate() + ((5 + 7 - d.getUTCDay()) % 7 || 7));

diff --git a/apps/staking/src/components/Button/index.tsx b/apps/staking/src/components/Button/index.tsx
@@ -8,7 +8,7 @@ import { Link } from "../Link";
 
 type VariantProps = {
   variant?: "secondary" | undefined;
-  size?: "small" | "nopad" | undefined;
+  size?: "small" | "nopad" | "noshrink" | undefined;
 };
 
 type ButtonProps = Omit<ComponentProps<typeof ReactAriaButton>, "isDisabled"> &
@@ -77,6 +77,9 @@ const sizeClassName = (size: VariantProps["size"]) => {
     case "nopad": {
       return "px-0 py-0";
     }
+    case "noshrink": {
+      return "px-8 py-2";
+    }
     case undefined: {
       return "px-2 sm:px-4 md:px-8 py-2";
     }

diff --git a/apps/staking/src/components/ModalDialog/index.tsx b/apps/staking/src/components/ModalDialog/index.tsx
@@ -1,4 +1,5 @@
 import { XMarkIcon } from "@heroicons/react/24/outline";
+import clsx from "clsx";
 import type { ComponentProps, ReactNode } from "react";
 import { Dialog, Heading, Modal, ModalOverlay } from "react-aria-components";
 
@@ -14,8 +15,9 @@ type ModalDialogProps = Omit<
   "children"
 > & {
   closeDisabled?: boolean | undefined;
+  closeButtonText?: string;
   title: ReactNode | ReactNode[];
-  description?: string;
+  description?: ReactNode;
   children?:
     | ((options: DialogRenderProps) => ReactNode | ReactNode[])
     | ReactNode
@@ -25,6 +27,7 @@ type ModalDialogProps = Omit<
 
 export const ModalDialog = ({
   closeDisabled,
+  closeButtonText,
   children,
   title,
   description,
@@ -37,7 +40,7 @@ export const ModalDialog = ({
     {...props}
   >
     <Modal className="data-[entering]:duration-500 data-[exiting]:duration-300 data-[entering]:animate-in data-[exiting]:animate-out data-[entering]:zoom-in-90 data-[exiting]:zoom-out-110">
-      <Dialog className="relative border border-neutral-600/50 bg-[#100E21] px-6 pb-8 pt-12 focus:outline-none sm:px-10 sm:pb-12">
+      <Dialog className="relative mx-8 border border-neutral-600/50 bg-[#100E21] px-6 pb-8 pt-12 focus:outline-none sm:px-10 sm:pb-12">
         {(options) => (
           <>
             <Button
@@ -48,13 +51,25 @@ export const ModalDialog = ({
             >
               <XMarkIcon className="size-6" />
             </Button>
-            <Heading className="text-3xl font-light leading-6" slot="title">
+            <Heading
+              className={clsx("text-3xl font-light leading-6", {
+                "mb-10": description === undefined,
+              })}
+              slot="title"
+            >
               {title}
             </Heading>
             {description && (
               <p className="mb-10 mt-2 max-w-96 opacity-60">{description}</p>
             )}
             {typeof children === "function" ? children(options) : children}
+            {closeButtonText !== undefined && (
+              <div className="mt-14 flex flex-row justify-end">
+                <Button size="noshrink" onPress={options.close}>
+                  {closeButtonText}
+                </Button>
+              </div>
+            )}
           </>
         )}
       </Dialog>