Temp

Web3Auth · Dec 6, 2023 · 214d078 · 214d078
1 parent e6be456
commit 214d078
Show file tree

Hide file tree

Showing 11 changed files with 269 additions and 304 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
@@ -1,4 +1,3 @@
-import { CustomChainConfig } from "@web3auth/base";
 import React, { JSX, useEffect } from "react";
 
 import Dropdown from "../components/DropDown";
@@ -10,64 +9,56 @@ interface AccountDetailsProps {
 }
 
 function AccountDetails({ children }: AccountDetailsProps) {
-  const { address, balance, chainId, switchChain, user, getUserInfo } = useWeb3Auth();
-  const [connectedChain, setConnectedChain] = React.useState<CustomChainConfig>(chain.Ethereum);
+  const { address, balance, chainId, switchChain, user, getUserInfo, updateConnectedChain, connectedChain } = useWeb3Auth();
   const [addressToShow, setAddressToShow] = React.useState<string>(address);
   useEffect(() => {
     setAddressToShow(address);
   }, [address]);
 
   return (
     <div className="w-11/12 px-4 sm:px-6 lg:px-8  z-0">
-      <div className="flex flex-row justify-between">
+      <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
           rounded
           options={Object.keys(chain)}
           onChange={(option) => {
             switchChain(option);
-            setConnectedChain(chain[option]);
+            updateConnectedChain(option);
           }}
         />
       </div>
-      <div className="p-8 mt-6 mb-0 space-y-4 rounded-lg bg-white">
-        <div className="w-11/12 px-4 sm:px-6 lg:px-8 z-0 flex flex-row">
-          <img className="object-cover w-100 h-100 rounded-lg" src={user?.profileImage} referrerPolicy="no-referrer" />
+      <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="pl-8 p-2 flex flex-col justify-between">
-            <h1 className={"text-2xl text-gray-800 font-bold block"}>{user?.name as string}</h1>
-            <div className="flex flex-row justify-evenly space-x-2">
-              <div
-                className="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!");
-                  setInterval(() => {
-                    setAddressToShow(address);
-                  }, 1000);
-                }}
-              >
-                <span>{addressToShow}</span>
-                <svg width="14" height="14" viewBox="0 0 14 14" fill="#9CA3AF" xmlns="http://www.w3.org/2000/svg">
-                  <path
-                    fill-rule="evenodd"
-                    clip-rule="evenodd"
-                    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"
-                  />
-                </svg>
-              </div>
-              <div className="text-sm bg-gray-100 text-gray-600 p-1 pl-3 pr-3 rounded-full z-0 flex flex-row justify-between">
-                <span>{user?.email as string}</span>
-              </div>
+          <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="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"
+              onClick={() => {
+                navigator.clipboard.writeText(address);
+                setAddressToShow("Copied!");
+                setInterval(() => {
+                  setAddressToShow(address);
+                }, 1000);
+              }}
+            >
+              <span>{addressToShow}</span>
+              <svg 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"
+                />
+              </svg>
             </div>
           </div>
         </div>
         <button className="w-full p-4 text-sm border-gray-200 rounded-lg shadow-sm z-0" onClick={getUserInfo}>
           View User Info in Console
         </button>
       </div>
-      <div className="p-8 mt-6 mb-0 rounded-lg bg-white flex flex-row justify-between">
+      <div className="p-8 mt-6 mb-0 rounded-lg bg-white flex flex-row justify-between flex-wrap">
         <div className="p-2 flex flex-col justify-between space-y-4">
           <span className="text-sm">Wallet Balance</span>
           <div className="flex flex-row space-x-1 items-start">

diff --git a/web-modal-sdk/react-modal-playground/src/components/Sidebar.tsx b/web-modal-sdk/react-modal-playground/src/components/Sidebar.tsx
@@ -4,7 +4,7 @@ import { useLocation, useNavigate } from "react-router-dom";
 import { useWeb3Auth } from "../services/web3auth";
 
 const Sidebar = () => {
-  const { provider, user } = useWeb3Auth();
+  const { provider, user, connectedChain } = useWeb3Auth();
 
   const navigate = useNavigate();
   function goToHome() {
@@ -23,10 +23,14 @@ const Sidebar = () => {
     navigate("/server-side-verification");
   }
   function goToExplorer() {
-    window.open("https://goerli.etherscan.io/", "_blank");
+    window.open(connectedChain.blockExplorer);
   }
   function goToFaucet() {
-    window.open("https://goerlifaucet.com/", "_blank");
+    if (connectedChain.chainId === "0x5") {
+      window.open("https://goerlifaucet.com/");
+    } else if (connectedChain.chainId === "0x13881") {
+      window.open("https://faucet.polygon.technology/");
+    }
   }
   const location = useLocation();
   function linktoGo(label: string, path: any) {
@@ -41,7 +45,7 @@ const Sidebar = () => {
   }
   function activePage(label: string) {
     return (
-      <div className="flex items-center px-4 py-2 mb-2 rounded-lg bg-gray-100 text-primary  cursor-pointer">
+      <div className="flex items-center px-4 py-2 mb-2 rounded-lg bg-gray-100 text-primary cursor-pointer">
         <span className="text-sm font-bold">{label}</span>
       </div>
     );
@@ -84,7 +88,7 @@ const Sidebar = () => {
             ? activePage("Server Side Verification")
             : linktoGo("Server Side Verification", goToServerSideVerification)}
           {linktoGo("Explorer Link", goToExplorer)}
-          {linktoGo("Faucet Link", goToFaucet)}
+          {connectedChain.chainId === "0x5" || connectedChain.chainId === "0x13881" ? linktoGo("Faucet Link", goToFaucet) : null}
         </nav>
       </div>
       {userProfile()}