User subscription*

Authenticated.png

AuthenticatedByLinkedIn?.png

SketchSystems.spec

User subscription*
  LinkedIn
    Unregistered*
      RegisterWithLinkedIn -> AuthenticatedByLinkedIn?
    AuthenticatedByLinkedIn?
      hasAllowedAccess -> Authenticated
      hasRefusedAccess -> Unregistered 
    Authenticated
      SignInMetamask -> ConnectedWithMetamask?
      Logout -> Unregistered
  
  Metamask
    ConnectedWithMetamask?
      isConnected -> MetamaskAvailable
      isNotConnected -> MetamaskNotAvailable
    MetamaskNotAvailable
      SignInMetamask -> ConnectedWithMetamask?
    MetamaskAvailable
      fillEthAddress -> EthValidatedByTML?
      disconnectMetamask -> ConnectedWithMetamask?
      
    EthValidatedByTML?
      addressIsValid -> StartupForm
      addressIsNotValid -> MetamaskAvailable
    
  StartupForm
    Logout -> Unregistered
    SomeFormValueTyped
    ValidateForm 

SketchSystems_prototype.js

function render(model){
  let current_state_name = model.active_states[0].name;
  if (model.active_states[0].image_url) {
  return $('div',
           $("h1",
           {style: {color: "darkBlue"}},
           `The current state is: ${current_state_name}`),
           $("img", { src: model.active_states[0].image_url })
          );
  } else {
    return $('div',
           $("h1",
           {style: {color: "darkBlue"}},
           `The current state is: ${current_state_name}`)
          );
  }
}

Unregistered.png