antoncoding · antoncoding · Dec 16, 2024 · Dec 16, 2024 · Dec 16, 2024 · Dec 16, 2024
diff --git a/README.md b/README.md
@@ -15,3 +15,14 @@
 ## Overview
 
 Monarch is an unofficial user interface designed for composing custom lending strategies on [Morpho Blue](https://github.com/morpho-org/morpho-blue). It enables you to compose your own lending strategies by bundling multiple markets, each with your defined risk parameters. Access Morpho Blue directly without intermediaries, maintaining full control over your lending positions.
+
+## Core Features
+
+🔍 **Market Analysis**: Easily evaluate risk of markets with real-time data, interactive graphs, and oracle breakdown
+
+💱 **Smart Reallocation**: Move funds seamlessly between markets to maximize yield
+
+📊 **Performance Report**: Generate detailed earnings reports from any selected period, aggregating all market positions into a single view
+
+🤖 **Automation** (Beta): Delegate operations to [Monarch Agents](https://github.com/monarch-xyz/monarch-agents) to automate reallocations
+
diff --git a/app/history/components/HistoryContent.tsx b/app/history/components/HistoryContent.tsx
@@ -13,7 +13,7 @@ export default function HistoryContent({ account }: { account: string }) {
   return (
     <div className="flex flex-col justify-between font-zen">
       <Header />
-      <div className="container gap-8" style={{ padding: '0 5%' }}>
+      <div className="container gap-8 px-[5%]">
         <h1 className="py-4 font-zen text-2xl">Transaction History</h1>
 
         {loading ? (

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -25,14 +25,14 @@ export default function RootLayout({ children }: { children: React.ReactNode })
   return (
     <html lang="en" className={`${zen.variable} ${inter.variable} ${monospace.variable}`}>
       <body>
-        <ClientProviders>
-          <Providers>
+        <Providers>
+          <ClientProviders>
             <OnchainProviders>
               {children}
               <RiskNotificationModal />
             </OnchainProviders>
-          </Providers>
-        </ClientProviders>
+          </ClientProviders>
+        </Providers>
       </body>
       <GoogleAnalytics />
     </html>

diff --git a/app/markets/components/markets.tsx b/app/markets/components/markets.tsx
@@ -321,7 +321,7 @@ export default function Markets() {
   return (
     <div className="flex w-full flex-col justify-between font-zen">
       <Header />
-      <div className="container h-full gap-8" style={{ padding: '0 5%' }}>
+      <div className="container h-full gap-8 px-[5%]">
         <h1 className="py-8 font-zen"> Markets </h1>
 
         {showSupplyModal && (

diff --git a/app/positions/components/PositionsContent.tsx b/app/positions/components/PositionsContent.tsx
@@ -1,14 +1,14 @@
 'use client';
 
 import { useMemo, useState } from 'react';
-import { Name } from '@coinbase/onchainkit/identity';
 import Link from 'next/link';
 import { useParams } from 'next/navigation';
 import { FaHistory, FaPlus, FaCircle } from 'react-icons/fa';
 import { TbReport } from 'react-icons/tb';
 import { useAccount } from 'wagmi';
 import { Avatar } from '@/components/Avatar/Avatar';
 import { Button } from '@/components/common/Button';
+import { Name } from '@/components/common/Name';
 import Header from '@/components/layout/header/Header';
 import EmptyScreen from '@/components/Status/EmptyScreen';
 import LoadingScreen from '@/components/Status/LoadingScreen';
@@ -45,9 +45,9 @@ export default function Positions() {
   return (
     <div className="flex flex-col justify-between font-zen">
       <Header />
-      <div className="container gap-8" style={{ padding: '0 5%' }}>
-        <div className="mb-4 flex items-center">
-          <h1 className="font-zen text-2xl">Portfolio</h1>
+      <div className="container h-full gap-8 px-[5%]">
+        <div className="pb-4">
+          <h1 className="font-zen">Portfolio</h1>
         </div>
         <div className="flex flex-col items-center justify-between pb-4 sm:flex-row">
           <div className="flex items-start gap-4">

diff --git a/app/positions/components/onboarding/AssetSelection.tsx b/app/positions/components/onboarding/AssetSelection.tsx
@@ -1,4 +1,5 @@
 import { useMemo } from 'react';
+// import { Tooltip } from '@nextui-org/tooltip';
 import { motion } from 'framer-motion';
 import Image from 'next/image';
 import Link from 'next/link';

diff --git a/app/providers.tsx b/app/providers.tsx
@@ -5,7 +5,13 @@ import { ThemeProvider as NextThemesProvider } from 'next-themes';
 
 export function Providers({ children }: { children: React.ReactNode }) {
   return (
-    <NextThemesProvider disableTransitionOnChange attribute="class">
+    <NextThemesProvider
+      attribute="class"
+      defaultTheme="system"
+      enableSystem
+      disableTransitionOnChange
+      themes={['light', 'dark']}
+    >
       <NextUIProvider>{children}</NextUIProvider>
     </NextThemesProvider>
   );

diff --git a/app/rewards/components/RewardContent.tsx b/app/rewards/components/RewardContent.tsx
@@ -24,8 +24,6 @@ export default function Rewards() {
   const { loading, markets } = useMarkets();
   const { rewards, distributions, loading: loadingRewards } = useUserRewards(account);
 
-  console.log('distributions', distributions);
-
   const marketRewards = useMemo(() => filterMarketRewards(rewards), [rewards]);
   const uniformRewards = useMemo(() => filterUniformRewards(rewards), [rewards]);
 
@@ -53,11 +51,10 @@ export default function Rewards() {
   return (
     <div className="flex flex-col justify-between font-zen">
       <Header />
-
-      <div className="container mt-4 gap-8" style={{ padding: '0 5%' }}>
-        <div className="pb-8">
-          <div className="font-zen text-3xl">Rewards</div>
-          <div className="pt-4 text-base text-gray-500">
+      <div className="container h-full gap-8 px-[5%]">
+        <div className="pb-4">
+          <h1 className="font-zen">Reward</h1>
+          <div className="pt-4 text-secondary">
             Morpho offers multiple reward programs to incentivize user participation. Choose a
             program type below to see more details.
           </div>

diff --git a/app/settings/page.tsx b/app/settings/page.tsx
@@ -15,13 +15,13 @@ export default function SettingsPage() {
   return (
     <div className="flex w-full flex-col justify-between font-zen">
       <Header />
-      <div className="container h-full gap-8" style={{ padding: '0 5%' }}>
+      <div className="container h-full gap-8 px-[5%]">
         <h1 className="py-8 font-zen">Settings</h1>
 
         <div className="flex flex-col gap-6">
           {/* Transaction Settings Section */}
           <div className="flex flex-col gap-4">
-            <h2 className="text-xl font-semibold text-primary">Transaction Settings</h2>
+            <h2 className="text font-monospace text-secondary">Transaction Settings</h2>
 
             <div className="bg-surface rounded p-6">
               <div className="flex items-center justify-between">
@@ -48,8 +48,8 @@ export default function SettingsPage() {
           </div>
 
           {/* Filter Settings Section */}
-          <div className="flex flex-col gap-4">
-            <h2 className="text-xl font-semibold text-primary">Filter Settings</h2>
+          <div className="flex flex-col gap-4 pt-4">
+            <h2 className="text font-monospace text-secondary">Filter Settings</h2>
 
             <div className="bg-surface flex flex-col gap-6 rounded p-6">
               {/* Group related settings with a subtle separator */}

diff --git a/package.json b/package.json
@@ -18,7 +18,6 @@
     "test:coverage:open": "yarn test:coverage && open coverage/lcov-report/index.html"
   },
   "dependencies": {
-    "@coinbase/onchainkit": "0.10.0",
     "@coinbase/wallet-sdk": "^3.9.1",
     "@nextui-org/accordion": "^2.0.35",
     "@nextui-org/button": "^2.0.34",

diff --git a/src/OnchainProviders.tsx b/src/OnchainProviders.tsx
@@ -20,19 +20,22 @@ if (!projectId) {
 
 const wagmiConfig = createWagmiConfig(projectId);
 
-/**
- * Monarch
- * TODO Docs ~~~
- */
 function OnchainProviders({ children }: Props) {
   return (
     <WagmiProvider config={wagmiConfig}>
       <QueryClientProvider client={queryClient}>
         <RainbowKitProvider
           theme={{
-            lightMode: lightTheme(),
-            darkMode: darkTheme(),
+            lightMode: lightTheme({
+              accentColor: '#f45f2d',
+              borderRadius: 'small',
+            }),
+            darkMode: darkTheme({
+              accentColor: '#f45f2d',
+              borderRadius: 'small',
+            }),
           }}
+          modalSize="compact"
         >
           {children}
         </RainbowKitProvider>

diff --git a/src/components/ButtonGroup.tsx b/src/components/ButtonGroup.tsx
@@ -26,7 +26,6 @@ const sizeClasses = {
 const variantStyles = {
   default: (isSelected: boolean) => [
     isSelected ? 'bg-hovered hover:bg-surface z-10' : 'bg-surface hover:bg-hovered',
-    'border border-divider',
     'shadow-sm',
   ],
   primary: (isSelected: boolean) => [

diff --git a/src/components/SearchOrConnect/SearchOrConnect.tsx b/src/components/SearchOrConnect/SearchOrConnect.tsx
@@ -17,7 +17,7 @@ export default function SearchOrConnect({ path }: { path: string }) {
   return (
     <div className="flex flex-col justify-between font-zen">
       <Header />
-      <div className="container items-center justify-center gap-8" style={{ padding: '0 5%' }}>
+      <div className="container items-center justify-center gap-8 px-[5%]">
         <div className="flex justify-center py-14">
           <div className="w-full items-center rounded-md p-12 text-center text-lg text-secondary">
             Connect wallet or search an account to continue.

diff --git a/src/components/common/Name.tsx b/src/components/common/Name.tsx
@@ -0,0 +1,23 @@
+'use client';
+
+import { useEnsName } from 'wagmi';
+
+type NameProps = {
+  address: `0x${string}`;
+  className?: string;
+};
+
+export function Name({ address, className = '' }: NameProps) {
+  const { data: ensName, isLoading } = useEnsName({
+    address,
+    chainId: 1,
+  });
+
+  if (isLoading) {
+    return <span className={className}>...</span>;
+  }
+
+  return (
+    <span className={className}>{ensName ?? `${address.slice(0, 6)}...${address.slice(-4)}`}</span>
+  );
+}
diff --git a/src/components/layout/header/AccountConnect.tsx b/src/components/layout/header/AccountConnect.tsx
@@ -1,5 +1,6 @@
 import { ConnectButton } from '@rainbow-me/rainbowkit';
 import '@rainbow-me/rainbowkit/styles.css';
+import { Button } from '@/components/common';
 import { AccountDropdown } from './AccountDropdown';
 
 /**
@@ -34,13 +35,9 @@ function AccountConnect() {
             {(() => {
               if (!connected) {
                 return (
-                  <button
-                    onClick={openConnectModal}
-                    type="button"
-                    className="inline-flex h-10 flex-grow items-center justify-center gap-2 rounded bg-white px-4 py-2"
-                  >
-                    <div className="text-sm font-medium leading-normal text-black">Connect</div>
-                  </button>
+                  <Button onClick={openConnectModal} type="button" variant="cta">
+                    Connect
+                  </Button>
                 );
               }
 

diff --git a/src/components/layout/header/AccountDropdown.tsx b/src/components/layout/header/AccountDropdown.tsx
@@ -1,5 +1,6 @@
+'use client';
+
 import { useCallback, useState } from 'react';
-import { Name } from '@coinbase/onchainkit/identity';
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
 import { ExitIcon, ExternalLinkIcon } from '@radix-ui/react-icons';
 import { clsx } from 'clsx';
@@ -8,6 +9,7 @@ import { usePathname } from 'next/navigation';
 import { FiSettings } from 'react-icons/fi';
 import { useAccount, useDisconnect } from 'wagmi';
 import { Avatar } from '@/components/Avatar/Avatar';
+import { Name } from '@/components/common/Name';
 import { getSlicedAddress } from '@/utils/address';
 import { getExplorerURL } from '@/utils/external';
 

diff --git a/src/components/layout/header/Navbar.test.tsx b/src/components/layout/header/Navbar.test.tsx
diff --git a/src/components/layout/header/Navbar.tsx b/src/components/layout/header/Navbar.tsx
@@ -1,11 +1,14 @@
 'use client';
 
+import { useEffect, useState } from 'react';
 import { clsx } from 'clsx';
 import Image from 'next/image';
 import NextLink from 'next/link';
 import { usePathname } from 'next/navigation';
 import { useTheme } from 'next-themes';
-import { FaRegMoon, FaSun } from 'react-icons/fa';
+import { FaRegMoon } from 'react-icons/fa';
+import { LuSunMedium } from 'react-icons/lu';
+
 import { useAccount } from 'wagmi';
 import logo from '../../imgs/logo.png';
 import AccountConnect from './AccountConnect';
@@ -62,6 +65,15 @@ export function NavbarTitle() {
 export function Navbar() {
   const { theme, setTheme } = useTheme();
   const { address } = useAccount();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  const toggleTheme = () => {
+    setTheme(theme === 'dark' ? 'light' : 'dark');
+  };
 
   return (
     <nav className="bg-surface flex h-full w-full items-center justify-between rounded px-4 font-zen">
@@ -74,17 +86,16 @@ export function Navbar() {
           <NavbarLink href={`/rewards/${address ?? ''}`} matchKey="/rewards">
             Rewards
           </NavbarLink>
-          {/* <NavbarLink href="/settings/faq">FAQ</NavbarLink> */}
         </div>
 
         <div className="flex items-center gap-4">
           <button
             type="button"
-            onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
-            className="hover:bg-hover flex h-10 w-10 items-center justify-center rounded-full"
+            onClick={toggleTheme}
+            className="flex h-10 w-10 items-center justify-center rounded-full"
             aria-label="Toggle theme"
           >
-            {theme === 'dark' ? <FaSun size={20} /> : <FaRegMoon size={20} />}
+            {mounted && (theme === 'dark' ? <LuSunMedium size={24} /> : <FaRegMoon size={20} />)}
           </button>
           <AccountConnect />
         </div>

diff --git a/src/components/layout/header/NavbarMobile.test.tsx b/src/components/layout/header/NavbarMobile.test.tsx
diff --git a/src/hooks/useTransactionWithToast.tsx b/src/hooks/useTransactionWithToast.tsx
@@ -37,8 +37,6 @@ export function useTransactionWithToast({
     hash,
   });
 
-  console.log('isConfirmed', isConfirmed, toastId, hash);
-
   const onClick = useCallback(() => {
     if (hash) {
       // if chainId is not supported, use 1