Incompatable => Incompatible etc (#1725)

apps/minifront/src/components/header/header.tsx

@@ -1,5 +1,5 @@
 import { CondensedBlockSyncStatus } from '@repo/ui/components/ui/block-sync-status';
-import { IncompatableBrowserBanner } from '@repo/ui/components/ui/incompatable-browser-banner';
+import { IncompatibleBrowserBanner } from '@repo/ui/components/ui/incompatible-browser-banner';
 import { TestnetBanner } from '@repo/ui/components/ui/testnet-banner';
 import { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
@@ -18,7 +18,7 @@ export const Header = () => {
 
   return (
     <header className='w-full bg-gradient-to-t from-transparent to-black to-40% pb-[3em]'>
-      <IncompatableBrowserBanner />
+      <IncompatibleBrowserBanner />
       <TestnetBanner chainId={chainId} />
       <CondensedBlockSyncStatus
         fullSyncHeight={data?.fullSyncHeight}

packages/ui/components/ui/incompatable-browser-banner/get-compatability.ts → packages/ui/components/ui/incompatible-browser-banner/get-compatibility.ts

@@ -2,15 +2,15 @@ import { UAParser, UAParserInstance, IDevice } from 'ua-parser-js';
 
 const parser: UAParserInstance = new UAParser();
 
-const CompatableBrowsers: Record<string, number> = {
+const CompatibleBrowsers: Record<string, number> = {
   // browser name: min version
 
   // same as https://github.com/prax-wallet/web/blob/main/apps/extension/public/manifest.json#L7
   Chrome: 119,
 };
 
-interface CompatabilityResponse {
-  isIncompatable: boolean;
+interface CompatibilityResponse {
+  isIncompatible: boolean;
   title: string;
   content: string;
 }
@@ -20,45 +20,45 @@ function isDesktop(device: IDevice): boolean {
   return device.type === undefined || !['wearable', 'mobile'].includes(device.type);
 }
 
-function getCompatability(): CompatabilityResponse {
+function getCompatibility(): CompatibilityResponse {
   const browser = parser.getBrowser();
   const device = parser.getDevice();
 
-  if (!CompatableBrowsers[browser.name!]) {
+  if (!CompatibleBrowsers[browser.name!]) {
     return {
-      isIncompatable: true,
-      title: 'Incompatable Browser Detected',
+      isIncompatible: true,
+      title: 'Incompatible Browser Detected',
       content:
         'You are currently using an incompatible browser. For the best experience, we recommend using Chrome as your browser.',
     };
   }
 
   if (
-    !!CompatableBrowsers[browser.name!] &&
-    Number(browser.version) < CompatableBrowsers[browser.name!]!
+    !!CompatibleBrowsers[browser.name!] &&
+    Number(browser.version) < CompatibleBrowsers[browser.name!]!
   ) {
     return {
-      isIncompatable: true,
-      title: 'Incompatable Browser Detected',
+      isIncompatible: true,
+      title: 'Incompatible Browser Detected',
       content:
         'You are currently using an outdated browser. For the best experience, we recommend upgrading Chrome to the latest version.',
     };
   }
 
   if (!isDesktop(device)) {
     return {
-      isIncompatable: true,
-      title: 'Incompatable Device Detected',
+      isIncompatible: true,
+      title: 'Incompatible Device Detected',
       content:
         'You are currently using an incompatible environment. For the best experience, we recommend using a desktop as your device.',
     };
   }
 
   return {
-    isIncompatable: false,
+    isIncompatible: false,
     title: '',
     content: '',
   };
 }
 
-export { getCompatability };
+export { getCompatibility };

packages/ui/components/ui/incompatable-browser-banner/incompatable-browser-banner.test.tsx → packages/ui/components/ui/incompatible-browser-banner/incompatible-browser-banner.test.tsx

@@ -1,6 +1,6 @@
 import { describe, expect, it, vi } from 'vitest';
 import { render } from '@testing-library/react';
-import { IncompatableBrowserBanner } from '.';
+import { IncompatibleBrowserBanner } from '.';
 
 vi.mock('ua-parser-js', () => ({
   UAParser: vi.fn().mockImplementation(() => ({
@@ -39,24 +39,24 @@ vi.mock('ua-parser-js', () => ({
   })),
 }));
 
-describe('<IncompatableBrowserBanner />', () => {
-  it('shouldn’t render when using a compatable browser & device', () => {
-    const { container } = render(<IncompatableBrowserBanner />);
+describe('<IncompatibleBrowserBanner />', () => {
+  it('shouldn’t render when using a compatible browser & device', () => {
+    const { container } = render(<IncompatibleBrowserBanner />);
     expect(container.firstChild).toBe(null);
   });
 
-  it('renders "Incompatable Browser Detected" when not using Chrome', () => {
-    const { container } = render(<IncompatableBrowserBanner />);
-    expect(container).toHaveTextContent('Incompatable Browser Detected');
+  it('renders "Incompatible Browser Detected" when not using Chrome', () => {
+    const { container } = render(<IncompatibleBrowserBanner />);
+    expect(container).toHaveTextContent('Incompatible Browser Detected');
   });
 
-  it('renders "Incompatable Browser Detected" when using a dated version of Chrome', () => {
-    const { container } = render(<IncompatableBrowserBanner />);
-    expect(container).toHaveTextContent('Incompatable Browser Detected');
+  it('renders "Incompatible Browser Detected" when using a dated version of Chrome', () => {
+    const { container } = render(<IncompatibleBrowserBanner />);
+    expect(container).toHaveTextContent('Incompatible Browser Detected');
   });
 
-  it('renders "Incompatable Device Detected" when using a mobile device', () => {
-    const { container } = render(<IncompatableBrowserBanner />);
-    expect(container).toHaveTextContent('Incompatable Device Detected');
+  it('renders "Incompatible Device Detected" when using a mobile device', () => {
+    const { container } = render(<IncompatibleBrowserBanner />);
+    expect(container).toHaveTextContent('Incompatible Device Detected');
   });
 });

packages/ui/components/ui/incompatible-browser-banner/index.tsx

@@ -0,0 +1,8 @@
+import { Banner } from '../banner';
+import { getCompatibility } from './get-compatibility';
+
+export const IncompatibleBrowserBanner = (props: React.ComponentPropsWithoutRef<'div'>) => {
+  const { isIncompatible, title, content } = getCompatibility();
+
+  return isIncompatible && <Banner type='error' title={title} content={content} {...props} />;
+};

packages/ui/components/ui/splash-page/index.tsx

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../card';
-import { IncompatableBrowserBanner } from '../incompatable-browser-banner';
+import { IncompatibleBrowserBanner } from '../incompatible-browser-banner';
 import { FadeTransition } from '../fade-transition';
 import { AnimatedPenumbra } from '../logo/animated-penumbra';
 
@@ -15,7 +15,7 @@ export const SplashPage = ({
 }) => {
   return (
     <FadeTransition>
-      <IncompatableBrowserBanner className='!absolute inset-x-0 top-0' />
+      <IncompatibleBrowserBanner className='!absolute inset-x-0 top-0' />
       <div className='flex min-h-screen flex-col items-center justify-center'>
         <div className='absolute inset-0 z-[-1] flex w-screen items-center justify-center'>
           <AnimatedPenumbra className='w-[calc(100%-25vw)]' />