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

machine.js

const fns = {

}

async function attemptConnection() {
  return "Thanks!"
}

async function attemptPayment() {
  throw new Error('Crapp!!')
}

const metamaskFlowMachine = Machine({
  id: 'metamaskFlow',
  initial: 'disconnected',
  context: {
    error: undefined
  },
  states: {
    disconnected: {
      on: {
        CONNECT_CLICKED: 'connecting'
      }
    },
    connecting: {
      invoke: {
        id: 'attemptConnection',
        src: attemptConnection,
        onDone: "active",
        onError: {target: "disconnected", actions: assign({error: (ctx,event) => event.data})},
      }
    },
    active: {
      on:{
        PAY_CLICKED: "paying",
        CLOSE_CLICKED: "done",
      }
    },
    paying: {
      invoke: {
        id: 'attemptPayment',
        src: attemptPayment,
        onDone: "thankyou",
        onError: {target: "active", actions:  assign({error: (ctx,event) => event.data})},
      }
    },
    thankyou: {
      on: {
        CLOSE_CLICKED: "active"
      }
    },
    done: {
      type: 'final'
    }
    
  }
}, fns);