mowblox · Baah-Danso-Kenneth · Nov 11, 2024 · Nov 11, 2024 · Nov 11, 2024 · Nov 11, 2024
diff --git a/frontend/package.json b/frontend/package.json
@@ -15,15 +15,20 @@
     "@radix-ui/react-popover": "^1.1.2",
     "@radix-ui/react-select": "^2.1.2",
     "@radix-ui/react-slot": "^1.1.0",
+    "@tanstack/react-query": "^5.59.20",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "cmdk": "^1.0.0",
+    "connectkit": "^1.8.2",
     "lucide-react": "^0.454.0",
     "next": "15.0.0",
+    "next-auth": "^4.24.10",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "tailwind-merge": "^2.5.4",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss-animate": "^1.0.7",
+    "viem": "^2.21.44",
+    "wagmi": "^2.12.29"
   },
   "devDependencies": {
     "@types/node": "^20.17.3",

diff --git a/frontend/public/images/authImagePage/divider.png b/frontend/public/images/authImagePage/divider.png
diff --git a/frontend/public/images/authImagePage/googleIcon.png b/frontend/public/images/authImagePage/googleIcon.png
diff --git a/frontend/src/app/api/auth/[...nextauth]/route.ts b/frontend/src/app/api/auth/[...nextauth]/route.ts
@@ -0,0 +1,20 @@
+import NextAuth from 'next-auth'
+import GoogleProvider from 'next-auth/providers/google';
+import { NextAuthOptions } from 'next-auth';
+
+const options: NextAuthOptions = {
+  providers: [
+    GoogleProvider({
+      clientId: process.env.GOOGLE_CLIENT_ID || '',
+      clientSecret: process.env.GOOGLE_CLIENT_SECRET ||''
+    })
+  ],
+
+  pages:{
+    signIn: '/authentication'
+  }
+}
+
+const handler = NextAuth(options);
+
+export {handler as GET , handler as POST};
diff --git a/frontend/src/app/authentication/layout.tsx b/frontend/src/app/authentication/layout.tsx
@@ -0,0 +1,17 @@
+'use client'
+import Header from '@/components/shared/Header'
+import React from 'react'
+
+function Layout({children}:{children:React.ReactNode}) {
+  return (
+    <div>
+        <Header darkMode={false} toggleDarkMode={() => {}} />
+      <div>
+        {children}
+      </div>
+
+      </div>
+  )
+}
+
+export default Layout
diff --git a/frontend/src/app/authentication/page.tsx b/frontend/src/app/authentication/page.tsx
@@ -0,0 +1,13 @@
+'use client'
+import AuthForm from '@/components/shared/authenticationContent/AuthForm'
+import React from 'react'
+
+function page() {
+  return (
+    <div className='flex justify-center mt-10'>
+      <AuthForm isLogin={false}/>
+    </div>
+  )
+}
+
+export default page
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
@@ -1,6 +1,9 @@
 import type { Metadata } from "next";
 import { Poltawski_Nowy, Poppins } from 'next/font/google'
 import "./globals.css";
+import { Web3Provider } from "@/components/Web3Provide";
+import SessionWrapper from "@/components/SessionWrapper";
+
 
 const nowy = Poltawski_Nowy({
   variable: '--font-nowy',
@@ -29,8 +32,12 @@ export default function RootLayout({
       <body
         className={`${poppins.variable} ${nowy.variable} antialiased bg-grayTint dark:bg-dark `}
       >
-        {children}
+        <Web3Provider>
+          <SessionWrapper>
+            {children}
+            </SessionWrapper>
+        </Web3Provider>
       </body>
     </html>
   );
-}
+}
diff --git a/frontend/src/components/SessionWrapper.tsx b/frontend/src/components/SessionWrapper.tsx
@@ -0,0 +1,10 @@
+'use client'
+import {SessionProvider} from 'next-auth/react'
+
+function SessionWrapper({children}:{children:React.ReactNode}) {
+  return (
+    <SessionProvider>{children}</SessionProvider>
+  )
+}
+
+export default SessionWrapper
diff --git a/frontend/src/components/Web3Provide.tsx b/frontend/src/components/Web3Provide.tsx
@@ -0,0 +1,52 @@
+'use client'
+import { WagmiProvider, createConfig, http } from "wagmi";
+import { mainnet } from "wagmi/chains";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ConnectKitProvider, getDefaultConfig } from "connectkit";
+import React from "react";
+
+
+
+
+const config = createConfig(
+  getDefaultConfig({
+    // Your dApps chains
+    chains: [mainnet],
+    transports: {
+      // RPC URL for each chain
+      [mainnet.id]: http(
+        ` https://ethereum-rpc.publicnode.com/${process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID}`,
+      ),
+    },
+
+    // Required API Keys
+    walletConnectProjectId: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID as string,
+
+    // Required App Info
+    appName: "PAYFLOW",
+
+    // Optional App Info
+    appDescription: "A decentralized payment app for easier Convenience using Crypto",
+    appUrl: "https://family.co", // your app's url
+    appIcon: "https://family.co/logo.png", // your app's icon, no bigger than 1024x1024px (max. 1MB)
+  }),
+);
+
+const queryClient = new QueryClient();
+
+export const Web3Provider = ({ children }:{children:React.ReactNode}) => {
+  return (
+    <WagmiProvider config={config}>
+      <QueryClientProvider client={queryClient}>
+      <ConnectKitProvider
+         customTheme={{
+         "--ck-accent-color": "#00D54B",
+        "--ck-accent-text-color": "#ffffff",
+        }}
+>
+  {children}
+</ConnectKitProvider>
+      </QueryClientProvider>
+    </WagmiProvider>
+  );
+};
diff --git a/frontend/src/components/shared/authenticationContent/AuthForm.tsx b/frontend/src/components/shared/authenticationContent/AuthForm.tsx
@@ -0,0 +1,47 @@
+'use client'
+import GoogleButton from "./GoogleButton";
+import WalletButton from "./WalletButton";
+import Divider from "./Divider";
+
+interface AuthProps{
+  isLogin: boolean;
+}
+
+interface AuthProps {
+  isLogin: boolean;
+}
+
+function AuthForm({ isLogin }: AuthProps) {
+  return (
+    <div className="h-auto flex items-center flex-col justify-center py-10 dark:bg-darkGray dark:text-light w-96 p-6 rounded-lg shadow-lg">
+      <h1 className="text-[35px] font-semibold mb-5 dark:text-light font-nowy">
+        Join <span className="uppercase ">Payflow!</span>
+      </h1>
+
+
+      <div className="flex flex-col gap-4 mb-4">
+        <GoogleButton />
+          <Divider/>
+        <WalletButton />
+      </div>
+
+
+      <p className="text-sm mt-5 dark:text-light ">
+        {isLogin ? (
+          <div className="text-[15px] font-pop">
+            Don&apos;t have an account? {" "}
+            <span className="text-mouve font-extrabold cursor-pointer">Sign Up</span>
+          </div>
+        ) : (
+          <div className="text-[15px] font-pop">
+            Already have an account?{' '}
+            <span className="cursor-pointer text-mouve font-extrabold">Login</span>
+          </div>
+        )}
+      </p>
+    </div>
+  );
+}
+
+
+export default AuthForm
diff --git a/frontend/src/components/shared/authenticationContent/Divider.tsx b/frontend/src/components/shared/authenticationContent/Divider.tsx
@@ -0,0 +1,14 @@
+import Image from 'next/image'
+import DividerLine from '../../../../public/images/authImagePage/divider.png'
+
+function Divider() {
+  return (
+    <div className='flex flex-row space-x-3'>
+       <Image src={DividerLine} alt=''/>
+         <h1 className='font-pop'>or</h1>
+         <Image src={DividerLine} alt=''/>
+     </div>
+  )
+}
+
+export default Divider
diff --git a/frontend/src/components/shared/authenticationContent/GoogleButton.tsx b/frontend/src/components/shared/authenticationContent/GoogleButton.tsx
@@ -0,0 +1,31 @@
+'use client'
+import Image from 'next/image'
+import React from 'react'
+import GoogleImage from '../../../../public/images/authImagePage/googleIcon.png'
+import { Button } from '@/components/ui/button'
+import { signIn, signOut, useSession } from 'next-auth/react'
+
+
+
+function GoogleButton() {
+  const {data: session} = useSession();
+
+  const handleAuthClick=()=>{
+    if(session){
+      signOut()
+    }else{
+      signIn('google')
+    }
+  }
+  return (
+    <Button onClick={handleAuthClick} className="w-full flex items-center justify-center space-x-3 p-5 py-6 bg-white border border-gray-300 rounded-full hover:bg-gray-100">
+
+      <Image src={GoogleImage} alt="Google logo" width={30} height={30} />
+      <span className="ml-2 font-pop text-[18px] text-dark">
+        {session ? "Sign out" : "Sign in with Google"}
+        </span>
+    </Button>
+  );
+}
+
+export default GoogleButton;
diff --git a/frontend/src/components/shared/authenticationContent/WalletButton.tsx b/frontend/src/components/shared/authenticationContent/WalletButton.tsx
@@ -0,0 +1,22 @@
+import { Button } from '@/components/ui/button';
+import { ConnectKitButton } from 'connectkit';
+import React from 'react'
+
+function WalletButton() {
+  return (
+    <ConnectKitButton.Custom>
+    {({ isConnected, show, truncatedAddress, ensName }) => {
+      return (
+        <Button
+          onClick={show}
+          className="text-nowrap dark:text-light dark:border-light rounded-full font-pop capitalize py-6 sm:py-6 lg:py-6 px-4 sm:px-8 lg:px-5 text-[16px] sm:text-[18px] lg:text-[18px] border text-dark border-dark shadow-none bg-transparent"
+        >
+          {isConnected ? ensName ?? truncatedAddress : 'Connect Wallet'}
+        </Button>
+      );
+    }}
+  </ConnectKitButton.Custom>
+  )
+}
+
+export default WalletButton