fix: env var | cypress | dependencies | ui styles

.env.example

@@ -1,3 +1,3 @@
 NEXT_PUBLIC_RPC_URL= # Example: https://localhost:8545
-NEXT_PUBLIC_PROJECT_ID= # API from WalletConnect
+NEXT_PUBLIC_PROJECT_ID= # ProjectID from WalletConnect
 NEXT_PUBLIC_ALCHEMY_KEY= # API key from Alchemy 

.github/workflows/build-test.yml

@@ -87,3 +87,12 @@ jobs:
 
       - name: Run Tests
         run: yarn test
+
+      - name: Start Application
+        run: yarn start
+
+      - name: Run Cypress E2E Tests
+        uses: cypress-io/github-action@v2
+        with:
+          start: yarn start
+          wait-on: 'http://localhost:3000'

cypress.config.ts

@@ -1,9 +1,7 @@
-import { defineConfig } from "cypress";
+import { defineConfig } from 'cypress';
 
 export default defineConfig({
   e2e: {
-    setupNodeEvents(on, config) {
-      // implement node event listeners here
-    },
+    baseUrl: 'http://localhost:3000',
   },
 });

cypress/cypress.d.ts

@@ -0,0 +1,5 @@
+declare namespace Cypress {
+  interface Chainable {
+    getByTestId(testId: string): Chainable<JQuery<HTMLElement>>;
+  }
+}

cypress/e2e/spec.cy.ts

@@ -0,0 +1,6 @@
+describe('Renders every component', () => {
+  it('Renders App component', () => {
+    cy.visit('/');
+    cy.getByTestId('boilerplate-title').should('exist');
+  });
+});

cypress/support/commands.ts

@@ -1,37 +1,4 @@
 /// <reference types="cypress" />
-// ***********************************************
-// This example commands.ts shows you how to
-// create various custom commands and overwrite
-// existing commands.
-//
-// For more comprehensive examples of custom
-// commands please read more here:
-// https://on.cypress.io/custom-commands
-// ***********************************************
-//
-//
-// -- This is a parent command --
-// Cypress.Commands.add('login', (email, password) => { ... })
-//
-//
-// -- This is a child command --
-// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
-//
-//
-// -- This is a dual command --
-// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
-//
-//
-// -- This will overwrite an existing command --
-// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
-//
-// declare global {
-//   namespace Cypress {
-//     interface Chainable {
-//       login(email: string, password: string): Chainable<void>
-//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
-//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
-//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
-//     }
-//   }
-// }
+Cypress.Commands.add('getByTestId', (testId) => {
+  return cy.get(`[data-testid="${testId}"]`);
+});

cypress/support/e2e.ts

@@ -1,20 +1 @@
-// ***********************************************************
-// This example support/e2e.ts is processed and
-// loaded automatically before your test files.
-//
-// This is a great place to put global configuration and
-// behavior that modifies Cypress.
-//
-// You can change the location of this file or turn off
-// automatically serving support files with the
-// 'supportFile' configuration option.
-//
-// You can read more here:
-// https://on.cypress.io/configuration
-// ***********************************************************
-
-// Import commands.js using ES2015 syntax:
-import './commands'
-
-// Alternatively you can use CommonJS syntax:
-// require('./commands')
+import './commands';

cypress/tsconfig.json

@@ -0,0 +1,9 @@
+{
+    "extends": "../tsconfig.json",
+    "compilerOptions": {
+      "noEmit": true,
+      "types": ["cypress"],
+    },
+    "include": ["**/*.ts"]
+  }
+

package.json

@@ -58,7 +58,6 @@
     "cypress": "13.7.0",
     "eslint": "8.45.0",
     "eslint-config-prettier": "9.0.0",
-    "eslint-formatter-codeframe": "7.32.1",
     "eslint-plugin-import": "2.28.1",
     "eslint-plugin-jsx-a11y": "6.7.1",
     "eslint-plugin-prettier": "5.0.0",

