simple wagmi token hook

gets the token's name on connection

Signed-off-by: Stefan <[email protected]>

apps/frontend/README.md

@@ -1 +1,6 @@
-# frontend app
+# frontend app
+
+build and deploy *packages/contracts* first. Take a note of the deployed contracts' address.  
+Copy `.env.example` to `.env` and add  alchemy / infura keys
+
+the local contract address is currently hardwired in `useTokenContract` (0x5fbdb2315678afecb367f032d93f642f64180aa3)

apps/frontend/hooks/useTokenContract.ts

@@ -0,0 +1,29 @@
+import { useState } from "react"
+
+import { Token, TokenFactory } from "@app/contracts"
+import { useEffect } from "react"
+import { useAccount, useNetwork, useSigner } from "wagmi"
+
+const config: Record<string, { address: string }> = {
+  foundry: {
+    address: "0x5fbdb2315678afecb367f032d93f642f64180aa3",
+  },
+}
+
+export function useTokenContract() {
+  const { isConnected } = useAccount()
+  const { chain } = useNetwork()
+  const { data: signer } = useSigner()
+
+  const [contract, setContract] = useState<Token>()
+  useEffect(() => {
+    if (!isConnected || !chain?.network || !signer) return
+
+    const contractAddress = config[chain.network]?.address
+    if (!contractAddress) return
+
+    setContract(TokenFactory.connect(contractAddress, signer))
+  }, [chain?.network, isConnected, signer])
+
+  return { contract }
+}

apps/frontend/pages/index.tsx

@@ -1,12 +1,24 @@
 import { Flex, Text } from "@chakra-ui/react"
+import { useEffect, useState } from "react"
 import { useAccount } from "wagmi"
+import { useTokenContract } from "../hooks/useTokenContract"
 
 export default function Home() {
   const { address } = useAccount()
+  const { contract: token } = useTokenContract()
+  const [contractName, setContractName] = useState<string>()
+
+  useEffect(() => {
+    if (!token) return
+    ;(async () => {
+      setContractName(await token.name())
+    })()
+  }, [token])
 
   return (
     <Flex>
       <Text>{address}</Text>
+      <Text>{contractName}</Text>
     </Flex>
   )
 }