feat: fetch pox details

app/api/api.ts

@@ -5,6 +5,7 @@ import {
   TransactionResults,
   MempoolTransaction,
   AddressBalanceResponse,
+  CoreNodePoxResponse,
 } from '@blockstack/stacks-blockchain-api-types';
 
 export class Api {
@@ -29,9 +30,14 @@ export class Api {
   }
 
   async getFaucetStx(address: string) {
-    return axios.post(urljoin(this.baseUrl, `/extended/v1/debug/faucet?address=${address}`), {
-      address,
-    });
+    return axios.post(
+      urljoin(this.baseUrl, `/extended/v1/debug/faucet?address=${address}&stacking=true`),
+      { address }
+    );
+  }
+
+  async getPoxInfo() {
+    return axios.get<CoreNodePoxResponse>(urljoin(this.baseUrl, `/v2/pox`));
   }
 
   async getNodeStatus() {

app/constants/index.ts

@@ -10,14 +10,12 @@ export const STATUS_PAGE_URL = 'http://status.test-blockstack.com';
 
 export const DEFAULT_STACKS_NODE_URL = 'https://stacks-node-api.krypton.blockstack.org';
 
-export const NETWORK = process.env.STX_NETWORK;
+export const NETWORK = process.env.STX_NETWORK as 'mainnet' | 'testnet';
 
 export const MAX_STACKING_CYCLES = 12;
 
 export const MIN_STACKING_CYCLES = 1;
 
-export const REQUIRED_STX_FOR_STACKING = 100_000;
-
 export const SUPPORTED_BTC_ADDRESS_FORMATS = ['p2pkh', 'p2sh'] as const;
 
 export const features = {

app/modals/stacking/stacking-modal-last-step.tsx

@@ -0,0 +1,40 @@
+import React, { FC } from 'react';
+import { LargeCheckmark } from '@components/icons/large-checkmark';
+import { Button, Flex, Modal, Text } from '@blockstack/ui';
+import { useHotkeys } from 'react-hotkeys-hook';
+import { WalletType } from '../../types/wallet-type';
+
+interface StackingModalProps {
+  walletType: WalletType;
+  onClose(): void;
+}
+
+export const StackingModal: FC<StackingModalProps> = props => {
+  const { onClose } = props;
+  useHotkeys('esc', onClose, [onClose]);
+
+  return (
+    <Modal isOpen maxWidth="488px" minWidth="488px" pt="80px" pb="extra-loose">
+      <Flex justifyContent="center">
+        <LargeCheckmark />
+      </Flex>
+      <Text textStyle="display.small" display="block" textAlign="center" mt="extra-loose">
+        You locked your STX for 2 weeks
+      </Text>
+      <Text
+        textStyle="body.large"
+        display="block"
+        textAlign="center"
+        mt="base-tight"
+        mx="extra-loose"
+      >
+        You’ll receive Bitcoin twice, at the end of every cycle.
+      </Text>
+      <Flex justifyContent="flex-end">
+        <Button mt="extra-loose" onClick={onClose} mr="extra-loose">
+          Close
+        </Button>
+      </Flex>
+    </Modal>
+  );
+};

app/modals/stacking/stacking-modal-layout.tsx

@@ -0,0 +1,47 @@
+import React, { FC } from 'react';
+import { Flex, Text, CloseIcon, Button, ButtonProps } from '@blockstack/ui';
+
+export const modalStyle = {
+  minWidth: ['100%', '488px'],
+};
+
+interface StackingModalHeaderProps {
+  onSelectClose: () => void;
+}
+
+export const StackingModalHeader: FC<StackingModalHeaderProps> = ({ children, onSelectClose }) => (
+  <Flex
+    height="84px"
+    px="extra-loose"
+    alignItems="center"
+    borderBottom="1px solid #F0F0F5"
+    justifyContent="space-between"
+  >
+    <Text as="h2" textStyle="display.small">
+      {children}
+    </Text>
+    <Button
+      type="button"
+      right="-16px"
+      onClick={onSelectClose}
+      variant="unstyled"
+      cursor="pointer"
+      p="tight"
+      _focus={{ backgroundColor: 'ink.200' }}
+    >
+      <CloseIcon size="12px" color="ink.400" />
+    </Button>
+  </Flex>
+);
+
+export const StackingModalFooter: FC = ({ children }) => (
+  <Flex justifyContent="flex-end" px="extra-loose" py="base" borderTop="1px solid #F0F0F5">
+    {children}
+  </Flex>
+);
+
+export const StackingModalButton: FC<ButtonProps> = ({ children, ...props }) => (
+  <Button ml="base-tight" size="lg" minWidth="70px" {...(props as any)}>
+    {children}
+  </Button>
+);