Skip to content

Commit

Permalink
Feat: React query 5-3, Authentication wrapper component (#1861)
Browse files Browse the repository at this point in the history
Co-authored-by: Nikita Boakrev <right2maresko@gmail.com>
  • Loading branch information
JoaquinBattilana and MareskoY authored Feb 28, 2024
1 parent f27b337 commit ccbd630
Show file tree
Hide file tree
Showing 33 changed files with 266 additions and 130 deletions.
24 changes: 24 additions & 0 deletions src/components/UserAuthenticated.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import { Box, CircularProgress } from '@mui/material';
import React, { ReactNode } from 'react';
import {
ExtendedFormattedUser,
useAppDataContext,
} from 'src/hooks/app-data-provider/useAppDataProvider';
import invariant from 'tiny-invariant';

interface UserAuthenticatedProps {
children: (user: ExtendedFormattedUser) => ReactNode;
}

export const UserAuthenticated = ({ children }: UserAuthenticatedProps) => {
const { user, loading } = useAppDataContext();
if (loading) {
return (
<Box sx={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
<CircularProgress />
</Box>
);
}
invariant(user, 'User data loaded but no user found');
return <>{children(user)}</>;
};
28 changes: 17 additions & 11 deletions src/components/transactions/Borrow/BorrowModal.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { PERMISSION } from '@aave/contract-helpers';
import { Trans } from '@lingui/macro';
import React, { useState } from 'react';
import { UserAuthenticated } from 'src/components/UserAuthenticated';
import { ModalContextType, ModalType, useModalContext } from 'src/hooks/useModal';
import { useProtocolDataContext } from 'src/hooks/useProtocolDataContext';
import { useRootStore } from 'src/store/root';
Expand Down Expand Up @@ -39,17 +40,22 @@ export const BorrowModal = () => {
keepWrappedSymbol={!borrowUnWrapped}
requiredPermission={PERMISSION.BORROWER}
>
{(params) =>
displayGho({ symbol: params.symbol, currentMarket }) ? (
<GhoBorrowModalContent {...params} />
) : (
<BorrowModalContent
{...params}
unwrap={borrowUnWrapped}
setUnwrap={handleBorrowUnwrapped}
/>
)
}
{(params) => (
<UserAuthenticated>
{(user) =>
displayGho({ symbol: params.symbol, currentMarket }) ? (
<GhoBorrowModalContent {...params} user={user} />
) : (
<BorrowModalContent
{...params}
user={user}
unwrap={borrowUnWrapped}
setUnwrap={handleBorrowUnwrapped}
/>
)
}
</UserAuthenticated>
)}
</ModalWrapper>
</BasicModal>
);
Expand Down
14 changes: 11 additions & 3 deletions src/components/transactions/Borrow/BorrowModalContent.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,10 @@ import { FormattedNumber } from 'src/components/primitives/FormattedNumber';
import { Row } from 'src/components/primitives/Row';
import { StyledTxModalToggleButton } from 'src/components/StyledToggleButton';
import { StyledTxModalToggleGroup } from 'src/components/StyledToggleButtonGroup';
import { useAppDataContext } from 'src/hooks/app-data-provider/useAppDataProvider';
import {
ExtendedFormattedUser,
useAppDataContext,
} from 'src/hooks/app-data-provider/useAppDataProvider';
import { useAssetCaps } from 'src/hooks/useAssetCaps';
import { useModalContext } from 'src/hooks/useModal';
import { useProtocolDataContext } from 'src/hooks/useProtocolDataContext';
Expand Down Expand Up @@ -109,9 +112,14 @@ export const BorrowModalContent = ({
unwrap: borrowUnWrapped,
setUnwrap: setBorrowUnWrapped,
symbol,
}: ModalWrapperProps & { unwrap: boolean; setUnwrap: (unwrap: boolean) => void }) => {
user,
}: ModalWrapperProps & {
unwrap: boolean;
setUnwrap: (unwrap: boolean) => void;
user: ExtendedFormattedUser;
}) => {
const { mainTxState: borrowTxState, gasLimit, txError } = useModalContext();
const { user, marketReferencePriceInUsd } = useAppDataContext();
const { marketReferencePriceInUsd } = useAppDataContext();
const { currentNetworkConfig } = useProtocolDataContext();
const { borrowCap } = useAssetCaps();

Expand Down
10 changes: 7 additions & 3 deletions src/components/transactions/Borrow/GhoBorrowModalContent.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,10 @@ import { NoData } from 'src/components/primitives/NoData';
import { Row } from 'src/components/primitives/Row';
import { StyledTxModalToggleButton } from 'src/components/StyledToggleButton';
import { StyledTxModalToggleGroup } from 'src/components/StyledToggleButtonGroup';
import { useAppDataContext } from 'src/hooks/app-data-provider/useAppDataProvider';
import {
ExtendedFormattedUser,
useAppDataContext,
} from 'src/hooks/app-data-provider/useAppDataProvider';
import { useGhoPoolReserve } from 'src/hooks/pool/useGhoPoolReserve';
import { useUserGhoPoolReserve } from 'src/hooks/pool/useUserGhoPoolReserve';
import { useAssetCaps } from 'src/hooks/useAssetCaps';
Expand Down Expand Up @@ -112,11 +115,12 @@ export const GhoBorrowModalContent = ({
poolReserve,
userReserve,
symbol,
}: ModalWrapperProps) => {
user,
}: ModalWrapperProps & { user: ExtendedFormattedUser }) => {
const { mainTxState: borrowTxState, gasLimit, txError, close: closeModal } = useModalContext();
const currentMarketData = useRootStore((state) => state.currentMarketData);
const currentMarket = useRootStore((state) => state.currentMarket);
const { user, marketReferencePriceInUsd, ghoReserveData, ghoUserData, ghoLoadingData } =
const { marketReferencePriceInUsd, ghoReserveData, ghoUserData, ghoLoadingData } =
useAppDataContext();
const { data: _ghoUserData } = useUserGhoPoolReserve(currentMarketData);
const { data: _ghoReserveData } = useGhoPoolReserve(currentMarketData);
Expand Down
Original file line number Diff line number Diff line change
@@ -1,14 +1,19 @@
import React from 'react';
import { UserAuthenticated } from 'src/components/UserAuthenticated';
import { useAppDataContext } from 'src/hooks/app-data-provider/useAppDataProvider';
import { ModalType, useModalContext } from 'src/hooks/useModal';

import { BasicModal } from '../../primitives/BasicModal';
import { ClaimRewardsModalContent } from './ClaimRewardsModalContent';

export const ClaimRewardsModal = () => {
const { type, close } = useModalContext();
const { reserves } = useAppDataContext();
return (
<BasicModal open={type === ModalType.ClaimRewards} setOpen={close}>
<ClaimRewardsModalContent />
<UserAuthenticated>
{(user) => <ClaimRewardsModalContent user={user} reserves={reserves} />}
</UserAuthenticated>
</BasicModal>
);
};
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,10 @@ import { FormattedNumber } from 'src/components/primitives/FormattedNumber';
import { Row } from 'src/components/primitives/Row';
import { TokenIcon } from 'src/components/primitives/TokenIcon';
import { Reward } from 'src/helpers/types';
import { useAppDataContext } from 'src/hooks/app-data-provider/useAppDataProvider';
import {
ComputedReserveData,
ExtendedFormattedUser,
} from 'src/hooks/app-data-provider/useAppDataProvider';
import { useModalContext } from 'src/hooks/useModal';
import { useProtocolDataContext } from 'src/hooks/useProtocolDataContext';
import { useWeb3Context } from 'src/libs/hooks/useWeb3Context';
Expand All @@ -30,9 +33,13 @@ export enum ErrorType {
NOT_ENOUGH_BALANCE,
}

export const ClaimRewardsModalContent = () => {
interface ClaimRewardsModalContentProps {
user: ExtendedFormattedUser;
reserves: ComputedReserveData[];
}

export const ClaimRewardsModalContent = ({ user, reserves }: ClaimRewardsModalContentProps) => {
const { gasLimit, mainTxState: claimRewardsTxState, txError } = useModalContext();
const { user, reserves } = useAppDataContext();
const { currentChainId, currentMarketData } = useProtocolDataContext();
const { chainId: connectedChainId, readOnlyModeAddress } = useWeb3Context();
const [claimableUsd, setClaimableUsd] = useState('0');
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { Trans } from '@lingui/macro';
import React from 'react';
import { UserAuthenticated } from 'src/components/UserAuthenticated';
import { ModalContextType, ModalType, useModalContext } from 'src/hooks/useModal';

import { BasicModal } from '../../primitives/BasicModal';
Expand All @@ -13,7 +14,11 @@ export const CollateralChangeModal = () => {
return (
<BasicModal open={type === ModalType.CollateralChange} setOpen={close}>
<ModalWrapper title={<Trans>Review tx</Trans>} underlyingAsset={args.underlyingAsset}>
{(params) => <CollateralChangeModalContent {...params} />}
{(params) => (
<UserAuthenticated>
{(user) => <CollateralChangeModalContent {...params} user={user} />}
</UserAuthenticated>
)}
</ModalWrapper>
</BasicModal>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { calculateHealthFactorFromBalancesBigUnits, valueToBigNumber } from '@aa
import { Trans } from '@lingui/macro';
import { Typography } from '@mui/material';
import { Warning } from 'src/components/primitives/Warning';
import { useAppDataContext } from 'src/hooks/app-data-provider/useAppDataProvider';
import { ExtendedFormattedUser } from 'src/hooks/app-data-provider/useAppDataProvider';
import { useAssetCaps } from 'src/hooks/useAssetCaps';
import { useModalContext } from 'src/hooks/useModal';

Expand Down Expand Up @@ -30,9 +30,9 @@ export const CollateralChangeModalContent = ({
userReserve,
isWrongNetwork,
symbol,
}: ModalWrapperProps) => {
user,
}: ModalWrapperProps & { user: ExtendedFormattedUser }) => {
const { gasLimit, mainTxState: collateralChangeTxState, txError } = useModalContext();
const { user } = useAppDataContext();
const { debtCeiling } = useAssetCaps();

// Health factor calculations
Expand Down
13 changes: 12 additions & 1 deletion src/components/transactions/DebtSwitch/DebtSwitchModal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { InterestRate } from '@aave/contract-helpers';
import { Trans } from '@lingui/macro';
import React from 'react';
import { BasicModal } from 'src/components/primitives/BasicModal';
import { UserAuthenticated } from 'src/components/UserAuthenticated';
import { ModalContextType, ModalType, useModalContext } from 'src/hooks/useModal';

import { ModalWrapper } from '../FlowCommons/ModalWrapper';
Expand All @@ -19,7 +20,17 @@ export const DebtSwitchModal = () => {
underlyingAsset={args.underlyingAsset}
hideTitleSymbol
>
{(params) => <DebtSwitchModalContent {...params} currentRateMode={args.currentRateMode} />}
{(params) => (
<UserAuthenticated>
{(user) => (
<DebtSwitchModalContent
{...params}
currentRateMode={args.currentRateMode}
user={user}
/>
)}
</UserAuthenticated>
)}
</ModalWrapper>
</BasicModal>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ import {

import {
ComputedUserReserveData,
ExtendedFormattedUser,
useAppDataContext,
} from '../../../hooks/app-data-provider/useAppDataProvider';
import { ModalWrapperProps } from '../FlowCommons/ModalWrapper';
Expand Down Expand Up @@ -71,8 +72,9 @@ export const DebtSwitchModalContent = ({
userReserve,
isWrongNetwork,
currentRateMode,
}: ModalWrapperProps & { currentRateMode: InterestRate }) => {
const { reserves, user, ghoReserveData, ghoUserData, ghoUserLoadingData } = useAppDataContext();
user,
}: ModalWrapperProps & { currentRateMode: InterestRate; user: ExtendedFormattedUser }) => {
const { reserves, ghoReserveData, ghoUserData, ghoUserLoadingData } = useAppDataContext();
const currentChainId = useRootStore((store) => store.currentChainId);
const currentNetworkConfig = useRootStore((store) => store.currentNetworkConfig);
const { currentAccount } = useWeb3Context();
Expand Down
5 changes: 4 additions & 1 deletion src/components/transactions/Emode/EmodeModal.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React from 'react';
import { UserAuthenticated } from 'src/components/UserAuthenticated';
import { ModalContextType, ModalType, useModalContext } from 'src/hooks/useModal';

import { BasicModal } from '../../primitives/BasicModal';
Expand All @@ -10,7 +11,9 @@ export const EmodeModal = () => {
}>;
return (
<BasicModal open={type === ModalType.Emode} setOpen={close}>
<EmodeModalContent mode={args.emode} />
<UserAuthenticated>
{(user) => <EmodeModalContent user={user} mode={args.emode} />}
</UserAuthenticated>
</BasicModal>
);
};
7 changes: 5 additions & 2 deletions src/components/transactions/Emode/EmodeModalContent.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import { Warning } from 'src/components/primitives/Warning';
import { EmodeCategory } from 'src/helpers/types';
import {
AppDataContextType,
ExtendedFormattedUser,
useAppDataContext,
} from 'src/hooks/app-data-provider/useAppDataProvider';
import { useCurrentTimestamp } from 'src/hooks/useCurrentTimestamp';
Expand Down Expand Up @@ -62,9 +63,11 @@ function getInitialEmode(
return eModes[0];
}

export const EmodeModalContent = ({ mode }: EmodeModalContentProps) => {
export const EmodeModalContent = ({
mode,
user,
}: EmodeModalContentProps & { user: ExtendedFormattedUser }) => {
const {
user,
reserves,
eModes,
marketReferenceCurrencyDecimals,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { useRef, useState } from 'react';
import { PriceImpactTooltip } from 'src/components/infoTooltips/PriceImpactTooltip';
import {
ComputedReserveData,
ExtendedFormattedUser,
useAppDataContext,
} from 'src/hooks/app-data-provider/useAppDataProvider';
import { SwapVariant } from 'src/hooks/paraswap/common';
Expand Down Expand Up @@ -36,8 +37,9 @@ export function CollateralRepayModalContent({
debtType,
userReserve,
isWrongNetwork,
}: ModalWrapperProps & { debtType: InterestRate }) {
const { user, reserves, userReserves } = useAppDataContext();
user,
}: ModalWrapperProps & { debtType: InterestRate; user: ExtendedFormattedUser }) {
const { reserves, userReserves } = useAppDataContext();
const { gasLimit, txError, mainTxState } = useModalContext();
const { currentChainId, currentNetworkConfig } = useProtocolDataContext();
const { currentAccount } = useWeb3Context();
Expand Down
29 changes: 19 additions & 10 deletions src/components/transactions/Repay/RepayModal.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { InterestRate, PERMISSION } from '@aave/contract-helpers';
import { Trans } from '@lingui/macro';
import React, { useState } from 'react';
import { UserAuthenticated } from 'src/components/UserAuthenticated';
import { useAppDataContext } from 'src/hooks/app-data-provider/useAppDataProvider';
import { ModalContextType, ModalType, useModalContext } from 'src/hooks/useModal';
import { useProtocolDataContext } from 'src/hooks/useProtocolDataContext';
Expand Down Expand Up @@ -51,17 +52,25 @@ export const RepayModal = () => {
>
{(params) => {
return (
<>
{collateralRepayPossible && !mainTxState.txHash && (
<RepayTypeSelector repayType={repayType} setRepayType={setRepayType} />
<UserAuthenticated>
{(user) => (
<>
{collateralRepayPossible && !mainTxState.txHash && (
<RepayTypeSelector repayType={repayType} setRepayType={setRepayType} />
)}
{repayType === RepayType.BALANCE && (
<RepayModalContent {...params} debtType={args.currentRateMode} user={user} />
)}
{repayType === RepayType.COLLATERAL && (
<CollateralRepayModalContent
{...params}
debtType={args.currentRateMode}
user={user}
/>
)}
</>
)}
{repayType === RepayType.BALANCE && (
<RepayModalContent {...params} debtType={args.currentRateMode} />
)}
{repayType === RepayType.COLLATERAL && (
<CollateralRepayModalContent {...params} debtType={args.currentRateMode} />
)}
</>
</UserAuthenticated>
);
}}
</ModalWrapper>
Expand Down
10 changes: 7 additions & 3 deletions src/components/transactions/Repay/RepayModalContent.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,10 @@ import { Trans } from '@lingui/macro';
import Typography from '@mui/material/Typography';
import BigNumber from 'bignumber.js';
import React, { useEffect, useRef, useState } from 'react';
import { useAppDataContext } from 'src/hooks/app-data-provider/useAppDataProvider';
import {
ExtendedFormattedUser,
useAppDataContext,
} from 'src/hooks/app-data-provider/useAppDataProvider';
import { useModalContext } from 'src/hooks/useModal';
import { useProtocolDataContext } from 'src/hooks/useProtocolDataContext';
import { useRootStore } from 'src/store/root';
Expand Down Expand Up @@ -43,9 +46,10 @@ export const RepayModalContent = ({
nativeBalance,
isWrongNetwork,
debtType,
}: ModalWrapperProps & { debtType: InterestRate }) => {
user,
}: ModalWrapperProps & { debtType: InterestRate; user: ExtendedFormattedUser }) => {
const { gasLimit, mainTxState: repayTxState, txError } = useModalContext();
const { marketReferencePriceInUsd, user } = useAppDataContext();
const { marketReferencePriceInUsd } = useAppDataContext();
const { currentChainId, currentMarketData, currentMarket } = useProtocolDataContext();

const [minRemainingBaseTokenBalance] = useRootStore((store) => [
Expand Down
Loading

1 comment on commit ccbd630

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This commit was deployed on ipfs

Please sign in to comment.