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

machine.js

const selectionMachine = Machine({
  id: 'selection',
  context: {
    stake: '',
  },
  initial: 'active',
  states: {
    active: {
      initial: 'idle',
      states: {
        idle: {
          on: {
            FOCUS_STAKE: 'changingStake',
            TOGGLE_ACTIVE: '#selection.inactive',
          },
        },
        changingStake: {
          on: {
            CHANGE_STAKE: {
              actions: 'changeStake',
            },
            BLUR_STAKE: 'idle',
            TOGGLE_ACTIVE: '#selection.inactive',
          },
        },
      },
    },
    inactive: {
      initial: 'idle',
      states: {
        idle: {
          on: {
            FOCUS_STAKE: 'changingStake',
            TOGGLE_ACTIVE: '#selection.active',
          },
        },
        changingStake: {
          on: {
            CHANGE_STAKE: {
              actions: 'changeStake',
            },
            BLUR_STAKE: 'idle',
            TOGGLE_ACTIVE: '#selection.active',
          },
        },
      },
    },
  },
}, {
  actions: {
    changeStake: assign({
      stake: (_, evt) => evt.stake,
    }),
  },
});