frontend: Base from existing dApps

frontend/.env.development

@@ -0,0 +1,5 @@
+# VITE_NETWORK=0x5afd
+# VITE_WEB3_GATEWAY=http://localhost:8545
+VITE_NETWORK=0x5aff
+VITE_WEB3_GATEWAY=https://testnet.sapphire.oasis.dev
+VITE_MESSAGE_BOX_ADDR=0x2dE080e97B0caE9825375D31f5D0eD5751fDf16D

frontend/.env.production

@@ -0,0 +1,3 @@
+VITE_NETWORK=0x5aff
+VITE_WEB3_GATEWAY=https://testnet.sapphire.oasis.dev
+VITE_MESSAGE_BOX_ADDR=0xca5B5E9371e6AedD850a74554a53BA91D2D3508d

frontend/package.json

@@ -10,14 +10,23 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@fontsource-variable/figtree": "^5.1.1",
+    "@fontsource-variable/roboto-mono": "^5.1.0",
+    "@material-design-icons/svg": "^0.14.13",
+    "@metamask/detect-provider": "^2.0.0",
+    "@metamask/jazzicon": "^2.0.0",
+    "ethers": "^6.10.0",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-responsive": "^10.0.0",
+    "react-router-dom": "^6.27.0"
   },
   "devDependencies": {
     "@types/react": "^18.3.10",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react-swc": "^3.5.0",
     "typescript": "^5.5.3",
-    "vite": "^5.4.8"
+    "vite": "^5.4.8",
+    "vite-plugin-svgr": "^4.2.0"
   }
 }

frontend/src/App.tsx

@@ -1,7 +1,37 @@
 import { FC } from 'react'
+import { Layout } from './components/Layout'
+import { createHashRouter, RouterProvider } from 'react-router-dom'
+import { HomePage } from './pages/HomePage'
+import { EIP1193ContextProvider } from './providers/EIP1193Provider'
+import { Web3ContextProvider } from './providers/Web3Provider'
+import { AppStateContextProvider } from './providers/AppStateProvider'
+import { ErrorBoundary } from './components/ErrorBoundary'
+import { RouterErrorBoundary } from './components/RouterErrorBoundary'
+
+const router = createHashRouter([
+  {
+    path: '/',
+    element: <Layout />,
+    errorElement: <RouterErrorBoundary />,
+    children: [
+      {
+        path: '*',
+        element: <HomePage />,
+      },
+    ],
+  },
+])
 
 export const App: FC = () => {
-  return <>Demo starter</>
+  return (
+    <ErrorBoundary>
+      <EIP1193ContextProvider>
+        <Web3ContextProvider>
+          <AppStateContextProvider>
+            <RouterProvider router={router} />
+          </AppStateContextProvider>
+        </Web3ContextProvider>
+      </EIP1193ContextProvider>
+    </ErrorBoundary>
+  )
 }
-
-export default App

frontend/src/components/Alert/index.module.css

@@ -0,0 +1,50 @@
+.card.card {
+  min-height: 450px;
+  padding: 0 4.6875rem 0;
+  margin-bottom: 0;
+  place-self: center;
+  margin-top: -2.5rem;
+}
+
+.alert {
+  text-align: center;
+
+  h2 {
+    color: var(--brand-blue);
+    margin-top: 4.5rem;
+    margin-bottom: 1.625rem;
+  }
+
+  > p {
+    color: var(--brand-extra-dark);
+  }
+
+  .icon {
+    margin: 2rem auto 1.6875rem;
+  }
+
+  .actions {
+    &:empty {
+      display: none;
+    }
+
+    span {
+      text-align: center;
+      color: var(--brand-extra-dark);
+    }
+  }
+
+  .cancelIcon {
+    fill: var(--red);
+  }
+
+  .checkIcon {
+    fill: var(--green);
+  }
+}
+
+@media screen and (max-width: 1000px) {
+  .card.card {
+    margin-top: 2.375rem;
+  }
+}

frontend/src/components/Alert/index.tsx

@@ -0,0 +1,51 @@
+import { FC, PropsWithChildren, ReactElement } from 'react'
+import classes from './index.module.css'
+import { Card } from '../Card'
+import { StringUtils } from '../../utils/string.utils'
+import { CheckIcon } from '../icons/CheckIcon'
+import { CancelIcon } from '../icons/CancelIcon'
+
+type AlertType = 'error' | 'success'
+
+interface AlertTypeValues {
+  header: string
+  icon: ReactElement
+}
+
+const alertTypeValuesMap: Record<AlertType, AlertTypeValues> = {
+  error: {
+    header: 'Something went wrong',
+    icon: <CancelIcon className={classes.cancelIcon} width={106} height={106} />,
+  },
+  success: {
+    header: 'Success',
+    icon: <CheckIcon className={classes.checkIcon} width={106} height={106} />,
+  },
+}
+
+const alertTypeClassMap: Record<AlertType, string> = {
+  error: classes.alertError,
+  success: classes.alertSuccess,
+}
+
+interface Props extends PropsWithChildren {
+  type: AlertType
+  actions?: ReactElement
+  headerText?: string
+  className?: string
+}
+
+export const Alert: FC<Props> = ({ children, className, type, actions, headerText }) => {
+  const { header, icon } = alertTypeValuesMap[type]
+
+  return (
+    <Card className={StringUtils.clsx(classes.card, className, alertTypeClassMap[type])}>
+      <div className={classes.alert}>
+        <h2>{headerText ?? header}</h2>
+        <p className="body">{children}</p>
+        <div className={classes.icon}>{icon}</div>
+        <div className={classes.actions}>{actions}</div>
+      </div>
+    </Card>
+  )
+}