Merge main into feat/analytics + codegen scalar fix

OriginProtocol · Sep 29, 2023 · 4ccdc5c · 4ccdc5c
2 parents de71b12 + 241e6fe
commit 4ccdc5c
Show file tree

Hide file tree

Showing 80 changed files with 1,815 additions and 1,297 deletions.
diff --git a/apps/oeth/index.html b/apps/oeth/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <title>Oeth</title>
+    <title>OETH</title>
     <meta
       name="description"
       content="An ETH-pegged token that earns yield from all forms of staking"

diff --git a/apps/oeth/src/App.tsx b/apps/oeth/src/App.tsx
@@ -7,24 +7,20 @@ export const App = () => {
   return (
     <>
       <CssBaseline />
-      <Stack>
+      <Stack minWidth={370}>
         <Topnav />
         <Container
           sx={{
-            mt: {
-              xs: 3,
-              md: 5,
-              paddingInline: {
-                xs: 2,
-                md: 0,
-              },
-            },
+            mt: { xs: 3.25, md: 3 },
+            mb: 10,
+            pt: (theme) => ({
+              xs: '112px',
+              md: `${theme.mixins.toolbar.height}px`,
+            }),
           }}
           maxWidth="sm"
         >
-          <Stack mt={3}>
-            <Outlet />
-          </Stack>
+          <Outlet />
         </Container>
       </Stack>
     </>

diff --git a/apps/oeth/src/components/Topnav.tsx b/apps/oeth/src/components/Topnav.tsx
@@ -33,29 +33,40 @@ export function Topnav(props: BoxProps) {
   return (
     <Box
       component="nav"
-      sx={{
+      {...props}
+      sx={(theme) => ({
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        width: 1,
+        zIndex: theme.zIndex.appBar,
+        backgroundColor: alpha(theme.palette.background.default, 0.6),
+        backdropFilter: 'blur(15px)',
+        height: {
+          xs: '112px',
+          md: `${theme.mixins.toolbar.height}px`,
+        },
         display: 'grid',
-        borderBlockEnd: {
+        borderBottom: {
           xs: 'none',
-          md: '1px solid var(--mui-palette-background-paper)',
+          md: `1px solid ${theme.palette.background.paper}`,
         },
-        gap: { xs: 1, md: 10 },
+        columnGap: { xs: 1, md: 10 },
+        rowGap: { xs: 0, md: 10 },
         alignItems: 'center',
-        backgroundColor: 'divider',
-        paddingInline: {
+        px: {
           xs: 1.5,
           md: 3,
         },
-        paddingBlockStart: {
+        pt: {
           xs: 1.5,
           md: 0,
         },
         gridTemplateColumns: {
           xs: '1fr 1fr',
           md: 'auto 1fr auto',
         },
-        ...props?.sx,
-      }}
+      })}
     >
       <Box
         component={Link}
@@ -91,19 +102,9 @@ export function Topnav(props: BoxProps) {
             md: 'span 1',
           },
           marginBlockStart: {
-            xs: 4,
+            xs: 2,
             md: 0,
           },
-          backgroundColor: 'transparent',
-          minHeight: 0,
-          overflow: 'visible',
-          '& .MuiTabs-fixed': {
-            overflow: 'visible !important',
-          },
-          fontSize: {
-            xs: '0.875rem',
-            md: '1rem',
-          },
           '& .MuiTabs-flexContainer': {
             justifyContent: {
               xs: 'center',
@@ -117,50 +118,15 @@ export function Topnav(props: BoxProps) {
             key={route?.path ?? '/'}
             value={route?.path ?? '/'}
             label={intl.formatMessage(route.handle.label)}
-            sx={{
-              fontSize: {
-                xs: '0.875rem',
-                md: '1rem',
-              },
-              position: 'relative',
-              textTransform: 'none',
-              boxSizing: 'borderBox',
-              paddingInline: 2,
-              paddingBlock: { xs: 1, md: 3 },
-              lineHeight: '1.6875rem',
-              '&:hover:after': {
-                content: '""',
-                width: '100%',
-                height: '2px',
-                background: (theme) =>
-                  `linear-gradient(90deg, ${alpha(
-                    theme.palette.primary.main,
-                    0.4,
-                  )} 0%, ${alpha(theme.palette.primary.dark, 0.4)} 100%)`,
-                position: 'absolute',
-                left: 0,
-                bottom: 0,
-                zIndex: 2,
-              },
-            }}
           />
         ))}
       </Tabs>
-
       <Box
         sx={{
           display: 'flex',
           justifyContent: 'flex-end',
           alignItems: 'center',
           gap: { xs: 1, md: 2 },
-          '& > a, & > *': {
-            fontSize: {
-              xs: '0.75rem',
-              md: '1rem',
-            },
-            color: (theme) => theme.palette.primary.contrastText,
-            lineHeight: (theme) => theme.spacing(3),
-          },
         }}
       >
         <MuiLink
@@ -169,30 +135,28 @@ export function Topnav(props: BoxProps) {
           noWrap
           sx={{
             borderRadius: 25,
-            paddingBlock: 0.75,
-            display: 'grid',
-            placeContent: 'center',
-            paddingInline: {
+            paddingX: {
               md: 3,
               xs: 2,
             },
-            fontFamily: 'Inter',
-            fontStyle: 'normal',
+            paddingY: {
+              md: 1,
+              xs: 0.75,
+            },
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
             fontWeight: 500,
-            minHeight: 36,
-            background: ` linear-gradient(0deg, ${alpha(
+            minHeight: { xs: 36, md: 44 },
+            background: `linear-gradient(0deg, ${alpha(
               theme.palette.common.white,
               0.05,
             )} 0%, ${alpha(theme.palette.common.white, 0.05)} 100%), ${
               theme.palette.background.paper
             };`,
             '&:hover': {
               background: (theme) => theme.palette.background.paper,
-              backgroundImage: 'none',
             },
-            color: 'primary.contrastText',
-            boxSizing: 'border-box',
-            lineHeight: '1rem',
           }}
         >
           {isMd
@@ -205,6 +169,21 @@ export function Topnav(props: BoxProps) {
               setAccountModalAnchor(e.currentTarget);
             }
           }}
+          sx={{
+            borderRadius: 25,
+            paddingX: {
+              md: 3,
+              xs: 2,
+            },
+            paddingY: {
+              md: 1,
+              xs: 0.75,
+            },
+            minWidth: 36,
+            maxWidth: { xs: isConnected ? 36 : 160, sm: 160, lg: 220 },
+            fontWeight: 500,
+            minHeight: { xs: 36, md: 44 },
+          }}
         />
         <AccountPopover
           anchor={accountModalAnchor}
@@ -219,7 +198,7 @@ export function Topnav(props: BoxProps) {
           borderColor: (theme) => theme.palette.background.paper,
           position: 'relative',
           width: 'calc(100% + 1.5rem)',
-          bottom: '-3.75rem',
+          bottom: '-3rem',
           left: '-0.75rem',
         }}
       />

diff --git a/apps/oeth/src/main.tsx b/apps/oeth/src/main.tsx
@@ -8,6 +8,7 @@ import { Experimental_CssVarsProvider as CssVarsProvider } from '@mui/material';
 import { chains, queryClient, wagmiConfig } from '@origin/oeth/shared';
 import {
   CurveProvider,
+  GeoFenceProvider,
   NotificationsProvider,
   registerChart,
 } from '@origin/shared/providers';
@@ -42,6 +43,7 @@ root.render(
       [RainbowKitProvider, { chains: chains, theme: darkTheme() }],
       [CurveProvider],
       [NotificationsProvider],
+      [GeoFenceProvider],
     ],
     <RouterProvider router={createHashRouter(routes)} />,
   ),

diff --git a/libs/financial-statement/src/FinancialStatement.generated.ts b/libs/financial-statement/src/FinancialStatement.generated.ts
@@ -12,46 +12,46 @@ export type FinancialStatementQuery = {
   oeths: Array<{
     __typename?: 'OETH';
     blockNumber: number;
-    timestamp: any;
-    totalSupply: any;
+    timestamp: string;
+    totalSupply: string;
   }>;
   curveLps: Array<{
     __typename?: 'CurveLP';
     blockNumber: number;
-    timestamp: any;
-    eth: any;
-    ethOwned: any;
-    oeth: any;
-    oethOwned: any;
-    totalSupply: any;
-    totalSupplyOwned: any;
+    timestamp: string;
+    eth: string;
+    ethOwned: string;
+    oeth: string;
+    oethOwned: string;
+    totalSupply: string;
+    totalSupplyOwned: string;
   }>;
   morphoAaves: Array<{
     __typename?: 'MorphoAave';
     blockNumber: number;
-    timestamp: any;
-    weth: any;
+    timestamp: string;
+    weth: string;
   }>;
   fraxStakings: Array<{
     __typename?: 'FraxStaking';
     blockNumber: number;
-    timestamp: any;
-    frxETH: any;
+    timestamp: string;
+    frxETH: string;
   }>;
   drippers: Array<{
     __typename?: 'Dripper';
     blockNumber: number;
-    timestamp: any;
-    weth: any;
+    timestamp: string;
+    weth: string;
   }>;
   vaults: Array<{
     __typename?: 'Vault';
     blockNumber: number;
-    timestamp: any;
-    weth: any;
-    rETH: any;
-    stETH: any;
-    frxETH: any;
+    timestamp: string;
+    weth: string;
+    rETH: string;
+    stETH: string;
+    frxETH: string;
   }>;
 };
 

diff --git a/libs/financial-statement/src/FinancialStatement.tsx b/libs/financial-statement/src/FinancialStatement.tsx
@@ -274,11 +274,11 @@ export const FinancialStatement = (props: {
           mt={{ xs: 1, sm: 2, md: 3 }}
           color={(theme) => theme.palette.primary.contrastText}
         >
-          <Typography>
+          <Typography fontSize={{ xs: '.75rem' }}>
             {`Last updated ${intlFormat(props.lastUpdated.timestamp)}, `}
             {`block #${props.lastUpdated.blockNumber}`}
           </Typography>
-          <Typography>
+          <Typography fontSize={{ xs: '.75rem' }}>
             {props.ethPrice &&
               `Using ETH price of $${intl.formatNumber(props.ethPrice, {
                 maximumFractionDigits: 2,
@@ -309,7 +309,7 @@ const Header = (props: { columns: string[] }) => {
         sx={{
           backgroundColor: (theme) => theme.palette.background.paperHeader,
         }}
-        fontSize={{ xs: '.875rem', sm: '1.125rem' }}
+        fontSize={{ xs: '.75rem', sm: '.875rem', md: '1rem' }}
         px={{ xs: 1, sm: 2, md: 4 }}
         py={{ xs: 2, sm: 3, md: 4 }}
       >
@@ -353,9 +353,9 @@ const Table = (props: {
       <Stack>
         {/* Header */}
         <Box
-          pt={{ xs: 1, sm: 2, md: 4 }}
+          pt={{ xs: 1.5, sm: 2, md: 4 }}
           px={{ xs: 1, sm: 2, md: 4 }}
-          pb={{ xs: 0.5, sm: 1, md: 2 }}
+          pb={{ xs: 1.5, sm: 2, md: 4 }}
           color={(theme) => theme.palette.primary.contrastText}
           fontSize={{ xs: '.875rem', sm: '1rem' }}
           sx={{
@@ -388,7 +388,7 @@ const Total = (props: { title: string; totals: number[] }) => {
       direction={'row'}
       justifyContent={'space-between'}
       alignItems={'center'}
-      p={{ xs: 1, sm: 2, md: 4 }}
+      p={{ xs: 1.5, sm: 2, md: 4 }}
       color={(theme) => theme.palette.primary.contrastText}
       sx={{ backgroundColor: (theme) => theme.palette.background.paperFooter }}
     >

diff --git a/libs/oeth/history/src/components/APYContainer.tsx b/libs/oeth/history/src/components/APYContainer.tsx
@@ -85,24 +85,15 @@ function ValueContainer({
         paddingBlock: 2,
         alignItems: 'center',
         textAlign: 'center',
+        justifyContent: 'space-between',
         flex: 1,
         ...rest?.sx,
       }}
     >
       <Typography variant="body2" color="text.secondary">
         {label}
       </Typography>
-      <Typography
-        sx={{
-          fontFamily: 'Sailec',
-          fontSize: (theme) => theme.typography.pxToRem(20),
-          fontStyle: 'normal',
-          fontWeight: 700,
-          lineHeight: '2rem',
-          textAlign: 'center',
-        }}
-        color="primary.contrastText"
-      >
+      <Typography variant="h4" textAlign="center">
         {isLoading ? <Skeleton width={60} /> : value}
       </Typography>
     </Stack>