All files / app/modals/delegated-stacking delegated-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
87
88
89
90
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
/* eslint-disable @typescript-eslint/no-unsafe-argument */
import { watchForNewTxToAppear } from '@api/watch-tx-to-appear-in-api';
import { POOLED_STACKING_TX_SIZE_BYTES } from '@constants/index';
import routes from '@constants/routes.json';
import { useApi } from '@hooks/use-api';
import { useBroadcastTx } from '@hooks/use-broadcast-tx';
import { useCalculateFee } from '@hooks/use-calculate-fee';
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 { ContractCallOptions, StacksTransaction } from '@stacks/transactions';
import { RootState } from '@store/index';
import { 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 } from 'react-redux';
import { useHistory } from 'react-router-dom';
 
interface StackingModalProps {
  delegateeStxAddress: string;
  amountToStack: BigNumber;
  burnHeight?: number;
  onClose(): void;
}
 
export const DelegatedStackingModal: FC<StackingModalProps> = props => {
  const { onClose, delegateeStxAddress, amountToStack, burnHeight } = props;
 
  const history = useHistory();
  useHotkeys('esc', () => onClose());
 
  const { stackingClient } = useStackingClient();
  const { broadcastTx, isBroadcasting } = useBroadcastTx();
 
  const { refetch } = useMempool();
  const calcFee = useCalculateFee();
 
  const api = useApi();
 
  const { poxInfo } = useSelector((state: RootState) => ({
    poxInfo: selectPoxInfo(state),
  }));
 
  const [nodeResponseError, setNodeResponseError] = useState<PostCoreNodeTransactionsError | null>(
    null
  );
 
  const delegationTxOptions = useMemo((): ContractCallOptions => {
    Iif (!poxInfo) throw new Error('`poxInfo` undefined');
    console.log(amountToStack.toString());
    return {
      ...stackingClient.getDelegateOptions({
        amountMicroStx: amountToStack.toString(),
        contract: poxInfo.contract_id,
        delegateTo: delegateeStxAddress,
        untilBurnBlockHeight: burnHeight,
      }),
      fee: calcFee(POOLED_STACKING_TX_SIZE_BYTES).toString(),
    };
  }, [amountToStack, burnHeight, calcFee, delegateeStxAddress, poxInfo, stackingClient]);
 
  const delegateStx = (signedTx: StacksTransaction) =>
    broadcastTx({
      onSuccess: async 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="initiate pooling"
      txDetails={delegationTxOptions}
      isBroadcasting={isBroadcasting}
      error={nodeResponseError}
      onTryAgain={() => setNodeResponseError(null)}
      onTransactionSigned={tx => delegateStx(tx)}
      onClose={onClose}
    />
  );
};