Merge pull request #5 from maxpetretta/dev

Dev

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/contracts/Twitt3r.sol

@@ -9,7 +9,7 @@ import "@openzeppelin/contracts/security/Pausable.sol";
 /**
  * @title Twitt3r
  * @author Max Petretta (maxpetretta.eth)
- * @notice A decentralized version of Twitter, build on the Ethereum blockchain
+ * @notice A decentralized version of Twitter, built on the Ethereum blockchain
  * @dev Not audited!
  */
 contract Twitt3r is Ownable, Pausable {

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/AppProvider.jsx

@@ -13,7 +13,7 @@ export const AppProvider = ({ children }) => {
   const [confetti, setConfetti] = useState(false)
   useAccount({
     onSuccess(data) {
-      if (data) {
+      if (data && !address) {
         setAddress(data.address)
       }
     },

react/components/Editor.jsx

@@ -18,7 +18,7 @@ export default function Editor() {
   const [price, setPrice] = useState(0)
   useAccount({
     onSuccess(data) {
-      if (data) {
+      if (data && !address) {
         setAddress(data.address)
       }
     },

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,25 @@ 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
+        if (!sessionStorage.getItem("seenNetworkAlert")) {
+          toast("Twitt3r only supports Goerli & Ropsten testnets!", {
+            duration: 8000,
+            position: "top-center",
+            style: {
+              color: "#FFFFFF",
+              backgroundColor: "#DC2626",
+              minWidth: "440px",
+            },
+            icon: "⚠️",
+          })
+          sessionStorage.setItem("seenNetworkAlert", true)
+        }
+
         // Check if this is the owner's wallet
         if (
           ownerData &&

react/components/Nav.jsx

@@ -8,7 +8,7 @@ export default function Nav() {
   const [address, setAddress] = useState("")
   useAccount({
     onSuccess(data) {
-      if (data) {
+      if (data && !address) {
         setAddress(data.address)
       }
     },

react/components/Tweet.jsx

@@ -30,7 +30,7 @@ export default function Tweet(props) {
   const { tweets } = useTweets()
   useAccount({
     onSuccess(data) {
-      if (data) {
+      if (data && !address) {
         setAddress(data.address)
       }
     },

react/pages/404.js

@@ -8,7 +8,7 @@ export default function Error404() {
   const [address, setAddress] = useState()
   useAccount({
     onSuccess(data) {
-      if (data) {
+      if (data && !address) {
         setAddress(data.address)
       }
     },

react/pages/_app.js

@@ -17,12 +17,12 @@ import "../styles/globals.css"
 const { chains, provider } = configureChains(
   [
     chain.hardhat,
-    chain.rinkeby,
-    chain.ropsten,
-    chain.kovan,
     chain.goerli,
-    chain.optimismKovan,
-    chain.optimism,
+    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;
   }