Skip to content

Commit 5b7ac36

Browse files
abjt14abjt14
committed
feat(v3-uplift): replace Warning primitive with MUI Alert directly
Convert all 98 <Warning> usages to raw MUI <Alert> across 67 files and delete the wrapper (src/components/primitives/Warning.tsx); remove the redundant dev-showcase specimen. The wrapper only added three sx defaults over a raw Alert. Fold mb:6 + width:100% into each call site (with a collision rule so no duplicate keys) and drop the wrapper's alignItems:center so alerts follow the theme's flex-start, matching the alert spec. All alert styling continues to come from the shared MuiAlert theme override. Dynamic severity, icon, action, internal-class sx, and {...rest} are preserved verbatim at every site.
1 parent 8261c8c commit 5b7ac36

69 files changed

Lines changed: 283 additions & 341 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎pages/safety-module.page.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,14 @@ import { Stake } from '@aave/contract-helpers';
22
import { StakeUIUserData } from '@aave/contract-helpers/dist/esm/V3-uiStakeDataProvider-contract/types';
33
import { ExternalLinkIcon } from '@heroicons/react/outline';
44
import { Trans } from '@lingui/macro';
5-
import { Box, Button, Grid, Stack, SvgIcon, Typography } from '@mui/material';
5+
import { Alert, Box, Button, Grid, Stack, SvgIcon, Typography } from '@mui/material';
66
import { BigNumber } from 'ethers/lib/ethers';
77
import { formatEther } from 'ethers/lib/utils';
88
import dynamic from 'next/dynamic';
99
import { useEffect, useState } from 'react';
1010
import { ConnectWalletPaperStaking } from 'src/components/ConnectWalletPaperStaking';
1111
import { ContentContainer } from 'src/components/ContentContainer';
1212
import { Link } from 'src/components/primitives/Link';
13-
import { Warning } from 'src/components/primitives/Warning';
1413
import { StyledTxModalToggleButton } from 'src/components/StyledToggleButton';
1514
import { StyledTxModalToggleGroup } from 'src/components/StyledToggleButtonGroup';
1615
import { StakeTokenFormatted, useGeneralStakeUiData } from 'src/hooks/stake/useGeneralStakeUiData';
@@ -425,13 +424,13 @@ export default function Staking() {
425424
mt: 4,
426425
}}
427426
>
428-
<Warning severity="warning" sx={{ mb: 0 }}>
427+
<Alert severity="warning" sx={{ width: '100%', mb: 0 }}>
429428
<Trans>
430429
As a result of governance decisions, this ABPT staking pool is now
431430
deprecated. You have the flexibility to either migrate all of your
432431
tokens to v2 or unstake them without any cooldown period.
433432
</Trans>
434-
</Warning>
433+
</Alert>
435434
</Box>
436435
)}
437436
</StakingPanel>

‎src/components/Warnings/CooldownWarning.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,17 @@
11
import { Trans } from '@lingui/macro';
2-
import { Typography } from '@mui/material';
2+
import { Alert, Typography } from '@mui/material';
33
import { useRootStore } from 'src/store/root';
44
import { GENERAL } from 'src/utils/events';
55

66
import { Link } from '../primitives/Link';
7-
import { Warning } from '../primitives/Warning';
87
import { SecondsToString } from '../SecondsToString';
98

