Skip to content

Commit

Permalink
feat: add ApyHedaer
Browse files Browse the repository at this point in the history
- extract ApyHeader to oeth/shared
- add ApyHeader to RedeemView
- eslint ignore generated.ts
  • Loading branch information
toniocodo committed Oct 4, 2023
1 parent 42a5731 commit ed8f878
Show file tree
Hide file tree
Showing 12 changed files with 298 additions and 335 deletions.
1 change: 1 addition & 0 deletions .eslintignore
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
node_modules
dist
*.generated.ts
1 change: 0 additions & 1 deletion .eslintrc.json
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@
"@nx/enforce-module-boundaries": [
"error",
{
"enforceBuildableLibDependency": true,
"allow": [],
"depConstraints": [
{
Expand Down
117 changes: 41 additions & 76 deletions libs/oeth/history/src/queries.generated.ts
Original file line number Diff line number Diff line change
@@ -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!]) {
Expand All @@ -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) {
Expand All @@ -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);
176 changes: 93 additions & 83 deletions libs/oeth/redeem/src/views/RedeemView.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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>
</>
);
}

Expand Down
2 changes: 0 additions & 2 deletions libs/oeth/shared/codegen.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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,
Expand Down
Loading

0 comments on commit ed8f878

Please sign in to comment.