Web3 Status

SketchSystems.spec

Web3 Status
  Web3 Unavailable -> Unavailable 
  Web3 Available -> Uniswap Approved
  Web3 Testnet -> Testnet 

Uniswap Approved
  Approved -> Connected
  Not Approved Mobile -> Approve
  Not Approved Desktop -> Disconnected
  Not Logged In Desktop -> Logged Out

Connect Button Behavior
  Connected*
    Click Switch Account -> Switch Account
  Disconnected
    Click Connect -> Approve
  Logged Out
    Click Connect -> Log In
  Unavailable
    Click Connect -> Get Web3
  Testnet
    Click Connect -> Testnet Warning
  
Connect Flow
  Log In 
    Success -> Approve
    Failure -> Logged Out
  Approve
    Click Approve -> Connected
    Click Reject -> Disconnected
  Switch Account
    Back -> Connected
    Click Wallet connect -> Wallet Connect
    Click Hardware connect -> Hardware Connect
  Get Web3
    Back -> Unavailable
    Install metamask -> Log In
    Click Wallet connect -> Wallet Connect
    Click Hardware connect -> Hardware Connect
  Wallet Connect
    Cancel -> Switch Account
    Scan QR Success -> Connected
    Scan QR Failure -> Wallet Connect
  Hardware Connect
    Cancel -> Get Web3
    Hardware Connect Success -> Connected
    Hardware Connect Failure -> Hardware Connect
  Testnet Warning
    Switch to Mainnet -> Connected

SketchSystems_prototype.js

function render(model){
  var divAttr = {marginTop: '1rem', width: '300px'};
  var buttonState = model.active_states[0].name;

  return $('div', {style: divAttr},
           ('div', ConnectButton(buttonState)),
           ("span", {style: divAttr}, "The current state is: " + model.active_states[0].name)
          );
}

function ConnectButton(connectionState){
  var attrs = {color: 'white', padding: '1rem', borderRadius: '2rem', textAlign: 'center', fontFamily: 'sans-serif', maxWidth: '120px'};
  var text = "Connect"

  if(connectionState == "Connected"){
    attrs.backgroundColor = 'lightGray'
    attrs.color = 'black'
    text = 'Connected'
  } else if(connectionState == "Testnet"){
    attrs.backgroundColor = 'red';
    text = 'Wrong Network'
  } else {
    attrs.backgroundColor = 'blue';
    text = 'Connect'
  }

  return $('div', {style: attrs}, text);
}