My Rewards - Summary Block

SketchSystems.spec

My Rewards - Summary Block
  Regular States
    Onboarding*
      reward created -> Pending
      reward created but missing cc -> Action Needed
      text: "You don't have any rewards"

    Pending
      reward paid -> Rewarded
      text: "You have a pending reward"

    You just received a reward
      7 days passed -> You dont have any recent reward
      
    You dont have any recent reward
      reward created -> You have a pending reward
      reward created but missing cc -> Action Needed
  
  Action Needed
    Credit Card Missing
      add credit card -> You have a pending reward

SketchSystems_prototype.js

function render(model){
  let current_state_name = model.active_states[0].name;
  return $("div",
           {style: 
            {
              color: "#383838",
              backgroundColor: "#f7f7f7",
              padding: "20px",
              display: "flex",
              margin: "20px",
              borderRadius: "4px",
              fontFamily: "BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif",
              fontWeight: "700",
              fontSize: "1.4em"
            }
           },
           `
      ${current_state_name}`);
}