feat: add some initial layout

next.config.js

@@ -1,6 +1,6 @@
 /** @type {import('next').NextConfig} */
 module.exports = {
   reactStrictMode: true,
-  assetPrefix: "./",
-  exportTrailingSlash: true,
+  // assetPrefix: "./",
+  trailingSlash: true,
 };

pages/_app.tsx

@@ -4,9 +4,10 @@ import { AppProps } from "next/app";
 import { ThemeProvider } from "@mui/material/styles";
 import CssBaseline from "@mui/material/CssBaseline";
 import { CacheProvider, EmotionCache } from "@emotion/react";
-import theme from "../src/theme";
+import theme from "../src/utils/theme";
 import createEmotionCache from "../src/createEmotionCache";
 import "/public/fonts/inter/inter.css";
+import { MainLayout } from "../src/layouts/MainLayout";
 
 // Client-side cache, shared for the whole session of the user in the browser.
 const clientSideEmotionCache = createEmotionCache();
@@ -25,7 +26,9 @@ export default function MyApp(props: MyAppProps) {
       <ThemeProvider theme={theme}>
         {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
         <CssBaseline />
-        <Component {...pageProps} />
+        <MainLayout>
+          <Component {...pageProps} />
+        </MainLayout>
       </ThemeProvider>
     </CacheProvider>
   );

pages/_document.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import Document, { Html, Head, Main, NextScript } from "next/document";
 import createEmotionServer from "@emotion/server/create-instance";
-import theme from "../src/theme";
+import theme from "../src/utils/theme";
 import createEmotionCache from "../src/createEmotionCache";
 
 export default class MyDocument extends Document {

pages/about.tsx

@@ -1,23 +1,23 @@
-import * as React from 'react';
-import type { NextPage } from 'next';
-import Container from '@mui/material/Container';
-import Typography from '@mui/material/Typography';
-import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
-import Link from '../src/Link';
-import ProTip from '../src/ProTip';
-import Copyright from '../src/Copyright';
+import * as React from "react";
+import type { NextPage } from "next";
+import Container from "@mui/material/Container";
+import Typography from "@mui/material/Typography";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import { Link } from "../src/components/Link";
+import ProTip from "../src/ProTip";
+import Copyright from "../src/Copyright";
 
 const About: NextPage = () => {
   return (
     <Container maxWidth="lg">
       <Box
         sx={{
           my: 4,
-          display: 'flex',
-          flexDirection: 'column',
-          justifyContent: 'center',
-          alignItems: 'center',
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center",
+          alignItems: "center",
         }}
       >
         <Typography variant="h4" component="h1" gutterBottom>

pages/index.tsx

@@ -1,22 +1,22 @@
-import * as React from 'react';
-import type { NextPage } from 'next';
-import Container from '@mui/material/Container';
-import Typography from '@mui/material/Typography';
-import Box from '@mui/material/Box';
-import Link from '../src/Link';
-import ProTip from '../src/ProTip';
-import Copyright from '../src/Copyright';
+import * as React from "react";
+import type { NextPage } from "next";
+import Container from "@mui/material/Container";
+import Typography from "@mui/material/Typography";
+import Box from "@mui/material/Box";
+import { Link } from "../src/components/Link";
+import ProTip from "../src/ProTip";
+import Copyright from "../src/Copyright";
 
 const Home: NextPage = () => {
   return (
     <Container maxWidth="lg">
       <Box
         sx={{
           my: 4,
-          display: 'flex',
-          flexDirection: 'column',
-          justifyContent: 'center',
-          alignItems: 'center',
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center",
+          alignItems: "center",
         }}
       >
         <Typography variant="h4" component="h1" gutterBottom>

pages/markets.tsx

@@ -0,0 +1,3 @@
+export default function Markets() {
+  return <div>hello</div>;
+}

pages/reserve-overview.tsx

@@ -0,0 +1,8 @@
+import { useRouter } from "next/router";
+
+export default function ReserveOverview() {
+  const router = useRouter();
+  const underlyingAddress = router.query.underlyingAddress;
+
+  return <div>{underlyingAddress}</div>;
+}

pages/txn-history.tsx

@@ -0,0 +1,3 @@
+export default function TxnHistory() {
+  return <div>hello</div>;
+}

src/components/Link.tsx

@@ -0,0 +1,116 @@
+import * as React from "react";
+import clsx from "clsx";
+import { useRouter } from "next/router";
+import NextLink, { LinkProps as NextLinkProps } from "next/link";
+import MuiLink, { LinkProps as MuiLinkProps } from "@mui/material/Link";
+import { styled } from "@mui/material/styles";
+
+// Add support for the sx prop for consistency with the other branches.
+const Anchor = styled("a")({});
+
+interface NextLinkComposedProps
+  extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "href">,
+    Omit<NextLinkProps, "href" | "as"> {
+  to: NextLinkProps["href"];
+  linkAs?: NextLinkProps["as"];
+  href?: NextLinkProps["href"];
+}
+
+export const NextLinkComposed = React.forwardRef<
+  HTMLAnchorElement,
+  NextLinkComposedProps
+>(function NextLinkComposed(props, ref) {
+  const {
+    to,
+    linkAs,
+    href,
+    replace,
+    scroll,
+    shallow,
+    prefetch,
+    locale,
+    ...other
+  } = props;
+
+  return (
+    <NextLink
+      href={to}
+      prefetch={prefetch}
+      as={linkAs}
+      replace={replace}
+      scroll={scroll}
+      shallow={shallow}
+      passHref
+      locale={locale}
+    >
+      <Anchor ref={ref} {...other} />
+    </NextLink>
+  );
+});
+
+export type LinkProps = {
+  activeClassName?: string;
+  as?: NextLinkProps["as"];
+  href: NextLinkProps["href"];
+  linkAs?: NextLinkProps["as"]; // Useful when the as prop is shallow by styled().
+  noLinkStyle?: boolean;
+} & Omit<NextLinkComposedProps, "to" | "linkAs" | "href"> &
+  Omit<MuiLinkProps, "href">;
+
+// A styled version of the Next.js Link component:
+// https://nextjs.org/docs/#with-link
+export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
+  function Link(props, ref) {
+    const {
+      activeClassName = "active",
+      as: linkAs,
+      className: classNameProps,
+      href,
+      noLinkStyle,
+      role, // Link don't have roles.
+      ...other
+    } = props;
+
+    const router = useRouter();
+    const pathname = typeof href === "string" ? href : href.pathname;
+    const className = clsx(classNameProps, {
+      [activeClassName]: router.pathname === pathname && activeClassName,
+    });
+
+    const isExternal =
+      typeof href === "string" &&
+      (href.indexOf("http") === 0 || href.indexOf("mailto:") === 0);
+
+    if (isExternal) {
+      if (noLinkStyle) {
+        return (
+          <Anchor className={className} href={href} ref={ref} {...other} />
+        );
+      }
+
+      return <MuiLink className={className} href={href} ref={ref} {...other} />;
+    }
+
+    if (noLinkStyle) {
+      return (
+        <NextLinkComposed
+          className={className}
+          ref={ref}
+          to={href}
+          {...other}
+        />
+      );
+    }
+
+    return (
+      <MuiLink
+        component={NextLinkComposed}
+        linkAs={linkAs}
+        className={className}
+        ref={ref}
+        to={href}
+        {...other}
+      />
+    );
+  }
+);

src/layouts/AppHeader.tsx

@@ -0,0 +1,49 @@
+import * as React from "react";
+import { styled, alpha } from "@mui/material/styles";
+import Box from "@mui/material/Box";
+import Container from "@mui/material/Container";
+import { Button } from "@mui/material";
+import AaveLogo from "@mui/icons-material/GolfCourseSharp";
+import { Link } from "../components/Link";
+import MoreMenu from "./MoreMenu";
+
+const Header = styled("header")(({ theme }) => ({
+  position: "sticky",
+  top: 0,
+  transition: theme.transitions.create("top"),
+  zIndex: theme.zIndex.appBar,
+  backdropFilter: "blur(20px)",
+  boxShadow: `inset 0px -1px 1px ${
+    theme.palette.mode === "dark"
+      ? theme.palette.primaryDark[700]
+      : theme.palette.grey[100]
+  }`,
+  backgroundColor:
+    theme.palette.mode === "dark"
+      ? alpha(theme.palette.primaryDark[900], 0.72)
+      : "rgba(255,255,255,0.72)",
+}));
+
+export default function AppHeader() {
+  return (
+    <Header>
+      <Container sx={{ display: "flex", alignItems: "center", minHeight: 64 }}>
+        <Box
+          component={Link}
+          href={"/"}
+          aria-label="Go to homepage"
+          sx={{ lineHeight: 0, mr: 2 }}
+        >
+          <AaveLogo width={32} />
+        </Box>
+        <Box sx={{ ml: "auto" }} />
+        <Box sx={{ display: { xs: "none", sm: "initial" }, mr: "12px" }}>
+          <Button variant="outlined">Blog</Button>
+        </Box>
+        <Box color="inherit">
+          <MoreMenu />
+        </Box>
+      </Container>
+    </Header>
+  );
+}