Merge pull request #63 from Web3Auth/feat/revamp-next-app

Update UI and Add more actions to NextJS Demo app

Author: chaitanyapotti

examples/next-app/components/main.tsx

@@ -0,0 +1,40 @@
+import { useWeb3Auth } from "../services/web3auth";
+import styles from "../styles/Home.module.css";
+
+const Main = () => {
+  const { provider, login, logout, getUserInfo, getAccounts, getBalance, signMessage } = useWeb3Auth();
+
+  const loggedInView = (
+    <>
+      <a onClick={getUserInfo} className={styles.card}>
+        Get User Info
+      </a>
+      <a onClick={getAccounts} className={styles.card}>
+        Get Accounts
+      </a>
+      <a onClick={getBalance} className={styles.card}>
+        Get Balance
+      </a>
+      <a onClick={signMessage} className={styles.card}>
+        Sign Message
+      </a>
+      <a onClick={logout} className={styles.card}>
+        Log Out
+      </a>
+
+      <div className={styles.console} id="console">
+        <p className={styles.code}></p>
+      </div>
+    </>
+  );
+
+  const unloggedInView = (
+    <a onClick={login} className={styles.card}>
+      Login
+    </a>
+  );
+
+  return <div className={styles.grid}>{provider ? loggedInView : unloggedInView}</div>;
+};
+
+export default Main;

examples/next-app/components/setting.tsx

@@ -0,0 +1,56 @@
+import { ChangeEvent } from "react";
+import { CHAIN_CONFIG, CHAIN_CONFIG_TYPE } from "../config/chainConfig";
+import { WEB3AUTH_NETWORK, WEB3AUTH_NETWORK_TYPE } from "../config/web3AuthNetwork";
+import styles from "../styles/Home.module.css";
+import { Web3AuthContext } from "../services/web3auth";
+import { useContext } from "react";
+
+interface IProps {
+  setNetwork: (network: WEB3AUTH_NETWORK_TYPE) => void;
+  setChain: (chain: CHAIN_CONFIG_TYPE) => void;
+}
+
+const Setting = ({ setNetwork, setChain }: IProps) => {
+  const networkChangeHandler = (e: ChangeEvent<HTMLSelectElement>) => {
+    console.log("Settings", e.target.value);
+    setNetwork(e.target.value as WEB3AUTH_NETWORK_TYPE);
+  };
+
+  const chainChangeHandler = (e: ChangeEvent<HTMLSelectElement>) => {
+    console.log("Settings", e.target.value);
+    setChain(e.target.value as CHAIN_CONFIG_TYPE);
+  };
+  const { provider } = useContext(Web3AuthContext);
+  const isLoggedIn = provider !== null;
+
+  return (
+    <div className={styles.setting}>
+      <div className={styles.row}>
+        <label htmlFor="network" className={styles.label}>Web3Auth Network</label>
+        <select id="network" onChange={networkChangeHandler} className={styles.select} disabled={isLoggedIn}>
+          {Object.keys(WEB3AUTH_NETWORK).map((x: string) => {
+            return (
+              <option key={x} value={x}>
+                {WEB3AUTH_NETWORK[x as WEB3AUTH_NETWORK_TYPE].displayName}
+              </option>
+            );
+          })}
+        </select>
+      </div>
+      <div className={styles.row}>
+        <label htmlFor="network" className={styles.label}>Blockchain</label>
+        <select onChange={chainChangeHandler} className={styles.select} disabled={isLoggedIn}>
+          {Object.keys(CHAIN_CONFIG).map((x: string) => {
+            return (
+              <option key={x} value={x}>
+                {CHAIN_CONFIG[x as CHAIN_CONFIG_TYPE].displayName}
+              </option>
+            );
+          })}
+        </select>
+      </div>
+    </div>
+  );
+};
+
+export default Setting;