refactor: useAccount to get address

Author: Lanttcat

.eslintrc.json

@@ -4,6 +4,7 @@
     "semi": [2, "never"],
     "space-before-blocks": "error",
     "space-before-function-paren": [2, "never"],
-    "object-curly-spacing": ["error", "always"]
+    "object-curly-spacing": ["error", "always"],
+    "indent": ["error", 2]
   }
 }

pages/all-assets.js

@@ -7,22 +7,17 @@ import { nftaddress, nftmarketaddress } from "../config"
 
 import NFT from "../artifacts/contracts/NFT.sol/NFT.json"
 import Market from "../artifacts/contracts/Market.sol/NFTMarket.json"
+import {useWeb3} from "../hooks/useWeb3";
 
 export default function AllAssets() {
   const [nfts, setNfts] = useState([])
   const [sold, setSold] = useState([])
   const [loadingState, setLoadingState] = useState("not-loaded")
+  const provider = useWeb3()
   useEffect(() => {
     loadNFTs()
   }, [])
   async function loadNFTs() {
-    const web3Modal = new Web3Modal({
-      network: "mainnet",
-      cacheProvider: true,
-    })
-    const connection = await web3Modal.connect()
-    // const provider = new ethers.providers.JsonRpcProvider()
-    const provider = new ethers.providers.Web3Provider(connection)
     const signer = provider.getSigner()
 
     // const marketContract = new ethers.Contract(nftmarketaddress, Market.abi, provider)

pages/article.js

@@ -15,13 +15,15 @@ import Market from "../artifacts/contracts/Market.sol/NFTMarket.json"
 
 import { providers } from "ethers"
 import { init } from "@textile/eth-storage"
+import {useWeb3} from "../hooks/useWeb3";
 
 let ethAccount
 let myethAccount
 let cid
 let nft = {}
 export default function MyAssets() {
   // const [nft, setNft] = useState({})
+  const provider = useWeb3()
   const [loadingState, setLoadingState] = useState("not-loaded")
   const router = useRouter()
 
@@ -45,10 +47,7 @@ export default function MyAssets() {
   }
 
   async function storeNFTtoFilecoin() {
-    await window.ethereum.enable()
-    const provider = new providers.Web3Provider(window.ethereum)
     const wallet = provider.getSigner()
-
     const storage = await init(wallet)
     // const blob = new Blob(["Hello, world!"], { type: "text/plain" });
     const jsonse = JSON.stringify(nft)
@@ -75,9 +74,6 @@ export default function MyAssets() {
   }
 
   async function createSale(url) {
-    const web3Modal = new Web3Modal()
-    const connection = await web3Modal.connect()
-    const provider = new ethers.providers.Web3Provider(connection)
     const signer = provider.getSigner()
 
     /* next, create the item */

pages/articles.js

@@ -4,17 +4,18 @@ import axios from "axios"
 import { useRouter } from "next/router"
 
 import { nftmarketaddress, nftaddress } from "../config"
+import {useAccount} from "../hooks/useAccount";
 
 let ethAccount
 export default function MyAssets() {
+  const account = useAccount()
   const [nfts, setNfts] = useState([])
   const [loadingState, setLoadingState] = useState("not-loaded")
 
   // useEffect(function() {
   // },[]);
   const router = useRouter()
 
-  console.log(router.query)
   if ("author" in router.query) {
     ethAccount = router.query.author
     console.log("ethAccount", ethAccount)

pages/create.tsx

@@ -11,6 +11,7 @@ import NFT from "../artifacts/contracts/NFT.sol/NFT.json"
 import Market from "../artifacts/contracts/Market.sol/NFTMarket.json"
 import { useEffect, useState } from "react"
 import { InputFieldError } from "../components/InputFieldError"
+import { useAccount } from "../hooks/useAccount"
 
 interface IFormInputs {
   price: string
@@ -32,19 +33,14 @@ const schema = yup.object({
 
 export default function CreateItem() {
   const router = useRouter()
-  // TODO: create useAccount Hook and listen account change
-  const [ethAccount, setEthAccount] = useState<string>()
+  const account = useAccount()
   const [preview, setPreview] = useState<string>()
 
   useEffect(() => {
-    if (typeof window !== "undefined") {
-      const account = localStorage.getItem("ethAccount")
-      if (!account) {
-        alert("No ETH Account, Please login")
-        router.push("/articles-all")
-        return
-      }
-      setEthAccount(account)
+    if (!account) {
+      alert("No ETH Account, Please login")
+      router.push("/articles-all")
+      return
     }
   }, [])
 
@@ -72,7 +68,7 @@ export default function CreateItem() {
     const authors = [{
       name: data.author,
       wallet: {
-        eth: ethAccount,
+        eth: account,
       },
     }]
     const nftData = JSON.stringify({
@@ -99,7 +95,7 @@ export default function CreateItem() {
     axios.defaults.headers.common['address'] = aethAccount
     const ret = await axios.post(dweb_search_url, {
       path: addedNFT.path,
-      eth: ethAccount,
+      eth: account,
       name: data.name,
       image: imageURL,
       tags: data.s_tags,
@@ -145,15 +141,15 @@ export default function CreateItem() {
         </div>
         <div>
 
-        <p>-- Markdown Tips: &nbsp;
-          <a href="https://anwen.cc/share/6">参考1</a>&nbsp;
-          <a href="https://www.markdown.xyz/basic-syntax/">参考2</a>
-        </p>
-        <textarea
-          placeholder="Content of your article (you can use Markdown format)"
-          className="mt-2 border rounded p-4 h-80 w-full"
-          {...register("description")}
-        />
+          <p>-- Markdown Tips: &nbsp;
+            <a href="https://anwen.cc/share/6">参考1</a>&nbsp;
+            <a href="https://www.markdown.xyz/basic-syntax/">参考2</a>
+          </p>
+          <textarea
+            placeholder="Content of your article (you can use Markdown format)"
+            className="mt-2 border rounded p-4 h-80 w-full"
+            {...register("description")}
+          />
           <InputFieldError message={errors.description?.message} />
         </div>
         <div>

pages/edit.tsx

@@ -13,6 +13,7 @@ import { nftaddress, nftmarketaddress } from "../config"
 import NFT from "../artifacts/contracts/NFT.sol/NFT.json"
 import Market from "../artifacts/contracts/Market.sol/NFTMarket.json"
 import { InputFieldError } from "../components/InputFieldError"
+import { useAccount } from "../hooks/useAccount"
 
 
 let nft // TODO: use useState?
@@ -37,21 +38,16 @@ const schema = yup.object({
 
 export default function EditItem() {
   const router = useRouter()
-  // TODO: create useAccount Hook and listen account change
-  const [ethAccount, setEthAccount] = useState<string>()
+  const account = useAccount()
   const [preview, setPreview] = useState<string>()
   const [cid, setCid] = useState<string>()
   const [loadingState, setLoadingState] = useState("not-loaded")
 
   useEffect(() => {
-    if (typeof window !== "undefined") {
-      const account = localStorage.getItem("ethAccount")
-      if (!account) {
-        alert("No ETH Account, Please login")
-        router.push("/articles-all")
-        return
-      }
-      setEthAccount(account)
+    if (!account) {
+      alert("No ETH Account, Please login")
+      router.push("/articles-all")
+      return
     }
   }, [])
 
@@ -105,7 +101,7 @@ export default function EditItem() {
     const authors = [{
       name: data.author,
       wallet: {
-        eth: ethAccount,
+        eth: account,
       },
     }]
     const nftData = JSON.stringify({
@@ -135,7 +131,7 @@ export default function EditItem() {
       // headers: {"Authorization" : `Bearer ${tokenStr}`},
       previous_path: cid, 
       path: addedNFT.path,
-      eth: ethAccount,
+      eth: account,
       name: data.name,
       image: imageURL,
       tags: data.s_tags,
@@ -187,16 +183,16 @@ export default function EditItem() {
         </div>
         <div>
 
-        <p>-- Markdown Tips: &nbsp;
-          <a href="https://anwen.cc/share/6">参考1</a>&nbsp;
-          <a href="https://www.markdown.xyz/basic-syntax/">参考2</a>
-        </p>
-        <textarea
-          placeholder="Content of your article (you can use Markdown format)"
-          className="mt-2 border rounded p-4 h-80 w-full"
-          defaultValue={nft.description}
-          {...register("description")}
-        />
+          <p>-- Markdown Tips: &nbsp;
+            <a href="https://anwen.cc/share/6">参考1</a>&nbsp;
+            <a href="https://www.markdown.xyz/basic-syntax/">参考2</a>
+          </p>
+          <textarea
+            placeholder="Content of your article (you can use Markdown format)"
+            className="mt-2 border rounded p-4 h-80 w-full"
+            defaultValue={nft.description}
+            {...register("description")}
+          />
           <InputFieldError message={errors.description?.message} />
         </div>
         <div>

pages/my-collections.js

@@ -6,22 +6,22 @@ import { nftmarketaddress, nftaddress } from "../config"
 
 import Market from "../artifacts/contracts/Market.sol/NFTMarket.json"
 import NFT from "../artifacts/contracts/NFT.sol/NFT.json"
+import { useAccount } from "../hooks/useAccount"
+import { useWeb3Context } from "../context/web3Context"
+import { useWeb3 } from "../hooks/useWeb3"
 
 export default function MyAssets() {
   const [nfts, setNfts] = useState([])
   const [loadingState, setLoadingState] = useState("not-loaded")
+  const provider = useWeb3()
+
 
   useEffect(() => {
+    if (!provider) return
     loadNFTs()
-  }, [])
+  }, [provider])
+
   async function loadNFTs() {
-    const web3Modal = new Web3Modal({
-      // network: "mainnet",
-      // network: "mumbai",
-      cacheProvider: true,
-    })
-    const connection = await web3Modal.connect()
-    const provider = new ethers.providers.Web3Provider(connection)
     const signer = provider.getSigner()
 
     const marketContract = new ethers.Contract(
@@ -64,7 +64,7 @@ export default function MyAssets() {
         <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 pt-4">
           {nfts.map((nft, i) => (
             <div key={i} className="border shadow rounded-xl overflow-hidden">
-              <img src={nft.image} className="rounded" />
+              <img src={nft.image} className="rounded"/>
 
               <div className="p-4">
                 <a href={"/article?cid=" + nft.path}>

pages/my-nfts.js

@@ -6,24 +6,19 @@ import { nftmarketaddress, nftaddress } from "../config"
 
 import Market from "../artifacts/contracts/Market.sol/NFTMarket.json"
 import NFT from "../artifacts/contracts/NFT.sol/NFT.json"
+import {useWeb3} from "../hooks/useWeb3";
 
 export default function CreatorDashboard() {
   const [nfts, setNfts] = useState([])
   const [sold, setSold] = useState([])
   const [loadingState, setLoadingState] = useState("not-loaded")
+  const provider = useWeb3()
 
   useEffect(() => {
+    if (!provider) return
     loadNFTs()
-  }, [])
+  }, [provider])
   async function loadNFTs() {
-    const web3Modal = new Web3Modal({
-      // network: "mainnet",
-      // network: "mumbai",
-      cacheProvider: true,
-    })
-    // const connection = await web3Modal.connect("https://rpc-mumbai.matic.today")
-    const connection = await web3Modal.connect()
-    const provider = new ethers.providers.Web3Provider(connection)
     const signer = provider.getSigner()
 
     const marketContract = new ethers.Contract(