feat: add ApyHedaer

- extract ApyHeader to oeth/shared - add ApyHeader to RedeemView - eslint ignore generated.ts
OriginProtocol · Oct 4, 2023 · ed8f878 · ed8f878
1 parent 42a5731
commit ed8f878
Show file tree

Hide file tree

Showing 12 changed files with 298 additions and 335 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -1,2 +1,3 @@
 node_modules
 dist
+*.generated.ts
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -18,7 +18,6 @@
         "@nx/enforce-module-boundaries": [
           "error",
           {
-            "enforceBuildableLibDependency": true,
             "allow": [],
             "depConstraints": [
               {

diff --git a/libs/oeth/history/src/queries.generated.ts b/libs/oeth/history/src/queries.generated.ts
@@ -1,40 +1,21 @@
-import { graphqlClient } from '@origin/oeth/shared';
-import { useQuery } from '@tanstack/react-query';
+import * as Types from '@origin/oeth/shared';
 
-import type * as Types from '@origin/oeth/shared';
-import type { UseQueryOptions } from '@tanstack/react-query';
+import { useQuery, UseQueryOptions } from '@tanstack/react-query';
+import { graphqlClient } from '@origin/oeth/shared';
 export type HistoryPageQueryVariables = Types.Exact<{
   address: Types.Scalars['String']['input'];
   offset: Types.Scalars['Int']['input'];
   filters?: Types.InputMaybe<Array<Types.HistoryType> | Types.HistoryType>;
 }>;
 
-export type HistoryPageQuery = {
-  __typename?: 'Query';
-  addresses: Array<{
-    __typename?: 'Address';
-    balance: string;
-    earned: string;
-    isContract: boolean;
-    rebasingOption: Types.RebasingOption;
-    lastUpdated: string;
-    history: Array<{
-      __typename?: 'History';
-      type: Types.HistoryType;
-      value: string;
-      txHash: string;
-      timestamp: string;
-      balance: string;
-    }>;
-  }>;
-};
 
-export type HistoryApyQueryVariables = Types.Exact<{ [key: string]: never }>;
+export type HistoryPageQuery = { __typename?: 'Query', addresses: Array<{ __typename?: 'Address', balance: string, earned: string, isContract: boolean, rebasingOption: Types.RebasingOption, lastUpdated: string, history: Array<{ __typename?: 'History', type: Types.HistoryType, value: string, txHash: string, timestamp: string, balance: string }> }> };
+
+export type HistoryApyQueryVariables = Types.Exact<{ [key: string]: never; }>;
+
+
+export type HistoryApyQuery = { __typename?: 'Query', apies: Array<{ __typename?: 'APY', apy7DayAvg: number, apy30DayAvg: number }> };
 
-export type HistoryApyQuery = {
-  __typename?: 'Query';
-  apies: Array<{ __typename?: 'APY'; apy7DayAvg: number; apy30DayAvg: number }>;
-};
 
 export const HistoryPageDocument = `
     query HistoryPage($address: String!, $offset: Int!, $filters: [HistoryType!]) {
@@ -59,32 +40,23 @@ export const HistoryPageDocument = `
   }
 }
     `;
-export const useHistoryPageQuery = <TData = HistoryPageQuery, TError = unknown>(
-  variables: HistoryPageQueryVariables,
-  options?: UseQueryOptions<HistoryPageQuery, TError, TData>,
-) =>
-  useQuery<HistoryPageQuery, TError, TData>(
-    ['HistoryPage', variables],
-    graphqlClient<HistoryPageQuery, HistoryPageQueryVariables>(
-      HistoryPageDocument,
-      variables,
-    ),
-    options,
-  );
+export const useHistoryPageQuery = <
+      TData = HistoryPageQuery,
+      TError = unknown
+    >(
+      variables: HistoryPageQueryVariables,
+      options?: UseQueryOptions<HistoryPageQuery, TError, TData>
+    ) =>
+    useQuery<HistoryPageQuery, TError, TData>(
+      ['HistoryPage', variables],
+      graphqlClient<HistoryPageQuery, HistoryPageQueryVariables>(HistoryPageDocument, variables),
+      options
+    );
+
+useHistoryPageQuery.getKey = (variables: HistoryPageQueryVariables) => ['HistoryPage', variables];
+;
 
-useHistoryPageQuery.getKey = (variables: HistoryPageQueryVariables) => [
-  'HistoryPage',
-  variables,
-];
-useHistoryPageQuery.fetcher = (
-  variables: HistoryPageQueryVariables,
-  options?: RequestInit['headers'],
-) =>
-  graphqlClient<HistoryPageQuery, HistoryPageQueryVariables>(
-    HistoryPageDocument,
-    variables,
-    options,
-  );
+useHistoryPageQuery.fetcher = (variables: HistoryPageQueryVariables, options?: RequestInit['headers']) => graphqlClient<HistoryPageQuery, HistoryPageQueryVariables>(HistoryPageDocument, variables, options);
 export const HistoryApyDocument = `
     query HistoryApy {
   apies(limit: 1, orderBy: timestamp_DESC) {
@@ -93,27 +65,20 @@ export const HistoryApyDocument = `
   }
 }
     `;
-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,
-  );
+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
+    );
+
+useHistoryApyQuery.getKey = (variables?: HistoryApyQueryVariables) => variables === undefined ? ['HistoryApy'] : ['HistoryApy', variables];
+;
 
-useHistoryApyQuery.getKey = (variables?: HistoryApyQueryVariables) =>
-  variables === undefined ? ['HistoryApy'] : ['HistoryApy', variables];
-useHistoryApyQuery.fetcher = (
-  variables?: HistoryApyQueryVariables,
-  options?: RequestInit['headers'],
-) =>
-  graphqlClient<HistoryApyQuery, HistoryApyQueryVariables>(
-    HistoryApyDocument,
-    variables,
-    options,
-  );
+useHistoryApyQuery.fetcher = (variables?: HistoryApyQueryVariables, options?: RequestInit['headers']) => graphqlClient<HistoryApyQuery, HistoryApyQueryVariables>(HistoryApyDocument, variables, options);
diff --git a/libs/oeth/redeem/src/views/RedeemView.tsx b/libs/oeth/redeem/src/views/RedeemView.tsx
@@ -8,7 +8,7 @@ import {
   Stack,
   Typography,
 } from '@mui/material';
-import { GasPopover } from '@origin/oeth/shared';
+import { ApyHeader, GasPopover } from '@origin/oeth/shared';
 import { TokenInput } from '@origin/shared/components';
 import { tokens } from '@origin/shared/contracts';
 import {
@@ -87,96 +87,106 @@ function RedeemViewWrapped() {
     amountIn === 0n;
 
   return (
-    <Card>
-      <CardHeader
-        title={
-          <Stack
-            direction="row"
-            justifyContent="space-between"
-            alignItems="center"
-          >
-            <Typography>
-              {intl.formatMessage({ defaultMessage: 'Redeem' })}
-            </Typography>
-            <GasPopover
-              slippage={slippage}
-              onSlippageChange={handleSlippageChange}
-            />
-          </Stack>
-        }
-      />
-      <CardContent>
-        <TokenInput
-          amount={amountIn}
-          onAmountChange={handleAmountInChange}
-          balance={balOeth?.value}
-          isBalanceLoading={isBalOethLoading}
-          token={tokens.mainnet.OETH}
-          isTokenClickDisabled
-          tokenPriceUsd={prices?.OETH}
-          isPriceLoading={isPricesLoading}
-          isConnected={isConnected}
-          isAmountDisabled={isRedeemLoading}
-          inputProps={{ sx: tokenInputStyles }}
-          tokenButtonProps={{ sx: { minWidth: 100, maxWidth: 100 } }}
-          sx={{
-            paddingBlock: 2.5,
-            paddingBlockStart: 2.625,
-            paddingInline: 2,
-            border: '1px solid',
-            borderColor: 'divider',
-            borderRadius: 1,
-            backgroundColor: 'grey.900',
-            '&:hover, &:focus-within': {
-              borderColor: 'transparent',
-            },
-            '&:hover': {
-              background: (theme) =>
-                `linear-gradient(${theme.palette.grey[900]}, ${
-                  theme.palette.grey[900]
-                }) padding-box,
+    <>
+      <ApyHeader />
+      <Card sx={{ mt: 3 }}>
+        <CardHeader
+          title={
+            <Stack
+              direction="row"
+              justifyContent="space-between"
+              alignItems="center"
+            >
+              <Typography>
+                {intl.formatMessage({ defaultMessage: 'Redeem' })}
+              </Typography>
+              <GasPopover
+                slippage={slippage}
+                onSlippageChange={handleSlippageChange}
+                buttonProps={{
+                  sx: {
+                    position: 'relative',
+                    right: (theme) => theme.spacing(-0.75),
+                    svg: { width: 16, height: 16 },
+                  },
+                }}
+              />
+            </Stack>
+          }
+        />
+        <CardContent>
+          <TokenInput
+            amount={amountIn}
+            onAmountChange={handleAmountInChange}
+            balance={balOeth?.value}
+            isBalanceLoading={isBalOethLoading}
+            token={tokens.mainnet.OETH}
+            isTokenClickDisabled
+            tokenPriceUsd={prices?.OETH}
+            isPriceLoading={isPricesLoading}
+            isConnected={isConnected}
+            isAmountDisabled={isRedeemLoading}
+            inputProps={{ sx: tokenInputStyles }}
+            tokenButtonProps={{ sx: { minWidth: 100, maxWidth: 100 } }}
+            sx={{
+              paddingBlock: 2.5,
+              paddingBlockStart: 2.625,
+              paddingInline: 2,
+              border: '1px solid',
+              borderColor: 'divider',
+              borderRadius: 1,
+              backgroundColor: 'grey.900',
+              '&:hover, &:focus-within': {
+                borderColor: 'transparent',
+              },
+              '&:hover': {
+                background: (theme) =>
+                  `linear-gradient(${theme.palette.grey[900]}, ${
+                    theme.palette.grey[900]
+                  }) padding-box,
               linear-gradient(90deg, ${alpha(
                 theme.palette.primary.main,
                 0.4,
               )} 0%, ${alpha(
                 theme.palette.primary.dark,
                 0.4,
               )} 100%) border-box;`,
-            },
-            '&:focus-within': {
-              background: (theme) =>
-                `linear-gradient(${theme.palette.grey[900]}, ${theme.palette.grey[900]}) padding-box,
+              },
+              '&:focus-within': {
+                background: (theme) =>
+                  `linear-gradient(${theme.palette.grey[900]}, ${theme.palette.grey[900]}) padding-box,
              linear-gradient(90deg, var(--mui-palette-primary-main) 0%, var(--mui-palette-primary-dark) 100%) border-box;`,
-            },
-          }}
-        />
-        <Stack sx={{ position: 'relative', width: 1, height: 12 }}>
-          <ArrowButton />
-        </Stack>
-        <RedeemRoute
-          sx={{
-            borderRadius: 1,
-            border: '1px solid',
-            borderColor: 'divider',
-          }}
-        />
-        <ConnectedButton
-          variant="action"
-          fullWidth
-          disabled={redeemButtonDisabled}
-          onClick={handleRedeem}
-          sx={{ mt: 1.5 }}
-        >
-          {isEstimateLoading ? (
-            <CircularProgress size={32} color="inherit" />
-          ) : isRedeemLoading ? (
-            intl.formatMessage({ defaultMessage: 'Waiting for signature' })
-          ) : (
-            redeemButtonLabel
-          )}
-        </ConnectedButton>
-      </CardContent>
-    </Card>
+              },
+            }}
+          />
+          <Stack sx={{ position: 'relative', width: 1, height: 12 }}>
+            <ArrowButton />
+          </Stack>
+          <RedeemRoute
+            sx={{
+              borderRadius: 1,
+              border: '1px solid',
+              borderColor: 'divider',
+            }}
+          />
+          <ConnectedButton
+            variant="action"
+            fullWidth
+            disabled={redeemButtonDisabled}
+            onClick={handleRedeem}
+            sx={{ mt: 1.5 }}
+          >
+            {isEstimateLoading ? (
+              <CircularProgress size={32} color="inherit" />
+            ) : isRedeemLoading ? (
+              intl.formatMessage({ defaultMessage: 'Waiting for signature' })
+            ) : (
+              redeemButtonLabel
+            )}
+          </ConnectedButton>
+        </CardContent>
+      </Card>
+    </>
   );
 }
 

diff --git a/libs/oeth/shared/codegen.ts b/libs/oeth/shared/codegen.ts
@@ -6,7 +6,6 @@ const config: CodegenConfig = {
       schema: process.env.VITE_SUBSQUID_URL,
       documents: ['**/src/**/*.graphql'],
       plugins: ['typescript'],
-      hooks: { afterOneFileWrite: ['prettier --write', 'eslint --fix'] },
       config: {
         scalars: {
           BigInt: 'string',
@@ -22,7 +21,6 @@ const config: CodegenConfig = {
         extension: '.generated.ts',
         baseTypesPath: '~@origin/oeth/shared',
       },
-      hooks: { afterOneFileWrite: ['prettier --write', 'eslint --fix'] },
       plugins: ['typescript-operations', 'typescript-react-query'],
       config: {
         exposeFetcher: true,