feat: initial market page

.eslintrc.js

@@ -70,7 +70,7 @@ module.exports = {
 
     // Forbid types
     '@typescript-eslint/ban-types': 'error',
-    '@typescript-eslint/no-explicit-any': ['error', { fixToUnknown: true }],
+    '@typescript-eslint/no-explicit-any': ['warn', { fixToUnknown: false }],
     '@typescript-eslint/no-invalid-void-type': 'error',
     '@typescript-eslint/no-unsafe-argument': 'error',
     '@typescript-eslint/no-unsafe-assignment': 'error',

app/fonts.ts

@@ -35,7 +35,7 @@ export const inter = localFont({
 });
 
 export const monospace = localFont({
-  src: '../src/fonts/KodeMono/KodeMono-VariableFont_wght.ttf',
+  src: '../src/fonts/JetBrains_Mono/JetBrainsMono-VariableFont_wght.ttf',
   display: 'swap',
   variable: '--font-monospace',
 });

app/global.css

@@ -70,11 +70,11 @@ body {
   text-size-adjust: 100%;
 }
 
-.bg-secondary {
+.bg-surface {
   background-color: var(--color-background-secondary);
 }
 
-.bg-primary {
+.bg-main {
   background-color: var(--color-background);
 }
 

app/history/components/HistoryTable.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import { useMemo, useState } from 'react';
-import { Pagination } from '@nextui-org/react';
+import { Link, Pagination } from '@nextui-org/react';
 import { Table, TableHeader, TableBody, TableColumn, TableRow, TableCell } from '@nextui-org/table';
 import { ExternalLinkIcon } from '@radix-ui/react-icons';
 import moment from 'moment';
 import Image from 'next/image';
 
 import { formatReadable, formatBalance } from '@/utils/balance';
-import { getExplorerTxURL, getMarketURL } from '@/utils/external';
+import { getExplorerTxURL } from '@/utils/external';
 import { actionTypeToText } from '@/utils/morpho';
 import { getNetworkImg } from '@/utils/networks';
 import { findToken } from '@/utils/tokens';
@@ -33,8 +33,8 @@ export function HistoryTable({ history }: HistoryTableProps) {
   return (
     <Table
       classNames={{
-        th: 'bg-secondary',
-        wrapper: 'rounded-none shadow-none bg-secondary',
+        th: 'bg-surface',
+        wrapper: 'rounded-none shadow-none bg-surface',
       }}
       bottomContent={
         <div className="flex w-full justify-center">
@@ -86,19 +86,14 @@ export function HistoryTable({ history }: HistoryTableProps) {
               {/* id */}
               <TableCell>
                 <div className="flex justify-center font-monospace text-xs">
-                  <a
-                    className="group flex items-center gap-1 no-underline hover:underline"
-                    href={getMarketURL(
-                      tx.data.market.uniqueKey,
-                      tx.data.market.morphoBlue.chain.id,
-                    )}
-                    target="_blank"
+                  <Link
+                    href={`/market/${tx.data.market.morphoBlue.chain.id}/${tx.data.market.uniqueKey}`}
                   >
                     <p>{tx.data.market.uniqueKey.slice(2, 8)} </p>
                     <p className="opacity-0 group-hover:opacity-100">
                       <ExternalLinkIcon />
                     </p>
-                  </a>
+                  </Link>
                 </div>
               </TableCell>
 

app/home/HomePage.tsx

@@ -19,7 +19,7 @@ export default function HomePage() {
   const { address } = useAccount();
 
   return (
-    <div className="flex min-h-screen flex-col bg-primary">
+    <div className="bg-main flex min-h-screen flex-col">
       <div className="flex flex-col items-center justify-center">
         <HomeHeader />
         <main className="container flex flex-col">

app/info/components/info.tsx

@@ -98,7 +98,7 @@ function InfoPage() {
   }
 
   return (
-    <div className="min-h-screen bg-primary font-zen" ref={containerRef}>
+    <div className="bg-main min-h-screen font-zen" ref={containerRef}>
       <Header />
       <main className="container relative mx-auto px-4 py-8">
         <div className="relative overflow-hidden">
@@ -108,7 +108,7 @@ function InfoPage() {
           >
             {sections.map((section, index) => (
               <div key={`section-${index}`} className="w-full flex-shrink-0 px-4 md:px-8 lg:px-16">
-                <div className="mx-auto max-w-3xl rounded-lg bg-secondary px-4 py-6 shadow-lg sm:px-8 sm:py-8 md:px-12">
+                <div className="bg-surface mx-auto max-w-3xl rounded-lg px-4 py-6 shadow-lg sm:px-8 sm:py-8 md:px-12">
                   <h1 className="mb-2 text-center text-3xl font-bold sm:text-4xl">
                     {section.mainTitle}
                   </h1>

app/info/components/risk.tsx

@@ -60,7 +60,7 @@ function RiskPage() {
         <p className="mb-2 text-secondary">
           This page covers advanced topics. For a comprehensive overview of Monarch, please visit
           our{' '}
-          <Link href="/info" className="text-monarch-orange underline">
+          <Link href="/info" className="text-primary underline">
             introduction page
           </Link>
           .
@@ -69,18 +69,18 @@ function RiskPage() {
         <p className="mb-8 text-secondary">
           When choosing direct lending over vaults, you gain more control but also take on more
           responsibilities. The following aspects become{' '}
-          <span className="font-bold text-monarch-primary">your direct responsibility</span>:
+          <span className="font-bold text-primary">your direct responsibility</span>:
         </p>
 
         {riskSections.map((section) => (
           <div key={section.mainTitle} className="mb-8">
             <h2 className="text-2xl font-semibold">{section.mainTitle}</h2>
             <h3 className="mb-4 text-lg text-secondary">{section.subTitle}</h3>
-            <div className="text-gray-800">{section.content}</div>
+            <div className="text-normal">{section.content}</div>
           </div>
         ))}
 
-        <p className="mt-6 rounded-md border-2 border-dashed border-gray-300 p-4 font-zen text-sm text-gray-600">
+        <p className="mt-6 rounded-md border-2 border-dashed border-primary p-4 font-zen text-sm text-secondary">
           While these responsibilities require more active management, they also offer opportunities
           for advanced users to optimize their lending strategies. Always conduct your own research
           and ensure you're prepared to handle these responsibilities before engaging in direct

app/info/components/sectionData.tsx

@@ -6,7 +6,7 @@ import vaultsImage from '../../../src/imgs/intro/vaults.png';
 
 function Card({ title, items }: { title: string; items: string[] }) {
   return (
-    <div className="flex-1 rounded-lg bg-primary p-4 shadow">
+    <div className="bg-main flex-1 rounded-lg p-4 shadow">
       <h3 className="mb-2 font-zen text-lg font-bold">{title}</h3>
       <ul className="list-inside list-disc">
         {items.map((item, index) => (