added design for the paywall and optimise the login and register

nileshdev0707 · lazycoder1 · commit 40ebfbe81761 · 2023-09-22T23:51:20.000+05:30
diff --git a/src/components/common/apiCalls/jiffyApis.tsx b/src/components/common/apiCalls/jiffyApis.tsx
@@ -567,9 +567,20 @@ export const getGlobalMetrics = async (selectedNetwork: string, toast: any): Pro
     return {} as GlobalCounts;
 };
 
-export const getUserOp = async (userOpHash: string, toast: any): Promise<UserOp[]> => {
-    const response = await fetch(API_URL+'/v0/getUserOp?hash=' + userOpHash, {
-        headers: { 'x-api-key': 'gFQghtJC6F734nPaUYK8M3ggf9TOpojkbNTH9gR5' },
+export const getUserOp = async (userOpHash: string, toast: any, Authorization?: string): Promise<UserOp[]> => {
+    type Headers = {
+        "x-api-key": string,
+        Authorization?: string,
+    }
+    const header = {
+        'x-api-key': 'gFQghtJC6F734nPaUYK8M3ggf9TOpojkbNTH9gR5'
+    } as Headers;
+
+    if (Authorization) {
+        header['Authorization'] = Authorization
+    }
+    const response = await fetch(API_URL + '/v0/getUserOp?hash=' + userOpHash, {
+        headers: header
     });
     if (response.status != 200) {
         showToast(toast, 'Error fetching data');
diff --git a/src/lib/auth.tsx b/src/lib/auth.tsx
@@ -92,13 +92,16 @@ export const authOptions = {
             // Return true to allow sign in and false to block sign in.
             return true;
         },
-        async redirect({baseUrl}: any) {
+        async redirect(url: any) {
+            console.log("Url======>", url)
             // Return the url to redirect to after successful sign in.
-            return baseUrl;
+            return url.url.startsWith(url.baseUrl)
+                ? url.url
+                : url.baseUrl
         },
         jwt: jwt,
         // async jwt({token, account, profile, user}: any) {
-        //     return await jwt({token, account, profile, user})
+        //     return awaits jwt({token, account, profile, user})
         // },
         session: manageSession,
         // return session; // Make sure to return the modified session
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -1,10 +1,12 @@
 import React from 'react';
 import type {ReactElement, ReactNode} from 'react';
-import type {GetServerSideProps, NextPage} from 'next';
+import type {NextPage} from 'next';
 import type {AppProps} from 'next/app';
 import {ConfigProvider} from '@/context/config';
 import {Analytics} from '@vercel/analytics/react';
 import '../styles/main.sass';
+import ReactGA from 'react-ga4';
+import {SessionProvider} from "next-auth/react";
 
 export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
     getLayout?: (page: ReactElement) => ReactNode;
@@ -14,23 +16,12 @@ type AppPropsWithLayout = AppProps & {
     Component: NextPageWithLayout;
 };
 
-import ReactGA from 'react-ga4';
-import {getSession, SessionProvider} from "next-auth/react";
-
 const TRACKING_ID = 'G-8HQ9S4Z1YF';
 ReactGA.initialize(TRACKING_ID);
-export const getServerSideProps: GetServerSideProps<{}> = async (ctx) => {
-    const session = await getSession(ctx);
-    return {
-        props: {
-            session,
-        },
-    };
-}
+
 export default function MyApp({Component, pageProps}: AppPropsWithLayout) {
     // Use the layout defined at the page level, if available
     const getLayout = Component.getLayout ?? ((page) => page);
-
     return (
         <div>
             <SessionProvider session={pageProps.session}>
diff --git a/src/views/home/Home.tsx b/src/views/home/Home.tsx
@@ -1,26 +1,34 @@
 import Button from '@/components/common/Button';
-import Table, { tableDataT } from '@/components/common/table/Table';
+import Table, {tableDataT} from '@/components/common/table/Table';
 import Footer from '@/components/global/footer/Footer';
 import Navbar from '@/components/global/navbar/Navbar';
 import RecentMetrics from '@/components/global/recent_metrics/RecentMetrics';
-import React, { useState, useEffect } from 'react';
+import React, {useState, useEffect} from 'react';
 import BundlesTable from './bundles_table.json';
 import BundlersTable from './bundlers_table.json';
 import PaymastersTable from './paymasters_table.json';
 import OperationsTable from './operations_table.json';
 import Searchblock from '../../components/global/searchblock/Searchblock';
 import NetworkSelector from '@/components/common/NetworkSelector';
-import { NETWORK_ICON_MAP } from '@/components/common/constants';
-import { getLatestBundles, getLatestUserOps, getTopBundlers, getTopPaymasters } from '@/components/common/apiCalls/jiffyApis';
-import { getFee, getTimePassed } from '@/components/common/utils';
-import { useConfig } from '../../context/config';
-import { ToastContainer, toast } from 'react-toastify';
+import {NETWORK_ICON_MAP} from '@/components/common/constants';
+import {
+    getLatestBundles,
+    getLatestUserOps,
+    getTopBundlers,
+    getTopPaymasters
+} from '@/components/common/apiCalls/jiffyApis';
+import {getFee, getTimePassed} from '@/components/common/utils';
+import {useConfig} from '../../context/config';
+import {ToastContainer, toast} from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import InfoButton from '@/components/common/InfoButton';
 import Header from '@/components/common/Header';
+import {session} from "next-auth/core/routes";
+import {useSession} from "next-auth/react";
+import {useRouter} from "next/router";
 
 function Home() {
-    const { selectedNetwork, setSelectedNetwork } = useConfig();
+    const {selectedNetwork, setSelectedNetwork} = useConfig();
     const [bundlesTable, setBundlesTable] = useState<tableDataT>(BundlesTable as tableDataT);
     const [operationsTable, setOperationsTable] = useState<tableDataT>(OperationsTable as tableDataT);
     const [bundlersTable, setBundlersTable] = useState<tableDataT>(BundlersTable as tableDataT);
@@ -112,23 +120,24 @@ function Home() {
             });
         });
         setLoading(false);
-        setOperationsTable({ ...operationsTable, rows: newRows.slice(0, 5) });
+        setOperationsTable({...operationsTable, rows: newRows.slice(0, 5)});
         setUserOpTableLoading(false);
     };
 
     return (
         <div>
-            <Navbar />
+            <Navbar/>
             <section className="py-6">
                 <div className="container">
                     <h1 className="mb-2 text-xl font-bold leading-8 md:text-3xl md:mb-4">
                         UserOp Explorer for{' '}
-                        <a href="https://eips.ethereum.org/EIPS/eip-4337" target="_blank" style={{ textDecoration: 'underline' }}>
+                        <a href="https://eips.ethereum.org/EIPS/eip-4337" target="_blank"
+                           style={{textDecoration: 'underline'}}>
                             4337
                         </a>
                     </h1>
                     <div>
-                        <Searchblock isNavbar={false} />
+                        <Searchblock isNavbar={false}/>
                     </div>
                 </div>
             </section>
@@ -138,8 +147,9 @@ function Home() {
                         icon="/images/cube-unfolded.svg"
                         headerText="Select network to explore"
                         infoText="Shows latest Activity for different entities in a chain"
-                    />                    
-                    <NetworkSelector selectedNetwork={selectedNetwork} handleNetworkChange={setSelectedNetwork} disabled={loading} />
+                    />
+                    <NetworkSelector selectedNetwork={selectedNetwork} handleNetworkChange={setSelectedNetwork}
+                                     disabled={loading}/>
                 </div>
             </div>
             {/* <RecentMetrics selectedNetwork={selectedNetwork} setLoading={setLoading} loading={loading} /> */}
@@ -209,8 +219,8 @@ function Home() {
                     </div>
                 </div>
             </section>
-            <ToastContainer />
-            <Footer />
+            <ToastContainer/>
+            <Footer/>
         </div>
     );
 }
diff --git a/src/views/login/login.tsx b/src/views/login/login.tsx
@@ -1,52 +1,63 @@
-import React, {useState} from 'react';
+import React, {useEffect, useState} from 'react';
 import Image from 'next/image';
 import logo from '../../../public/images/logo.png';
 import Link from 'next/link';
 import MiniFooter from '@/components/global/minifooter';
-import {signIn} from "next-auth/react";
+import {signIn, useSession} from "next-auth/react";
 import {useRouter} from "next/router";
 import Spinner from "@/components/common/Spinner";
+import {mockProviders} from "next-auth/client/__tests__/helpers/mocks";
+import callbackUrl = mockProviders.github.callbackUrl;
 
 const LoginComponent = () => {
+    const {data: session, status, update} = useSession()
     const [email, setEmail] = useState('');
     const [password, setPassword] = useState('');
     const [successMessage, setSuccessMessage] = useState('');
     const router = useRouter();
     const [errorMessage, setErrorMessage] = useState('');
     const [loading, setLoading] = useState(false);
-
+    const {query} = router;
     const handleLoginWithGoogle = async () => {
+
         try {
-            console.log("handleLoginWithGoogle")
             setLoading(true)
-            const googleSignInResponse = await signIn("cognito_google")
+
+            const googleSignInResponse = await signIn("cognito_google", {
+                redirect: false,
+                callbackUrl: `http://localhost:3000${query?.callBack}`
+            })
+            console.log("googleSignInResponse:", googleSignInResponse)
             if (googleSignInResponse?.error) {
                 setErrorMessage(googleSignInResponse.error)
-            } else {
-                await router.push('/')
+                setLoading(false)
             }
         } catch (error: any) {
             console.error('Error initiating Google login:', error);
+            setLoading(false)
             setErrorMessage(error.message)
         }
-        setLoading(false)
     };
 
     async function handleLogin() {
         setLoading(true)
         try {
-            const signInResponse = await signIn("Credentials_signIn", {email, password, redirect: false,})
+            const signInResponse = await signIn("Credentials_signIn", {
+                email,
+                password,
+                redirect: false,
+                callbackUrl: `http://localhost:3000${query?.callBack}`
+            })
             console.log("signInResponse:", signInResponse)
             if (signInResponse?.error) {
                 setErrorMessage(signInResponse.error)
-            } else {
-                await router.push('/')
+                setLoading(false)
             }
         } catch (error: any) {
             console.error('Error initiating cognito login:', error);
             setErrorMessage(error.message)
+            setLoading(false)
         }
-        setLoading(false)
     }
 
     // useEffect(() => {
diff --git a/src/views/register/register.tsx b/src/views/register/register.tsx
@@ -9,6 +9,7 @@ import {Amplify, Auth} from "aws-amplify";
 import Spinner from "@/components/common/Spinner";
 import UserInfo from '../Profile/userInfo'
 import TextField from "@mui/material/TextField";
+import {useRouter} from "next/router";
 
 const COGNITO_REGION = process.env.NEXT_PUBLIC_COGNITO_REGION;
 const LOGIN_REGISTER_COGNITO_CLIENT_ID = process.env.NEXT_PUBLIC_LOGIN_REGISTER_COGNITO_CLIENT_ID;
@@ -35,6 +36,7 @@ const RegisterComponent = () => {
     const [successMessage, setSuccessMessage] = useState('');
     const [errorMessage, setErrorMessage] = useState('');
     const [loading, setLoading] = useState(false);
+    const {query} = useRouter();
     const handleRegistration = async () => {
         // Validate confirm password
         setErrorMessage('');
@@ -60,7 +62,6 @@ const RegisterComponent = () => {
             userPoolId: COGNITO_USER_POOL_ID,
             userPoolWebClientId: LOGIN_REGISTER_COGNITO_CLIENT_ID
         }
-        console.log("awsAmplifyConfig:", awsAmplifyConfig)
         Amplify.configure(awsAmplifyConfig)
         const { name, designation, companyName, receiveUpdates}: userProps = user;
         const params = {
@@ -93,7 +94,7 @@ const RegisterComponent = () => {
     };
     const handleLoginWithGoogle = async () => {
         setLoading(true)
-        await signIn("cognito_google", {redirect: false})
+        await signIn("cognito_google", {redirect: false, callbackUrl: `http://localhost:3000${query?.callBack}`})
     };
 
     const handleUser = async ({validates, user}:  any) => {
@@ -114,24 +115,24 @@ const RegisterComponent = () => {
     return (
         <>
             <div
-                className="Maincontainer bg-dark-600  d-flex justify-content-center align-items-center w-full"
+                className="w-full Maincontainer bg-dark-600 d-flex justify-content-center align-items-center"
                 style={{height: 'auto !important', minHeight: '100vh'}}
             >
-                <div className="container w-full pt-6 px-6 gap-20"
+                <div className="container w-full gap-20 px-6 pt-6"
                      style={{display: 'flex', justifyContent: 'center', marginTop: "-35px"}}>
                     <div className="mt-20">
-                        <Image src={logo} alt="logo" className=" text-center"/>
+                        <Image src={logo} alt="logo" className="text-center "/>
                         <div style={{display: 'flex', alignItems: 'center'}} className="mt-3">
-                            <Image src={check} alt="logo" className=" text-center" style={{marginTop: '-66px'}}/>
-                            <p className="text-white ml-3">
+                            <Image src={check} alt="logo" className="text-center " style={{marginTop: '-66px'}}/>
+                            <p className="ml-3 text-white">
                                 <span style={{color: '#90A4AE'}}>Real-time Monitoring. </span>Track <br/> Ethereum
                                 network hash-rate and
                                 <br/> difficulty in real-time with charts and <br/> historical data.
                             </p>
                         </div>
                         <div style={{display: 'flex', alignItems: 'center'}} className="mt-3">
-                            <Image src={check} alt="logo" className="text-center mt-2" style={{marginTop: '-66px'}}/>
-                            <p className="text-white ml-3">
+                            <Image src={check} alt="logo" className="mt-2 text-center" style={{marginTop: '-66px'}}/>
+                            <p className="ml-3 text-white">
                                 <span style={{color: '#90A4AE'}}>Miner Distribution Analysis.</span>
                                 <br/>
                                 Analyze miner distribution on the
@@ -141,8 +142,8 @@ const RegisterComponent = () => {
                             </p>
                         </div>
                         <div style={{display: 'flex', alignItems: 'center'}} className="mt-3">
-                            <Image src={check} alt="logo" className="text-center mt-2" style={{marginTop: '-66px'}}/>
-                            <p className="text-white ml-3">
+                            <Image src={check} alt="logo" className="mt-2 text-center" style={{marginTop: '-66px'}}/>
+                            <p className="ml-3 text-white">
                                 <span style={{color: '#90A4AE'}}>Miner Distribution Analysis.</span>
                                 <br/>
                                 Analyze miner distribution on the
@@ -153,18 +154,18 @@ const RegisterComponent = () => {
                         </div>
                     </div>
                     <div style={{display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
-                        <div className="sec-box bg-white rounded px-10 mt-8 py-5"
+                        <div className="px-10 py-5 mt-8 bg-white rounded sec-box"
                              style={{height: 'auto !important', width: '464px'}}>
-                            <p className="text-black text-xl font-weight-bold mt-4 text-center"
+                            <p className="mt-4 text-xl text-center text-black font-weight-bold"
                                style={{fontSize: '1.5rem'}}>
                                 Register
                             </p>
                             {errorMessage && <div
-                              className="font-regular mt-5 relative  block w-full rounded-lg bg-red-500 p-2 text-base leading-5 text-white opacity-100">
+                              className="relative block w-full p-2 mt-5 text-base leading-5 text-white bg-red-500 rounded-lg opacity-100 font-regular">
                                 {errorMessage}
                             </div>}
                             {successMessage && <div
-                              className="font-regular mt-5 relative  block w-full rounded-lg bg-green-500 p-4 text-base leading-5 text-white opacity-100">
+                              className="relative block w-full p-4 mt-5 text-base leading-5 text-white bg-green-500 rounded-lg opacity-100 font-regular">
                                 {successMessage}
                             </div>}
                             {loading && <div className={'align-items-center d-flex flex justify-center mt-3'}>
@@ -211,12 +212,12 @@ const RegisterComponent = () => {
                             />
                             <UserInfo handleInfo={handleUser}  />
                             <button
-                                className="text-white font-weight-bold text-center bg-dark-600 w-full rounded py-2 mt-9"
+                                className="w-full py-2 text-center text-white rounded font-weight-bold bg-dark-600 mt-9"
                                 onClick={handleRegistration}
                                 type="button">
                                 REGISTER
                             </button>
-                            <p className="text-black text-md font-weight-bold mt-9 text-center">
+                            <p className="text-center text-black text-md font-weight-bold mt-9">
                                 By clicking “Create account” or “Continue with Google” or “Continue with Github”, you
                                 agree to the&nbsp;
                                 jiffyscan.xyz
@@ -240,7 +241,7 @@ const RegisterComponent = () => {
                             </p>
 
                             <Link href="/login">
-                                <p className=" text-black text-md font-weight-bold mt-5 text-center">
+                                <p className="mt-5 text-center text-black text-md font-weight-bold">
                                     Already have an account? <span style={{color: '#1976D2'}}>Log in</span>
                                 </p>
                             </Link>
diff --git a/src/views/userOp/Paywall.tsx b/src/views/userOp/Paywall.tsx
diff --git a/src/views/userOp/UserOperation.tsx b/src/views/userOp/UserOperation.tsx
