Finalise React Modal Playground

Web3Auth · Dec 9, 2023 · b26a39f · b26a39f
1 parent 23b7c63
commit b26a39f
Show file tree

Hide file tree

Showing 13 changed files with 203 additions and 117 deletions.
diff --git a/web-modal-sdk/react-modal-playground/src/components/AccountDetails.tsx b/web-modal-sdk/react-modal-playground/src/components/AccountDetails.tsx
@@ -16,7 +16,7 @@ function AccountDetails({ children }: AccountDetailsProps) {
   }, [address]);
 
   return (
-    <div className="w-11/12 px-4 sm:px-6 lg:px-8  z-0">
+    <div className="px-4 sm:px-6 lg:px-8  z-0">
       <div className="flex flex-col space-y-2 md:flex-row md:justify-between md:space-y-0">
         <h1 className={"text-lg font-bold"}>Your Account Details</h1>
         <Dropdown
@@ -28,14 +28,18 @@ function AccountDetails({ children }: AccountDetailsProps) {
           }}
         />
       </div>
-      <div className="md:p-8 p-4 mt-6 mb-0 space-y-4 rounded-lg bg-white overflow-hidden">
-        <div className="flex flex-col md:flex-row">
-          <img className="object-fill w-24 h-24 rounded-lg" src={user?.profileImage} referrerPolicy="no-referrer" />
-
-          <div className="md:pl-8 lg:pl-flex flex-col justify-between">
-            <span className={"text-2xl text-gray-800 font-bold w-fit"}>{user?.name as string}</span>
+      <div className="md:p-8 p-4 mt-6 space-y-4 rounded-lg bg-white overflow-hidden w-full">
+        <div className="flex flex-col md:flex-row space-y-2 md:space-y-0 ">
+          {user.profileImage && <img className="object-fill w-24 h-24 rounded-lg" src={user?.profileImage} referrerPolicy="no-referrer" />}
+          {!user.profileImage && (
+            <span className="flex justify-center items-center bg-purple_100 font-bold w-24 h-24 rounded-lg text-[80px] text-purple_800">
+              {user?.name.charAt(0).toUpperCase()}
+            </span>
+          )}
+          <div className="space-y-2 md:space-y-0 md:pl-8 lg:pl-flex flex-col justify-between">
+            <span className={"text-xl md:text-2xl text-gray-800 font-bold w-fit"}>{user?.name as string}</span>
             <div
