implement login ui

package.json

@@ -24,7 +24,7 @@
     "@mui/material": "^5.16.0",
     "@rainbow-me/rainbowkit": "^2.1.3",
     "@react-icons/all-files": "^4.1.0",
-    "@tanstack/react-query": "^5.50.1",
+    "@tanstack/react-query": "^5.51.16",
     "@tanstack/react-query-devtools": "^5.50.1",
     "axios": "^1.7.2",
     "react": "^18.3.1",

src/main.tsx

@@ -1,11 +1,15 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import App from './App';
 import './index.css';
+import '@rainbow-me/rainbowkit/styles.css';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ThemeProvider } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
+import { getDefaultConfig, RainbowKitProvider } from '@rainbow-me/rainbowkit';
+import { WagmiProvider } from 'wagmi';
+import { sepolia } from 'viem/chains';
 import theme from './libs/theme';
+import App from './App';
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -17,13 +21,23 @@ const queryClient = new QueryClient({
   },
 });
 
+const config = getDefaultConfig({
+  appName: 'RainbowKit demo',
+  projectId: 'YOUR_PROJECT_ID',
+  chains: [sepolia],
+});
+
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <QueryClientProvider client={queryClient}>
-      <ThemeProvider theme={theme}>
-        <CssBaseline />
-        <App />
-      </ThemeProvider>
-    </QueryClientProvider>
+    <WagmiProvider config={config}>
+      <QueryClientProvider client={queryClient}>
+        <ThemeProvider theme={theme}>
+          <CssBaseline />
+          <RainbowKitProvider>
+            <App />
+          </RainbowKitProvider>
+        </ThemeProvider>
+      </QueryClientProvider>
+    </WagmiProvider>
   </React.StrictMode>
 );

src/pages/Auth/Login/Login.tsx

@@ -0,0 +1,29 @@
+import { ConnectButton } from '@rainbow-me/rainbowkit';
+import { Box, Typography } from '@mui/material';
+
+export function Login() {
+  return (
+    <div className="h-screen w-full flex">
+      <Box className="w-1/4 p-8 flex flex-col justify-center items-center shadow-2xl">
+        <Typography variant="h6" fontWeight="bold" gutterBottom>
+          Welcome to OnChain
+        </Typography>
+        <Typography variant="body1" gutterBottom>
+          Please connect your wallet to continue.
+        </Typography>
+        <div className="py-3">
+          <ConnectButton />
+        </div>
+      </Box>
+      <Box
+        className="w-3/4 h-full bg-cover bg-center"
+        style={{
+          backgroundImage: 'url(../../../../public/img/login.webp)',
+          backgroundSize: 'cover',
+          backgroundRepeat: 'no-repeat',
+          backgroundPosition: 'center',
+        }}
+      />
+    </div>
+  );
+}

src/pages/Auth/Login/index.ts

@@ -0,0 +1,3 @@
+import { Login } from "./Login";
+
+export default Login;

src/router/index.tsx

@@ -1,5 +1,6 @@
 import { createBrowserRouter } from 'react-router-dom';
 
+import Login from '../pages/Auth/Login';
 import Dashboard from '../pages/Dashboard';
 import Identifiers from '../pages/Identifiers';
 import Permissions from '../pages/Permissions';
@@ -8,6 +9,10 @@ import Attestation from '../pages/Identifiers/Attestation';
 import DefaultLayout from '../layouts/DefaultLayout';
 
 export const router = createBrowserRouter([
+  {
+    path: '/auth/login',
+    element: <Login />,
+  },
   {
     path: '/',
     element: <DefaultLayout />,