fix: rework stacking flow, closes #335

app/api/watch-contract-execution.ts

@@ -23,7 +23,7 @@ export function watchContractExecution(args: WatchContractExecutionArgs) {
         tx.tx_status === 'abort_by_post_condition'
       ) {
         clearInterval(timeoutInterval);
-        return reject(new Error(error?.message || defaultErrorMsg));
+        return reject(error?.message || defaultErrorMsg);
       }
 
       if (tx.tx_status === 'success') {

app/components/home/stacking-begins-soon-card.tsx

@@ -8,7 +8,19 @@ interface StackingBeginsSoonCardProps {
 export const StackingBeginsSoonCard: FC<StackingBeginsSoonCardProps> = ({
   blocksTillNextCycle,
 }) => (
-  <Flex flexDirection="column" flex={1} justifyContent="center" textAlign="center">
+  <Flex
+    flexDirection="column"
+    flex={1}
+    justifyContent="center"
+    textAlign="center"
+    alignItems="center"
+    mt="extra-loose"
+    borderRadius="8px"
+    boxShadow="0px 1px 2px rgba(0, 0, 0, 0.04);"
+    border="1px solid #F0F0F5"
+    px="loose"
+    minHeight="180px"
+  >
     <Box>
       <Text display="block" textStyle="body.small" color="ink.600" width="100%">
         Stacking will begin in the next cycle

app/components/home/stacking-card.tsx

@@ -0,0 +1,87 @@
+import React, { FC } from 'react';
+import { useSelector } from 'react-redux';
+import { Flex, Box, Text } from '@blockstack/ui';
+
+import { WaffleChart } from '@components/chart/waffle-chart';
+import { RootState } from '@store/index';
+import {
+  selectStackerInfo,
+  selectNextCycleInfo,
+  selectPoxInfo,
+} from '../../store/stacking/stacking.reducer';
+
+type StackingCardProps = any;
+
+export const StackingCard: FC<StackingCardProps> = () => {
+  const { stackingDetails, stackerInfo, nextCycleInfo } = useSelector((state: RootState) => ({
+    stackingDetails: selectPoxInfo(state),
+    stackerInfo: selectStackerInfo(state),
+    nextCycleInfo: selectNextCycleInfo(state),
+  }));
+
+  return (
+    <Flex
+      flexDirection="column"
+      mt="extra-loose"
+      borderRadius="8px"
+      boxShadow="0px 1px 2px rgba(0, 0, 0, 0.04);"
+      border="1px solid #F0F0F5"
+      px="loose"
+      minHeight="180px"
+    >
+      {stackerInfo?.isCurrentlyStacking && (
+        <Box>
+          <Text display="block" textStyle="body.large.medium" mt="base-loose" textAlign="center">
+            Stacking progress
+          </Text>
+          <Flex justifyContent="space-between" mt="base">
+            <Text textStyle="body.small.medium">Current stacking cycle</Text>
+          </Flex>
+          <Flex
+            maxWidth={[null, null, '325px']}
+            flexWrap="wrap"
+            alignContent="flex-start"
+            mt="tight"
+          >
+            <WaffleChart
+              points={[
+                ...Array.from({
+                  length:
+                    (stackingDetails?.reward_cycle_length || 0) -
+                    (nextCycleInfo?.blocksToNextCycle || 0),
+                }).map(() => true),
+                ...Array.from({ length: nextCycleInfo?.blocksToNextCycle || 0 }).map(() => false),
+              ]}
+            />
+          </Flex>
+          <Box mr="2px">
+            <Flex justifyContent="space-between" mt="base">
+              <Text textStyle="body.small.medium">Blocks until next cycle</Text>
+              <Text textStyle="body.small">{nextCycleInfo?.blocksToNextCycle}</Text>
+            </Flex>
+            <Flex justifyContent="space-between" mt="tight">
+              <Text textStyle="body.small.medium">You're stacking for</Text>
+              <Text textStyle="body.small">
+                {stackerInfo?.lockPeriod} cycle{stackerInfo.lockPeriod > 1 ? 's' : ''}
+              </Text>
+            </Flex>
+            {stackerInfo.lockPeriod > 1 && (
+              <Flex justifyContent="space-between" mt="tight">
+                <Text textStyle="body.small.medium">Current cycle</Text>
+                <Text textStyle="body.small">
+                  {stackerInfo.currentCycleOfTotal} of {stackerInfo?.lockPeriod}
+                </Text>
+              </Flex>
+            )}
+            <Flex flexDirection="column" mt="tight" mb="base-loose">
+              <Text textStyle="body.small.medium">Reward to be paid to</Text>
+              <Text as="code" fontSize="13px" mt="tight" color="ink.600">
+                {stackerInfo?.btcAddress}
+              </Text>
+            </Flex>
+          </Box>
+        </Box>
+      )}
+    </Flex>
+  );
+};

app/components/home/stacking-loading.tsx

@@ -0,0 +1,17 @@
+import React, { FC } from 'react';
+import { Flex, Spinner } from '@blockstack/ui';
+
+export const StackingLoading: FC = () => (
+  <Flex
+    alignItems="center"
+    justifyContent="center"
+    mt="extra-loose"
+    borderRadius="8px"
+    boxShadow="0px 1px 2px rgba(0, 0, 0, 0.04);"
+    border="1px solid #F0F0F5"
+    px="loose"
+    minHeight="180px"
+  >
+    <Spinner size="sm" color="ink.300" />
+  </Flex>
+);

app/components/home/stacking-promo-card.tsx

@@ -1,15 +1,16 @@
 import React, { FC } from 'react';
 import { Box, Flex, Text, Button } from '@blockstack/ui';
 
-import btcPodium from '../../assets/images/btc-podium.svg';
 import { openExternalLink } from '@utils/external-links';
 import { BUY_STX_URL } from '@constants/index';
+import { toHumanReadableStx } from '@utils/unit-convert';
+import btcPodium from '../../assets/images/btc-podium.svg';
 
 interface StackingPromoCardProps {
-  minRequiredStx: number;
+  minRequiredMicroStx: number;
 }
 
-export const StackingPromoCard: FC<StackingPromoCardProps> = ({ minRequiredStx }) => (
+export const StackingPromoCard: FC<StackingPromoCardProps> = ({ minRequiredMicroStx }) => (
   <Box
     mt="extra-loose"
     borderRadius="8px"
@@ -22,7 +23,8 @@ export const StackingPromoCard: FC<StackingPromoCardProps> = ({ minRequiredStx }
         Earn Bitcoin rewards with Stacking
       </Text>
       <Text display="block" mt="tight" textAlign="center" maxWidth="320px" mx="auto">
-        You can earn Bitcoin by temporarily locking {Math.ceil(minRequiredStx)} STX or more
+        You can earn Bitcoin by temporarily locking {toHumanReadableStx(minRequiredMicroStx)} or
+        more
       </Text>
       <Button
         size="md"

app/components/home/transaction-list/transaction-list-item-pending.tsx

@@ -44,15 +44,16 @@ export const TransactionListItemPending: FC<TransactionListItemPendingProps> = p
       <TransactionIcon variant="pending" mr="base-loose" />
       <Box flex={1}>
         <Text textStyle="body.large.medium" display="block">
-          Sending
+          {tx.isStackingCall ? 'Initiating Stacking…' : 'Sending'}
         </Text>
         <Text textStyle="body.small" color="ink.600">
           {tx.tx_id.substr(0, 28)}…
         </Text>
       </Box>
       <Box textAlign="right">
         <Text textStyle="body.large" color="ink.900" display="block">
-          −{toHumanReadableStx(tx.amount)}
+          {tx.isStackingCall ? '' : '-'}
+          {toHumanReadableStx(tx.amount)}
         </Text>
         <Text textStyle="body.small" color="ink.600">
           Pending

app/components/home/transaction-list/transaction-list-item.tsx

@@ -20,7 +20,7 @@ import { sumStxTxTotal } from '@utils/sum-stx-tx-total';
 import { TransactionIcon, TransactionIconVariants } from './transaction-icon';
 import { toHumanReadableStx } from '@utils/unit-convert';
 import { makeExplorerLink } from '@utils/external-links';
-import { getRecipientAddress, isLockTx } from '@utils/tx-utils';
+import { getRecipientAddress, isStackingTx } from '@utils/tx-utils';
 
 import {
   createTxListContextMenu,
@@ -61,18 +61,24 @@ export const TransactionListItem: FC<TransactionListItemProps> = props => {
     if (tx.tx_type === 'token_transfer') {
       return direction;
     }
-    if (tx.tx_type === 'contract_call' && isLockTx(tx, poxInfo?.contract_id)) {
+    if (tx.tx_type === 'contract_call' && isStackingTx(tx, poxInfo?.contract_id)) {
       return 'locked';
     }
     return 'default';
   }, [direction, poxInfo?.contract_id, tx]);
 
   const transactionTitle = useCallback(() => {
     if (tx.tx_type === 'token_transfer') return capitalize(direction);
+    if (tx.tx_type === 'contract_call' && isStackingTx(tx, poxInfo?.contract_id)) {
+      if (tx.tx_status === 'pending') return 'Initiating Stacking';
+      if (tx.tx_status === 'abort_by_response' || tx.tx_status === 'abort_by_post_condition')
+        return 'Stacking initiation failed';
+      return 'Stacking initiated successfully';
+    }
     return capitalize(tx.tx_type).replace('_', ' ');
-  }, [direction, tx.tx_type]);
+  }, [direction, poxInfo?.contract_id, tx]);
 
-  const sumPrefix = direction === 'sent' ? '−' : '';
+  const sumPrefix = direction === 'sent' && !isStackingTx(tx, poxInfo?.contract_id) ? '−' : '';
   const memo =
     tx.tx_type === 'token_transfer' &&
     Buffer.from(

app/constants/index.ts

@@ -2,13 +2,15 @@ export const MNEMONIC_ENTROPY = 256;
 
 type Environments = 'development' | 'testing' | 'production';
 
+export const STX_DECIMAL_PRECISION = 6;
+
 export const ENV = (process.env.NODE_ENV ?? 'production') as Environments;
 
 export const BUY_STX_URL = 'https://coinmarketcap.com/currencies/blockstack/markets';
 
 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 DEFAULT_STACKS_NODE_URL = 'https://stacks-node-api.blockstack.org';
 
 export const TREZOR_HELP_URL =
   'https://www.blockstack.org/questions/how-can-i-use-my-trezor-device-with-the-stacks-wallet';

app/hooks/use-ledger.ts

@@ -34,7 +34,6 @@ export function useLedger() {
           const [error, t] = await safeAwait(TransportNodeHid.open(event.descriptor));
 
           if (error) {
-            console.log(error);
             setUsbError('Unable to connect to device. You may need to configure your udev rules.');
             return;
           }