-              className="w-fit text-sm bg-gray-100 text-gray-600 p-1 pl-3 pr-3 rounded-full z-0 flex flex-row justify-between space-x-4 items-center cursor-pointer"
+              className="w-fit text-[8px] sm:text-sm bg-gray-100 text-gray-600 p-1 pl-3 pr-3 rounded-full z-0 flex flex-row justify-between space-x-4 items-center cursor-pointer"
               onClick={() => {
                 navigator.clipboard.writeText(address);
                 setAddressToShow("Copied!");
@@ -45,7 +49,7 @@ function AccountDetails({ children }: AccountDetailsProps) {
               }}
             >
               <span>{addressToShow}</span>
-              <svg width="14" height="14" viewBox="0 0 14 14" fill="#9CA3AF" xmlns="http://www.w3.org/2000/svg">
+              <svg className="w-2 sm:w-3.5" width="14" height="14" viewBox="0 0 14 14" fill="#9CA3AF" xmlns="http://www.w3.org/2000/svg">
                 <path
                   d="M2.45166 2.26636C2.45166 1.16179 3.51498 0.266357 4.82666 0.266357H11.16C12.4717 0.266357 13.535 1.16179 13.535 2.26636V9.59969C13.535 10.7043 12.4717 11.5997 11.16 11.5997C11.16 12.7043 10.0967 13.5997 8.78499 13.5997H2.45166C1.13998 13.5997 0.0766602 12.7043 0.0766602 11.5997V4.26636C0.0766602 3.16179 1.13998 2.26636 2.45166 2.26636ZM2.45166 3.59969C2.01443 3.59969 1.65999 3.89817 1.65999 4.26636V11.5997C1.65999 11.9679 2.01443 12.2664 2.45166 12.2664H8.78499C9.22222 12.2664 9.57666 11.9679 9.57666 11.5997H4.82666C3.51498 11.5997 2.45166 10.7043 2.45166 9.59969V3.59969ZM4.82666 1.59969C4.38943 1.59969 4.03499 1.89817 4.03499 2.26636V9.59969C4.03499 9.96788 4.38943 10.2664 4.82666 10.2664H11.16C11.5972 10.2664 11.9517 9.96788 11.9517 9.59969V2.26636C11.9517 1.89817 11.5972 1.59969 11.16 1.59969H4.82666Z"
                   fill="#9CA3AF"

diff --git a/web-modal-sdk/react-modal-playground/src/components/ConnectWeb3AuthButton.tsx b/web-modal-sdk/react-modal-playground/src/components/ConnectWeb3AuthButton.tsx
@@ -4,23 +4,14 @@ import web3AuthLogoWhite from "../assets/web3authLogoWhite.svg";
 import { useWeb3Auth } from "../services/web3auth";
 
 const ConnectWeb3AuthButton = () => {
-  const { provider, login, logout } = useWeb3Auth();
+  const { provider, login } = useWeb3Auth();
 
   if (provider) {
-    return (
-      <div
-        className="flex flex-row rounded-full px-6 py-3 text-white justify-center align-center"
-        style={{ backgroundColor: "#0364ff" }}
-        onClick={logout}
-      >
-        <img src={web3AuthLogoWhite} className="headerLogo" />
-        Disconnect
-      </div>
-    );
+    return null;
   }
   return (
     <div
-      className="flex flex-row rounded-full px-6 py-3 text-white justify-center align-center"
+      className="flex flex-row rounded-full px-6 py-3 text-white justify-center align-center cursor-pointer"
       style={{ backgroundColor: "#0364ff" }}
       onClick={login}
     >

diff --git a/web-modal-sdk/react-modal-playground/src/components/Console.tsx b/web-modal-sdk/react-modal-playground/src/components/Console.tsx
@@ -1,12 +1,16 @@
 import React from "react";
 
+import { useWeb3Auth } from "../services/web3auth";
+
 const Console = () => {
+  const { playgroundConsole } = useWeb3Auth();
+
   return (
-    <div className="w-11/12 px-4 py-16 sm:px-6 lg:px-8 flex-col">
+    <div className="px-4 py-16 sm:px-6 lg:px-8 flex-col">
       <p className="text-lg font-bold">Console</p>
       <div className="justify-center p-8 mt-6 mb-0 space-y-4 rounded-lg bg-white">
         <div className="md:flex items-flex-start p-1 bg-gray-200 overflow-scroll max-h-72">
-          <pre className="font-mono overflow-scroll w-full" id="console"></pre>
+          <pre className="font-mono overflow-scroll w-full">{playgroundConsole}</pre>
         </div>
       </div>
     </div>

diff --git a/web-modal-sdk/react-modal-playground/src/components/DisconnectWeb3AuthButton.tsx b/web-modal-sdk/react-modal-playground/src/components/DisconnectWeb3AuthButton.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+
+import web3AuthLogoWhite from "../assets/web3authLogoWhite.svg";
+import { useWeb3Auth } from "../services/web3auth";
+
+const ConnectWeb3AuthButton = () => {
+  const { provider, logout } = useWeb3Auth();
+
+  if (provider) {
+    return (
+      <div
+        className="flex flex-row rounded-full px-6 py-3 text-white justify-center align-center cursor-pointer"
+        style={{ backgroundColor: "#0364ff" }}
+        onClick={logout}
+      >
+        <img src={web3AuthLogoWhite} className="headerLogo" />
+        Disconnect
+      </div>
+    );
+  }
+  return null;
+};
+export default ConnectWeb3AuthButton;
diff --git a/web-modal-sdk/react-modal-playground/src/components/Header.tsx b/web-modal-sdk/react-modal-playground/src/components/Header.tsx
@@ -3,7 +3,7 @@ import React, { useState } from "react";
 import { useNavigate } from "react-router-dom";
 
 import web3authLogo from "../assets/web3authLogoBlue.svg";
-import ConnectWeb3AuthButton from "./ConnectWeb3AuthButton";
+import DisconnectWeb3AuthButton from "./DisconnectWeb3AuthButton";
 import Drawer from "./Drawer";
 
 const Header = () => {
@@ -37,7 +37,7 @@ const Header = () => {
             </div>
           </div>
           <div className="flex-col flex-row mt-0 items-center lg:flex hidden">
-            <ConnectWeb3AuthButton />
+            <DisconnectWeb3AuthButton />
           </div>
           <div className="flex-col flex-row mt-0 items-center flex lg:hidden">
             <Hamburger toggled={isOpen} toggle={setOpen} size={25} direction="right" />

diff --git a/web-modal-sdk/react-modal-playground/src/components/NotConnectedPage.tsx b/web-modal-sdk/react-modal-playground/src/components/NotConnectedPage.tsx
@@ -5,7 +5,6 @@ import ConnectWeb3AuthButton from "./ConnectWeb3AuthButton";
 const NotConnectedPage = () => {
   return (
     <div className=" w-full h-full flex flex-1 flex-col bg-gray-50 items-center justify-center overflow-scroll p-4">
-      <h1 className="text-2xl font-bold text-center sm:text-3xl">Welcome to Web3Auth Modal SDK Playground</h1>
       <div className="max-w-md mx-auto mt-4 text-center text-gray-500">
         <ConnectWeb3AuthButton />
       </div>

diff --git a/web-modal-sdk/react-modal-playground/src/components/Sidebar.tsx b/web-modal-sdk/react-modal-playground/src/components/Sidebar.tsx
@@ -16,9 +16,6 @@ const Sidebar = () => {
   function goToContract() {
     navigate("/contract");
   }
-  // function goToNft() {
-  //   navigate("/nft");
-  // }
   function goToServerSideVerification() {
     navigate("/server-side-verification");
   }
@@ -56,13 +53,14 @@ const Sidebar = () => {
         return (
           <div className="sticky px-4 inset-x-0 bottom-0 border-t border-gray-100">
             <div className="flex items-center justify-flex-start py-4 shrink-0 overflow-hidden">
-              <img className="object-cover w-10 h-10 rounded-full" src={user.profileImage} referrerPolicy="no-referrer" />
-
-              <div className="ml-1.5">
-                <p className="text-xs">
-                  <strong className="block font-medium">{user.name as string}</strong>
-                  <span>{user.email as string}</span>
-                </p>
+              {user.profileImage && <img className="object-fill w-10 h-10 rounded-full" src={user?.profileImage} referrerPolicy="no-referrer" />}
+              {!user.profileImage && (
+                <span className="flex justify-center items-center bg-purple_100 font-bold w-10 h-10 rounded-full text-[28px] text-purple_800">
+                  {user?.name.charAt(0).toUpperCase()}
+                </span>
+              )}
+              <div className="ml-1.5 overflow-hidden">
+                <strong className="text-xs block font-medium truncate">{user.name as string}</strong>
               </div>
             </div>
           </div>
@@ -83,7 +81,6 @@ const Sidebar = () => {
           {location.pathname === "/" ? activePage("Main Page") : linktoGo("Main Page", goToHome)}
           {location.pathname === "/transaction" ? activePage("Signing/ Transaction") : linktoGo("Signing/ Transaction", goToTransaction)}
           {location.pathname === "/contract" ? activePage("Smart Contract Interactions") : linktoGo("Smart Contract Interactions", goToContract)}
-          {/* {location.pathname === "/nft" ? activePage("NFT Interactions") : linktoGo("NFT Interactions", goToNft)} */}
           {location.pathname === "/server-side-verification"
             ? activePage("Server Side Verification")
             : linktoGo("Server Side Verification", goToServerSideVerification)}

diff --git a/web-modal-sdk/react-modal-playground/src/config/chainConfig.ts b/web-modal-sdk/react-modal-playground/src/config/chainConfig.ts
@@ -3,6 +3,15 @@ import { CHAIN_NAMESPACES, CustomChainConfig } from "@web3auth/base";
 export const chain: {
   [key: string]: CustomChainConfig;
 } = {
+  "Goerli Testnet": {
+    chainNamespace: CHAIN_NAMESPACES.EIP155,
+    chainId: "0x5",
+    displayName: "Goerli",
+    tickerName: "Goerli",
+    ticker: "ETH",
+    rpcTarget: "https://rpc.ankr.com/eth_goerli",
+    blockExplorer: "https://goerli.etherscan.io",
+  },
   Ethereum: {
     chainNamespace: CHAIN_NAMESPACES.EIP155,
     chainId: "0x1",
@@ -12,15 +21,6 @@ export const chain: {
     ticker: "ETH",
     tickerName: "Ethereum",
   },
-  Goerli: {
-    chainNamespace: CHAIN_NAMESPACES.EIP155,
-    chainId: "0x5",
-    displayName: "Goerli",
-    tickerName: "Goerli",
-    ticker: "ETH",
-    rpcTarget: "https://rpc.ankr.com/eth_goerli",
-    blockExplorer: "https://goerli.etherscan.io",
-  },
   Polygon: {
     chainNamespace: CHAIN_NAMESPACES.EIP155,
     chainId: "0x89", // hex of 137, polygon mainnet