Generated by XState Viz: https://xstate.js.org/viz

machine.js

// Available variables:
// - Machine
// - interpret
// - assign
// - send
// - sendParent
// - spawn
// - raise
// - actions
// - XState (all XState exports)

function sendTxMachine(transactionConfirmationBlocks) {
  function isConfirmed({confirmations, txReceipt}) {
    return txReceipt && confirmations.length >= transactionConfirmationBlocks;
  }

  return Machine({
    id: 'sendTransaction',
    initial: 'unsent',
    context: {
      confirmations: [],
      error: null,
      txReceipt: null
    },
    states: {
      unsent: {
        on: {
          SEND: 'sending'
        }
      },
      sending: {
        on: {
          ERROR_SENDING: {
            target: 'failure',
            actions: assign({
              error: (context, event) => {
                // const { error } = event;
                // return error;
                // for demo:
                return {};
              }
            })
          },
          SENT: 'pending'
        }
      },
      pending: {
        on: {
          '': [
            { target: 'confirmed', cond: isConfirmed }
          ],
          CONFIRMATION: {
            target: 'pending',
            actions: assign({
              confirmations: (context, event) => {
                // const { number, receipt } = event;
                // return { number, receipt };
                // for demo:
                return context.confirmations.concat({});
              }
            })
          },
          ERROR_OUT_OF_GAS: {
            target: 'failure',
            actions: assign({
              error: (context, event) => {
                // const { error } = event;
                // return error;
                // for demo:
                return {};
              },
              txReceipt: (context, event) => {
                // const { receipt } = event;
                // return receipt;
                // for demo:
                return {};
              }
            })
          },
          RECEIPT: {
            target: 'pending',
            actions: assign({
              txReceipt: (context, event) => {
                // const { receipt } = event;
                // return receipt;
                // for demo:
                return {};
              }
            })
          }
        }
      },
      confirmed: {
        type: 'final'
      },
      failure: {
        type: 'final'
      }
    }
  });
}

const transaction = sendTxMachine(24);

sendTransactionMachine.js

// Available variables:
// - Machine
// - interpret
// - assign
// - send
// - sendParent
// - spawn
// - raise
// - actions
// - XState (all XState exports)

function sendTxMachine(transactionConfirmationBlocks) {
  function isConfirmed({confirmations, txReceipt}) {
    return txReceipt && confirmations.length >= transactionConfirmationBlocks;
  }

  return Machine({
    id: 'sendTransaction',
    initial: 'unsent',
    context: {
      confirmations: [],
      error: null,
      txReceipt: null
    },
    states: {
      unsent: {
        on: {
          SEND: 'sending'
        }
      },
      sending: {
        on: {
          ERROR_SENDING: {
            target: 'failure',
            actions: assign({
              error: (context, event) => {
                // const { error } = event;
                // return error;
                // for demo:
                return {};
              }
            })
          },
          SENT: 'pending'
        }
      },
      pending: {
        on: {
          '': [
            { target: 'confirmed', cond: isConfirmed }
          ],
          CONFIRMATION: {
            target: 'pending',
            actions: assign({
              confirmations: (context, event) => {
                // const { number, receipt } = event;
                // return { number, receipt };
                // for demo:
                return context.confirmations.concat({});
              }
            })
          },
          ERROR_OUT_OF_GAS: {
            target: 'failure',
            actions: assign({
              txReceipt: (context, event) => {
                // const { receipt } = event;
                // return receipt;
                // for demo:
                return {};
              }
            })
          },
          RECEIPT: {
            target: 'pending',
            actions: assign({
              txReceipt: (context, event) => {
                // const { receipt } = event;
                // return receipt;
                // for demo:
                return {};
              }
            })
          }
        }
      },
      confirmed: {
        type: 'final'
      },
      failure: {
        type: 'final'
      }
    }
  });
}

const transaction = sendTxMachine(24);