src/config/env.ts

@@ -1,11 +1,17 @@
 import { Env } from '~/types';
 
 export const getEnv = (): Env => {
-  const { NEXT_PUBLIC_RPC_URL, NEXT_PUBLIC_PROJECT_ID, NEXT_PUBLIC_ALCHEMY_KEY } = process.env;
+  const NEXT_PUBLIC_RPC_URL = process.env.NEXT_PUBLIC_RPC_URL;
+  const NEXT_PUBLIC_PROJECT_ID = process.env.NEXT_PUBLIC_PROJECT_ID;
+  const NEXT_PUBLIC_ALCHEMY_KEY = process.env.NEXT_PUBLIC_ALCHEMY_KEY;
+
+  if (!NEXT_PUBLIC_RPC_URL || !NEXT_PUBLIC_PROJECT_ID || !NEXT_PUBLIC_ALCHEMY_KEY) {
+    throw new Error('Environment configuration is missing critical values');
+  }
 
   return {
-    RPC_URL: NEXT_PUBLIC_RPC_URL || '',
-    PROJECT_ID: NEXT_PUBLIC_PROJECT_ID || '',
-    ALCHEMY_KEY: NEXT_PUBLIC_ALCHEMY_KEY || '',
+    RPC_URL: NEXT_PUBLIC_RPC_URL,
+    PROJECT_ID: NEXT_PUBLIC_PROJECT_ID,
+    ALCHEMY_KEY: NEXT_PUBLIC_ALCHEMY_KEY,
   };
 };

src/containers/Footer/index.tsx

@@ -1,6 +1,8 @@
 import { styled } from '@mui/material/styles';
 import { useCustomTheme } from '~/hooks/useTheme';
 
