Improved the navbar and the metamask events handling

[vcheeney]

• Improved the styling of the user information in the navbar
• Made the account automatically switch when the users switches account in metamask (ex: in the register page)
• Made the app react to chain switches live (ex: the user switch chain in the register page)
• Added a logout button (it's normal if the user is still logged if he manually refreshes the page 👉 Allow dapp to disconnect accounts MetaMask/metamask-extension#8990) and prepared the ground to make the call to destroy the user session on logout

[vcheeney]

In the preview video:

• Voter 1 has already voted, therefore he gets redirected from the register page to the results page
• When voter 2 and 3 are selected in the register page, the registering address automatically gets properly set
• When the user is on the /errors/ballot-not-found page and selects a chain which has the contract, he gets redirected to the registering pages.

better-navbar-and-redirections.mp4

[vcheeney]

Dans EthereumContext.tsx:

  function handleAccountsChanged(accounts: string[]) {
    if (!accounts.length) {
      logoutEthereumAccount();
    } else {
      setAccount(accounts[0]);
      // TODO: Destroy session / login the other account and setup new session?
    }
  }

  function logoutEthereumAccount() {
    setAccount(null);
    // TODO: Destroy session
  }

J'ai pas beaucoup joué avec les cookies et tout ça encore dans ma carrière mais j'ai mis deux comments sur ce que je pense qu'il devrait y avoir comme logique quand le user disconnect son MetaMask ou switch de compte comme on le voit dans le vidéo. J'aimerais savoir ce que tu en penses / idées d'implémentation. 🙂 Si tu veux le setup en même temps que de checker pourquoi l'app fait deux calls à /me fait toi plaisir. 👌

[antoinegag]

Good stuff as usual 🔥 🚀

[antoinegag]

si tu fais useState<HTMLElement>(); automatiquement le type ça va être HTMLElement | undefined

[vcheeney]

Sick! 😀

[antoinegag]

Dans EthereumContext.tsx:

  function handleAccountsChanged(accounts: string[]) {
    if (!accounts.length) {
      logoutEthereumAccount();
    } else {
      setAccount(accounts[0]);
      // TODO: Destroy session / login the other account and setup new session?
    }
  }

  function logoutEthereumAccount() {
    setAccount(null);
    // TODO: Destroy session
  }

J'ai pas beaucoup joué avec les cookies et tout ça encore dans ma carrière mais j'ai mis deux comments sur ce que je pense qu'il devrait y avoir comme logique quand le user disconnect son MetaMask ou switch de compte comme on le voit dans le vidéo. J'aimerais savoir ce que tu en penses / idées d'implémentation. 🙂 Si tu veux le setup en même temps que de checker pourquoi l'app fait deux calls à /me fait toi plaisir. 👌

Yeah thanks pour les pointers, je vais faire ça exactement dans ses fonctions pour sync avec le state de login de Ethereum, si tu veux je pourrai t'expliquer vite vite comment l'auth fonctionne, c'est pas très compliqué.

[vcheeney]

Dans EthereumContext.tsx:

  function handleAccountsChanged(accounts: string[]) {
    if (!accounts.length) {
      logoutEthereumAccount();
    } else {
      setAccount(accounts[0]);
      // TODO: Destroy session / login the other account and setup new session?
    }
  }

  function logoutEthereumAccount() {
    setAccount(null);
    // TODO: Destroy session
  }

J'ai pas beaucoup joué avec les cookies et tout ça encore dans ma carrière mais j'ai mis deux comments sur ce que je pense qu'il devrait y avoir comme logique quand le user disconnect son MetaMask ou switch de compte comme on le voit dans le vidéo. J'aimerais savoir ce que tu en penses / idées d'implémentation. 🙂 Si tu veux le setup en même temps que de checker pourquoi l'app fait deux calls à /me fait toi plaisir. 👌

Yeah thanks pour les pointers, je vais faire ça exactement dans ses fonctions pour sync avec le state de login de Ethereum, si tu veux je pourrai t'expliquer vite vite comment l'auth fonctionne, c'est pas très compliqué.

Nice avec plaisir! J'ai regardé rapidement mais je suis toujours willing d'en apprendre plus, on pourra regarder ça mardi soir prochain ou un autre moment si ça te convient mieux. 🙃