Push

Week13/my-create-web3-dapp/frontend/components/InstructionsComponent.jsx

@@ -1,3 +1,4 @@
+import { useEffect } from "react";
 import styles from "../styles/InstructionsComponent.module.css";
 import Router, { useRouter } from "next/router";
 export default function InstructionsComponent() {
@@ -13,68 +14,87 @@ export default function InstructionsComponent() {
 					<span>/pages/index.js</span>
 				</p>
 			</header>
-
-			<div className={styles.buttons_container}>
-				<a
-					target={"_blank"}
-					href={"https://createweb3dapp.alchemy.com/#components"}
-				>
-					<div className={styles.button}>
-						{/* <img src="https://static.alchemyapi.io/images/cw3d/Icon%20Medium/lightning-square-contained-m.svg" width={"20px"} height={"20px"} /> */}
-						<p>Add Components</p>
-					</div>
-				</a>
-				<a
-					target={"_blank"}
-					href={"https://createweb3dapp.alchemy.com/#templates"}
-				>
-					<div className={styles.button}>
-						{/* <img src="https://static.alchemyapi.io/images/cw3d/Icon%20Medium/lightning-square-contained-m.svg" width={"20px"} height={"20px"} /> */}
-						<p>Explore Templates</p>
-					</div>
-				</a>
-				<a
-					target={"_blank"}
-					href={"https://docs.alchemy.com/docs/create-web3-dapp"}
-				>
-					<div className={styles.button}>
-						<img
-							src="https://static.alchemyapi.io/images/cw3d/Icon%20Large/file-eye-01-l.svg"
-							width={"20px"}
-							height={"20px"}
-						/>
-						<p>Visit Docs</p>
-					</div>
-				</a>
-			</div>
-			<div className={styles.footer}>
-				<a href="https://alchemy.com/?a=create-web3-dapp" target={"_blank"}>
-					<img
-						id="badge-button"
-						style={{ width: "240px", height: "53px" }}
-						src="https://static.alchemyapi.io/images/marketing/badgeLight.png"
-						alt="Alchemy Supercharged"
-					/>
-				</a>
-				<div className={styles.icons_container}>
-					<div>
-						<a
-							href="https://github.com/alchemyplatform/create-web3-dapp"
-							target={"_blank"}
-						>
-							Leave a star on Github
-						</a>
-					</div>
-					<div>
-						<a
-							href="https://twitter.com/AlchemyPlatform"
-							target={"_blank"}
-						>
-							Follow us on Twitter
-						</a>
-					</div>
-				</div>
-			</div>
 		</div>
 	);
 }
+
+
+function PageBody() {
+	return (
+		<>
+			<WalletInfo></WalletInfo>
+		</>
+	)
+}
+
+function WalletInfo() {
+	const { data: signer, isError, isLoading } = useSigner();
+	const { chain, chains } = useNetwork();
+	if (signer) return (
+		<>
+			<p>Your account address is {signer._address}</p>
+			<p>Connected to the {chain.name} network</p>
+			<button onClick={() => signMessage(signer, 'I love potatoes')}></button>
+			<WalletInfo></WalletInfo>
+
+		</>
+	)
+	if (isLoading) return (
+		<>
+			<p>Wait a while, the wallet is loading</p>
+		</>
+	)
+	return (
+		<>
+			<p>Connect a wallet</p>
+		</>
+	)
+}
+
+function WalletBalance() {
+	const { data: signer } = useSigner();  
+	const { data, isError, isLoading } = useBalance({
+		address: signer._address,
+	  })
+
+	  if (isLoading) return <div>Fetching balance…</div>
+	  if (isError) return <div>Error fetching balance</div>
+	  return (
+		<div>
+		  Balance: {data?.formatted} {data?.symbol}
+		</div>
+	  )
+}
+
+function signMessage(signer, message) {
+	signer.signMessage(message).then(
+		(signature) => {console.log(signature)},
+		(error) => {console.error(error)}
+	)
+
+}
+
+function ApiInfo() {
+	 	const [data, setData] = useState(null);
+		const [isLoading, setLoading] = useState(false);
+
+		useEffect(() => {
+			setLoading(true);
+			fetch('https://random-api-data.com/api/v2/users')
+			.then((res) => res.json())
+			.then((data) => {
+				setData(data);
+				setLoading(false);
+			});
+		}, []);
+
+		if (isLoading) return <p>Loading...</p>;
+		if (!data) return <p>No profile data</p>;
+
+		return (
+			<div>
+			<h1>{data.username}</h1>
+			<p>{data.email}</p>
+			</div>
+		);
+}