Use extend window in self-service-extend

src/pages/stacking/pooled-stacking-info/components/content-active-pooling.tsx

@@ -17,6 +17,8 @@ import {
 import { makeStackingClubRewardAddressLink } from '@utils/external-links';
 import { toHumanReadableStx } from '@utils/unit-convert';
 
+import routes from '@constants/routes';
+import { useNavigate } from 'react-router-dom';
 import { Pox2Contracts } from '../../start-pooled-stacking/types-preset-pools';
 import { DelegationStatus } from '../get-delegation-status';
 import { IncreasePoolingAmount } from './increase-pooling-amount';
@@ -41,6 +43,7 @@ export function ActivePoolingContent({
   stackerInfo,
 }: ActivePoolingContentProps) {
   const isStacking = stackerInfo.stacked;
+  const navigate = useNavigate();
   const [showIncreasePoolingAmount, setShowIncreasePoolingAmount] = useState(false);
   const isSelfService = delegationStatusDetails.delegatedTo === Pox2Contracts.WrapperFastPool;
   return (
@@ -82,7 +85,11 @@ export function ActivePoolingContent({
               <Address address={poolAddress} />
             </Value>
           </Row>
-          {isSelfService && !showIncreasePoolingAmount && <SelfServiceRows />}
+          {isSelfService && !showIncreasePoolingAmount && (
+            <SelfServiceRows onClick={() => navigate(routes.SELF_SERVICE_EXTEND)}>
+              Extend pooled stacking
+            </SelfServiceRows>
+          )}
           {showIncreasePoolingAmount ? (
             <IncreasePoolingAmount
               handleStopPoolingClick={() => {

src/pages/stacking/pooled-stacking-info/components/self-service-rows.tsx

@@ -1,5 +1,3 @@
-import { useNavigate } from 'react-router-dom';
-
 import { Button } from '@stacks/ui';
 
 import {
@@ -11,12 +9,23 @@ import {
   useGetCoreInfoQuery,
   useGetPoxInfoQuery,
 } from '@components/stacking-client-provider/stacking-client-provider';
-import routes from '@constants/routes';
 
 import { nextExtendWindow } from '../../self-service-extend/utils';
 
-export function SelfServiceRows() {
-  const navigate = useNavigate();
+interface SelfServiceRowsProps {
+  isLoading?: boolean;
+  onClick: React.MouseEventHandler;
+  children: React.ReactNode;
+  showCancleButton?: boolean;
+  onClose?: React.MouseEventHandler;
+}
+export function SelfServiceRows({
+  isLoading,
+  onClick,
+  showCancleButton,
+  onClose,
+  children,
+}: SelfServiceRowsProps) {
   const getPoxInfoQuery = useGetPoxInfoQuery();
   const getCoreInfoQuery = useGetCoreInfoQuery();
   const burnBlockHeight = getCoreInfoQuery.data?.burn_block_height;
@@ -41,12 +50,19 @@ export function SelfServiceRows() {
           <Value>{extendWindow.blocksUntilEnd} blocks</Value>
         </Row>
       )}
-      <Row justifyContent="space-evenly">
+      <Row justifyContent={showCancleButton ? 'space-between' : 'space-evenly'}>
+        {showCancleButton && (
+          <Button mode="tertiary" onClick={onClose}>
+            Cancel
+          </Button>
+        )}
         <Button
+          type="submit"
           isDisabled={tooEarly || tooLate}
-          onClick={() => navigate(routes.SELF_SERVICE_EXTEND)}
+          isLoading={isLoading}
+          onClick={onClick}
         >
-          Extend pooled stacking
+          {children}
         </Button>
       </Row>
     </>

src/pages/stacking/self-service-extend/components/self-service-extend-layout.tsx

@@ -17,6 +17,8 @@ import routes from '@constants/routes';
 import { formatPoxAddressToNetwork } from '@utils/stacking';
 import { toHumanReadableStx } from '@utils/unit-convert';
 
+import { SelfServiceRows } from '../../pooled-stacking-info/components/self-service-rows';
+import { nextExtendWindow } from '../utils';
 import { Stacker } from './choose-stacker';
 import { StackerDetailsRows } from './stacker-details-rows';
 
@@ -92,18 +94,25 @@ export function SelfServiceLayout(props: SelfServiceLayoutProps) {
                     <Text py="loose">Lock your STX for the 1 more cycle.</Text>
                   </>
                 )}
-                <Row m="loose" justifyContent="space-between">
-                  <Button mode="tertiary" onClick={onClose}>
-                    Cancel
-                  </Button>
-                  {!showStackerAddress || showPreview ? (
-                    <Button type="submit" isLoading={isContractCallExtensionPageOpen}>
-                      <Box mr="loose">
-                        <IconLock />
-                      </Box>
-                      Lock STX
+                {!showStackerAddress || showPreview ? (
+                  <SelfServiceRows
+                    isLoading={isContractCallExtensionPageOpen}
+                    onClick={() => {
+                      return;
+                    }}
+                    showCancleButton
+                    onClose={onClose}
+                  >
+                    <Box mr="loose">
+                      <IconLock />
+                    </Box>
+                    Lock STX
+                  </SelfServiceRows>
+                ) : (
+                  <Row m="loose" justifyContent="space-between">
+                    <Button mode="tertiary" onClick={onClose}>
+                      Cancel
                     </Button>
-                  ) : (
                     <Button
                       onClick={e => {
                         e.preventDefault();
@@ -112,8 +121,8 @@ export function SelfServiceLayout(props: SelfServiceLayoutProps) {
                     >
                       Preview
                     </Button>
-                  )}
-                </Row>
+                  </Row>
+                )}
                 {!showStackerAddress && (
                   <Row m="loose" justifyContent="space-evenly">
                     <Button mode="tertiary" onClick={() => setShowStackerAddress(true)}>
@@ -129,3 +138,15 @@ export function SelfServiceLayout(props: SelfServiceLayoutProps) {
     </BaseDrawer>
   );
 }
+
+interface SelfServiceExtendLockButtonProps {
+  isLoading: boolean;
+}
+function SelfServiceExtendButton({ isLoading }: SelfServiceExtendLockButtonProps) {
+  const { extendWindow, tooEarly, tooLate } = nextExtendWindow(
+    burnBlockHeight,
+    getPoxInfoQuery.data
+  );
+
+  return <Button type="submit" isLoading={isLoading}></Button>;
+}