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

machine.js

const onboardingMachineConfig = Machine(
  {
    key: 'onboarding',
    initial: 'disconnected',
    context: {
      ensLabel: '',
      walletAddress: '',
      writeAmount: 0,
      isTokenCanvasLoaded: false,
      isENSAvailable: false,
    },
    states: {
      disconnected: {
        initial: 'loading',
        states: {
          loading: {
            on: {
              TOKEN_LOAD: 'ready',
            },
          },
          ready: {
            on: {
              CONNECT_WALLET: 'connecting',
              APPLY: 'applying',
            },
          },
          applying: {
            on: {
              CONNECT_WALLET: 'connecting',
            },
          },
          connecting: {
            invoke: {
              src: 'connectWallet',
              onDone: {
                target: 'success',
                actions: ['setWallet'],
              },
            },
          },
          success: {
            type: 'final',
          },
        },
        onDone: [
          {
            target: '#onboarding.connected',
            cond: 'hasWriteTokens',
          },
          {
            target: '#onboarding.connected.waitlisted',
          },
        ],
      },
      connected: {
        initial: 'ready',
        states: {
          ready: {
            on: {
              INPUT_ENS_LABEL: { actions: 'setENSLabel' },
              REGISTER_ENS: { target: 'burning', cond: 'canRegisterENS' },
            },
          },
          burning: {
            initial: 'loading',
            invoke: {
              src: 'registerENS',
              onDone: {
                target: 'burning.confirm',
              },
            },
            states: {
              loading: {},
              confirm: {
                // TODO: build confirmation step
                on: {
                  '': 'finishing',
                }
              },
              // Wait for transition to end
              finishing: {
                on: {
                  BURNING_FINISH: '#onboarding.connected.registered',
                },
              },
            },
            // onDone: '#onboarding.connected.registered',
          },
          registered: {},
          waitlisted: {},
        },
      },
    },
  },
  {
    guards: {
      isTokenCanvasLoaded: (context) => context.isTokenCanvasLoaded,
      hasWriteTokens: (context) => context.writeAmount > 0,
      hasENS: (context) => !!context.ensLabel,
      isENSAvailable: (context) => context.isENSAvailable,
      canRegisterENS: (context) => context.isENSAvailable && !!context.ensLabel,
    },
    services: {
      connectWallet: () =>
        new Promise((resolve) => {
          console.log('Connecting to wallet')
          setTimeout(() => {
            resolve({ address: '0x2iEjiwj39aI93a3fFLK', write: 1 })
          }, 1000)
        }),
      registerENS: () =>
        new Promise((resolve) => {
          console.log('Burning token')
          setTimeout(() => {
            resolve(true)
          }, 5000)
        }),
    },
    actions: {
      setTokenCanvasIsLoaded: assign({
        isTokenCanvasLoaded: true,
      }),
      setWallet: assign((_, event) => {
        if ('done.invoke.connectWallet' === event.type) {
          return { walletAddress: event.data.address, writeAmount: event.data.write }
        }
      }),
      setENSLabel: assign((_, event) => {
        if (event.type === 'INPUT_ENS_LABEL') {
          return { ensLabel: event.data.ensLabel, isENSAvailable: true }
        }
      }),
    },
  }
)