All files / app/modals/stacking stacking-modal.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
/* eslint-disable @typescript-eslint/no-unsafe-argument */
import { watchForNewTxToAppear } from '@api/watch-tx-to-appear-in-api';
import routes from '@constants/routes.json';
import { useApi } from '@hooks/use-api';
import { useBroadcastTx } from '@hooks/use-broadcast-tx';
import { useMempool } from '@hooks/use-mempool';
import { useStackingClient } from '@hooks/use-stacking-client';
import { TxSigningModal } from '@modals/tx-signing-modal/tx-signing-modal';
import { PostCoreNodeTransactionsError } from '@stacks/stacks-blockchain-api-types';
import { StacksTransaction } from '@stacks/transactions';
import { RootState } from '@store/index';
import { activeStackingTx, selectCoreNodeInfo, selectPoxInfo } from '@store/stacking';
import { safeAwait } from '@utils/safe-await';
import { BigNumber } from 'bignumber.js';
import React, { FC, useState, useMemo } from 'react';
import { useHotkeys } from 'react-hotkeys-hook';
import { useSelector, useDispatch } from 'react-redux';
import { useHistory } from 'react-router-dom';
 
interface StackingModalProps {
  poxAddress: string;
  numCycles: number;
  amountToStack: BigNumber;
  fee: BigNumber;
  onClose(): void;
}
export const StackingModal: FC<StackingModalProps> = props => {
  const { onClose, numCycles, poxAddress, amountToStack, fee } = props;
 
  const dispatch = useDispatch();
  const history = useHistory();
  useHotkeys('esc', () => onClose());
 
  const { stackingClient } = useStackingClient();
  const { broadcastTx, isBroadcasting } = useBroadcastTx();
  const { refetch } = useMempool();
  const api = useApi();
 
  const { poxInfo, coreNodeInfo } = useSelector((state: RootState) => ({
    poxInfo: selectPoxInfo(state),
    coreNodeInfo: selectCoreNodeInfo(state),
  }));
 
  const [nodeResponseError, setNodeResponseError] = useState<PostCoreNodeTransactionsError | null>(
    null
  );
  const stackingTxOptions = useMemo(() => {
    Iif (!poxInfo) throw new Error('poxInfo not defined');
    Iif (!coreNodeInfo) throw new Error('Stacking requires coreNodeInfo');
    const stackingTxOptions = stackingClient.getStackOptions({
      amountMicroStx: amountToStack.toString(),
      poxAddress,
      cycles: numCycles,
      contract: poxInfo.contract_id,
      burnBlockHeight: coreNodeInfo.burn_block_height,
    });
    return { ...stackingTxOptions, fee: fee.toString() };
  }, [amountToStack, coreNodeInfo, numCycles, poxAddress, poxInfo, stackingClient, fee]);
 
  const stackStx = (signedTx: StacksTransaction) =>
    broadcastTx({
      async onSuccess(txId) {
        dispatch(activeStackingTx({ txId }));
        await safeAwait(watchForNewTxToAppear({ txId, nodeUrl: api.baseUrl }));
        await refetch();
        history.push(routes.HOME);
      },
      onFail: err => {
        Iif (err) setNodeResponseError(err);
      },
      tx: signedTx,
    });
 
  return (
    <TxSigningModal
      action="stack"
      txDetails={stackingTxOptions}
      isBroadcasting={isBroadcasting}
      error={nodeResponseError}
      onTryAgain={() => setNodeResponseError(null)}
      onTransactionSigned={tx => stackStx(tx)}
      onClose={onClose}
    />
  );
};