From f166aa1752b8237d6e5d05dbf40cee34f1e3fb25 Mon Sep 17 00:00:00 2001 From: Max Petretta Date: Mon, 19 Sep 2022 21:34:19 -0400 Subject: [PATCH 1/2] Enabled strict mode for typescript --- react/components/Address.tsx | 5 ++-- react/components/AppProvider.tsx | 18 ++++++++---- react/components/Avatar.tsx | 7 +++-- react/components/Controls.tsx | 5 +++- react/components/EditModal.tsx | 8 +++-- react/components/Editor.tsx | 7 +++-- react/components/Layout.tsx | 7 +++-- react/components/Nav.tsx | 2 +- react/components/ReplyModal.tsx | 8 +++-- react/components/Sidebar.tsx | 2 +- react/components/Tweet.tsx | 35 +++++++++++++--------- react/components/TweetList.tsx | 30 +++++++++++-------- react/components/TweetModal.tsx | 8 +++-- react/lib/types.ts | 50 ++++++++++++++++++++++++++++++++ react/pages/404.tsx | 2 +- react/pages/[address].tsx | 17 ++++++----- react/pages/_app.tsx | 3 +- react/tsconfig.json | 4 +-- 18 files changed, 156 insertions(+), 62 deletions(-) diff --git a/react/components/Address.tsx b/react/components/Address.tsx index 34d0bca..e04f731 100644 --- a/react/components/Address.tsx +++ b/react/components/Address.tsx @@ -1,10 +1,11 @@ import Link from "next/link" import { useEffect, useState } from "react" import { useEnsName } from "wagmi" +import { AddressProps } from "../lib/types" -export default function Address(props) { +export default function Address(props: AddressProps) { const match = props.address.match(/^(0x.{4}).+(.{4})$/) - const truncated = match[1] + "..." + match[2] + const truncated = match![1] + "..." + match![2] const [ens, setEns] = useState(truncated) diff --git a/react/components/AppProvider.tsx b/react/components/AppProvider.tsx index 7dd7e6e..786ee4d 100644 --- a/react/components/AppProvider.tsx +++ b/react/components/AppProvider.tsx @@ -1,19 +1,25 @@ import { ethers } from "ethers" -import { createContext, useContext, useState } from "react" +import React, { createContext, useContext, useState } from "react" import Confetti from "react-confetti" import toast from "react-hot-toast" import { useAccount, useContractEvent, useContractRead } from "wagmi" import { contractABI, contractAddress } from "../lib/contract.js" +import { Tweet as TweetType } from "../lib/types" -const AppContext = createContext(null) +const AppContext = createContext<{ + tweets: Map | undefined + setTweets: React.Dispatch< + React.SetStateAction | undefined> + > +}>(undefined!) -export const AppProvider = ({ children }) => { +export const AppProvider = ({ children }: { children: React.ReactNode }) => { const [address, setAddress] = useState("") - const [tweets, setTweets] = useState(null) + const [tweets, setTweets] = useState | undefined>() const [confetti, setConfetti] = useState(false) useAccount({ onSuccess(data) { - if (data && !address) { + if (data.address && !address) { setAddress(data.address) } }, @@ -31,7 +37,7 @@ export const AppProvider = ({ children }) => { { onSuccess(data) { if (data) { - setTweets((prevState) => { + setTweets((prevState: Map | undefined) => { let newState = new Map(prevState) data.forEach((tweet, id) => { newState.set(id + 1, { diff --git a/react/components/Avatar.tsx b/react/components/Avatar.tsx index 3deaf11..7cf1dc8 100644 --- a/react/components/Avatar.tsx +++ b/react/components/Avatar.tsx @@ -1,7 +1,8 @@ import { useEffect, useState } from "react" import { useEnsAvatar } from "wagmi" +import { AvatarProps } from "../lib/types" -export default function Avatar(props) { +export default function Avatar(props: AvatarProps) { const [avatar, setAvatar] = useState("") const seedrandom = require("seedrandom") const colors = [ @@ -73,9 +74,9 @@ export default function Avatar(props) { avatar ? "hidden" : props.styles - ? `${props.styles} ${getColorFromAddress(props.address)}` + ? `${props.styles} ${getColorFromAddress(Number(props.address))}` : `mx-3 inline h-12 w-12 self-start rounded-full ${getColorFromAddress( - props.address + Number(props.address) )}` } > diff --git a/react/components/Controls.tsx b/react/components/Controls.tsx index f6ed673..8e36628 100644 --- a/react/components/Controls.tsx +++ b/react/components/Controls.tsx @@ -108,7 +108,10 @@ export default function Controls() { toast.success("Cleared tweets") console.debug("Cleared --", data.hash) totalTweetsRefetch().then((value) => { - console.debug("Retrieved total tweet count --", value.data.toNumber()) + console.debug( + "Retrieved total tweet count --", + value.data!.toNumber() + ) }) }, onError(error) { diff --git a/react/components/EditModal.tsx b/react/components/EditModal.tsx index 2556629..fed6c54 100644 --- a/react/components/EditModal.tsx +++ b/react/components/EditModal.tsx @@ -5,9 +5,10 @@ import { UserRejectedRequestError, } from "wagmi" import { contractABI, contractAddress } from "../lib/contract.js" +import { EditProps } from "../lib/types.js" import Avatar from "./Avatar" -export default function ReplyTweet(props) { +export default function EditTweet(props: EditProps) { /** * Contract hooks */ @@ -30,7 +31,10 @@ export default function ReplyTweet(props) { totalTweetsRefetch().then((value) => { toast.success("Edited tweet!") console.debug("Edited --", data.hash) - console.debug("Retrieved total tweet count --", value.data.toNumber()) + console.debug( + "Retrieved total tweet count --", + value.data!.toNumber() + ) }) }, onError(error) { diff --git a/react/components/Editor.tsx b/react/components/Editor.tsx index bb25630..7526b42 100644 --- a/react/components/Editor.tsx +++ b/react/components/Editor.tsx @@ -18,7 +18,7 @@ export default function Editor() { const [price, setPrice] = useState("") useAccount({ onSuccess(data) { - if (data && !address) { + if (data.address && !address) { setAddress(data.address) } }, @@ -59,7 +59,10 @@ export default function Editor() { totalTweetsRefetch().then((value) => { toast.success("Sent tweet!") console.debug("Tweeted --", data.hash) - console.debug("Retrieved total tweet count --", value.data.toNumber()) + console.debug( + "Retrieved total tweet count --", + value.data!.toNumber() + ) }) }, onError(error) { diff --git a/react/components/Layout.tsx b/react/components/Layout.tsx index 394a216..fd4e088 100644 --- a/react/components/Layout.tsx +++ b/react/components/Layout.tsx @@ -4,11 +4,12 @@ import { useState } from "react" import { toast, Toaster } from "react-hot-toast" import { useAccount, useContractRead } from "wagmi" import { contractABI, contractAddress } from "../lib/contract.js" +import { LayoutProps } from "../lib/types.js" import Nav from "./Nav" import Sidebar from "./Sidebar" import TweetModal from "./TweetModal" -export default function Layout(props) { +export default function Layout(props: LayoutProps) { const { children, ...pageMeta } = props const router = useRouter() const meta = { @@ -25,7 +26,7 @@ export default function Layout(props) { const [isOwner, setIsOwner] = useState(false) useAccount({ onSuccess(data) { - if (data && !address) { + if (data.address && !address) { setAddress(data.address) console.debug("Found authorized account: ", data.address) @@ -48,7 +49,7 @@ export default function Layout(props) { // Check if this is the owner's wallet if ( ownerData && - ownerData.toUpperCase() === data.address.toUpperCase() + ownerData.toUpperCase() === data.address!.toUpperCase() ) { setIsOwner(true) } else { diff --git a/react/components/Nav.tsx b/react/components/Nav.tsx index 424a70e..069081a 100644 --- a/react/components/Nav.tsx +++ b/react/components/Nav.tsx @@ -8,7 +8,7 @@ export default function Nav() { const [address, setAddress] = useState("") useAccount({ onSuccess(data) { - if (data && !address) { + if (data.address && !address) { setAddress(data.address) } }, diff --git a/react/components/ReplyModal.tsx b/react/components/ReplyModal.tsx index afff1d3..1e21645 100644 --- a/react/components/ReplyModal.tsx +++ b/react/components/ReplyModal.tsx @@ -7,6 +7,7 @@ import { UserRejectedRequestError, } from "wagmi" import { contractABI, contractAddress } from "../lib/contract.js" +import { ReplyProps } from "../lib/types.js" import Address from "./Address" import Avatar from "./Avatar" @@ -15,7 +16,7 @@ import dayjs from "dayjs" import relativeTime from "dayjs/plugin/relativeTime" dayjs.extend(relativeTime) -export default function ReplyTweet(props) { +export default function ReplyTweet(props: ReplyProps) { const [price, setPrice] = useState("") const [message, setMessage] = useState("") @@ -54,7 +55,10 @@ export default function ReplyTweet(props) { totalTweetsRefetch().then((value) => { toast.success("Sent tweet!") console.debug("Tweeted --", data.hash) - console.debug("Retrieved total tweet count --", value.data.toNumber()) + console.debug( + "Retrieved total tweet count --", + value.data!.toNumber() + ) }) }, onError(error) { diff --git a/react/components/Sidebar.tsx b/react/components/Sidebar.tsx index a422a5c..f35712a 100644 --- a/react/components/Sidebar.tsx +++ b/react/components/Sidebar.tsx @@ -1,7 +1,7 @@ import { ConnectButton } from "@rainbow-me/rainbowkit" import Controls from "./Controls" -export default function Sidebar(props) { +export default function Sidebar(props: { isOwner: boolean }) { return (