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.13.0",
     "@stacks/blockchain-api-client": "7.3.2",
     "@stacks/common": "6.8.1",
     "@stacks/connect": "7.7.0",
     "@stacks/connect-react": "22.4.0",
     "@stacks/network": "6.8.1",
-    "@stacks/stacking": "6.9.0",
-    "@stacks/transactions": "6.9.0",
+    "@stacks/stacking": "6.13.2",
+    "@stacks/transactions": "6.13.0",
     "@stacks/ui": "7.10.0",
     "@stacks/ui-core": "7.3.0",
     "@stacks/ui-theme": "7.5.0",

src/app.tsx

@@ -26,8 +26,11 @@ import { DelegateStackIncrease } from './pages/stacking/pool-admin/delegate-stac
 import { DelegateStackStx } from './pages/stacking/pool-admin/delegate-stack-stx/delegate-stack-stx';
 import { PoolInfo } from './pages/stacking/pool-admin/pool-info/pool-info';
 import { StackAggregationCommit } from './pages/stacking/pool-admin/stack-aggregation-commit/stack-aggregation-commit';
+import { StackAggregationIncrease } from './pages/stacking/pool-admin/stack-aggregation-increase/stack-aggregation-increase';
 import { PooledStackingInfo } from './pages/stacking/pooled-stacking-info/pooled-stacking-info';
 import { SelfServiceExtend } from './pages/stacking/self-service-extend/self-service-extend';
+import { GenerateSignerKeySignature } from './pages/stacking/signer/generate-signature/signer-key-signature';
+import { SignerInfo } from './pages/stacking/signer/signer-info/signer-info';
 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';
@@ -125,6 +128,13 @@ const router = createBrowserRouter([
                 path: 'self-service-extend',
                 element: <SelfServiceExtend />,
               },
+              {
+                path: 'signer',
+                children: [
+                  { index: true, element: <SignerInfo /> },
+                  { path: 'generate-signature', element: <GenerateSignerKeySignature /> },
+                ],
+              },
               { path: 'pool/:poolAddress', element: <PoolInfo /> },
               {
                 path: 'pool-admin',
@@ -134,6 +144,7 @@ const router = createBrowserRouter([
                   { path: 'delegate-stack-extend', element: <DelegateStackExtend /> },
                   { path: 'delegate-stack-increase', element: <DelegateStackIncrease /> },
                   { path: 'stack-aggregation-commit', element: <StackAggregationCommit /> },
+                  { path: 'stack-aggregation-increase', element: <StackAggregationIncrease /> },
                 ],
               },
               {

src/components/footer.tsx

@@ -1,4 +1,4 @@
-import { Flex } from '@stacks/ui';
+import { Flex, color } from '@stacks/ui';
 import { useGlobalContext } from 'src/context/use-app-context';
 
 import { figmaTheme } from '@constants/figma-theme';
@@ -17,12 +17,20 @@ export function Footer() {
       columnGap="loose"
     >
       <OpenLinkInNewTab
-        color={figmaTheme.text}
+        color={color('text-caption')}
         fontWeight={500}
         sx={{ textDecoration: 'underline' }}
         href={`${window.location.origin}/pool-admin${createSearch(activeNetwork)}`}
       >
-        Use Hot Wallet
+        Pool Administration
+      </OpenLinkInNewTab>
+      <OpenLinkInNewTab
+        color={color('text-caption')}
+        fontWeight={500}
+        sx={{ textDecoration: 'underline' }}
+        href={`${window.location.origin}/signer/generate-signature${createSearch(activeNetwork)}`}
+      >
+        Signer Key Signature
       </OpenLinkInNewTab>
     </Flex>
   );

src/components/info-card.tsx

@@ -61,5 +61,5 @@ export const InfoCardLabel: FC<InfoCardLabelProps> = ({ children, ...props }) =>
 );
 
 export const InfoCardValue: FC<FlexProps> = props => (
-  <Text textStyle="body.large.medium" textAlign="right" {...props} />
+  <Text textStyle="body.large.medium" textAlign="right" color={color('text-caption')} {...props} />
 );

src/components/navbar.tsx

@@ -1,10 +1,13 @@
+import { useMemo } from 'react';
 import { Link } from 'react-router-dom';
 
-import { Box, Button, Flex, Text } from '@stacks/ui';
+import { Box, Button, Flex, Text, color } from '@stacks/ui';
+import { useGlobalContext } from 'src/context/use-app-context';
 import { useHover } from 'use-events';
 
-import logo from '@assets/images/logo.svg';
-import { figmaTheme } from '@constants/figma-theme';
+import darkLogo from '@assets/images/logo-dark.svg';
+import lightLogo from '@assets/images/logo.svg';
+import { createSearch } from '@utils/networks';
 import { truncateMiddle } from '@utils/tx-utils';
 
 import { useAuth } from './auth-provider/auth-provider';
@@ -14,16 +17,22 @@ import { OpenLinkInNewTab } from './open-link-in-new-tab';
 export function Navbar() {
   const { isSignedIn, signOut, signIn, address } = useAuth();
   const [isHovered, bind] = useHover();
+  const { activeNetwork } = useGlobalContext();
+
+  const logo = useMemo(() => {
+    const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    return isDark ? darkLogo : lightLogo;
+  }, []);
 
   return (
     <Flex
       flexDirection="row"
       justifyContent="space-between"
       p="base-loose"
-      borderBottom={`1px solid ${figmaTheme.borderSubdued}`}
+      borderBottom={`1px solid ${color('border')}`}
     >
       <Flex alignItems="center">
-        <Link to="/">
+        <Link to={`/${createSearch(activeNetwork)}`}>
           <Flex alignItems="center">
             <img src={logo} alt="Site logo with Stacks symbol and Stacking text" />
           </Flex>
@@ -33,14 +42,14 @@ export function Navbar() {
         <Flex p="sm" justify="right" alignItems="center">
           <NetworkInfo />
           <OpenLinkInNewTab href="https://wallet.hiro.so/wallet/faq#stacking" px="loose">
-            <Text color={figmaTheme.text} fontWeight={500}>
+            <Text color={color('text-body')} fontWeight={500}>
               FAQ
             </Text>
           </OpenLinkInNewTab>
           <Box pr="12px">
             {isSignedIn && address ? (
               <Button
-                width="142px"
+                width="160px"
                 boxShadow="none"
                 _hover={{ boxShadow: 'none' }}
                 mode="tertiary"