feat: add ApyHeader component, add queries

OriginProtocol · Sep 25, 2023 · 70feee1 · 70feee1
1 parent 0fbe4dd
commit 70feee1
Show file tree

Hide file tree

Showing 14 changed files with 563 additions and 59 deletions.
diff --git a/apps/oeth/src/App.tsx b/apps/oeth/src/App.tsx
@@ -1,10 +1,23 @@
 import { Container, CssBaseline, Stack } from '@mui/material';
-import { registerChart } from '@origin/shared/providers';
+import {
+  CategoryScale,
+  Chart as ChartJS,
+  LinearScale,
+  LineElement,
+  PointElement,
+  registerables,
+} from 'chart.js';
 import { Outlet } from 'react-router-dom';
 
 import { Topnav } from './components/Topnav';
 
-registerChart();
+ChartJS.register(
+  ...registerables,
+  CategoryScale,
+  LinearScale,
+  LineElement,
+  PointElement,
+);
 
 export const App = () => {
   return (

diff --git a/libs/oeth/history/src/components/APYContainer.tsx b/libs/oeth/history/src/components/APYContainer.tsx
@@ -8,7 +8,7 @@ import { useHistoryTableQuery } from '../queries.generated';
 export function APYContainer() {
   const { address, isConnected } = useAccount();
   const { data } = useHistoryTableQuery(
-    { addressId: address?.toLowerCase(), offset: 0 },
+    { address: address?.toLowerCase(), offset: 0 },
     {
       enabled: isConnected,
     },

diff --git a/.../oeth/shared/src/components/ApyHeader.tsx → ...oeth/history/src/components/ApyHeader.tsx b/.../oeth/shared/src/components/ApyHeader.tsx → ...oeth/history/src/components/ApyHeader.tsx
@@ -7,14 +7,20 @@ import {
   IconButton,
   Menu,
   MenuItem,
+  Skeleton,
   Stack,
   Typography,
 } from '@mui/material';
 import { Icon } from '@origin/shared/components';
 import { tokens } from '@origin/shared/contracts';
+import { formatAmount } from '@origin/shared/utils';
 import { useIntl } from 'react-intl';
 import { useAccount, useBalance } from 'wagmi';
 
+import { useHistoryApyQuery, useHistoryTableQuery } from '../queries.generated';
+
+import type { BoxProps } from '@mui/material';
+
 const days = [7, 30];
 
 export function ApyHeader() {
@@ -24,10 +30,16 @@ export function ApyHeader() {
   const { address } = useAccount();
   const { data: oethBalance } = useBalance({
     address,
-    token: tokens.mainnet.OUSD.address,
+    token: tokens.mainnet.OETH.address,
     watch: true,
   });
 
+  const { data: apy, isLoading: apyLoading } = useHistoryApyQuery();
+  const { data: earnings, isLoading: earningsLoading } = useHistoryTableQuery({
+    address: address?.toLowerCase(),
+    offset: 0,
+  });
+
   const handleClose = () => {
     setAnchorEl(null);
   };
@@ -94,24 +106,32 @@ export function ApyHeader() {
             alignItems="center"
             sx={{ justifyContent: { xs: 'center', md: 'flex-start' } }}
           >
-            <Typography
-              sx={{
-                fontWeight: 700,
-                fontSize: '1.5rem',
-                fontStyle: 'normal',
-                lineHeight: '2rem',
-                WebkitTextFillColor: 'transparent',
-                backgroundClip: 'text',
-                fontFamily: 'Sailec',
-                backgroundImage:
-                  'linear-gradient(90deg, var(--mui-palette-primary-light) 0%, #6A36FC 100%)',
-              }}
-            >
-              {intl.formatNumber(6.71 / 100, {
-                minimumFractionDigits: 2,
-                style: 'percent',
-              })}
-            </Typography>
+            {apyLoading ? (
+              <Skeleton width={80} height="2rem" />
+            ) : (
+              <Typography
+                sx={{
+                  fontWeight: 700,
+                  fontSize: '1.5rem',
+                  fontStyle: 'normal',
+                  lineHeight: '2rem',
+                  WebkitTextFillColor: 'transparent',
+                  backgroundClip: 'text',
+                  fontFamily: 'Sailec',
+                  backgroundImage:
+                    'linear-gradient(90deg, var(--mui-palette-primary-light) 0%, #6A36FC 100%)',
+                }}
+              >
+                {intl.formatNumber(
+                  selectedPeriod === 30
+                    ? apy.apies[0].apy30DayAvg
+                    : apy.apies[0].apy7DayAvg,
+                  {
+                    minimumFractionDigits: 2,
+                  },
+                )}
+              </Typography>
+            )}
             <IconButton
               disableRipple
               onClick={(e) => setAnchorEl(e.currentTarget)}
@@ -144,9 +164,7 @@ export function ApyHeader() {
         >
           <ValueContainer
             text={intl.formatMessage({ defaultMessage: 'OETH Balance' })}
-            value={intl.formatNumber(Number(oethBalance?.formatted ?? 0), {
-              minimumFractionDigits: 4,
-            })}
+            value={formatAmount(oethBalance?.value, oethBalance?.decimals)}
           />
           <Box
             sx={{
@@ -177,25 +195,36 @@ export function ApyHeader() {
           </Box>
           <ValueContainer
             text={intl.formatMessage({ defaultMessage: 'Lifetime earnings' })}
-            value={intl.formatNumber(0, { minimumFractionDigits: 4 })}
+            value={intl.formatNumber(earnings?.addressById?.earned, {
+              minimumFractionDigits: 4,
+            })}
+            isLoading={earningsLoading}
           />
         </Stack>
       </Stack>
     </>
   );
 }
 
+type ValueContainerProps = {
+  text: string;
+  value: string;
+  icon?: string;
+  isLoading?: boolean;
+} & BoxProps;
+
 function ValueContainer({
   text,
   value,
   icon,
-}: {
-  text: string;
-  value: string;
-  icon?: string;
-}) {
+  isLoading,
+  ...rest
+}: ValueContainerProps) {
   return (
-    <Box sx={{ flex: 1, display: 'grid', placeContent: 'center' }}>
+    <Box
+      {...rest}
+      sx={{ flex: 1, display: 'grid', placeContent: 'center', ...rest?.sx }}
+    >
       <Typography variant="body2" color="text.secondary">
         {text}
       </Typography>
@@ -216,18 +245,24 @@ function ValueContainer({
           },
         }}
       >
-        {icon ? (
-          <Icon
-            sx={{
-              width: '0.75rem',
-              height: '0.75rem',
-              marginInlineEnd: 0.5,
-            }}
-            src={icon}
-          />
-        ) : undefined}
+        {isLoading ? (
+          <Skeleton width={80} />
+        ) : (
+          <>
+            {icon ? (
+              <Icon
+                sx={{
+                  width: '0.75rem',
+                  height: '0.75rem',
+                  marginInlineEnd: 0.5,
+                }}
+                src={icon}
+              />
+            ) : undefined}
 
-        {value}
+            {value}
+          </>
+        )}
       </Stack>
     </Box>
   );

diff --git a/libs/oeth/history/src/queries.generated.tsx → libs/oeth/history/src/queries.generated.ts b/libs/oeth/history/src/queries.generated.tsx → libs/oeth/history/src/queries.generated.ts
@@ -4,7 +4,7 @@ import { useQuery } from '@tanstack/react-query';
 import type * as Types from '@origin/oeth/shared';
 import type { UseQueryOptions } from '@tanstack/react-query';
 export type HistoryTableQueryVariables = Types.Exact<{
-  addressId: Types.Scalars['String']['input'];
+  address: Types.Scalars['String']['input'];
   offset: Types.Scalars['Int']['input'];
 }>;
 
@@ -29,7 +29,7 @@ export type HistoryTableQuery = {
 };
 
 export type HistoryTableWithFiltersQueryVariables = Types.Exact<{
-  addressId: Types.Scalars['String']['input'];
+  address: Types.Scalars['String']['input'];
   offset: Types.Scalars['Int']['input'];
   filters?: Types.InputMaybe<
     Array<Types.Scalars['String']['input']> | Types.Scalars['String']['input']
@@ -56,9 +56,16 @@ export type HistoryTableWithFiltersQuery = {
   } | null;
 };
 
+export type HistoryApyQueryVariables = Types.Exact<{ [key: string]: never }>;
+
+export type HistoryApyQuery = {
+  __typename?: 'Query';
+  apies: Array<{ __typename?: 'APY'; apy7DayAvg: number; apy30DayAvg: number }>;
+};
+
 export const HistoryTableDocument = `
-    query HistoryTable($addressId: String!, $offset: Int!) {
-  addressById(id: $addressId) {
+    query HistoryTable($address: String!, $offset: Int!) {
+  addressById(id: $address) {
     balance
     earned
     isContract
@@ -90,8 +97,8 @@ export const useHistoryTableQuery = <
     options,
   );
 export const HistoryTableWithFiltersDocument = `
-    query HistoryTableWithFilters($addressId: String!, $offset: Int!, $filters: [String!]) {
-  addressById(id: $addressId) {
+    query HistoryTableWithFilters($address: String!, $offset: Int!, $filters: [String!]) {
+  addressById(id: $address) {
     balance
     earned
     isContract
@@ -127,3 +134,23 @@ export const useHistoryTableWithFiltersQuery = <
     >(HistoryTableWithFiltersDocument, variables),
     options,
   );
+export const HistoryApyDocument = `
+    query HistoryApy {
+  apies(limit: 1, orderBy: timestamp_DESC) {
+    apy7DayAvg
+    apy30DayAvg
+  }
+}
+    `;
+export const useHistoryApyQuery = <TData = HistoryApyQuery, TError = unknown>(
+  variables?: HistoryApyQueryVariables,
+  options?: UseQueryOptions<HistoryApyQuery, TError, TData>,
+) =>
+  useQuery<HistoryApyQuery, TError, TData>(
+    variables === undefined ? ['HistoryApy'] : ['HistoryApy', variables],
+    graphqlClient<HistoryApyQuery, HistoryApyQueryVariables>(
+      HistoryApyDocument,
+      variables,
+    ),
+    options,
+  );
diff --git a/libs/oeth/history/src/queries.graphql b/libs/oeth/history/src/queries.graphql
@@ -1,5 +1,5 @@
-query HistoryTable($addressId: String!, $offset: Int!) {
-  addressById(id: $addressId) {
+query HistoryTable($address: String!, $offset: Int!) {
+  addressById(id: $address) {
     balance
     earned
     isContract
@@ -16,11 +16,11 @@ query HistoryTable($addressId: String!, $offset: Int!) {
 }
 
 query HistoryTableWithFilters(
-  $addressId: String!
+  $address: String!
   $offset: Int!
   $filters: [String!]
 ) {
-  addressById(id: $addressId) {
+  addressById(id: $address) {
     balance
     earned
     isContract
@@ -40,3 +40,10 @@ query HistoryTableWithFilters(
     }
   }
 }
+
+query HistoryApy {
+  apies(limit: 1, orderBy: timestamp_DESC) {
+    apy7DayAvg
+    apy30DayAvg
+  }
+}
diff --git a/libs/oeth/redeem/src/views/RedeemView.tsx b/libs/oeth/redeem/src/views/RedeemView.tsx
@@ -78,7 +78,6 @@ function RedeemViewWrapped() {
 
   return (
     <Card
-      sx={{ mt: 3 }}
       sxCardTitle={{
         padding: 0,
         paddingInline: { xs: 2, md: 3 },

diff --git a/libs/oeth/shared/codegen.ts b/libs/oeth/shared/codegen.ts
@@ -13,7 +13,7 @@ const config: CodegenConfig = {
       documents: ['**/src/**/*.graphql'],
       preset: 'near-operation-file',
       presetConfig: {
-        extension: '.generated.tsx',
+        extension: '.generated.ts',
         baseTypesPath: '~@origin/oeth/shared',
       },
       hooks: { afterOneFileWrite: ['prettier --write', 'eslint --fix'] },

diff --git a/libs/oeth/shared/src/components/index.tsx → libs/oeth/shared/src/components/index.ts b/libs/oeth/shared/src/components/index.tsx → libs/oeth/shared/src/components/index.ts
@@ -1,3 +1,2 @@
-export * from './ApyHeader';
 export * from './AccountPopover';
 export * from './GasPopover';