feat: add page to generate stacking signature

package.json

@@ -20,14 +20,14 @@
     "@noble/hashes": "1.3.2",
     "@reduxjs/toolkit": "1.9.7",
     "@scure/base": "1.1.3",
-    "@stacks/auth": "6.9.0",
+    "@stacks/auth": "6.11.4-pr.3d89ca1.0",
     "@stacks/blockchain-api-client": "7.3.2",
     "@stacks/common": "6.8.1",
     "@stacks/connect": "7.4.1",
     "@stacks/connect-react": "22.2.1",
     "@stacks/network": "6.8.1",
-    "@stacks/stacking": "6.9.0",
-    "@stacks/transactions": "6.9.0",
+    "@stacks/stacking": "6.11.4-pr.3d89ca1.0",
+    "@stacks/transactions": "6.11.4-pr.3d89ca1.0",
     "@stacks/ui": "7.10.0",
     "@stacks/ui-core": "7.3.0",
     "@stacks/ui-theme": "7.5.0",

src/app.tsx

@@ -32,6 +32,7 @@ import { StackExtend } from './pages/stacking/stack-extend/stack-extend';
 import { StackIncrease } from './pages/stacking/stack-increase/stack-increase';
 import { StartDirectStacking } from './pages/stacking/start-direct-stacking/start-direct-stacking';
 import { StartPooledStacking } from './pages/stacking/start-pooled-stacking/start-pooled-stacking';
+import { GenerateSignerKeySignature } from './pages/stacking/generate-signature/signer-key-signature';
 
 const queryClient = new QueryClient();
 function Root() {
@@ -118,6 +119,10 @@ const router = createBrowserRouter([
                 path: 'self-service-extend',
                 element: <SelfServiceExtend />,
               },
+              {
+                path: 'generate-signature',
+                element: <GenerateSignerKeySignature />,
+              },
               { path: 'pool/:poolAddress', element: <PoolInfo /> },
               {
                 path: 'pool-admin',

src/constants/routes.ts

@@ -13,4 +13,5 @@ export default {
   DELEGATE_STACK_INCREASE: '/pool-admin/delegate-stack-increase',
   DELEGATE_STACK_EXTEND: '/pool-admin/delegate-stack-extend',
   STACK_AGGREGATION_COMMIT: '/pool-admin/stack-aggregation-commit',
+  GENERATE_SIGNATURE: '/generate-signature',
 };

src/hooks/use-generate-signature.ts

@@ -0,0 +1,58 @@
+import { openStructuredDataSignatureRequestPopup, SignatureData } from '@stacks/connect';
+import { useCallback, useState } from 'react';
+import { useStacksNetwork } from './use-stacks-network';
+import { useStackingClient } from '@components/stacking-client-provider/stacking-client-provider';
+import {
+  Pox4SignatureTopic,
+  pox4SignatureMessage,
+  verifyPox4SignatureHash,
+} from '@stacks/stacking';
+
+export interface GenerateSignatureOptions {
+  rewardCycle: number;
+  poxAddress: string;
+  period: number;
+  topic: Pox4SignatureTopic;
+}
+
+export function useGenerateStackingSignature() {
+  const _stackingClient = useStackingClient();
+  const [signatureData, setSignatureData] = useState<SignatureData | null>(null);
+  const network = useStacksNetwork();
+  const openSignatureRequest = useCallback(
+    async (options: GenerateSignatureOptions) => {
+      const { message, domain } = pox4SignatureMessage({
+        topic: options.topic,
+        period: options.period,
+        network: network.network,
+        rewardCycle: options.rewardCycle,
+        poxAddress: options.poxAddress,
+      });
+
+      await openStructuredDataSignatureRequestPopup({
+        domain,
+        message,
+        onFinish: data => {
+          console.log('signature done', data);
+          const isValid = verifyPox4SignatureHash({
+            topic: options.topic,
+            period: options.period,
+            network: network.network,
+            rewardCycle: options.rewardCycle,
+            poxAddress: options.poxAddress,
+            signature: data.signature,
+            publicKey: data.publicKey,
+          });
+          console.log(isValid);
+          setSignatureData(data);
+        },
+      });
+    },
+    [network.network, setSignatureData]
+  );
+
+  return {
+    openSignatureRequest,
+    signatureData,
+  };
+}

src/pages/stacking/generate-signature/components/auth-id.tsx

@@ -0,0 +1,43 @@
+import { useField } from 'formik';
+import { Description, Step } from '../../components/stacking-form-step';
+import { Box, Button, Input, Text } from '@stacks/ui';
+import React from 'react';
+import { ErrorLabel } from '@components/error-label';
+import { ErrorText } from '@components/error-text';
+
+export function AuthId() {
+  const [field, meta, helpers] = useField('authId');
+  // const form = useFormikContext<{ topic: string }>();
+  const setRandom = React.useCallback(() => {
+    helpers.setValue(Math.floor(Math.random() * 10000000));
+  }, [helpers]);
+  return (
+    <Step title="Auth ID">
+      <Description>
+        <Text>A random number that is used to prevent re-use of the signature</Text>
+      </Description>
+      <Box position="relative" my="loose">
+        <Input id="authId" placeholder="Maximum amount of STX to lock" {...field} />
+        {meta.touched && meta.error && (
+          <ErrorLabel>
+            <ErrorText>{meta.error}</ErrorText>
+          </ErrorLabel>
+        )}
+        <Button
+          type="button"
+          mode="tertiary"
+          size="sm"
+          height="28px"
+          right="12px"
+          top="10px"
+          style={{ position: 'absolute' }}
+          width="110px"
+          onClick={setRandom}
+          // isDisabled={field.value === MAX_U128.toString()}
+        >
+          Random
+        </Button>
+      </Box>
+    </Step>
+  );
+}