diff --git a/index.html b/index.html index e4b78ea..64ba68a 100644 --- a/index.html +++ b/index.html @@ -2,9 +2,8 @@ - - Vite + React + TS + LogID
diff --git a/src/App.tsx b/src/App.tsx index 57885cd..d7d99d9 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -2,16 +2,18 @@ import './App.css'; import '@rainbow-me/rainbowkit/styles.css'; import React from 'react'; -import CssBaseline from '@mui/material/CssBaseline'; -import { ThemeProvider } from '@mui/material/styles'; +import { useMediaQuery } from '@mui/material'; import { + lightTheme, RainbowKitAuthenticationProvider, RainbowKitProvider, } from '@rainbow-me/rainbowkit'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import { Navigate, Route, Routes } from 'react-router-dom'; -import { sepolia } from 'wagmi/chains'; +import { baseSepolia } from 'viem/chains'; +import { useAccount } from 'wagmi'; +import MobileScreensContainer from './components/layouts/MobileScreensContainer'; import { CustomSnackbar } from './components/shared/CustomSnackbar'; import useSiweAuth from './hooks/useSiweAuth'; import DefaultLayout from './layouts/DefaultLayout'; @@ -34,50 +36,62 @@ const queryClient = new QueryClient({ }); const App: React.FC = () => { + const isSmallScreen = useMediaQuery(theme.breakpoints.down('md')); + const { authStatus, authenticationAdapter } = useSiweAuth(); + const { chainId } = useAccount(); globalThis.Buffer = Buffer; + if (isSmallScreen) { + return ; + } + return ( - - - - + + + + ) : ( + + ) + } + /> + + + + } + > + } /> + } /> - ) : ( - - ) - } + path="identifiers/:provider/attestation" + element={} /> - - - - } - > - } /> - } /> - } - /> - } /> - - } /> - Not found} /> - - - + } /> + + } /> + Not found} /> + + diff --git a/src/components/layouts/MobileScreensContainer.tsx b/src/components/layouts/MobileScreensContainer.tsx new file mode 100644 index 0000000..ef3ea25 --- /dev/null +++ b/src/components/layouts/MobileScreensContainer.tsx @@ -0,0 +1,31 @@ +import React from 'react'; +import { Box, Typography } from '@mui/material'; + +const MobileScreensContainer: React.FC = () => { + return ( + + + We are currently not optimized for mobile devices. Please check back on + a desktop or larger screen. + + + ); +}; + +export default MobileScreensContainer; diff --git a/src/components/layouts/SidebarApp.spec.tsx b/src/components/layouts/SidebarApp.spec.tsx index 3617777..adf73b6 100644 --- a/src/components/layouts/SidebarApp.spec.tsx +++ b/src/components/layouts/SidebarApp.spec.tsx @@ -34,7 +34,7 @@ describe('SidebarApp', () => { const drawer = screen.getByTestId('drawer_app'); expect(drawer).toBeInTheDocument(); - const logo = screen.getByText('LOGO'); + const logo = screen.getByText('LogID'); expect(logo).toBeInTheDocument(); SIDEBAR_MENU.forEach((item) => { diff --git a/src/components/layouts/SidebarApp.tsx b/src/components/layouts/SidebarApp.tsx index 46780d4..6ba06ea 100644 --- a/src/components/layouts/SidebarApp.tsx +++ b/src/components/layouts/SidebarApp.tsx @@ -12,6 +12,7 @@ import { import { useLocation, useNavigate } from 'react-router-dom'; import { DRAWER_WIDTH, SIDEBAR_MENU } from '../../libs/constants'; +import theme from '../../libs/theme'; function SidebarApp() { const navigate = useNavigate(); @@ -41,23 +42,64 @@ function SidebarApp() { }} > - LOGO + LogID - + + {' '} {SIDEBAR_MENU.map((item) => ( navigate(item.path)} > - + - {item.title} + ))} diff --git a/src/components/shared/CustomTable.tsx b/src/components/shared/CustomTable.tsx index 3b32428..4ca9d6b 100644 --- a/src/components/shared/CustomTable.tsx +++ b/src/components/shared/CustomTable.tsx @@ -1,3 +1,4 @@ +/* eslint-disable react/no-array-index-key */ import { Avatar, Card, @@ -85,9 +86,9 @@ const CustomTable: React.FC> = ({ ([applicationName, applications], rowIndex) => ( -
+
- {applicationName} + {capitalize(applicationName)}
{xcolumns.map((platform, colIndex) => { diff --git a/src/index.css b/src/index.css index d419bfa..df83f62 100644 --- a/src/index.css +++ b/src/index.css @@ -46,5 +46,7 @@ *, body { - font-family: Inter; + padding: 0; + margin: 0; + box-sizing: border-box; } diff --git a/src/main.tsx b/src/main.tsx index 29457a3..5fdecdb 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,6 +1,8 @@ import './index.css'; import React from 'react'; +import { ThemeProvider } from '@emotion/react'; +import { CssBaseline } from '@mui/material'; import { getDefaultConfig } from '@rainbow-me/rainbowkit'; import ReactDOM from 'react-dom/client'; import { BrowserRouter } from 'react-router-dom'; @@ -8,6 +10,7 @@ import { baseSepolia, optimismSepolia } from 'viem/chains'; import { http, WagmiProvider } from 'wagmi'; import App from './App'; +import theme from './libs/theme'; if (!import.meta.env.VITE_PROJECT_ID) { throw new Error('VITE_PROJECT_ID environment variable is required'); @@ -31,7 +34,10 @@ ReactDOM.createRoot(document.getElementById('root')!).render( - + + + + diff --git a/src/pages/Auth/Login/Login.tsx b/src/pages/Auth/Login/Login.tsx index 362a1b3..2a9ded6 100644 --- a/src/pages/Auth/Login/Login.tsx +++ b/src/pages/Auth/Login/Login.tsx @@ -5,8 +5,8 @@ export function Login() { return (
- - Welcome to OnChain + + Welcome to LogID Please connect your wallet to continue. diff --git a/src/pages/Identifiers/Attestation/Attestation.tsx b/src/pages/Identifiers/Attestation/Attestation.tsx index edfc67c..5d0d6c9 100644 --- a/src/pages/Identifiers/Attestation/Attestation.tsx +++ b/src/pages/Identifiers/Attestation/Attestation.tsx @@ -13,7 +13,7 @@ import { AttestPayload } from '../../../interfaces'; const steps = [ { label: 'Authenticate' }, { label: 'Attest' }, - { label: 'Transact' }, + { label: 'Complete' }, ]; export default function Attestation() { @@ -53,8 +53,8 @@ export default function Attestation() { > Link Your Social Media Accounts - Attest your social media accounts by linking them to your wallet - address. This allows you to prove ownership over these accounts. + Attest the social media accounts you own by linking them to your + wallet address. This allows you to prove ownership. diff --git a/src/pages/Permissions/Permissions.tsx b/src/pages/Permissions/Permissions.tsx index 906bcbc..0a58f95 100644 --- a/src/pages/Permissions/Permissions.tsx +++ b/src/pages/Permissions/Permissions.tsx @@ -288,7 +288,7 @@ export function Permissions() { Note: The process of revoking or granting access to - applications may take some time. + applications may take 1-2 minutes to process.