109
export const CooldownWarning = ({ cooldownSeconds }: { cooldownSeconds: number }) => {
1110
const cooldownTime = cooldownSeconds;
1211

1312
const trackEvent = useRootStore((store) => store.trackEvent);
1413
return (
15-
<Warning severity="warning" sx={{ '.MuiAlert-message': { p: 0 }, mb: 6 }}>
14+
<Alert severity="warning" sx={{ width: '100%', '.MuiAlert-message': { p: 0 }, mb: 6 }}>
1615
<Typography variant="subheader1">
1716
<Trans>Cooldown period warning</Trans>
1817
</Typography>
@@ -35,6 +34,6 @@ export const CooldownWarning = ({ cooldownSeconds }: { cooldownSeconds: number }
3534
</Link>
3635
</Trans>
3736
</Typography>
38-
</Warning>
37+
</Alert>
3938
);
4039
};

‎src/components/primitives/Warning.tsx‎

Lines changed: 0 additions & 11 deletions
This file was deleted.

‎src/components/transactions/Borrow/BorrowAmountWarning.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { Trans } from '@lingui/macro';
2-
import { Box, Checkbox, Typography } from '@mui/material';
3-
import { Warning } from 'src/components/primitives/Warning';
2+
import { Alert, Box, Checkbox, Typography } from '@mui/material';
43
import { useRootStore } from 'src/store/root';
54
import { GENERAL } from 'src/utils/events';
65

@@ -17,11 +16,11 @@ export const BorrowAmountWarning = ({
1716

1817
return (
1918
<>
20-
<Warning severity="error" sx={{ my: 6 }}>
19+
<Alert severity="error" sx={{ width: '100%', my: 6 }}>
2120
<Trans>
2221
Borrowing this amount will reduce your health factor and increase risk of liquidation.
2322
</Trans>
24-
</Warning>
23+
</Alert>
2524
<Box
2625
sx={{
2726
display: 'flex',

‎src/components/transactions/Borrow/ParameterChangewarning.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import { Trans } from '@lingui/macro';
2-
import { Warning } from 'src/components/primitives/Warning';
2+
import { Alert } from '@mui/material';
33
import { useRootStore } from 'src/store/root';
44
import { GENERAL } from 'src/utils/events';
55

66
export const ParameterChangewarning = ({ underlyingAsset }: { underlyingAsset: string }) => {
77
const trackEvent = useRootStore((store) => store.trackEvent);
88

99
return (
10-
<Warning severity="info" sx={{ my: 6 }}>
10+
<Alert severity="info" sx={{ width: '100%', my: 6 }}>
1111
<Trans>
1212
<b>Attention:</b> Parameter changes via governance can alter your account health factor and
1313
risk of liquidation. Follow the{' '}
@@ -24,6 +24,6 @@ export const ParameterChangewarning = ({ underlyingAsset }: { underlyingAsset: s
2424
</a>{' '}
2525
for updates.
2626
</Trans>
27-
</Warning>
27+
</Alert>
2828
);
2929
};

‎src/components/transactions/Bridge/BridgeModalContent.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { ChainId } from '@aave/contract-helpers';
22
import { SwitchVerticalIcon } from '@heroicons/react/outline';
33
import { Trans } from '@lingui/macro';
44
import {
5+
Alert,
56
Box,
67
Button,
78
IconButton,
@@ -18,7 +19,6 @@ import React, { useEffect, useState } from 'react';
1819
import { ArrowUpRightIcon } from 'src/components/icons/ArrowUpRightIcon';
1920
import { Link } from 'src/components/primitives/Link';
2021
import { Row } from 'src/components/primitives/Row';
21-
import { Warning } from 'src/components/primitives/Warning';
2222
import { TextWithTooltip } from 'src/components/TextWithTooltip';
2323
import {
2424
DetailsNumberLine,
@@ -503,21 +503,21 @@ export const BridgeModalContent = () => {
503503
</Box> */}
504504
<Row /> {/* Spacer */}
505505
{feesExceedWalletBalance && (
506-
<Warning severity="warning" sx={{ my: 0 }}>
506+
<Alert severity="warning" sx={{ width: '100%', my: 0 }}>
507507
<Typography variant="caption">
508508
<Trans>Fees exceed wallet balance</Trans>
509509
</Typography>
510-
</Warning>
510+
</Alert>
511511
)}
512512
</TxModalDetails>
513513
{txError && <GasEstimationError txError={txError} />}
514514

515515
{txErrorBridgeMessage && (
516-
<Warning severity="error" sx={{ mt: 4 }} icon={false}>
516+
<Alert severity="error" sx={{ mb: 6, width: '100%', mt: 4 }} icon={false}>
517517
<Typography variant="caption">
518518
<Trans>Something went wrong fetching bridge message, please try again later.</Trans>
519519
</Typography>
520-
</Warning>
520+
</Alert>
521521
)}
522522

523523
<BridgeActions {...bridgeActionsProps} />

‎src/components/transactions/CollateralChange/CollateralChangeModalContent.tsx‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import { calculateHealthFactorFromBalancesBigUnits, valueToBigNumber } from '@aave/math-utils';
22
import { Trans } from '@lingui/macro';
3-
import { Typography } from '@mui/material';
3+
import { Alert, Typography } from '@mui/material';
44
import { useEffect, useState } from 'react';
5-
import { Warning } from 'src/components/primitives/Warning';
65
import {
76
ExtendedFormattedUser,
87
useAppDataContext,
@@ -148,28 +147,28 @@ export const CollateralChangeModalContent = ({
148147
return (
149148
<>
150149
{showEnableIsolationModeMsg && (
151-
<Warning severity="warning" icon={false} sx={{ mb: 3 }}>
150+
<Alert severity="warning" icon={false} sx={{ width: '100%', mb: 3 }}>
152151
<Trans>
153152
Enabling this asset as collateral increases your borrowing power and Health Factor.
154153
However, it can get liquidated if your health factor drops below 1.
155154
</Trans>
156-
</Warning>
155+
</Alert>
157156
)}
158157

159158
{showDisableIsolationModeMsg && (
160-
<Warning severity="warning" icon={false} sx={{ mb: 3 }}>
159+
<Alert severity="warning" icon={false} sx={{ width: '100%', mb: 3 }}>
161160
<Trans>
162161
Disabling this asset as collateral affects your borrowing power and Health Factor.
163162
</Trans>
164-
</Warning>
163+
</Alert>
165164
)}
166165

167166
{showEnterIsolationModeMsg && <IsolationModeWarning asset={poolReserve.symbol} />}
168167

169168
{showExitIsolationModeMsg && (
170-
<Warning severity="info" icon={false} sx={{ mb: 3 }}>
169+
<Alert severity="info" icon={false} sx={{ width: '100%', mb: 3 }}>
171170
<Trans>You will exit isolation mode and other tokens can now be used as collateral</Trans>
172-
</Warning>
171+
</Alert>
173172
)}
174173

175174
{poolReserve.isIsolated && debtCeiling.determineWarningDisplay({ debtCeiling })}
@@ -190,7 +189,7 @@ export const CollateralChangeModalContent = ({
190189

191190
{blockingError === ErrorType.ZERO_LTV_ENABLE_EMODE_FIRST && (
192191
<>
193-
<Warning severity="info" sx={{ mt: 4, alignItems: 'center' }}>
192+
<Alert severity="info" sx={{ mb: 6, width: '100%', mt: 4, alignItems: 'center' }}>
194193
<Typography variant="subheader1">
195194
<Trans>E-Mode required</Trans>
196195
</Typography>
@@ -200,7 +199,7 @@ export const CollateralChangeModalContent = ({
200199
{symbol} as collateral.
201200
</Trans>
202201
</Typography>
203-
</Warning>
202+
</Alert>
204203
<CollateralOptionsSelector
205204
poolReserve={poolReserve}
206205
eModes={eModes}

‎src/components/transactions/Emode/EmodeModalContent.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { formatUserSummary, valueToBigNumber } from '@aave/math-utils';
22
import { ArrowNarrowRightIcon } from '@heroicons/react/solid';
33
import { Plural, Trans } from '@lingui/macro';
44
import {
5+
Alert,
56
Box,
67
Collapse,
78
Divider,
@@ -17,7 +18,6 @@ import { MaxLTVTooltip } from 'src/components/infoTooltips/MaxLTVTooltip';
1718
import { FormattedNumber } from 'src/components/primitives/FormattedNumber';
1819
import { Link } from 'src/components/primitives/Link';
1920
import { Row } from 'src/components/primitives/Row';
20-
import { Warning } from 'src/components/primitives/Warning';
2121
import { TextWithTooltip } from 'src/components/TextWithTooltip';
2222
import { EmodeCategory } from 'src/helpers/types';
2323
import {
@@ -215,7 +215,7 @@ export const EmodeModalContent = ({ user }: { user: ExtendedFormattedUser }) =>
215215
switch (blockingError) {
216216
case ErrorType.ZERO_LTV_COLLATERAL_BLOCKING:
217217
return (
218-
<Warning severity="info" sx={{ mt: 6, alignItems: 'center' }}>
218+
<Alert severity="info" sx={{ mb: 6, width: '100%', mt: 6, alignItems: 'center' }}>
219219
<Typography variant="subheader1">
220220
<Trans>Cannot disable E-Mode</Trans>
221221
</Typography>
@@ -225,11 +225,11 @@ export const EmodeModalContent = ({ user }: { user: ExtendedFormattedUser }) =>
225225
E-Mode. These assets have 0 LTV outside of E-Mode and cannot be used as collateral.
226226
</Trans>
227227
</Typography>
228-
</Warning>
228+
</Alert>
229229
);
230230
case ErrorType.EMODE_DISABLED_LIQUIDATION:
231231
return (
232-
<Warning severity="error" sx={{ mt: 6, alignItems: 'center' }}>
232+
<Alert severity="error" sx={{ mb: 6, width: '100%', mt: 6, alignItems: 'center' }}>
233233
<Typography variant="subheader1" color="#4F1919">
234234
<Trans>Cannot disable E-Mode</Trans>
235235
</Typography>
@@ -239,12 +239,12 @@ export const EmodeModalContent = ({ user }: { user: ExtendedFormattedUser }) =>
239239
supply or repay borrowed positions.
240240
</Trans>
241241
</Typography>
242-
</Warning>
242+
</Alert>
243243
);
244244
case ErrorType.CLOSE_POSITIONS_BEFORE_SWITCHING: {
245245
const { incompatibleBorrows, zeroLtvCollateral } = selectedEmode.blockReason;
246246
return (
247-
<Warning severity="info" sx={{ mt: 6, alignItems: 'center' }}>
247+
<Alert severity="info" sx={{ mb: 6, width: '100%', mt: 6, alignItems: 'center' }}>
248248
<Typography variant="subheader1">
249249
<Trans>Cannot switch to this category</Trans>
250250
</Typography>
@@ -265,7 +265,7 @@ export const EmodeModalContent = ({ user }: { user: ExtendedFormattedUser }) =>
265265
</Trans>
266266
</Typography>
267267
)}
268-
</Warning>
268+
</Alert>
269269
);
270270
}
271271
default:
@@ -340,7 +340,7 @@ export const EmodeModalContent = ({ user }: { user: ExtendedFormattedUser }) =>
340340

341341
{blockingError !== undefined && <Blocked />}
342342
{showLiquidationRiskWarning && (
343-
<Warning severity="error" sx={{ mt: 6, alignItems: 'center' }}>
343+
<Alert severity="error" sx={{ mb: 6, width: '100%', mt: 6, alignItems: 'center' }}>
344344
<Typography variant="subheader1" color="#4F1919">
345345
<Trans>Liquidation risk</Trans>
346346
</Typography>
@@ -350,7 +350,7 @@ export const EmodeModalContent = ({ user }: { user: ExtendedFormattedUser }) =>
350350
collateral liquidation.{' '}
351351
</Trans>
352352
</Typography>
353-
</Warning>
353+
</Alert>
354354
)}
355355

356356
<TxModalDetails gasLimit={gasLimit}>

‎src/components/transactions/FlowCommons/GasEstimationError.tsx‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,15 @@
11
import { Trans } from '@lingui/macro';
2-
import { Button, Typography } from '@mui/material';
3-
import { Warning } from 'src/components/primitives/Warning';
2+
import { Alert, Button, Typography } from '@mui/material';
43
import { TxErrorType } from 'src/ui-config/errorMapping';
54

65
export const GasEstimationError = ({ txError }: { txError: TxErrorType }) => {
76
const isUserRejection = !txError.blocking && !txError.actionBlocked;
87

98
if (isUserRejection) {
109
return (
11-
<Warning severity="info" sx={{ mt: 4, mb: 0 }}>
10+
<Alert severity="info" sx={{ width: '100%', mt: 4, mb: 0 }}>
1211
<Typography variant="description">{txError.error}</Typography>
13-
</Warning>
12+
</Alert>
1413
);
1514
}
1615

@@ -20,7 +19,7 @@ export const GasEstimationError = ({ txError }: { txError: TxErrorType }) => {
2019
: String(txError.rawError ?? 'Unknown error');
2120

2221
return (
23-
<Warning severity="error" sx={{ mt: 4, mb: 0 }}>
22+
<Alert severity="error" sx={{ width: '100%', mt: 4, mb: 0 }}>
2423
<Typography variant="description">
2524
{txError.error ? (
2625
<>
@@ -47,6 +46,6 @@ export const GasEstimationError = ({ txError }: { txError: TxErrorType }) => {
4746
</Trans>
4847
)}
4948
</Typography>
50-
</Warning>
49+
</Alert>
5150
);
5251
};

‎src/components/transactions/GasStation/GasStation.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
import { API_ETH_MOCK_ADDRESS } from '@aave/contract-helpers';
22
import { normalize } from '@aave/math-utils';
33
import LocalGasStationIcon from '@mui/icons-material/LocalGasStation';
4-
import { Box, CircularProgress, Stack } from '@mui/material';
4+
import { Alert, Box, CircularProgress, Stack } from '@mui/material';
55
import { BigNumber } from 'ethers/lib/ethers';
66
import { formatUnits, parseUnits } from 'ethers/lib/utils';
77
import React, { ReactNode } from 'react';
88
import { GasTooltip } from 'src/components/infoTooltips/GasTooltip';
9-
import { Warning } from 'src/components/primitives/Warning';
109
import { useWalletBalances } from 'src/hooks/app-data-provider/useWalletBalances';
1110
import { usePoolReservesHumanized } from 'src/hooks/pool/usePoolReserves';
1211
import { useGasStation } from 'src/hooks/useGasStation';
@@ -109,10 +108,10 @@ export const GasStation: React.FC<GasStationProps> = ({
109108
</Box>
110109
{!disabled && !isContractAddress && Number(nativeBalanceUSD) < Number(totalGasCostsUsd) && (
111110
<Box sx={{ display: 'flex', alignItems: 'center' }}>
112-
<Warning severity="warning" sx={{ mb: 0, mx: 'auto' }}>
111+
<Alert severity="warning" sx={{ width: '100%', mb: 0, mx: 'auto' }}>
113112
You do not have enough {baseAssetSymbol} in your account to pay for transaction fees on{' '}
114113
{name} network. Please deposit {baseAssetSymbol} from another account.
115-
</Warning>
114+
</Alert>
116115
</Box>
117116
)}
118117
</Stack>

0 commit comments

Comments
 (0)