+import { FOOTER_HEIGHT } from '~/utils';
+
 export const Footer = () => {
   return (
     <FooterContainer>
@@ -17,13 +19,13 @@ const FooterContainer = styled('footer')(() => {
   const { currentTheme } = useCustomTheme();
   return {
     display: 'flex',
-    height: '8rem',
+    height: `${FOOTER_HEIGHT}rem`,
     padding: '0 8rem',
     alignItems: 'center',
     justifyContent: 'space-between',
     backgroundColor: currentTheme.backgroundSecondary,
     borderTop: currentTheme.border,
-    width: '100vw',
+    width: '100%',
   };
 });
 

src/containers/Header/index.tsx

@@ -5,14 +5,15 @@ import LightModeIcon from '@mui/icons-material/LightMode';
 import DarkModeIcon from '@mui/icons-material/DarkMode';
 
 import { useCustomTheme } from '~/hooks/useTheme';
+import { zIndex, HEADER_HEIGHT } from '~/utils';
 
 export const Header = () => {
   const { changeTheme, theme } = useCustomTheme();
 
   return (
     <StyledHeader>
       <Logo>Logo</Logo>
-      <IconButton onClick={changeTheme}>{theme === 'dark' ? <LightModeIcon /> : <DarkModeIcon />}</IconButton>
+      <SIconButton onClick={changeTheme}>{theme === 'dark' ? <LightModeIcon /> : <DarkModeIcon />}</SIconButton>
       <ConnectButton />
     </StyledHeader>
   );
@@ -23,13 +24,13 @@ const StyledHeader = styled('header')(() => {
   const { currentTheme } = useCustomTheme();
   return {
     display: 'flex',
-    height: '8rem',
+    height: `${HEADER_HEIGHT}rem`,
     padding: '0 8rem',
     alignItems: 'center',
     justifyContent: 'space-between',
     backgroundColor: currentTheme.backgroundSecondary,
-    width: '100vw',
-    zIndex: 100,
+    width: '100%',
+    zIndex: zIndex.HEADER,
   };
 });
 
@@ -38,3 +39,8 @@ const Logo = styled('h1')({
   fontWeight: 'bold',
   cursor: 'pointer',
 });
+
+const SIconButton = styled(IconButton)({
+  position: 'absolute',
+  left: '50%',
+});

src/containers/Landing/index.tsx

@@ -1,17 +1,19 @@
 import { styled } from '@mui/material/styles';
 
+import { MAIN_HEIGHT } from '~/utils';
+
 export const Landing = () => {
   return (
     <LandingContainer>
-      <h1>Web3 React Boilerplate</h1>
+      <h1 data-testid='boilerplate-title'>Web3 React Boilerplate</h1>
     </LandingContainer>
   );
 };
 
 const LandingContainer = styled('div')({
   display: 'flex',
   flexDirection: 'column',
-  height: 'calc(100vh - 16rem)',
+  height: `calc(100vh - ${MAIN_HEIGHT}rem)`,
   padding: '0 8rem',
   alignItems: 'center',
   justifyContent: 'center',

src/pages/layout.tsx

@@ -32,15 +32,8 @@ const MainContent = styled(Box)`
   width: 100%;
   max-width: 100%;
   overflow-x: hidden;
-
-  max-width: 120rem;
-  padding: 0 4rem;
-  min-height: 100vh;
+  min-height: 100%;
   margin: 0 auto;
-
-  @media (max-width: 600px) {
-    padding: 0 1.6rem;
-  }
 `;
 
 const NoScriptMessage = styled('noscript')(() => {

src/providers/Web3ModalProvider.tsx → src/providers/WalletProvider.tsx

@@ -13,7 +13,7 @@ type Props = {
 
 const queryClient = new QueryClient();
 
-export function Web3ModalProvider({ children }: Props) {
+export function WalletProvider({ children }: Props) {
   return (
     <WagmiProvider config={config}>
       <QueryClientProvider client={queryClient}>

src/providers/index.tsx

@@ -2,7 +2,7 @@ import type { ReactNode } from 'react';
 
 import { StateProvider } from './StateProvider';
 import { ThemeProvider } from './ThemeProvider';
-import { Web3ModalProvider } from './Web3ModalProvider';
+import { WalletProvider } from './WalletProvider';
 
 type Props = {
   children: ReactNode;
@@ -12,7 +12,7 @@ export const Providers = ({ children }: Props) => {
   return (
     <ThemeProvider>
       <StateProvider>
-        <Web3ModalProvider>{children}</Web3ModalProvider>
+        <WalletProvider>{children}</WalletProvider>
       </StateProvider>
     </ThemeProvider>
   );

src/utils/Variables.ts

@@ -20,3 +20,14 @@ export const fontSize = {
   MEDIUM: '1.4rem',
   SMALL: '1.2rem',
 };
+
+export const zIndex = {
+  HEADER: 100,
+  MODAL: 200,
+  BACKDROP: -1,
+  TOAST: 500,
+};
+
+export const HEADER_HEIGHT = 8; // Header height in rem units
+export const FOOTER_HEIGHT = 8; // Footer height in rem units
+export const MAIN_HEIGHT = HEADER_HEIGHT + FOOTER_HEIGHT;

tsconfig.json

@@ -6,7 +6,7 @@
     "module": "ESNext",
     "esModuleInterop": true,
     "skipLibCheck": true,
-    "moduleResolution": "bundler",
+    "moduleResolution": "node",
     "allowImportingTsExtensions": true,
     "resolveJsonModule": true,
     "isolatedModules": true,
@@ -21,10 +21,11 @@
     "incremental": true,
     "plugins": [{ "name": "next" }],
     "baseUrl": ".",
+    "types": ["cypress"],
     "paths": {
       "~/*": ["src/*"]
     }
   },
-  "include": ["./src", "./dist/types/**/*.ts", "./next-env.d.ts"],
+  "include": ["./src", "./dist/types/**/*.ts", "./next-env.d.ts", "./cypress/**/*.ts"],
   "exclude": ["./node_modules"]
 }