Add supported chain alert, removed unneeded chains

Author: maxpetretta

README.md

@@ -1,8 +1,10 @@
 # twitt3r.xyz
 This repo contains the source code for [Twitt3r](https://twitt3r.xyz), a decentralized Twitter clone built on the [Ethereum blockchain](https://ethereum.org/en/).  The project utilizes a custom smart contract for message storage, and [ENS lookups](https://ens.domains/) for profile information.  It is deployed to the [Goerli](https://goerli.etherscan.io/address/0x3493B7ABE5e6E142D632e6596bc550A73c87Ee79) and [Ropsten](https://ropsten.etherscan.io/address/0x3493B7ABE5e6E142D632e6596bc550A73c87Ee79) testnets.
 
+**Want to learn more?  Read all the details in [this blog post!](https://maxpetretta.com/blog/twitt3r)**
+
 ## Demo
-<img src="./demo.gif" alt="A quick 60 second demo of twitt3r.xyz" title="Twitt3r demo gif">
+[![A quick 60 second demo of twitt3r.xyz](./demo.gif)](https://twitt3r.xyz)
 
 ## Tech Stack
 Built with the following technologies:

hardhat/.env.example

@@ -1,7 +1,7 @@
-RINKEBY_INFURA_URL=https://rinkeby.infura.io/v3/<PROJECT_ID>
+GOERLI_INFURA_URL=https://goerli.infura.io/v3/<PROJECT_ID>
 ROPSTEN_INFURA_URL=https://ropsten.infura.io/v3/<PROJECT_ID>
+RINKEBY_INFURA_URL=https://rinkeby.infura.io/v3/<PROJECT_ID>
 KOVAN_INFURA_URL=https://kovan.infura.io/v3/<PROJECT_ID>
-GOERLI_INFURA_URL=https://goerli.infura.io/v3/<PROJECT_ID>
 OP_KOVAN_INFURA_URL=https://optimism-kovan.infura.io/v3/<PROJECT_ID>
 OPTIMISM_INFURA_URL=https://optimism-mainnet.infura.io/v3/<PROJECT_ID>
 PRIVATE_KEY=<PRIVATE_KEY>

hardhat/hardhat.config.js

@@ -14,20 +14,20 @@ module.exports = {
   defaultNetwork: "localhost",
   networks: {
     localhost: {},
-    rinkeby: {
-      url: process.env.RINKEBY_INFURA_URL,
+    goerli: {
+      url: process.env.GOERLI_INFURA_URL,
       accounts: [process.env.PRIVATE_KEY],
     },
     ropsten: {
       url: process.env.ROPSTEN_INFURA_URL,
       accounts: [process.env.PRIVATE_KEY],
     },
-    kovan: {
-      url: process.env.KOVAN_INFURA_URL,
+    rinkeby: {
+      url: process.env.RINKEBY_INFURA_URL,
       accounts: [process.env.PRIVATE_KEY],
     },
-    goerli: {
-      url: process.env.GOERLI_INFURA_URL,
+    kovan: {
+      url: process.env.KOVAN_INFURA_URL,
       accounts: [process.env.PRIVATE_KEY],
     },
     op_kovan: {

react/components/Layout.jsx

@@ -1,7 +1,7 @@
 import Head from "next/head"
 import { useRouter } from "next/router"
 import { useState } from "react"
-import { Toaster } from "react-hot-toast"
+import toast, { Toaster } from "react-hot-toast"
 import { useAccount, useContractRead } from "wagmi"
 import { contractABI, contractAddress } from "../lib/contract.js"
 import Nav from "./Nav"
@@ -25,10 +25,22 @@ export default function Layout(props) {
   const [isOwner, setIsOwner] = useState(false)
   useAccount({
     onSuccess(data) {
-      if (data) {
+      if (data && !address) {
         setAddress(data.address)
         console.debug("Found authorized account: ", data.address)
 
+        // Alert user to which networks are available
+        toast("Twitt3r only supports Goerli & Ropsten testnets!", {
+          duration: 8000,
+          position: "top-center",
+          style: {
+            color: "#FFFFFF",
+            backgroundColor: "#DC2626",
+            minWidth: "440px",
+          },
+          icon: "⚠️",
+        })
+
         // Check if this is the owner's wallet
         if (
           ownerData &&

react/pages/_app.js

@@ -17,11 +17,12 @@ import "../styles/globals.css"
 const { chains, provider } = configureChains(
   [
     chain.hardhat,
-    chain.rinkeby,
-    chain.ropsten,
-    chain.kovan,
     chain.goerli,
-    chain.optimismKovan,
+    chain.ropsten,
+    // chain.rinkeby,
+    // chain.kovan,
+    // chain.optimismKovan,
+    // chain.optimism,
   ], // Hardhat must come first due to provider issue, see: https://github.com/tmm/wagmi/discussions/425
   [
     infuraProvider({ infuraId: process.env.REACT_APP_INFURA_ID }),

react/styles/globals.css

@@ -3,9 +3,6 @@
 @tailwind utilities;
 
 @layer base {
-  html {
-    /* @apply bg-gray-900; */
-  }
   a {
     @apply text-twitter-blue hover:underline;
   }