feat: replace ApyChart with ApyHeader, set app min width

OriginProtocol · Sep 28, 2023 · 04324f7 · 04324f7
1 parent 3ff261e
commit 04324f7
Show file tree

Hide file tree

Showing 5 changed files with 115 additions and 10 deletions.
diff --git a/apps/oeth/src/App.tsx b/apps/oeth/src/App.tsx
@@ -7,7 +7,7 @@ export const App = () => {
   return (
     <>
       <CssBaseline />
-      <Stack>
+      <Stack minWidth={420}>
         <Topnav />
         <Container
           sx={{

diff --git a/libs/oeth/redeem/src/components/RedeemSplitCard.tsx b/libs/oeth/redeem/src/components/RedeemSplitCard.tsx
@@ -50,8 +50,12 @@ export const RedeemSplitCard = (props: Omit<StackProps, 'children'>) => {
         whiteSpace: 'nowrap',
       }}
     >
-      <Stack direction="row" alignItems="center" spacing={1} px={2} py={1.5}>
-        {!isXs && <Mix />}
+      <Stack direction="row" alignItems="stretch" spacing={1} px={2} py={1.5}>
+        {!isXs && (
+          <Stack justifyContent="center">
+            <Mix />
+          </Stack>
+        )}
         <Stack flex={1} direction="column">
           <Stack
             direction="row"
@@ -81,7 +85,7 @@ export const RedeemSplitCard = (props: Omit<StackProps, 'children'>) => {
             })}
           </Typography>
         </Stack>
-        <Stack direction="column" alignItems="flex-end" spacing={0.5}>
+        <Stack justifyContent="flex-start" alignItems="flex-end">
           <Stack direction="row" gap={1}>
             <Typography variant="body2" color="text.secondary">
               {intl.formatMessage({ defaultMessage: 'Gas:' })}
@@ -94,7 +98,7 @@ export const RedeemSplitCard = (props: Omit<StackProps, 'children'>) => {
               )}
             </Typography>
           </Stack>
-          <Stack direction="row" gap={1}>
+          {/* <Stack direction="row" gap={1}>
             <Typography variant="body2" color="text.secondary">
               {intl.formatMessage({ defaultMessage: 'Wait time:' })}
             </Typography>
@@ -105,7 +109,7 @@ export const RedeemSplitCard = (props: Omit<StackProps, 'children'>) => {
                 intl.formatMessage({ defaultMessage: '~1 min' })
               )}
             </Typography>
-          </Stack>
+          </Stack> */}
         </Stack>
       </Stack>
       <Divider />

diff --git a/libs/oeth/swap/src/components/ApyHeader.tsx b/libs/oeth/swap/src/components/ApyHeader.tsx
@@ -0,0 +1,101 @@
+import { useState } from 'react';
+
+import {
+  Box,
+  Button,
+  Menu,
+  MenuItem,
+  Paper,
+  Skeleton,
+  Stack,
+  Typography,
+} from '@mui/material';
+import { defineMessage, useIntl } from 'react-intl';
+
+import { useApiesQuery } from '../queries.generated';
+
+import type { StackProps } from '@mui/material';
+
+const trailingOptions = [
+  { label: defineMessage({ defaultMessage: '30 days trailing' }), value: 30 },
+  { label: defineMessage({ defaultMessage: '7 days trailing' }), value: 7 },
+];
+
+export const ApyHeader = (props: StackProps) => {
+  const intl = useIntl();
+  const [trailing, setTrailing] = useState(trailingOptions[0]);
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const { data: apy, isLoading: apyLoading } = useApiesQuery(
+    {
+      limit: 1,
+    },
+    {
+      select: (data) => data.apies[0],
+    },
+  );
+
+  return (
+    <Paper>
+      <Stack
+        direction="row"
+        alignItems="center"
+        justifyContent="space-between"
+        p={(theme) => theme.spacing(2, 3)}
+      >
+        {apyLoading ? (
+          <Skeleton width={100} height={40} />
+        ) : (
+          <Typography
+            fontSize={32}
+            fontWeight={700}
+            fontFamily="Sailec"
+            lineHeight="40px"
+          >
+            {intl.formatNumber(
+              trailing.value === 30 ? apy.apy30DayAvg : apy.apy7DayAvg,
+              { minimumFractionDigits: 2, maximumFractionDigits: 2 },
+            )}
+            %
+          </Typography>
+        )}
+
+        <Button
+          color="secondary"
+          size="small"
+          onClick={(e) => setAnchorEl(e.currentTarget)}
+          sx={{
+            borderRadius: 1,
+            color: 'text.secondary',
+            backgroundColor: 'grey.700',
+            img: { marginLeft: 0.75 },
+          }}
+        >
+          {intl.formatMessage(trailing.label)}
+          <Box component="img" src={`/images/downarrow.png`} />
+        </Button>
+        <Menu
+          anchorEl={anchorEl}
+          open={!!anchorEl}
+          onClose={() => {
+            setAnchorEl(null);
+          }}
+          MenuListProps={{ dense: true }}
+        >
+          {trailingOptions.map((t) => (
+            <MenuItem
+              divider
+              key={t.value}
+              selected={trailing.value === t.value}
+              onClick={() => {
+                setTrailing(t);
+                setAnchorEl(null);
+              }}
+            >
+              {intl.formatMessage(t.label)}
+            </MenuItem>
+          ))}
+        </Menu>
+      </Stack>
+    </Paper>
+  );
+};
diff --git a/libs/oeth/swap/src/views/SwapView.tsx b/libs/oeth/swap/src/views/SwapView.tsx
@@ -20,7 +20,7 @@ import { composeContexts, isNilOrEmpty } from '@origin/shared/utils';
 import { useIntl } from 'react-intl';
 import { useAccount, useBalance } from 'wagmi';
 
-import { ApyChart } from '../components/ApyChart';
+import { ApyHeader } from '../components/ApyHeader';
 import { SwapRoute } from '../components/SwapRoute';
 import { TokenSelectModal } from '../components/TokenSelectModal';
 import { routeActionLabel } from '../constants';
@@ -148,7 +148,7 @@ function SwapViewWrapped() {
 
   return (
     <>
-      <ApyChart />
+      <ApyHeader />
       <Card sx={{ mt: 3 }}>
         <CardHeader
           title={

diff --git a/libs/shared/theme/src/theme.tsx b/libs/shared/theme/src/theme.tsx
@@ -421,8 +421,8 @@ export const theme = extendTheme({
       },
       styleOverrides: {
         text: ({ theme }) => ({
-          borderRadius: theme.shape.borderRadius * 22,
-          backgroundColor: 'grey.900',
+          borderRadius: 15,
+          backgroundColor: theme.palette.grey[800],
         }),
       },
     },