diff --git a/.env.example b/.env.example index d243f8d1e1..ca2813b50f 100644 --- a/.env.example +++ b/.env.example @@ -8,6 +8,8 @@ NEXT_PUBLIC_GOVERNANCE_CACHE_URL=https://governance-cache-api.aave.com/graphql # Client on/off gate for gasless voting. The relay only works if VOTE_RELAY_URL and VOTE_RELAY_API_KEY are also set server-side. NEXT_PUBLIC_ENABLE_GASLESS_VOTING=false NEXT_PUBLIC_ENABLE_STAKING=true +# Force-build the /dev/components showcase. Automatic on `next dev` and Vercel previews. +NEXT_PUBLIC_ENABLE_DEV_PAGES=false NEXT_PUBLIC_API_BASEURL=https://aave-api-v2.aave.com NEXT_PUBLIC_TRANSAK_APP_URL=https://global.transak.com NEXT_PUBLIC_TRANSAK_API_URL=https://api.transak.com diff --git a/custom.d.ts b/custom.d.ts index 923ce4a53f..0324420b5b 100644 --- a/custom.d.ts +++ b/custom.d.ts @@ -6,6 +6,7 @@ namespace NodeJS { interface ProcessEnv { NEXT_PUBLIC_ENABLE_GOVERNANCE: string; NEXT_PUBLIC_ENABLE_STAKING: string; + NEXT_PUBLIC_ENABLE_DEV_PAGES?: string; NEXT_PUBLIC_ENV: string; NEXT_PUBLIC_API_BASEURL: string; NEXT_PUBLIC_FORK_BASE_CHAIN_ID?: string; diff --git a/next.config.js b/next.config.js index 5ad0b01abc..5ed951774f 100644 --- a/next.config.js +++ b/next.config.js @@ -8,6 +8,17 @@ const withBundleAnalyzer = require('@next/bundle-analyzer')({ const pageExtensions = ['page.tsx', 'ts']; if (process.env.NEXT_PUBLIC_ENABLE_GOVERNANCE === 'true') pageExtensions.push('governance.tsx'); if (process.env.NEXT_PUBLIC_ENABLE_STAKING === 'true') pageExtensions.push('staking.tsx'); +// Component showcase at `/dev/components`. Its pages are named `*.dev.tsx`, so unless that +// extension is registered here Next never sees them: no route, no bundle, a real 404 rather than a +// blank page. On for `next dev` and Vercel preview builds; off for the production IPFS build, which +// sets neither. A `VERCEL_ENV` of `production` vetoes it outright, so a dashboard variable left +// scoped to every environment by mistake still can't leak the showcase into production. +const enableDevPages = + process.env.VERCEL_ENV !== 'production' && + (process.env.NEXT_PUBLIC_ENABLE_DEV_PAGES === 'true' || + process.env.VERCEL_ENV === 'preview' || + process.env.NODE_ENV === 'development'); +if (enableDevPages) pageExtensions.push('dev.tsx'); /** @type {import('next').NextConfig} */ module.exports = withSentryConfig( diff --git a/pages/404.page.tsx b/pages/404.page.tsx index 83a4a6dbe4..c3eb552506 100644 --- a/pages/404.page.tsx +++ b/pages/404.page.tsx @@ -44,7 +44,7 @@ export default function Aave404Page() { We suggest you go back to the home page. - diff --git a/pages/500.page.tsx b/pages/500.page.tsx index e9b9b65b5f..97cb4ca9bb 100644 --- a/pages/500.page.tsx +++ b/pages/500.page.tsx @@ -46,7 +46,7 @@ export default function Aave500Page() { + + + ); } diff --git a/src/components/AssetCategoryMultiselect.tsx b/src/components/AssetCategoryMultiselect.tsx index 731a66efa3..ad15fd3ae4 100644 --- a/src/components/AssetCategoryMultiselect.tsx +++ b/src/components/AssetCategoryMultiselect.tsx @@ -1,11 +1,10 @@ -import { ChevronDownIcon } from '@heroicons/react/outline'; import { Trans } from '@lingui/macro'; import { - Box, Button, Checkbox, - Popover, - SvgIcon, + ListItemText, + Menu, + MenuItem, SxProps, Theme, Typography, @@ -13,6 +12,7 @@ import { useTheme, } from '@mui/material'; import { useEffect, useState } from 'react'; +import { ChevronUpDownIcon } from 'src/components/icons/ChevronUpDownIcon'; import { AssetCategory } from 'src/modules/markets/utils/assetCategories'; import { useRootStore } from 'src/store/root'; @@ -67,10 +67,6 @@ export const AssetCategoryMultiSelect = ({ onCategoriesChange(newCategories); }; - const handleReset = () => { - onCategoriesChange([]); - }; - const open = Boolean(anchorEl); const selectedCount = selectedCategories.length; @@ -80,24 +76,17 @@ export const AssetCategoryMultiSelect = ({ onClick={handleClick} disabled={disabled} variant="outlined" - disableRipple + aria-haspopup="true" + aria-expanded={open} + endIcon={} sx={{ - height: '38px', - minWidth: 'auto', width: sm ? '100%' : 'unset', - display: 'flex', justifyContent: sm ? 'space-between' : 'center', - alignItems: 'center', - gap: 3, - p: '6px 12px', textTransform: 'none', ...sx, }} > - + {selectedCount === 0 ? ( All Categories ) : selectedCount === 1 ? ( @@ -106,151 +95,35 @@ export const AssetCategoryMultiSelect = ({ {selectedCount} Categories )} - - - - - - - {/* Header */} - - - Select Categories - - - - - {/* Category Options */} - {categories.map((category) => ( - { + const checked = selectedCategories.includes(category); + return ( + handleCategoryToggle(category)} + role="menuitemcheckbox" + aria-checked={checked} + sx={{ gap: '0.5rem' }} > - - - {categoryLabels[category]} - - handleCategoryToggle(category)} - sx={{ - width: '20px', - height: '20px', - padding: 0, - color: 'text.muted', - cursor: 'pointer', - '&.Mui-checked': { - color: 'primary.main', - }, - }} + checked={checked} + inputProps={{ readOnly: true, tabIndex: -1, 'aria-hidden': true }} + sx={{ p: 0, pointerEvents: 'none' }} /> - - ))} - - + {categoryLabels[category]} + + ); + })} + ); }; diff --git a/src/components/AssetsFilterBar.tsx b/src/components/AssetsFilterBar.tsx new file mode 100644 index 0000000000..97018207ef --- /dev/null +++ b/src/components/AssetsFilterBar.tsx @@ -0,0 +1,82 @@ +import { Trans } from '@lingui/macro'; +import { Box, Button, Switch, Typography } from '@mui/material'; +import { AssetCategoryMultiSelect } from 'src/components/AssetCategoryMultiselect'; +import { SearchInput } from 'src/components/SearchInput'; +import { AssetCategory } from 'src/modules/markets/utils/assetCategories'; + +interface AssetsFilterBarProps { + searchPlaceholder: string; + onSearchTermChange: (value: string) => void; + selectedCategories: AssetCategory[]; + onCategoriesChange: (categories: AssetCategory[]) => void; + categoriesDisabled?: boolean; + /** Optional "In Wallet" toggle — omit when there is no connected wallet to filter by. */ + inWallet?: { value: boolean; onChange: (value: boolean) => void }; +} + +export const AssetsFilterBar = ({ + searchPlaceholder, + onSearchTermChange, + selectedCategories, + onCategoriesChange, + categoriesDisabled = false, + inWallet, +}: AssetsFilterBarProps) => { + return ( + + + + + {inWallet && ( + // The whole pill flips the filter; the Switch just mirrors its state. + + )} + + + + + ); +}; diff --git a/src/components/BridgeButton.tsx b/src/components/BridgeButton.tsx index 45595cdad0..8aa5889544 100644 --- a/src/components/BridgeButton.tsx +++ b/src/components/BridgeButton.tsx @@ -17,7 +17,7 @@ export const BridgeButton = ({ bridge }: Pick) => { } component={Link} size="small" - variant="outlined" + variant="tertiary" href={bridge.url || ''} > {bridge.name} diff --git a/src/components/ChainAvailabilityText.tsx b/src/components/ChainAvailabilityText.tsx index 416b0a5a1f..942a1968ee 100644 --- a/src/components/ChainAvailabilityText.tsx +++ b/src/components/ChainAvailabilityText.tsx @@ -25,7 +25,7 @@ export const ChainAvailabilityText: React.FC = ({ return ( - + Available on = ({ > Ethereum Mainnet - + {networkToTextMapper(chainId, network)} diff --git a/src/components/CircleIcon.tsx b/src/components/CircleIcon.tsx deleted file mode 100644 index a9c6250d6b..0000000000 --- a/src/components/CircleIcon.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import { Trans } from '@lingui/macro'; -import { Box, Typography } from '@mui/material'; -import { ReactNode } from 'react'; - -import { DarkTooltip } from './infoTooltips/DarkTooltip'; - -interface CircleIconProps { - downToSM: boolean; - tooltipText: string; - children: ReactNode; -} - -export const CircleIcon = ({ downToSM, tooltipText, children }: CircleIconProps) => { - return ( - - {tooltipText} - - } - > - - - {children} - - - - ); -}; diff --git a/src/components/ConnectWalletPaper.tsx b/src/components/ConnectWalletPaper.tsx index 3c408addb2..620004b360 100644 --- a/src/components/ConnectWalletPaper.tsx +++ b/src/components/ConnectWalletPaper.tsx @@ -1,55 +1,30 @@ import { Trans } from '@lingui/macro'; -import { Box, CircularProgress, Paper, PaperProps, Typography } from '@mui/material'; +import { PaperProps } from '@mui/material'; import { useModal } from 'connectkit'; import { ReactNode } from 'react'; -import LandingGhost from '/public/resting-gho-hat-purple.svg'; - +import { EmptyStatePaper } from './EmptyStatePaper'; import { ConnectWalletButton } from './WalletConnection/ConnectWalletButton'; interface ConnectWalletPaperProps extends PaperProps { description?: ReactNode; } -export const ConnectWalletPaper = ({ description, sx, ...rest }: ConnectWalletPaperProps) => { +export const ConnectWalletPaper = ({ description, ...rest }: ConnectWalletPaperProps) => { const { open } = useModal(); return ( - No Wallet Connected} + description={ + description || ( + Connect your wallet to see your supplies, borrowings, and open positions. + ) + } {...rest} - sx={{ - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - justifyContent: 'center', - textAlign: 'center', - p: 4, - flex: 1, - ...sx, - }} > - - - - <> - {open ? ( - - ) : ( - <> - - Please, connect your wallet - - - {description || ( - - Please connect your wallet to see your supplies, borrowings, and open positions. - - )} - - - - )} - - + + ); }; diff --git a/src/components/ConnectWalletPaperStaking.tsx b/src/components/ConnectWalletPaperStaking.tsx index ca5f484c60..02549b7a3a 100644 --- a/src/components/ConnectWalletPaperStaking.tsx +++ b/src/components/ConnectWalletPaperStaking.tsx @@ -18,6 +18,7 @@ export const ConnectWalletPaperStaking = ({ }: ConnectWalletPaperStakingProps) => { return ( Please, connect your wallet - + {description || ( Please connect your wallet to see your supplies, borrowings, and open positions. diff --git a/src/components/ContentContainer.tsx b/src/components/ContentContainer.tsx index 846598efd0..3398ac6bfb 100644 --- a/src/components/ContentContainer.tsx +++ b/src/components/ContentContainer.tsx @@ -1,21 +1,24 @@ -import { Box, Container } from '@mui/material'; +import { Box, Container, ContainerProps } from '@mui/material'; import { ReactNode } from 'react'; interface ContentContainerProps { children: ReactNode; + // Optional passthrough to the inner MUI Container. Markets uses it for a wider maxWidth that its + // top panel shares for stat/table column alignment; every other page omits it (default Container). + containerProps?: ContainerProps; } -export const ContentContainer = ({ children }: ContentContainerProps) => { +export const ContentContainer = ({ children, containerProps }: ContentContainerProps) => { return ( - {children} + {children} ); }; diff --git a/src/components/ContentWithTooltip.tsx b/src/components/ContentWithTooltip.tsx index f6cc53e8d4..025a07e713 100644 --- a/src/components/ContentWithTooltip.tsx +++ b/src/components/ContentWithTooltip.tsx @@ -1,5 +1,6 @@ import { Box, ClickAwayListener, Popper, styled, Tooltip } from '@mui/material'; import { JSXElementConstructor, ReactElement, ReactNode, useState } from 'react'; +import { figVars } from 'src/utils/figmaColors'; interface ContentWithTooltipProps { children: ReactNode; @@ -14,19 +15,24 @@ interface ContentWithTooltipProps { export const PopperComponent = styled(Popper)(({ theme }) => theme.unstable_sx({ + // Solid bg-5 tooltip surface, framed by an inset border-0 hairline + a soft shadow-medium + // drop. Padding lives here (not the inner Box). '.MuiTooltip-tooltip': { - color: 'text.primary', - backgroundColor: 'background.paper', - p: 0, - borderRadius: '6px', - boxShadow: '0px 0px 2px rgba(0, 0, 0, 0.2), 0px 2px 10px rgba(0, 0, 0, 0.1)', - maxWidth: '280px', + color: 'fg-1', + backgroundColor: 'bg-5', + borderRadius: '0.5rem', + boxShadow: `0 1px 12px 0 ${figVars['shadow-medium']}, inset 0 0 0 1px ${figVars['border-0']}`, + padding: '0.88rem', + maxWidth: '250px', + textAlign: 'center', + whiteSpace: 'pre-wrap', + textWrap: 'pretty', + fontSize: '0.625rem', + fontWeight: 400, + lineHeight: '135%', }, '.MuiTooltip-arrow': { - color: 'background.paper', - '&:before': { - boxShadow: '0px 0px 2px rgba(0, 0, 0, 0.2), 0px 2px 10px rgba(0, 0, 0, 0.1)', - }, + color: 'bg-5', }, }) ); @@ -86,10 +92,7 @@ export const ContentWithTooltip = ({ > { + title: ReactNode; + description?: ReactNode; + /** Optional action rendered under the description (e.g. a connect button). */ + children?: ReactNode; + /** When true, replaces the content with a centered spinner. */ + loading?: boolean; +} + +/** + * Shared empty-state card: a centered, outlined paper with an H5 title, a muted description, and + * an optional action slot. Single source of truth for the app's "No Wallet Connected" / + * "No Positions" style empty states so their look + padding stay in sync. + */ +export const EmptyStatePaper = ({ + title, + description, + children, + loading, + sx, + ...rest +}: EmptyStatePaperProps) => ( + + {loading ? ( + + ) : ( + <> + + {title} + + {description && ( + + {description} + + )} + {children} + + )} + +); diff --git a/src/components/FaucetButton.tsx b/src/components/FaucetButton.tsx index ec3d198972..c99ce368b0 100644 --- a/src/components/FaucetButton.tsx +++ b/src/components/FaucetButton.tsx @@ -26,7 +26,7 @@ export const FaucetButton = () => { } component={Link} href={ROUTES.faucet} - variant="outlined" + variant="tertiary" size="small" > diff --git a/src/components/HealthFactorNumber.tsx b/src/components/HealthFactorNumber.tsx index 2f7d615d91..6e2f68d57a 100644 --- a/src/components/HealthFactorNumber.tsx +++ b/src/components/HealthFactorNumber.tsx @@ -12,16 +12,16 @@ interface HealthFactorNumberProps extends TypographyProps { } export const HealthFactorNumber = ({ value, onInfoClick, ...rest }: HealthFactorNumberProps) => { - const { palette } = useTheme(); + const theme = useTheme(); const formattedHealthFactor = Number(valueToBigNumber(value).toFixed(2, BigNumber.ROUND_DOWN)); let healthFactorColor = ''; if (formattedHealthFactor >= 3) { - healthFactorColor = palette.success.main; + healthFactorColor = theme.vars.palette.success.main; } else if (formattedHealthFactor < 1.1) { - healthFactorColor = palette.error.main; + healthFactorColor = theme.vars.palette.error.main; } else { - healthFactorColor = palette.warning.main; + healthFactorColor = theme.vars.palette.warning.main; } return ( @@ -34,7 +34,7 @@ export const HealthFactorNumber = ({ value, onInfoClick, ...rest }: HealthFactor data-cy={'HealthFactorTopPannel'} > {value === '-1' ? ( - + ∞ ) : ( @@ -50,7 +50,7 @@ export const HealthFactorNumber = ({ value, onInfoClick, ...rest }: HealthFactor {onInfoClick && ( - )} - - )} - - - ); -}; diff --git a/src/components/TitleWithSearchBar.tsx b/src/components/TitleWithSearchBar.tsx index 8529a3ec5a..758d871fac 100644 --- a/src/components/TitleWithSearchBar.tsx +++ b/src/components/TitleWithSearchBar.tsx @@ -27,6 +27,7 @@ export const TitleWithSearchBar = ({ titleProps, title, }: TitleWithSearchBarProps) => { + const { sx: titleSx, ...restTitleProps } = titleProps ?? {}; const [showSearchBar, setShowSearchBar] = useState(false); const { breakpoints } = useTheme(); @@ -50,7 +51,12 @@ export const TitleWithSearchBar = ({ }} > {showMarketTitle && ( - + {title} )} diff --git a/src/components/TopInfoPanel/PageTitle.tsx b/src/components/TopInfoPanel/PageTitle.tsx index 69c9ebe9ad..13c39633f2 100644 --- a/src/components/TopInfoPanel/PageTitle.tsx +++ b/src/components/TopInfoPanel/PageTitle.tsx @@ -1,7 +1,7 @@ -import { StarIcon } from '@heroicons/react/solid'; import { Trans } from '@lingui/macro'; -import { Box, Button, SvgIcon, Typography, useMediaQuery, useTheme } from '@mui/material'; +import { Box, Button, Typography, useMediaQuery, useTheme } from '@mui/material'; import { ReactNode } from 'react'; +import { FAVOURITE_STAR_COLOR, StarIcon } from 'src/components/icons/StarIcon'; import { useRootStore } from '../../store/root'; import { selectIsMigrationAvailable } from '../../store/v3MigrationSelectors'; @@ -55,7 +55,7 @@ export const PageTitle = ({ {withMarketSwitcher && } - {/* */} + {/* */} {/* NOTE:// Removing for now */} {isMigrateToV3Available && withMigrateButton && ( - @@ -91,31 +91,30 @@ export const PageTitle = ({ {withFavoriteButton && ( )} diff --git a/src/components/TopInfoPanel/TopInfoPanel.tsx b/src/components/TopInfoPanel/TopInfoPanel.tsx index cbc88f4d8c..f4a7d0685f 100644 --- a/src/components/TopInfoPanel/TopInfoPanel.tsx +++ b/src/components/TopInfoPanel/TopInfoPanel.tsx @@ -1,5 +1,6 @@ import { Box, Container, ContainerProps } from '@mui/material'; import { ReactNode } from 'react'; +import { pageBandSx } from 'src/components/PageHeader/pageBandSx'; import { PageTitle, PageTitleProps } from './PageTitle'; @@ -20,16 +21,9 @@ export const TopInfoPanel = ({ containerProps = {}, }: TopInfoPanelProps) => { return ( - + - + {!titleComponent && ( { @@ -35,18 +33,6 @@ export const TopInfoPanelItem = ({ width: { xs: 'calc(50% - 12px)', xsm: 'unset' }, }} > - {withLine && ( - - )} - {!hideIcon && (withoutIconWrapper ? ( icon && icon @@ -72,7 +58,7 @@ export const TopInfoPanelItem = ({ diff --git a/src/components/WalletConnection/ConnectWalletButton.tsx b/src/components/WalletConnection/ConnectWalletButton.tsx index bb51de8b70..adb009b3ef 100644 --- a/src/components/WalletConnection/ConnectWalletButton.tsx +++ b/src/components/WalletConnection/ConnectWalletButton.tsx @@ -100,7 +100,7 @@ export const ConnectWalletButton: React.FC = ({ funnel, onCl return ( ); diff --git a/src/components/WalletConnection/ReadOnlyModal.tsx b/src/components/WalletConnection/ReadOnlyModal.tsx index 7bc6731e8e..082f5de09b 100644 --- a/src/components/WalletConnection/ReadOnlyModal.tsx +++ b/src/components/WalletConnection/ReadOnlyModal.tsx @@ -1,13 +1,5 @@ import { Trans } from '@lingui/macro'; -import { - Box, - Button, - Divider, - InputBase, - Typography, - useMediaQuery, - useTheme, -} from '@mui/material'; +import { Box, Button, TextField, Typography } from '@mui/material'; import { useState } from 'react'; import { ReadOnlyModeTooltip } from 'src/components/infoTooltips/ReadOnlyModeTooltip'; import { ModalType, useModalContext } from 'src/hooks/useModal'; @@ -28,8 +20,6 @@ export const ReadOnlyModal = () => { const [inputMockWalletAddress, setInputMockWalletAddress] = useState(''); const [validAddressError, setValidAddressError] = useState(false); const { type, close } = useModalContext(); - const { breakpoints } = useTheme(); - const sm = useMediaQuery(breakpoints.down('sm')); const trackEvent = useRootStore((store) => store.trackEvent); const handleReadAddress = async (inputMockWalletAddress: string): Promise => { @@ -76,47 +66,32 @@ export const ReadOnlyModal = () => { return ( - - - + + + Watch a wallet balance in read-only mode
- ({ - py: 1, - px: 3, - border: `1px solid ${theme.palette.divider}`, - borderRadius: '6px', - mb: 1, - overflow: 'show', - fontSize: sm ? '16px' : '14px', - })} - placeholder="Enter ethereum address or ENS name" + setInputMockWalletAddress(e.target.value)} - inputProps={{ - 'aria-label': 'read-only mode address', - }} + inputProps={{ 'aria-label': 'read-only mode address' }} + sx={{ mb: '2rem' }} /> {validAddressError && ( @@ -125,12 +100,9 @@ export const ReadOnlyModal = () => {
)} {readOnlyMode && ( - <> - - - + )} diff --git a/src/components/Warnings/CooldownWarning.tsx b/src/components/Warnings/CooldownWarning.tsx index 3897dea8e8..9d7f445df9 100644 --- a/src/components/Warnings/CooldownWarning.tsx +++ b/src/components/Warnings/CooldownWarning.tsx @@ -1,10 +1,9 @@ import { Trans } from '@lingui/macro'; -import { Typography } from '@mui/material'; +import { Alert, AlertTitle } from '@mui/material'; import { useRootStore } from 'src/store/root'; import { GENERAL } from 'src/utils/events'; import { Link } from '../primitives/Link'; -import { Warning } from '../primitives/Warning'; import { SecondsToString } from '../SecondsToString'; export const CooldownWarning = ({ cooldownSeconds }: { cooldownSeconds: number }) => { @@ -12,29 +11,26 @@ export const CooldownWarning = ({ cooldownSeconds }: { cooldownSeconds: number } const trackEvent = useRootStore((store) => store.trackEvent); return ( - - + + Cooldown period warning - - - - The cooldown period is the time required prior to unstaking your tokens ( - - ). You can only withdraw your assets from the Security Module after the cooldown period - and within the unstake window.{' '} - - trackEvent(GENERAL.EXTERNAL_LINK, { - Link: 'Cooldown Period Warning', - }) - } - > - Learn more - - - - + + + The cooldown period is the time required prior to unstaking your tokens ( + + ). You can only withdraw your assets from the Security Module after the cooldown period and + within the unstake window.{' '} + + trackEvent(GENERAL.EXTERNAL_LINK, { + Link: 'Cooldown Period Warning', + }) + } + > + Learn more + + + ); }; diff --git a/src/components/caps/CapsCircularStatus.tsx b/src/components/caps/CapsCircularStatus.tsx index 383993195f..109a3eaade 100644 --- a/src/components/caps/CapsCircularStatus.tsx +++ b/src/components/caps/CapsCircularStatus.tsx @@ -9,9 +9,19 @@ type CapsCircularStatusProps = { value: number; tooltipContent: ReactNode; onClick?: (open: boolean) => void; + /** + * Fixed arc color. Overrides the cap-utilisation ramp (success → warning → error), for sections + * whose ring is keyed to the section itself rather than to how full the cap is. + */ + color?: string; }; -export const CapsCircularStatus = ({ value, tooltipContent, onClick }: CapsCircularStatusProps) => { +export const CapsCircularStatus = ({ + value, + tooltipContent, + onClick, + color, +}: CapsCircularStatusProps) => { const [open, setOpen] = useState(false); // If value is zero, don't show anything @@ -52,7 +62,7 @@ export const CapsCircularStatus = ({ value, tooltipContent, onClick }: CapsCircu theme.palette.grey[theme.palette.mode === 'light' ? 200 : 800], + color: (theme) => theme.vars.palette.grey[theme.palette.mode === 'light' ? 200 : 800], position: 'absolute', left: 1.25, top: 1.25, @@ -63,8 +73,9 @@ export const CapsCircularStatus = ({ value, tooltipContent, onClick }: CapsCircu /> 100 ? 100 : value} /> - + {title} = 0 ? value : 0} compact symbol={isUSD ? 'USD' : undefined} - variant="tooltip" + variant="caption" /> )} diff --git a/src/components/caps/DebtCeilingStatus.tsx b/src/components/caps/DebtCeilingStatus.tsx index 48bd21f55c..f5821ec2ee 100644 --- a/src/components/caps/DebtCeilingStatus.tsx +++ b/src/components/caps/DebtCeilingStatus.tsx @@ -24,11 +24,11 @@ export const DebtCeilingStatus = ({ }: LinearProgressProps & DebtCeilingTooltipProps) => { const determineColor = (theme: Theme): string => { if (usageData.isMaxed || usageData.percentUsed >= 99.99) { - return theme.palette.error.main; + return theme.vars.palette.error.main; } else if (usageData.percentUsed >= 98) { - return theme.palette.warning.main; + return theme.vars.palette.warning.main; } else { - return theme.palette.success.main; + return theme.vars.palette.success.main; } }; @@ -38,7 +38,7 @@ export const DebtCeilingStatus = ({ height: 5, [`&.${linearProgressClasses.colorPrimary}`]: { backgroundColor: (theme: Theme) => - theme.palette.grey[theme.palette.mode === 'light' ? 200 : 800], + theme.vars.palette.grey[theme.palette.mode === 'light' ? 200 : 800], }, [`& .${linearProgressClasses.bar}`]: { borderRadius: 5, @@ -50,7 +50,7 @@ export const DebtCeilingStatus = ({ <> - + Isolated Debt Ceiling @@ -71,24 +71,24 @@ export const DebtCeilingStatus = ({ of diff --git a/src/components/icons/AaveLogo.tsx b/src/components/icons/AaveLogo.tsx new file mode 100644 index 0000000000..849e8b279c --- /dev/null +++ b/src/components/icons/AaveLogo.tsx @@ -0,0 +1,22 @@ +import { SVGProps } from 'react'; + +// Aave wordmark. Fills with `currentColor` so it takes the color of its parent +// (e.g. a palette token) — set `color` on the wrapping element to theme it. +export const AaveLogo = (props: SVGProps) => ( + + + + + + + + + +); diff --git a/src/components/icons/AlertIcons.tsx b/src/components/icons/AlertIcons.tsx new file mode 100644 index 0000000000..50f75e9e8c --- /dev/null +++ b/src/components/icons/AlertIcons.tsx @@ -0,0 +1,59 @@ +import { SvgIcon, SvgIconProps } from '@mui/material'; + +// Two-tone alert severity icons: a filled shape in `currentColor` (the severity color, set by the +// Alert's icon box) with a fixed-white glyph on top. Rendered at 20×20 inside the alert icon box. + +export const AlertInfoIcon = (props: SvgIconProps) => ( + + + + + +); + +export const AlertWarningIcon = (props: SvgIconProps) => ( + + + + + +); + +export const AlertSuccessIcon = (props: SvgIconProps) => ( + + + + +); + +export const AlertErrorIcon = (props: SvgIconProps) => ( + + + + +); diff --git a/src/components/icons/ArrowUpRightIcon.tsx b/src/components/icons/ArrowUpRightIcon.tsx new file mode 100644 index 0000000000..0bf43bbd5f --- /dev/null +++ b/src/components/icons/ArrowUpRightIcon.tsx @@ -0,0 +1,26 @@ +import { SvgIcon, SvgIconProps } from '@mui/material'; + +// Up-right diagonal arrow — the "opens in a new tab / external" affordance shown next to a link. +// Uses `currentColor` and inherits `color` from the consumer, so a palette token set via +// `color`/`sx` on the parent (e.g. `purple-2`) flows straight through to the stroke. (A CSS var +// can't be passed to an SVG `stroke` attribute directly, so color must arrive as `currentColor`.) +export const ArrowUpRightIcon = ({ sx, ...rest }: SvgIconProps) => { + return ( + + + + ); +}; diff --git a/src/components/icons/BridgeIcon.tsx b/src/components/icons/BridgeIcon.tsx new file mode 100644 index 0000000000..43e4e92398 --- /dev/null +++ b/src/components/icons/BridgeIcon.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from '@mui/material'; + +// Bridge (GHO) icon. Fills with `currentColor` so it inherits the consumer's color +// (e.g. a button's start-icon color, or a palette token via `color`/sx). +export const BridgeIcon = ({ sx, ...rest }: SvgIconProps) => ( + + + +); diff --git a/src/components/icons/ChevronDownIcon.tsx b/src/components/icons/ChevronDownIcon.tsx new file mode 100644 index 0000000000..9e647d653d --- /dev/null +++ b/src/components/icons/ChevronDownIcon.tsx @@ -0,0 +1,23 @@ +import { SvgIcon, SvgIconProps } from '@mui/material'; +import { figVars } from 'src/utils/figmaColors'; + +// Double-chevron (up/down) dropdown indicator. Uses `currentColor` so the color +// comes from the consumer (e.g. a palette token via the `color` prop / sx). +export const ChevronDownIcon = ({ sx, ...rest }: SvgIconProps) => { + return ( + + + + ); +}; diff --git a/src/components/icons/ChevronRightIcon.tsx b/src/components/icons/ChevronRightIcon.tsx new file mode 100644 index 0000000000..1f1672ac0c --- /dev/null +++ b/src/components/icons/ChevronRightIcon.tsx @@ -0,0 +1,21 @@ +import { SvgIcon, SvgIconProps } from '@mui/material'; + +// Right-pointing chevron used as the forward/expand indicator on dropdown option rows +// (e.g. the settings "Language" row). Strokes with `currentColor` so the consumer's +// `color` drives it — which keeps it Display-P3 capable (the token resolves to a CSS +// var, and `var()` works in the `color` property even though not in SVG attributes). +export const ChevronRightIcon = ({ sx, ...rest }: SvgIconProps) => ( + + + +); diff --git a/src/components/icons/ChevronUpDownIcon.tsx b/src/components/icons/ChevronUpDownIcon.tsx new file mode 100644 index 0000000000..bef9325b82 --- /dev/null +++ b/src/components/icons/ChevronUpDownIcon.tsx @@ -0,0 +1,27 @@ +import { SvgIcon, SvgIconProps } from '@mui/material'; + +// Double-chevron (up/down) dropdown indicator. Uses `currentColor` so the color +// comes from the consumer (e.g. a palette token via the `color` prop / sx). +export const ChevronUpDownIcon = ({ sx, ...rest }: SvgIconProps) => { + return ( + + + + + ); +}; diff --git a/src/components/icons/CloseIcon.tsx b/src/components/icons/CloseIcon.tsx new file mode 100644 index 0000000000..2b127278eb --- /dev/null +++ b/src/components/icons/CloseIcon.tsx @@ -0,0 +1,14 @@ +import { SvgIcon, SvgIconProps } from '@mui/material'; + +// Close (X) icon. Strokes with `currentColor` so it inherits the consumer's color +// (e.g. a palette token via `color`/sx). +export const CloseIcon = ({ sx, ...rest }: SvgIconProps) => ( + + + + +); diff --git a/src/components/icons/DotsHorizontalIcon.tsx b/src/components/icons/DotsHorizontalIcon.tsx new file mode 100644 index 0000000000..e1c8bef38d --- /dev/null +++ b/src/components/icons/DotsHorizontalIcon.tsx @@ -0,0 +1,17 @@ +import { SvgIcon, SvgIconProps } from '@mui/material'; + +// Horizontal three-dot ("more" / meatball) menu icon. Fills with `currentColor` so it +// inherits the consumer's color (e.g. a palette token via the `color` prop / sx) — which +// is also what makes it Display-P3 capable, since the token resolves to a CSS var. +export const DotsHorizontalIcon = ({ sx, ...rest }: SvgIconProps) => ( + + + + + +); diff --git a/src/components/icons/MinusIcon.tsx b/src/components/icons/MinusIcon.tsx new file mode 100644 index 0000000000..365dbe1ea4 --- /dev/null +++ b/src/components/icons/MinusIcon.tsx @@ -0,0 +1,15 @@ +import { SvgIcon, SvgIconProps } from '@mui/material'; + +// Horizontal bar used as the collapse ("hide") control glyph. Strokes with `currentColor` so the +// consumer sets the color. Cleaned from the Figma export (the stroke there was fg-3). +export const MinusIcon = ({ sx, ...rest }: SvgIconProps) => ( + + + +); diff --git a/src/components/icons/SearchIcon.tsx b/src/components/icons/SearchIcon.tsx new file mode 100644 index 0000000000..fe50ea831b --- /dev/null +++ b/src/components/icons/SearchIcon.tsx @@ -0,0 +1,26 @@ +import { SvgIcon, SvgIconProps } from '@mui/material'; + +// Search / magnifying-glass icon. The lens is stroked and the handle is filled — both use +// `currentColor` so the color comes from the consumer (a palette token via `color` / sx). +export const SearchIcon = ({ sx, ...rest }: SvgIconProps) => { + return ( + + + + + ); +}; diff --git a/src/components/icons/SettingsIcon.tsx b/src/components/icons/SettingsIcon.tsx new file mode 100644 index 0000000000..766649cfa2 --- /dev/null +++ b/src/components/icons/SettingsIcon.tsx @@ -0,0 +1,19 @@ +import { SvgIcon, SvgIconProps } from '@mui/material'; + +// Settings gear. Strokes with `currentColor` so it inherits the consumer's color +// (e.g. a palette token via `color`/sx). +export const SettingsIcon = ({ sx, ...rest }: SvgIconProps) => ( + + + + +); diff --git a/src/components/icons/StarIcon.tsx b/src/components/icons/StarIcon.tsx new file mode 100644 index 0000000000..4a20c5c1a3 --- /dev/null +++ b/src/components/icons/StarIcon.tsx @@ -0,0 +1,14 @@ +import { SvgIcon, SvgIconProps } from '@mui/material'; + +// Theme token key for the favourited star's gold — resolves to Display-P3 + sRGB via the palette +// (Figma: color(display-p3 1 0.7 0)). Consumers pass it as an sx `color`; the star fills it +// through `currentColor`. +export const FAVOURITE_STAR_COLOR = 'favourite-star'; + +// Filled star for the "favourite" toggle. Fills with `currentColor` so the consumer +// controls the color (e.g. gold when favourited, muted when not). +export const StarIcon = ({ sx, ...rest }: SvgIconProps) => ( + + + +); diff --git a/src/components/icons/SwapIcon.tsx b/src/components/icons/SwapIcon.tsx new file mode 100644 index 0000000000..f35f249a6c --- /dev/null +++ b/src/components/icons/SwapIcon.tsx @@ -0,0 +1,36 @@ +import { SvgIcon, SvgIconProps } from '@mui/material'; + +// Swap / switch arrows. Strokes with `currentColor` so it inherits the consumer's color +// (e.g. a button's start-icon color, or a palette token via `color`/sx). +export const SwapIcon = ({ sx, ...rest }: SvgIconProps) => ( + + + + + + +); diff --git a/src/components/icons/WalletOutlineIcon.tsx b/src/components/icons/WalletOutlineIcon.tsx new file mode 100644 index 0000000000..063e977f16 --- /dev/null +++ b/src/components/icons/WalletOutlineIcon.tsx @@ -0,0 +1,29 @@ +import { SvgIcon, SvgIconProps } from '@mui/material'; + +// Minimal wallet outline (rounded body + card-slot line) — the "add token to wallet" affordance in +// the reserve header. Uses `currentColor` so the consumer's `color` (e.g. a palette token via `sx`) +// flows straight to the stroke, matching the sibling icons (ArrowUpRightIcon, ChevronUpDownIcon). +export const WalletOutlineIcon = ({ sx, ...rest }: SvgIconProps) => { + return ( + + + + + ); +}; diff --git a/src/components/incentives/EthenaIncentivesTooltipContent.tsx b/src/components/incentives/EthenaIncentivesTooltipContent.tsx index ea9aa346c6..34325379fa 100644 --- a/src/components/incentives/EthenaIncentivesTooltipContent.tsx +++ b/src/components/incentives/EthenaIncentivesTooltipContent.tsx @@ -13,7 +13,7 @@ export const EthenaAirdropTooltipContent = ({ points }: { points: number }) => { href="https://app.ethena.fi/join" sx={{ textDecoration: 'underline' }} variant="caption" - color="text.secondary" + color="fg-2" > {'here'} diff --git a/src/components/incentives/EtherfiIncentivesTooltipContent.tsx b/src/components/incentives/EtherfiIncentivesTooltipContent.tsx index ddd0de7ea4..433776deef 100644 --- a/src/components/incentives/EtherfiIncentivesTooltipContent.tsx +++ b/src/components/incentives/EtherfiIncentivesTooltipContent.tsx @@ -17,7 +17,7 @@ export const EtherFiAirdropTooltipContent = ({ multiplier }: { multiplier: numbe href="https://etherfi.gitbook.io/etherfi/getting-started/loyalty-points" sx={{ textDecoration: 'underline' }} variant="caption" - color="text.secondary" + color="fg-2" > here diff --git a/src/components/incentives/IncentivesButton.tsx b/src/components/incentives/IncentivesButton.tsx index 5a8fdb2ba4..dd6af40c05 100644 --- a/src/components/incentives/IncentivesButton.tsx +++ b/src/components/incentives/IncentivesButton.tsx @@ -121,7 +121,7 @@ const BlankIncentives = () => { justifyContent: 'center', }} > - +   @@ -372,7 +372,7 @@ const Content = ({ if (hideValue && hasGhoIncentives) { return ( - + ); } @@ -380,13 +380,8 @@ const Content = ({ if (incentivesNetAPR !== INFINITY && incentivesNetAPR < 10000) { return ( - - + + ); } else if (incentivesNetAPR !== INFINITY && incentivesNetAPR > 9999) { @@ -396,19 +391,19 @@ const Content = ({ value={incentivesNetAPR} percent compact - variant="secondary12" - color="text.secondary" + variant="subheader2" + color="fg-2" /> - + ); } else if (incentivesNetAPR === INFINITY) { return ( - + ∞ - + ); } @@ -417,7 +412,7 @@ const Content = ({ // Default behavior: show icon for non-GHO incentives return ( <> - + ); }; @@ -426,7 +421,7 @@ const Content = ({ return ( ({ + sx={{ borderRadius: '4px', cursor: 'pointer', display: 'flex', @@ -434,10 +429,10 @@ const Content = ({ justifyContent: 'center', transition: 'opacity 0.2s ease', '&:hover': { - bgcolor: 'action.hover', - borderColor: 'action.disabled', + bgcolor: 'button-hover', + borderColor: 'disabled-fg', }, - })} + }} onClick={() => { // TODO: How to handle this for event props? trackEvent(DASHBOARD.VIEW_LM_DETAILS_DASHBOARD, {}); @@ -495,39 +490,19 @@ const Content = ({ }; const ContentButton = ({ value, iconSrc }: { value: number; iconSrc: string }) => { - const [open, setOpen] = useState(false); const trackEvent = useRootStore((store) => store.trackEvent); return ( ({ - p: { xs: '0 4px', xsm: '2px 4px' }, - border: `1px solid ${open ? theme.palette.action.disabled : theme.palette.divider}`, - borderRadius: '4px', - cursor: 'pointer', - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - transition: 'opacity 0.2s ease', - bgcolor: open ? 'action.hover' : 'transparent', - '&:hover': { - bgcolor: 'action.hover', - borderColor: 'action.disabled', - }, - })} + sx={{ display: 'flex', alignItems: 'center', gap: '0.38rem', cursor: 'pointer' }} onClick={() => { trackEvent(DASHBOARD.VIEW_LM_DETAILS_DASHBOARD, {}); - setOpen(!open); }} > - - - {`${value}x`} - - - - icon - + icon + + {`${value}x`} + ); }; diff --git a/src/components/incentives/IncentivesCard.tsx b/src/components/incentives/IncentivesCard.tsx index 4d914c3641..674442bfb8 100644 --- a/src/components/incentives/IncentivesCard.tsx +++ b/src/components/incentives/IncentivesCard.tsx @@ -24,8 +24,8 @@ interface IncentivesCardProps { value: string | number; incentives?: ReserveIncentiveResponse[]; address?: string; - variant?: 'main14' | 'main16' | 'secondary14'; - symbolsVariant?: 'secondary14' | 'secondary16'; + variant?: 'subheader1' | 'h4' | 'h5'; + symbolsVariant?: 'h5' | 'secondary16'; color?: string; tooltip?: ReactNode; market: string; @@ -39,7 +39,7 @@ export const IncentivesCard = ({ value, incentives, address, - variant = 'secondary14', + variant = 'h5', symbolsVariant, align, color, @@ -120,7 +120,9 @@ export const IncentivesCard = ({ (protocolAction === ProtocolAction.borrow || protocolAction === ProtocolAction.supply) && isMarketsOrDashboardPage; - const incentivesContent = ( + // APR-bearing incentives — their yield is already inside the APY %; each renders the purple + // incentives icon and sits on the same row as (to the left of) the rate it contributes to. + const apyIncentives = ( <> + + ); + + // Points / airdrop programs — not part of the APY %; shown as [brand icon] [multiplier] + // alongside the rate. + const pointsIncentives = ( + <> ); + const apyValue = + value.toString() === '-1' ? ( + + ) : displayAPY === 'Infinity' ? ( + + ∞ % + + ) : ( + + ); + return ( - {value.toString() !== '-1' ? ( - - {displayAPY === 'Infinity' ? ( - - ∞ % - - ) : ( - - )} - {tooltip} - {inlineIncentives && ( - - {incentivesContent} - - )} - - ) : ( - - )} - {!inlineIncentives && ( - - {incentivesContent} - - )} + {apyIncentives} + {apyValue} + {tooltip} + {pointsIncentives} ); }; diff --git a/src/components/incentives/IncentivesTooltipContent.tsx b/src/components/incentives/IncentivesTooltipContent.tsx index b51016836f..5ab80156ad 100644 --- a/src/components/incentives/IncentivesTooltipContent.tsx +++ b/src/components/incentives/IncentivesTooltipContent.tsx @@ -311,7 +311,7 @@ export const IncentivesTooltipContent = ({ protocolAPY = 0, address, }: IncentivesTooltipContentProps) => { - const typographyVariant = 'secondary12'; + const typographyVariant = 'subheader2'; const { data: meritIncentives } = useMeritIncentives({ symbol, @@ -375,7 +375,7 @@ export const IncentivesTooltipContent = ({ flexDirection: 'column', }} > - + Participating in this {symbol} reserve gives annualized rewards. @@ -499,7 +499,7 @@ export const IncentivesTooltipContent = ({ {/* Show Net APR (protocol incentives only) if multiple incentives */} {incentives.length > 1 && ( - ({ pt: 1, mt: 1 })}> + @@ -524,14 +524,14 @@ export const IncentivesTooltipContent = ({ {/* Show Total APY if we have Merit incentives or protocol APY */} {(meritIncentives?.breakdown || protocolAPY > 0) && ( - ({ pt: 1, mt: 1, borderTop: '1px solid rgba(255, 255, 255, 0.1)' })}> + Total APY - + ({isBorrow ? 'Borrow Rate' : 'Supply Rate'}) diff --git a/src/components/incentives/MeritIncentivesTooltipContent.tsx b/src/components/incentives/MeritIncentivesTooltipContent.tsx index cf0c44724e..72b1f27ca7 100644 --- a/src/components/incentives/MeritIncentivesTooltipContent.tsx +++ b/src/components/incentives/MeritIncentivesTooltipContent.tsx @@ -114,7 +114,7 @@ export const MeritIncentivesTooltipContent = ({ const theme = useTheme(); const { openClaimRewards } = useModalContext(); const account = useRootStore((store) => store.account); - const typographyVariant = 'secondary12'; + const typographyVariant = 'subheader2'; const handleClaimClick = () => { openClaimRewards(); @@ -153,11 +153,11 @@ export const MeritIncentivesTooltipContent = ({ alt="" /> - + {campaignConfig.title} - + This is a program initiated and implemented by the Aave Chan Initiative (ACI). Aave Labs does not guarantee the program and accepts no liability. @@ -166,7 +166,7 @@ export const MeritIncentivesTooltipContent = ({ href={'https://apps.aavechan.com/merit'} sx={{ textDecoration: 'underline' }} variant="caption" - color="text.secondary" + color="fg-2" > Learn more @@ -174,7 +174,7 @@ export const MeritIncentivesTooltipContent = ({ {campaignConfig.type === CampaignType.SELF_VERIFICATION && selfConfig && ( <> - + Supply {selfConfig.token} and double your yield by{' '} @@ -182,7 +182,7 @@ export const MeritIncentivesTooltipContent = ({ href="https://aave.self.xyz/" sx={{ textDecoration: 'underline' }} variant="caption" - color="text.secondary" + color="fg-2" > verifying your humanity through Self @@ -190,7 +190,7 @@ export const MeritIncentivesTooltipContent = ({ for {selfConfig.limit} per user. {' '} - + Visit{' '} @@ -198,7 +198,7 @@ export const MeritIncentivesTooltipContent = ({ href="https://aave.self.xyz/" sx={{ textDecoration: 'underline' }} variant="caption" - color="text.secondary" + color="fg-2" > https://aave.self.xyz/ @@ -209,19 +209,19 @@ export const MeritIncentivesTooltipContent = ({ )} {isMultipleCampaigns(meritIncentives.activeActions) && remainingCustomMessage && ( - + {remainingCustomMessage} )} {meritIncentives.customMessage ? ( - + {meritIncentives.customMessage} ) : null} Total APY - + ({meritIncentives.breakdown.isBorrow ? 'Borrow Rate' : 'Supply Rate'}) diff --git a/src/components/incentives/MerklIncentivesTooltipContent.tsx b/src/components/incentives/MerklIncentivesTooltipContent.tsx index 81eb161146..2239764ef5 100644 --- a/src/components/incentives/MerklIncentivesTooltipContent.tsx +++ b/src/components/incentives/MerklIncentivesTooltipContent.tsx @@ -16,7 +16,7 @@ export const MerklIncentivesTooltipContent = ({ }) => { const theme = useTheme(); - const typographyVariant = 'secondary12'; + const typographyVariant = 'subheader2'; const merklIncentivesFormatted = getSymbolMap(merklIncentives); @@ -41,7 +41,7 @@ export const MerklIncentivesTooltipContent = ({ alt="" /> - + {merklIncentives.isSelf ? ( Eligible for incentives through Merkl and Boosted Yield via Self. ) : ( @@ -49,7 +49,7 @@ export const MerklIncentivesTooltipContent = ({ )} - + This is a program initiated by the Aave DAO and implemented by Merkl. Aave Labs does not guarantee the program and accepts no liability. @@ -80,7 +80,7 @@ export const MerklIncentivesTooltipContent = ({ href="https://aave.self.xyz/" sx={{ textDecoration: 'underline' }} variant="caption" - color="text.secondary" + color="fg-2" > verifying your humanity through Self @@ -96,7 +96,7 @@ export const MerklIncentivesTooltipContent = ({ href="https://aave.self.xyz/" sx={{ textDecoration: 'underline' }} variant="caption" - color="text.secondary" + color="fg-2" > https://aave.self.xyz/ @@ -316,7 +316,7 @@ export const MerklIncentivesTooltipContent = ({ )} {/* Total APY */} - + - + APY diff --git a/src/components/incentives/SonicIncentivesTooltipContent.tsx b/src/components/incentives/SonicIncentivesTooltipContent.tsx index 5f784605b2..d6d6cf733f 100644 --- a/src/components/incentives/SonicIncentivesTooltipContent.tsx +++ b/src/components/incentives/SonicIncentivesTooltipContent.tsx @@ -13,7 +13,7 @@ export const SonicAirdropTooltipContent = ({ points }: { points: number }) => { href="https://blog.soniclabs.com/sonic-points-simplified-how-to-qualify-for-200-million-s-airdrop/" sx={{ textDecoration: 'underline' }} variant="caption" - color="text.secondary" + color="fg-2" > {'here'} diff --git a/src/components/infoTooltips/DarkTooltip.tsx b/src/components/infoTooltips/DarkTooltip.tsx index 7442dbbc1b..e4e867b3b0 100644 --- a/src/components/infoTooltips/DarkTooltip.tsx +++ b/src/components/infoTooltips/DarkTooltip.tsx @@ -1,4 +1,5 @@ import { Box, Tooltip, TooltipProps } from '@mui/material'; +import { onAccent } from 'src/utils/figmaColors'; export const DarkTooltip = ({ title, @@ -36,6 +37,7 @@ export const DarkTooltip = ({ title={ .{' '} Learn more diff --git a/src/components/infoTooltips/KernelAirdropTooltip.tsx b/src/components/infoTooltips/KernelAirdropTooltip.tsx index 4c263436fa..10f111631b 100644 --- a/src/components/infoTooltips/KernelAirdropTooltip.tsx +++ b/src/components/infoTooltips/KernelAirdropTooltip.tsx @@ -23,7 +23,7 @@ export const KernelAirdropTooltip = () => { href="https://kerneldao.gitbook.io/kernel/getting-started/editor/kernel-points-guide " sx={{ textDecoration: 'underline' }} variant="caption" - color="text.secondary" + color="fg-2" > {'here'} diff --git a/src/components/infoTooltips/MigrationDisabledTooltip.tsx b/src/components/infoTooltips/MigrationDisabledTooltip.tsx index db3915d015..66ebdaa124 100644 --- a/src/components/infoTooltips/MigrationDisabledTooltip.tsx +++ b/src/components/infoTooltips/MigrationDisabledTooltip.tsx @@ -73,7 +73,7 @@ export const MigrationDisabledTooltip = ({ return ( }> - + {warningText[warningType]} diff --git a/src/components/infoTooltips/PointsBasedCampaignTooltip.tsx b/src/components/infoTooltips/PointsBasedCampaignTooltip.tsx index 1ccc9f406b..9fe46d28f3 100644 --- a/src/components/infoTooltips/PointsBasedCampaignTooltip.tsx +++ b/src/components/infoTooltips/PointsBasedCampaignTooltip.tsx @@ -1,5 +1,6 @@ import { Box, Input, InputAdornment, Typography, useTheme } from '@mui/material'; import { ChangeEvent, useEffect, useState } from 'react'; +import { figVars } from 'src/utils/figmaColors'; import { convertAprToApy } from 'src/utils/utils'; import { FormattedNumber } from '../primitives/FormattedNumber'; @@ -23,7 +24,7 @@ export const PointsBasedCampaignTooltip = ({ ...rest }: PointBasedCampaignTooltipProps) => { const theme = useTheme(); - const typographyVariant = 'secondary12'; + const typographyVariant = 'subheader2'; const [inkPriceInput, setInkPriceInput] = useState(''); const [estimatedPointsValue, setEstimatedPointsValue] = useState(null); const [estimatedAPY, setEstimatedAPY] = useState(null); @@ -89,7 +90,7 @@ export const PointsBasedCampaignTooltip = ({ gap: 1.5, pb: 1, borderBottom: 1, - borderColor: theme.palette.divider, + borderColor: 'border-2', }} > @@ -107,11 +108,7 @@ export const PointsBasedCampaignTooltip = ({ pb: 1, }} > - + The estimated amount of TydroInkPoints that you get per $1,000 net{' '} {isBorrow ? 'borrowed' : 'supplied'} per day. @@ -124,11 +121,11 @@ export const PointsBasedCampaignTooltip = ({ alignItems: 'center', justifyContent: 'space-between', p: 1.5, - backgroundColor: theme.palette.action.hover, + backgroundColor: 'button-hover', borderRadius: 1, }} > - + Points per $1,000/day @@ -148,18 +145,18 @@ export const PointsBasedCampaignTooltip = ({ gap: 1.25, p: 1.5, borderRadius: 1, - border: `1px solid ${theme.palette.divider}`, - backgroundColor: theme.palette.background.paper, + border: `1px solid ${figVars['border-2']}`, + backgroundColor: 'surface-elevated', }} > {!hasInkPriceInput ? ( - + Calculate APY from the assumed INK price.
(INK price not public yet) ) : ( - + The results are based on your estimated INK price. )} @@ -175,7 +172,7 @@ export const PointsBasedCampaignTooltip = ({ {estimatedPointsValue !== null && ( @@ -205,10 +202,10 @@ export const PointsBasedCampaignTooltip = ({ px: 1, py: 1, borderRadius: 1, - backgroundColor: theme.palette.action.hover, + backgroundColor: 'button-hover', }} > - + APY @@ -228,10 +225,10 @@ export const PointsBasedCampaignTooltip = ({ px: 1, py: 1, borderRadius: 1, - backgroundColor: theme.palette.action.hover, + backgroundColor: 'button-hover', }} > - + FDV diff --git a/src/components/infoTooltips/PriceImpactTooltip.tsx b/src/components/infoTooltips/PriceImpactTooltip.tsx index 1c3c399504..969985f60a 100644 --- a/src/components/infoTooltips/PriceImpactTooltip.tsx +++ b/src/components/infoTooltips/PriceImpactTooltip.tsx @@ -31,8 +31,8 @@ export const PriceImpactTooltip = ({ return ( )} diff --git a/src/components/infoTooltips/SpkAirdropTooltip.tsx b/src/components/infoTooltips/SpkAirdropTooltip.tsx index a5dc193330..b10eb8a4c0 100644 --- a/src/components/infoTooltips/SpkAirdropTooltip.tsx +++ b/src/components/infoTooltips/SpkAirdropTooltip.tsx @@ -23,7 +23,7 @@ export const SpkAirdropTooltip = () => { href="https://forum.sky.money/t/spark-proposal-for-integrations-into-aave/25005" sx={{ textDecoration: 'underline' }} variant="caption" - color="text.secondary" + color="fg-2" > {'here'} {' '} @@ -32,7 +32,7 @@ export const SpkAirdropTooltip = () => { href="https://docs.spark.fi/rewards/spk-token#what-is-the-spk-pre-farming-airdrop" sx={{ textDecoration: 'underline' }} variant="caption" - color="text.secondary" + color="fg-2" > {'here'} diff --git a/src/components/infoTooltips/SuperFestTooltip.tsx b/src/components/infoTooltips/SuperFestTooltip.tsx index e964668ba5..e3a20b1407 100644 --- a/src/components/infoTooltips/SuperFestTooltip.tsx +++ b/src/components/infoTooltips/SuperFestTooltip.tsx @@ -20,7 +20,7 @@ export const SuperFestTooltip = () => { href="https://superfest.optimism.io" sx={{ textDecoration: 'underline' }} variant="caption" - color="text.secondary" + color="fg-2" > Learn more {' '} @@ -32,7 +32,7 @@ export const SuperFestTooltip = () => { href="https://jumper.exchange/superfest" sx={{ textDecoration: 'underline' }} variant="caption" - color="text.secondary" + color="fg-2" > jumper.exchange diff --git a/src/components/infoTooltips/WrappedTokenToolTipContent.tsx b/src/components/infoTooltips/WrappedTokenToolTipContent.tsx index 03a90aac71..bf3b2c47e8 100644 --- a/src/components/infoTooltips/WrappedTokenToolTipContent.tsx +++ b/src/components/infoTooltips/WrappedTokenToolTipContent.tsx @@ -24,7 +24,7 @@ export const WrappedTokenTooltipContent = ({ return ( - + DAI balance will be converted via DSR contracts and then supplied as sDAI. Switching incurs no additional costs and no slippage. @@ -32,7 +32,7 @@ export const WrappedTokenTooltipContent = ({ - + Exchange rate @@ -40,23 +40,18 @@ export const WrappedTokenTooltipContent = ({ ) : ( - - {tokenInSymbol} + + {tokenInSymbol} - {tokenOutSymbol} + {tokenOutSymbol} )} diff --git a/src/components/isolationMode/IsolatedBadge.tsx b/src/components/isolationMode/IsolatedBadge.tsx index a75b2234a1..5a492c4c6d 100644 --- a/src/components/isolationMode/IsolatedBadge.tsx +++ b/src/components/isolationMode/IsolatedBadge.tsx @@ -22,7 +22,7 @@ const InfoIcon = ({ color }: InfoIconProps) => ( @@ -37,8 +37,8 @@ export const IsolatedEnabledBadge = ({ const theme = useTheme(); const sx = { - border: `1px solid ${theme.palette.warning.main}`, - color: theme.palette.warning.main, + border: `1px solid ${theme.vars.palette.warning.main}`, + color: theme.vars.palette.warning.main, ...contentSx, }; return ( @@ -57,16 +57,16 @@ export const IsolatedEnabledBadge = ({ > Isolated - + ); @@ -119,7 +119,7 @@ const IsolationModeTooltipTemplate = ({ content }: { content: ReactNode }) => { return ( {content} - + Learn more in our{' '} diff --git a/src/components/lists/ListColumn.tsx b/src/components/lists/ListColumn.tsx index 1bff2411ed..84f8d261d8 100644 --- a/src/components/lists/ListColumn.tsx +++ b/src/components/lists/ListColumn.tsx @@ -17,7 +17,7 @@ export const ListColumn = ({ children, minWidth, maxWidth, - align = 'center', + align = 'left', overFlow = 'visible', flex = 1, p = 1, diff --git a/src/components/lists/ListHeaderTitle.tsx b/src/components/lists/ListHeaderTitle.tsx index d553eaf82a..4b794a9d70 100644 --- a/src/components/lists/ListHeaderTitle.tsx +++ b/src/components/lists/ListHeaderTitle.tsx @@ -39,49 +39,54 @@ export const ListHeaderTitle = ({ return ( (!!onClick ? onClick() : !!sortKey && handleSorting(sortKey))} sx={{ cursor: !!onClick || !!sortKey ? 'pointer' : 'default', display: 'inline-flex', alignItems: 'center', + maxWidth: '100%', + minWidth: 0, + fontFamily: 'Inter', + fontSize: '0.6875rem', + fontWeight: 500, + lineHeight: '120%', + letterSpacing: '0.00313rem', + textTransform: 'uppercase', + fontFeatureSettings: "'cv11' on", + // Header titles are often a tooltip component that renders its own Typography with a + // `variant`; force those to take the header type instead of their own. + '& .MuiTypography-root': { font: 'inherit', letterSpacing: 'inherit' }, }} > - {children} + {/* Truncation has to live on an inner block — `text-overflow` is ignored on the flex + container itself, so the label would otherwise overrun into the next column. */} + + {children} + {!!sortKey && ( - - ({ - width: 0, - height: 0, - borderStyle: 'solid', - borderWidth: '0 4px 4px 4px', - borderColor: `transparent transparent ${ - sortName === sortKey && sortDesc - ? theme.palette.text.secondary - : theme.palette.divider - } transparent`, - mb: 0.5, - })} - /> - ({ - width: 0, - height: 0, - borderStyle: 'solid', - borderWidth: '4px 4px 0 4px', - borderColor: `${ - sortName === sortKey && !sortDesc - ? theme.palette.text.secondary - : theme.palette.divider - } transparent transparent transparent`, - })} - /> + + {/* Static sortable indicator: an up/down chevron. Color comes from the fg-icon token via + currentColor on the Box — the P3-safe way to tint an SVG, since var() doesn't resolve + in SVG presentation attributes. stroke/width/caps are inherited by both paths. */} + + + + )} diff --git a/src/components/lists/ListHeaderWrapper.tsx b/src/components/lists/ListHeaderWrapper.tsx index 3ee6be2472..6d1f622c82 100644 --- a/src/components/lists/ListHeaderWrapper.tsx +++ b/src/components/lists/ListHeaderWrapper.tsx @@ -13,15 +13,17 @@ export const ListHeaderWrapper = ({ px = 4, children, ...rest }: ListHeaderWrapp sx={{ display: 'flex', alignItems: 'flex-end', + gap: '1rem', px, - pt: 4, - pb: 1, + py: '12.5px', position: 'sticky', top: 0, zIndex: 100, - bgcolor: 'background.paper', + bgcolor: 'table-bg', borderBottom: '1px solid', - borderColor: 'divider', + borderColor: 'border-0', + borderTopLeftRadius: 'inherit', + borderTopRightRadius: 'inherit', ...rest.sx, }} > diff --git a/src/components/lists/ListItem.tsx b/src/components/lists/ListItem.tsx index 91505532d3..dfcc3ccc87 100644 --- a/src/components/lists/ListItem.tsx +++ b/src/components/lists/ListItem.tsx @@ -15,13 +15,14 @@ export const ListItem = ({ children, minHeight = 71, px = 4, button, ...rest }: sx={{ display: 'flex', alignItems: 'center', + gap: '1rem', minHeight, px, '&:not(:last-child)': { borderBottom: '1px solid', - borderColor: 'divider', + borderColor: 'border-0', }, - ...(button ? { '&:hover': { bgcolor: 'action.hover' } } : {}), + ...(button ? { '&:hover': { bgcolor: 'button-hover' } } : {}), ...rest.sx, }} > diff --git a/src/components/lists/ListMobileItem.tsx b/src/components/lists/ListMobileItem.tsx index c16f6102b8..6ae64bbc30 100644 --- a/src/components/lists/ListMobileItem.tsx +++ b/src/components/lists/ListMobileItem.tsx @@ -65,7 +65,7 @@ export const ListMobileItem = ({ {name} - + {symbol} {isIsolated && ( diff --git a/src/components/lists/ListWrapper.tsx b/src/components/lists/ListWrapper.tsx index 5b3d32eb1d..370bf5f7ba 100644 --- a/src/components/lists/ListWrapper.tsx +++ b/src/components/lists/ListWrapper.tsx @@ -1,8 +1,10 @@ import { Trans } from '@lingui/macro'; -import { Box, BoxProps, Paper, PaperProps, Typography } from '@mui/material'; +import { Box, BoxProps, Button, Paper, PaperProps } from '@mui/material'; import { ReactNode, useState } from 'react'; +import { MinusIcon } from 'src/components/icons/MinusIcon'; import { useRootStore } from 'src/store/root'; import { DASHBOARD } from 'src/utils/events'; +import { figVars } from 'src/utils/figmaColors'; import { toggleLocalStorageClick } from '../../helpers/toggle-local-storage-click'; @@ -11,6 +13,11 @@ interface ListWrapperProps { localStorageName?: string; subTitleComponent?: ReactNode; subChildrenComponent?: ReactNode; + /** + * Second header row. Must render NOTHING at all when it has no content (return null / a falsy + * branch) — not an empty wrapper element — or its divider will be drawn above blank space, since + * the row hides itself via `:empty`. + */ topInfo?: ReactNode; children: ReactNode; withTopMargin?: boolean; @@ -18,7 +25,6 @@ interface ListWrapperProps { wrapperSx?: BoxProps['sx']; tooltipOpen?: boolean; paperSx?: PaperProps['sx']; - topInfoSx?: BoxProps['sx']; onCollapseChange?: (collapsed: boolean) => void; } @@ -34,7 +40,6 @@ export const ListWrapper = ({ wrapperSx, tooltipOpen, paperSx, - topInfoSx, onCollapseChange, }: ListWrapperProps) => { const [isCollapse, setIsCollapse] = useState( @@ -92,100 +97,141 @@ export const ListWrapper = ({ const collapsed = isCollapse && !noData; + const collapseText = collapsed ? Show : Hide; + + // When nothing renders below it, the band is the card's last visible element: round its bottom + // corners to the Paper's radius and drop the hairline that would otherwise dangle over nothing. + const bandIsCardTail = { + boxShadow: 'none', + borderBottomLeftRadius: 'inherit', + borderBottomRightRadius: 'inherit', + }; + return ( - - + - {titleComponent} - {subTitleComponent} - - - {!!localStorageName && !noData && ( { - handleTrackingEvents(); - - if (localStorageName && !noData) { - const nextIsCollapse = !isCollapse; - toggleLocalStorageClick(isCollapse, setIsCollapse, localStorageName); - onCollapseChange?.(nextIsCollapse); - } }} > - - {collapsed ? Show : Hide} - - + + {titleComponent} + {subTitleComponent} + + + {!!localStorageName && !noData && ( + + )} - )} - - {topInfo && ( - - {topInfo} + {/* Second header row. Its divider is drawn as this row's own top border rather than a + sibling , so an empty row takes the rule with it — consumers pass topInfo as + a fragment that can render nothing (e.g. "Your borrows" with nothing borrowed), which + is truthy here but produces no DOM. Being a child of the padded band, the rule insets + to the band's left/right padding instead of running edge to edge like the bottom + hairline. */} + {topInfo && ( + + {topInfo} + + )} - )} - {subChildrenComponent && !collapsed && ( - {subChildrenComponent} - )} - {children} - + + {children} + + + {/* Filters (e.g. "Show assets with 0 balance") sit below the card, outside it. */} + {subChildrenComponent && !collapsed && {subChildrenComponent}} + ); }; diff --git a/src/components/primitives/BasicModal.tsx b/src/components/primitives/BasicModal.tsx index 7b20f4f0b9..8920cfa8c2 100644 --- a/src/components/primitives/BasicModal.tsx +++ b/src/components/primitives/BasicModal.tsx @@ -1,7 +1,8 @@ -import { XIcon } from '@heroicons/react/outline'; -import { Box, IconButton, Modal, Paper, SvgIcon } from '@mui/material'; +import { alpha, Box, IconButton, Modal, Paper } from '@mui/material'; import React from 'react'; +import { CloseIcon } from '../icons/CloseIcon'; + export interface BasicModalProps { open: boolean; children: React.ReactNode; @@ -47,6 +48,9 @@ export const BasicModal = ({ '.MuiPaper-root': { outline: 'none', }, + '.MuiBackdrop-root': { + backgroundColor: 'rgba(0, 0, 0, 0.32)', + }, }} onClick={(e) => { e.stopPropagation(); @@ -55,6 +59,7 @@ export const BasicModal = ({ data-cy={'Modal'} > + + alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity), + }, }} onClick={handleClose} data-cy={'close-button'} > - - - + )} diff --git a/src/components/primitives/FormattedNumber.tsx b/src/components/primitives/FormattedNumber.tsx index d5651b0b74..17852bdf4d 100644 --- a/src/components/primitives/FormattedNumber.tsx +++ b/src/components/primitives/FormattedNumber.tsx @@ -123,7 +123,7 @@ export function FormattedNumber({ component="span" sx={{ mr: 0.5 }} variant={symbolsVariant || rest.variant} - color={symbolsColor || 'text.secondary'} + color={symbolsColor || rest.color} > {'<'} @@ -133,7 +133,7 @@ export function FormattedNumber({ component="span" sx={{ mr: 0.5 }} variant={symbolsVariant || rest.variant} - color={symbolsColor || 'text.secondary'} + color={symbolsColor || rest.color} > $ @@ -158,7 +158,7 @@ export function FormattedNumber({ component="span" sx={{ ml: 0.5 }} variant={symbolsVariant || rest.variant} - color={symbolsColor || 'text.secondary'} + color={symbolsColor || rest.color} > % @@ -168,7 +168,7 @@ export function FormattedNumber({ component="span" sx={{ ml: 0.5 }} variant={symbolsVariant || rest.variant} - color={symbolsColor || 'text.secondary'} + color={symbolsColor || rest.color} > {symbol} diff --git a/src/components/primitives/TypographyGradient.tsx b/src/components/primitives/TypographyGradient.tsx index 48c033ef91..00290e22b2 100644 --- a/src/components/primitives/TypographyGradient.tsx +++ b/src/components/primitives/TypographyGradient.tsx @@ -2,15 +2,7 @@ import { Typography, TypographyProps } from '@mui/material'; export const TypographyGradient = ({ ...rest }: TypographyProps) => { return ( - ({ - color: 'transparent', - backgroundClip: 'text !important', - webkitTextFillColor: 'transparent', - background: theme.palette.gradients.aaveGradient, - })} - {...rest} - > + {rest.children} ); diff --git a/src/components/primitives/Warning.tsx b/src/components/primitives/Warning.tsx deleted file mode 100644 index aee028fef2..0000000000 --- a/src/components/primitives/Warning.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import { Alert, AlertProps } from '@mui/material'; - -export const Warning = ({ children, sx, ...rest }: AlertProps) => { - const styles = { mb: 6, alignItems: 'center', width: '100%', ...sx }; - - return ( - - {children} - - ); -}; diff --git a/src/components/primitives/transitions/ScaleFade/index.tsx b/src/components/primitives/transitions/ScaleFade/index.tsx new file mode 100644 index 0000000000..d1f40ee3de --- /dev/null +++ b/src/components/primitives/transitions/ScaleFade/index.tsx @@ -0,0 +1,114 @@ +import { useTheme } from '@mui/material/styles'; +import { TransitionProps } from '@mui/material/transitions'; +import { unstable_useForkRef as useForkRef } from '@mui/utils'; +import * as React from 'react'; +import { Transition, TransitionStatus } from 'react-transition-group'; +import { motion } from 'src/utils/motion'; + +// Force a reflow so the browser paints the "from" state before the transition runs. +const reflow = (node: HTMLElement) => node.scrollTop; + +const resolveDuration = (timeout: TransitionProps['timeout'], mode: 'enter' | 'exit'): number => + typeof timeout === 'number' ? timeout : timeout?.[mode] ?? motion.duration.overlay; + +// Base ("from") state is opacity 0 / scale 0.96; only the open state is declared here. +// `transition` is set imperatively in the callbacks so React re-renders never clear it. +const openStyles: Partial> = { + entering: { opacity: 1, transform: 'scale(1)' }, + entered: { opacity: 1, transform: 'scale(1)' }, +}; + +export interface ScaleFadeProps extends Omit { + children: React.ReactElement; +} + +/** + * Shared overlay transition: opacity 0→1 + scale(0.96→1). Modeled on MUI's `Grow` + * (which pops from a punchier 0.75). Wired as the default `TransitionComponent` for + * popovers/menus/selects in the theme, and reusable by other overlays. It clones its + * single child (no wrapper node) so it drops into MUI's Modal/Popover plumbing and + * preserves the anchor-driven `transform-origin` that Popover sets on the node. + */ +export const ScaleFade = React.forwardRef(function ScaleFade(props, ref) { + const { + children, + in: inProp, + appear = true, + timeout = motion.duration.overlay, + style, + easing, + onEnter, + onEntering, + onEntered, + onExit, + onExiting, + onExited, + } = props; + + const theme = useTheme(); + const nodeRef = React.useRef(null); + const childRef = (children as React.ReactElement & { ref?: React.Ref }).ref; + const handleRef = useForkRef(nodeRef, childRef, ref); + + const resolveEasing = (mode: 'enter' | 'exit'): string => { + if (typeof easing === 'string') return easing; + if (easing && easing[mode]) return easing[mode] as string; + return motion.easing.standard; + }; + + // With `nodeRef`, react-transition-group hands enter callbacks `isAppearing` and exit + // callbacks nothing — but MUI's own callbacks expect the DOM node, so inject it. + const normalize = + (callback?: (node: HTMLElement, isAppearing: boolean) => void) => + (isAppearing?: boolean): void => { + if (callback && nodeRef.current) { + callback(nodeRef.current, isAppearing ?? false); + } + }; + + const handleEnter = normalize((node, isAppearing) => { + reflow(node); + node.style.transition = theme.transitions.create(['opacity', 'transform'], { + duration: resolveDuration(timeout, 'enter'), + easing: resolveEasing('enter'), + }); + onEnter?.(node, isAppearing); + }); + + const handleExit = normalize((node) => { + node.style.transition = theme.transitions.create(['opacity', 'transform'], { + duration: resolveDuration(timeout, 'exit'), + easing: resolveEasing('exit'), + }); + onExit?.(node); + }); + + return ( + + appear={appear} + in={inProp} + nodeRef={nodeRef} + timeout={timeout} + onEnter={handleEnter} + onEntering={normalize(onEntering)} + onEntered={normalize(onEntered)} + onExit={handleExit} + onExiting={normalize(onExiting)} + onExited={normalize(onExited)} + > + {(state) => + React.cloneElement(children, { + style: { + opacity: 0, + transform: 'scale(0.96)', + visibility: state === 'exited' && !inProp ? 'hidden' : undefined, + ...openStyles[state], + ...style, + ...children.props.style, + }, + ref: handleRef, + }) + } + + ); +}); diff --git a/src/components/transactions/AssetInput.tsx b/src/components/transactions/AssetInput.tsx index 18635ee701..b18c83eacc 100644 --- a/src/components/transactions/AssetInput.tsx +++ b/src/components/transactions/AssetInput.tsx @@ -19,6 +19,7 @@ import React, { ReactNode } from 'react'; import NumberFormat, { NumberFormatProps } from 'react-number-format'; import { TrackEventProps } from 'src/store/analyticsSlice'; import { useRootStore } from 'src/store/root'; +import { figSurfaceShadow, figVars } from 'src/utils/figmaColors'; import { CapType } from '../caps/helper'; import { AvailableTooltip } from '../infoTooltips/AvailableTooltip'; @@ -125,18 +126,17 @@ export const AssetInput = ({ return ( - - {inputTitle ? inputTitle : Amount} - + {inputTitle ? inputTitle : Amount} {capType && } ({ - border: `1px solid ${theme.palette.divider}`, - borderRadius: '6px', + sx={{ + borderRadius: '0.75rem', + boxShadow: figSurfaceShadow('shadow-stroke-1'), overflow: 'hidden', - })} + backgroundColor: 'bg-2', + }} > {loading ? ( @@ -181,9 +181,9 @@ export const AssetInput = ({ p: 0, left: 8, zIndex: 1, - color: 'text.muted', + color: 'fg-3', '&:hover': { - color: 'text.secondary', + color: 'fg-2', }, }} onClick={() => { @@ -243,7 +243,7 @@ export const AssetInput = ({ }, '&.AssetInput__select .MuiOutlinedInput-notchedOutline': { display: 'none' }, '&.AssetInput__select .MuiSelect-icon': { - color: 'text.primary', + color: 'fg-1', right: '0%', }, }} @@ -262,7 +262,7 @@ export const AssetInput = ({ aToken={asset.aToken} sx={{ mr: 2, ml: 4 }} /> - + {symbol} @@ -304,23 +304,23 @@ export const AssetInput = ({ value={isNaN(Number(usdValue)) ? 0 : Number(usdValue)} compact symbol="USD" - variant="secondary12" - color="text.muted" - symbolsColor="text.muted" + variant="subheader2" + color="fg-3" + symbolsColor="fg-3" flexGrow={1} /> )} {asset.balance && onChange && ( <> - + {balanceText && balanceText !== '' ? balanceText : Balance}{' '} {!disableInput && ( @@ -345,8 +345,8 @@ export const AssetInput = ({ {exchangeRateComponent && ( - + Borrowing this amount will reduce your health factor and increase risk of liquidation. - + store.trackEvent); return ( - + - Attention: Parameter changes via governance can alter your account health factor and - risk of liquidation. Follow the{' '} - + Attention: + {' '} + Parameter changes via governance can alter your account health factor and risk of + liquidation. Follow the{' '} + { trackEvent(GENERAL.EXTERNAL_LINK, { asset: underlyingAsset, @@ -19,11 +22,13 @@ export const ParameterChangewarning = ({ underlyingAsset }: { underlyingAsset: s }); }} href="https://governance.aave.com/" + target="_blank" + rel="noopener" > Aave governance forum - {' '} + {' '} for updates. - + ); }; diff --git a/src/components/transactions/Bridge/BridgeAmount.tsx b/src/components/transactions/Bridge/BridgeAmount.tsx index a2032dbaca..4ae33fdc70 100644 --- a/src/components/transactions/Bridge/BridgeAmount.tsx +++ b/src/components/transactions/Bridge/BridgeAmount.tsx @@ -1,5 +1,5 @@ import { Trans } from '@lingui/macro'; -import { Typography, useTheme } from '@mui/material'; +import { Typography } from '@mui/material'; import { formatEther } from 'ethers/lib/utils'; import { FormattedNumber } from 'src/components/primitives/FormattedNumber'; import { TextWithTooltip } from 'src/components/TextWithTooltip'; @@ -22,8 +22,6 @@ export const BridgeAmount = ({ refillRate: string; maxRateLimitCapacity: string; }) => { - const { palette } = useTheme(); - const bridgeLimitTooltip = ( Due to bridging limits, the maximum amount currently available to bridge is{' '} @@ -52,7 +50,7 @@ export const BridgeAmount = ({ amount !== '' && (maxAmountReducedDueToBridgeLimit || maxAmountReducedDueToRateLimit) ? ( + Amount } diff --git a/src/components/transactions/Bridge/BridgeDestinationInput.tsx b/src/components/transactions/Bridge/BridgeDestinationInput.tsx index b87fd36ecb..b9dde12282 100644 --- a/src/components/transactions/Bridge/BridgeDestinationInput.tsx +++ b/src/components/transactions/Bridge/BridgeDestinationInput.tsx @@ -10,6 +10,7 @@ import { import { useEffect, useState } from 'react'; import { useIsContractAddress } from 'src/hooks/useIsContractAddress'; import { resolveEnsAddress } from 'src/utils/ensClient'; +import { figVars } from 'src/utils/figmaColors'; import { isAddress } from 'viem'; export const BridgeDestinationInput = ({ @@ -75,7 +76,7 @@ export const BridgeDestinationInput = ({ return ( - + To @@ -100,7 +101,7 @@ export const BridgeDestinationInput = ({ } labelPlacement="start" label={ - + Use connected account } @@ -113,33 +114,24 @@ export const BridgeDestinationInput = ({ disabled={useConnectedAccount || fetchingIsContractAddress} onChange={(e) => setDestinationAccount(e.target.value)} placeholder={t`Enter ETH address or ENS`} - sx={(theme) => ({ + sx={{ height: '44px', px: 2, - border: `1px solid ${theme.palette.divider}`, + border: `1px solid ${figVars['border-2']}`, borderRadius: '6px', overflow: 'hidden', - })} + }} endAdornment={ validatingENS || fetchingIsContractAddress ? ( ) : null } /> - - Enter a valid address - + {showWarning && !useConnectedAccount && !fetchingIsContractAddress && ( + + Enter a valid address + + )} ); }; diff --git a/src/components/transactions/Bridge/BridgeFeeTokenSelector.tsx b/src/components/transactions/Bridge/BridgeFeeTokenSelector.tsx index 5744d104f1..630195be3e 100644 --- a/src/components/transactions/Bridge/BridgeFeeTokenSelector.tsx +++ b/src/components/transactions/Bridge/BridgeFeeTokenSelector.tsx @@ -1,14 +1,7 @@ import { Trans } from '@lingui/macro'; -import { - Box, - FormControl, - MenuItem, - Select, - SelectChangeEvent, - Skeleton, - Stack, - useTheme, -} from '@mui/material'; +import { Button, Menu, MenuItem, Skeleton, Stack, SvgIcon } from '@mui/material'; +import { useState } from 'react'; +import { ChevronDownIcon } from 'src/components/icons/ChevronDownIcon'; import { FormattedNumber } from 'src/components/primitives/FormattedNumber'; import { Link } from 'src/components/primitives/Link'; import { NoData } from 'src/components/primitives/NoData'; @@ -31,12 +24,13 @@ export const BridgeFeeTokenSelector = ({ }: { feeTokens: FeeToken[]; selectedFeeToken: FeeToken; - onFeeTokenChanged: (event: SelectChangeEvent) => void; + onFeeTokenChanged: (symbol: string) => void; bridgeFeeFormatted: string; bridgeFeeUSD: string; loading: boolean; }) => { - const theme = useTheme(); + const [anchorEl, setAnchorEl] = useState(null); + const open = Boolean(anchorEl); const feeTooltip = ( Fee}> @@ -48,7 +42,7 @@ export const BridgeFeeTokenSelector = ({ href="https://docs.chain.link/ccip/billing" sx={{ textDecoration: 'underline' }} variant="caption" - color="text.secondary" + color="fg-2" > Learn more @@ -58,68 +52,45 @@ export const BridgeFeeTokenSelector = ({ return ( - - - + + setAnchorEl(null)}> + {feeTokens.map((token) => ( + { + onFeeTokenChanged(token.symbol); + setAnchorEl(null); + }} + > + + {token.symbol} + + ))} + {!bridgeFeeFormatted && !loading ? ( - + ) : loading ? ( ) : ( @@ -129,7 +100,7 @@ export const BridgeFeeTokenSelector = ({ diff --git a/src/components/transactions/Bridge/BridgeModalContent.tsx b/src/components/transactions/Bridge/BridgeModalContent.tsx index a3656c2cb3..b2004460c7 100644 --- a/src/components/transactions/Bridge/BridgeModalContent.tsx +++ b/src/components/transactions/Bridge/BridgeModalContent.tsx @@ -1,11 +1,11 @@ import { ChainId } from '@aave/contract-helpers'; -import { ExternalLinkIcon, SwitchVerticalIcon } from '@heroicons/react/outline'; +import { SwitchVerticalIcon } from '@heroicons/react/outline'; import { Trans } from '@lingui/macro'; import { + Alert, Box, Button, IconButton, - SelectChangeEvent, Skeleton, Stack, SvgIcon, @@ -15,9 +15,9 @@ import { BigNumber } from 'bignumber.js'; import { constants } from 'ethers'; import { formatUnits } from 'ethers/lib/utils'; import React, { useEffect, useState } from 'react'; +import { ArrowUpRightIcon } from 'src/components/icons/ArrowUpRightIcon'; import { Link } from 'src/components/primitives/Link'; import { Row } from 'src/components/primitives/Row'; -import { Warning } from 'src/components/primitives/Warning'; import { TextWithTooltip } from 'src/components/TextWithTooltip'; import { DetailsNumberLine, @@ -131,8 +131,8 @@ export const BridgeModalContent = () => { getGHOToken(feeTokenListWithBalance || filteredFeeTokensByChainId) ); - const handleTokenChange = (event: SelectChangeEvent) => { - const token = feeTokenListWithBalance?.find((token) => token.symbol === event.target.value); + const handleTokenChange = (symbol: string) => { + const token = feeTokenListWithBalance?.find((token) => token.symbol === symbol); if (token) { setSelectedFeeToken(token); @@ -314,7 +314,7 @@ export const BridgeModalContent = () => { href="https://docs.chain.link/ccip/concepts#finality" sx={{ textDecoration: 'underline' }} variant="caption" - color="text.secondary" + color="fg-2" > Learn more @@ -336,48 +336,39 @@ export const BridgeModalContent = () => { return ( <> - + Bridge GHO {user && ( - } + sx={{ minWidth: 'unset', mr: 9 }} > - - + Transactions + )} - + {isWrongNetwork && !readOnlyModeAddress && ( + + )} {!user ? ( - + Please connect your wallet to be able to bridge your tokens. @@ -385,7 +376,7 @@ export const BridgeModalContent = () => { ) : ( <> { onClick={handleSwapNetworks} sx={{ border: '1px solid', - borderColor: 'divider', + borderColor: 'border-2', position: 'absolute', - backgroundColor: 'background.paper', + backgroundColor: 'surface-elevated', mt: -1, - '&:hover': { backgroundColor: 'background.surface' }, + '&:hover': { backgroundColor: 'bg-2' }, }} > @@ -443,7 +434,7 @@ export const BridgeModalContent = () => { isMaxSelected={maxSelected} /> - + { @@ -493,7 +484,7 @@ export const BridgeModalContent = () => { sx={{ borderRadius: '4px' }} /> ) : ( - {estimatedTimeToDestination} + {estimatedTimeToDestination} )} @@ -507,26 +498,22 @@ export const BridgeModalContent = () => { sx={{ borderRadius: '4px' }} /> ) : ( - {estimatedTimeToDestination} + {estimatedTimeToDestination} )} */} {/* Spacer */} {feesExceedWalletBalance && ( - - - Fees exceed wallet balance - - + + Fees exceed wallet balance + )} {txError && } {txErrorBridgeMessage && ( - - - Something went wrong fetching bridge message, please try again later. - - + + Something went wrong fetching bridge message, please try again later. + )} diff --git a/src/components/transactions/CancelCowOrder/CancelCowOrderModalContent.tsx b/src/components/transactions/CancelCowOrder/CancelCowOrderModalContent.tsx index f4447b068e..67f558c619 100644 --- a/src/components/transactions/CancelCowOrder/CancelCowOrderModalContent.tsx +++ b/src/components/transactions/CancelCowOrder/CancelCowOrderModalContent.tsx @@ -57,7 +57,7 @@ export const CancelCowOrderModalContent = ({ cowOrder }: CancelCowOrderModalCont Cancel order - + {isCowSwapSubset(cowOrder) && cowOrder.usedAdapter ? ( This will cancel the order via an on-chain transaction. Note that the order will not diff --git a/src/components/transactions/ClaimRewards/ClaimRewardsModalContent.tsx b/src/components/transactions/ClaimRewards/ClaimRewardsModalContent.tsx index ec09aa1a01..9895501719 100644 --- a/src/components/transactions/ClaimRewards/ClaimRewardsModalContent.tsx +++ b/src/components/transactions/ClaimRewards/ClaimRewardsModalContent.tsx @@ -357,7 +357,7 @@ export const ClaimRewardsModalContent = ({ user, reserves }: ClaimRewardsModalCo )} {meritClaimRewards?.claimable && meritClaimRewards.claimable.length > 0 && ( - + {selectedRewardSymbol === RewardSymbol.ALL ? ( Claiming all protocol rewards and merit rewards together ) : selectedRewardSymbol === RewardSymbol.MERIT_ALL || @@ -415,8 +415,8 @@ export const ClaimRewardsModalContent = ({ user, reserves }: ClaimRewardsModalCo > - - + + {reward.symbol} @@ -425,7 +425,7 @@ export const ClaimRewardsModalContent = ({ user, reserves }: ClaimRewardsModalCo variant="helperText" compact symbol="USD" - color="text.secondary" + color="fg-2" /> ))} @@ -458,9 +458,9 @@ export const ClaimRewardsModalContent = ({ user, reserves }: ClaimRewardsModalCo /> - + {meritReward.currency.symbol} ))} @@ -510,11 +510,8 @@ export const ClaimRewardsModalContent = ({ user, reserves }: ClaimRewardsModalCo > - - + + {meritReward.symbol} ))} @@ -565,8 +562,8 @@ export const ClaimRewardsModalContent = ({ user, reserves }: ClaimRewardsModalCo > - - + + {reward.symbol} @@ -575,7 +572,7 @@ export const ClaimRewardsModalContent = ({ user, reserves }: ClaimRewardsModalCo variant="helperText" compact symbol="USD" - color="text.secondary" + color="fg-2" /> ))} diff --git a/src/components/transactions/ClaimRewards/RewardsSelect.tsx b/src/components/transactions/ClaimRewards/RewardsSelect.tsx index aaed65f232..b895816bfe 100644 --- a/src/components/transactions/ClaimRewards/RewardsSelect.tsx +++ b/src/components/transactions/ClaimRewards/RewardsSelect.tsx @@ -29,7 +29,7 @@ export const RewardsSelect = ({ }: RewardsSelectProps) => { return ( - + Rewards to claim @@ -40,42 +40,42 @@ export const RewardsSelect = ({ width: '100%', height: '44px', borderRadius: '6px', - borderColor: 'divider', + borderColor: 'border-2', outline: 'none !important', - color: 'text.primary', + color: 'fg-1', '.MuiOutlinedInput-input': { backgroundColor: 'transparent', }, '&:hover .MuiOutlinedInput-notchedOutline, .MuiOutlinedInput-notchedOutline': { - borderColor: 'divider', + borderColor: 'border-2', outline: 'none !important', borderWidth: '1px', }, '&.Mui-focused .MuiOutlinedInput-notchedOutline': { - borderColor: 'divider', + borderColor: 'border-2', borderWidth: '1px', }, - '.MuiSelect-icon': { color: 'text.primary' }, + '.MuiSelect-icon': { color: 'fg-1' }, }} native={false} renderValue={(reward) => { if (reward === RewardSymbol.ALL) { return ( - + Claim all rewards ); } if (reward === RewardSymbol.MERIT_ALL) { return ( - + Claim all merit rewards ); } if (reward === RewardSymbol.PROTOCOL_ALL) { return ( - + Claim all protocol rewards ); @@ -94,7 +94,7 @@ export const RewardsSelect = ({ return ( - {selected.symbol} + {selected.symbol} ); }} @@ -102,7 +102,7 @@ export const RewardsSelect = ({ All Rewards @@ -120,7 +120,7 @@ export const RewardsSelect = ({ Merit Rewards @@ -159,7 +159,7 @@ export const RewardsSelect = ({ component="span" sx={{ display: 'inline-flex', alignItems: 'center' }} variant="caption" - color="text.muted" + color="fg-3" > ~ @@ -168,8 +168,8 @@ export const RewardsSelect = ({ variant="caption" compact symbol="USD" - symbolsColor="text.muted" - color="text.muted" + symbolsColor="fg-3" + color="fg-3" /> @@ -182,7 +182,7 @@ export const RewardsSelect = ({ Protocol Rewards @@ -191,7 +191,7 @@ export const RewardsSelect = ({ ...(rewards.length > 1 ? [ - + Claim all protocol rewards , @@ -208,7 +208,7 @@ export const RewardsSelect = ({ component="span" sx={{ display: 'inline-flex', alignItems: 'center' }} variant="caption" - color="text.muted" + color="fg-3" > ~ @@ -217,8 +217,8 @@ export const RewardsSelect = ({ variant="caption" compact symbol="USD" - symbolsColor="text.muted" - color="text.muted" + symbolsColor="fg-3" + color="fg-3" /> diff --git a/src/components/transactions/CollateralChange/CollateralChangeModalContent.tsx b/src/components/transactions/CollateralChange/CollateralChangeModalContent.tsx index 73c56f385f..cd4c8f5359 100644 --- a/src/components/transactions/CollateralChange/CollateralChangeModalContent.tsx +++ b/src/components/transactions/CollateralChange/CollateralChangeModalContent.tsx @@ -1,8 +1,7 @@ import { calculateHealthFactorFromBalancesBigUnits, valueToBigNumber } from '@aave/math-utils'; import { Trans } from '@lingui/macro'; -import { Typography } from '@mui/material'; +import { Alert, AlertTitle, Typography } from '@mui/material'; import { useEffect, useState } from 'react'; -import { Warning } from 'src/components/primitives/Warning'; import { ExtendedFormattedUser, useAppDataContext, @@ -148,28 +147,28 @@ export const CollateralChangeModalContent = ({ return ( <> {showEnableIsolationModeMsg && ( - + Enabling this asset as collateral increases your borrowing power and Health Factor. However, it can get liquidated if your health factor drops below 1. - + )} {showDisableIsolationModeMsg && ( - + Disabling this asset as collateral affects your borrowing power and Health Factor. - + )} {showEnterIsolationModeMsg && } {showExitIsolationModeMsg && ( - + You will exit isolation mode and other tokens can now be used as collateral - + )} {poolReserve.isIsolated && debtCeiling.determineWarningDisplay({ debtCeiling })} @@ -190,17 +189,15 @@ export const CollateralChangeModalContent = ({ {blockingError === ErrorType.ZERO_LTV_ENABLE_EMODE_FIRST && ( <> - - + + E-Mode required - - - - This asset has 0 LTV and cannot be used as collateral. Enable an E-Mode to use{' '} - {symbol} as collateral. - - - + + + This asset has 0 LTV and cannot be used as collateral. Enable an E-Mode to use{' '} + {symbol} as collateral. + + {readOnlyModeAddress && ( - + Read-only mode. Connect to a wallet to perform transactions. )} diff --git a/src/components/transactions/Emode/EmodeAssetTable.tsx b/src/components/transactions/Emode/EmodeAssetTable.tsx index 78f5a90dd1..f01d7d0a88 100644 --- a/src/components/transactions/Emode/EmodeAssetTable.tsx +++ b/src/components/transactions/Emode/EmodeAssetTable.tsx @@ -12,6 +12,7 @@ import { } from '@mui/material'; import { TokenIcon } from 'src/components/primitives/TokenIcon'; import { ConfigStatus } from 'src/modules/reserve-overview/ReserveEModePanel'; +import { figVars } from 'src/utils/figmaColors'; interface EmodeAssetTableProps { assets: Array<{ @@ -37,17 +38,37 @@ export const EmodeAssetTable = ({ assets, maxHeight = '270px' }: EmodeAssetTable }, }} > - + Asset - + Boosted LTV - + Borrowable @@ -70,7 +91,7 @@ export const EmodeAssetTable = ({ assets, maxHeight = '270px' }: EmodeAssetTable - {asset.symbol} + {asset.symbol} diff --git a/src/components/transactions/Emode/EmodeModalContent.tsx b/src/components/transactions/Emode/EmodeModalContent.tsx index 9133e59a8f..9204e545cd 100644 --- a/src/components/transactions/Emode/EmodeModalContent.tsx +++ b/src/components/transactions/Emode/EmodeModalContent.tsx @@ -2,6 +2,8 @@ import { formatUserSummary, valueToBigNumber } from '@aave/math-utils'; import { ArrowNarrowRightIcon } from '@heroicons/react/solid'; import { Plural, Trans } from '@lingui/macro'; import { + Alert, + AlertTitle, Box, Collapse, Divider, @@ -17,7 +19,6 @@ import { MaxLTVTooltip } from 'src/components/infoTooltips/MaxLTVTooltip'; import { FormattedNumber } from 'src/components/primitives/FormattedNumber'; import { Link } from 'src/components/primitives/Link'; import { Row } from 'src/components/primitives/Row'; -import { Warning } from 'src/components/primitives/Warning'; import { TextWithTooltip } from 'src/components/TextWithTooltip'; import { EmodeCategory } from 'src/helpers/types'; import { @@ -215,57 +216,53 @@ export const EmodeModalContent = ({ user }: { user: ExtendedFormattedUser }) => switch (blockingError) { case ErrorType.ZERO_LTV_COLLATERAL_BLOCKING: return ( - - + + Cannot disable E-Mode - - - - You must disable {zeroLtvCollateralSymbols.join(', ')} as collateral before exiting - E-Mode. These assets have 0 LTV outside of E-Mode and cannot be used as collateral. - - - + + + You must disable {zeroLtvCollateralSymbols.join(', ')} as collateral before exiting + E-Mode. These assets have 0 LTV outside of E-Mode and cannot be used as collateral. + + ); case ErrorType.EMODE_DISABLED_LIQUIDATION: return ( - - + + Cannot disable E-Mode - - - - You can not disable E-Mode because that could cause liquidation. To exit E-Mode - supply or repay borrowed positions. - - - + + + You can not disable E-Mode because that could cause liquidation. To exit E-Mode supply + or repay borrowed positions. + + ); case ErrorType.CLOSE_POSITIONS_BEFORE_SWITCHING: { const { incompatibleBorrows, zeroLtvCollateral } = selectedEmode.blockReason; return ( - - + + Cannot switch to this category - + {incompatibleBorrows.length > 0 && ( - + Repay your {incompatibleBorrows.join(', ')}{' '} to use this category. - + )} {zeroLtvCollateral.length > 0 && ( - + Disable {zeroLtvCollateral.join(', ')} as collateral to use this category. These assets would have 0% LTV. - + )} - + ); } default: @@ -340,17 +337,15 @@ export const EmodeModalContent = ({ user }: { user: ExtendedFormattedUser }) => {blockingError !== undefined && } {showLiquidationRiskWarning && ( - - + + Liquidation risk - - - - This action will reduce your health factor. Please be mindful of the increased risk of - collateral liquidation.{' '} - - - + + + This action will reduce your health factor. Please be mindful of the increased risk of + collateral liquidation.{' '} + + )} @@ -376,7 +371,7 @@ export const EmodeModalContent = ({ user }: { user: ExtendedFormattedUser }) => percent visibleDecimals={2} value={user.currentLoanToValue} - variant="secondary12" + variant="subheader2" /> @@ -385,7 +380,7 @@ export const EmodeModalContent = ({ user }: { user: ExtendedFormattedUser }) => percent visibleDecimals={2} value={newSummary.currentLoanToValue} - variant="secondary12" + variant="subheader2" /> @@ -400,12 +395,12 @@ export const EmodeModalContent = ({ user }: { user: ExtendedFormattedUser }) => - + Asset category {selectedEmode.isolated && ( <> - + - width: '100%', height: '44px', borderRadius: '6px', - borderColor: 'divider', + borderColor: 'border-2', outline: 'none !important', - color: 'text.primary', + color: 'fg-1', '.MuiOutlinedInput-input': { backgroundColor: 'transparent', }, '&:hover .MuiOutlinedInput-notchedOutline, .MuiOutlinedInput-notchedOutline': { - borderColor: 'divider', + borderColor: 'border-2', outline: 'none !important', borderWidth: '1px', }, '&.Mui-focused .MuiOutlinedInput-notchedOutline': { - borderColor: 'divider', + borderColor: 'border-2', borderWidth: '1px', }, - '.MuiSelect-icon': { color: 'text.primary' }, + '.MuiSelect-icon': { color: 'fg-1' }, }} value={selectedEmode.id} onChange={(e) => selectEMode(Number(e.target.value))} @@ -476,7 +471,7 @@ export const EmodeModalContent = ({ user }: { user: ExtendedFormattedUser }) => )} {!emode.available && ( - + Unavailable )} @@ -528,7 +523,7 @@ export const EmodeModalContent = ({ user }: { user: ExtendedFormattedUser }) => )} {!emode.available && ( - + Unavailable )} @@ -550,7 +545,7 @@ export const EmodeModalContent = ({ user }: { user: ExtendedFormattedUser }) => percent visibleDecimals={2} value={user.currentLoanToValue} - variant="secondary12" + variant="subheader2" /> @@ -559,7 +554,7 @@ export const EmodeModalContent = ({ user }: { user: ExtendedFormattedUser }) => percent visibleDecimals={2} value={Number(selectedEmode.ltv) / 10000} - variant="secondary12" + variant="subheader2" /> diff --git a/src/components/transactions/FlowCommons/BaseCancelled.tsx b/src/components/transactions/FlowCommons/BaseCancelled.tsx index c0d0a568ff..88a54adbab 100644 --- a/src/components/transactions/FlowCommons/BaseCancelled.tsx +++ b/src/components/transactions/FlowCommons/BaseCancelled.tsx @@ -14,7 +14,7 @@ export type BaseWaitingTxViewProps = { }; const ExtLinkIcon = () => ( - + ); @@ -69,9 +69,9 @@ export const BaseCancelledView = ({
) : ( - - ) : ( - - There was some error. Please try changing the parameters or{' '} - - - )} - - + + {txError.error ? ( + <> + {txError.error}{' '} + + + ) : ( + + There was some error. Please try changing the parameters or{' '} + + + )} + ); }; diff --git a/src/components/transactions/FlowCommons/PermitNonceInfo.tsx b/src/components/transactions/FlowCommons/PermitNonceInfo.tsx index 358680be90..d73c72acd6 100644 --- a/src/components/transactions/FlowCommons/PermitNonceInfo.tsx +++ b/src/components/transactions/FlowCommons/PermitNonceInfo.tsx @@ -14,7 +14,7 @@ export const PermitNonceInfo = () => { > - + Approve with  - You {action} {' '} - {symbol} + You {action} {symbol} )} @@ -82,7 +82,7 @@ export const TxSuccessView = ({ {addToken && symbol && ( ({ - border: theme.palette.mode === 'dark' ? `1px solid ${theme.palette.divider}` : 'none', + border: theme.palette.mode === 'dark' ? `1px solid ${figVars['border-2']}` : 'none', background: theme.palette.mode === 'dark' ? 'none' : '#F7F7F9', borderRadius: '12px', display: 'flex', @@ -97,7 +97,7 @@ export const TxSuccessView = ({ aToken={addToken && addToken.aToken ? true : false} sx={{ fontSize: '32px', mt: '12px', mb: '8px' }} /> - + Add {addToken && addToken.aToken ? 'aToken ' : 'token '} to wallet to track your balance. @@ -112,7 +112,7 @@ export const TxSuccessView = ({ image: !/_/.test(addToken.symbol) ? base64 : undefined, }); }} - variant={theme.palette.mode === 'dark' ? 'outlined' : 'contained'} + variant={theme.palette.mode === 'dark' ? 'tertiary' : 'contained'} size="medium" sx={{ mt: '8px', mb: '12px' }} > diff --git a/src/components/transactions/FlowCommons/TxModalDetails.tsx b/src/components/transactions/FlowCommons/TxModalDetails.tsx index 41600c9360..430d2dca33 100644 --- a/src/components/transactions/FlowCommons/TxModalDetails.tsx +++ b/src/components/transactions/FlowCommons/TxModalDetails.tsx @@ -16,6 +16,7 @@ import { import { Row } from 'src/components/primitives/Row'; import { SecondsToString } from 'src/components/SecondsToString'; import { CollateralType } from 'src/helpers/types'; +import { figVars } from 'src/utils/figmaColors'; import { HealthFactorNumber } from '../../HealthFactorNumber'; import { IncentivesButton } from '../../incentives/IncentivesButton'; @@ -49,20 +50,20 @@ export const TxModalDetails: React.FC = ({ showGasStation = true, }) => { return ( - - + + Transaction overview ({ + sx={{ p: 3, - border: `1px solid ${theme.palette.divider}`, + border: `1px solid ${figVars['border-2']}`, borderRadius: '4px', '.MuiBox-root:last-of-type': { mb: 0, }, - })} + }} > {children} @@ -108,11 +109,11 @@ export const DetailsNumberLine = ({ <> {iconSymbol && } {numberPrefix && {numberPrefix}} - + {futureValue && ( <> {ArrowRightIcon} - + )} @@ -165,9 +166,9 @@ export const DetailsNumberLineWithSub = ({ {value && ( <> - + {!hideSymbolSuffix && ( - + {symbol} )} @@ -175,9 +176,9 @@ export const DetailsNumberLineWithSub = ({ )} {tokenIcon && } - + {!hideSymbolSuffix && ( - + {symbol} )} @@ -277,7 +278,7 @@ export const DetailsIncentivesLine = ({ {ArrowRightIcon} {futureIncentives && futureIncentives.length === 0 && ( - + None )} @@ -317,7 +318,7 @@ export const DetailsHFLine = ({ ) : ( <> - + {visibleHfChange && ( <> @@ -325,7 +326,7 @@ export const DetailsHFLine = ({ )} @@ -333,7 +334,7 @@ export const DetailsHFLine = ({ )} - + Liquidation at {' <1.0'} @@ -388,7 +389,7 @@ export const DetailsCooldownLine = ({ ) : ( - + @@ -419,11 +420,11 @@ export const DetailsTextLine = ({ ) : ( {compactedProps ? ( - + {text} ) : ( - {text} + {text} )} )} diff --git a/src/components/transactions/FlowCommons/TxModalTitle.tsx b/src/components/transactions/FlowCommons/TxModalTitle.tsx index 702ed90ee4..e7a712f38c 100644 --- a/src/components/transactions/FlowCommons/TxModalTitle.tsx +++ b/src/components/transactions/FlowCommons/TxModalTitle.tsx @@ -1,14 +1,27 @@ -import { Typography } from '@mui/material'; +import { SxProps, Theme, Typography } from '@mui/material'; import { ReactNode } from 'react'; export type TxModalTitleProps = { title: ReactNode; symbol?: string; + sx?: SxProps; }; -export const TxModalTitle = ({ title, symbol }: TxModalTitleProps) => { +export const TxModalTitle = ({ title, symbol, sx }: TxModalTitleProps) => { return ( - + {title} {symbol ?? ''} ); diff --git a/src/components/transactions/FunCheckout/FunSupplyButton.tsx b/src/components/transactions/FunCheckout/FunSupplyButton.tsx index 3e3ea7a4b4..1b9bd68dfc 100644 --- a/src/components/transactions/FunCheckout/FunSupplyButton.tsx +++ b/src/components/transactions/FunCheckout/FunSupplyButton.tsx @@ -66,7 +66,8 @@ export function FunSupplyButton({ )} diff --git a/src/components/transactions/NetworkSelect.tsx b/src/components/transactions/NetworkSelect.tsx index a76296d51e..f2225d4f6a 100644 --- a/src/components/transactions/NetworkSelect.tsx +++ b/src/components/transactions/NetworkSelect.tsx @@ -8,6 +8,7 @@ import { Typography, } from '@mui/material'; import * as React from 'react'; +import { figSurfaceShadow } from 'src/utils/figmaColors'; import { SupportedNetworkWithChainId } from './Bridge/BridgeConfig'; @@ -39,14 +40,15 @@ export const NetworkSelect = ({ return ( ({ + sx={{ p: '8px 0px', - border: `1px solid ${theme.palette.divider}`, - borderRadius: '6px', + borderRadius: '0.75rem', + boxShadow: figSurfaceShadow('shadow-stroke-1'), + backgroundColor: 'bg-2', mb: 1, - })} + }} > - + Network @@ -57,32 +59,20 @@ export const NetworkSelect = ({ onChange={handleChange} variant="outlined" sx={{ - '.MuiSelect-select': { + // Flatten the trigger: strip the theme's Select-pill (bg fill + surface-shadow ring) + // in all states so only the outer container remains. `&&` matches the theme's specificity. + '&&, &&:hover, &&:has(.MuiSelect-select[aria-expanded="true"])': { backgroundColor: 'transparent', + boxShadow: 'none', }, - '& .MuiOutlinedInput-root': { - background: 'transparent', - '&:hover': { - '.MuiOutlinedInput-notchedOutline': { - borderColor: 'currentColor', - }, - }, - '&.Mui-focused': { - '.MuiOutlinedInput-notchedOutline': { - borderColor: 'primary.main', - }, - }, - }, - '& .MuiOutlinedInput-notchedOutline': { - border: 'none', + '& .MuiOutlinedInput-notchedOutline': { border: 'none' }, + '& .MuiSelect-select': { + backgroundColor: 'transparent', }, '& .MuiSelect-icon': { marginRight: '12px', display: disabled ? 'none' : 'inline-block', }, - '& input.Mui-disabled': { - color: 'red', - }, '& .MuiOutlinedInput-input.Mui-disabled': { backgroundColor: 'transparent', opacity: 1, diff --git a/src/components/transactions/Repay/RepayModalContent.tsx b/src/components/transactions/Repay/RepayModalContent.tsx index 45702d2e44..b9b6ab4444 100644 --- a/src/components/transactions/Repay/RepayModalContent.tsx +++ b/src/components/transactions/Repay/RepayModalContent.tsx @@ -6,10 +6,10 @@ import { valueToBigNumber, } from '@aave/math-utils'; import { Trans } from '@lingui/macro'; +import { Alert } from '@mui/material'; import Typography from '@mui/material/Typography'; import { BigNumber } from 'bignumber.js'; import React, { useEffect, useRef, useState } from 'react'; -import { Warning } from 'src/components/primitives/Warning'; import { ExtendedFormattedUser, useAppDataContext, @@ -282,14 +282,12 @@ export const RepayModalContent = ({ {txError && } {showUSDTResetWarning && ( - - - - USDT on Ethereum requires approval reset before a new approval. This will require an - additional transaction. - - - + + + USDT on Ethereum requires approval reset before a new approval. This will require an + additional transaction. + + )} - + Repay with @@ -39,7 +39,7 @@ export function RepayTypeSelector({ disabled={repayType === RepayType.BALANCE} onClick={() => trackEvent(REPAY_MODAL.SWITCH_REPAY_TYPE, { repayType: 'Wallet Balance' })} > - + Wallet balance @@ -49,7 +49,7 @@ export function RepayTypeSelector({ disabled={repayType === RepayType.COLLATERAL} onClick={() => trackEvent(REPAY_MODAL.SWITCH_REPAY_TYPE, { repayType: 'Collateral' })} > - + Collateral diff --git a/src/components/transactions/StakeCooldown/StakeCooldownModalContent.tsx b/src/components/transactions/StakeCooldown/StakeCooldownModalContent.tsx index b3b9437a24..ec06be9a5b 100644 --- a/src/components/transactions/StakeCooldown/StakeCooldownModalContent.tsx +++ b/src/components/transactions/StakeCooldown/StakeCooldownModalContent.tsx @@ -3,13 +3,12 @@ import { valueToBigNumber } from '@aave/math-utils'; import { ArrowDownIcon, CalendarIcon } from '@heroicons/react/outline'; import { ArrowNarrowRightIcon } from '@heroicons/react/solid'; import { Trans } from '@lingui/macro'; -import { Box, Checkbox, FormControlLabel, SvgIcon, Typography } from '@mui/material'; +import { Alert, Box, Checkbox, FormControlLabel, SvgIcon, Typography } from '@mui/material'; import dayjs from 'dayjs'; import { formatEther, parseUnits } from 'ethers/lib/utils'; import React, { useState } from 'react'; import { FormattedNumber } from 'src/components/primitives/FormattedNumber'; import { TokenIcon } from 'src/components/primitives/TokenIcon'; -import { Warning } from 'src/components/primitives/Warning'; import { useGeneralStakeUiData } from 'src/hooks/stake/useGeneralStakeUiData'; import { useUserStakeUiData } from 'src/hooks/stake/useUserStakeUiData'; import { useModalContext } from 'src/hooks/useModal'; @@ -193,12 +192,12 @@ export const StakeCooldownModalContent = ({ stakeAssetName, icon }: StakeCooldow pb: '30px', }} > - + Amount to unstake - + @@ -212,18 +211,18 @@ export const StakeCooldownModalContent = ({ stakeAssetName, icon }: StakeCooldow pb: '30px', }} > - + Unstake window - + {dateMessage(stakeCooldownSeconds)} - + {dateMessage(stakeCooldownSeconds + stakeUnstakeWindow)} @@ -332,14 +331,12 @@ export const StakeCooldownModalContent = ({ stakeAssetName, icon }: StakeCooldow )} - - - - If you DO NOT unstake within {timeMessage(stakeUnstakeWindow)} of unstake window, you - will need to activate cooldown process again. - - - + + + If you DO NOT unstake within {timeMessage(stakeUnstakeWindow)} of unstake window, you will + need to activate cooldown process again. + + diff --git a/src/components/transactions/StakingMigrate/StakingMigrateModalContent.tsx b/src/components/transactions/StakingMigrate/StakingMigrateModalContent.tsx index 2fa61e5ac7..62fb9f6779 100644 --- a/src/components/transactions/StakingMigrate/StakingMigrateModalContent.tsx +++ b/src/components/transactions/StakingMigrate/StakingMigrateModalContent.tsx @@ -112,15 +112,15 @@ const TxDetailsRow = ({ caption, value, valueUSD }: TxDetailsRowProps) => { - + diff --git a/src/components/transactions/Supply/CollateralOptionsSelector.tsx b/src/components/transactions/Supply/CollateralOptionsSelector.tsx index 95f1dd6fad..a95b8f1ab4 100644 --- a/src/components/transactions/Supply/CollateralOptionsSelector.tsx +++ b/src/components/transactions/Supply/CollateralOptionsSelector.tsx @@ -21,6 +21,7 @@ import { ComputedReserveData, ExtendedFormattedUser, } from 'src/hooks/app-data-provider/useAppDataProvider'; +import { figVars } from 'src/utils/figmaColors'; export interface CollateralOption { emodeId: number; // 0 = default (no e-mode), >0 = specific e-mode category @@ -256,7 +257,7 @@ export const CollateralOptionsSelector = React.memo( return ( - + Collateral options @@ -276,7 +277,7 @@ export const CollateralOptionsSelector = React.memo( display: 'block', textAlign: 'left', border: `1px solid ${ - isSelected ? theme.palette.primary.main : theme.palette.divider + isSelected ? theme.vars.palette.primary.main : figVars['border-2'] }`, borderRadius: '8px', cursor: option.blocked ? 'not-allowed' : 'pointer', @@ -284,8 +285,8 @@ export const CollateralOptionsSelector = React.memo( opacity: option.blocked ? 0.5 : 1, '&:hover': { borderColor: option.blocked - ? theme.palette.divider - : theme.palette.primary.main, + ? figVars['border-2'] + : theme.vars.palette.primary.main, }, transition: 'all 0.15s ease', })} @@ -298,7 +299,7 @@ export const CollateralOptionsSelector = React.memo( height: 16, borderRadius: '50%', border: `2px solid ${ - isSelected ? theme.palette.primary.main : theme.palette.divider + isSelected ? theme.vars.palette.primary.main : figVars['border-2'] }`, display: 'flex', alignItems: 'center', @@ -321,9 +322,9 @@ export const CollateralOptionsSelector = React.memo( percent visibleDecimals={0} variant="subheader1" - color="text.primary" + color="fg-1" /> - + LTV {option.isCurrentEmode && ( @@ -348,7 +349,7 @@ export const CollateralOptionsSelector = React.memo( px: 1, py: 0.25, borderRadius: '4px', - bgcolor: 'text.secondary', + bgcolor: 'fg-2', color: '#fff', fontSize: '10px', }} @@ -389,7 +390,7 @@ export const CollateralOptionsSelector = React.memo( Borrow:} assets={option.borrowableAssets} /> )} {option.emodeId === 0 && ( - + Borrow: All eligible assets )} @@ -439,7 +440,7 @@ export const CollateralOptionsSelector = React.memo( expandIcon={} sx={{ px: 0, minHeight: 'auto', '& .MuiAccordionSummary-content': { my: 1 } }} > - + Category assets @@ -463,19 +464,19 @@ const AssetRow = ({ assets: Array<{ symbol: string; iconSymbol: string }>; }) => ( - + {label} {assets.slice(0, MAX_VISIBLE_ASSETS).map((asset) => ( - + {asset.symbol} ))} {assets.length > MAX_VISIBLE_ASSETS && ( - + +{assets.length - MAX_VISIBLE_ASSETS} )} diff --git a/src/components/transactions/Supply/SupplyModalContent.tsx b/src/components/transactions/Supply/SupplyModalContent.tsx index d049b37372..094914fe23 100644 --- a/src/components/transactions/Supply/SupplyModalContent.tsx +++ b/src/components/transactions/Supply/SupplyModalContent.tsx @@ -1,13 +1,12 @@ import { API_ETH_MOCK_ADDRESS } from '@aave/contract-helpers'; import { formatUserSummary, USD_DECIMALS, valueToBigNumber } from '@aave/math-utils'; import { t, Trans } from '@lingui/macro'; -import { Skeleton, Stack, Typography } from '@mui/material'; +import { Alert, AlertTitle, Skeleton, Stack, Typography } from '@mui/material'; import { BigNumber } from 'bignumber.js'; import React, { useEffect, useState } from 'react'; import { WrappedTokenTooltipContent } from 'src/components/infoTooltips/WrappedTokenToolTipContent'; import { FormattedNumber } from 'src/components/primitives/FormattedNumber'; import { TokenIcon } from 'src/components/primitives/TokenIcon'; -import { Warning } from 'src/components/primitives/Warning'; import { TextWithTooltip } from 'src/components/TextWithTooltip'; import { AMPLWarning } from 'src/components/Warnings/AMPLWarning'; import { CollateralType } from 'src/helpers/types'; @@ -316,9 +315,9 @@ export const SupplyModalContent = React.memo( {supplyCapWarning} {debtCeilingWarning} {poolReserve.symbol === 'AMPL' && ( - + - + )} {process.env.NEXT_PUBLIC_ENABLE_STAKING === 'true' && poolReserve.symbol === 'AAVE' && @@ -390,41 +389,39 @@ export const SupplyModalContent = React.memo( {needsEmodeSwitch && ( - - + + E-Mode change - - - {user.userEmodeCategoryId === 0 ? ( + + {user.userEmodeCategoryId === 0 ? ( + + This transaction will enable E-Mode ( + {replaceUnderscoresWithSpaces(eModes[selectedEmodeId]?.label)}). Borrowing will be + restricted to assets within this category. + + ) : selectedEmodeId === 0 ? ( + + This transaction will disable E-Mode. All assets will revert to their base LTV and + liquidation thresholds. + + ) : ( + + This transaction will switch E-Mode from{' '} + {replaceUnderscoresWithSpaces(eModes[user.userEmodeCategoryId]?.label)} to{' '} + {replaceUnderscoresWithSpaces(eModes[selectedEmodeId]?.label)}. Borrowing will be + restricted to assets within the new category. + + )} + {supplyUnWrapped && ( + <> + {' '} - This transaction will enable E-Mode ( - {replaceUnderscoresWithSpaces(eModes[selectedEmodeId]?.label)}). Borrowing will be - restricted to assets within this category. + This will require two separate transactions: one to change E-Mode and one to + supply. - ) : selectedEmodeId === 0 ? ( - - This transaction will disable E-Mode. All assets will revert to their base LTV and - liquidation thresholds. - - ) : ( - - This transaction will switch E-Mode from{' '} - {replaceUnderscoresWithSpaces(eModes[user.userEmodeCategoryId]?.label)} to{' '} - {replaceUnderscoresWithSpaces(eModes[selectedEmodeId]?.label)}. Borrowing will be - restricted to assets within the new category. - - )} - {supplyUnWrapped && ( - <> - {' '} - - This will require two separate transactions: one to change E-Mode and one to - supply. - - - )} - - + + )} + )} {txError && } @@ -681,10 +678,10 @@ const ExchangeRate = ({ - + sDAI diff --git a/src/components/transactions/Swap/details/CollateralSwapDetails.tsx b/src/components/transactions/Swap/details/CollateralSwapDetails.tsx index a69dc2cdb5..be2a616a13 100644 --- a/src/components/transactions/Swap/details/CollateralSwapDetails.tsx +++ b/src/components/transactions/Swap/details/CollateralSwapDetails.tsx @@ -223,7 +223,7 @@ export const ColalteralSwapDetails = ({ state }: { params: SwapParams; state: Sw /> + {sourceAmountAfterSwap.toString()} {userReserve.reserve.symbol} } @@ -235,7 +235,7 @@ export const ColalteralSwapDetails = ({ state }: { params: SwapParams; state: Sw @@ -248,8 +248,8 @@ export const ColalteralSwapDetails = ({ state }: { params: SwapParams; state: Sw variant="helperText" compact symbol="USD" - symbolsColor="text.secondary" - color="text.secondary" + symbolsColor="fg-2" + color="fg-2" /> )} @@ -275,7 +275,7 @@ export const ColalteralSwapDetails = ({ state }: { params: SwapParams; state: Sw /> + {targetAmountAfterSwap.toString()} {userTargetReserve.reserve.symbol} } @@ -287,7 +287,7 @@ export const ColalteralSwapDetails = ({ state }: { params: SwapParams; state: Sw @@ -300,8 +300,8 @@ export const ColalteralSwapDetails = ({ state }: { params: SwapParams; state: Sw variant="helperText" compact symbol="USD" - symbolsColor="text.secondary" - color="text.secondary" + symbolsColor="fg-2" + color="fg-2" /> )} diff --git a/src/components/transactions/Swap/details/CowCostsDetails.tsx b/src/components/transactions/Swap/details/CowCostsDetails.tsx index a04d52d784..3365efdc84 100644 --- a/src/components/transactions/Swap/details/CowCostsDetails.tsx +++ b/src/components/transactions/Swap/details/CowCostsDetails.tsx @@ -173,15 +173,15 @@ export const CowCostsDetails = ({ state }: { state: SwapState }) => { width="16px" sx={{ mr: 2, ml: 4, fontSize: '16px' }} /> - + @@ -210,15 +210,15 @@ export const CowCostsDetails = ({ state }: { state: SwapState }) => { width="16px" sx={{ mr: 2, ml: 4, fontSize: '16px' }} /> - + @@ -240,15 +240,15 @@ export const CowCostsDetails = ({ state }: { state: SwapState }) => { width="16px" sx={{ mr: 2, ml: 4, fontSize: '16px' }} /> - + diff --git a/src/components/transactions/Swap/details/DebtSwapDetails.tsx b/src/components/transactions/Swap/details/DebtSwapDetails.tsx index 0e107ddf3b..f1a17ba631 100644 --- a/src/components/transactions/Swap/details/DebtSwapDetails.tsx +++ b/src/components/transactions/Swap/details/DebtSwapDetails.tsx @@ -61,13 +61,13 @@ export const DebtSwapDetails = ({ <> {ArrowRightIcon} @@ -109,7 +109,7 @@ export const DebtSwapDetails = ({ /> + {sourceAmountAfterSwap.toString()} {state.sourceReserve.reserve.symbol} } @@ -121,7 +121,7 @@ export const DebtSwapDetails = ({ @@ -132,8 +132,8 @@ export const DebtSwapDetails = ({ variant="helperText" compact symbol="USD" - symbolsColor="text.secondary" - color="text.secondary" + symbolsColor="fg-2" + color="fg-2" /> )} @@ -159,7 +159,7 @@ export const DebtSwapDetails = ({ /> + {targetAmountAfterSwap.toString()} {state.destinationReserve.reserve.symbol} } @@ -171,7 +171,7 @@ export const DebtSwapDetails = ({ @@ -182,8 +182,8 @@ export const DebtSwapDetails = ({ variant="helperText" compact symbol="USD" - symbolsColor="text.secondary" - color="text.secondary" + symbolsColor="fg-2" + color="fg-2" /> )} diff --git a/src/components/transactions/Swap/details/ParaswapCostsDetails.tsx b/src/components/transactions/Swap/details/ParaswapCostsDetails.tsx index ae0f632b10..d83f97a685 100644 --- a/src/components/transactions/Swap/details/ParaswapCostsDetails.tsx +++ b/src/components/transactions/Swap/details/ParaswapCostsDetails.tsx @@ -48,15 +48,15 @@ export const ParaswapCostsDetails = ({ state }: { state: SwapState }) => { width="16px" sx={{ mr: 2, ml: 4, fontSize: '16px' }} /> - + diff --git a/src/components/transactions/Swap/details/SwapDetails.tsx b/src/components/transactions/Swap/details/SwapDetails.tsx index f5e41c6cc5..5f8db1368b 100644 --- a/src/components/transactions/Swap/details/SwapDetails.tsx +++ b/src/components/transactions/Swap/details/SwapDetails.tsx @@ -138,7 +138,7 @@ export const IntentTxDetails = ({ /> + {buyAmount} {buyToken.symbol} } @@ -148,7 +148,7 @@ export const IntentTxDetails = ({ leaveTouchDelay={500} > - + @@ -158,15 +158,15 @@ export const IntentTxDetails = ({ variant="helperText" compact symbol="USD" - symbolsColor="text.secondary" - color="text.secondary" + symbolsColor="fg-2" + color="fg-2" roundDown={true} /> {priceImpact && priceImpact > 0 && priceImpact < 100 && ( 10 ? 'error' : priceImpact > 5 ? 'warning' : 'text.secondary'} + color={priceImpact > 10 ? 'error' : priceImpact > 5 ? 'warning' : 'fg-2'} > (-{priceImpact.toFixed(priceImpact > 3 ? 0 : priceImpact > 1 ? 1 : 2)}%) @@ -215,7 +215,7 @@ const MarketOrderTxDetails = ({ /> + {buyAmount} {buyToken.symbol} } @@ -225,12 +225,7 @@ const MarketOrderTxDetails = ({ leaveTouchDelay={500} > - + @@ -239,8 +234,8 @@ const MarketOrderTxDetails = ({ variant="helperText" compact symbol="USD" - symbolsColor="text.secondary" - color="text.secondary" + symbolsColor="fg-2" + color="fg-2" roundDown={true} /> diff --git a/src/components/transactions/Swap/errors/shared/BalanceLowerThanInput.tsx b/src/components/transactions/Swap/errors/shared/BalanceLowerThanInput.tsx index 63224ece6f..e03f4fd455 100644 --- a/src/components/transactions/Swap/errors/shared/BalanceLowerThanInput.tsx +++ b/src/components/transactions/Swap/errors/shared/BalanceLowerThanInput.tsx @@ -1,18 +1,15 @@ import { Trans } from '@lingui/macro'; -import { SxProps, Typography } from '@mui/material'; -import { Warning } from 'src/components/primitives/Warning'; +import { Alert, SxProps } from '@mui/material'; import { SwapType } from '../../types/shared.types'; export const BalanceLowerThanInput = ({ sx, swapType }: { sx?: SxProps; swapType: SwapType }) => { return ( - - - - Your {swapType === SwapType.RepayWithCollateral ? 'collateral' : ''} balance is lower than - the selected amount. - - - + + + Your {swapType === SwapType.RepayWithCollateral ? 'collateral' : ''} balance is lower than + the selected amount. + + ); }; diff --git a/src/components/transactions/Swap/errors/shared/FlashLoanDisabledBlockingError.tsx b/src/components/transactions/Swap/errors/shared/FlashLoanDisabledBlockingError.tsx index 9764a06b74..9a86dd7b9a 100644 --- a/src/components/transactions/Swap/errors/shared/FlashLoanDisabledBlockingError.tsx +++ b/src/components/transactions/Swap/errors/shared/FlashLoanDisabledBlockingError.tsx @@ -1,13 +1,10 @@ import { Trans } from '@lingui/macro'; -import { SxProps, Typography } from '@mui/material'; -import { Warning } from 'src/components/primitives/Warning'; +import { Alert, SxProps } from '@mui/material'; export const FlashLoanDisabledBlockingError = ({ sx }: { sx?: SxProps }) => { return ( - - - Position swaps are disabled for this asset due to security reasons. - - + + Position swaps are disabled for this asset due to security reasons. + ); }; diff --git a/src/components/transactions/Swap/errors/shared/GasEstimationError.tsx b/src/components/transactions/Swap/errors/shared/GasEstimationError.tsx index b2c87cbc75..9822e734db 100644 --- a/src/components/transactions/Swap/errors/shared/GasEstimationError.tsx +++ b/src/components/transactions/Swap/errors/shared/GasEstimationError.tsx @@ -1,6 +1,5 @@ import { Trans } from '@lingui/macro'; -import { Box, Typography } from '@mui/material'; -import { Warning } from 'src/components/primitives/Warning'; +import { Alert, Box } from '@mui/material'; import { TxAction, TxErrorType } from 'src/ui-config/errorMapping'; import { GasEstimationError as GasEstimationErrorComponent } from '../../../FlowCommons/GasEstimationError'; @@ -27,16 +26,14 @@ export const GasEstimationError: React.FC = ({ error, isLimitOrder } - - - {' '} - {isLimitOrder ? ( - Tip: Try increasing slippage or reduce input amount - ) : ( - Tip: Try improving your order parameters - )} - - + + {' '} + {isLimitOrder ? ( + Tip: Try increasing slippage or reduce input amount + ) : ( + Tip: Try improving your order parameters + )} + ); diff --git a/src/components/transactions/Swap/errors/shared/GenericError.tsx b/src/components/transactions/Swap/errors/shared/GenericError.tsx index 89fd15b888..fcd65fef71 100644 --- a/src/components/transactions/Swap/errors/shared/GenericError.tsx +++ b/src/components/transactions/Swap/errors/shared/GenericError.tsx @@ -1,8 +1,7 @@ import { Trans } from '@lingui/macro'; -import { ContentCopy } from '@mui/icons-material'; -import { IconButton, SxProps, Tooltip, Typography } from '@mui/material'; +import ContentCopy from '@mui/icons-material/ContentCopy'; +import { Alert, IconButton, SxProps, Tooltip } from '@mui/material'; import React, { useState } from 'react'; -import { Warning } from 'src/components/primitives/Warning'; interface GenericErrorProps { sx?: SxProps; @@ -27,22 +26,15 @@ export const GenericError = ({ sx, message, copyText }: GenericErrorProps) => { }; return ( - - - {message} - {copyText ? ( - - - - - - ) : null} - - + + {message} + {copyText ? ( + + + + + + ) : null} + ); }; diff --git a/src/components/transactions/Swap/errors/shared/InsufficientBorrowPowerBlockingError.tsx b/src/components/transactions/Swap/errors/shared/InsufficientBorrowPowerBlockingError.tsx index 8ff6803d95..e915bdb7e7 100644 --- a/src/components/transactions/Swap/errors/shared/InsufficientBorrowPowerBlockingError.tsx +++ b/src/components/transactions/Swap/errors/shared/InsufficientBorrowPowerBlockingError.tsx @@ -1,16 +1,13 @@ import { Trans } from '@lingui/macro'; -import { SxProps, Typography } from '@mui/material'; -import { Warning } from 'src/components/primitives/Warning'; +import { Alert, SxProps } from '@mui/material'; export const InsufficientBorrowPowerBlockingError = ({ sx }: { sx?: SxProps }) => { return ( - - - - Insufficient collateral to cover new borrow position. Wallet must have borrowing power - remaining to perform debt switch. - - - + + + Insufficient collateral to cover new borrow position. Wallet must have borrowing power + remaining to perform debt switch. + + ); }; diff --git a/src/components/transactions/Swap/errors/shared/InsufficientLiquidityBlockingError.tsx b/src/components/transactions/Swap/errors/shared/InsufficientLiquidityBlockingError.tsx index 2569c85027..9232a57d8b 100644 --- a/src/components/transactions/Swap/errors/shared/InsufficientLiquidityBlockingError.tsx +++ b/src/components/transactions/Swap/errors/shared/InsufficientLiquidityBlockingError.tsx @@ -1,6 +1,5 @@ import { Trans } from '@lingui/macro'; -import { SxProps, Typography } from '@mui/material'; -import { Warning } from 'src/components/primitives/Warning'; +import { Alert, SxProps } from '@mui/material'; export const InsufficientLiquidityBlockingError = ({ symbol, @@ -10,12 +9,10 @@ export const InsufficientLiquidityBlockingError = ({ sx?: SxProps; }) => { return ( - - - - There is not enough liquidity in {symbol} to complete this swap. Try lowering the amount. - - - + + + There is not enough liquidity in {symbol} to complete this swap. Try lowering the amount. + + ); }; diff --git a/src/components/transactions/Swap/errors/shared/ProviderError.tsx b/src/components/transactions/Swap/errors/shared/ProviderError.tsx index 83d31fa712..0cc1cdecfc 100644 --- a/src/components/transactions/Swap/errors/shared/ProviderError.tsx +++ b/src/components/transactions/Swap/errors/shared/ProviderError.tsx @@ -1,5 +1,4 @@ -import { SxProps, Typography } from '@mui/material'; -import { Warning } from 'src/components/primitives/Warning'; +import { Alert, SxProps } from '@mui/material'; import { SwapError, SwapProvider, SwapState } from '../../types'; import { convertCowProtocolErrorMessage } from '../cow/quote.helpers'; @@ -40,8 +39,8 @@ export const ProviderError = ({ error, sx, provider, state }: QuoteErrorProps) = } return ( - - {customErrorMessage} - + + {customErrorMessage} + ); }; diff --git a/src/components/transactions/Swap/errors/shared/SupplyCapBlockingError.tsx b/src/components/transactions/Swap/errors/shared/SupplyCapBlockingError.tsx index f4b2f778d1..595316738b 100644 --- a/src/components/transactions/Swap/errors/shared/SupplyCapBlockingError.tsx +++ b/src/components/transactions/Swap/errors/shared/SupplyCapBlockingError.tsx @@ -1,15 +1,10 @@ import { Trans } from '@lingui/macro'; -import { SxProps, Typography } from '@mui/material'; -import { Warning } from 'src/components/primitives/Warning'; +import { Alert, SxProps } from '@mui/material'; export const SupplyCapBlockingError = ({ symbol, sx }: { symbol: string; sx?: SxProps }) => { return ( - - - - Supply cap reached for {symbol}. Reduce the amount or choose a different asset. - - - + + Supply cap reached for {symbol}. Reduce the amount or choose a different asset. + ); }; diff --git a/src/components/transactions/Swap/errors/shared/UserDenied.tsx b/src/components/transactions/Swap/errors/shared/UserDenied.tsx index e5b362c943..74a072216c 100644 --- a/src/components/transactions/Swap/errors/shared/UserDenied.tsx +++ b/src/components/transactions/Swap/errors/shared/UserDenied.tsx @@ -1,7 +1,6 @@ import { Trans } from '@lingui/macro'; -import { Box, CircularProgress, Typography } from '@mui/material'; +import { Alert, Box, CircularProgress } from '@mui/material'; import React, { Dispatch, useEffect, useState } from 'react'; -import { Warning } from 'src/components/primitives/Warning'; import { SwapError, SwapState } from '../../types'; @@ -71,9 +70,10 @@ export const UserDenied = ({ return ( - } > - - User denied the operation. - - + User denied the operation. + ); }; diff --git a/src/components/transactions/Swap/errors/shared/ZeroLTVBlockingError.tsx b/src/components/transactions/Swap/errors/shared/ZeroLTVBlockingError.tsx index ef474cb75a..738c6ae655 100644 --- a/src/components/transactions/Swap/errors/shared/ZeroLTVBlockingError.tsx +++ b/src/components/transactions/Swap/errors/shared/ZeroLTVBlockingError.tsx @@ -1,16 +1,13 @@ import { Trans } from '@lingui/macro'; -import { SxProps, Typography } from '@mui/material'; -import { Warning } from 'src/components/primitives/Warning'; +import { Alert, SxProps } from '@mui/material'; export const ZeroLTVBlockingError = ({ sx }: { sx?: SxProps }) => { return ( - - - - You have assets with zero LTV that are blocking this operation. Please withdraw them or - disable them as collateral first. - - - + + + You have assets with zero LTV that are blocking this operation. Please withdraw them or + disable them as collateral first. + + ); }; diff --git a/src/components/transactions/Swap/inputs/LimitOrderInputs.tsx b/src/components/transactions/Swap/inputs/LimitOrderInputs.tsx index dc5ddf9beb..d4175092fc 100644 --- a/src/components/transactions/Swap/inputs/LimitOrderInputs.tsx +++ b/src/components/transactions/Swap/inputs/LimitOrderInputs.tsx @@ -67,7 +67,7 @@ export const LimitOrderInputs = ({ {(inputInputTitle || swapState.showNetworkSelector) && ( {inputInputTitle && ( - + {inputInputTitle} )} @@ -146,14 +146,14 @@ export const LimitOrderInputs = ({ disabled={!(customProps?.canSwitchTokens ?? false)} sx={{ border: '1px solid', - borderColor: 'divider', + borderColor: 'border-2', transform: 'translateY(-130%)', - backgroundColor: 'background.paper', - '&:hover': { backgroundColor: 'background.surface' }, + backgroundColor: 'surface-elevated', + '&:hover': { backgroundColor: 'bg-2' }, '&:disabled': { - backgroundColor: 'background.surface', + backgroundColor: 'bg-2', opacity: '0.7', - color: 'text.secondary', + color: 'fg-2', }, }} > @@ -187,13 +187,13 @@ export const LimitOrderInputs = ({ disableFocusRipple sx={{ border: '1px solid', - borderColor: 'divider', + borderColor: 'border-2', transform: 'translateY(-130%)', - backgroundColor: 'background.paper', + backgroundColor: 'surface-elevated', '&:disabled': { - backgroundColor: 'background.paper', + backgroundColor: 'surface-elevated', }, - '&:hover': { backgroundColor: 'background.paper' }, + '&:hover': { backgroundColor: 'surface-elevated' }, }} > {params.inputInputTitle && ( - + {params.inputInputTitle} )} @@ -114,13 +114,13 @@ export const MarketOrderInputs = ({ disabled={!(customProps?.canSwitchTokens ?? false)} sx={{ border: '1px solid', - borderColor: 'divider', - backgroundColor: 'background.paper', - '&:hover': { backgroundColor: 'background.surface' }, + borderColor: 'border-2', + backgroundColor: 'surface-elevated', + '&:hover': { backgroundColor: 'bg-2' }, '&:disabled': { - backgroundColor: 'background.surface', + backgroundColor: 'bg-2', opacity: '0.7', - color: 'text.secondary', + color: 'fg-2', }, }} > @@ -151,12 +151,12 @@ export const MarketOrderInputs = ({ disableFocusRipple sx={{ border: '1px solid', - borderColor: 'divider', - backgroundColor: 'background.paper', + borderColor: 'border-2', + backgroundColor: 'surface-elevated', '&:disabled': { - backgroundColor: 'background.paper', + backgroundColor: 'surface-elevated', }, - '&:hover': { backgroundColor: 'background.paper' }, + '&:hover': { backgroundColor: 'surface-elevated' }, }} > {title && ( - + {title} )} ({ - border: `1px solid ${theme.palette.divider}`, - borderRadius: '6px', + sx={{ + borderRadius: '0.75rem', + boxShadow: figSurfaceShadow('shadow-stroke-1'), overflow: 'hidden', + backgroundColor: 'bg-2', px: 3, py: 2, width: '100%', @@ -284,11 +286,11 @@ export const SwitchAssetInput = ({ ? { transition: 'background-color 0.15s ease', '&:hover': { - backgroundColor: 'background.surface', + backgroundColor: 'bg-2', }, } : {}), - })} + }} > {loading ? ( @@ -334,9 +336,9 @@ export const SwitchAssetInput = ({ p: 0, left: 8, zIndex: 1, - color: 'text.muted', + color: 'fg-3', '&:hover': { - color: 'text.secondary', + color: 'fg-2', }, }} onClick={() => { @@ -372,8 +374,8 @@ export const SwitchAssetInput = ({ /> {selectedAsset.symbol} @@ -399,7 +401,7 @@ export const SwitchAssetInput = ({ )} > - + 3 && mergedPopular.length > 0 - ? `1px solid ${theme.palette.divider}` + ? `1px solid ${figVars['border-2']}` : 'none', position: 'sticky', top: 0, zIndex: 2, mb: 3, pb: 3, - backgroundColor: theme.palette.background.paper, boxShadow: '0px 4px 6px -6px rgba(0, 0, 0, 0.1)', marginTop: -3, paddingTop: 3, @@ -494,7 +495,7 @@ export const SwitchAssetInput = ({ > {popularSectionTitle} @@ -509,11 +510,11 @@ export const SwitchAssetInput = ({ p: 1, borderRadius: '16px', border: '1px solid', - borderColor: theme.palette.divider, + borderColor: 'border-2', cursor: 'pointer', transition: 'all 0.2s ease', '&:hover': { - backgroundColor: theme.palette.divider, + backgroundColor: 'border-2', }, }} onClick={() => handleSelect(asset)} @@ -523,7 +524,7 @@ export const SwitchAssetInput = ({ symbol={asset.symbol} sx={{ fontSize: '24px', mr: 1 }} /> - + {asset.symbol} @@ -543,11 +544,11 @@ export const SwitchAssetInput = ({ background: 'transparent', }, '&::-webkit-scrollbar-thumb': { - background: theme.palette.divider, + background: figVars['border-2'], borderRadius: '4px', }, '&::-webkit-scrollbar-thumb:hover': { - background: theme.palette.action.hover, + background: figVars['button-hover'], }, }} > @@ -590,7 +591,7 @@ export const SwitchAssetInput = ({ sx={{ mr: 2 }} /> - + {asset.name || asset.symbol} @@ -610,21 +611,21 @@ export const SwitchAssetInput = ({ '&:hover .launch-icon-text': { color: theme.palette.mode === 'dark' - ? theme.palette.primary.light - : theme.palette.primary.main, + ? theme.vars.palette.primary.light + : theme.vars.palette.primary.main, }, '&:hover .launch-icon-svg': { color: theme.palette.mode === 'dark' - ? theme.palette.primary.light - : theme.palette.primary.main, + ? theme.vars.palette.primary.light + : theme.vars.palette.primary.main, }, }} > {textCenterEllipsis( @@ -635,7 +636,7 @@ export const SwitchAssetInput = ({ @@ -645,7 +646,7 @@ export const SwitchAssetInput = ({ if (!apy) return null; return ( <> - + {' • '} @@ -654,7 +655,7 @@ export const SwitchAssetInput = ({ value={apy.value} percent variant="caption" - color="text.secondary" + color="fg-2" /> @@ -679,8 +680,8 @@ export const SwitchAssetInput = ({ )} @@ -701,8 +702,8 @@ export const SwitchAssetInput = ({ compact symbol="USD" variant="helperText" - color="text.secondary" - symbolsColor="text.secondary" + color="fg-2" + symbolsColor="fg-2" sx={{ textAlign: 'right' }} /> @@ -712,8 +713,8 @@ export const SwitchAssetInput = ({ )) ) : ( {allowCustomTokens ? ( @@ -738,23 +739,23 @@ export const SwitchAssetInput = ({ value={isNaN(Number(usdValue)) ? 0 : Number(usdValue)} compact symbol="USD" - variant="secondary12" - color="text.muted" - symbolsColor="text.muted" + variant="subheader2" + color="fg-3" + symbolsColor="fg-3" flexGrow={1} /> )} {showBalance && selectedAsset.balance && ( <> - + {balanceTitle || 'Balance'} @@ -834,9 +835,9 @@ const PercentSelector = ({ PaperProps={{ sx: { p: 1, - backgroundColor: 'background.surface', + backgroundColor: 'bg-2', border: '1px solid', - borderColor: 'divider', + borderColor: 'border-2', }, }} > @@ -844,9 +845,9 @@ const PercentSelector = ({ v && handlePick(v)} > @@ -858,9 +859,9 @@ const PercentSelector = ({ borderRadius: 1, py: 0.5, px: 1, - borderWidth: 2, + border: 0, '&.Mui-selected': { - backgroundColor: 'background.paper', + backgroundColor: 'surface-elevated', }, }} > diff --git a/src/components/transactions/Swap/inputs/shared/ExpirySelector.tsx b/src/components/transactions/Swap/inputs/shared/ExpirySelector.tsx index feaef1dedc..07d0a7a5c8 100644 --- a/src/components/transactions/Swap/inputs/shared/ExpirySelector.tsx +++ b/src/components/transactions/Swap/inputs/shared/ExpirySelector.tsx @@ -1,14 +1,7 @@ -import { ChevronDownIcon } from '@heroicons/react/outline'; import { Trans } from '@lingui/macro'; -import { - Box, - FormControl, - MenuItem, - Select, - SelectChangeEvent, - SvgIcon, - Typography, -} from '@mui/material'; +import { Box, Button, Menu, MenuItem, Typography } from '@mui/material'; +import { useState } from 'react'; +import { ChevronDownIcon } from 'src/components/icons/ChevronDownIcon'; import { Expiry } from '../../types'; @@ -18,62 +11,54 @@ interface ExpirySelectorProps { } export const ExpirySelector = ({ selectedExpiry, setSelectedExpiry }: ExpirySelectorProps) => { - const handleChange = (event: SelectChangeEvent) => { - setSelectedExpiry(event.target.value as unknown as Expiry); - }; + const [anchorEl, setAnchorEl] = useState(null); + const open = Boolean(anchorEl); + return ( - - + + + Expires in + + + + + setAnchorEl(null)}> + {Object.values(Expiry).map((value) => ( + { + setSelectedExpiry(value); + setAnchorEl(null); + }} + > + + {value} + + + ))} + ); }; diff --git a/src/components/transactions/Swap/inputs/shared/NetworkSelector.tsx b/src/components/transactions/Swap/inputs/shared/NetworkSelector.tsx index 5ce1bb177e..968318f191 100644 --- a/src/components/transactions/Swap/inputs/shared/NetworkSelector.tsx +++ b/src/components/transactions/Swap/inputs/shared/NetworkSelector.tsx @@ -1,13 +1,6 @@ -import { ChevronDownIcon } from '@heroicons/react/outline'; -import { - Box, - FormControl, - MenuItem, - Select, - SelectChangeEvent, - SvgIcon, - Typography, -} from '@mui/material'; +import { Box, Button, Menu, MenuItem, Typography } from '@mui/material'; +import { useState } from 'react'; +import { ChevronDownIcon } from 'src/components/icons/ChevronDownIcon'; import { MarketLogo } from 'src/components/MarketSwitcher'; import { SupportedNetworkWithChainId } from '../../helpers/shared/misc.helpers'; @@ -23,51 +16,57 @@ export const NetworkSelector = ({ selectedNetwork, setSelectedNetwork, }: NetworkSelectorProps) => { - const handleChange = (event: SelectChangeEvent) => { - setSelectedNetwork(Number(event.target.value)); - }; + const [anchorEl, setAnchorEl] = useState(null); + const open = Boolean(anchorEl); + const selected = networks.find((network) => network.chainId === selectedNetwork); + return ( - - - + + ); }; diff --git a/src/components/transactions/Swap/inputs/shared/PriceInput.tsx b/src/components/transactions/Swap/inputs/shared/PriceInput.tsx index 2548279bcd..71c0eddfb5 100644 --- a/src/components/transactions/Swap/inputs/shared/PriceInput.tsx +++ b/src/components/transactions/Swap/inputs/shared/PriceInput.tsx @@ -5,6 +5,7 @@ import React, { useEffect, useRef, useState } from 'react'; import NumberFormat, { NumberFormatProps } from 'react-number-format'; import { FormattedNumber } from 'src/components/primitives/FormattedNumber'; import { ExternalTokenIcon } from 'src/components/primitives/TokenIcon'; +import { figSurfaceShadow } from 'src/utils/figmaColors'; import { SwappableToken, TokenType } from '../../types'; @@ -258,20 +259,21 @@ export const PriceInput = ({ return ( ({ - border: `1px solid ${theme.palette.divider}`, - borderRadius: '6px', + sx={{ + borderRadius: '0.75rem', + boxShadow: figSurfaceShadow('shadow-stroke-1'), overflow: 'hidden', + backgroundColor: 'bg-2', px: 3, py: 2, width: '100%', transition: 'background-color 0.15s ease', '&:hover': { - backgroundColor: 'background.surface', + backgroundColor: 'bg-2', }, - })} + }} > - + When 1 {fromAsset.symbol} is worth: @@ -330,8 +332,8 @@ export const PriceInput = ({ /> {toAsset.symbol} @@ -350,11 +352,11 @@ export const PriceInput = ({ width: 22, height: 22, borderRadius: '50%', - backgroundColor: 'background.paper', + backgroundColor: 'surface-elevated', ml: 1, transition: 'background-color 0.2s ease', '&:hover': { - backgroundColor: 'background.surface', + backgroundColor: 'bg-2', }, '&:hover .refresh-spin': { transform: 'rotate(360deg)', @@ -382,20 +384,20 @@ export const PriceInput = ({ value={rate.usd ? rate.usd.toString() : 0} compact symbol="USD" - variant="secondary12" - color="text.muted" - symbolsColor="text.muted" + variant="subheader2" + color="fg-3" + symbolsColor="fg-3" flexGrow={1} /> )} - + diff --git a/src/components/transactions/Swap/inputs/shared/QuoteProgressRing.tsx b/src/components/transactions/Swap/inputs/shared/QuoteProgressRing.tsx index cda959fde6..e9975ac497 100644 --- a/src/components/transactions/Swap/inputs/shared/QuoteProgressRing.tsx +++ b/src/components/transactions/Swap/inputs/shared/QuoteProgressRing.tsx @@ -1,5 +1,4 @@ import { Box, CircularProgress, SxProps } from '@mui/material'; -import { alpha, useTheme } from '@mui/material/styles'; import { useEffect, useMemo, useState } from 'react'; type QuoteProgressRingProps = { @@ -21,7 +20,6 @@ export const QuoteProgressRing = ({ paused = false, sx, }: QuoteProgressRingProps) => { - const theme = useTheme(); const [now, setNow] = useState(Date.now()); useEffect(() => { @@ -41,8 +39,8 @@ export const QuoteProgressRing = ({ // Opacity from 0.25 to 1.0 based on progress const ratio = Math.max(0, Math.min(1, progress / 100)); const opacity = 0.25 + 0.75 * ratio; - return alpha(theme.palette.primary.main, opacity); - }, [progress, theme]); + return `rgba(var(--mui-palette-primary-mainChannel) / ${opacity})`; + }, [progress]); if (!active || !lastUpdatedAt || intervalMs <= 0) return null; diff --git a/src/components/transactions/Swap/inputs/shared/SwitchRates.tsx b/src/components/transactions/Swap/inputs/shared/SwitchRates.tsx index 9de8c9fe20..bc6e0698a2 100644 --- a/src/components/transactions/Swap/inputs/shared/SwitchRates.tsx +++ b/src/components/transactions/Swap/inputs/shared/SwitchRates.tsx @@ -52,8 +52,8 @@ export const SwitchRates = ({ visibleDecimals={0} variant="main12" symbol={isSwitched ? destSymbol : srcSymbol} - symbolsVariant="secondary12" - symbolsColor="text.secondary" + symbolsVariant="subheader2" + symbolsColor="fg-2" value={'1'} /> diff --git a/src/components/transactions/Swap/inputs/shared/SwitchSlippageSelector.tsx b/src/components/transactions/Swap/inputs/shared/SwitchSlippageSelector.tsx index 30799d5610..2a6b472004 100644 --- a/src/components/transactions/Swap/inputs/shared/SwitchSlippageSelector.tsx +++ b/src/components/transactions/Swap/inputs/shared/SwitchSlippageSelector.tsx @@ -1,19 +1,19 @@ import { CogIcon } from '@heroicons/react/solid'; import { Trans } from '@lingui/macro'; import { + Alert, Box, Button, InputAdornment, InputBase, Menu, SvgIcon, - ToggleButton, - ToggleButtonGroup, Typography, } from '@mui/material'; import { MouseEvent, useEffect, useState } from 'react'; import { FormattedNumber } from 'src/components/primitives/FormattedNumber'; -import { Warning } from 'src/components/primitives/Warning'; +import { StyledTxModalToggleButton } from 'src/components/StyledToggleButton'; +import { StyledTxModalToggleGroup } from 'src/components/StyledToggleButtonGroup'; import { ValidationData } from '../../helpers/shared/slippage.helpers'; @@ -123,7 +123,7 @@ export const SwitchSlippageSelector = ({ return ( - + {isCustomSlippage ? ( Custom slippage ) : provider === 'paraswap' ? ( @@ -157,32 +157,18 @@ export const SwitchSlippageSelector = ({ Max slippage - handlePresetSlippageChange(value)} + onChange={(_, value) => value && handlePresetSlippageChange(value)} + // Compact menu footprint, sized to the custom-slippage input beside it; the + // shell/pill treatment comes from the shared control. + sx={{ width: 'auto', height: '28px' }} > {slippageOptions.map((option) => ( - + {isNaN(Number(option)) ? ( - + {provider === 'paraswap' ? Default : Auto} ) : ( @@ -191,13 +177,11 @@ export const SwitchSlippageSelector = ({ visibleDecimals={2} symbol="%" variant="subheader2" - color="primary.main" - symbolsColor="primary.main" /> )} - + ))} - + - + % @@ -216,18 +200,16 @@ export const SwitchSlippageSelector = ({ width: '120px', border: 1, borderWidth: '1px', - backgroundColor: 'background.surface', - borderColor: slippageValidation - ? `${slippageValidation.severity}.main` - : 'background.surface', + backgroundColor: 'bg-2', + borderColor: slippageValidation ? `${slippageValidation.severity}.main` : 'bg-2', borderRadius: '4px', }} /> {slippageValidation && ( - + {slippageValidation.message} - + )} @@ -252,7 +234,7 @@ export const SwitchSlippageSelector = ({ > { ) : ( - + Please connect your wallet to swap collateral. close()} /> diff --git a/src/components/transactions/Swap/modals/DebtSwapModal.tsx b/src/components/transactions/Swap/modals/DebtSwapModal.tsx index c684129b4d..d0ce49785c 100644 --- a/src/components/transactions/Swap/modals/DebtSwapModal.tsx +++ b/src/components/transactions/Swap/modals/DebtSwapModal.tsx @@ -25,7 +25,7 @@ export const DebtSwapModal = () => { ) : ( - + Please connect your wallet to swap debt. close()} /> diff --git a/src/components/transactions/Swap/modals/SwapModal.tsx b/src/components/transactions/Swap/modals/SwapModal.tsx index b17fe507f2..e51c353a72 100644 --- a/src/components/transactions/Swap/modals/SwapModal.tsx +++ b/src/components/transactions/Swap/modals/SwapModal.tsx @@ -23,7 +23,7 @@ export const SwapModal = () => { ) : ( - + Please connect your wallet to swap tokens. close()} /> diff --git a/src/components/transactions/Swap/modals/request/NoEligibleAssetsToSwap.tsx b/src/components/transactions/Swap/modals/request/NoEligibleAssetsToSwap.tsx index aac778659d..3584cb99d1 100644 --- a/src/components/transactions/Swap/modals/request/NoEligibleAssetsToSwap.tsx +++ b/src/components/transactions/Swap/modals/request/NoEligibleAssetsToSwap.tsx @@ -3,7 +3,7 @@ import { Typography } from '@mui/material'; export const NoEligibleAssetsToSwap = () => { return ( - + No eligible assets to swap. ); diff --git a/src/components/transactions/Swap/modals/result/CowOrderToast.tsx b/src/components/transactions/Swap/modals/result/CowOrderToast.tsx index 930f25f093..a3360bc757 100644 --- a/src/components/transactions/Swap/modals/result/CowOrderToast.tsx +++ b/src/components/transactions/Swap/modals/result/CowOrderToast.tsx @@ -1,18 +1,16 @@ -import { useTheme } from '@mui/material'; import { Toaster } from 'sonner'; +import { figVars } from 'src/utils/figmaColors'; export const CowOrderToast = () => { - const theme = useTheme(); - return ( diff --git a/src/components/transactions/Swap/modals/result/SwapResultView.tsx b/src/components/transactions/Swap/modals/result/SwapResultView.tsx index 83d7a734ad..f82b3665f3 100644 --- a/src/components/transactions/Swap/modals/result/SwapResultView.tsx +++ b/src/components/transactions/Swap/modals/result/SwapResultView.tsx @@ -59,17 +59,17 @@ export const SwapWithSurplusTooltip = ({ <> - Base: + Base: - Surplus: {' '} - ( + Surplus:{' '} + ( ) @@ -260,7 +260,7 @@ export const SwapTxSuccessView = ({ size={20} sx={{ mr: 1, - color: (theme) => theme.palette.grey[400], + color: (theme) => theme.vars.palette.grey[400], }} /> Details will be available soon @@ -276,7 +276,7 @@ export const SwapTxSuccessView = ({ customExplorerLinkText={customExplorerLinkText} > - + {provider === 'cowprotocol' ? ( <> {orderStatus === 'open' ? ( @@ -301,17 +301,17 @@ export const SwapTxSuccessView = ({ - + {provider == 'cowprotocol' && ((orderStatus == 'open' && !isNativeToken(symbol)) || orderStatus == 'failed') ? `${resultScreenTokensFromTitle ?? 'Send'}` @@ -327,7 +327,7 @@ export const SwapTxSuccessView = ({ /> + {inAmount} {symbol} } @@ -345,14 +345,14 @@ export const SwapTxSuccessView = ({ - + {symbol} - + {provider == 'cowprotocol' && (orderStatus == 'open' || orderStatus == 'failed') ? `${resultScreenTokensToTitle ?? 'Receive'}` : `${resultScreenTokensToTitle ?? 'Received'}`} @@ -367,7 +367,7 @@ export const SwapTxSuccessView = ({ /> + {outFinalAmount} {outSymbol} } @@ -385,7 +385,7 @@ export const SwapTxSuccessView = ({ - + {outSymbol} @@ -394,7 +394,7 @@ export const SwapTxSuccessView = ({ {surplusDisplay} @@ -403,15 +403,15 @@ export const SwapTxSuccessView = ({ - + Swap saved in your{' '} - + Market @@ -35,7 +35,7 @@ export function OrderTypeSelector({ value={OrderType.LIMIT} disabled={switchType === OrderType.LIMIT || limitsOrderButtonBlocked} > - + Limit diff --git a/src/components/transactions/Swap/warnings/postInputs/CowAdapterApprovalInfo.tsx b/src/components/transactions/Swap/warnings/postInputs/CowAdapterApprovalInfo.tsx index c86701fc11..606fb950b1 100644 --- a/src/components/transactions/Swap/warnings/postInputs/CowAdapterApprovalInfo.tsx +++ b/src/components/transactions/Swap/warnings/postInputs/CowAdapterApprovalInfo.tsx @@ -1,6 +1,5 @@ import { Trans } from '@lingui/macro'; -import { Typography } from '@mui/material'; -import { Warning } from 'src/components/primitives/Warning'; +import { Alert } from '@mui/material'; import { useModalContext } from 'src/hooks/useModal'; import { SwapState } from '../../types'; @@ -19,13 +18,11 @@ export function CowAdapterApprovalInfo({ state }: { state: SwapState }) { if (!isCow || !isAdapterFlow || approvalTxState?.success || !isFlashloan) return null; return ( - - - - A temporary contract will be used to execute the trade. Your wallet may show a warning for - approving a new or empty address. - - - + + + A temporary contract will be used to execute the trade. Your wallet may show a warning for + approving a new or empty address. + + ); } diff --git a/src/components/transactions/Swap/warnings/postInputs/CustomTokenWarning.tsx b/src/components/transactions/Swap/warnings/postInputs/CustomTokenWarning.tsx index 65e83056f4..cfee99c692 100644 --- a/src/components/transactions/Swap/warnings/postInputs/CustomTokenWarning.tsx +++ b/src/components/transactions/Swap/warnings/postInputs/CustomTokenWarning.tsx @@ -1,5 +1,4 @@ -import { Typography } from '@mui/material'; -import { Warning } from 'src/components/primitives/Warning'; +import { Alert } from '@mui/material'; import { SwapState, TokenType } from '../../types'; @@ -14,10 +13,8 @@ export function CustomTokenWarning({ state }: { state: SwapState }) { } return ( - - - You selected a custom imported token. Make sure it's the right token. - - + + You selected a custom imported token. Make sure it's the right token. + ); } diff --git a/src/components/transactions/Swap/warnings/postInputs/GasEstimationWarning.tsx b/src/components/transactions/Swap/warnings/postInputs/GasEstimationWarning.tsx index 285d993a39..efe2bfed86 100644 --- a/src/components/transactions/Swap/warnings/postInputs/GasEstimationWarning.tsx +++ b/src/components/transactions/Swap/warnings/postInputs/GasEstimationWarning.tsx @@ -1,6 +1,5 @@ import { Trans } from '@lingui/macro'; -import { Typography } from '@mui/material'; -import { Warning } from 'src/components/primitives/Warning'; +import { Alert } from '@mui/material'; import { SwapState } from '../../types'; @@ -14,12 +13,10 @@ export function GasEstimationWarning({ state }: { state: SwapState }) { if (!hasGasEstimationWarning) return null; return ( - - - - The swap could not be completed. Try increasing slippage or changing the amount. - - - + + + The swap could not be completed. Try increasing slippage or changing the amount. + + ); } diff --git a/src/components/transactions/Swap/warnings/postInputs/HighCostsLimitOrderWarning.tsx b/src/components/transactions/Swap/warnings/postInputs/HighCostsLimitOrderWarning.tsx index 91a86d91ae..b00083336e 100644 --- a/src/components/transactions/Swap/warnings/postInputs/HighCostsLimitOrderWarning.tsx +++ b/src/components/transactions/Swap/warnings/postInputs/HighCostsLimitOrderWarning.tsx @@ -1,8 +1,7 @@ import { valueToBigNumber } from '@aave/math-utils'; import { Trans } from '@lingui/macro'; -import { Typography } from '@mui/material'; +import { Alert } from '@mui/material'; import { useEffect, useMemo } from 'react'; -import { Warning } from 'src/components/primitives/Warning'; import { ActionsBlockedReason, OrderType, SwapState } from '../../types'; @@ -92,13 +91,11 @@ export function HighCostsLimitOrderWarning({ return null; return ( - - - - Estimated costs are {costsPercentOfSell.toFixed(2)}% of the sell amount. This order is - unlikely to be filled. - - - + + + Estimated costs are {costsPercentOfSell.toFixed(2)}% of the sell amount. This order is + unlikely to be filled. + + ); } diff --git a/src/components/transactions/Swap/warnings/postInputs/HighPriceImpactWarning.tsx b/src/components/transactions/Swap/warnings/postInputs/HighPriceImpactWarning.tsx index 29a282c8a6..471c1c3b3e 100644 --- a/src/components/transactions/Swap/warnings/postInputs/HighPriceImpactWarning.tsx +++ b/src/components/transactions/Swap/warnings/postInputs/HighPriceImpactWarning.tsx @@ -1,7 +1,6 @@ import { Trans } from '@lingui/macro'; -import { Box, Checkbox, Typography } from '@mui/material'; +import { Alert, Box, Checkbox } from '@mui/material'; import { Dispatch, useEffect, useMemo, useState } from 'react'; -import { Warning } from 'src/components/primitives/Warning'; import { SwapInputChanges } from '../../analytics/constants'; import { useHandleAnalytics } from '../../analytics/useTrackAnalytics'; @@ -54,43 +53,32 @@ export function HighPriceImpactWarning({ if (actionsBlockedReasonsAmount(state) > 1) return null; return ( - 0.3 ? 'error' : 'warning'} - icon={false} + data-size="small" sx={{ + width: '100%', mt: 2, mb: 2, - display: 'flex', - flexDirection: 'column', - alignItems: 'center', }} > - - - High price impact ({(lostValue * 100).toFixed(1)}%)! This route will - return {state.isInvertedSwap ? 'more' : 'less'} due to low liquidity or small order size. - - - - - Please review the swap values before confirming. - - + + High price impact ({(lostValue * 100).toFixed(1)}%)! This route will return{' '} + {state.isInvertedSwap ? 'more' : 'less'} due to low liquidity or small order size. + {' '} + Please review the swap values before confirming. {requireConfirmation && ( - - - I confirm the swap knowing that I could lose up to{' '} - {(lostValue * 100).toFixed(0)}% on this swap. - - + + I confirm the swap knowing that I could lose up to{' '} + {(lostValue * 100).toFixed(0)}% on this swap. + { @@ -102,10 +90,11 @@ export function HighPriceImpactWarning({ ); }} size="small" + sx={{ p: 0, ml: 2 }} data-cy={'high-price-impact-checkbox'} /> )} - + ); } diff --git a/src/components/transactions/Swap/warnings/postInputs/LimitOrderAmountWarning.tsx b/src/components/transactions/Swap/warnings/postInputs/LimitOrderAmountWarning.tsx index ebd524c6f1..9878dedcda 100644 --- a/src/components/transactions/Swap/warnings/postInputs/LimitOrderAmountWarning.tsx +++ b/src/components/transactions/Swap/warnings/postInputs/LimitOrderAmountWarning.tsx @@ -1,8 +1,7 @@ import { valueToBigNumber } from '@aave/math-utils'; import { Trans } from '@lingui/macro'; -import { Typography } from '@mui/material'; +import { Alert } from '@mui/material'; import { useMemo } from 'react'; -import { Warning } from 'src/components/primitives/Warning'; import { SwapState } from '../../types'; import { OrderType } from '../../types/shared.types'; @@ -66,24 +65,20 @@ export function LimitOrderAmountWarning({ state }: { state: SwapState }) { if (!shouldShowWarning) return null; return ( - - - - Your order amounts are {isHigherDifference ? 'significantly ' : ''} less favorable by{' '} - {differencePercentage?.abs()?.toFixed(1) ?? '0'}% to the liquidity provider than - recommended. This order may not be executed. - - - + + Your order amounts are {isHigherDifference ? 'significantly ' : ''} less favorable by{' '} + {differencePercentage?.abs()?.toFixed(1) ?? '0'}% to the liquidity provider than + recommended. This order may not be executed. + + ); } diff --git a/src/components/transactions/Swap/warnings/postInputs/LiquidationCriticalWarning.tsx b/src/components/transactions/Swap/warnings/postInputs/LiquidationCriticalWarning.tsx index b4ea0ff153..ad02155f4e 100644 --- a/src/components/transactions/Swap/warnings/postInputs/LiquidationCriticalWarning.tsx +++ b/src/components/transactions/Swap/warnings/postInputs/LiquidationCriticalWarning.tsx @@ -1,7 +1,6 @@ import { Trans } from '@lingui/macro'; -import { Typography } from '@mui/material'; +import { Alert } from '@mui/material'; import { Dispatch } from 'react'; -import { Warning } from 'src/components/primitives/Warning'; import { SwapParams, SwapState } from '../../types'; @@ -14,23 +13,20 @@ export function LiquidationCriticalWarning({ }) { // TODO: move to be an error not a warning and remove isLiquidatable from state. return ( - - - - Your health factor after this swap will be critically low and may result in liquidation. - Please choose a different asset or reduce the swap amount to stay safe. - - - + + Your health factor after this swap will be critically low and may result in liquidation. + Please choose a different asset or reduce the swap amount to stay safe. + + ); } diff --git a/src/components/transactions/Swap/warnings/postInputs/LowHealthFactorWarning.tsx b/src/components/transactions/Swap/warnings/postInputs/LowHealthFactorWarning.tsx index 9e3d3f0044..962ff81835 100644 --- a/src/components/transactions/Swap/warnings/postInputs/LowHealthFactorWarning.tsx +++ b/src/components/transactions/Swap/warnings/postInputs/LowHealthFactorWarning.tsx @@ -1,7 +1,6 @@ import { Trans } from '@lingui/macro'; -import { Box, Checkbox, Typography } from '@mui/material'; +import { Alert, Box, Checkbox } from '@mui/material'; import { Dispatch, useEffect, useState } from 'react'; -import { Warning } from 'src/components/primitives/Warning'; import { ActionsBlockedReason, SwapParams, SwapState } from '../../types'; import { shouldRequireConfirmationHFlow } from '../helpers'; @@ -40,44 +39,30 @@ export function LowHealthFactorWarning({ } return ( - - - - Low health factor after swap. Your position will carry a higher risk of liquidation. - - + + + Low health factor after swap. Your position will carry a higher risk of liquidation. + {!state.actionsBlocked[ActionsBlockedReason.IS_LIQUIDATABLE] && ( - - I understand the liquidation risk and want to proceed - + I understand the liquidation risk and want to proceed { setLowHFConfirmed(!lowHFConfirmed); }} size="small" + sx={{ p: 0, ml: 2 }} data-cy={'low-hf-checkbox'} /> )} - + ); } diff --git a/src/components/transactions/Swap/warnings/postInputs/SafetyModuleSwapWarning.tsx b/src/components/transactions/Swap/warnings/postInputs/SafetyModuleSwapWarning.tsx index c2f655ca4c..8e83d73dc7 100644 --- a/src/components/transactions/Swap/warnings/postInputs/SafetyModuleSwapWarning.tsx +++ b/src/components/transactions/Swap/warnings/postInputs/SafetyModuleSwapWarning.tsx @@ -1,7 +1,6 @@ import { Trans } from '@lingui/macro'; -import { Typography } from '@mui/material'; +import { Alert } from '@mui/material'; import { Link } from 'src/components/primitives/Link'; -import { Warning } from 'src/components/primitives/Warning'; import { SwapState } from '../../types'; import { SAFETY_MODULE_TOKENS } from '../constants'; @@ -13,16 +12,14 @@ export function SafetyModuleSwapWarning({ state }: { state: SwapState }) { if (!isSwappingSafetyModuleToken) return null; return ( - - - - For swapping safety module assets please unstake your position{' '} - close()}> - here - - . - - - + + + For swapping safety module assets please unstake your position{' '} + close()}> + here + + . + + ); } diff --git a/src/components/transactions/Swap/warnings/postInputs/ShieldSwapWarning.tsx b/src/components/transactions/Swap/warnings/postInputs/ShieldSwapWarning.tsx index 92c6d6f409..ef875b1969 100644 --- a/src/components/transactions/Swap/warnings/postInputs/ShieldSwapWarning.tsx +++ b/src/components/transactions/Swap/warnings/postInputs/ShieldSwapWarning.tsx @@ -1,8 +1,6 @@ -import { ShieldExclamationIcon } from '@heroicons/react/outline'; import { Trans } from '@lingui/macro'; -import { Box, SvgIcon, Typography } from '@mui/material'; +import { Alert, AlertTitle } from '@mui/material'; import { Dispatch, useEffect, useMemo } from 'react'; -import { Warning } from 'src/components/primitives/Warning'; import { useRootStore } from 'src/store/root'; import { ActionsBlockedReason, SwapState } from '../../types'; @@ -42,31 +40,14 @@ export function ShieldSwapWarning({ if (!shouldBlock) return null; return ( - - - - - - - Aave Shield: Transaction blocked - - - - - This swap has a price impact of {(lostValue * 100).toFixed(1)}%, which exceeds the 25% - safety threshold. To proceed, disable Aave Shield in the settings menu. - - - + + + Aave Shield: Transaction blocked + + + This swap has a price impact of {(lostValue * 100).toFixed(1)}%, which exceeds the 25% + safety threshold. To proceed, disable Aave Shield in the settings menu. + + ); } diff --git a/src/components/transactions/Swap/warnings/postInputs/SlippageWarning.tsx b/src/components/transactions/Swap/warnings/postInputs/SlippageWarning.tsx index 7131b65fc3..1e4fd33a92 100644 --- a/src/components/transactions/Swap/warnings/postInputs/SlippageWarning.tsx +++ b/src/components/transactions/Swap/warnings/postInputs/SlippageWarning.tsx @@ -1,5 +1,4 @@ -import { Typography } from '@mui/material'; -import { Warning } from 'src/components/primitives/Warning'; +import { Alert } from '@mui/material'; import { OrderType, SwapState } from '../../types'; @@ -8,10 +7,8 @@ export function SlippageWarning({ state }: { state: SwapState }) { if (state.orderType === OrderType.LIMIT) return null; return ( - - - Slippage is lower than recommended. The swap may be delayed or fail. - - + + Slippage is lower than recommended. The swap may be delayed or fail. + ); } diff --git a/src/components/transactions/Swap/warnings/postInputs/USDTResetWarning.tsx b/src/components/transactions/Swap/warnings/postInputs/USDTResetWarning.tsx index 1c8f421169..82f7648fd2 100644 --- a/src/components/transactions/Swap/warnings/postInputs/USDTResetWarning.tsx +++ b/src/components/transactions/Swap/warnings/postInputs/USDTResetWarning.tsx @@ -1,6 +1,5 @@ import { Trans } from '@lingui/macro'; -import { Typography } from '@mui/material'; -import { Warning } from 'src/components/primitives/Warning'; +import { Alert } from '@mui/material'; import { SwapState } from '../../types'; @@ -8,13 +7,11 @@ export function USDTResetWarning({ state }: { state: SwapState }) { if (!state.requiresApprovalReset) return null; return ( - - - - USDT on Ethereum requires approval reset before a new approval. This will require an - additional transaction. - - - + + + USDT on Ethereum requires approval reset before a new approval. This will require an + additional transaction. + + ); } diff --git a/src/components/transactions/Swap/warnings/postInputs/ZeroLTVDestinationWarning.tsx b/src/components/transactions/Swap/warnings/postInputs/ZeroLTVDestinationWarning.tsx index 18ed8bcadf..2de4487fcf 100644 --- a/src/components/transactions/Swap/warnings/postInputs/ZeroLTVDestinationWarning.tsx +++ b/src/components/transactions/Swap/warnings/postInputs/ZeroLTVDestinationWarning.tsx @@ -1,6 +1,5 @@ import { Trans } from '@lingui/macro'; -import { Typography } from '@mui/material'; -import { Warning } from 'src/components/primitives/Warning'; +import { Alert } from '@mui/material'; import { useAppDataContext } from 'src/hooks/app-data-provider/useAppDataProvider'; import { hasNonZeroEffectiveLtv } from 'src/utils/hfUtils'; @@ -37,13 +36,11 @@ export function ZeroLTVDestinationWarning({ state }: { state: SwapState }) { } return ( - - - - {destinationReserve.symbol} has a Loan-to-Value of 0, so it will not be enabled as - collateral automatically after the swap. - - - + + + {destinationReserve.symbol} has a Loan-to-Value of 0, so it will not be enabled as + collateral automatically after the swap. + + ); } diff --git a/src/components/transactions/Swap/warnings/preInputs/CowOpenOrdersWarning.tsx b/src/components/transactions/Swap/warnings/preInputs/CowOpenOrdersWarning.tsx index 21ba7cf07c..d5d40c31bf 100644 --- a/src/components/transactions/Swap/warnings/preInputs/CowOpenOrdersWarning.tsx +++ b/src/components/transactions/Swap/warnings/preInputs/CowOpenOrdersWarning.tsx @@ -1,8 +1,7 @@ import { normalize } from '@aave/math-utils'; import { OrderStatus } from '@cowprotocol/cow-sdk'; -import { Link, Typography } from '@mui/material'; +import { Alert, Link } from '@mui/material'; import { useEffect, useState } from 'react'; -import { Warning } from 'src/components/primitives/Warning'; import { useSwapOrdersTracking } from 'src/hooks/useSwapOrdersTracking'; import { useRootStore } from 'src/store/root'; import { findByChainId } from 'src/ui-config/marketsConfig'; @@ -63,20 +62,18 @@ export function CowOpenOrdersWarning({ state }: { state: SwapState }) { if (!cowOpenOrdersTotalAmountFormatted && !hasActiveForToken) return null; return ( - - - {cowOpenOrdersTotalAmountFormatted ? ( - <> - You have open orders for {cowOpenOrdersTotalAmountFormatted} {state.sourceToken.symbol}.{' '} - - ) : ( - <>You have in-progress swaps for {state.sourceToken.symbol}. - )} -
Track them in your{' '} - - transaction history - - - + + {cowOpenOrdersTotalAmountFormatted ? ( + <> + You have open orders for {cowOpenOrdersTotalAmountFormatted} {state.sourceToken.symbol}.{' '} + + ) : ( + <>You have in-progress swaps for {state.sourceToken.symbol}. + )} +
Track them in your{' '} + + transaction history + + ); } diff --git a/src/components/transactions/Swap/warnings/preInputs/NativeLimitOrderInfo.tsx b/src/components/transactions/Swap/warnings/preInputs/NativeLimitOrderInfo.tsx index 3cdd52ac6d..0ea8e5d745 100644 --- a/src/components/transactions/Swap/warnings/preInputs/NativeLimitOrderInfo.tsx +++ b/src/components/transactions/Swap/warnings/preInputs/NativeLimitOrderInfo.tsx @@ -1,6 +1,5 @@ import { Trans } from '@lingui/macro'; -import { Typography } from '@mui/material'; -import { Warning } from 'src/components/primitives/Warning'; +import { Alert } from '@mui/material'; import { SwapParams, SwapProvider, SwapState, SwapType, TokenType } from '../../types'; @@ -13,13 +12,11 @@ export function NativeLimitOrderInfo({ state, params }: { state: SwapState; para if (!isClassicSwap || !isNativeInput || !isCoWProtocol) return null; return ( - - - - For security reasons, limit orders are not supported for Native tokens. To place a limit - order, use the wrapped version. - - - + + + For security reasons, limit orders are not supported for Native tokens. To place a limit + order, use the wrapped version. + + ); } diff --git a/src/components/transactions/TxActionsWrapper.tsx b/src/components/transactions/TxActionsWrapper.tsx index bc8dc3d2ba..a9a383fddf 100644 --- a/src/components/transactions/TxActionsWrapper.tsx +++ b/src/components/transactions/TxActionsWrapper.tsx @@ -183,7 +183,7 @@ export const TxActionsWrapper = ({ {content} {readOnlyModeAddress && ( - + Read-only mode. Connect to a wallet to perform transactions. )} diff --git a/src/components/transactions/Warnings/AAVEWarning.tsx b/src/components/transactions/Warnings/AAVEWarning.tsx index 727d945e88..6c4f6cd91b 100644 --- a/src/components/transactions/Warnings/AAVEWarning.tsx +++ b/src/components/transactions/Warnings/AAVEWarning.tsx @@ -1,20 +1,17 @@ import { Trans } from '@lingui/macro'; -import { Link, Typography } from '@mui/material'; +import { Alert, Link } from '@mui/material'; import { ROUTES } from '../../primitives/Link'; -import { Warning } from '../../primitives/Warning'; export const AAVEWarning = () => { return ( - - - Supplying your AAVE{' '} - tokens is not the same as staking them. If you wish to stake your AAVE{' '} - tokens, please go to the {' '} - - staking view - - - + + Supplying your AAVE{' '} + tokens is not the same as staking them. If you wish to stake your AAVE{' '} + tokens, please go to the {' '} + + staking view + + ); }; diff --git a/src/components/transactions/Warnings/BorrowCapWarning.tsx b/src/components/transactions/Warnings/BorrowCapWarning.tsx index 204c06b4b4..9d74b2a70b 100644 --- a/src/components/transactions/Warnings/BorrowCapWarning.tsx +++ b/src/components/transactions/Warnings/BorrowCapWarning.tsx @@ -1,16 +1,16 @@ import { Trans } from '@lingui/macro'; -import { AlertProps } from '@mui/material'; +import { Alert, AlertProps } from '@mui/material'; import { AssetCapData } from 'src/hooks/useAssetCaps'; import { Link } from '../../primitives/Link'; -import { Warning } from '../../primitives/Warning'; type BorrowCapWarningProps = AlertProps & { borrowCap: AssetCapData; icon?: boolean; }; -export const BorrowCapWarning = ({ borrowCap, icon = true, ...rest }: BorrowCapWarningProps) => { +// `icon` is destructured only to keep it out of `...rest` (the alert always shows its severity icon). +export const BorrowCapWarning = ({ borrowCap, icon, ...rest }: BorrowCapWarningProps) => { // Don't show a warning when less than 98% utilized if (!borrowCap.percentUsed || borrowCap.percentUsed < 98) return null; @@ -27,11 +27,11 @@ export const BorrowCapWarning = ({ borrowCap, icon = true, ...rest }: BorrowCapW }; return ( - + {renderText()}{' '} Learn more - + ); }; diff --git a/src/components/transactions/Warnings/ChangeNetworkWarning.tsx b/src/components/transactions/Warnings/ChangeNetworkWarning.tsx index 7f71b1f56c..1ebd5adae7 100644 --- a/src/components/transactions/Warnings/ChangeNetworkWarning.tsx +++ b/src/components/transactions/Warnings/ChangeNetworkWarning.tsx @@ -1,14 +1,12 @@ import { ChainId } from '@aave/contract-helpers'; import { Trans } from '@lingui/macro'; -import { AlertProps, Button, CircularProgress, Typography } from '@mui/material'; +import { Alert, AlertProps, Button, CircularProgress } from '@mui/material'; import { useEffect, useState } from 'react'; import { useWeb3Context } from 'src/libs/hooks/useWeb3Context'; import { TrackEventProps } from 'src/store/analyticsSlice'; import { useRootStore } from 'src/store/root'; import { GENERAL } from 'src/utils/events'; -import { Warning } from '../../primitives/Warning'; - export type ChangeNetworkWarningProps = AlertProps & { funnel?: string; networkName: string; @@ -25,6 +23,7 @@ export const ChangeNetworkWarning = ({ funnel, askManualSwitch = false, autoSwitchOnMount = true, + sx, ...rest }: ChangeNetworkWarningProps) => { const { switchNetwork, switchNetworkError } = useWeb3Context(); @@ -70,46 +69,38 @@ export const ChangeNetworkWarning = ({ switchNetwork(chainId); }; return ( - {isAutoSwitching ? ( - + <> Switching to {networkName}... - + ) : switchNetworkError ? ( - - - {hasAttemptedAutoSwitch - ? "We couldn't switch the network automatically. Please check if you can change it from the wallet." - : "Seems like we can't switch the network automatically. Please check if you can change it from the wallet."} - - + + {hasAttemptedAutoSwitch + ? "We couldn't switch the network automatically. Please check if you can change it from the wallet." + : "Seems like we can't switch the network automatically. Please check if you can change it from the wallet."} + ) : ( // Show manual switch option - + <> {hasAttemptedAutoSwitch ? `Auto-switch failed. Please manually switch to ${networkName}.` : `Please switch to ${networkName}.`} {' '} {!askManualSwitch && ( - )} - + )} - + ); }; diff --git a/src/components/transactions/Warnings/CowLowerThanMarketWarning.tsx b/src/components/transactions/Warnings/CowLowerThanMarketWarning.tsx index 504b906e23..685a9ae7a4 100644 --- a/src/components/transactions/Warnings/CowLowerThanMarketWarning.tsx +++ b/src/components/transactions/Warnings/CowLowerThanMarketWarning.tsx @@ -1,15 +1,12 @@ import { Trans } from '@lingui/macro'; -import { Typography } from '@mui/material'; -import { Warning } from 'src/components/primitives/Warning'; +import { Alert } from '@mui/material'; export const CowLowerThanMarketWarning = () => { return ( - - - - The selected rate is lower than the market price. You might incur a loss if you proceed. - - - + + + The selected rate is lower than the market price. You might incur a loss if you proceed. + + ); }; diff --git a/src/components/transactions/Warnings/DebtCeilingWarning.tsx b/src/components/transactions/Warnings/DebtCeilingWarning.tsx index 84c7add649..37d5a49d10 100644 --- a/src/components/transactions/Warnings/DebtCeilingWarning.tsx +++ b/src/components/transactions/Warnings/DebtCeilingWarning.tsx @@ -1,20 +1,16 @@ import { Trans } from '@lingui/macro'; -import { AlertProps } from '@mui/material'; +import { Alert, AlertProps } from '@mui/material'; import { AssetCapData } from 'src/hooks/useAssetCaps'; import { Link } from '../../primitives/Link'; -import { Warning } from '../../primitives/Warning'; type DebtCeilingWarningProps = AlertProps & { debtCeiling: AssetCapData; icon?: boolean; }; -export const DebtCeilingWarning = ({ - debtCeiling, - icon = true, - ...rest -}: DebtCeilingWarningProps) => { +// `icon` is destructured only to keep it out of `...rest` (the alert always shows its severity icon). +export const DebtCeilingWarning = ({ debtCeiling, icon, ...rest }: DebtCeilingWarningProps) => { // Don't show a warning when less than 98% utilized if (!debtCeiling.percentUsed || debtCeiling.percentUsed < 98) return null; @@ -35,7 +31,7 @@ export const DebtCeilingWarning = ({ }; return ( - + {renderText()}{' '} Learn more - + ); }; diff --git a/src/components/transactions/Warnings/IsolationModeWarning.tsx b/src/components/transactions/Warnings/IsolationModeWarning.tsx index c7f486a855..7294c599dd 100644 --- a/src/components/transactions/Warnings/IsolationModeWarning.tsx +++ b/src/components/transactions/Warnings/IsolationModeWarning.tsx @@ -1,8 +1,7 @@ import { Trans } from '@lingui/macro'; -import { AlertColor, Typography } from '@mui/material'; +import { Alert, AlertColor, AlertTitle } from '@mui/material'; import { Link } from '../../primitives/Link'; -import { Warning } from '../../primitives/Warning'; interface IsolationModeWarningProps { asset?: string; @@ -11,18 +10,16 @@ interface IsolationModeWarningProps { export const IsolationModeWarning = ({ asset, severity }: IsolationModeWarningProps) => { return ( - - + + You are entering Isolation mode - - - - In Isolation mode, you cannot supply other assets as collateral. A global debt ceiling - limits the borrowing power of the isolated asset. To exit isolation mode disable{' '} - {asset ? asset : ''} as collateral before borrowing another asset. Read more in our{' '} - FAQ - - - + + + In Isolation mode, you cannot supply other assets as collateral. A global debt ceiling + limits the borrowing power of the isolated asset. To exit isolation mode disable{' '} + {asset ? asset : ''} as collateral before borrowing another asset. Read more in our{' '} + FAQ + + ); }; diff --git a/src/components/transactions/Warnings/MarketWarning.tsx b/src/components/transactions/Warnings/MarketWarning.tsx index b2e1a7b26a..ff403ab640 100644 --- a/src/components/transactions/Warnings/MarketWarning.tsx +++ b/src/components/transactions/Warnings/MarketWarning.tsx @@ -1,7 +1,5 @@ import { Trans } from '@lingui/macro'; -import { Link, Typography } from '@mui/material'; - -import { Warning } from '../../primitives/Warning'; +import { Alert, Link } from '@mui/material'; const WarningMessage = ({ market }: { market: string }) => { if (market) { @@ -27,13 +25,11 @@ interface MarketWarningProps { // NOTE: Deprecated for now as no frozen markets export const MarketWarning = ({ marketName, forum }: MarketWarningProps) => { return ( - - - {' '} - - {forum ? Join the community discussion : Learn more} - - - + + {' '} + + {forum ? Join the community discussion : Learn more} + + ); }; diff --git a/src/components/transactions/Warnings/ParaswapErrorDisplay.tsx b/src/components/transactions/Warnings/ParaswapErrorDisplay.tsx index fa1df54442..b0ea78b9be 100644 --- a/src/components/transactions/Warnings/ParaswapErrorDisplay.tsx +++ b/src/components/transactions/Warnings/ParaswapErrorDisplay.tsx @@ -1,6 +1,5 @@ import { Trans } from '@lingui/macro'; -import { Box, Typography } from '@mui/material'; -import { Warning } from 'src/components/primitives/Warning'; +import { Alert, Box } from '@mui/material'; import { TxErrorType } from 'src/ui-config/errorMapping'; import { GasEstimationError } from '../FlowCommons/GasEstimationError'; @@ -18,12 +17,9 @@ export const ParaswapErrorDisplay: React.FC = ({ txError }) => { {txError.rawError.message !== USER_DENIED_SIGNATURE && txError.rawError.message !== USER_DENIED_TRANSACTION && ( - - - {' '} - Tip: Try increasing slippage or reduce input amount - - + + Tip: Try increasing slippage or reduce input amount + )} diff --git a/src/components/transactions/Warnings/SNXWarning.tsx b/src/components/transactions/Warnings/SNXWarning.tsx index 1574614eb5..63981c7e21 100644 --- a/src/components/transactions/Warnings/SNXWarning.tsx +++ b/src/components/transactions/Warnings/SNXWarning.tsx @@ -1,19 +1,15 @@ import { Trans } from '@lingui/macro'; -import { Typography } from '@mui/material'; - -import { Warning } from '../../primitives/Warning'; +import { Alert } from '@mui/material'; export const SNXWarning = () => { return ( - - - Before supplying SNX{' '} - - {' '} - please check that the amount you want to supply is not currently being used for staking. - If it is being used for staking, your transaction might fail. - - - + + Before supplying SNX{' '} + + {' '} + please check that the amount you want to supply is not currently being used for staking. If + it is being used for staking, your transaction might fail. + + ); }; diff --git a/src/components/transactions/Warnings/SupplyCapWarning.tsx b/src/components/transactions/Warnings/SupplyCapWarning.tsx index 34c4c9ad33..8d437f4a76 100644 --- a/src/components/transactions/Warnings/SupplyCapWarning.tsx +++ b/src/components/transactions/Warnings/SupplyCapWarning.tsx @@ -1,16 +1,16 @@ import { Trans } from '@lingui/macro'; -import { AlertProps } from '@mui/material'; +import { Alert, AlertProps } from '@mui/material'; import { AssetCapData } from 'src/hooks/useAssetCaps'; import { Link } from '../../primitives/Link'; -import { Warning } from '../../primitives/Warning'; type SupplyCapWarningProps = AlertProps & { supplyCap: AssetCapData; icon?: boolean; }; -export const SupplyCapWarning = ({ supplyCap, icon = true, ...rest }: SupplyCapWarningProps) => { +// `icon` is destructured only to keep it out of `...rest` (the alert always shows its severity icon). +export const SupplyCapWarning = ({ supplyCap, icon, ...rest }: SupplyCapWarningProps) => { // Don't show a warning when less than 98% utilized if (!supplyCap.percentUsed || supplyCap.percentUsed < 98) return null; @@ -28,11 +28,11 @@ export const SupplyCapWarning = ({ supplyCap, icon = true, ...rest }: SupplyCapW }; return ( - + {renderText()}{' '} Learn more - + ); }; diff --git a/src/components/transactions/Warnings/USDTResetWarning.tsx b/src/components/transactions/Warnings/USDTResetWarning.tsx index dfd320b172..35585116de 100644 --- a/src/components/transactions/Warnings/USDTResetWarning.tsx +++ b/src/components/transactions/Warnings/USDTResetWarning.tsx @@ -1,16 +1,13 @@ import { Trans } from '@lingui/macro'; -import { Typography } from '@mui/material'; -import { Warning } from 'src/components/primitives/Warning'; +import { Alert } from '@mui/material'; export const USDTResetWarning = () => { return ( - - - - USDT on Ethereum requires approval reset before a new approval. This will require an - additional transaction. - - - + + + USDT on Ethereum requires approval reset before a new approval. This will require an + additional transaction. + + ); }; diff --git a/src/components/transactions/Withdraw/WithdrawModalContent.tsx b/src/components/transactions/Withdraw/WithdrawModalContent.tsx index bc427401f9..65ec8542bb 100644 --- a/src/components/transactions/Withdraw/WithdrawModalContent.tsx +++ b/src/components/transactions/Withdraw/WithdrawModalContent.tsx @@ -1,9 +1,8 @@ import { API_ETH_MOCK_ADDRESS } from '@aave/contract-helpers'; import { valueToBigNumber } from '@aave/math-utils'; import { Trans } from '@lingui/macro'; -import { Box, Checkbox, Typography } from '@mui/material'; +import { Alert, Box, Checkbox, Typography } from '@mui/material'; import { useRef, useState } from 'react'; -import { Warning } from 'src/components/primitives/Warning'; import { ExtendedFormattedUser } from 'src/hooks/app-data-provider/useAppDataProvider'; import { useModalContext } from 'src/hooks/useModal'; import { useZeroLTVBlockingWithdraw } from 'src/hooks/useZeroLTVBlockingWithdraw'; @@ -188,12 +187,12 @@ export const WithdrawModalContent = ({ {displayRiskCheckbox && ( <> - + Withdrawing this amount will reduce your health factor and increase risk of liquidation. - + - + Withdraw @@ -49,7 +49,7 @@ export function WithdrawTypeSelector({ trackEvent(WITHDRAW_MODAL.SWITCH_WITHDRAW_TYPE, { withdrawType: 'Withdraw and Swap' }) } > - + Withdraw & Swap diff --git a/src/hooks/useConnectGate.ts b/src/hooks/useConnectGate.ts new file mode 100644 index 0000000000..d766560f87 --- /dev/null +++ b/src/hooks/useConnectGate.ts @@ -0,0 +1,21 @@ +import { useModal } from 'connectkit'; +import { useWeb3Context } from 'src/libs/hooks/useWeb3Context'; + +/** + * Returns a wrapper that runs `action` when a wallet is connected, or opens the ConnectKit + * (Family) wallet-connect modal when it isn't. Used by entry points like the header's Swap / + * Bridge buttons so unauthenticated users go straight to connect instead of a modal's own + * connect step. + */ +export const useConnectGate = () => { + const { currentAccount } = useWeb3Context(); + const { setOpen } = useModal(); + + return (action: () => void) => { + if (!currentAccount) { + setOpen(true); + return; + } + action(); + }; +}; diff --git a/src/hooks/usePinnedMarket.ts b/src/hooks/usePinnedMarket.ts new file mode 100644 index 0000000000..7d259fdf85 --- /dev/null +++ b/src/hooks/usePinnedMarket.ts @@ -0,0 +1,20 @@ +import { useEffect } from 'react'; +import { useRootStore } from 'src/store/root'; +import { CustomMarket } from 'src/ui-config/marketsConfig'; + +/** + * Pins the app's selected market to `market` for the lifetime of the calling page, restoring the + * user's prior market on unmount — so a page that must run on a single instance (e.g. staking / + * safety module on Core) can force it without a lasting global change. The header, lists, and tx + * modals all read the market from the store, so pinning here covers the whole page. No-op when + * already on `market`. + */ +export const usePinnedMarket = (market: CustomMarket) => { + useEffect(() => { + const { currentMarket: prevMarket, setCurrentMarket } = useRootStore.getState(); + if (prevMarket !== market) { + setCurrentMarket(market, true); // true = don't touch the URL query param + return () => setCurrentMarket(prevMarket, true); + } + }, [market]); +}; diff --git a/src/hooks/useReserveActionState.tsx b/src/hooks/useReserveActionState.tsx index 6a9db8200e..1d50158b17 100644 --- a/src/hooks/useReserveActionState.tsx +++ b/src/hooks/useReserveActionState.tsx @@ -1,8 +1,7 @@ import { ExternalLinkIcon } from '@heroicons/react/solid'; import { Trans } from '@lingui/macro'; -import { Button, Stack, SvgIcon, Typography } from '@mui/material'; +import { Alert, Button, Stack, SvgIcon, Typography } from '@mui/material'; import { Link, ROUTES } from 'src/components/primitives/Link'; -import { Warning } from 'src/components/primitives/Warning'; import { getEmodeMessage } from 'src/components/transactions/Emode/EmodeNaming'; import { isFunSupplyAsset } from 'src/components/transactions/FunCheckout/funSupplyAssets'; import { @@ -75,7 +74,7 @@ export const useReserveActionState = ({ {balance === '0' && !isGho && ( <> {currentNetworkConfig.isTestnet ? ( - + Your {networkName} wallet is empty. Get free test {reserve.name} at {' '} @@ -108,13 +107,12 @@ export const useReserveActionState = ({ )} - + ) : ( )} @@ -122,29 +120,29 @@ export const useReserveActionState = ({ )} {(balance !== '0' || isGho) && user?.totalCollateralMarketReferenceCurrency === '0' && ( - + To borrow you need to supply any asset to be used as collateral. - + )} {isolationModeBorrowDisabled && ( - + Collateral usage is limited because of Isolation mode. - + )} {eModeBorrowDisabled && isolationModeBorrowDisabled && ( - + Borrowing is unavailable because you’ve enabled Efficiency Mode (E-Mode) and Isolation mode. To manage E-Mode and Isolation mode visit your{' '} Dashboard. - + )} {eModeBorrowDisabled && !isolationModeBorrowDisabled && ( - + Borrowing is unavailable because you’ve enabled Efficiency Mode (E-Mode) for{' '} {replaceUnderscoresWithSpaces( @@ -153,16 +151,16 @@ export const useReserveActionState = ({ category. To manage E-Mode categories visit your{' '} Dashboard. - + )} {!eModeBorrowDisabled && isolationModeBorrowDisabled && ( - + Borrowing is unavailable because you’re using Isolation mode. To manage Isolation mode visit your Dashboard. - + )} {maxAmountToSupply === '0' && diff --git a/src/layouts/AppFooter.tsx b/src/layouts/AppFooter.tsx index 604995cdb9..83a4f32440 100644 --- a/src/layouts/AppFooter.tsx +++ b/src/layouts/AppFooter.tsx @@ -1,9 +1,13 @@ import { Trans } from '@lingui/macro'; -import { GitHub, Instagram, LinkedIn, X } from '@mui/icons-material'; -import { Box, styled, SvgIcon, Typography } from '@mui/material'; +import GitHub from '@mui/icons-material/GitHub'; +import Instagram from '@mui/icons-material/Instagram'; +import LinkedIn from '@mui/icons-material/LinkedIn'; +import X from '@mui/icons-material/X'; +import { Box, Container, styled, SvgIcon, Typography } from '@mui/material'; import { DuneIcon, TikTok } from 'public/icons/footer/icons'; import { Link } from 'src/components/primitives/Link'; import { useRootStore } from 'src/store/root'; +import { figVars } from 'src/utils/figmaColors'; import { useShallow } from 'zustand/shallow'; import DiscordIcon from '/public/icons/discord.svg'; @@ -13,14 +17,14 @@ interface StyledLinkProps { onClick?: React.MouseEventHandler; } -const StyledLink = styled(Link)(({ theme }) => ({ - color: theme.palette.text.muted, +const StyledLink = styled(Link)({ + color: figVars['fg-3'], '&:hover': { - color: theme.palette.text.primary, + color: figVars['fg-1'], }, display: 'flex', alignItems: 'center', -})); +}); const FOOTER_ICONS = [ { @@ -114,39 +118,46 @@ export function AppFooter() { return ( ({ - display: 'flex', - padding: ['22px 0px 40px 0px', '0 22px 0 40px', '20px 22px'], width: '100%', - justifyContent: 'space-between', - alignItems: 'center', - gap: '22px', - flexDirection: ['column', 'column', 'row'], boxShadow: theme.palette.mode === 'light' ? 'inset 0px 1px 0px rgba(0, 0, 0, 0.04)' : 'inset 0px 1px 0px rgba(255, 255, 255, 0.12)', })} > - - {FOOTER_LINKS.map((link) => ( - - {link.label} - - ))} - - - {FOOTER_ICONS.map((icon) => ( - - - {icon.icon} - - - ))} - + {/* Horizontal padding + maxWidth come from the themed MuiContainer breakpoint ladder, same as + AppHeader, so the footer's content edges line up with the header's at every viewport width. */} + + + {FOOTER_LINKS.map((link) => ( + + {link.label} + + ))} + + + {FOOTER_ICONS.map((icon) => ( + + + {icon.icon} + + + ))} + + ); } diff --git a/src/layouts/AppGlobalStyles.tsx b/src/layouts/AppGlobalStyles.tsx index ca31f629ea..e6bbca809e 100644 --- a/src/layouts/AppGlobalStyles.tsx +++ b/src/layouts/AppGlobalStyles.tsx @@ -1,61 +1,43 @@ -import { useMediaQuery } from '@mui/material'; import CssBaseline from '@mui/material/CssBaseline'; -import { createTheme, ThemeProvider } from '@mui/material/styles'; -import { deepmerge } from '@mui/utils'; -import React, { ReactNode, useEffect, useMemo, useState } from 'react'; +import GlobalStyles from '@mui/material/GlobalStyles'; +import { Experimental_CssVarsProvider as CssVarsProvider } from '@mui/material/styles'; +import { ReactNode, useMemo } from 'react'; -import { getDesignTokens, getThemedComponents } from '../utils/theme'; - -export const ColorModeContext = React.createContext({ - // eslint-disable-next-line @typescript-eslint/no-empty-function - toggleColorMode: () => {}, -}); - -type Mode = 'light' | 'dark'; +import { buildP3Overrides, createAppTheme } from '../utils/theme'; /** - * Main Layout component which wrapps around the whole app - * @param param0 - * @returns + * Main layout wrapper around the whole app. Provides the MUI theme via the CSS-variables + * engine: both color schemes are baked into CSS custom properties once, and light/dark is + * switched by toggling the `data-mui-color-scheme` attribute on (persisted by MUI, + * seeded from the OS preference). Components read/set the scheme via `useColorScheme()`. */ export function AppGlobalStyles({ children }: { children: ReactNode }) { - const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)'); - const [mode, setMode] = useState(prefersDarkMode ? 'dark' : 'light'); - const colorMode = useMemo( - () => ({ - toggleColorMode: () => { - setMode((prevMode) => { - const newMode = prevMode === 'light' ? 'dark' : 'light'; - localStorage.setItem('colorMode', newMode); - return newMode; - }); + const theme = useMemo(() => createAppTheme(), []); + + // Display-P3 layer: on wide-gamut displays that support the syntax, override the sRGB + // `--mui-palette-*` vars with their P3 equivalents. Everything else keeps the sRGB base. + const p3Styles = useMemo(() => { + const { light, dark } = buildP3Overrides(theme); + return { + '@supports (color: color(display-p3 1 1 1))': { + '@media (color-gamut: p3)': { + // Doubled selectors (specificity 0,2,0) beat MUI's own var sheets (0,1,0), so the + // P3 layer wins regardless of stylesheet source order — and still match both + // and the showcase's local `data-mui-color-scheme` wrapper. + ':root:root, [data-mui-color-scheme="light"][data-mui-color-scheme="light"]': light, + '[data-mui-color-scheme="dark"][data-mui-color-scheme="dark"]': dark, + }, }, - }), - [] - ); - - useEffect(() => { - const initialMode = localStorage?.getItem('colorMode') as Mode; - if (initialMode) { - setMode(initialMode); - } else if (prefersDarkMode) { - setMode('dark'); - } - }, []); - - const theme = useMemo(() => { - const themeCreate = createTheme(getDesignTokens(mode)); - return deepmerge(themeCreate, getThemedComponents(themeCreate)); - }, [mode]); + }; + }, [theme]); return ( - - - {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */} - + + {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */} + + - {children} - - + {children} + ); } diff --git a/src/layouts/AppHeader.tsx b/src/layouts/AppHeader.tsx index c798446032..33159ddd65 100644 --- a/src/layouts/AppHeader.tsx +++ b/src/layouts/AppHeader.tsx @@ -1,13 +1,10 @@ -import { - InformationCircleIcon, - SparklesIcon, - SwitchHorizontalIcon, -} from '@heroicons/react/outline'; +import { InformationCircleIcon } from '@heroicons/react/outline'; import { Trans } from '@lingui/macro'; import { Badge, Button, CircularProgress, + Container, NoSsr, Slide, styled, @@ -22,18 +19,23 @@ import * as React from 'react'; import { useEffect, useState } from 'react'; import { AvatarSize } from 'src/components/Avatar'; import { ContentWithTooltip } from 'src/components/ContentWithTooltip'; +import { AaveLogo } from 'src/components/icons/AaveLogo'; +import { BridgeIcon } from 'src/components/icons/BridgeIcon'; +import { SwapIcon } from 'src/components/icons/SwapIcon'; import { AAVE_PRO_URL } from 'src/components/MarketSwitcher'; import { UserDisplay } from 'src/components/UserDisplay'; import { ConnectWalletButton } from 'src/components/WalletConnection/ConnectWalletButton'; +import { useConnectGate } from 'src/hooks/useConnectGate'; import { useModalContext } from 'src/hooks/useModal'; import { useSwapOrdersTracking } from 'src/hooks/useSwapOrdersTracking'; import { useWeb3Context } from 'src/libs/hooks/useWeb3Context'; import { useRootStore } from 'src/store/root'; +import { iconButtonSx } from 'src/utils/buttonStyles'; +import { figVars } from 'src/utils/figmaColors'; import { ENABLE_TESTNET, FORK_ENABLED, isFeatureEnabled } from 'src/utils/marketsAndNetworksConfig'; import { useShallow } from 'zustand/shallow'; import { Link } from '../components/primitives/Link'; -import { uiConfig } from '../uiConfig'; import { NavItems } from './components/NavItems'; import { MobileMenu } from './MobileMenu'; import { SettingsMenu } from './SettingsMenu'; @@ -49,8 +51,8 @@ const StyledBadge = styled(Badge)(({ theme }) => ({ borderRadius: '20px', width: '10px', height: '10px', - backgroundColor: `${theme.palette.secondary.main}`, - color: `${theme.palette.secondary.main}`, + backgroundColor: `${theme.vars.palette.secondary.main}`, + color: `${theme.vars.palette.secondary.main}`, '&::after': { position: 'absolute', top: 0, @@ -77,11 +79,12 @@ const StyledBadge = styled(Badge)(({ theme }) => ({ function HideOnScroll({ children }: Props) { const { breakpoints } = useTheme(); - const md = useMediaQuery(breakpoints.down('md')); - const trigger = useScrollTrigger({ threshold: md ? 160 : 80 }); + const mdlg = useMediaQuery(breakpoints.down('mdlg')); + const trigger = useScrollTrigger({ threshold: 80 }); + // Mobile keeps the header pinned (never hides on scroll); desktop still hides past the threshold. return ( - + {children} ); @@ -89,11 +92,24 @@ function HideOnScroll({ children }: Props) { const SWITCH_VISITED_KEY = 'switchVisited'; +// Dev-only environment badges (testnet / fork) — intentionally off-brand magenta to stand out. +const envBadgeSx = { + backgroundColor: '#B6509E', + boxShadow: 'none', + '&:hover, &.Mui-focusVisible': { backgroundColor: 'rgba(182, 80, 158, 0.7)', boxShadow: 'none' }, + // The pill variant tints on hover via a ::before overlay; the badge steps its own fill instead. + '&:hover::before, &.Mui-focusVisible::before': { backgroundColor: 'transparent' }, +}; + export function AppHeader() { const { breakpoints } = useTheme(); - const md = useMediaQuery(breakpoints.down('md')); + const mdlg = useMediaQuery(breakpoints.down('mdlg')); const sm = useMediaQuery(breakpoints.down('sm')); - const smd = useMediaQuery('(max-width:1120px)'); + const lg = useMediaQuery(breakpoints.down('lg')); + // Shared by the Swap + Bridge triggers: icon-only square when collapsed (below lg), text otherwise. + const collapsingTriggerSx = lg + ? [iconButtonSx, { alignItems: 'center', '& .MuiButton-startIcon': { mx: 0 } }] + : { p: '0 0.88rem', minWidth: 'unset', alignItems: 'center' }; const [, setVisitedSwitch] = useState(() => { if (typeof window === 'undefined') return true; @@ -112,26 +128,17 @@ export function AppHeader() { const { openSwitch, openBridge, openReadMode } = useModalContext(); const { readOnlyMode } = useWeb3Context(); - const [walletWidgetOpen, setWalletWidgetOpen] = useState(false); - const [mobileMenuOpen, setMobileMenuOpen] = useState(false); + const openOrConnect = useConnectGate(); const { hasActiveOrders } = useSwapOrdersTracking(); useEffect(() => { - if (mobileDrawerOpen && !md) { + if (!mdlg) { setMobileDrawerOpen(false); } - if (walletWidgetOpen) { - setWalletWidgetOpen(false); - } // eslint-disable-next-line react-hooks/exhaustive-deps - }, [md]); + }, [mdlg]); - const headerHeight = 48; - - const toggleMobileMenu = (state: boolean) => { - if (md) setMobileDrawerOpen(state); - setMobileMenuOpen(state); - }; + const headerHeight = 72; const disableTestnet = () => { localStorage.setItem('testnetsEnabled', 'false'); @@ -152,11 +159,11 @@ export function AppHeader() { const handleSwitchClick = () => { localStorage.setItem(SWITCH_VISITED_KEY, 'true'); setVisitedSwitch(true); - openSwitch(); + openOrConnect(openSwitch); }; const handleBridgeClick = () => { - openBridge(); + openOrConnect(openBridge); }; const testnetTooltip = ( @@ -173,7 +180,7 @@ export function AppHeader() { FAQ. - @@ -187,7 +194,7 @@ export function AppHeader() { The app is running in fork mode. - @@ -205,190 +212,173 @@ export function AppHeader() { top: 0, transition: theme.transitions.create('top'), zIndex: theme.zIndex.appBar, - bgcolor: theme.palette.background.header, - padding: { - xs: mobileMenuOpen || walletWidgetOpen ? '8px 20px' : '8px 8px 8px 20px', - xsm: '8px 20px', - }, + bgcolor: 'bg-3', display: 'flex', - alignItems: 'center', - flexDirection: 'space-between', - boxShadow: 'inset 0px -1px 0px rgba(242, 243, 247, 0.16)', + flexDirection: 'column', + justifyContent: 'center', + boxShadow: `inset 0px -1px 0px ${figVars['border-0']}`, })} > - setMobileMenuOpen(false)} > - AAVE - - - {ENABLE_TESTNET && ( - - - - )} - - - {FORK_ENABLED && currentMarketData?.isFork && ( - - - - )} - - - - - - - - - - - + + + + {ENABLE_TESTNET && ( + + + + )} + + + {FORK_ENABLED && currentMarketData?.isFork && ( + + + + )} + - - + + + + + + + - - + - - - - - + + + - {readOnlyMode ? ( - - ) : ( - - )} + + + + + + + {readOnlyMode ? ( + + ) : ( + + )} - - - + {!mdlg && } - {!walletWidgetOpen && ( - + - )} + ); diff --git a/src/layouts/MobileMenu.tsx b/src/layouts/MobileMenu.tsx index 711b0f0984..219e4d2e11 100644 --- a/src/layouts/MobileMenu.tsx +++ b/src/layouts/MobileMenu.tsx @@ -1,27 +1,17 @@ -import { MenuIcon } from '@heroicons/react/outline'; import { Trans } from '@lingui/macro'; -import { useLingui } from '@lingui/react'; -import { - Box, - Button, - Divider, - List, - ListItem, - ListItemIcon, - ListItemText, - SvgIcon, - Typography, -} from '@mui/material'; -import React, { ReactNode, useEffect, useState } from 'react'; +import { Box, Button, Divider, List, ListItem, ListItemText } from '@mui/material'; +import { useEffect, useState } from 'react'; +import { BridgeIcon } from 'src/components/icons/BridgeIcon'; +import { SwapIcon } from 'src/components/icons/SwapIcon'; +import { useConnectGate } from 'src/hooks/useConnectGate'; import { useModalContext } from 'src/hooks/useModal'; -import { PROD_ENV } from 'src/utils/marketsAndNetworksConfig'; +import { useRootStore } from 'src/store/root'; +import { figVars } from 'src/utils/figmaColors'; +import { isFeatureEnabled, PROD_ENV } from 'src/utils/marketsAndNetworksConfig'; -import { Link } from '../components/primitives/Link'; -import { moreNavigation } from '../ui-config/menu-items'; import { DarkModeSwitcher } from './components/DarkModeSwitcher'; import { DrawerWrapper } from './components/DrawerWrapper'; import { LanguageListItem, LanguagesList } from './components/LanguageSwitcher'; -import { MobileCloseButton } from './components/MobileCloseButton'; import { NavItems } from './components/NavItems'; import { ShieldSwitcher } from './components/ShieldSwitcher'; import { TestNetModeSwitcher } from './components/TestNetModeSwitcher'; @@ -32,97 +22,184 @@ interface MobileMenuProps { headerHeight: number; } -const MenuItemsWrapper = ({ children, title }: { children: ReactNode; title: ReactNode }) => ( - - - - {title} - +// The options scroll area: full-width so its scrollbar sits on the right edge, with 0.75rem inner +// padding for the content. +const scrollAreaSx = { + flex: 1, + minHeight: 0, + overflowY: 'auto', + px: '0.75rem', + pb: '3rem', +} as const; - {children} - +// Rows inside the drawer lists: 3rem tall, H3 label text, gutters zeroed so they align with the +// scroll area's 0.75rem inset. Applied via sx so the shared row components (SettingSwitchRow, +// LanguagesList) don't need to know about it. +const menuListSx = { + display: 'flex', + flexDirection: 'column', + gap: '0.5rem', + '& .MuiListItem-root': { + minHeight: '3rem', + borderRadius: '0.5rem', + px: 0, + cursor: 'pointer', + }, + '& .MuiListItemText-primary': { fontSize: '1.125rem', fontWeight: 500, lineHeight: '120%' }, +}; + +// The hamburger (three rounded lines, per the design SVG) that morphs into an X. Rendered inside +// one fixed-size button (below), so toggling never resizes the button and shifts the header. +// One bar of the hamburger; the three uses below add position + the open-state transform. +const toggleBar = { + position: 'absolute' as const, + left: '4px', + width: '16px', + height: '2px', + borderRadius: '1px', + backgroundColor: 'currentColor', + transition: 'transform 0.2s ease, opacity 0.2s ease', +}; - +const MenuToggleIcon = ({ open }: { open: boolean }) => ( + + + + ); export const MobileMenu = ({ open, setOpen, headerHeight }: MobileMenuProps) => { - const { i18n } = useLingui(); const [isLanguagesListOpen, setIsLanguagesListOpen] = useState(false); - const { openReadMode } = useModalContext(); + // Drives the top scrim: it only shows once the options actually scroll, so it never dims the + // first row at rest. + const [scrolled, setScrolled] = useState(false); + const { openReadMode, openSwitch, openBridge } = useModalContext(); + const openOrConnect = useConnectGate(); + const currentMarketData = useRootStore((store) => store.currentMarketData); + const showSwitchButton = isFeatureEnabled.switch(currentMarketData); useEffect(() => setIsLanguagesListOpen(false), [open]); + // A fresh scroll area always starts at the top, so reset on open / view switch. + useEffect(() => setScrolled(false), [open, isLanguagesListOpen]); const handleOpenReadMode = () => { setOpen(false); openReadMode(); }; + const handleSwap = () => { + setOpen(false); + openOrConnect(openSwitch); + }; + + const handleBridge = () => { + setOpen(false); + openOrConnect(openBridge); + }; + return ( <> - {open ? ( - - ) : ( - - )} + + {/* Fade scrim over the top of the scroll area (mirrors the bottom scrim). Only shown once + scrolled, so it never dims the first row at rest. Inset from the top by the drawer's + padding (clean band under the header) and from the right so it never touches the scrollbar. */} + {!isLanguagesListOpen ? ( <> - Menu}> + {/* Only the options scroll — the action buttons below stay pinned. */} + setScrolled(e.currentTarget.scrollTop > 0)}> - - Global settings}> - + + {/* Watch Wallet sits above the global-settings rows, no divider between them. */} + + + + Watch Wallet + + {PROD_ENV && } setIsLanguagesListOpen(true)} /> - - Links}> - - - - Watch wallet - - + - setOpen(false)} + + {/* Fade scrim over the bottom of the scroll area, in place of a divider. */} + + + + + + ) : ( - - setIsLanguagesListOpen(false)} /> - + setScrolled(e.currentTarget.scrollTop > 0)}> + + setIsLanguagesListOpen(false)} /> + + )} diff --git a/src/layouts/SettingsMenu.tsx b/src/layouts/SettingsMenu.tsx index cd5a6a98f0..773eea82d3 100644 --- a/src/layouts/SettingsMenu.tsx +++ b/src/layouts/SettingsMenu.tsx @@ -1,7 +1,7 @@ -import { CogIcon } from '@heroicons/react/solid'; import { Trans } from '@lingui/macro'; -import { Button, ListItemText, Menu, MenuItem, SvgIcon, Typography } from '@mui/material'; +import { Button, Divider, ListItemText, Menu, MenuItem } from '@mui/material'; import React, { useState } from 'react'; +import { SettingsIcon } from 'src/components/icons/SettingsIcon'; import { useModalContext } from 'src/hooks/useModal'; import { DEFAULT_LOCALE } from 'src/libs/LanguageProvider'; import { useRootStore } from 'src/store/root'; @@ -64,18 +64,16 @@ export function SettingsMenu() { return ( <> - - - Global settings - - - - {PROD_ENV && } + {PROD_ENV && } + + + + + + - Watch wallet + Watch Wallet diff --git a/src/layouts/SupportModal.tsx b/src/layouts/SupportModal.tsx index 21a8dfbdcf..92ac117735 100644 --- a/src/layouts/SupportModal.tsx +++ b/src/layouts/SupportModal.tsx @@ -203,20 +203,11 @@ export const SupportModal = () => { ) : ( - + Support - + Let us know how we can help you. You may also consider joining our community @@ -224,7 +215,7 @@ export const SupportModal = () => {
- + Email @@ -246,7 +237,7 @@ export const SupportModal = () => { }} /> - + Country (optional) @@ -274,7 +265,7 @@ export const SupportModal = () => { )} /> - + Inquiry @@ -297,7 +288,7 @@ export const SupportModal = () => { /> {account && !hasOptedIn && ( - + { } label={ - + Share my wallet address to help the support team resolve my issue diff --git a/src/layouts/TopBarNotify.tsx b/src/layouts/TopBarNotify.tsx index 2a208531b1..c00ce0bf36 100644 --- a/src/layouts/TopBarNotify.tsx +++ b/src/layouts/TopBarNotify.tsx @@ -2,12 +2,14 @@ import { Trans } from '@lingui/macro'; import CloseIcon from '@mui/icons-material/Close'; import { useMediaQuery, useTheme } from '@mui/material'; import AppBar from '@mui/material/AppBar'; -import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; +import IconButton from '@mui/material/IconButton'; +import { SxProps, Theme } from '@mui/material/styles'; import Toolbar from '@mui/material/Toolbar'; import Typography from '@mui/material/Typography'; import { useRouter } from 'next/router'; import { ReactNode, useEffect, useState } from 'react'; +import { ArrowUpRightIcon } from 'src/components/icons/ArrowUpRightIcon'; import { MarketLogo } from 'src/components/MarketSwitcher'; import { Link } from 'src/components/primitives/Link'; import { useRootStore } from 'src/store/root'; @@ -37,11 +39,20 @@ interface RouteCampaigns { interface TopBarNotifyProps { campaigns: NetworkCampaigns; routeCampaigns?: RouteCampaigns; + /** + * Showcase/preview mode (e.g. /dev/components): force the banner visible regardless of the + * per-chain localStorage dismissal state, skip persisting any dismissal, and fall back to the + * first configured campaign when none matches the current chain. Never set in production. + */ + preview?: boolean; } -export default function TopBarNotify({ campaigns, routeCampaigns }: TopBarNotifyProps) { +export default function TopBarNotify({ + campaigns, + routeCampaigns, + preview = false, +}: TopBarNotifyProps) { const { breakpoints } = useTheme(); - const md = useMediaQuery(breakpoints.down('md')); const sm = useMediaQuery(breakpoints.down('sm')); const router = useRouter(); @@ -52,10 +63,14 @@ export default function TopBarNotify({ campaigns, routeCampaigns }: TopBarNotify return campaigns[currentChainId] || null; }; - const currentCampaign = routeCampaigns?.[router.pathname] ?? getCurrentCampaign() ?? null; + const currentCampaign = + routeCampaigns?.[router.pathname] ?? + getCurrentCampaign() ?? + (preview ? Object.values(campaigns)[0] ?? null : null); const [showWarning, setShowWarning] = useState(() => { if (!currentCampaign) return false; + if (preview) return true; const storedBannerVersion = localStorage.getItem(`bannerVersion_${currentChainId}`); const warningBarOpen = localStorage.getItem(`warningBarOpen_${currentChainId}`); @@ -68,7 +83,7 @@ export default function TopBarNotify({ campaigns, routeCampaigns }: TopBarNotify }); useEffect(() => { - if (!currentCampaign) return; + if (!currentCampaign || preview) return; const storedBannerVersion = localStorage.getItem(`bannerVersion_${currentChainId}`); @@ -77,7 +92,7 @@ export default function TopBarNotify({ campaigns, routeCampaigns }: TopBarNotify localStorage.setItem(`warningBarOpen_${currentChainId}`, 'true'); setShowWarning(true); } - }, [currentCampaign, currentChainId]); + }, [currentCampaign, currentChainId, preview]); // If no campaign is configured for the current network, don't show anything if (!currentCampaign) { @@ -85,7 +100,9 @@ export default function TopBarNotify({ campaigns, routeCampaigns }: TopBarNotify } const handleClose = () => { - localStorage.setItem(`warningBarOpen_${currentChainId}`, 'false'); + if (!preview) { + localStorage.setItem(`warningBarOpen_${currentChainId}`, 'false'); + } setShowWarning(false); }; @@ -117,120 +134,128 @@ export default function TopBarNotify({ campaigns, routeCampaigns }: TopBarNotify }; // Note: hide warnings when mobile menu is open - if (mobileDrawerOpen) return null; + if (mobileDrawerOpen && !preview) return null; + + // Resolve the single call-to-action. A URL action becomes a real external (proper anchor + // semantics; the primitive adds target=_blank + rel=noopener); any other action type — or a + // function-style learnMoreLink — falls back to a click handler. + const { buttonAction, learnMoreLink } = currentCampaign; + const ctaHref = + buttonAction?.type === 'url' + ? buttonAction.value + : typeof learnMoreLink === 'string' + ? learnMoreLink + : undefined; + const ctaOnClick = + buttonAction && buttonAction.type !== 'url' + ? handleButtonAction + : typeof learnMoreLink === 'function' + ? learnMoreLink + : undefined; + const ctaLabel = currentCampaign.buttonText ?? 'Learn more'; + const showCta = Boolean(ctaHref || ctaOnClick); + + // "Try it out" text link — purple-2, Base type, with the arrow 0.25rem after the label. Shared + // by both the (URL) and - ) - ) : null} - - - {sm && currentCampaign.buttonText && currentCampaign.buttonAction ? ( - + + {currentCampaign.notifyText} + + {currentCampaign.customIcon ? currentCampaign.customIcon : null} + + {currentCampaign.icon && !sm ? ( + ) : null} - - - - {!sm && currentCampaign.buttonText && currentCampaign.buttonAction ? ( - - ) : null} - - @@ -95,50 +141,21 @@ export const NavItems = ({ setOpen }: NavItemsProps) => { ))} - - {md ? ( - + {mdlg ? ( + sGHO} + active={isActive(ROUTES.sGHO)} onClick={() => handleClick('sGHO', true)} - > - sGHO - + /> ) : ( @@ -147,53 +164,61 @@ export const NavItems = ({ setOpen }: NavItemsProps) => { - {md ? ( + {mdlg ? ( <> - handleClick('Staking', true)} + setStakingOpen((v) => !v)} + sx={[ + mobileNavItemSx, + { cursor: 'pointer', justifyContent: 'space-between' }, + !stakingOpen && + (isActive(ROUTES.staking) || isActive(ROUTES.safetyModule)) && + activeBarSx, + ]} > - Staking - + + Staking + + + + + + + + Umbrella} + active={isActive(ROUTES.staking)} + indent + onClick={() => handleClick('Staking', true)} + /> + Safety Module} + active={isActive(ROUTES.safetyModule)} + indent + onClick={() => handleClick('Safety Module', true)} + /> + + ) : ( )} - - {md && ( - - handleClick('Safety Module', true)} - > - Safety Module - - - )} - - - - ); }; diff --git a/src/layouts/components/SettingSwitchRow.tsx b/src/layouts/components/SettingSwitchRow.tsx new file mode 100644 index 0000000000..699ffee84a --- /dev/null +++ b/src/layouts/components/SettingSwitchRow.tsx @@ -0,0 +1,38 @@ +import { Box, ListItem, ListItemText, MenuItem, Switch } from '@mui/material'; +import { ReactNode } from 'react'; + +interface SettingSwitchRowProps { + component?: typeof MenuItem | typeof ListItem; + label: ReactNode; + checked: boolean; + onClick: () => void; + // Optional switch-specific click (e.g. analytics) — fires in addition to the row `onClick`. + onSwitchClick?: () => void; +} + +// A settings-menu row: label on the left, toggle on the right. Shared by the dark-mode / +// shield / testnet switchers, rendered in both the desktop settings menu and the mobile drawer. +export const SettingSwitchRow = ({ + component = ListItem, + label, + checked, + onClick, + onSwitchClick, +}: SettingSwitchRowProps) => ( + + {label} + + +); diff --git a/src/layouts/components/ShieldSwitcher.tsx b/src/layouts/components/ShieldSwitcher.tsx index 555b4f6faa..70b003f734 100644 --- a/src/layouts/components/ShieldSwitcher.tsx +++ b/src/layouts/components/ShieldSwitcher.tsx @@ -1,8 +1,10 @@ import { Trans } from '@lingui/macro'; -import { Box, FormControlLabel, ListItem, ListItemText, MenuItem, Switch } from '@mui/material'; +import { ListItem, MenuItem } from '@mui/material'; import { useRootStore } from 'src/store/root'; import { SETTINGS } from 'src/utils/events'; +import { SettingSwitchRow } from './SettingSwitchRow'; + interface ShieldSwitcherProps { component?: typeof MenuItem | typeof ListItem; } @@ -13,34 +15,15 @@ export const ShieldSwitcher = ({ component = ListItem }: ShieldSwitcherProps) => const trackEvent = useRootStore((store) => store.trackEvent); return ( - Aave Shield} + checked={shieldEnabled} onClick={() => { const newValue = !shieldEnabled; toggleShield(); trackEvent(SETTINGS.SHIELD_TOGGLE, { enabled: newValue }); }} - sx={{ - color: { xs: '#F1F1F3', md: 'text.primary' }, - py: { xs: 1.5, md: 2 }, - }} - > - - Aave Shield - - - } - label={shieldEnabled ? 'On' : 'Off'} - labelPlacement="start" - /> - + /> ); }; diff --git a/src/layouts/components/StakingMenu.tsx b/src/layouts/components/StakingMenu.tsx index d46cd7c7e5..4de2dc32dd 100644 --- a/src/layouts/components/StakingMenu.tsx +++ b/src/layouts/components/StakingMenu.tsx @@ -1,13 +1,20 @@ -import { ChevronDownIcon } from '@heroicons/react/outline'; import { Trans } from '@lingui/macro'; -import { Button, SvgIcon, Typography } from '@mui/material'; +import { Button, ListItemText, SvgIcon, Typography } from '@mui/material'; import Menu from '@mui/material/Menu'; import MenuItem from '@mui/material/MenuItem'; +import { clsx } from 'clsx'; +import { useRouter } from 'next/router'; import React from 'react'; +import { ChevronDownIcon } from 'src/components/icons/ChevronDownIcon'; import { useRootStore } from 'src/store/root'; import { NAV_BAR } from 'src/utils/events'; +import { onAccent } from 'src/utils/figmaColors'; import { Link, ROUTES } from '../../components/primitives/Link'; +import { NAV_LINK_PADDING_X, NAV_LINK_PADDING_Y, navLinkSx } from './navLinkSx'; + +const CHEVRON_GAP = '0.25rem'; +const CHEVRON_SIZE = '16px'; interface StakingMenuProps { isMobile?: boolean; @@ -16,6 +23,10 @@ interface StakingMenuProps { export function StakingMenu({ isMobile = false, onClose }: StakingMenuProps) { const trackEvent = useRootStore((store) => store.trackEvent); + const router = useRouter(); + // The trigger isn't a Link, so it never gets the route-aware `active` class on its own. + // Mark it active when the current route is one of the menu's destinations. + const isActive = router.pathname === ROUTES.staking || router.pathname === ROUTES.safetyModule; const [anchorEl, setAnchorEl] = React.useState(null); const open = Boolean(anchorEl); @@ -42,7 +53,7 @@ export function StakingMenu({ isMobile = false, onClose }: StakingMenuProps) { component={Link} href={ROUTES.staking} variant="h2" - color="#F1F1F3" + color={onAccent} sx={{ width: '100%', p: 4 }} onClick={() => handleMenuItemClick('Staking')} > @@ -52,7 +63,7 @@ export function StakingMenu({ isMobile = false, onClose }: StakingMenuProps) { component={Link} href={ROUTES.safetyModule} variant="h2" - color="#F1F1F3" + color={onAccent} sx={{ width: '100%', p: 4, pl: 6 }} onClick={() => handleMenuItemClick('Safety Module')} > @@ -67,37 +78,23 @@ export function StakingMenu({ isMobile = false, onClose }: StakingMenuProps) { @@ -88,13 +88,13 @@ export function BridgeWrapper() { > {!downToSm && ( - + Asset - + Source @@ -104,13 +104,13 @@ export function BridgeWrapper() { - + Age - + Status diff --git a/src/modules/bridge/TransactionListItemLoader.tsx b/src/modules/bridge/TransactionListItemLoader.tsx index b9612d6c14..23ed470cac 100644 --- a/src/modules/bridge/TransactionListItemLoader.tsx +++ b/src/modules/bridge/TransactionListItemLoader.tsx @@ -14,7 +14,7 @@ export const TransactionListItemLoader = () => { - + @@ -24,18 +24,18 @@ export const TransactionListItemLoader = () => { - + - + - + diff --git a/src/modules/dashboard/DashboardContentNoData.tsx b/src/modules/dashboard/DashboardContentNoData.tsx index c092a77250..fe9302d5e3 100644 --- a/src/modules/dashboard/DashboardContentNoData.tsx +++ b/src/modules/dashboard/DashboardContentNoData.tsx @@ -8,7 +8,7 @@ interface DashboardContentNoDataProps { export const DashboardContentNoData = ({ text }: DashboardContentNoDataProps) => { return ( - {text} + {text} ); }; diff --git a/src/modules/dashboard/DashboardContentWrapper.tsx b/src/modules/dashboard/DashboardContentWrapper.tsx index a931aadc6b..d25ad0d795 100644 --- a/src/modules/dashboard/DashboardContentWrapper.tsx +++ b/src/modules/dashboard/DashboardContentWrapper.tsx @@ -1,11 +1,6 @@ import { ChainId } from '@aave/contract-helpers'; -import { Trans } from '@lingui/macro'; -import { Box, Button, useMediaQuery, useTheme } from '@mui/material'; -import { useRouter } from 'next/router'; -import { ROUTES } from 'src/components/primitives/Link'; -import { useWeb3Context } from 'src/libs/hooks/useWeb3Context'; +import { Box, useMediaQuery, useTheme } from '@mui/material'; import { useRootStore } from 'src/store/root'; -import { AUTH } from 'src/utils/events'; import { BorrowAssetsList } from './lists/BorrowAssetsList/BorrowAssetsList'; import { BorrowedPositionsList } from './lists/BorrowedPositionsList/BorrowedPositionsList'; @@ -18,15 +13,10 @@ interface DashboardContentWrapperProps { export const DashboardContentWrapper = ({ isBorrow }: DashboardContentWrapperProps) => { const { breakpoints } = useTheme(); - const { currentAccount } = useWeb3Context(); - const router = useRouter(); - const trackEvent = useRootStore((store) => store.trackEvent); const currentMarketData = useRootStore((store) => store.currentMarketData); const isDesktop = useMediaQuery(breakpoints.up('lg')); - const paperWidth = isDesktop ? 'calc(50% - 8px)' : '100%'; - - const downToLg = useMediaQuery(breakpoints.down('lg')); + const paperWidth = isDesktop ? 'calc(50% - 1rem)' : '100%'; return ( @@ -46,34 +36,6 @@ export const DashboardContentWrapper = ({ isBorrow }: DashboardContentWrapperPro width: paperWidth, }} > - {currentAccount && !isBorrow && downToLg && ( - - - - )} - @@ -86,29 +48,6 @@ export const DashboardContentWrapper = ({ isBorrow }: DashboardContentWrapperPro width: paperWidth, }} > - {currentAccount && ( - - - - )} - diff --git a/src/modules/dashboard/DashboardEModeButton.tsx b/src/modules/dashboard/DashboardEModeButton.tsx index 57acebd969..73ca6966e7 100644 --- a/src/modules/dashboard/DashboardEModeButton.tsx +++ b/src/modules/dashboard/DashboardEModeButton.tsx @@ -7,6 +7,7 @@ import { useAppDataContext } from 'src/hooks/app-data-provider/useAppDataProvide import { useModalContext } from 'src/hooks/useModal'; import { useRootStore } from 'src/store/root'; import { DASHBOARD, GENERAL } from 'src/utils/events'; +import { figVars } from 'src/utils/figmaColors'; import { replaceUnderscoresWithSpaces } from 'src/utils/utils'; import LightningBoltGradient from '/public/lightningBoltGradient.svg'; @@ -53,7 +54,7 @@ export const DashboardEModeButton = ({ userEmodeCategoryId }: DashboardEModeButt e.stopPropagation(); }} > - + E-Mode @@ -64,8 +65,8 @@ export const DashboardEModeButton = ({ userEmodeCategoryId }: DashboardEModeButt }} data-cy={`emode-open`} size="small" - variant="outlined" - sx={(theme) => ({ + variant="tertiary" + sx={{ ml: 1, borderRadius: '4px', p: 0, @@ -76,38 +77,39 @@ export const DashboardEModeButton = ({ userEmodeCategoryId }: DashboardEModeButt right: -1, bottom: -1, top: -1, - background: isEModeDisabled ? 'transparent' : theme.palette.gradients.aaveGradient, + background: isEModeDisabled ? 'transparent' : figVars['purple-1'], borderRadius: '4px', }, - })} + }} > ({ + sx={{ display: 'inline-flex', alignItems: 'center', position: 'relative', zIndex: 1, bgcolor: isEModeDisabled ? open - ? theme.palette.background.disabled - : theme.palette.background.surface - : theme.palette.background.paper, + ? figVars['bg-6'] + : 'transparent' + : figVars['surface-elevated'], px: '4px', borderRadius: '4px', - })} + height: '100%', + }} > {isEModeDisabled ? : } {isEModeDisabled ? ( - + ) : ( @@ -142,17 +144,17 @@ export const DashboardEModeButton = ({ userEmodeCategoryId }: DashboardEModeButt {!isEModeDisabled && ( - + Asset category ({ + sx={{ p: 2, mb: 3, borderRadius: '6px', - border: `1px solid ${theme.palette.divider}`, - })} + border: `1px solid ${figVars['border-2']}`, + }} > - + @@ -192,14 +194,14 @@ export const DashboardEModeButton = ({ userEmodeCategoryId }: DashboardEModeButt )} - + E-Mode increases your LTV for a selected category of assets.{' '} Learn more @@ -209,7 +211,8 @@ export const DashboardEModeButton = ({ userEmodeCategoryId }: DashboardEModeButt {isEModeDisabled ? ( - + )} - + Learn more @@ -81,11 +82,7 @@ export const LiquidationRiskParametresInfoModal = ({ } topValue={ - + } bottomText={ @@ -108,8 +105,8 @@ export const LiquidationRiskParametresInfoModal = ({ value={loanToValue} percent variant="main12" - color="common.white" - symbolsColor="common.white" + color={onAccent} + symbolsColor={onAccent} /> } bottomText={ diff --git a/src/modules/dashboard/LiquidationRiskParametresModal/components/HFContent.tsx b/src/modules/dashboard/LiquidationRiskParametresModal/components/HFContent.tsx index 5543ccf200..3f5adeb07a 100644 --- a/src/modules/dashboard/LiquidationRiskParametresModal/components/HFContent.tsx +++ b/src/modules/dashboard/LiquidationRiskParametresModal/components/HFContent.tsx @@ -45,7 +45,7 @@ export const HFContent = ({ healthFactor }: HFContentProps) => { height: 0, borderStyle: 'solid', borderWidth: '6px 4px 0 4px', - borderColor: `${theme.palette.primary.main} transparent transparent transparent`, + borderColor: `${theme.vars.palette.primary.main} transparent transparent transparent`, content: "''", position: 'absolute', left: dotPosition > 75 ? 'auto' : '50%', diff --git a/src/modules/dashboard/LiquidationRiskParametresModal/components/InfoWrapper.tsx b/src/modules/dashboard/LiquidationRiskParametresModal/components/InfoWrapper.tsx index 9a24075c3a..27f7e48c1a 100644 --- a/src/modules/dashboard/LiquidationRiskParametresModal/components/InfoWrapper.tsx +++ b/src/modules/dashboard/LiquidationRiskParametresModal/components/InfoWrapper.tsx @@ -1,5 +1,6 @@ import { AlertColor, Box, Typography } from '@mui/material'; import { ReactNode } from 'react'; +import { figVars } from 'src/utils/figmaColors'; interface InfoWrapperProps { topValue: ReactNode; @@ -20,8 +21,8 @@ export const InfoWrapper = ({ }: InfoWrapperProps) => { return ( ({ - border: `1px solid ${theme.palette.divider}`, + sx={{ + border: `1px solid ${figVars['border-2']}`, mb: 6, borderRadius: '6px', px: 4, @@ -30,14 +31,14 @@ export const InfoWrapper = ({ '&:last-of-type': { mb: 0, }, - })} + }} > {topTitle} - + {topDescription} @@ -59,7 +60,7 @@ export const InfoWrapper = ({ {children} - + {bottomText} diff --git a/src/modules/dashboard/LiquidationRiskParametresModal/components/LTVContent.tsx b/src/modules/dashboard/LiquidationRiskParametresModal/components/LTVContent.tsx index 09a247c6a0..f0c8180a1d 100644 --- a/src/modules/dashboard/LiquidationRiskParametresModal/components/LTVContent.tsx +++ b/src/modules/dashboard/LiquidationRiskParametresModal/components/LTVContent.tsx @@ -3,6 +3,7 @@ import { Trans } from '@lingui/macro'; import { AlertColor, Box, Typography, useTheme } from '@mui/material'; import { BigNumber } from 'bignumber.js'; import React from 'react'; +import { figVars } from 'src/utils/figmaColors'; import { FormattedNumber } from '../../../../components/primitives/FormattedNumber'; @@ -19,7 +20,7 @@ export const LTVContent = ({ currentLiquidationThreshold, color, }: LTVContentProps) => { - const { palette } = useTheme(); + const { vars } = useTheme(); const LTVLineWidth = valueToBigNumber(loanToValue) .multipliedBy(100) @@ -120,7 +121,7 @@ export const LTVContent = ({ height: 0, borderStyle: 'solid', borderWidth: '6px 4px 0 4px', - borderColor: `${theme.palette.primary.main} transparent transparent transparent`, + borderColor: `${theme.vars.palette.primary.main} transparent transparent transparent`, content: "''", position: 'absolute', left: LTVLineWidth > 75 ? 'auto' : '50%', @@ -146,7 +147,7 @@ export const LTVContent = ({ > - + MAX @@ -168,7 +169,7 @@ export const LTVContent = ({ width: '100%', borderRadius: '1px', position: 'relative', - bgcolor: 'divider', + bgcolor: 'border-2', }} > 100 ? 100 : CurrentLTVLineWidth}%`, maxWidth: '100%', - background: `repeating-linear-gradient(-45deg, ${palette.divider}, ${palette.divider} 4px, ${palette[color].main} 4px, ${palette[color].main} 7px)`, + background: `repeating-linear-gradient(-45deg, ${figVars['border-2']}, ${figVars['border-2']} 4px, ${vars.palette[color].main} 4px, ${vars.palette[color].main} 7px)`, }} /> )} diff --git a/src/modules/dashboard/lists/BorrowAssetsList/BorrowAssetsList.tsx b/src/modules/dashboard/lists/BorrowAssetsList/BorrowAssetsList.tsx index 0fcd634176..77b3b2a2b6 100644 --- a/src/modules/dashboard/lists/BorrowAssetsList/BorrowAssetsList.tsx +++ b/src/modules/dashboard/lists/BorrowAssetsList/BorrowAssetsList.tsx @@ -1,14 +1,13 @@ import { API_ETH_MOCK_ADDRESS } from '@aave/contract-helpers'; import { USD_DECIMALS, valueToBigNumber } from '@aave/math-utils'; import { Trans } from '@lingui/macro'; -import { Box, Typography, useMediaQuery, useTheme } from '@mui/material'; +import { Alert, Box, Typography, useMediaQuery, useTheme } from '@mui/material'; import { Fragment, useState } from 'react'; import { AssetCategoryMultiSelect } from 'src/components/AssetCategoryMultiselect'; import { VariableAPYTooltip } from 'src/components/infoTooltips/VariableAPYTooltip'; import { ListColumn } from 'src/components/lists/ListColumn'; import { ListHeaderTitle } from 'src/components/lists/ListHeaderTitle'; import { ListHeaderWrapper } from 'src/components/lists/ListHeaderWrapper'; -import { Warning } from 'src/components/primitives/Warning'; import { AssetCapsProvider } from 'src/hooks/useAssetCaps'; import { useCoingeckoCategories } from 'src/hooks/useCoinGeckoCategories'; import { AssetCategory, isAssetInCategoryDynamic } from 'src/modules/markets/utils/assetCategories'; @@ -217,7 +216,7 @@ export const BorrowAssetsList = () => { width: '100%', alignItems: 'center', justifyContent: 'space-between', - mr: 2, + mr: '0.62rem', }} > @@ -256,46 +255,46 @@ export const BorrowAssetsList = () => { )} {user?.healthFactor !== '-1' && Number(user?.healthFactor) <= 1.1 && ( - + Be careful - You are very close to liquidation. Consider depositing more collateral or paying down some of your borrowed positions - + )} {!borrowDisabled && ( <> {user?.isInIsolationMode && ( - + Borrowing power and assets are limited due to Isolation mode. Learn More - + )} {user?.isInEmode && ( - + In E-Mode some assets are not borrowable. Exit E-Mode to get access to all assets - + )} {user?.totalCollateralMarketReferenceCurrency === '0' && ( - + To borrow you need to supply any asset to be used as collateral. - + )} )} {borrowDisabled && ( - + We couldn't find any assets related to your search. Try again with a different category. - + )} diff --git a/src/modules/dashboard/lists/BorrowAssetsList/BorrowAssetsListItem.tsx b/src/modules/dashboard/lists/BorrowAssetsList/BorrowAssetsListItem.tsx index c2debbe689..270d3aacdf 100644 --- a/src/modules/dashboard/lists/BorrowAssetsList/BorrowAssetsListItem.tsx +++ b/src/modules/dashboard/lists/BorrowAssetsList/BorrowAssetsListItem.tsx @@ -95,8 +95,9 @@ export const BorrowAssetsListItem = ({ ) : ( - )} - @@ -236,7 +237,7 @@ const BorrowedPositionsListItemMobile = ({ incentives={incentives} address={variableDebtTokenAddress} symbol={symbol} - variant="secondary14" + variant="h5" market={currentMarket} protocolAction={ProtocolAction.borrow} /> @@ -260,7 +261,7 @@ const BorrowedPositionsListItemMobile = ({ )} ) : ( )} - - - + Swap - + Details @@ -384,12 +378,7 @@ export const SupplyAssetsListItemMobile = ({ justifyContent: 'center', }} > - + @@ -432,7 +421,7 @@ export const SupplyAssetsListItemMobile = ({ incentives={aIncentivesData} address={aTokenAddress} symbol={symbol} - variant="secondary14" + variant="h5" market={currentMarket} protocolAction={ProtocolAction.supply} /> @@ -463,7 +452,7 @@ export const SupplyAssetsListItemMobile = ({ fullWidth /> + ))} + + + + + ))} + + {(['contained', 'outlined'] as const).map((colorVariant) => ( + + {COLORS.map((color) => ( + + ))} + + ))} + +); diff --git a/src/modules/dev/ComponentShowcase/components/ColorSpecimen/index.tsx b/src/modules/dev/ComponentShowcase/components/ColorSpecimen/index.tsx new file mode 100644 index 0000000000..1aa22785e4 --- /dev/null +++ b/src/modules/dev/ComponentShowcase/components/ColorSpecimen/index.tsx @@ -0,0 +1,95 @@ +import { Box, Typography } from '@mui/material'; +import { FigmaColorName, figVars } from 'src/utils/figmaColors'; + +import { ColorRole } from '../../utils/catalog'; +import { Swatch } from '../Swatch'; +import { TokenHexLabel } from '../TokenHexLabel'; + +const SPECIMEN_WIDTH = 220; + +/** + * Renders a color token the way it's meant to be used: `text` colors as text, `bg` as a surface, + * `border` as a divider inside a card, `shadow` as a drop shadow. Anything without a single obvious + * use (`swatch`) falls back to the plain color chip. + */ +export const ColorSpecimen = ({ role, name }: { role: ColorRole; name: FigmaColorName }) => { + const value = figVars[name]; + + if (role === 'text') { + // Framed on a surface so the sample sits with its label instead of floating on the page. + return ( + + + + The quick brown fox + + + + + ); + } + + if (role === 'bg') { + return ( + + + + + ); + } + + if (role === 'border') { + // A two-row card split by the token, so it reads as a divider/separator. + return ( + + + + + + + + + ); + } + + if (role === 'shadow') { + return ( + + + + + ); + } + + return ; +}; diff --git a/src/modules/dev/ComponentShowcase/components/ColorsSection/index.tsx b/src/modules/dev/ComponentShowcase/components/ColorsSection/index.tsx new file mode 100644 index 0000000000..a9163147a6 --- /dev/null +++ b/src/modules/dev/ComponentShowcase/components/ColorsSection/index.tsx @@ -0,0 +1,27 @@ +import { Box, Typography } from '@mui/material'; + +import { COLOR_GROUPS } from '../../utils/catalog'; +import { ColorSpecimen } from '../ColorSpecimen'; +import { Section } from '../Section'; + +export const ColorsSection = () => { + return ( +
+ {COLOR_GROUPS.map((group) => ( + + + {group.title} + + + {group.names.map((name) => ( + + ))} + + + ))} +
+ ); +}; diff --git a/src/modules/dev/ComponentShowcase/components/DataPrimitivesSection/index.tsx b/src/modules/dev/ComponentShowcase/components/DataPrimitivesSection/index.tsx new file mode 100644 index 0000000000..5ccfb3cb63 --- /dev/null +++ b/src/modules/dev/ComponentShowcase/components/DataPrimitivesSection/index.tsx @@ -0,0 +1,87 @@ +import { Box } from '@mui/material'; +import { useState } from 'react'; +import { FormattedNumber } from 'src/components/primitives/FormattedNumber'; +import { Row } from 'src/components/primitives/Row'; +import { TokenIcon } from 'src/components/primitives/TokenIcon'; +import { + DetailsCollateralLine, + DetailsCooldownLine, + DetailsHFLine, + DetailsNumberLine, + DetailsNumberLineWithSub, + DetailsTextLine, + DetailsUnwrapSwitch, + TxModalDetails, +} from 'src/components/transactions/FlowCommons/TxModalDetails'; +import { CollateralType } from 'src/helpers/types'; + +import { Section } from '../Section'; +import { Specimen } from '../Specimen'; + +const TOKENS = ['AAVE', 'ETH', 'USDC', 'DAI', 'GHO', 'WBTC']; + +const UnwrapDemo = () => { + const [unwrapped, setUnwrapped] = useState(false); + return ( + + ); +}; + +export const DataPrimitivesSection = () => ( +
+ + + + + + + + + + + + + {TOKENS.map((symbol) => ( + + ))} + + + + + + + + + + + + + + + + + + + + + + + + + + +
+); diff --git a/src/modules/dev/ComponentShowcase/components/EmptyStatesSection/index.tsx b/src/modules/dev/ComponentShowcase/components/EmptyStatesSection/index.tsx new file mode 100644 index 0000000000..2648edb9a5 --- /dev/null +++ b/src/modules/dev/ComponentShowcase/components/EmptyStatesSection/index.tsx @@ -0,0 +1,69 @@ +import { Box, Typography } from '@mui/material'; +import { ReactNode } from 'react'; +import { ConnectWalletPaper } from 'src/components/ConnectWalletPaper'; +import { EmptyStatePaper } from 'src/components/EmptyStatePaper'; +import { SGhoLoggedOutPreview } from 'src/modules/sGho/SGhoLoggedOutPreview'; +import { YourInfoSidebar } from 'src/modules/sGho/YourInfoSidebar'; + +import { Section } from '../Section'; +import { Specimen } from '../Specimen'; + +// A titled sub-group within the section — a full-width band with a subheader and a wrapping +// row of specimens (mirrors the grouping used in ColorsSection). +const Group = ({ title, children }: { title: string; children: ReactNode }) => ( + + + {title} + + + {children} + + +); + +/** + * Live gallery of the app's empty-state UI (connect-wallet prompts and the no-positions + * placeholder). The showcase page never connects a wallet, so these render in their real + * disconnected/empty state off ambient app context — only literal/mock props are supplied. + * + * The Specimen stage is a flex row (children size to content), so wide/card-like empty states are + * wrapped in a full-width box to make them span the stage the way they do on their real page. + */ +export const EmptyStatesSection = () => ( +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+); diff --git a/src/modules/dev/ComponentShowcase/components/FeedbackSection/index.tsx b/src/modules/dev/ComponentShowcase/components/FeedbackSection/index.tsx new file mode 100644 index 0000000000..8974e625db --- /dev/null +++ b/src/modules/dev/ComponentShowcase/components/FeedbackSection/index.tsx @@ -0,0 +1,58 @@ +import { Alert, Box, LinearProgress, Skeleton } from '@mui/material'; +import { CheckBadge } from 'src/components/primitives/CheckBadge'; +import { NoData } from 'src/components/primitives/NoData'; + +import { Section } from '../Section'; +import { Specimen } from '../Specimen'; + +const SEVERITIES = ['error', 'warning', 'info', 'success'] as const; + +export const FeedbackSection = () => ( +
+ + + {SEVERITIES.map((severity) => ( + + This is a {severity} alert. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed + do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, + quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo. + + ))} + + + + + + {SEVERITIES.map((severity) => ( + + This is a {severity} alert. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed + do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, + quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo. + + ))} + + + + + + + + + + + + + + + + + + + + + + + + +
+); diff --git a/src/modules/dev/ComponentShowcase/components/FormControlsSection/index.tsx b/src/modules/dev/ComponentShowcase/components/FormControlsSection/index.tsx new file mode 100644 index 0000000000..3c8d941494 --- /dev/null +++ b/src/modules/dev/ComponentShowcase/components/FormControlsSection/index.tsx @@ -0,0 +1,158 @@ +import { + Box, + Checkbox, + FormControlLabel, + InputAdornment, + MenuItem, + Radio, + RadioGroup, + Select, + SelectChangeEvent, + Switch, + TextField, +} from '@mui/material'; +import { useState } from 'react'; +import { SearchInput } from 'src/components/SearchInput'; + +import { Section } from '../Section'; +import { Specimen } from '../Specimen'; + +// Showcase-only: render Select menus inline (disablePortal) so they inherit the showcase's LOCAL +// `data-mui-color-scheme` box instead of escaping to and following the app's global scheme. +const SELECT_MENU_PROPS = { disablePortal: true } as const; + +// Shared option set for the Select demos below. +const NETWORKS = [ + { value: 'ethereum', label: 'Ethereum' }, + { value: 'base', label: 'Base' }, + { value: 'arbitrum', label: 'Arbitrum' }, +]; + +const networkMenuItems = NETWORKS.map((n) => ( + + {n.label} + +)); + +const SelectDemo = () => { + const [value, setValue] = useState('ethereum'); + return ( + + ); +}; + +const MultiSelectDemo = () => { + const [value, setValue] = useState([]); + return ( + + ); +}; + +export const FormControlsSection = () => ( +
+ + + + + + + USDC }} + /> + + + + + + + + + + + + + + + + } label="With label" /> + + + + + + + + + + + + } label="Market" /> + } label="Limit" /> + } label="Disabled" disabled /> + + + + + + + + + } label="With label" /> + + + + undefined} + wrapperSx={{ width: { xs: '100%', sm: 320 } }} + /> + +
+); diff --git a/src/modules/dev/ComponentShowcase/components/IconsSection/index.tsx b/src/modules/dev/ComponentShowcase/components/IconsSection/index.tsx new file mode 100644 index 0000000000..d3bb16e0ed --- /dev/null +++ b/src/modules/dev/ComponentShowcase/components/IconsSection/index.tsx @@ -0,0 +1,1957 @@ +import { + ArrowCircleRightIcon as OlArrowCircleRightIcon, + ArrowDownIcon as OlArrowDownIcon, + ArrowNarrowRightIcon as OlArrowNarrowRightIcon, + BookOpenIcon as OlBookOpenIcon, + CalendarIcon as OlCalendarIcon, + CheckCircleIcon as OlCheckCircleIcon, + CheckIcon as OlCheckIcon, + ChevronDownIcon as OlChevronDownIcon, + ChevronRightIcon as OlChevronRightIcon, + ChevronUpIcon as OlChevronUpIcon, + ClockIcon as OlClockIcon, + CreditCardIcon as OlCreditCardIcon, + DocumentDownloadIcon as OlDocumentDownloadIcon, + DuplicateIcon as OlDuplicateIcon, + ExclamationCircleIcon as OlExclamationCircleIcon, + ExclamationIcon as OlExclamationIcon, + ExternalLinkIcon as OlExternalLinkIcon, + InformationCircleIcon as OlInformationCircleIcon, + LogoutIcon as OlLogoutIcon, + MenuIcon as OlMenuIcon, + PlusIcon as OlPlusIcon, + QuestionMarkCircleIcon as OlQuestionMarkCircleIcon, + RefreshIcon as OlRefreshIcon, + SearchIcon as OlSearchIcon, + ShieldExclamationIcon as OlShieldExclamationIcon, + SwitchHorizontalIcon as OlSwitchHorizontalIcon, + SwitchVerticalIcon as OlSwitchVerticalIcon, + XIcon as OlXIcon, +} from '@heroicons/react/outline'; +import { + ArrowLeftIcon as SoArrowLeftIcon, + ArrowNarrowRightIcon as SoArrowNarrowRightIcon, + CheckCircleIcon as SoCheckCircleIcon, + CheckIcon as SoCheckIcon, + ChevronRightIcon as SoChevronRightIcon, + CogIcon as SoCogIcon, + DotsHorizontalIcon as SoDotsHorizontalIcon, + DownloadIcon as SoDownloadIcon, + ExclamationIcon as SoExclamationIcon, + ExternalLinkIcon as SoExternalLinkIcon, + EyeIcon as SoEyeIcon, + LightningBoltIcon as SoLightningBoltIcon, + MinusSmIcon as SoMinusSmIcon, + QuestionMarkCircleIcon as SoQuestionMarkCircleIcon, + SearchIcon as SoSearchIcon, + XCircleIcon as SoXCircleIcon, +} from '@heroicons/react/solid'; +import MuiAccessTime from '@mui/icons-material/AccessTime'; +import MuiAddOutlined from '@mui/icons-material/AddOutlined'; +import MuiArrowBackOutlined from '@mui/icons-material/ArrowBackOutlined'; +import MuiArrowDownward from '@mui/icons-material/ArrowDownward'; +import MuiArrowOutward from '@mui/icons-material/ArrowOutward'; +import MuiCheck from '@mui/icons-material/Check'; +import MuiCheckRounded from '@mui/icons-material/CheckRounded'; +import MuiClose from '@mui/icons-material/Close'; +import MuiContentCopy from '@mui/icons-material/ContentCopy'; +import MuiExpandMore from '@mui/icons-material/ExpandMore'; +import MuiGitHub from '@mui/icons-material/GitHub'; +import MuiInstagram from '@mui/icons-material/Instagram'; +import MuiKeyboardArrowDown from '@mui/icons-material/KeyboardArrowDown'; +import MuiKeyboardArrowUp from '@mui/icons-material/KeyboardArrowUp'; +import MuiLaunch from '@mui/icons-material/Launch'; +import MuiLinkedIn from '@mui/icons-material/LinkedIn'; +import MuiLocalGasStation from '@mui/icons-material/LocalGasStation'; +import MuiMoreHoriz from '@mui/icons-material/MoreHoriz'; +import MuiSort from '@mui/icons-material/Sort'; +import MuiStart from '@mui/icons-material/Start'; +import MuiTwitter from '@mui/icons-material/Twitter'; +import MuiWarningAmber from '@mui/icons-material/WarningAmber'; +import MuiX from '@mui/icons-material/X'; +import { Box, Typography } from '@mui/material'; +import { DuneIcon, TikTok } from 'public/icons/footer/icons'; +import { ReactNode } from 'react'; +import { AaveLogo } from 'src/components/icons/AaveLogo'; +import { ArrowUpRightIcon } from 'src/components/icons/ArrowUpRightIcon'; +import { BridgeIcon } from 'src/components/icons/BridgeIcon'; +import { ChevronDownIcon } from 'src/components/icons/ChevronDownIcon'; +import { ChevronRightIcon } from 'src/components/icons/ChevronRightIcon'; +import { ChevronUpDownIcon } from 'src/components/icons/ChevronUpDownIcon'; +import { CloseIcon } from 'src/components/icons/CloseIcon'; +import { DotsHorizontalIcon } from 'src/components/icons/DotsHorizontalIcon'; +import { HeyIcon } from 'src/components/icons/HeyIcon'; +import { LensIcon } from 'src/components/icons/LensIcon'; +import { MinusIcon } from 'src/components/icons/MinusIcon'; +import { SearchIcon } from 'src/components/icons/SearchIcon'; +import { SettingsIcon } from 'src/components/icons/SettingsIcon'; +import { StarIcon } from 'src/components/icons/StarIcon'; +import { SwapIcon } from 'src/components/icons/SwapIcon'; +import { WalletIcon } from 'src/components/icons/WalletIcon'; +import { WalletOutlineIcon } from 'src/components/icons/WalletOutlineIcon'; +import { IncentivesIcon } from 'src/components/incentives/IncentivesButton'; +import { figVars } from 'src/utils/figmaColors'; + +import { Section } from '../Section'; + +// Auto-inventoried from the codebase: EVERY icon in the project. Icon components come first +// (project glyphs, heroicons outline/solid, @mui/icons-material, and bespoke ones), followed by +// every .svg asset under public/icons (token/network/wallet/flag logos, etc.) rendered as . +// Third-party component names are aliased (Ol*/So*/Mui*) to avoid clashing with project icons. +const SIZE = 28; +const heroStyle = { width: SIZE, height: SIZE } as const; +const assetImgStyle = { height: SIZE, width: 'auto', maxWidth: 56 } as const; + +type Entry = { name: string; node: ReactNode }; +type Group = { title: string; icons: Entry[] }; + +const GROUPS: Group[] = [ + { + title: 'Project — src/components/icons', + icons: [ + { name: 'AaveLogo', node: }, + { name: 'ArrowUpRightIcon', node: }, + { name: 'BridgeIcon', node: }, + { name: 'ChevronDownIcon', node: }, + { name: 'ChevronRightIcon', node: }, + { name: 'ChevronUpDownIcon', node: }, + { name: 'CloseIcon', node: }, + { name: 'DotsHorizontalIcon', node: }, + { name: 'HeyIcon', node: }, + { name: 'LensIcon', node: }, + { name: 'MinusIcon', node: }, + { name: 'SearchIcon', node: }, + { name: 'SettingsIcon', node: }, + { name: 'StarIcon', node: }, + { name: 'SwapIcon', node: }, + { name: 'WalletIcon', node: }, + { name: 'WalletOutlineIcon', node: }, + ], + }, + { + title: 'Heroicons — outline', + icons: [ + { name: 'ArrowCircleRightIcon', node: }, + { name: 'ArrowDownIcon', node: }, + { name: 'ArrowNarrowRightIcon', node: }, + { name: 'BookOpenIcon', node: }, + { name: 'CalendarIcon', node: }, + { name: 'CheckCircleIcon', node: }, + { name: 'CheckIcon', node: }, + { name: 'ChevronDownIcon', node: }, + { name: 'ChevronRightIcon', node: }, + { name: 'ChevronUpIcon', node: }, + { name: 'ClockIcon', node: }, + { name: 'CreditCardIcon', node: }, + { name: 'DocumentDownloadIcon', node: }, + { name: 'DuplicateIcon', node: }, + { name: 'ExclamationCircleIcon', node: }, + { name: 'ExclamationIcon', node: }, + { name: 'ExternalLinkIcon', node: }, + { name: 'InformationCircleIcon', node: }, + { name: 'LogoutIcon', node: }, + { name: 'MenuIcon', node: }, + { name: 'PlusIcon', node: }, + { name: 'QuestionMarkCircleIcon', node: }, + { name: 'RefreshIcon', node: }, + { name: 'SearchIcon', node: }, + { name: 'ShieldExclamationIcon', node: }, + { name: 'SwitchHorizontalIcon', node: }, + { name: 'SwitchVerticalIcon', node: }, + { name: 'XIcon', node: }, + ], + }, + { + title: 'Heroicons — solid', + icons: [ + { name: 'ArrowLeftIcon', node: }, + { name: 'ArrowNarrowRightIcon', node: }, + { name: 'CheckCircleIcon', node: }, + { name: 'CheckIcon', node: }, + { name: 'ChevronRightIcon', node: }, + { name: 'CogIcon', node: }, + { name: 'DotsHorizontalIcon', node: }, + { name: 'DownloadIcon', node: }, + { name: 'ExclamationIcon', node: }, + { name: 'ExternalLinkIcon', node: }, + { name: 'EyeIcon', node: }, + { name: 'LightningBoltIcon', node: }, + { name: 'MinusSmIcon', node: }, + { name: 'QuestionMarkCircleIcon', node: }, + { name: 'SearchIcon', node: }, + { name: 'XCircleIcon', node: }, + ], + }, + { + title: 'MUI — @mui/icons-material', + icons: [ + { name: 'AccessTime', node: }, + { name: 'AddOutlined', node: }, + { name: 'ArrowBackOutlined', node: }, + { name: 'ArrowDownward', node: }, + { name: 'ArrowOutward', node: }, + { name: 'Check', node: }, + { name: 'CheckRounded', node: }, + { name: 'Close', node: }, + { name: 'ContentCopy', node: }, + { name: 'ExpandMore', node: }, + { name: 'GitHub', node: }, + { name: 'Instagram', node: }, + { name: 'KeyboardArrowDown', node: }, + { name: 'KeyboardArrowUp', node: }, + { name: 'Launch', node: }, + { name: 'LinkedIn', node: }, + { name: 'LocalGasStation', node: }, + { name: 'MoreHoriz', node: }, + { name: 'Sort', node: }, + { name: 'Start', node: }, + { name: 'Twitter', node: }, + { name: 'WarningAmber', node: }, + { name: 'X', node: }, + ], + }, + { + title: 'Bespoke / brand components', + icons: [ + { name: 'IncentivesIcon', node: }, + { name: 'TikTok', node: }, + { name: 'DuneIcon', node: }, + ], + }, + { + title: 'Assets — Icons (public/icons root)', + icons: [ + { + name: 'discord', + node: {'discord'}, + }, + { + name: 'github', + node: {'github'}, + }, + { + name: 'lens-logo', + node: ( + {'lens-logo'} + ), + }, + { + name: 'lenster', + node: {'lenster'}, + }, + ], + }, + { + title: 'Assets — Public root', + icons: [ + { + name: 'aave-com-logo-header', + node: ( + {'aave-com-logo-header'} + ), + }, + { + name: 'aave-logo-purple', + node: ( + {'aave-logo-purple'} + ), + }, + { + name: 'aave', + node: {'aave'}, + }, + { + name: 'aaveLogo', + node: {'aaveLogo'}, + }, + { + name: 'aave_santa', + node: {'aave_santa'}, + }, + { + name: 'gho-group', + node: {'gho-group'}, + }, + { + name: 'illustration-green', + node: ( + {'illustration-green'} + ), + }, + { + name: 'lightningBoltGradient', + node: ( + {'lightningBoltGradient'} + ), + }, + { + name: 'resting-gho-hat-purple', + node: ( + {'resting-gho-hat-purple'} + ), + }, + { + name: 'sgho-banner', + node: ( + {'sgho-banner'} + ), + }, + ], + }, + { + title: 'Assets — Bridge', + icons: [ + { + name: 'arbitrum', + node: ( + {'arbitrum'} + ), + }, + { + name: 'avalanche', + node: ( + {'avalanche'} + ), + }, + { + name: 'optimism', + node: ( + {'optimism'} + ), + }, + { + name: 'polygon', + node: ( + {'polygon'} + ), + }, + ], + }, + { + title: 'Assets — Flags', + icons: [ + { + name: 'cn', + node: {'cn'}, + }, + { + name: 'el', + node: {'el'}, + }, + { + name: 'en', + node: {'en'}, + }, + { + name: 'es', + node: {'es'}, + }, + { + name: 'fr', + node: {'fr'}, + }, + { + name: 'it', + node: {'it'}, + }, + { + name: 'jp', + node: {'jp'}, + }, + { + name: 'kr', + node: {'kr'}, + }, + { + name: 'pr', + node: {'pr'}, + }, + { + name: 'tr', + node: {'tr'}, + }, + { + name: 'vt', + node: {'vt'}, + }, + ], + }, + { + title: 'Assets — Health factor', + icons: [ + { + name: 'HAL', + node: ( + {'HAL'} + ), + }, + { + name: 'HALHover', + node: ( + {'HALHover'} + ), + }, + ], + }, + { + title: 'Assets — Markets', + icons: [ + { + name: 'aptos', + node: ( + {'aptos'} + ), + }, + { + name: 'etherfi', + node: ( + {'etherfi'} + ), + }, + { + name: 'horizon', + node: ( + {'horizon'} + ), + }, + { + name: 'lido', + node: ( + {'lido'} + ), + }, + { + name: 'linea', + node: ( + {'linea'} + ), + }, + ], + }, + { + title: 'Assets — Network logos', + icons: [ + { + name: 'arbitrum', + node: ( + {'arbitrum'} + ), + }, + { + name: 'avalanche', + node: ( + {'avalanche'} + ), + }, + { + name: 'base', + node: ( + {'base'} + ), + }, + { + name: 'binance', + node: ( + {'binance'} + ), + }, + { + name: 'celo', + node: ( + {'celo'} + ), + }, + { + name: 'ethereum', + node: ( + {'ethereum'} + ), + }, + { + name: 'gnosis', + node: ( + {'gnosis'} + ), + }, + { + name: 'ink', + node: ( + {'ink'} + ), + }, + { + name: 'linea', + node: ( + {'linea'} + ), + }, + { + name: 'mantle', + node: ( + {'mantle'} + ), + }, + { + name: 'megaeth', + node: ( + {'megaeth'} + ), + }, + { + name: 'metis', + node: ( + {'metis'} + ), + }, + { + name: 'monad', + node: ( + {'monad'} + ), + }, + { + name: 'optimism', + node: ( + {'optimism'} + ), + }, + { + name: 'plasma', + node: ( + {'plasma'} + ), + }, + { + name: 'polygon', + node: ( + {'polygon'} + ), + }, + { + name: 'scroll', + node: ( + {'scroll'} + ), + }, + { + name: 'soneium', + node: ( + {'soneium'} + ), + }, + { + name: 'sonic', + node: ( + {'sonic'} + ), + }, + { + name: 'xlayer', + node: ( + {'xlayer'} + ), + }, + { + name: 'zksync', + node: ( + {'zksync'} + ), + }, + ], + }, + { + title: 'Assets — On-ramp services', + icons: [ + { + name: 'transak', + node: ( + {'transak'} + ), + }, + ], + }, + { + title: 'Assets — Other', + icons: [ + { + name: 'aci-black', + node: ( + {'aci-black'} + ), + }, + { + name: 'aci-white', + node: ( + {'aci-white'} + ), + }, + { + name: 'ethena', + node: ( + {'ethena'} + ), + }, + { + name: 'ether.fi', + node: ( + {'ether.fi'} + ), + }, + { + name: 'kernel', + node: ( + {'kernel'} + ), + }, + { + name: 'merkl-black', + node: ( + {'merkl-black'} + ), + }, + { + name: 'merkl-white', + node: ( + {'merkl-white'} + ), + }, + { + name: 'spark', + node: ( + {'spark'} + ), + }, + { + name: 'superfest', + node: ( + {'superfest'} + ), + }, + { + name: 'velora', + node: ( + {'velora'} + ), + }, + { + name: 'zksync-ignite', + node: ( + {'zksync-ignite'} + ), + }, + ], + }, + { + title: 'Assets — Staking', + icons: [ + { + name: 'emission-staking-icon', + node: ( + {'emission-staking-icon'} + ), + }, + { + name: 'trust-staking-icon', + node: ( + {'trust-staking-icon'} + ), + }, + ], + }, + { + title: 'Assets — Token logos', + icons: [ + { + name: '1inch', + node: ( + {'1inch'} + ), + }, + { + name: 'aave-token-round', + node: ( + {'aave-token-round'} + ), + }, + { + name: 'aave', + node: ( + {'aave'} + ), + }, + { + name: 'acred', + node: ( + {'acred'} + ), + }, + { + name: 'ampl', + node: ( + {'ampl'} + ), + }, + { + name: 'arb', + node: {'arb'}, + }, + { + name: 'ausd', + node: ( + {'ausd'} + ), + }, + { + name: 'avax', + node: ( + {'avax'} + ), + }, + { + name: 'bal', + node: {'bal'}, + }, + { + name: 'bat', + node: {'bat'}, + }, + { + name: 'bnb', + node: {'bnb'}, + }, + { + name: 'bpt', + node: {'bpt'}, + }, + { + name: 'btc', + node: {'btc'}, + }, + { + name: 'buidl', + node: ( + {'buidl'} + ), + }, + { + name: 'busd', + node: ( + {'busd'} + ), + }, + { + name: 'cake', + node: ( + {'cake'} + ), + }, + { + name: 'cbbtc', + node: ( + {'cbbtc'} + ), + }, + { + name: 'cbeth', + node: ( + {'cbeth'} + ), + }, + { + name: 'celo', + node: ( + {'celo'} + ), + }, + { + name: 'crv', + node: {'crv'}, + }, + { + name: 'crvusd', + node: ( + {'crvusd'} + ), + }, + { + name: 'cvx', + node: {'cvx'}, + }, + { + name: 'dai', + node: {'dai'}, + }, + { + name: 'default', + node: ( + {'default'} + ), + }, + { + name: 'dpi', + node: {'dpi'}, + }, + { + name: 'ebtc', + node: ( + {'ebtc'} + ), + }, + { + name: 'enj', + node: {'enj'}, + }, + { + name: 'ens', + node: {'ens'}, + }, + { + name: 'eth-round', + node: ( + {'eth-round'} + ), + }, + { + name: 'eth', + node: {'eth'}, + }, + { + name: 'ethfi', + node: ( + {'ethfi'} + ), + }, + { + name: 'ethx', + node: ( + {'ethx'} + ), + }, + { + name: 'eura', + node: ( + {'eura'} + ), + }, + { + name: 'eurc', + node: ( + {'eurc'} + ), + }, + { + name: 'eure', + node: ( + {'eure'} + ), + }, + { + name: 'eurm', + node: ( + {'eurm'} + ), + }, + { + name: 'eurs', + node: ( + {'eurs'} + ), + }, + { + name: 'eusde', + node: ( + {'eusde'} + ), + }, + { + name: 'ezeth', + node: ( + {'ezeth'} + ), + }, + { + name: 'fbtc', + node: ( + {'fbtc'} + ), + }, + { + name: 'fdusd', + node: ( + {'fdusd'} + ), + }, + { + name: 'fei', + node: {'fei'}, + }, + { + name: 'frax', + node: ( + {'frax'} + ), + }, + { + name: 'ftm', + node: {'ftm'}, + }, + { + name: 'fxs', + node: {'fxs'}, + }, + { + name: 'gho', + node: {'gho'}, + }, + { + name: 'ghst', + node: ( + {'ghst'} + ), + }, + { + name: 'gno', + node: {'gno'}, + }, + { + name: 'gnosissdai', + node: ( + {'gnosissdai'} + ), + }, + { + name: 'gusd', + node: ( + {'gusd'} + ), + }, + { + name: 'jaaa', + node: ( + {'jaaa'} + ), + }, + { + name: 'jeur', + node: ( + {'jeur'} + ), + }, + { + name: 'jtrsy', + node: ( + {'jtrsy'} + ), + }, + { + name: 'kbtc', + node: ( + {'kbtc'} + ), + }, + { + name: 'knc', + node: {'knc'}, + }, + { + name: 'kncl', + node: ( + {'kncl'} + ), + }, + { + name: 'lbtc', + node: ( + {'lbtc'} + ), + }, + { + name: 'ldo', + node: {'ldo'}, + }, + { + name: 'lend', + node: ( + {'lend'} + ), + }, + { + name: 'link', + node: ( + {'link'} + ), + }, + { + name: 'lusd', + node: ( + {'lusd'} + ), + }, + { + name: 'mai', + node: {'mai'}, + }, + { + name: 'mana', + node: ( + {'mana'} + ), + }, + { + name: 'maticx', + node: ( + {'maticx'} + ), + }, + { + name: 'mega', + node: ( + {'mega'} + ), + }, + { + name: 'megausd', + node: ( + {'megausd'} + ), + }, + { + name: 'metis', + node: ( + {'metis'} + ), + }, + { + name: 'mglobal', + node: ( + {'mglobal'} + ), + }, + { + name: 'mkr', + node: {'mkr'}, + }, + { + name: 'mnt', + node: {'mnt'}, + }, + { + name: 'mon', + node: {'mon'}, + }, + { + name: 'musd', + node: ( + {'musd'} + ), + }, + { + name: 'okb', + node: {'okb'}, + }, + { + name: 'one', + node: {'one'}, + }, + { + name: 'op', + node: {'op'}, + }, + { + name: 'oseth', + node: ( + {'oseth'} + ), + }, + { + name: 'pax', + node: {'pax'}, + }, + { + name: 'pol', + node: {'pol'}, + }, + { + name: 'bpt', + node: ( + {'bpt'} + ), + }, + { + name: 'guni', + node: ( + {'guni'} + ), + }, + { + name: 'uni', + node: ( + {'uni'} + ), + }, + { + name: 'pteusde', + node: ( + {'pteusde'} + ), + }, + { + name: 'ptsrusde', + node: ( + {'ptsrusde'} + ), + }, + { + name: 'ptsusde', + node: ( + {'ptsusde'} + ), + }, + { + name: 'ptusde', + node: ( + {'ptusde'} + ), + }, + { + name: 'ptusdg', + node: ( + {'ptusdg'} + ), + }, + { + name: 'pyusd', + node: ( + {'pyusd'} + ), + }, + { + name: 'rai', + node: {'rai'}, + }, + { + name: 'ren', + node: {'ren'}, + }, + { + name: 'renfil', + node: ( + {'renfil'} + ), + }, + { + name: 'rep', + node: {'rep'}, + }, + { + name: 'reth', + node: ( + {'reth'} + ), + }, + { + name: 'rez', + node: {'rez'}, + }, + { + name: 'rlusd', + node: ( + {'rlusd'} + ), + }, + { + name: 'rpl', + node: {'rpl'}, + }, + { + name: 'rseth', + node: ( + {'rseth'} + ), + }, + { + name: 's', + node: {'s'}, + }, + { + name: 'savax', + node: ( + {'savax'} + ), + }, + { + name: 'scr', + node: {'scr'}, + }, + { + name: 'sd', + node: {'sd'}, + }, + { + name: 'sdai', + node: ( + {'sdai'} + ), + }, + { + name: 'seth', + node: ( + {'seth'} + ), + }, + { + name: 'sgho', + node: ( + {'sgho'} + ), + }, + { + name: 'snx', + node: {'snx'}, + }, + { + name: 'solvbtc', + node: ( + {'solvbtc'} + ), + }, + { + name: 'srusde', + node: ( + {'srusde'} + ), + }, + { + name: 'stcusd', + node: ( + {'stcusd'} + ), + }, + { + name: 'steth', + node: ( + {'steth'} + ), + }, + { + name: 'stg', + node: {'stg'}, + }, + { + name: 'stkaave', + node: ( + {'stkaave'} + ), + }, + { + name: 'stkbpt', + node: ( + {'stkbpt'} + ), + }, + { + name: 'stkbptv2', + node: ( + {'stkbptv2'} + ), + }, + { + name: 'stkgho', + node: ( + {'stkgho'} + ), + }, + { + name: 'stmatic', + node: ( + {'stmatic'} + ), + }, + { + name: 'sts', + node: {'sts'}, + }, + { + name: 'susd', + node: ( + {'susd'} + ), + }, + { + name: 'susde', + node: ( + {'susde'} + ), + }, + { + name: 'sushi', + node: ( + {'sushi'} + ), + }, + { + name: 'syrupusd', + node: ( + {'syrupusd'} + ), + }, + { + name: 'syrupusdc', + node: ( + {'syrupusdc'} + ), + }, + { + name: 'syrupusdt', + node: ( + {'syrupusdt'} + ), + }, + { + name: 'tbtc', + node: ( + {'tbtc'} + ), + }, + { + name: 'teth', + node: ( + {'teth'} + ), + }, + { + name: 'tribe', + node: ( + {'tribe'} + ), + }, + { + name: 'tusd', + node: ( + {'tusd'} + ), + }, + { + name: 'tydroinkpoints', + node: ( + {'tydroinkpoints'} + ), + }, + { + name: 'uni', + node: {'uni'}, + }, + { + name: 'uscc', + node: ( + {'uscc'} + ), + }, + { + name: 'usdbc', + node: ( + {'usdbc'} + ), + }, + { + name: 'usdc', + node: ( + {'usdc'} + ), + }, + { + name: 'usde', + node: ( + {'usde'} + ), + }, + { + name: 'usdg', + node: ( + {'usdg'} + ), + }, + { + name: 'usdm', + node: ( + {'usdm'} + ), + }, + { + name: 'usdp', + node: ( + {'usdp'} + ), + }, + { + name: 'usds', + node: ( + {'usds'} + ), + }, + { + name: 'usdt', + node: ( + {'usdt'} + ), + }, + { + name: 'usdt0', + node: ( + {'usdt0'} + ), + }, + { + name: 'usdtb', + node: ( + {'usdtb'} + ), + }, + { + name: 'usd₮0', + node: ( + {'usd₮0'} + ), + }, + { + name: 'ust', + node: {'ust'}, + }, + { + name: 'ustb', + node: ( + {'ustb'} + ), + }, + { + name: 'usyc', + node: ( + {'usyc'} + ), + }, + { + name: 'vbill', + node: ( + {'vbill'} + ), + }, + { + name: 'wavax', + node: ( + {'wavax'} + ), + }, + { + name: 'wbnb', + node: ( + {'wbnb'} + ), + }, + { + name: 'wbtc', + node: ( + {'wbtc'} + ), + }, + { + name: 'weeth', + node: ( + {'weeth'} + ), + }, + { + name: 'weth', + node: ( + {'weth'} + ), + }, + { + name: 'wftm', + node: ( + {'wftm'} + ), + }, + { + name: 'wmnt', + node: ( + {'wmnt'} + ), + }, + { + name: 'wokb', + node: ( + {'wokb'} + ), + }, + { + name: 'wone', + node: ( + {'wone'} + ), + }, + { + name: 'wpol', + node: ( + {'wpol'} + ), + }, + { + name: 'wrseth', + node: ( + {'wrseth'} + ), + }, + { + name: 'ws', + node: {'ws'}, + }, + { + name: 'wsteth', + node: ( + {'wsteth'} + ), + }, + { + name: 'wxdai', + node: ( + {'wxdai'} + ), + }, + { + name: 'wxpl', + node: ( + {'wxpl'} + ), + }, + { + name: 'xaut', + node: ( + {'xaut'} + ), + }, + { + name: 'xaut0', + node: ( + {'xaut0'} + ), + }, + { + name: 'xbeth', + node: ( + {'xbeth'} + ), + }, + { + name: 'xbtc', + node: ( + {'xbtc'} + ), + }, + { + name: 'xdai', + node: ( + {'xdai'} + ), + }, + { + name: 'xeth', + node: ( + {'xeth'} + ), + }, + { + name: 'xoksol', + node: ( + {'xoksol'} + ), + }, + { + name: 'xpl', + node: {'xpl'}, + }, + { + name: 'xsol', + node: ( + {'xsol'} + ), + }, + { + name: 'xsushi', + node: ( + {'xsushi'} + ), + }, + { + name: 'yfi', + node: {'yfi'}, + }, + { + name: 'zk', + node: {'zk'}, + }, + { + name: 'zrx', + node: {'zrx'}, + }, + ], + }, + { + title: 'Assets — Wallet icons', + icons: [ + { + name: 'browserWallet', + node: ( + {'browserWallet'} + ), + }, + { + name: 'coinbase', + node: ( + {'coinbase'} + ), + }, + { + name: 'frame', + node: ( + {'frame'} + ), + }, + { + name: 'torus', + node: ( + {'torus'} + ), + }, + { + name: 'walletConnect', + node: ( + {'walletConnect'} + ), + }, + ], + }, +]; + +const IconTile = ({ name, node }: Entry) => ( + + + {node} + + + {name} + + +); + +export const IconsSection = () => ( +
+ {GROUPS.map((group) => ( + + + {group.title} ({group.icons.length}) + + + {group.icons.map((icon) => ( + + ))} + + + ))} +
+); diff --git a/src/modules/dev/ComponentShowcase/components/OverlaysSection/index.tsx b/src/modules/dev/ComponentShowcase/components/OverlaysSection/index.tsx new file mode 100644 index 0000000000..91d9acbf1a --- /dev/null +++ b/src/modules/dev/ComponentShowcase/components/OverlaysSection/index.tsx @@ -0,0 +1,82 @@ +import { Button, Menu, MenuItem, Typography } from '@mui/material'; +import { useState } from 'react'; +import { ContentWithTooltip } from 'src/components/ContentWithTooltip'; +import { BasicModal } from 'src/components/primitives/BasicModal'; +import { TextWithTooltip } from 'src/components/TextWithTooltip'; + +import { Section } from '../Section'; +import { Specimen } from '../Specimen'; + +const ModalDemo = () => { + const [open, setOpen] = useState(false); + return ( + <> + + + + Modal title + + + BasicModal renders the Paper "modal" variant plus the themed backdrop and close + icon. + + + + ); +}; + +const MenuDemo = () => { + const [anchorEl, setAnchorEl] = useState(null); + const open = Boolean(anchorEl); + const close = () => setAnchorEl(null); + return ( + <> + {/* aria-expanded lets the pill trigger keep the open/active fill (pillStyle keys off it) + — MUI does not set it automatically for Menu triggers. */} + + + First option + Second option + Third option + + + ); +}; + +export const OverlaysSection = () => ( +
+ + + + + + + + + + Tooltip body content.} + > + + Click me + + + + + + + Explanation of the metric goes here. + + +
+); diff --git a/src/modules/dev/ComponentShowcase/components/Section/index.tsx b/src/modules/dev/ComponentShowcase/components/Section/index.tsx new file mode 100644 index 0000000000..b5f7333f72 --- /dev/null +++ b/src/modules/dev/ComponentShowcase/components/Section/index.tsx @@ -0,0 +1,37 @@ +import { Box, Typography } from '@mui/material'; +import { ReactNode } from 'react'; +import { figVars } from 'src/utils/figmaColors'; + +interface SectionProps { + title: string; + description?: string; + children: ReactNode; +} + +export const Section = ({ title, description, children }: SectionProps) => ( + + + + {title} + + {description && ( + + {description} + + )} + + + {children} + + +); diff --git a/src/modules/dev/ComponentShowcase/components/ShowcaseLayout/index.tsx b/src/modules/dev/ComponentShowcase/components/ShowcaseLayout/index.tsx new file mode 100644 index 0000000000..49fc92ffed --- /dev/null +++ b/src/modules/dev/ComponentShowcase/components/ShowcaseLayout/index.tsx @@ -0,0 +1,186 @@ +import { MenuIcon } from '@heroicons/react/outline'; +import { + Box, + Container, + Drawer, + IconButton, + PaletteMode, + SvgIcon, + Typography, +} from '@mui/material'; +import { useColorScheme } from '@mui/material/styles'; +import { ReactNode, useState } from 'react'; +import { Link } from 'src/components/primitives/Link'; + +import { SHOWCASE_GROUPS, SHOWCASE_SECTIONS } from '../../utils/registry'; +import { ThemeControl } from '../ThemeControl'; + +interface ShowcaseLayoutProps { + activeSlug: string; + children: ReactNode; +} + +const SIDEBAR_WIDTH = 248; + +export const ShowcaseLayout = ({ activeSlug, children }: ShowcaseLayoutProps) => { + const { mode: appMode, systemMode } = useColorScheme(); + + // The showcase runs on its OWN color scheme (seeded once from the app's) so switching it + // here re-declares the CSS variables for this subtree only — via the `data-mui-color-scheme` + // attribute — without flipping the whole app. Colors below use `sx` palette shortcuts, + // which resolve to CSS-var refs and therefore follow that attribute. + const [scheme, setScheme] = useState( + () => (appMode === 'system' ? systemMode : appMode) ?? 'light' + ); + const [mobileNavOpen, setMobileNavOpen] = useState(false); + + // Some sections (page-wide banners) opt out of the max-width content container. + const fullBleed = SHOWCASE_SECTIONS.find((s) => s.slug === activeSlug)?.fullBleed ?? false; + + // One nav block, reused by the desktop sidebar and the mobile drawer. + const nav = ( + <> + + Components + + + {SHOWCASE_GROUPS.map((group, index) => ( + + + {group.label} + + + {group.sections.map((section) => { + const active = section.slug === activeSlug; + return ( + setMobileNavOpen(false)} + sx={{ + display: 'block', + py: 1, + px: 2, + borderRadius: '8px', + color: active ? 'fg-1' : 'fg-2', + backgroundColor: active ? 'selected' : 'transparent', + '&:hover': { + color: 'fg-1', + backgroundColor: active ? 'selected' : 'button-hover', + }, + }} + > + {section.label} + + ); + })} + + ))} + + ); + + return ( + + {/* Persistent sidebar (md and up) */} + + {nav} + + + {/* Mobile drawer (below md). It portals to , outside the local-scheme wrapper above, + so the inner Box re-declares `data-mui-color-scheme` to keep it on the showcase theme. */} + setMobileNavOpen(false)} + sx={{ display: { xs: 'block', md: 'none' } }} + PaperProps={{ sx: { width: SIDEBAR_WIDTH, border: 'none' } }} + > + + {nav} + + + + {/* Content */} + + + + setMobileNavOpen(true)} + sx={{ display: { xs: 'inline-flex', md: 'none' }, ml: -1 }} + > + + + + + + Component showcase + + + + + + + {children} + + + + ); +}; diff --git a/src/modules/dev/ComponentShowcase/components/Specimen/index.tsx b/src/modules/dev/ComponentShowcase/components/Specimen/index.tsx new file mode 100644 index 0000000000..164adce784 --- /dev/null +++ b/src/modules/dev/ComponentShowcase/components/Specimen/index.tsx @@ -0,0 +1,55 @@ +import { Box, Typography } from '@mui/material'; +import { ReactNode } from 'react'; +import { figVars } from 'src/utils/figmaColors'; + +interface SpecimenProps { + label?: string; + fullWidth?: boolean; + // Cross-axis alignment of the controls on the stage row. Defaults to 'center' (best for + // toggles); pass 'flex-start' when items differ in height (e.g. a field with error text) so + // their top edges line up. + align?: 'center' | 'flex-start'; + children: ReactNode; +} + +// A single example: a small uppercase caption above the component, which sits on a +// plain bordered "stage" (no fill) — matching the reference showcase. +export const Specimen = ({ label, fullWidth, align = 'center', children }: SpecimenProps) => ( + + {label && ( + + {label} + + )} + + {children} + + +); diff --git a/src/modules/dev/ComponentShowcase/components/SurfacesSection/index.tsx b/src/modules/dev/ComponentShowcase/components/SurfacesSection/index.tsx new file mode 100644 index 0000000000..413d9db8bd --- /dev/null +++ b/src/modules/dev/ComponentShowcase/components/SurfacesSection/index.tsx @@ -0,0 +1,102 @@ +import { Box, Button, Paper, Typography } from '@mui/material'; +import { ListWrapper } from 'src/components/lists/ListWrapper'; +import { FormattedNumber } from 'src/components/primitives/FormattedNumber'; +import { Row } from 'src/components/primitives/Row'; +import { ReserveOverviewBox } from 'src/components/ReserveOverviewBox'; +import { TopInfoPanel } from 'src/components/TopInfoPanel/TopInfoPanel'; +import { TopInfoPanelItem } from 'src/components/TopInfoPanel/TopInfoPanelItem'; +import { StakeActionBox } from 'src/modules/staking/StakeActionBox'; + +import { Section } from '../Section'; +import { Specimen } from '../Specimen'; + +const PAPER_VARIANTS = ['elevation', 'outlined', 'modal', 'card'] as const; + +export const SurfacesSection = () => ( +
+ {PAPER_VARIANTS.map((variant) => ( + + + Paper {variant} + + + ))} + + + + Card title}> + + + + + + + + + + + + + + + + Showcase panel + + } + > + + + + + + + + + + + + + + + + + + + + + + + + + + + —} + dataCy="showcaseStake" + > + + + + +
+); diff --git a/src/modules/dev/ComponentShowcase/components/Swatch/index.tsx b/src/modules/dev/ComponentShowcase/components/Swatch/index.tsx new file mode 100644 index 0000000000..e89bbcb2a8 --- /dev/null +++ b/src/modules/dev/ComponentShowcase/components/Swatch/index.tsx @@ -0,0 +1,35 @@ +import { Box } from '@mui/material'; +import { FigmaColorName, figVars } from 'src/utils/figmaColors'; + +import { TokenHexLabel } from '../TokenHexLabel'; + +interface SwatchProps { + name: FigmaColorName; + value: string; +} + +// A checkerboard backing so alpha tokens (borders/shadows/scrim) stay visible. +const CHECKERBOARD = { + backgroundImage: + 'linear-gradient(45deg, #c4c4c4 25%, transparent 25%), linear-gradient(-45deg, #c4c4c4 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #c4c4c4 75%), linear-gradient(-45deg, transparent 75%, #c4c4c4 75%)', + backgroundSize: '12px 12px', + backgroundPosition: '0 0, 0 6px, 6px -6px, -6px 0px', +}; + +export const Swatch = ({ name, value }: SwatchProps) => ( + + + + + + +); diff --git a/src/modules/dev/ComponentShowcase/components/ThemeControl/index.tsx b/src/modules/dev/ComponentShowcase/components/ThemeControl/index.tsx new file mode 100644 index 0000000000..b127d68324 --- /dev/null +++ b/src/modules/dev/ComponentShowcase/components/ThemeControl/index.tsx @@ -0,0 +1,30 @@ +import { Box, Button, PaletteMode, Typography } from '@mui/material'; + +interface ThemeControlProps { + mode: PaletteMode; + onChange: (mode: PaletteMode) => void; +} + +// Segmented Light/Dark control for the showcase's local theme. Uses the themed +// Button variants so it reads natively in whichever mode is active. +export const ThemeControl = ({ mode, onChange }: ThemeControlProps) => ( + + + Theme + + + {(['light', 'dark'] as const).map((value) => ( + + ))} + + +); diff --git a/src/modules/dev/ComponentShowcase/components/TogglesBadgesSection/index.tsx b/src/modules/dev/ComponentShowcase/components/TogglesBadgesSection/index.tsx new file mode 100644 index 0000000000..ad56a5de20 --- /dev/null +++ b/src/modules/dev/ComponentShowcase/components/TogglesBadgesSection/index.tsx @@ -0,0 +1,73 @@ +import { Box, Typography } from '@mui/material'; +import { useState } from 'react'; +import { BadgeSize, ExclamationBadge } from 'src/components/badges/ExclamationBadge'; +import { StyledTxModalToggleButton } from 'src/components/StyledToggleButton'; +import { StyledTxModalToggleGroup } from 'src/components/StyledToggleButtonGroup'; + +import { Section } from '../Section'; +import { Specimen } from '../Specimen'; + +interface ToggleOption { + value: string; + label: string; + disabled?: boolean; +} + +const ToggleDemo = ({ options, initial }: { options: ToggleOption[]; initial: string }) => { + const [value, setValue] = useState(initial); + return ( + v && setValue(v)}> + {options.map((o) => ( + + {o.label} + + ))} + + ); +}; + +export const TogglesBadgesSection = () => ( +
+ + + + + + + + + + + + + + + + + + + + + + +
+); diff --git a/src/modules/dev/ComponentShowcase/components/TokenHexLabel/index.tsx b/src/modules/dev/ComponentShowcase/components/TokenHexLabel/index.tsx new file mode 100644 index 0000000000..8a42e3f38e --- /dev/null +++ b/src/modules/dev/ComponentShowcase/components/TokenHexLabel/index.tsx @@ -0,0 +1,33 @@ +import { Typography } from '@mui/material'; +import { FigmaColorName } from 'src/utils/figmaColors'; +import { darkScheme } from 'src/utils/theme'; + +import { HEX_TEXT, tokenHex } from '../../utils/tokenHex'; + +// The scheme being rendered gets fg-2, the other fg-4 — so it's unambiguous which value the swatch +// above is actually painting, while both stay readable for checking against Figma without toggling. +// Hoisted: neither depends on props, and every swatch on the colors page renders two of them. +const ACTIVE = { ...HEX_TEXT, display: 'block', color: 'fg-2', ...darkScheme({ color: 'fg-4' }) }; +const INACTIVE = { ...HEX_TEXT, display: 'block', color: 'fg-4', ...darkScheme({ color: 'fg-2' }) }; + +/** + * Token name plus BOTH modes' source values. Shared by every specimen that labels a color token, so + * the showcase reports hexes one way instead of one way per component. + */ +export const TokenHexLabel = ({ name }: { name: FigmaColorName }) => { + const { light, dark } = tokenHex(name); + + return ( + <> + + {name} + + + {light} + + + {dark} + + + ); +}; diff --git a/src/modules/dev/ComponentShowcase/components/TypographySection/index.tsx b/src/modules/dev/ComponentShowcase/components/TypographySection/index.tsx new file mode 100644 index 0000000000..cdba8388b2 --- /dev/null +++ b/src/modules/dev/ComponentShowcase/components/TypographySection/index.tsx @@ -0,0 +1,17 @@ +import { Typography } from '@mui/material'; + +import { TYPOGRAPHY_VARIANTS } from '../../utils/catalog'; +import { Section } from '../Section'; +import { Specimen } from '../Specimen'; + +export const TypographySection = () => ( +
+ {TYPOGRAPHY_VARIANTS.map((variant) => ( + + + The quick brown fox jumps over the lazy dog — 1234567890 + + + ))} +
+); diff --git a/src/modules/dev/ComponentShowcase/utils/catalog.ts b/src/modules/dev/ComponentShowcase/utils/catalog.ts new file mode 100644 index 0000000000..605694b6d0 --- /dev/null +++ b/src/modules/dev/ComponentShowcase/utils/catalog.ts @@ -0,0 +1,58 @@ +import { TypographyProps } from '@mui/material'; +import { FigmaColorName } from 'src/utils/figmaColors'; + +type TypographyVariant = TypographyProps['variant']; + +// The typography variants enabled in the theme. The default MUI variants +// (body1/body2/button/subtitle*/h6/overline) are disabled in theme.tsx, so +// they are intentionally omitted here. +export const TYPOGRAPHY_VARIANTS: TypographyVariant[] = [ + 'display1', + 'h1', + 'h2', + 'h3', + 'h4', + 'h5', + 'subheader1', + 'subheader2', + 'description', + 'caption', + 'secondary21', + 'secondary16', + 'main12', + 'buttonL', + 'buttonM', + 'buttonS', + 'helperText', +]; + +export type ColorRole = 'bg' | 'text' | 'border' | 'shadow' | 'swatch'; + +// Figma color tokens grouped for the showcase. `role` decides how each group is presented — text +// colors as text, backgrounds as surfaces, borders as dividers, shadows as shadows. Names are keys +// of `figmaLight`, so each resolves in both light and dark via the flattened palette tokens. +export const COLOR_GROUPS: { title: string; role: ColorRole; names: FigmaColorName[] }[] = [ + { + title: 'Backgrounds', + role: 'bg', + names: ['bg-max', 'bg-1', 'bg-2', 'bg-3', 'bg-4', 'bg-5', 'bg-6'], + }, + { + title: 'Foreground / Text', + role: 'text', + names: ['fg-max', 'fg-1', 'fg-2', 'fg-3', 'fg-4', 'fg-5'], + }, + { title: 'Borders / dividers', role: 'border', names: ['border-0', 'border-1', 'border-2'] }, + { + title: 'Shadows', + role: 'shadow', + names: [ + 'shadow-low', + 'shadow-medium', + 'shadow-high', + 'shadow-strong', + 'shadow-stroke-1', + 'shadow-stroke-2', + ], + }, +]; diff --git a/src/modules/dev/ComponentShowcase/utils/registry.tsx b/src/modules/dev/ComponentShowcase/utils/registry.tsx new file mode 100644 index 0000000000..5f40ebde88 --- /dev/null +++ b/src/modules/dev/ComponentShowcase/utils/registry.tsx @@ -0,0 +1,118 @@ +import dynamic from 'next/dynamic'; +import { ComponentType } from 'react'; + +export interface ShowcaseSection { + slug: string; + label: string; + group: string; + Component: ComponentType; + /** Opt out of the layout's max-width content container (e.g. full-width page banners). */ + fullBleed?: boolean; +} + +// One entry per route (`/dev/components/`). Each section is lazily loaded so a +// given page only ships its own section's code — keeping every page light. +export const SHOWCASE_SECTIONS: ShowcaseSection[] = [ + { + slug: 'colors', + label: 'Colors', + group: 'Foundations', + Component: dynamic(() => import('../components/ColorsSection').then((m) => m.ColorsSection)), + }, + { + slug: 'typography', + label: 'Typography', + group: 'Foundations', + Component: dynamic(() => + import('../components/TypographySection').then((m) => m.TypographySection) + ), + }, + { + slug: 'icons', + label: 'Icons', + group: 'Foundations', + Component: dynamic(() => import('../components/IconsSection').then((m) => m.IconsSection)), + }, + { + slug: 'buttons', + label: 'Buttons', + group: 'Inputs & actions', + Component: dynamic(() => import('../components/ButtonsSection').then((m) => m.ButtonsSection)), + }, + { + slug: 'form-controls', + label: 'Form controls', + group: 'Inputs & actions', + Component: dynamic(() => + import('../components/FormControlsSection').then((m) => m.FormControlsSection) + ), + }, + { + slug: 'toggles-badges', + label: 'Toggles & badges', + group: 'Inputs & actions', + Component: dynamic(() => + import('../components/TogglesBadgesSection').then((m) => m.TogglesBadgesSection) + ), + }, + { + slug: 'feedback', + label: 'Feedback', + group: 'Feedback & overlays', + Component: dynamic(() => + import('../components/FeedbackSection').then((m) => m.FeedbackSection) + ), + }, + { + slug: 'overlays', + label: 'Overlays & modal', + group: 'Feedback & overlays', + Component: dynamic(() => + import('../components/OverlaysSection').then((m) => m.OverlaysSection) + ), + }, + { + slug: 'empty-states', + label: 'Empty states', + group: 'Feedback & overlays', + Component: dynamic(() => + import('../components/EmptyStatesSection').then((m) => m.EmptyStatesSection) + ), + }, + { + slug: 'surfaces', + label: 'Surfaces & cards', + group: 'Data & surfaces', + Component: dynamic(() => + import('../components/SurfacesSection').then((m) => m.SurfacesSection) + ), + }, + { + slug: 'data-primitives', + label: 'Data primitives', + group: 'Data & surfaces', + Component: dynamic(() => + import('../components/DataPrimitivesSection').then((m) => m.DataPrimitivesSection) + ), + }, + { + slug: 'banners', + label: 'Banners', + group: 'Data & surfaces', + fullBleed: true, + Component: dynamic(() => import('../components/BannersSection').then((m) => m.BannersSection)), + }, +]; + +// Sections grouped for the sidebar, preserving declaration order. +export const SHOWCASE_GROUPS = SHOWCASE_SECTIONS.reduce< + { label: string; sections: ShowcaseSection[] }[] +>((groups, section) => { + const group = groups.find((g) => g.label === section.group); + if (group) { + group.sections.push(section); + } else { + groups.push({ label: section.group, sections: [section] }); + } + return groups; +}, []); diff --git a/src/modules/dev/ComponentShowcase/utils/tokenHex.ts b/src/modules/dev/ComponentShowcase/utils/tokenHex.ts new file mode 100644 index 0000000000..4199bdf355 --- /dev/null +++ b/src/modules/dev/ComponentShowcase/utils/tokenHex.ts @@ -0,0 +1,23 @@ +import { FigmaColorName, pickFigma } from 'src/utils/figmaColors'; + +const LIGHT = pickFigma('light'); +const DARK = pickFigma('dark'); + +/** + * Normalise a token's source value for display: hex uppercased to match how Figma shows it, + * `rgba()`/`hsl()` left exactly as authored. `figmaColors.ts` has mixed casing (`#18181B` next to + * `#0a0a0a`), so without this the same token can read differently on two showcase pages. + */ +const formatColor = (value: string) => (value.startsWith('#') ? value.toUpperCase() : value); + +/** Monospace so hex digits line up when scanning a column of tokens. */ +export const HEX_TEXT = { + fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace', + letterSpacing: 0, +} as const; + +/** Both modes' source values for a token, display-normalised. */ +export const tokenHex = (name: FigmaColorName) => ({ + light: formatColor(LIGHT[name]), + dark: formatColor(DARK[name]), +}); diff --git a/src/modules/faucet/FaucetAssetsList.tsx b/src/modules/faucet/FaucetAssetsList.tsx index f952364f34..86ecce6224 100644 --- a/src/modules/faucet/FaucetAssetsList.tsx +++ b/src/modules/faucet/FaucetAssetsList.tsx @@ -114,7 +114,7 @@ export default function FaucetAssetsList() { {reserve.name} - + {reserve.symbol} @@ -123,15 +123,11 @@ export default function FaucetAssetsList() { {!downToXSM && ( - + )} - + {!currentMarketData.addresses.FAUCET ? ( diff --git a/src/modules/faucet/FaucetMobileItemLoader.tsx b/src/modules/faucet/FaucetMobileItemLoader.tsx index b5dd5efefd..68e9c1fdc5 100644 --- a/src/modules/faucet/FaucetMobileItemLoader.tsx +++ b/src/modules/faucet/FaucetMobileItemLoader.tsx @@ -13,7 +13,7 @@ export const FaucetMobileItemLoader = () => { - + diff --git a/src/modules/governance/DelegatedInfoPanel.tsx b/src/modules/governance/DelegatedInfoPanel.tsx index 85065eff8a..c64e048526 100644 --- a/src/modules/governance/DelegatedInfoPanel.tsx +++ b/src/modules/governance/DelegatedInfoPanel.tsx @@ -42,7 +42,7 @@ const DelegatedPower: React.FC = ({ return ( - + {title} @@ -64,7 +64,7 @@ const DelegatedPower: React.FC = ({ value={Number(aavePower) + Number(stkAavePower) + Number(aAavePower)} variant="subheader1" /> - + AAVE + stkAAVE + aAAVE @@ -161,12 +161,12 @@ export const DelegatedInfoPanel = () => { powers.aAavePropositionDelegatee !== constants.AddressZero; return ( - + Delegated power - + Use your AAVE, stkAAVE, or aAave balance to delegate your voting and proposition powers. You will not be sending any tokens, only the rights to vote and propose changes to the @@ -176,7 +176,7 @@ export const DelegatedInfoPanel = () => { href="https://docs.aave.com/developers/v/2.0/protocol-governance/governance" target="_blank" variant="description" - color="text.secondary" + color="fg-2" sx={{ textDecoration: 'underline', ml: 1 }} onClick={() => trackEvent(GENERAL.EXTERNAL_LINK, { link: 'Learn More Delegation' })} > @@ -184,7 +184,7 @@ export const DelegatedInfoPanel = () => { {disableButton ? ( - + You have no AAVE/stkAAVE/aAave balance to delegate. ) : ( @@ -212,20 +212,13 @@ export const DelegatedInfoPanel = () => { - {showRevokeButton && ( ); } @@ -51,16 +47,12 @@ export const GovernanceTopPanel = () => { - {/* */} - + Aave Governance - + Aave is a fully decentralized, community governed protocol by the AAVE token-holders. AAVE token-holders collectively discuss, propose, and vote on upgrades to the @@ -70,7 +62,7 @@ export const GovernanceTopPanel = () => { trackEvent(GENERAL.EXTERNAL_LINK, { Link: 'FAQ Docs Governance' })} href="https://aave.com/docs/ecosystem/governance" - sx={{ textDecoration: 'underline', color: '#8E92A3' }} + sx={{ textDecoration: 'underline', color: 'fg-3' }} > documentation @@ -83,15 +75,15 @@ export const GovernanceTopPanel = () => { sx={{ display: 'flex', alignItems: 'center', - gap: '16px', + gap: '0.5rem', flexWrap: 'wrap', maxWidth: 'sm', }} > - - + + - + ); diff --git a/src/modules/governance/ProposalListHeader.tsx b/src/modules/governance/ProposalListHeader.tsx index d6ef45e8bf..94b3d6ec8d 100644 --- a/src/modules/governance/ProposalListHeader.tsx +++ b/src/modules/governance/ProposalListHeader.tsx @@ -34,13 +34,16 @@ export const ProposalListHeaderDesktop: React.FC }) => { return ( <> - + Proposals - - Filter - - All proposals @@ -70,15 +73,18 @@ export const ProposalListHeaderMobile: React.FC <> Proposals} - titleProps={{ variant: 'h3' }} + titleProps={{ variant: 'h3', sx: { textTransform: 'capitalize' } }} onSearchTermChange={handleSearchQueryChange} searchPlaceholder="Search proposals" /> - - Filter - - All proposals @@ -123,7 +129,7 @@ export const ProposalListHeader: React.FC = ({ }, gap: 3, borderBottom: '1px solid', - borderColor: 'divider', + borderColor: 'border-0', }} > {!md ? ( diff --git a/src/modules/governance/ProposalsV3List.tsx b/src/modules/governance/ProposalsV3List.tsx index de640eb3ab..863b3dce7d 100644 --- a/src/modules/governance/ProposalsV3List.tsx +++ b/src/modules/governance/ProposalsV3List.tsx @@ -1,3 +1,4 @@ +import { Trans } from '@lingui/macro'; import { Box, Paper, Skeleton, Stack, Typography } from '@mui/material'; import { useState } from 'react'; import InfiniteScroll from 'react-infinite-scroller'; @@ -9,6 +10,7 @@ import { } from 'src/hooks/governance/useGovernanceCache'; import { useRootStore } from 'src/store/root'; import { GOVERNANCE_PAGE } from 'src/utils/events'; +import { figVars } from 'src/utils/figmaColors'; import { ProposalListHeader } from './ProposalListHeader'; import { StateBadge, stringToState } from './StateBadge'; @@ -25,7 +27,7 @@ const ProposalListItemRow = ({ proposal }: { proposal: ProposalListItem }) => { display: 'flex', flexWrap: 'wrap', justifyContent: 'space-between', - borderBottom: (theme) => `1px solid ${theme.palette.divider}`, + borderBottom: `1px solid ${figVars['border-0']}`, }} component={Link} href={ROUTES.dynamicRenderedProposal(+proposal.id)} @@ -45,21 +47,21 @@ const ProposalListItemRow = ({ proposal }: { proposal: ProposalListItem }) => { justifyContent: 'space-between', }} > - + {proposal.title} {proposal.author && ( - + Author: {proposal.author.replace(/^@/, '')} )} {proposal.shortDescription && ( { display: 'flex', flexWrap: 'wrap', justifyContent: 'space-between', - borderBottom: (theme) => `1px solid ${theme.palette.divider}`, + borderBottom: `1px solid ${figVars['border-0']}`, }} > { } return ( - + { ) : ((!loadingSearchResults && searchTerm) || (!loadingProposals && proposalFilter !== 'all')) && listItems.length === 0 ? ( - + We couldn't find any proposals related to your search.} + /> ) : ( Array.from({ length: 4 }).map((_, i) => ) )} diff --git a/src/modules/governance/RepresentativesInfoPanel.tsx b/src/modules/governance/RepresentativesInfoPanel.tsx index d65b6a9eb6..48dc09d2cd 100644 --- a/src/modules/governance/RepresentativesInfoPanel.tsx +++ b/src/modules/governance/RepresentativesInfoPanel.tsx @@ -10,6 +10,7 @@ import { useRepresentatives } from 'src/hooks/governance/useRepresentatives'; import { useModalContext } from 'src/hooks/useModal'; import { useRootStore } from 'src/store/root'; import { networkConfigs } from 'src/ui-config/networksConfig'; +import { figVars } from 'src/utils/figmaColors'; import { ZERO_ADDRESS } from './utils/formatProposal'; @@ -38,7 +39,7 @@ export const RepresentativesInfoPanel = () => { // } return ( - + @@ -54,7 +55,7 @@ export const RepresentativesInfoPanel = () => { - + {isAddressSelectedAsRepresentative ? ( Representing smart contract wallet (ie. Safe) addresses on other chains. @@ -100,18 +101,18 @@ const Representatives = ({ {representative.representative === ZERO_ADDRESS ? ( ({ + sx={{ height: '24px', width: '24px', - background: theme.palette.background.disabled, - })} + background: figVars['bg-6'], + }} onClick={onOpenRepresentatives} > - + Connect @@ -137,7 +138,7 @@ const Representing = ({ representing }: { representing: Rpresented[] }) => { networkName={networkConfigs[representing.chainId].name} /> {representing.votersRepresented.length === 0 ? ( - + None ) : ( @@ -183,12 +184,12 @@ const AddressLink = ({ explorerLink, address }: { explorerLink: string; address: {address} ({ + sx={{ width: 14, height: 14, ml: 0.5, - color: theme.palette.text.muted, - })} + color: 'fg-3', + }} > diff --git a/src/modules/governance/UserGovernanceInfo.tsx b/src/modules/governance/UserGovernanceInfo.tsx index 60083d3b30..5667185b55 100644 --- a/src/modules/governance/UserGovernanceInfo.tsx +++ b/src/modules/governance/UserGovernanceInfo.tsx @@ -1,5 +1,5 @@ import { Trans } from '@lingui/macro'; -import { Paper, Typography } from '@mui/material'; +import { Box, Paper, Typography } from '@mui/material'; import { ConnectWalletButton } from 'src/components/WalletConnection/ConnectWalletButton'; import { useRootStore } from 'src/store/root'; @@ -11,17 +11,19 @@ export const UserGovernanceInfo = () => { const account = useRootStore((state) => state.account); return account ? ( - <> + // Card spacing lives here rather than as a top margin on each panel, so the panels don't each + // have to know they aren't first. + - + ) : ( Your info - + Please connect a wallet to view your personal information here. diff --git a/src/modules/governance/VoteBar.tsx b/src/modules/governance/VoteBar.tsx index 8ecfca3001..3a948cd497 100644 --- a/src/modules/governance/VoteBar.tsx +++ b/src/modules/governance/VoteBar.tsx @@ -7,7 +7,7 @@ const OuterBar = styled('div')(({ theme }) => position: 'relative', width: '100%', height: '8px', - bgcolor: 'divider', + bgcolor: 'border-2', display: 'block', borderRadius: '6px', }) @@ -40,12 +40,12 @@ interface VoteBarProps extends BoxProps { export function VoteBar({ percent, yae, votes, loading, compact, ...rest }: VoteBarProps) { return ( - + {yae ? YAE : NAY} {loading ? ( - + ) : ( @@ -54,12 +54,12 @@ export function VoteBar({ percent, yae, votes, loading, compact, ...rest }: Vote value={votes} visibleDecimals={0} sx={{ mr: 1 }} - variant="secondary14" + variant="h5" roundDown compact={compact} /> {!compact && ( - + AAVE )} @@ -70,7 +70,7 @@ export function VoteBar({ percent, yae, votes, loading, compact, ...rest }: Vote ) : ( - + )} {loading ? ( diff --git a/src/modules/governance/VotingPowerInfoPanel.tsx b/src/modules/governance/VotingPowerInfoPanel.tsx index cdd5a415e7..a7f13f63e2 100644 --- a/src/modules/governance/VotingPowerInfoPanel.tsx +++ b/src/modules/governance/VotingPowerInfoPanel.tsx @@ -37,7 +37,7 @@ export function VotingPowerInfoPanel() { subtitleProps={{ variant: 'caption', addressCompactMode: CompactMode.XXL, - color: 'text.secondary', + color: 'fg-2', }} funnel={'Your info: Governance'} /> @@ -47,7 +47,7 @@ export function VotingPowerInfoPanel() { {error ? ( - + An error has occurred fetching the proposal. - + ) : ( @@ -233,7 +233,7 @@ export const ProposalOverview = ({ proposal, loading, error }: ProposalOverviewP component="blockquote" sx={{ borderLeft: '4px solid', - borderColor: 'divider', + borderColor: 'border-2', pl: 4, my: 3, ml: 0, @@ -251,7 +251,7 @@ export const ProposalOverview = ({ proposal, loading, error }: ProposalOverviewP ); }, diff --git a/src/modules/governance/proposal/ProposalPayloads.tsx b/src/modules/governance/proposal/ProposalPayloads.tsx index f406f1e3e2..eb458644de 100644 --- a/src/modules/governance/proposal/ProposalPayloads.tsx +++ b/src/modules/governance/proposal/ProposalPayloads.tsx @@ -112,7 +112,7 @@ export const ProposalPayloads = ({ payloads, loading }: ProposalPayloadsProps) = {logo && } - + Payload {p.payloadId} diff --git a/src/modules/governance/proposal/ProposalTimeline.tsx b/src/modules/governance/proposal/ProposalTimeline.tsx index 3485f0a873..571fec8985 100644 --- a/src/modules/governance/proposal/ProposalTimeline.tsx +++ b/src/modules/governance/proposal/ProposalTimeline.tsx @@ -1,6 +1,7 @@ import { ExternalLinkIcon } from '@heroicons/react/outline'; import { Trans } from '@lingui/macro'; -import { KeyboardArrowDown, KeyboardArrowUp } from '@mui/icons-material'; +import KeyboardArrowDown from '@mui/icons-material/KeyboardArrowDown'; +import KeyboardArrowUp from '@mui/icons-material/KeyboardArrowUp'; import { Avatar, Box, @@ -19,6 +20,7 @@ import { useGovernanceCoreConstants } from 'src/hooks/governance/useGovernanceCo import { ProposalDetail, ProposalPayload } from 'src/services/GovernanceCacheService'; import { governanceV3Config } from 'src/ui-config/governanceConfig'; import { networkConfigs } from 'src/ui-config/networksConfig'; +import { figVars } from 'src/utils/figmaColors'; import { getNetworkConfig } from 'src/utils/marketsAndNetworksConfig'; // Single-spine proposal timeline. It weaves the three state machines (proposal core, voting machine, @@ -109,16 +111,16 @@ interface Step { const statusColor = (status: StepStatus, theme: Theme) => { switch (status) { case 'done': - return theme.palette.primary.main; + return theme.vars.palette.primary.main; case 'ok': - return theme.palette.success.main; + return theme.vars.palette.success.main; case 'now': case 'settled': - return theme.palette.warning.main; + return theme.vars.palette.warning.main; case 'terminal': - return theme.palette.error.main; + return theme.vars.palette.error.main; default: - return theme.palette.text.disabled; + return figVars['fg-4']; } }; @@ -525,7 +527,7 @@ export const ProposalTimeline = ({ }} > {logo && } - + {sub.label} @@ -538,10 +540,10 @@ export const ProposalTimeline = ({ sub.tone === 'ready' || sub.tone === 'countdown' ? 'warning.main' : sub.tone === 'done' - ? 'text.muted' + ? 'fg-3' : sub.tone === 'estimate' - ? 'text.muted' - : 'text.secondary', + ? 'fg-3' + : 'fg-2', whiteSpace: 'nowrap', }} > @@ -608,10 +610,10 @@ export const ProposalTimeline = ({ step.status === 'settled' || step.status === 'terminal' ? color - : theme.palette.background.paper, + : theme.vars.palette.background.paper, boxShadow: step.status === 'now' - ? `0 0 0 4px ${theme.palette.background.paper}, 0 0 0 6px ${theme.palette.warning.main}33` + ? `0 0 0 4px ${theme.vars.palette.background.paper}, 0 0 0 6px ${theme.vars.palette.warning.main}33` : undefined, }} /> @@ -627,7 +629,7 @@ export const ProposalTimeline = ({ gap: 2, cursor: hasSubs ? 'pointer' : 'default', '&:focus-visible': { - outline: `2px solid ${theme.palette.primary.main}`, + outline: `2px solid ${theme.vars.palette.primary.main}`, outlineOffset: 2, borderRadius: 1, }, @@ -647,14 +649,14 @@ export const ProposalTimeline = ({ } > {step.name} {hasSubs && ( - + {isOpen ? ( ) : ( @@ -688,7 +690,7 @@ export const ProposalTimeline = ({ step.status === 'ok' ? 'success.main' : step.status === 'pending' - ? 'text.muted' + ? 'fg-3' : 'warning.main', }} > @@ -702,8 +704,8 @@ export const ProposalTimeline = ({ step.valueKind === 'countdown' ? 'warning.main' : step.valueKind === 'pending' - ? 'text.disabled' - : 'text.muted', + ? 'fg-4' + : 'fg-3', fontWeight: step.valueKind === 'countdown' ? 600 : 400, fontStyle: step.valueKind === 'pending' || step.valueKind === 'estimate' diff --git a/src/modules/governance/proposal/ProposalTopPanel.tsx b/src/modules/governance/proposal/ProposalTopPanel.tsx index d2dffd83e6..eba764bb44 100644 --- a/src/modules/governance/proposal/ProposalTopPanel.tsx +++ b/src/modules/governance/proposal/ProposalTopPanel.tsx @@ -17,7 +17,7 @@ export const ProposalTopPanel = () => { )} diff --git a/src/modules/governance/proposal/VotersListModal.tsx b/src/modules/governance/proposal/VotersListModal.tsx index b4c5c4d496..c4e5cf4abb 100644 --- a/src/modules/governance/proposal/VotersListModal.tsx +++ b/src/modules/governance/proposal/VotersListModal.tsx @@ -2,8 +2,8 @@ import { Trans } from '@lingui/macro'; import { Box, Grid, Typography, useMediaQuery, useTheme } from '@mui/material'; import { useState } from 'react'; import { Row } from 'src/components/primitives/Row'; -import StyledToggleButton from 'src/components/StyledToggleButton'; -import StyledToggleButtonGroup from 'src/components/StyledToggleButtonGroup'; +import { StyledTxModalToggleButton } from 'src/components/StyledToggleButton'; +import { StyledTxModalToggleGroup } from 'src/components/StyledToggleButtonGroup'; import { ProposalVoteDisplayInfo, VotersSplitDisplay } from 'src/modules/governance/types'; import { BasicModal } from '../../../components/primitives/BasicModal'; @@ -28,7 +28,7 @@ export const VotersListModal = ({ const [voteView, setVoteView] = useState<'yaes' | 'nays'>('yaes'); const borderBaseStyle = { border: '1px solid', - borderColor: 'divider', + borderColor: 'border-0', borderRadius: 1, }; @@ -52,13 +52,13 @@ export const VotersListModal = ({ px: 4, py: 2, borderBottom: '1px solid', - borderColor: 'divider', + borderColor: 'border-0', }} > - + Addresses ({voters.yaeVotes.length}) - + Votes @@ -91,13 +91,13 @@ export const VotersListModal = ({ px: 4, py: 2, borderBottom: '1px solid', - borderColor: 'divider', + borderColor: 'border-0', }} > - + Addresses ({voters.nayVotes.length}) - + Votes @@ -129,24 +129,24 @@ export const VotersListModal = ({ ) : ( <> - setVoteView(value)} - sx={{ width: '100%', height: '44px', mt: 8, mb: 6 }} + sx={{ width: '100%', mt: 8, mb: 6 }} > - + Voted YAE - - + + Voted NAY - - + + {voteView === 'yaes' && yesVotesUI} {voteView === 'nays' && noVotesUI} diff --git a/src/modules/governance/proposal/VotingResults.tsx b/src/modules/governance/proposal/VotingResults.tsx index 9e0627f76a..e17e85767b 100644 --- a/src/modules/governance/proposal/VotingResults.tsx +++ b/src/modules/governance/proposal/VotingResults.tsx @@ -76,7 +76,7 @@ export const VotingResults = ({ proposal, loading, voters, votesLoading }: Votin caption={ <> Current votes - + Required @@ -96,7 +96,7 @@ export const VotingResults = ({ proposal, loading, voters, votesLoading }: Votin value={proposal.voteInfo.quorum} visibleDecimals={2} roundDown - color="text.muted" + color="fg-3" /> @@ -123,7 +123,7 @@ export const VotingResults = ({ proposal, loading, voters, votesLoading }: Votin caption={ <> Current differential - + Required @@ -143,7 +143,7 @@ export const VotingResults = ({ proposal, loading, voters, votesLoading }: Votin value={proposal.voteInfo.requiredDifferential} visibleDecimals={2} roundDown - color="text.muted" + color="fg-3" /> @@ -159,7 +159,7 @@ export const VotingResults = ({ proposal, loading, voters, votesLoading }: Votin }) } href={discussionUrl} - variant="outlined" + variant="tertiary" fullWidth endIcon={ diff --git a/src/modules/history/HistoryFilterMenu.tsx b/src/modules/history/HistoryFilterMenu.tsx index f29114545c..a502cd0ccd 100644 --- a/src/modules/history/HistoryFilterMenu.tsx +++ b/src/modules/history/HistoryFilterMenu.tsx @@ -1,6 +1,7 @@ import { XCircleIcon } from '@heroicons/react/solid'; import { Trans } from '@lingui/macro'; -import { Check as CheckIcon, Sort as SortIcon } from '@mui/icons-material'; +import CheckIcon from '@mui/icons-material/Check'; +import SortIcon from '@mui/icons-material/Sort'; import { Box, Button, @@ -16,6 +17,7 @@ import React, { useEffect, useState } from 'react'; import { DarkTooltip } from 'src/components/infoTooltips/DarkTooltip'; import { useRootStore } from 'src/store/root'; import { TRANSACTION_HISTORY } from 'src/utils/events'; +import { figVars } from 'src/utils/figmaColors'; import { FilterOptions } from './types'; @@ -117,7 +119,7 @@ export const HistoryFilterMenu: React.FC = ({ return ( - + TXs: {displayedFilters} @@ -144,7 +146,7 @@ export const HistoryFilterMenu: React.FC = ({ alignItems: 'center', height: 36, border: '1px solid', - borderColor: 'divider', + borderColor: 'border-2', borderRadius: '4px', mr: downToMD ? 0 : 2, ml: downToMD ? 4 : 0, @@ -159,7 +161,7 @@ export const HistoryFilterMenu: React.FC = ({ = ({ {!allSelected && ( + Reset } @@ -190,7 +192,9 @@ export const HistoryFilterMenu: React.FC = ({ }} onClick={handleClearFilter} > - + + + )} @@ -212,12 +216,12 @@ export const HistoryFilterMenu: React.FC = ({ handleFilterClick(undefined)} sx={{ - background: allSelected ? theme.palette.background.surface : undefined, + background: allSelected ? figVars['bg-2'] : undefined, display: 'flex', justifyContent: 'space-between', }} > - + All transactions {allSelected && ( @@ -247,14 +251,12 @@ export const HistoryFilterMenu: React.FC = ({ key={optionKey} onClick={() => handleFilterClick(option)} sx={{ - background: currentFilter.includes(option) - ? theme.palette.background.surface - : undefined, + background: currentFilter.includes(option) ? figVars['bg-2'] : undefined, display: 'flex', justifyContent: 'space-between', }} > - + {currentFilter.includes(option) && ( diff --git a/src/modules/history/HistoryItemLoader.tsx b/src/modules/history/HistoryItemLoader.tsx index cd6484fcb7..5c8386cfe3 100644 --- a/src/modules/history/HistoryItemLoader.tsx +++ b/src/modules/history/HistoryItemLoader.tsx @@ -13,7 +13,7 @@ const HistoryRowItem = () => { - + @@ -22,7 +22,7 @@ const HistoryRowItem = () => { - + @@ -36,7 +36,7 @@ export const HistoryItemLoader = () => { return ( <> - + diff --git a/src/modules/history/HistoryMobileItemLoader.tsx b/src/modules/history/HistoryMobileItemLoader.tsx index 75c92b7251..9d53f555a7 100644 --- a/src/modules/history/HistoryMobileItemLoader.tsx +++ b/src/modules/history/HistoryMobileItemLoader.tsx @@ -13,7 +13,7 @@ const HistoryMobileRowItem = () => { - + @@ -27,7 +27,7 @@ export const HistoryMobileItemLoader = () => { return ( <> - + diff --git a/src/modules/history/HistoryWrapper.tsx b/src/modules/history/HistoryWrapper.tsx index e12aa5521b..2ce0a92544 100644 --- a/src/modules/history/HistoryWrapper.tsx +++ b/src/modules/history/HistoryWrapper.tsx @@ -137,7 +137,7 @@ export const HistoryWrapper = () => { Transactions - + This list may not include all your swaps. @@ -171,7 +171,7 @@ export const HistoryWrapper = () => { - + .CSV @@ -189,7 +189,7 @@ export const HistoryWrapper = () => { - + .JSON @@ -206,7 +206,7 @@ export const HistoryWrapper = () => { .sort((a, b) => new Date(b[0]).getTime() - new Date(a[0]).getTime()) .map(([date, txns], groupIndex) => ( - + {date} {txns.map((transaction: TransactionHistoryItemUnion, index: number) => { @@ -234,17 +234,17 @@ export const HistoryWrapper = () => { my: 24, }} > - + Nothing found - + We couldn't find any transactions related to your search. Try again with a different asset name, or reset filters. - - + + + Total deposited} loading={vaultLoading}> + + + APY} loading={vaultLoading}> + + + + ); }; const GhoSavingsBannerMobile = ({ hasLegacyPosition }: { hasLegacyPosition: boolean }) => { - const { openStkGhoMigrate } = useModalContext(); const { vault, loading: vaultLoading } = useSGhoVaultContext(); const totalDepositedUSD = vault?.totalAssets.usd ?? '0'; const targetRate = vault?.targetRate ? +vault.targetRate.value : 0; return ( + ({ - [theme.breakpoints.up(780)]: { - height: '116px', - flexDirection: 'row', - alignItems: 'center', - }, - flexDirection: 'column', - alignItems: 'flex-start', - height: '188px', - borderRadius: { md: 4 }, - display: 'flex', - backgroundColor: theme.palette.mode === 'dark' ? '#39375A80' : '#F7F7F9', - position: 'relative', - justifyContent: 'space-between', - gap: { xs: 6 }, - })} + direction="column" + sx={{ width: '100%', height: '100%', padding: '16px' }} + justifyContent="space-between" > - - - - - {hasLegacyPosition ? ( - Migrate your sGHO position - ) : ( - Earn into sGHO - )} - - - {hasLegacyPosition ? ( - To continue claiming rewards, migrate now. - ) : ( - GHO yield with instant withdraws. - )} - - - - - - {vaultLoading ? ( - - ) : ( - - - - )} - - Total deposited - - - - {vaultLoading ? ( - - ) : ( - - - - )} - - APY - - - - - - - + + + Total deposited} loading={vaultLoading}> + + + APY} loading={vaultLoading}> + + + + + diff --git a/src/modules/markets/MarketAssetsList.tsx b/src/modules/markets/MarketAssetsList.tsx index 7c88146a0b..8e077e9ef3 100644 --- a/src/modules/markets/MarketAssetsList.tsx +++ b/src/modules/markets/MarketAssetsList.tsx @@ -1,5 +1,5 @@ import { Trans } from '@lingui/macro'; -import { useMediaQuery } from '@mui/material'; +import { useMediaQuery, useTheme } from '@mui/material'; import { useState } from 'react'; import { mapAaveProtocolIncentives } from 'src/components/incentives/incentives.helper'; import { VariableAPYTooltip } from 'src/components/infoTooltips/VariableAPYTooltip'; @@ -52,7 +52,8 @@ export type ReserveWithProtocolIncentives = ReserveWithId & { }; export default function MarketAssetsList({ reserves, loading }: MarketAssetsListProps) { - const isTableChangedToCards = useMediaQuery('(max-width:1125px)'); + const theme = useTheme(); + const isTableChangedToCards = useMediaQuery(theme.breakpoints.down('mdlg')); const [sortName, setSortName] = useState(''); const [sortDesc, setSortDesc] = useState(false); const sortedReserves = [...reserves].sort((a, b) => { diff --git a/src/modules/markets/MarketAssetsListContainer.tsx b/src/modules/markets/MarketAssetsListContainer.tsx index 57ed7eab46..6e8ec328c1 100644 --- a/src/modules/markets/MarketAssetsListContainer.tsx +++ b/src/modules/markets/MarketAssetsListContainer.tsx @@ -1,14 +1,21 @@ +import { API_ETH_MOCK_ADDRESS } from '@aave/contract-helpers'; import { Trans } from '@lingui/macro'; -import { Box, Divider, Switch, Typography, useMediaQuery, useTheme } from '@mui/material'; +import { + Alert, + Box, + Divider, + FormControlLabel, + Paper, + Switch, + useMediaQuery, + useTheme, +} from '@mui/material'; import { useState } from 'react'; -import { AssetCategoryMultiSelect } from 'src/components/AssetCategoryMultiselect'; -import { ListWrapper } from 'src/components/lists/ListWrapper'; +import { AssetsFilterBar } from 'src/components/AssetsFilterBar'; import { NoSearchResults } from 'src/components/NoSearchResults'; import { Link } from 'src/components/primitives/Link'; -import { Warning } from 'src/components/primitives/Warning'; -import { TitleWithFiltersAndSearchBar } from 'src/components/TitleWithFiltersAndSearchBar'; -import { TitleWithSearchBar } from 'src/components/TitleWithSearchBar'; -import { useAppDataContext } from 'src/hooks/app-data-provider/useAppDataProvider'; +import { ReserveWithId, useAppDataContext } from 'src/hooks/app-data-provider/useAppDataProvider'; +import { usePoolTokensBalance } from 'src/hooks/pool/usePoolTokensBalance'; import { useCoingeckoCategories } from 'src/hooks/useCoinGeckoCategories'; import MarketAssetsList from 'src/modules/markets/MarketAssetsList'; import { useRootStore } from 'src/store/root'; @@ -18,7 +25,7 @@ import { useShallow } from 'zustand/shallow'; import { GENERAL } from '../../utils/events'; import { isAssetHidden } from '../dashboard/lists/constants'; import { SavingsGhoBanner } from './Gho/GhoBanner'; -import { AssetCategory, isAssetInCategoryDynamic } from './utils/assetCategories'; +import { AssetCategory, matchesSelectedCategories } from './utils/assetCategories'; function shouldDisplayGhoBanner(marketTitle: string, searchTerm: string): boolean { // GHO banner is only displayed on markets where new GHO is mintable (i.e. Ethereum) @@ -42,16 +49,20 @@ export const MarketAssetsListContainer = () => { const { supplyReserves, loading } = useAppDataContext(); - const [trackEvent, currentMarket, currentMarketData, currentNetworkConfig] = useRootStore( - useShallow((store) => [ - store.trackEvent, - store.currentMarket, - store.currentMarketData, - store.currentNetworkConfig, - ]) - ); + const [trackEvent, account, currentMarket, currentMarketData, currentNetworkConfig] = + useRootStore( + useShallow((store) => [ + store.trackEvent, + store.account, + store.currentMarket, + store.currentMarketData, + store.currentNetworkConfig, + ]) + ); + const { data: tokenBalances } = usePoolTokensBalance(currentMarketData); const [searchTerm, setSearchTerm] = useState(''); const [selectedCategories, setSelectedCategories] = useState([]); + const [inWalletOnly, setInWalletOnly] = useState(false); const { breakpoints } = useTheme(); @@ -61,6 +72,18 @@ export const MarketAssetsListContainer = () => { const [showLowLiquidityToggle, setShowLowLiquidityToggle] = useState(false); + const heldAddresses = new Set( + (tokenBalances ?? []).filter((b) => b.amount !== '0').map((b) => b.address) + ); + + // Native-asset reserves hold their balance under the mock ETH address, not their own. + const heldInWallet = (res: ReserveWithId) => + heldAddresses.has(res.underlyingToken.address.toLowerCase()) || + (!!res.acceptsNative && heldAddresses.has(API_ETH_MOCK_ADDRESS.toLowerCase())); + + // Keyed off the same condition that renders the toggle, so disconnecting can't strand the filter. + const inWalletActive = !!account && inWalletOnly; + const baseFilteredData = supplyReserves // Filter out any hidden assets .filter((res) => !isAssetHidden(currentMarketData.market, res.underlyingToken.address)) @@ -74,18 +97,16 @@ export const MarketAssetsListContainer = () => { res.underlyingToken.address.toLowerCase().includes(term) ); }) - // Filter by category - .filter( - (res) => - selectedCategories.length === 0 || - selectedCategories.some((category) => - isAssetInCategoryDynamic( - res.underlyingToken.symbol, - category, - data?.stablecoinSymbols, - data?.ethCorrelatedSymbols - ) - ) + // "In Wallet": only assets the user holds + .filter((res) => !inWalletActive || heldInWallet(res)) + // Category filter (shared with the dashboard / staking asset lists) + .filter((res) => + matchesSelectedCategories( + res.underlyingToken.symbol, + selectedCategories, + data?.stablecoinSymbols, + data?.ethCorrelatedSymbols + ) ); // If every remaining asset is below the $100k supply threshold, showing the @@ -133,145 +154,104 @@ export const MarketAssetsListContainer = () => { const frozenOrPausedReserves = filteredData.filter((r) => r.isFrozen || r.isPaused); return ( - - - {currentMarketData.marketTitle} assets - - } - searchPlaceholder={sm ? 'Search asset' : 'Search asset name, symbol, or address'} - /> - - - - - - ) : ( - - {currentMarketData.marketTitle} assets - - } - searchPlaceholder={sm ? 'Search asset' : 'Search asset name, symbol, or address'} - selectedCategories={selectedCategories} - onCategoriesChange={setSelectedCategories} - disabled={isLoading || !!error} - /> - ) - } - > - {displayGhoBanner && ( - - - - )} - - {/* Unfrozen assets list */} - + + {displayGhoBanner && } - {showFrozenMarketsToggle && frozenOrPausedReserves.length > 0 && ( - - - - These assets are temporarily frozen or paused by Aave community decisions, meaning - that further supply / borrow, or rate swap of these assets are unavailable. - Withdrawals and debt repayments are allowed. Follow the{' '} - { - trackEvent(GENERAL.EXTERNAL_LINK, { - link: 'Frozen Market Markets Page', - frozenMarket: currentNetworkConfig.name, - }); - }} - href="https://governance.aave.com" - underline="always" - > - Aave governance forum - {' '} - for further updates. - - - - )} - - {showFrozenMarketsToggle && frozenOrPausedReserves.length > 0 && ( - - )} + - {/* Show no search results message if nothing hits in either list */} - {!loading && filteredData.length === 0 && !displayGhoBanner && ( - - We couldn't find any assets related to your search. Try again with a different - asset name, symbol, or address. - - } - /> - )} + + {/* Unfrozen assets list */} + - - {frozenOrPausedReserves.length > 0 && ( + {showFrozenMarketsToggle && frozenOrPausedReserves.length > 0 && ( <> - - - Show frozen/paused assets - - + + + + These assets are temporarily frozen or paused by Aave community decisions, meaning + that further supply / borrow, or rate swap of these assets are unavailable. + Withdrawals and debt repayments are allowed. Follow the{' '} + { + trackEvent(GENERAL.EXTERNAL_LINK, { + link: 'Frozen Market Markets Page', + frozenMarket: currentNetworkConfig.name, + }); + }} + href="https://governance.aave.com" + underline="always" + > + Aave governance forum + {' '} + for further updates. + + - + )} - - - {'Show assets <$100k supply'} - - setShowLowLiquidityToggle((prev) => !prev)} - inputProps={{ 'aria-label': 'show assets under 100k supply' }} + + {/* Show no search results message if nothing hits in either list */} + {!loading && filteredData.length === 0 && !displayGhoBanner && ( + We couldn't find any assets related to your search.} + /> + )} + + + {frozenOrPausedReserves.length > 0 && ( + <> + + } + label={Show frozen/paused assets} + componentsProps={{ typography: { variant: 'subheader1' } }} + /> + + + )} + setShowLowLiquidityToggle((prev) => !prev)} + inputProps={{ 'aria-label': 'show assets under 100k supply' }} + /> + } + label={{'Show assets <$100k supply'}} + componentsProps={{ typography: { variant: 'subheader1' } }} /> - - + + ); }; diff --git a/src/modules/markets/MarketAssetsListItem.tsx b/src/modules/markets/MarketAssetsListItem.tsx index f4fce15f03..1d86778846 100644 --- a/src/modules/markets/MarketAssetsListItem.tsx +++ b/src/modules/markets/MarketAssetsListItem.tsx @@ -76,7 +76,7 @@ export const MarketAssetsListItem = ({ ...reserve }: ReserveWithProtocolIncentiv - + {name || reserve.underlyingToken.name} @@ -85,7 +85,7 @@ export const MarketAssetsListItem = ({ ...reserve }: ReserveWithProtocolIncentiv p: { xs: '0', xsm: '3.625px 0px' }, }} > - + {reserve.underlyingToken.symbol} {reserve.isolationModeConfig?.canBeCollateral && ( @@ -101,7 +101,7 @@ export const MarketAssetsListItem = ({ ...reserve }: ReserveWithProtocolIncentiv - + @@ -111,8 +111,7 @@ export const MarketAssetsListItem = ({ ...reserve }: ReserveWithProtocolIncentiv incentives={reserve.supplyProtocolIncentives} address={reserve.aToken.address} symbol={reserve.underlyingToken.symbol} - variant="main16" - symbolsVariant="secondary16" + variant="h5" tooltip={ <> {externalIncentivesTooltipsSupplySide.superFestRewards && } @@ -131,12 +130,12 @@ export const MarketAssetsListItem = ({ ...reserve }: ReserveWithProtocolIncentiv {' '} ) : ( - + )} @@ -150,8 +149,7 @@ export const MarketAssetsListItem = ({ ...reserve }: ReserveWithProtocolIncentiv incentives={reserve.borrowProtocolIncentives} address={reserve.vToken.address} symbol={reserve.underlyingToken.symbol} - variant="main16" - symbolsVariant="secondary16" + variant="h5" tooltip={ <> {externalIncentivesTooltipsBorrowSide.superFestRewards && } @@ -167,9 +165,9 @@ export const MarketAssetsListItem = ({ ...reserve }: ReserveWithProtocolIncentiv reserve.borrowInfo.total.amount.value !== '0' && } - + {stakeUserData.stakeTokenUserBalance !== '0' && ( - )} diff --git a/src/modules/reserve-overview/ReserveActions.tsx b/src/modules/reserve-overview/ReserveActions.tsx index d6ee4d9caa..66349f7042 100644 --- a/src/modules/reserve-overview/ReserveActions.tsx +++ b/src/modules/reserve-overview/ReserveActions.tsx @@ -1,12 +1,11 @@ import { API_ETH_MOCK_ADDRESS } from '@aave/contract-helpers'; import { BigNumberValue, USD_DECIMALS, valueToBigNumber } from '@aave/math-utils'; import { Trans } from '@lingui/macro'; -import { Box, Button, Divider, Paper, Skeleton, Stack, Typography, useTheme } from '@mui/material'; +import { Alert, Box, Button, Divider, Paper, Skeleton, Stack, Typography } from '@mui/material'; import React, { ReactNode, useState } from 'react'; import { WalletIcon } from 'src/components/icons/WalletIcon'; import { getMarketInfoById } from 'src/components/MarketSwitcher'; import { FormattedNumber } from 'src/components/primitives/FormattedNumber'; -import { Warning } from 'src/components/primitives/Warning'; import { StyledTxModalToggleButton } from 'src/components/StyledToggleButton'; import { StyledTxModalToggleGroup } from 'src/components/StyledToggleButtonGroup'; import { FunSupplyButton } from 'src/components/transactions/FunCheckout/FunSupplyButton'; @@ -21,6 +20,7 @@ import { useWeb3Context } from 'src/libs/hooks/useWeb3Context'; import { BuyWithFiat } from 'src/modules/staking/BuyWithFiat'; import { useRootStore } from 'src/store/root'; import { GENERAL } from 'src/utils/events'; +import { figVars } from 'src/utils/figmaColors'; import { assetCanBeBorrowedByUser, getMaxAmountAvailableToBorrow, @@ -185,20 +185,20 @@ export const ReserveActions = ({ reserve }: ReserveActionsProps) => { const PauseWarning = () => { return ( - + Because this asset is paused, no actions can be taken until further notice - + ); }; const FrozenWarning = () => { return ( - + Since this asset is frozen, the only available actions are withdraw and repay which can be accessed from the Dashboard - + ); }; @@ -243,7 +243,7 @@ const ActionsSkeleton = () => { const PaperWrapper = ({ children }: { children: ReactNode }) => { return ( - + Your info @@ -255,12 +255,12 @@ const PaperWrapper = ({ children }: { children: ReactNode }) => { const ConnectWallet = () => { return ( - + <> Your info - + Please connect a wallet to view your personal information here. @@ -316,8 +316,8 @@ const SupplyAction = ({ @@ -375,8 +375,8 @@ const BorrowAction = ({ @@ -415,11 +415,11 @@ const WrappedBaseAssetSelector = ({ sx={{ mb: 4 }} > - {assetSymbol} + {assetSymbol} - {baseAssetSymbol} + {baseAssetSymbol} ); @@ -434,8 +434,8 @@ interface ValueWithSymbolProps { const ValueWithSymbol = ({ value, symbol, children }: ValueWithSymbolProps) => { return ( - - + + {symbol} {children} @@ -449,26 +449,24 @@ interface WalletBalanceProps { marketTitle: string; } export const WalletBalance = ({ balance, symbol, marketTitle }: WalletBalanceProps) => { - const theme = useTheme(); - return ( ({ + sx={{ width: '42px', height: '42px', - background: theme.palette.background.surface, - border: `0.5px solid ${theme.palette.background.disabled}`, + background: figVars['bg-2'], + border: `0.5px solid ${figVars['bg-6']}`, borderRadius: '12px', display: 'flex', alignItems: 'center', justifyContent: 'center', - })} + }} > - + - + Wallet balance diff --git a/src/modules/reserve-overview/ReserveConfiguration.tsx b/src/modules/reserve-overview/ReserveConfiguration.tsx index b56dbd095e..76b18d4fb8 100644 --- a/src/modules/reserve-overview/ReserveConfiguration.tsx +++ b/src/modules/reserve-overview/ReserveConfiguration.tsx @@ -1,12 +1,11 @@ import { AaveV2Ethereum } from '@aave-dao/aave-address-book'; import { ExternalLinkIcon } from '@heroicons/react/solid'; import { Trans } from '@lingui/macro'; -import { Box, Button, Divider, SvgIcon } from '@mui/material'; +import { Alert, Box, Button, Divider, SvgIcon } from '@mui/material'; import { getFrozenProposalLink } from 'src/components/infoTooltips/FrozenTooltip'; import { PausedTooltipText } from 'src/components/infoTooltips/PausedTooltip'; import { FormattedNumber } from 'src/components/primitives/FormattedNumber'; import { Link } from 'src/components/primitives/Link'; -import { Warning } from 'src/components/primitives/Warning'; import { AMPLWarning } from 'src/components/Warnings/AMPLWarning'; import { BorrowDisabledWarning } from 'src/components/Warnings/BorrowDisabledWarning'; import { @@ -62,7 +61,7 @@ export const ReserveConfiguration: React.FC = ({ rese <> {reserve.isFrozen && !offboardingDiscussion ? ( - + This asset is frozen due to an Aave community decision.{' '} = ({ rese More details - + ) : offboardingDiscussion ? ( - + - + ) : ( reserve.underlyingToken.symbol == 'AMPL' && ( - + - + ) )} {reserve.isPaused ? ( reserve.underlyingToken.symbol === 'MAI' ? ( - + MAI has been paused due to a community decision. Supply, borrows and repays are impacted.{' '} @@ -103,11 +102,11 @@ export const ReserveConfiguration: React.FC = ({ rese More details - + ) : ( - + - + ) ) : null} @@ -134,12 +133,12 @@ export const ReserveConfiguration: React.FC = ({ rese {reserve.borrowInfo?.borrowingState !== 'ENABLED' && !reserve.eModeInfo?.some((eMode) => eMode.canBeBorrowed) && ( - + - + )} = ({ rese @@ -204,7 +203,7 @@ export const ReserveConfiguration: React.FC = ({ rese } component={Link} size="small" - variant="outlined" + variant="tertiary" sx={{ verticalAlign: 'top' }} > Interest rate strategy diff --git a/src/modules/reserve-overview/ReserveConfigurationWrapper.tsx b/src/modules/reserve-overview/ReserveConfigurationWrapper.tsx index 0a0a009e19..37bcc75029 100644 --- a/src/modules/reserve-overview/ReserveConfigurationWrapper.tsx +++ b/src/modules/reserve-overview/ReserveConfigurationWrapper.tsx @@ -27,7 +27,7 @@ export const ReserveConfigurationWrapper: React.FC = }); return ( - + = ({ reserve } @@ -73,7 +73,7 @@ export const ReserveEModePanel: React.FC = ({ reserve } @@ -88,7 +88,7 @@ export const ReserveEModePanel: React.FC = ({ reserve } @@ -96,7 +96,7 @@ export const ReserveEModePanel: React.FC = ({ reserve } ))} - + E-Mode increases your LTV for a selected category of assets, meaning that when E-mode is enabled, you will have higher borrowing power over assets of the same E-mode category @@ -105,7 +105,7 @@ export const ReserveEModePanel: React.FC = ({ reserve } href={ROUTES.dashboard} sx={{ textDecoration: 'underline' }} variant="caption" - color="text.secondary" + color="fg-2" onClick={() => { trackEvent(RESERVE_DETAILS.GO_DASHBOARD_EMODE); }} @@ -117,7 +117,7 @@ export const ReserveEModePanel: React.FC = ({ reserve } href="https://aave.com/help/borrowing/e-mode" sx={{ textDecoration: 'underline' }} variant="caption" - color="text.secondary" + color="fg-2" onClick={() => { trackEvent(GENERAL.EXTERNAL_LINK, { Link: 'E-mode FAQ' }); }} @@ -129,7 +129,7 @@ export const ReserveEModePanel: React.FC = ({ reserve } href="https://github.com/aave/aave-v3-core/blob/master/techpaper/Aave_V3_Technical_Paper.pdf" sx={{ textDecoration: 'underline' }} variant="caption" - color="text.secondary" + color="fg-2" onClick={() => { trackEvent(GENERAL.EXTERNAL_LINK, { Link: 'V3 Tech Paper' }); }} diff --git a/src/modules/reserve-overview/ReserveFactorOverview.tsx b/src/modules/reserve-overview/ReserveFactorOverview.tsx index 9937620893..cedfa8559a 100644 --- a/src/modules/reserve-overview/ReserveFactorOverview.tsx +++ b/src/modules/reserve-overview/ReserveFactorOverview.tsx @@ -58,7 +58,7 @@ export const ReserveFactorOverview = ({ /> } > - + - + View contract diff --git a/src/modules/reserve-overview/ReserveHeaderIconButton.tsx b/src/modules/reserve-overview/ReserveHeaderIconButton.tsx new file mode 100644 index 0000000000..5e32c654f4 --- /dev/null +++ b/src/modules/reserve-overview/ReserveHeaderIconButton.tsx @@ -0,0 +1,53 @@ +import { Trans } from '@lingui/macro'; +import { Box, Typography } from '@mui/material'; +import { ReactNode } from 'react'; +import { DarkTooltip } from 'src/components/infoTooltips/DarkTooltip'; +import { figSurfaceShadow } from 'src/utils/figmaColors'; + +interface ReserveHeaderIconButtonProps { + tooltipText: string; + /** Button diameter — 1.75rem next to the token name, 1.25rem beside the oracle price. */ + size?: string; + children: ReactNode; +} + +// Surface icon button for the reserve header affordances (token contracts / add-to-wallet / +// oracle link): a bg-3 circle with the shared shadow-low-border-2 ring. The icon color is a +// constant `fg-2` via `currentColor` (icon children only need `stroke="currentColor"`); hover +// tints the circle background instead — one step down the ramp to bg-5. +export const ReserveHeaderIconButton = ({ + tooltipText, + size = '1.75rem', + children, +}: ReserveHeaderIconButtonProps) => { + return ( + + {tooltipText} + + } + > + + {children} + + + ); +}; diff --git a/src/modules/reserve-overview/ReservePanels.tsx b/src/modules/reserve-overview/ReservePanels.tsx index 70f359669e..57590e363d 100644 --- a/src/modules/reserve-overview/ReservePanels.tsx +++ b/src/modules/reserve-overview/ReservePanels.tsx @@ -1,5 +1,6 @@ import { Box, BoxProps, Typography, TypographyProps, useMediaQuery, useTheme } from '@mui/material'; import type { ReactNode } from 'react'; +import { figVars } from 'src/utils/figmaColors'; export const PanelRow: React.FC = (props) => ( = ({ title, children, className position: 'absolute', right: 4, top: 'calc(50% - 17px)', - borderRight: (theme) => `1px solid ${theme.palette.divider}`, + borderRight: `1px solid ${figVars['border-2']}`, }, } : {}), }} className={className} > - + {title} reserve.underlyingAsset === underlyingAsset ) as ComputedReserveData; - const valueTypographyVariant = downToSM ? 'main16' : 'main21'; - const symbolsTypographyVariant = downToSM ? 'secondary16' : 'secondary21'; - - const iconStyling = { - display: 'inline-flex', - alignItems: 'center', - color: '#A5A8B6', - '&:hover': { color: '#F1F1F3' }, - cursor: 'pointer', - }; + const valueTypographyVariant = downToSM ? 'h4' : 'h2'; return ( <> - Reserve Size} loading={loading} hideIcon> + Reserve size} loading={loading}> - + - Available liquidity} loading={loading} hideIcon> + Available liquidity} loading={loading}> - + - Utilization Rate} loading={loading} hideIcon> + Utilization rate} loading={loading}> - + - Oracle price} loading={loading} hideIcon> - + Oracle price} loading={loading}> + - {loading ? ( - - ) : ( - - - trackEvent(GENERAL.EXTERNAL_LINK, { - Link: 'Oracle Price', - oracle: poolReserve?.priceOracle, - assetName: poolReserve.name, - asset: poolReserve.underlyingAsset, - }) - } - href={currentNetworkConfig.explorerLinkBuilder({ - address: poolReserve?.priceOracle, - })} - sx={iconStyling} - > - - - - - - )} + + + trackEvent(GENERAL.EXTERNAL_LINK, { + Link: 'Oracle Price', + oracle: poolReserve?.priceOracle, + assetName: poolReserve.name, + asset: poolReserve.underlyingAsset, + }) + } + href={currentNetworkConfig.explorerLinkBuilder({ + address: poolReserve?.priceOracle, + })} + sx={{ + display: 'inline-flex', + alignItems: 'center', + justifyContent: 'center', + width: '100%', + height: '100%', + color: 'inherit', + }} + > + + + - + ); }; diff --git a/src/modules/reserve-overview/ReserveTopDetailsWrapper.tsx b/src/modules/reserve-overview/ReserveTopDetailsWrapper.tsx index d627000594..5f63f58595 100644 --- a/src/modules/reserve-overview/ReserveTopDetailsWrapper.tsx +++ b/src/modules/reserve-overview/ReserveTopDetailsWrapper.tsx @@ -1,15 +1,5 @@ import { Trans } from '@lingui/macro'; -import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackOutlined'; -import { - Box, - Button, - Divider, - Skeleton, - SvgIcon, - Typography, - useMediaQuery, - useTheme, -} from '@mui/material'; +import { Box, Skeleton, SvgIcon, Typography } from '@mui/material'; import { useRouter } from 'next/router'; import { getMarketInfoById, MarketLogo } from 'src/components/MarketSwitcher'; import { useWeb3Context } from 'src/libs/hooks/useWeb3Context'; @@ -19,7 +9,6 @@ import { displayGhoForMintableMarket } from 'src/utils/ghoUtilities'; import { useShallow } from 'zustand/shallow'; import { TopInfoPanel } from '../../components/TopInfoPanel/TopInfoPanel'; -import { TopInfoPanelItem } from '../../components/TopInfoPanel/TopInfoPanelItem'; import { useAppDataContext } from '../../hooks/app-data-provider/useAppDataProvider'; import { AddTokenDropdown } from './AddTokenDropdown'; import { GhoReserveTopDetails } from './Gho/GhoReserveTopDetails'; @@ -36,8 +25,6 @@ export const ReserveTopDetailsWrapper = ({ underlyingAsset }: ReserveTopDetailsP const [currentMarket, currentChainId] = useRootStore( useShallow((state) => [state.currentMarket, state.currentChainId]) ); - - const { market, logo } = getMarketInfoById(currentMarket); const { addERC20Token, switchNetwork, @@ -45,8 +32,7 @@ export const ReserveTopDetailsWrapper = ({ underlyingAsset }: ReserveTopDetailsP currentAccount, } = useWeb3Context(); - const theme = useTheme(); - const downToSM = useMediaQuery(theme.breakpoints.down('sm')); + const { market, logo } = getMarketInfoById(currentMarket); const poolReserve = supplyReserves.find( (reserve) => reserve.underlyingToken.address.toLowerCase() === underlyingAsset?.toLowerCase() @@ -65,18 +51,15 @@ export const ReserveTopDetailsWrapper = ({ underlyingAsset }: ReserveTopDetailsP ? iconSymbol : poolReserve!.underlyingToken.symbol; - const valueTypographyVariant = downToSM ? 'main16' : 'main21'; - const ReserveIcon = () => { return ( - + {loading ? ( - + ) : ( )} @@ -86,9 +69,11 @@ export const ReserveTopDetailsWrapper = ({ underlyingAsset }: ReserveTopDetailsP const ReserveName = () => { return loading ? ( - + ) : ( - {poolReserve.underlyingToken.name} + + {poolReserve.underlyingToken.name} + ); }; @@ -100,144 +85,118 @@ export const ReserveTopDetailsWrapper = ({ underlyingAsset }: ReserveTopDetailsP return ( - { + // https://github.com/vercel/next.js/discussions/34980 + if (!!history.state.idx) router.back(); + else router.push('/markets'); + }} + sx={{ + display: 'flex', + alignItems: 'center', + gap: '0.25rem', + width: 'fit-content', + mb: '1rem', + cursor: 'pointer', + color: 'fg-3', + '&:hover': { color: 'fg-1' }, + }} + > + + + + - - - - - - {market.marketTitle} Market - - {market.v3 && ( - theme.palette.gradients.aaveGradient, - }} - > - Version 3 - - )} - - - - {downToSM && ( - - - + Back + + + } + > + + + + + + + {!loading && ( - + {poolReserve.underlyingToken.symbol} )} - - - {loading ? ( - - ) : ( - - - {currentAccount && ( - - )} - - )} - - - )} - - } - > - {!downToSM && ( - <> - {poolReserve.underlyingToken.symbol}} - withoutIconWrapper - icon={} - loading={loading} - > - - - - - - {currentAccount && ( - + - )} - + {currentAccount && ( + + )} + + )} - - - - )} - {isGho ? ( - - ) : ( - - )} + + + on + + + + {market.marketTitle} + + + + + + + {isGho ? ( + + ) : ( + + )} + + ); }; diff --git a/src/modules/reserve-overview/SupplyInfo.tsx b/src/modules/reserve-overview/SupplyInfo.tsx index e111353d83..74903bb16d 100644 --- a/src/modules/reserve-overview/SupplyInfo.tsx +++ b/src/modules/reserve-overview/SupplyInfo.tsx @@ -1,7 +1,7 @@ import { ProtocolAction } from '@aave/contract-helpers'; import { valueToBigNumber } from '@aave/math-utils'; import { Trans } from '@lingui/macro'; -import { AlertTitle, Box, Typography } from '@mui/material'; +import { Alert, AlertTitle, Box, Typography } from '@mui/material'; import { CapsCircularStatus } from 'src/components/caps/CapsCircularStatus'; import { DebtCeilingStatus } from 'src/components/caps/DebtCeilingStatus'; import { mapAaveProtocolIncentives } from 'src/components/incentives/incentives.helper'; @@ -11,7 +11,6 @@ import { LiquidationThresholdTooltip } from 'src/components/infoTooltips/Liquida import { MaxLTVTooltip } from 'src/components/infoTooltips/MaxLTVTooltip'; import { FormattedNumber } from 'src/components/primitives/FormattedNumber'; import { Link } from 'src/components/primitives/Link'; -import { Warning } from 'src/components/primitives/Warning'; import { ReserveOverviewBox } from 'src/components/ReserveOverviewBox'; import { ReserveSubheader } from 'src/components/ReserveSubheader'; import { TextWithTooltip } from 'src/components/TextWithTooltip'; @@ -67,7 +66,7 @@ export const SupplyInfo = ({ valueToBigNumber(reserve.supplyInfo.supplyCap.amount.value).toNumber() - valueToBigNumber(reserve.supplyInfo.total.value).toNumber() } - variant="secondary12" + variant="subheader2" />{' '} {reserve.underlyingToken.symbol} ( ). @@ -114,26 +113,23 @@ export const SupplyInfo = ({ } > - + of - + of @@ -151,7 +147,7 @@ export const SupplyInfo = ({ } > - + )} @@ -161,7 +157,7 @@ export const SupplyInfo = ({ incentives={supplyProtocolIncentives} address={reserve.aToken.address} symbol={reserve.underlyingToken.symbol} - variant="main16" + variant="h4" market={currentMarketData.market} protocolAction={ProtocolAction.supply} inlineIncentives={true} @@ -184,19 +180,16 @@ export const SupplyInfo = ({ Collateral usage - - + + Asset can only be used as collateral in isolation mode only. - - - In Isolation mode you cannot supply other assets as collateral for borrowing. Assets - used as collateral in Isolation mode can only be borrowed to a specific debt - ceiling.{' '} - - Learn more - - - + + In Isolation mode you cannot supply other assets as collateral for borrowing. Assets + used as collateral in Isolation mode can only be borrowed to a specific debt ceiling.{' '} + + Learn more + + ) : reserve.supplyInfo.liquidationThreshold.value !== '0' ? ( Collateral usage - + This asset can only be used as collateral in E-Mode:{' '} {reserve.eModeInfo @@ -225,16 +218,16 @@ export const SupplyInfo = ({ .map((eMode) => replaceUnderscoresWithSpaces(eMode.label)) .join(', ')} - + ) : ( Collateral usage - + Asset cannot be used as collateral. - + )} @@ -265,7 +258,7 @@ export const SupplyInfo = ({ @@ -289,7 +282,7 @@ export const SupplyInfo = ({ @@ -313,7 +306,7 @@ export const SupplyInfo = ({ @@ -331,7 +324,7 @@ export const SupplyInfo = ({ )} {reserve.underlyingToken.symbol == 'stETH' && ( - + Staking Rewards @@ -345,7 +338,7 @@ export const SupplyInfo = ({ > Learn more - + )} diff --git a/src/modules/reserve-overview/TimeRangeSelector.tsx b/src/modules/reserve-overview/TimeRangeSelector.tsx index 395443be05..9bfd2f2f4b 100644 --- a/src/modules/reserve-overview/TimeRangeSelector.tsx +++ b/src/modules/reserve-overview/TimeRangeSelector.tsx @@ -1,5 +1,7 @@ import { TimeWindow } from '@aave/react'; -import { SxProps, Theme, ToggleButton, ToggleButtonGroup, Typography } from '@mui/material'; +import { SxProps, Theme, Typography } from '@mui/material'; +import { StyledTxModalToggleButton } from 'src/components/StyledToggleButton'; +import { StyledTxModalToggleGroup } from 'src/components/StyledToggleButtonGroup'; export const supportedTimeRangeOptions = ['1m', '3m', '6m', '1y'] as const; @@ -52,47 +54,20 @@ export const TimeRangeSelector = ({ }; return ( - - {timeRanges.map((interval) => { - return ( - | undefined => ({ - '&.MuiToggleButtonGroup-grouped:not(.Mui-selected), &.MuiToggleButtonGroup-grouped&.Mui-disabled': - { - border: '0.5px solid transparent', - backgroundColor: 'background.surface', - color: 'action.disabled', - }, - '&.MuiToggleButtonGroup-grouped&.Mui-selected': { - borderRadius: '4px', - border: `0.5px solid ${theme.palette.divider}`, - boxShadow: '0px 2px 1px rgba(0, 0, 0, 0.05), 0px 0px 1px rgba(0, 0, 0, 0.25)', - backgroundColor: 'background.paper', - }, - ...props.sx?.button, - })} - > - {formattedInterval(interval)} - - ); - })} - + {timeRanges.map((interval) => ( + + {formattedInterval(interval)} + + ))} + ); }; diff --git a/src/modules/reserve-overview/TokenLinkDropdown.tsx b/src/modules/reserve-overview/TokenLinkDropdown.tsx index 15d71038ff..f083ce7fc1 100644 --- a/src/modules/reserve-overview/TokenLinkDropdown.tsx +++ b/src/modules/reserve-overview/TokenLinkDropdown.tsx @@ -1,20 +1,19 @@ -import { ExternalLinkIcon } from '@heroicons/react/outline'; import { Trans } from '@lingui/macro'; -import { Box, Menu, MenuItem, SvgIcon, Typography } from '@mui/material'; +import { Box, Divider, Menu, MenuItem } from '@mui/material'; import * as React from 'react'; import { useState } from 'react'; -import { CircleIcon } from 'src/components/CircleIcon'; -import { TokenIcon } from 'src/components/primitives/TokenIcon'; +import { ArrowUpRightIcon } from 'src/components/icons/ArrowUpRightIcon'; import { ReserveWithId } from 'src/hooks/app-data-provider/useAppDataProvider'; import { useRootStore } from 'src/store/root'; import { useShallow } from 'zustand/shallow'; import { RESERVE_DETAILS } from '../../utils/events'; +import { ReserveHeaderIconButton } from './ReserveHeaderIconButton'; +import { MenuSectionLabel, TokenMenuItemContent } from './TokenMenuItems'; interface TokenLinkDropdownProps { poolReserve: ReserveWithId; iconSymbol?: string; - downToSM: boolean; hideAToken?: boolean; hideVariableDebtToken?: boolean; } @@ -22,7 +21,6 @@ interface TokenLinkDropdownProps { export const TokenLinkDropdown = ({ poolReserve, iconSymbol, - downToSM, hideAToken, hideVariableDebtToken, }: TokenLinkDropdownProps) => { @@ -61,21 +59,9 @@ export const TokenLinkDropdown = ({ return ( <> - - - - - - - + + + - - - Underlying token - - + + Underlying token + { @@ -109,24 +93,19 @@ export const TokenLinkDropdown = ({ address: poolReserve?.underlyingToken.address.toLowerCase(), })} target="_blank" - divider={showVariableDebtToken} > - - - {poolReserve.underlyingToken.symbol} - {!hideAToken && ( - - - - Aave aToken - - + <> + + + Aave aToken + - - - {poolReserve.aToken.symbol} - - + )} {showVariableDebtToken && ( - - + <> + + Aave debt token - - - )} - {showVariableDebtToken && ( - { - trackEvent(RESERVE_DETAILS.RESERVE_TOKEN_ACTIONS, { - type: 'Variable Debt', - assetName: poolReserve.underlyingToken.name, - asset: poolReserve.underlyingToken.address, - aToken: poolReserve.aToken.address, - market: currentMarket, - variableDebtToken: poolReserve.vToken.address, - }); - }} - > - - - {poolReserve.vToken.symbol} - - + + { + trackEvent(RESERVE_DETAILS.RESERVE_TOKEN_ACTIONS, { + type: 'Variable Debt', + assetName: poolReserve.underlyingToken.name, + asset: poolReserve.underlyingToken.address, + aToken: poolReserve.aToken.address, + market: currentMarket, + variableDebtToken: poolReserve.vToken.address, + }); + }} + > + + + )} diff --git a/src/modules/reserve-overview/TokenMenuItems.tsx b/src/modules/reserve-overview/TokenMenuItems.tsx new file mode 100644 index 0000000000..6637af89bb --- /dev/null +++ b/src/modules/reserve-overview/TokenMenuItems.tsx @@ -0,0 +1,36 @@ +import { Box, ListItemIcon, Typography } from '@mui/material'; +import { ReactNode } from 'react'; +import { TokenIcon } from 'src/components/primitives/TokenIcon'; + +/** Group heading inside the reserve token dropdowns; the 0.38rem inset aligns it with the rows. */ +export const MenuSectionLabel = ({ children }: { children: ReactNode }) => ( + + + {children} + + +); + +interface TokenMenuItemContentProps { + symbol: string; + label: ReactNode; + aToken?: boolean; + waToken?: boolean; +} + +/** Icon + symbol row shared by the "view contracts" and "add to wallet" token dropdowns. */ +export const TokenMenuItemContent = ({ + symbol, + label, + aToken, + waToken, +}: TokenMenuItemContentProps) => ( + <> + + + + + {label} + + +); diff --git a/src/modules/reserve-overview/graphs/ApyGraph.tsx b/src/modules/reserve-overview/graphs/ApyGraph.tsx index 35a14591ac..86869d65a2 100644 --- a/src/modules/reserve-overview/graphs/ApyGraph.tsx +++ b/src/modules/reserve-overview/graphs/ApyGraph.tsx @@ -180,7 +180,7 @@ export const ApyGraph = withTooltip( borderRadius: '99px', }} > - + Avg {avgFormatted}% @@ -303,11 +303,7 @@ export const ApyGraph = withTooltip( left={tooltipLeft + 40} style={theme.palette.mode === 'light' ? tooltipStyles : tooltipStylesDark} > - + {formatDate(getDate(tooltipData), selectedTimeRange)} ( justifyContent="space-between" alignItems="center" > - + {field.text} - + {getData(tooltipData, field.name).toFixed(2)}% @@ -382,7 +378,7 @@ export const PlaceholderChart = ({ - + No data available diff --git a/src/modules/reserve-overview/graphs/ApyGraphContainer.tsx b/src/modules/reserve-overview/graphs/ApyGraphContainer.tsx index 644f548bf5..19888fef1c 100644 --- a/src/modules/reserve-overview/graphs/ApyGraphContainer.tsx +++ b/src/modules/reserve-overview/graphs/ApyGraphContainer.tsx @@ -7,9 +7,10 @@ import { useSupplyAPYHistory, } from '@aave/react'; import { Trans } from '@lingui/macro'; -import { Box, CircularProgress, Typography } from '@mui/material'; +import { Box, CircularProgress, Typography, useTheme } from '@mui/material'; import { ParentSize } from '@visx/responsive'; import { useState } from 'react'; +import { pickFigma } from 'src/utils/figmaColors'; import { ApyGraph, FormattedReserveHistoryItem, PlaceholderChart } from './ApyGraph'; import { GraphLegend } from './GraphLegend'; @@ -42,6 +43,7 @@ type ApyGraphProps = { export const SupplyApyGraph = ({ chain, underlyingToken, market }: ApyGraphProps) => { const [selectedTimeRange, setSelectedTimeRange] = useState(TimeWindow.LastWeek); + const { palette } = useTheme(); const { data, loading, error } = useSupplyAPYHistory({ chainId: chainId(chain), @@ -53,7 +55,7 @@ export const SupplyApyGraph = ({ chain, underlyingToken, market }: ApyGraphProps return ( { const [selectedTimeRange, setSelectedTimeRange] = useState(TimeWindow.LastWeek); + const { palette } = useTheme(); const { data, loading, error } = useBorrowAPYHistory({ chainId: chainId(chain), @@ -76,7 +79,7 @@ export const BorrowApyGraph = ({ chain, underlyingToken, market }: ApyGraphProps return ( - + Loading data... diff --git a/src/modules/reserve-overview/graphs/GraphLegend.tsx b/src/modules/reserve-overview/graphs/GraphLegend.tsx index 5a4679bd0e..7060b8765c 100644 --- a/src/modules/reserve-overview/graphs/GraphLegend.tsx +++ b/src/modules/reserve-overview/graphs/GraphLegend.tsx @@ -23,7 +23,7 @@ export function GraphLegend({ borderRadius: '50%', }} /> - + {label.text} diff --git a/src/modules/reserve-overview/graphs/InterestRateModelGraph.tsx b/src/modules/reserve-overview/graphs/InterestRateModelGraph.tsx index e5224dccdf..8e229fafcc 100644 --- a/src/modules/reserve-overview/graphs/InterestRateModelGraph.tsx +++ b/src/modules/reserve-overview/graphs/InterestRateModelGraph.tsx @@ -378,7 +378,7 @@ export const InterestRateModelGraph = withTooltip( parseFloat(reserve.totalDebtUSD) > 0 ? ( <> - + Borrow amount to reach {tooltipData.utilization}% utilization @@ -394,7 +394,7 @@ export const InterestRateModelGraph = withTooltip( ) : ( <> - + Repayment amount to reach {tooltipData.utilization}% utilization @@ -417,10 +417,10 @@ export const InterestRateModelGraph = withTooltip( {fields.map((field) => ( - + {field.text} - + {tooltipValueAccessors[field.name](tooltipData).toFixed(2)}% diff --git a/src/modules/reserve-overview/graphs/MeritApyGraph.tsx b/src/modules/reserve-overview/graphs/MeritApyGraph.tsx index 40d848a32c..d2ab2b03f6 100644 --- a/src/modules/reserve-overview/graphs/MeritApyGraph.tsx +++ b/src/modules/reserve-overview/graphs/MeritApyGraph.tsx @@ -196,7 +196,7 @@ export const MeritApyGraph = withTooltip( borderRadius: '99px', }} > - + Avg {averageLine.avgFormatted}% @@ -287,18 +287,14 @@ export const MeritApyGraph = withTooltip( left={tooltipLeft + 40} style={theme.palette.mode === 'light' ? tooltipStyles : tooltipStylesDark} > - + {formatDate(getDate(tooltipData))} - + Merit APY - + {getMeritApy(tooltipData).toFixed(2)}% diff --git a/src/modules/reserve-overview/graphs/MeritApyGraphContainer.tsx b/src/modules/reserve-overview/graphs/MeritApyGraphContainer.tsx index 5de95b4252..2c16bf4f1a 100644 --- a/src/modules/reserve-overview/graphs/MeritApyGraphContainer.tsx +++ b/src/modules/reserve-overview/graphs/MeritApyGraphContainer.tsx @@ -98,7 +98,7 @@ export const MeritApyGraphContainer = ({ }} > - + Loading data... @@ -122,7 +122,7 @@ export const MeritApyGraphContainer = ({ Data couldn't be fetched, please reload graph. {onRetry && ( - )} diff --git a/src/modules/sGho/SGhoCard.tsx b/src/modules/sGho/SGhoCard.tsx index 12fb435a21..25df16cbd3 100644 --- a/src/modules/sGho/SGhoCard.tsx +++ b/src/modules/sGho/SGhoCard.tsx @@ -1,5 +1,5 @@ import { Trans } from '@lingui/macro'; -import { Box, Paper, Typography, useMediaQuery, useTheme } from '@mui/material'; +import { Box, Paper, Typography } from '@mui/material'; import { useWalletBalances } from 'src/hooks/app-data-provider/useWalletBalances'; import { useModalContext } from 'src/hooks/useModal'; import { useSavingsMarketData } from 'src/hooks/useSavingsMarketData'; @@ -10,8 +10,6 @@ import { SGhoDepositPanel } from './SGhoDepositPanel'; export const SGhoCard = () => { const { chainId, marketKey } = useSavingsMarketData(); - const { breakpoints } = useTheme(); - const downToXsm = useMediaQuery(breakpoints.down('xsm')); const { openSwitch, openSGhoVaultDeposit, openSGhoVaultWithdraw } = useModalContext(); const { vault, loading: vaultLoading } = useSGhoVaultContext(); @@ -42,10 +40,9 @@ export const SGhoCard = () => { return ( ({ + sx={{ display: 'flex', alignItems: { xs: 'stretch', xsm: 'center' }, justifyContent: 'space-between', flexDirection: { xs: 'column', xsm: 'row' }, gap: 4, borderRadius: { xs: '8px', xsm: '6px' }, - border: `1px solid ${theme.palette.divider}`, + border: `1px solid ${figVars['border-2']}`, p: 4, mb: 6, - background: theme.palette.background.paper, - })} + background: figVars['surface-elevated'], + }} > @@ -43,13 +44,13 @@ export const SGhoDepositRow = ({ sGHO - + Available to deposit: @@ -66,10 +67,10 @@ export const SGhoDepositRow = ({ }} > - + Staking APR - + {hasGho ? ( diff --git a/src/modules/sGho/SGhoHeader.tsx b/src/modules/sGho/SGhoHeader.tsx index ef6d450ab9..c2af1d9551 100644 --- a/src/modules/sGho/SGhoHeader.tsx +++ b/src/modules/sGho/SGhoHeader.tsx @@ -1,16 +1,16 @@ import { Trans } from '@lingui/macro'; -import { Box, Stack, Typography, useMediaQuery, useTheme } from '@mui/material'; +import { Typography, useMediaQuery, useTheme } from '@mui/material'; import NumberFlow from '@number-flow/react'; import { BigNumber } from 'bignumber.js'; import { useEffect, useState } from 'react'; +import { PageHeader } from 'src/components/PageHeader/PageHeader'; +import { PageHeaderStat } from 'src/components/PageHeader/PageHeaderStat'; import { FormattedNumber } from 'src/components/primitives/FormattedNumber'; import { TokenIcon } from 'src/components/primitives/TokenIcon'; import { TextWithTooltip } from 'src/components/TextWithTooltip'; -import { TopInfoPanel } from 'src/components/TopInfoPanel/TopInfoPanel'; import { useSGhoVaultContext } from 'src/modules/sGho/SGhoVaultContext'; import { useRootStore } from 'src/store/root'; - -import { TopInfoPanelItem } from '../../components/TopInfoPanel/TopInfoPanelItem'; +import { convertAprToApy } from 'src/utils/utils'; export const SGHOHeader: React.FC = () => { const theme = useTheme(); @@ -23,16 +23,13 @@ export const SGHOHeader: React.FC = () => { }); }, [trackEvent]); - const upToLG = useMediaQuery(theme.breakpoints.up('lg')); const downToSM = useMediaQuery(theme.breakpoints.down('sm')); - const downToXSM = useMediaQuery(theme.breakpoints.down('xsm')); - const valueTypographyVariant = downToSM ? 'main16' : 'main21'; - const symbolsTypographyVariant = downToSM ? 'secondary16' : 'secondary21'; - const symbolsColor = theme.palette.text.muted; - const iconSize = valueTypographyVariant === 'main21' ? 20 : 16; + const valueTypographyVariant = downToSM ? 'h4' : 'h2'; + const iconSize = valueTypographyVariant === 'h2' ? 20 : 16; const apr = vault?.targetRate ? +vault.targetRate.value : 0; + const apyPercent = (convertAprToApy(apr) * 100).toFixed(2); const totalDepositedUSD = vault?.totalAssets?.usd ?? '0'; const totalAssetsValue = vault?.totalAssets ? +vault.totalAssets.amount.value : 0; @@ -54,77 +51,45 @@ export const SGHOHeader: React.FC = () => { }, [weeklyRewardsEstimate]); return ( - - - - - Savings GHO - - - - - - Deposit GHO into Savings GHO (sGHO) and earn{' '} - - {(apr * 100).toFixed(2)}% - {' '} - APR on your GHO holdings. There are no lockups, no rehypothecation, and you can - withdraw anytime. Simply deposit GHO, receive sGHO tokens representing your balance, - and watch your savings grow. - - - + Savings GHO} + titleIcon={} + description={ + + Deposit GHO into Savings GHO (sGHO) and earn {apyPercent}% APY on your GHO holdings. + } > - Current APR} loading={loading}> - - + Current APR} loading={loading}> + + - Total Deposited} loading={loading}> + Total Deposited} loading={loading}> - + - Price} loading={loading}> + Price} loading={loading}> - + - - Weekly Rewards} variant="inherit"> - - Estimated weekly rewards based on your current sGHO balance and APR. Actual rewards - may vary depending on market conditions. - - - + Weekly Rewards} variant="inherit"> + + Estimated weekly rewards based on your current sGHO balance and APR. Actual rewards + may vary depending on market conditions. + + } loading={loading} > @@ -167,11 +132,11 @@ export const SGHOHeader: React.FC = () => { ) : ( - + — )} - - + + ); }; diff --git a/src/modules/sGho/SGhoLoggedOutPreview.tsx b/src/modules/sGho/SGhoLoggedOutPreview.tsx index 8347fe2d72..bf6a7c70f1 100644 --- a/src/modules/sGho/SGhoLoggedOutPreview.tsx +++ b/src/modules/sGho/SGhoLoggedOutPreview.tsx @@ -1,6 +1,7 @@ import { Trans } from '@lingui/macro'; import { Box, Button, Typography, useMediaQuery, useTheme } from '@mui/material'; import { FormattedNumber } from 'src/components/primitives/FormattedNumber'; +import { figVars } from 'src/utils/figmaColors'; import { StakeActionBox } from '../staking/StakeActionBox'; @@ -24,28 +25,28 @@ export const SGhoLoggedOutPreview = ({ rate }: SGhoLoggedOutPreviewProps) => { Deposit GHO - + Deposit GHO and earn up to {(rate * 100).toFixed(2)}% APR ({ + sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderRadius: { xs: '8px', xsm: '6px' }, - border: `1px solid ${theme.palette.divider}`, + border: `1px solid ${figVars['border-2']}`, p: 4, mb: 6, - background: theme.palette.background.paper, - })} + background: figVars['surface-elevated'], + }} > - + Staking APR - + diff --git a/src/modules/sGho/SGhoSavingsRate.tsx b/src/modules/sGho/SGhoSavingsRate.tsx index 8b34d53daf..bdefe0d4ea 100644 --- a/src/modules/sGho/SGhoSavingsRate.tsx +++ b/src/modules/sGho/SGhoSavingsRate.tsx @@ -27,29 +27,29 @@ export const SGhoSavingsRate = ({ totalDepositedUSD, rate }: SGhoSavingsRateProp sx={{ mb: 4 }} > - + Total Deposited - + APR - + - + APY, fixed rate - + diff --git a/src/modules/sGho/SGhoWithdrawRow.tsx b/src/modules/sGho/SGhoWithdrawRow.tsx index 25d520ef47..54608e0d3d 100644 --- a/src/modules/sGho/SGhoWithdrawRow.tsx +++ b/src/modules/sGho/SGhoWithdrawRow.tsx @@ -20,18 +20,18 @@ export const SGhoWithdrawRow = ({ balance, balanceUSD, onWithdraw }: SGhoWithdra valueUSD={balanceUSD} dataCy="sghoBalanceBox" bottomLineTitle={ - + Cooldown period } bottomLineComponent={ - + Instant } > - - - )} - - ); -}; - -const UmbrellaHeaderDefault = ({ - currentMarketData, - valueTypographyVariant, - symbolsTypographyVariant, -}: { - currentMarketData: MarketDataType; - valueTypographyVariant: 'main16' | 'main21'; - symbolsTypographyVariant: 'secondary16' | 'secondary21'; -}) => { - const theme = useTheme(); - const { data: stakeData, loading } = useStakeDataSummary(currentMarketData); - - return ( - <> - - Total amount staked - - } - loading={loading} - > - - + ); }; diff --git a/src/modules/umbrella/UmbrellaMarketSwitcher.tsx b/src/modules/umbrella/UmbrellaMarketSwitcher.tsx deleted file mode 100644 index 78d352f5aa..0000000000 --- a/src/modules/umbrella/UmbrellaMarketSwitcher.tsx +++ /dev/null @@ -1,385 +0,0 @@ -import { ChevronDownIcon } from '@heroicons/react/outline'; -import { Trans } from '@lingui/macro'; -import { - Box, - BoxProps, - ListItemText, - MenuItem, - SvgIcon, - TextField, - Tooltip, - Typography, - useMediaQuery, - useTheme, -} from '@mui/material'; -import React, { useState } from 'react'; -import { useRootStore } from 'src/store/root'; -import { BaseNetworkConfig } from 'src/ui-config/networksConfig'; -import { DASHBOARD } from 'src/utils/events'; -import { - availableMarkets, - CustomMarket, - ENABLE_TESTNET, - MarketDataType, - marketsData, - networkConfigs, - STAGING_ENV, -} from 'src/utils/marketsAndNetworksConfig'; -import { useShallow } from 'zustand/shallow'; - -export const getMarketInfoById = (marketId: CustomMarket) => { - const market: MarketDataType = marketsData[marketId as CustomMarket]; - const network: BaseNetworkConfig = networkConfigs[market.chainId]; - const logo = market.logo || network.networkLogoPath; - - return { market, logo }; -}; - -export const getMarketHelpData = (marketName: string) => { - const testChains = [ - 'Görli', - 'Ropsten', - 'Mumbai', - 'Sepolia', - 'Fuji', - 'Testnet', - 'Kovan', - 'Rinkeby', - ]; - const arrayName = marketName.split(' '); - const testChainName = arrayName.filter((el) => testChains.indexOf(el) > -1); - const marketTitle = arrayName.filter((el) => !testChainName.includes(el)).join(' '); - - return { - name: marketTitle, - testChainName: testChainName[0], - }; -}; - -export type Market = { - marketTitle: string; - networkName: string; - networkLogo: string; - selected?: boolean; -}; - -type MarketLogoProps = { - size: number; - logo: string; - testChainName?: string; - sx?: BoxProps; -}; - -export const MarketLogo = ({ size, logo, testChainName, sx }: MarketLogoProps) => { - return ( - - - - {testChainName && ( - - - {testChainName.split('')[0]} - - - )} - - ); -}; - -enum SelectedMarketVersion { - V2, - V3, -} - -// TODO -// Fetch markets that are active for umbrella. -// Strip out any code not used for v2 -// Style to design specifications - -export const MarketSwitcher = () => { - const [selectedMarketVersion] = useState(SelectedMarketVersion.V3); - const theme = useTheme(); - const upToLG = useMediaQuery(theme.breakpoints.up('lg')); - const downToXSM = useMediaQuery(theme.breakpoints.down('xsm')); - const [trackEvent, currentMarket, setCurrentMarket] = useRootStore( - useShallow((store) => [store.trackEvent, store.currentMarket, store.setCurrentMarket]) - ); - - const isV3MarketsAvailable = availableMarkets - .map((marketId: CustomMarket) => { - const { market } = getMarketInfoById(marketId); - - return market.v3; - }) - .some((item) => !!item); - - const handleMarketSelect = (e: React.ChangeEvent) => { - trackEvent(DASHBOARD.CHANGE_MARKET, { market: e.target.value }); - setCurrentMarket(e.target.value as unknown as CustomMarket); - }; - - // const marketBlurbs: { [key: string]: JSX.Element } = { - // proto_mainnet_v3: ( - // Main Ethereum market with the largest selection of assets and yield options - // ), - // proto_lido_v3: ( - // Optimized for efficiency and risk by supporting blue-chip collateral assets - // ), - // }; - - return ( - null, - renderValue: (marketId) => { - const { market, logo } = getMarketInfoById(marketId as CustomMarket); - - return ( - - {/* Main Row with Market Name */} - - - - - {getMarketHelpData(market.marketTitle).name} {market.isFork ? 'Fork' : ''} - {/* {upToLG && - (currentMarket === 'proto_mainnet_v3' || currentMarket === 'proto_lido_v3') - ? 'Instance' - : ' Market'} */} - - - - {/* - V2 - */} - - - - - - - - {/* {marketBlurbs[currentMarket] && ( - - {marketBlurbs[currentMarket]} - - )} */} - - ); - }, - - sx: { - '&.MarketSwitcher__select .MuiSelect-outlined': { - pl: 0, - py: 0, - backgroundColor: 'transparent !important', - }, - '.MuiSelect-icon': { color: '#F1F1F3' }, - }, - MenuProps: { - anchorOrigin: { - vertical: 'bottom', - horizontal: 'right', - }, - transformOrigin: { - vertical: 'top', - horizontal: 'right', - }, - PaperProps: { - style: { - minWidth: 240, - }, - variant: 'outlined', - elevation: 0, - }, - }, - }} - > - - - - {ENABLE_TESTNET || STAGING_ENV ? 'Select Aave Testnet Market' : 'Select Aave Market'} - - - - {isV3MarketsAvailable && ( - - {/* { - if (value !== null) { - setSelectedMarketVersion(value); - } - }} - sx={{ - width: '100%', - height: '36px', - background: theme.palette.primary.main, - border: `1px solid ${ - theme.palette.mode === 'dark' ? 'rgba(235, 235, 237, 0.12)' : '#1B2030' - }`, - borderRadius: '6px', - marginTop: '16px', - marginBottom: '12px', - padding: '2px', - }} - > - - theme.palette.gradients.aaveGradient, - backgroundClip: 'text', - color: 'transparent', - } - : { - color: theme.palette.mode === 'dark' ? '#0F121D' : '#FFFFFF', - } - } - > - Version 3 - - - - theme.palette.gradients.aaveGradient, - backgroundClip: 'text', - color: 'transparent', - } - : { - color: theme.palette.mode === 'dark' ? '#0F121D' : '#FFFFFF', - } - } - > - Version 2 - - - */} - - )} - {availableMarkets.map((marketId: CustomMarket) => { - const { market, logo } = getMarketInfoById(marketId); - const marketNaming = getMarketHelpData(market.marketTitle); - return ( - - - - {marketNaming.name} {market.isFork ? 'Fork' : ''} - - - - {marketNaming.testChainName} - - - - ); - })} - - ); -}; diff --git a/src/modules/umbrella/UmbrellaModalContent.tsx b/src/modules/umbrella/UmbrellaModalContent.tsx index 7ff2fd4bc3..22876f56ea 100644 --- a/src/modules/umbrella/UmbrellaModalContent.tsx +++ b/src/modules/umbrella/UmbrellaModalContent.tsx @@ -1,11 +1,10 @@ import { USD_DECIMALS, valueToBigNumber } from '@aave/math-utils'; import { Trans } from '@lingui/macro'; -import { Box, Checkbox, Skeleton, Stack, Typography } from '@mui/material'; +import { Alert, Box, Checkbox, Skeleton, Stack, Typography } from '@mui/material'; import { parseUnits } from 'ethers/lib/utils'; import React, { useState } from 'react'; import { FormattedNumber } from 'src/components/primitives/FormattedNumber'; import { Row } from 'src/components/primitives/Row'; -import { Warning } from 'src/components/primitives/Warning'; import { TextWithTooltip } from 'src/components/TextWithTooltip'; import { AssetInput } from 'src/components/transactions/AssetInput'; import { TxErrorView } from 'src/components/transactions/FlowCommons/Error'; @@ -224,10 +223,10 @@ export const UmbrellaModalContent = ({ stakeData, user, userReserve, poolReserve /> ) : ( <> - + - + Staking this amount will reduce your health factor and increase risk of liquidation. - + - + )} diff --git a/src/modules/umbrella/helpers/AmountAvailableItem.tsx b/src/modules/umbrella/helpers/AmountAvailableItem.tsx index ed5a818530..99aba67b69 100644 --- a/src/modules/umbrella/helpers/AmountAvailableItem.tsx +++ b/src/modules/umbrella/helpers/AmountAvailableItem.tsx @@ -27,12 +27,12 @@ export const AmountAvailableItem = ({ aToken={aToken} waToken={waToken} /> - {name} + {name} } width="100%" > - + ); }; diff --git a/src/modules/umbrella/helpers/ApyTooltip.tsx b/src/modules/umbrella/helpers/ApyTooltip.tsx index 7ffc3c9a72..8b79c5205a 100644 --- a/src/modules/umbrella/helpers/ApyTooltip.tsx +++ b/src/modules/umbrella/helpers/ApyTooltip.tsx @@ -1,10 +1,11 @@ import { Trans } from '@lingui/macro'; +import { TypographyProps } from '@mui/material'; import { Link } from 'src/components/primitives/Link'; import { TextWithTooltip } from 'src/components/TextWithTooltip'; -export const ApyTooltip = () => { +export const ApyTooltip = ({ variant }: { variant?: TypographyProps['variant'] }) => { return ( - APY}> + APY} variant={variant}> <> Reward APY adjusts with total staked amount, following a curve that targets optimal diff --git a/src/modules/umbrella/helpers/Helpers.tsx b/src/modules/umbrella/helpers/Helpers.tsx index 831ffa4015..6e4a2c28ce 100644 --- a/src/modules/umbrella/helpers/Helpers.tsx +++ b/src/modules/umbrella/helpers/Helpers.tsx @@ -44,7 +44,7 @@ export const UmbrellaAssetBreakdown = ({ flexDirection: 'column', }} > - + Participating in staking {symbol} gives annualized rewards. Your wallet balance is the sum of your aTokens and underlying assets. The breakdown to stake is below @@ -70,7 +70,7 @@ export const UmbrellaAssetBreakdown = ({ @@ -92,7 +92,7 @@ export const UmbrellaAssetBreakdown = ({ @@ -115,12 +115,12 @@ export const UmbrellaAssetBreakdown = ({ - ({ pt: 1, mt: 1 })}> + Total} height={32}> diff --git a/src/modules/umbrella/helpers/SharesTooltip.tsx b/src/modules/umbrella/helpers/SharesTooltip.tsx index 1ee186dd4a..2e5849b8fc 100644 --- a/src/modules/umbrella/helpers/SharesTooltip.tsx +++ b/src/modules/umbrella/helpers/SharesTooltip.tsx @@ -1,9 +1,10 @@ import { Trans } from '@lingui/macro'; +import { TypographyProps } from '@mui/material'; import { TextWithTooltip } from 'src/components/TextWithTooltip'; -export const SharesTooltip = () => { +export const SharesTooltip = ({ variant }: { variant?: TypographyProps['variant'] }) => { return ( - Shares}> + Shares} variant={variant}> <> Shares are Umbrella Stake Tokens you receive when staking. They represent your ownership diff --git a/src/modules/umbrella/helpers/StakedUnderlyingTooltip.tsx b/src/modules/umbrella/helpers/StakedUnderlyingTooltip.tsx index 3449c3c03e..284e245c07 100644 --- a/src/modules/umbrella/helpers/StakedUnderlyingTooltip.tsx +++ b/src/modules/umbrella/helpers/StakedUnderlyingTooltip.tsx @@ -1,9 +1,10 @@ import { Trans } from '@lingui/macro'; +import { TypographyProps } from '@mui/material'; import { TextWithTooltip } from 'src/components/TextWithTooltip'; -export const StakedUnderlyingTooltip = () => { +export const StakedUnderlyingTooltip = ({ variant }: { variant?: TypographyProps['variant'] }) => { return ( - Staked Underlying}> + Staked Underlying} variant={variant}> <> Total amount of underlying assets staked. This number represents the combined sum of your diff --git a/src/modules/umbrella/helpers/StakingDropdown.tsx b/src/modules/umbrella/helpers/StakingDropdown.tsx index 803f60992f..d5daccef0d 100644 --- a/src/modules/umbrella/helpers/StakingDropdown.tsx +++ b/src/modules/umbrella/helpers/StakingDropdown.tsx @@ -81,7 +81,8 @@ export const StakingDropdown = ({ stakeData }: { stakeData: MergedStakeData }) = + */ +export const iconButtonSx = { + minWidth: 0, + p: '0.25rem', + // Square: match the width to the button's own height (set by its size slot) so it's a square + // whatever the icon's width — otherwise a medium button (36px tall) with an 18px icon renders + // as a tall rectangle. + aspectRatio: '1', + // Fixed radius even at size="small" (whose slot would otherwise apply 0.375rem); sx wins + // over the theme's per-size styleOverride. + borderRadius: '0.5rem', + // `satisfies` (not a `SxProps` annotation) keeps the narrow literal type so this can also be + // composed inside an `sx` array — e.g. `sx={[iconButtonSx, { ... }]}`. +} satisfies SxProps; diff --git a/src/utils/colorToP3.ts b/src/utils/colorToP3.ts new file mode 100644 index 0000000000..f53dbe8aef --- /dev/null +++ b/src/utils/colorToP3.ts @@ -0,0 +1,18 @@ +import { decomposeColor } from '@mui/material/styles'; + +/** + * Convert an sRGB color string (hex, `rgb()`, or `rgba()`) to its Display-P3 equivalent + * using the same naive channel mapping the Figma export uses (channels / 255, relabeled as + * `color(display-p3 …)`). This matches the design source's P3 values and, on wide-gamut + * displays, renders saturated colors richer while leaving near-grays visually unchanged. + * + * Used to generate the `@supports (color-gamut: p3)` override layer for the theme's CSS + * variables. Non-color / already-`color()` inputs are returned unchanged. + */ +export const colorToP3 = (color: string): string => { + if (!color.startsWith('#') && !color.startsWith('rgb')) return color; + // decomposeColor parses #nnn / #nnnnnn / rgb() / rgba() → { values: [r, g, b, a?] } (r,g,b 0-255). + const [r, g, b, a] = decomposeColor(color).values; + const channels = `${r / 255} ${g / 255} ${b / 255}`; + return a === undefined ? `color(display-p3 ${channels})` : `color(display-p3 ${channels} / ${a})`; +}; diff --git a/src/utils/figmaColors.ts b/src/utils/figmaColors.ts new file mode 100644 index 0000000000..d42e4b3903 --- /dev/null +++ b/src/utils/figmaColors.ts @@ -0,0 +1,306 @@ +/** + * Figma color tokens — the SINGLE SOURCE OF TRUTH for every color value in the app (light + + * dark). The theme flattens these onto the MUI palette root, so each becomes a `--mui-palette-*` + * CSS var (Display-P3 + sRGB fallback). Consume them as bare token strings in `sx` + * (`sx={{ bgcolor: 'bg-1' }}`) or via `figVars` outside `sx` — never hand-write hex in components. + */ +export const figmaLight = { + 'bg-max': '#f0f0f0', + 'bg-1': '#fafafa', + 'bg-2': '#fcfcfc', + 'bg-3': '#ffffff', + 'bg-4': '#f2f2f2', + 'bg-5': '#f1f1f1', + 'bg-6': '#ebebeb', + 'border-0': 'rgba(0, 0, 0, 0.06)', + 'border-1': 'rgba(0, 0, 0, 0.08)', + 'border-2': 'rgba(0, 0, 0, 0.1)', + 'fg-max': '#000000', + 'fg-1': '#000000', + 'fg-2': '#666666', + 'fg-3': '#7d7d7d', + 'fg-4': '#a8a8a8', + 'fg-5': '#b3b3b3', + // Muted icon grey (search, sortable-column chevrons, …). Deliberately mode-agnostic — the same + // value in both maps — unlike the fg-* ramp steps. + 'fg-icon': '#A8A8A8', + selected: 'rgba(46, 15, 15, 0.04)', + 'blue-1': '#1a88f8', + 'blue-2': '#48abff', + 'blue-3': '#a9e7ff', + 'yellow-1': '#ffb200', + 'yellow-2': '#ffcc00', + 'yellow-3': '#f6d551', + 'red-1': '#f24900', + 'red-2': '#ff8947', + 'red-3': '#ffc693', + 'purple-1': '#9391f7', + 'purple-2': '#bcbbff', + 'purple-3': '#e2e0ff', + 'green-1': '#1f807b', + 'green-2': '#63bbb6', + 'green-3': '#9debe7', + 'cyan-1': '#6bcef5', + 'cyan-2': '#b5e7fa', + 'cyan-3': '#dff6ff', + 'navy-1': '#1c4886', + 'navy-2': '#6188c0', + 'navy-3': '#b0d3ff', + 'shadow-low': 'rgba(0, 0, 0, 0.03)', + 'shadow-medium': 'rgba(0, 0, 0, 0.05)', + 'shadow-high': 'rgba(0, 0, 0, 0.07)', + 'shadow-strong': 'rgba(0, 0, 0, 0.11)', + 'shadow-stroke-1': 'rgba(0, 0, 0, 0.06)', + 'shadow-stroke-2': 'rgba(0, 0, 0, 0.08)', + ethereum: '#25292e', + focus: 'rgba(26, 136, 248, 0.2)', + scrim: 'rgba(247, 246, 246, 0.8)', + // Data-viz categorical palette (17 hues, red → pink). + 'data-red': '#FF4760', + 'data-coral': '#FF513D', + 'data-orange': '#FF7029', + 'data-honey': '#FF8C00', + 'data-yellow': '#DBA400', + 'data-pear': '#CCAB00', + 'data-light-green': '#22CE80', + 'data-green': '#00BD68', + 'data-matcha': '#89BE2D', + 'data-seafoam': '#00B89F', + 'data-teal': '#05B4C7', + 'data-lagoon': '#12B4D9', + 'data-blue': '#38B0F5', + 'data-azure': '#4797FF', + 'data-purple': '#837AFF', + 'data-lavender': '#C061FF', + 'data-pink': '#EB47CF', + 'button-hover': 'rgba(0, 0, 0, 0.025)', + 'data-green-gho': '#5dff93', + // Gold for the favourited market star (mode-agnostic; Figma color(display-p3 1 0.7 0)). + 'favourite-star': '#FFB300', + // Alert "danger" severity red (icon + gradient); distinct from the muted error-* palette. + danger: '#DC2626', + // sGHO markets-banner gradient: a data-green wash at 6% fading to the banner's own surface. + 'sgho-banner-green': 'rgba(50, 201, 88, 0.06)', + 'chain-testnet': '#8594ab', + 'chain-ethereum': '#25292e', + 'chain-polygon': '#8347e5', + 'chain-base': '#0052ff', + 'chain-optimism': '#e84142', + 'chain-lens': '#36a136', + 'chain-arbitrum': '#28a0f0', + 'chain-blast': '#ffc700', + 'chain-scroll': '#f8cf6e', + 'chain-worldchain': '#ff9d00', + 'chain-zksync': '#8c8dfe', + bone: '#f6f7f4', + // Opaque hover fill for the Select trigger. A SINGLE per-mode token rather than a base + + // `darkScheme()` override, so it resolves to the NEAREST color scheme — the dev showcase's local + // toggle works even when the app's global scheme differs (the dark selector matches any ancestor, + // including , so a two-token swap leaks across a nested scheme boundary). + 'bg-4-hover': '#f6f7f4', + // --- semantic tokens promoted from theme-file literals (SoT) --- + 'secondary-main': '#FF607B', + 'secondary-light': '#FF607B', + 'secondary-dark': '#B34356', + 'error-light': '#D26666', + 'error-dark': '#BC0000', + 'error-text': '#4F1919', + 'error-bg': '#F9EBEB', + 'warning-light': '#FFCE00', + 'warning-dark': '#C67F15', + 'warning-text': '#63400A', + 'warning-bg': '#FEF5E8', + 'info-light': '#0062D2', + 'info-dark': '#002754', + 'info-text': '#002754', + 'info-bg': '#E5EFFB', + 'success-light': '#90FF95', + 'success-dark': '#318435', + 'success-text': '#1C4B1E', + 'success-bg': '#ECF8ED', + 'disabled-fg': '#BBBECA', + 'disabled-bg': '#EAEBEF', + 'input-line': '#383D511F', + 'input-border-hover': '#CBCDD8', + 'surface-elevated': '#ffffff', + 'table-bg': '#ffffff', + // --- semantic / button (Figma collection) --- + 'button-hover-primary': 'rgba(255, 255, 255, 0.16)', + 'button-hover-secondary': 'rgba(0, 0, 0, 0.03)', + 'button-hover-tertiary': 'rgba(0, 0, 0, 0.04)', +} as const; + +export const figmaDark = { + 'bg-max': '#0a0a0b', + 'bg-1': '#100f0f', + 'bg-2': '#1a1919', + 'bg-3': '#1f1e1e', + 'bg-4': '#2a2828', + 'bg-5': '#393737', + 'bg-6': '#494646', + 'border-0': 'rgba(255, 255, 255, 0.06)', + 'border-1': 'rgba(255, 255, 255, 0.08)', + 'border-2': 'rgba(255, 255, 255, 0.12)', + 'fg-max': '#ffffff', + 'fg-1': '#ffffff', + 'fg-2': '#bcbbbb', + 'fg-3': '#8f8e8e', + 'fg-4': '#636161', + 'fg-5': '#ffffff', + // Muted icon grey (search, sortable-column chevrons, …). Deliberately mode-agnostic — the same + // value in both maps — unlike the fg-* ramp steps. + 'fg-icon': '#A8A8A8', + selected: 'rgba(255, 255, 255, 0.06)', + 'blue-1': '#1a88f8', + 'blue-2': '#48abff', + 'blue-3': '#a9e7ff', + 'yellow-1': '#ffc42c', + 'yellow-2': '#ffd631', + 'yellow-3': '#fff7ae', + 'red-1': '#f24900', + 'red-2': '#ff8947', + 'red-3': '#ffc693', + 'purple-1': '#9391f7', + 'purple-2': '#bcbbff', + 'purple-3': '#e2e0ff', + 'green-1': '#1f807b', + 'green-2': '#63bbb6', + 'green-3': '#9debe7', + 'cyan-1': '#6bcef5', + 'cyan-2': '#b5e7fa', + 'cyan-3': '#dff6ff', + 'navy-1': '#1c4886', + 'navy-2': '#6188c0', + 'navy-3': '#b0d3ff', + 'data-red': '#E05269', + 'data-coral': '#FF7045', + 'data-orange': '#E68662', + 'data-honey': '#F59942', + 'data-yellow': '#FDC75A', + 'data-pear': '#FFE042', + 'data-light-green': '#C1E38D', + 'data-green': '#66C399', + 'data-matcha': '#92D492', + 'data-seafoam': '#78D3B3', + 'data-teal': '#8DE3CC', + 'data-lagoon': '#83DDDF', + 'data-blue': '#88D5ED', + 'data-azure': '#88C0FE', + 'data-purple': '#A5A3FF', + 'data-lavender': '#C9A1EF', + 'data-pink': '#E1A4D9', + 'shadow-low': 'rgba(0, 0, 0, 0.15)', + 'shadow-medium': 'rgba(0, 0, 0, 0.3)', + 'shadow-high': 'rgba(0, 0, 0, 0.35)', + 'shadow-strong': 'rgba(0, 0, 0, 0.5)', + 'shadow-stroke-1': 'rgba(255, 255, 255, 0.08)', + 'shadow-stroke-2': 'rgba(255, 255, 255, 0.1)', + ethereum: '#434b55', + focus: 'rgba(85, 167, 251, 0.3)', + scrim: 'rgba(71, 67, 67, 0.8)', + 'button-hover': 'rgba(255, 255, 255, 0.025)', + 'table-item-hover-1': '#1e1d1d', + 'table-item-hover-2': '#282727', + 'data-green-gho': '#5dff93', + // Gold for the favourited market star (mode-agnostic; Figma color(display-p3 1 0.7 0)). + 'favourite-star': '#FFB300', + // Alert "danger" severity red (icon + gradient); distinct from the muted error-* palette. + danger: '#DC2626', + // sGHO markets-banner gradient: a data-green wash at 6% fading to the banner's own surface. + 'sgho-banner-green': 'rgba(102, 195, 153, 0.06)', + 'wallet-modal-more-networks-label': 'rgba(255, 255, 255, 0.4)', + 'chain-testnet': '#bfc6d1', + 'chain-ethereum': '#7e8287', + 'chain-polygon': '#8347e5', + 'chain-base': '#0052ff', + 'chain-optimism': '#e84142', + 'chain-lens': '#36a136', + 'chain-arbitrum': '#28a0f0', + 'chain-blast': '#ffc700', + 'chain-scroll': '#f8cf6e', + 'chain-worldchain': '#ff9d00', + 'chain-zksync': '#8c8dfe', + bone: '#f6f7f4', + 'bg-4-hover': '#28282a', + // --- semantic tokens promoted from theme-file literals (SoT) --- + 'secondary-main': '#F48FB1', + 'secondary-light': '#F6A5C0', + 'secondary-dark': '#AA647B', + 'error-light': '#E57373', + 'error-dark': '#D32F2F', + 'error-text': '#FBB4AF', + 'error-bg': '#2E0C0A', + 'warning-light': '#FFB74D', + 'warning-dark': '#F57C00', + 'warning-text': '#FFDCA8', + 'warning-bg': '#301E04', + 'info-light': '#4FC3F7', + 'info-dark': '#0288D1', + 'info-text': '#A9E2FB', + 'info-bg': '#071F2E', + 'success-light': '#90FF95', + 'success-dark': '#388E3C', + 'success-text': '#C2E4C3', + 'success-bg': '#0A130B', + 'disabled-fg': '#EBEBEF4D', + 'disabled-bg': '#EBEBEF1F', + 'input-line': '#EBEBEF6B', + 'input-border-hover': '#CBCDD8', + 'surface-elevated': '#1E1E20', + 'table-bg': '#1A1919', + // --- semantic / button (Figma collection) --- + 'button-hover-primary': 'rgba(0, 0, 0, 0.16)', + 'button-hover-secondary': 'rgba(255, 255, 255, 0.04)', + 'button-hover-tertiary': 'rgba(255, 255, 255, 0.06)', +} as const; + +// Token names shared by both modes (light is the common subset; dark adds a few extras). +export type FigmaColorName = keyof typeof figmaLight; + +/** Resolve a single Figma color token for the active mode. */ +export const figmaColor = (mode: 'light' | 'dark', name: FigmaColorName) => + mode === 'dark' ? figmaDark[name] : figmaLight[name]; + +/** + * Pick the whole token map for a mode — the terse way to build the palette: + * const t = pickFigma(mode); + * text: { primary: t['fg-1'], secondary: t['fg-2'] } + */ +export const pickFigma = (mode: 'light' | 'dark'): Record => + mode === 'dark' ? figmaDark : figmaLight; + +/** + * Terse, P3-safe accessor for the design tokens as CSS variables. + * + * The tokens are flattened onto the MUI palette root (see `theme.tsx`), so MUI generates a + * `--mui-palette-` custom property per token and the Display-P3 layer overrides those on + * wide-gamut displays. `figVars['bg-1']` therefore emits `var(--mui-palette-bg-1)`, which gets + * P3 + the structural sRGB fallback — unlike a raw `theme.palette['bg-1']` hex read, which does + * not. Use it in `styled()`, plain JS, and interpolated strings; inside `sx` the bare string + * form (`sx={{ bgcolor: 'bg-1' }}`) already resolves to the same var with no import. + * + * Gotcha: never pass a var-based color (this, a bare `sx` token, or `theme.vars.palette.*`) to a + * raw SVG/icon presentation attribute (``) — `var()` doesn't + * resolve there. Use a concrete hex, or apply the color via `sx`/`style` (CSS) instead. + * + * The `--mui-palette-` naming is coupled to MUI's var generation and to the tokens living + * at the palette root — the same coupling `collectP3Vars` (theme.tsx) relies on. + */ +export const figVars = Object.fromEntries( + Object.keys(figmaLight).map((name) => [name, `var(--mui-palette-${name})`]) +) as Record; + +/** + * Always-white, mode-independent. For text/icons that sit on a fixed colored surface (brand + * gradients, always-dark chips). A concrete hex — NOT a CSS var — so it also resolves in raw + * SVG/icon presentation attributes (`color=`/`fill=`), where `var()` does not. + */ +export const onAccent = '#ffffff'; + +/** + * The shared "surface" box-shadow: a soft drop shadow plus a 1px ring that stands in + * for a border. Used by the secondary buttons, menus/paper, and the dashboard cards. + * `stroke` selects the ring token (cards use `shadow-stroke-1` for a slightly stronger hairline). + */ +export const figSurfaceShadow = (stroke: FigmaColorName = 'shadow-stroke-2'): string => + `0px 2px 4px 0px ${figVars['shadow-low']}, 0px 0px 0px 1px ${figVars[stroke]}`; diff --git a/src/utils/insetHighlight.ts b/src/utils/insetHighlight.ts new file mode 100644 index 0000000000..e99eebc062 --- /dev/null +++ b/src/utils/insetHighlight.ts @@ -0,0 +1,77 @@ +import { CSSObject, Theme } from '@mui/material/styles'; + +import { motion } from './motion'; + +interface InsetHighlightOpts { + /** Only `transitions` is read — accepts the app theme or a plain MUI `Theme`. */ + theme: Pick; + /** Corner radius of the highlight pseudo-element. */ + radius: string | number; + /** Even inset applied to every side; overridden per-side by the props below. */ + inset?: string | number; + top?: string | number; + right?: string | number; + bottom?: string | number; + left?: string | number; + /** Resting scale the highlight grows in from on activation (default 0.96). */ + restScale?: number; + /** + * When set, the highlight is "on" at rest — a persistent selected state: full scale and this + * fill, rather than transparent-until-hover. Leave undefined for hover-only rows so no + * `background-color` is emitted at rest. + */ + restFill?: string; +} + +/** + * The inset-pseudo highlight recipe shared by the dropdown menu items (`MuiMenuItem` in + * `theme.tsx`) and the market-switcher option rows (`MarketSwitcher.tsx`). Draws the + * hover/selected fill on a `::before` inset from the row's edges — so adjacent highlights keep a + * visual gap while the physical row is unchanged — sitting behind the row's content + * (`zIndex: -1` under `isolation: isolate`) and growing in from `restScale` → 1. + * + * Pair with {@link insetHighlightActive} under the consumer's own hover/focus/selected selectors + * to set the fill and final scale (the trigger selectors differ per consumer: MUI classes for + * MenuItem, `:hover` + a JS boolean for the switcher). + */ +export const insetHighlightBase = ({ + theme, + radius, + inset, + top, + right, + bottom, + left, + restScale = 0.96, + restFill, +}: InsetHighlightOpts): CSSObject => ({ + position: 'relative', + isolation: 'isolate', + '&::before': { + content: '""', + position: 'absolute', + top: top ?? inset ?? 0, + right: right ?? inset ?? 0, + bottom: bottom ?? inset ?? 0, + left: left ?? inset ?? 0, + zIndex: -1, + borderRadius: radius, + transform: restFill ? 'scale(1)' : `scale(${restScale})`, + transition: theme.transitions.create(['transform', 'background-color'], { + duration: motion.duration.hover, + }), + // Only emit a resting fill when persistently "on" — hover-only consumers (and the MenuItem + // refactor) stay identical, with no `background-color` until their own trigger fires. + ...(restFill ? { backgroundColor: restFill } : {}), + }, +}); + +/** + * The "on" state for an {@link insetHighlightBase} highlight: the fill plus the grown-in scale. + * Apply under the consumer's hover / keyboard-focus / selected selectors, e.g. + * `'&:hover::before': insetHighlightActive(figVars['button-hover'])`. + */ +export const insetHighlightActive = (fill: string): CSSObject => ({ + backgroundColor: fill, + transform: 'scale(1)', +}); diff --git a/src/utils/motion.ts b/src/utils/motion.ts new file mode 100644 index 0000000000..e23d0dea0e --- /dev/null +++ b/src/utils/motion.ts @@ -0,0 +1,26 @@ +/** + * Central motion tokens — the single source of truth for overlay/dialog animation + * timing across the app. Consumed by the theme's transition defaults and by the + * shared transition components (e.g. `ScaleFade`). Values mirror the reference + * project's overlay "feel": a fast, subtle pop. + * + * Kept in its own module (rather than in `theme.tsx`) so shared transitions can read + * these tokens without importing `theme.tsx`, which would create an import cycle + * (`theme` → `ScaleFade` → `theme`). + */ +export const motion = { + duration: { + /** dropdowns, menus, selects, popovers */ + overlay: 100, + /** interactive control feedback — button hover/focus state transitions */ + hover: 100, + /** modal enter/exit — reserved for Phase 2 (modals are not animated yet) */ + modal: 200, + /** mobile modal slide-up — reserved for Phase 2/3 */ + modalMobile: 300, + }, + easing: { + standard: 'ease', + smooth: 'cubic-bezier(0.19, 1, 0.22, 1)', + }, +} as const; diff --git a/src/utils/theme.tsx b/src/utils/theme.tsx index adee35697d..049b0e19d2 100644 --- a/src/utils/theme.tsx +++ b/src/utils/theme.tsx @@ -1,23 +1,190 @@ -import { - CheckCircleIcon, - ChevronDownIcon, - ExclamationCircleIcon, - ExclamationIcon, - InformationCircleIcon, -} from '@heroicons/react/outline'; -import { SvgIcon, Theme, ThemeOptions } from '@mui/material'; -import { createTheme } from '@mui/material/styles'; +import { Box, SvgIcon, ThemeOptions } from '@mui/material'; +import { type CSSObject, createTheme, experimental_extendTheme } from '@mui/material/styles'; // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore import { ColorPartial } from '@mui/material/styles/createPalette'; +// Augments MUI's base `Theme` (the one component `sx`/`styled` callbacks receive) with `.vars`, +// so `theme.vars.palette.*` typechecks app-wide, not only against this file's `AppTheme` param. +import type {} from '@mui/material/themeCssVarsAugmentation'; import React from 'react'; +import { + AlertErrorIcon, + AlertInfoIcon, + AlertSuccessIcon, + AlertWarningIcon, +} from 'src/components/icons/AlertIcons'; +import { ChevronUpDownIcon } from 'src/components/icons/ChevronUpDownIcon'; +import { ScaleFade } from 'src/components/primitives/transitions/ScaleFade'; + +import { colorToP3 } from './colorToP3'; +import { type FigmaColorName, figSurfaceShadow, figVars, onAccent, pickFigma } from './figmaColors'; +import { insetHighlightActive, insetHighlightBase } from './insetHighlight'; +import { motion } from './motion'; + +// The app theme is built with MUI's CSS-variables engine (`experimental_extendTheme`), so it +// carries `.vars` (CSS custom-property refs like `figVars['bg-1']`) and +// `.applyStyles(scheme, …)` for per-color-scheme overrides. +type AppTheme = ReturnType; + +// MUI's `theme.applyStyles('dark', …)` needs the provider theme's `getColorSchemeSelector`, +// which the raw `extendTheme` result (used to build the component overrides statically) +// doesn't carry — so calling it there hits the classic `palette.mode` branch and throws (the +// raw theme has no top-level `palette`). This helper inlines the exact CSS-vars selector +// `applyStyles` emits, matching any ancestor with `data-mui-color-scheme="dark"` — the +// element (app-wide) or a local wrapper (the dev showcase) — so both switch correctly. +export const darkScheme = (styles: CSSObject): CSSObject => ({ + '*:where([data-mui-color-scheme="dark"]) &': styles, +}); + +// Dropdown geometry: the menu paper's corner radius and the list's inset. The option-row +// highlight radius is derived from these (paper radius − inset) to stay concentric, so keep +// them together here — otherwise that relationship silently drifts. +const MENU_PAPER_RADIUS = '0.75rem'; +const MENU_LIST_INSET = '0.38rem'; + +/** + * The `::before` box the hover and disabled overlays both paint on: inset to the element's edges, + * behind its content but above its own background (`zIndex: -1` under `isolation: isolate`). + */ +const insetLayer: CSSObject = { + content: "''", + position: 'absolute', + top: 0, + right: 0, + bottom: 0, + left: 0, + borderRadius: 'inherit', + zIndex: -1, +}; + +/** + * Composites a translucent `semantic/button` hover token over the button's own fill. Assigning one + * to `backgroundColor` would replace the base fill rather than tint it. + */ +const hoverOverlay = (fill: string): CSSObject => ({ + position: 'relative', + isolation: 'isolate', + '&::before': { + ...insetLayer, + transition: `background-color ${motion.duration.hover}ms ${motion.easing.standard}`, + }, + '&:hover::before, &.Mui-focusVisible::before, &[aria-expanded="true"]::before': { + backgroundColor: fill, + }, +}); + +/** + * The shared resting fill for the opaque "white pill" surfaces — the pill button variants and the + * Select trigger — so the tokens live here once instead of being restated ~470 lines apart. bg-3 in + * both modes, so it needs no `darkScheme` override. + */ +const surfaceFill = { + backgroundColor: figVars['bg-3'], + boxShadow: figSurfaceShadow(), +}; +/** Opaque hover step for the Select trigger, which tints by fill rather than by overlay. */ +const surfaceFillHover = { backgroundColor: figVars['bg-4-hover'], boxShadow: figSurfaceShadow() }; + +/** + * The "white pill" buttons, per the Figma `semantic/button` scale. Both sit on `surfaceFill` with a + * hairline ring instead of a border; they differ only in dark-mode fill and hover strength, so one + * factory keeps them from drifting. On hover the ring is re-asserted — the global `disableElevation` + * default otherwise strips it — and `border` is forced to none to suppress MUI's default outlined + * hover border. + */ +const pillStyle = (hoverToken: FigmaColorName, darkFill?: FigmaColorName) => ({ + ...surfaceFill, + ...(darkFill ? darkScheme({ backgroundColor: figVars[darkFill] }) : {}), + ...hoverOverlay(figVars[hoverToken]), + color: figVars['fg-1'], + border: 'none', + '& .MuiButton-startIcon': { + color: figVars['fg-3'], + }, + '&:hover, &.Mui-focusVisible, &[aria-expanded="true"]': { + boxShadow: figSurfaceShadow(), + border: 'none', + }, +}); + +/** Secondary: bg-3 in both modes. */ +const secondaryPillStyle = pillStyle('button-hover-secondary'); +/** Tertiary: one step up the dark ramp, with a stronger hover tint. */ +const tertiaryPillStyle = pillStyle('button-hover-tertiary', 'bg-4'); + +/** Shared disabled state for both pill variants. */ +const pillDisabled = { + color: figVars['fg-3'], + border: 'none', + boxShadow: figSurfaceShadow(), +}; + +// Alert severity surface: a gradient from the severity colour (left) fading to bg-2 (right), plus +// the full colour + a 20% tint behind/inside the icon box. The two modes differ only in `tint` — +// dark lifts it so the wash stays visible against the darker canvas — so the gradient itself is +// written once here rather than duplicated into the dark override. +const severityGradient = (color: string, tint: string) => + `linear-gradient(90deg, color-mix(in srgb, ${color} ${tint}, transparent) 0%, ${figVars['bg-2']} 100%), ${figVars['bg-2']}`; + +const alertSeverityStyle = (color: string): CSSObject => ({ + background: severityGradient(color, '3%'), + '.MuiAlert-icon': { + color, + backgroundColor: `color-mix(in srgb, ${color} 20%, transparent)`, + }, + ...darkScheme({ background: severityGradient(color, '5%') }), +}); + +// Shared box geometry for the custom selection-control icons (checkbox + radio). +const checkboxIconBox = { width: 18, height: 18, borderRadius: '0.375rem' }; + +// Keyboard-focus ring shared by the buttons and the selection controls / switch: a 2px ring in the +// element's own colour, offset 3px out. +const focusRing = { outline: '2px solid currentColor', outlineOffset: '3px' } as const; + +// Selection-control (checkbox + radio) icon recipes — shared so the two never drift. The unchecked +// box is transparent (it picks up whatever surface it sits on) with an inset border-0 hairline that +// darkens to fg-4 on hover (keyed to the shared .MuiButtonBase-root both controls carry, so one +// selector covers both); the checked box is a purple-1 fill centered on its glyph. Radio spreads +// these and overrides borderRadius to a circle. +const selectionControlResting = { + ...checkboxIconBox, + backgroundColor: 'transparent', + boxShadow: `inset 0 0 0 1px ${figVars['border-0']}`, + boxSizing: 'border-box' as const, + '.MuiButtonBase-root:hover &': { + boxShadow: `inset 0 0 0 1px ${figVars['fg-4']}`, + }, + // Keyboard-focus ring (see `focusRing`), hugging the icon box. The focus class lands on the + // shared ButtonBase root, so key it off that. + '.MuiButtonBase-root.Mui-focusVisible &': focusRing, +}; +const selectionControlChecked = { + ...checkboxIconBox, + backgroundColor: figVars['purple-1'], + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + // Keyboard-focus ring (see `focusRing`). + '.MuiButtonBase-root.Mui-focusVisible &': focusRing, +}; +const selectionControlRootReset = { + root: { + '&:hover, &.Mui-focusVisible': { + backgroundColor: 'transparent', + }, + }, +}; + +// Soft shadow under the Switch's thumb. +const controlThumbShadow = '0px 1px 1px rgba(0, 0, 0, 0.12)'; const theme = createTheme(); const { typography: { pxToRem }, } = theme; -const FONT = 'Inter, Arial'; +const FONT = "'Inter Variable', Inter, Arial"; declare module '@mui/material/styles/createPalette' { interface PaletteColor extends ColorPartial {} @@ -30,30 +197,18 @@ declare module '@mui/material/styles/createPalette' { default: string; paper: string; surface: string; - surface2: string; - header: string; - disabled: string; } - interface Palette { - gradients: { - aaveGradient: string; - newGradient: string; - }; - other: { - standardInputLine: string; - }; - } + // Design tokens are flattened onto the palette root (see `getDesignTokens`), so each token is + // a first-class palette member. This also turns a token name that collides with a built-in + // palette key (e.g. `error`, `background`) into a compile error rather than a silent overwrite. + interface Palette extends Record {} - interface PaletteOptions { - gradients: { - aaveGradient: string; - newGradient: string; - }; - } + interface PaletteOptions extends Partial> {} } interface TypographyCustomVariants { + base: React.CSSProperties; display1: React.CSSProperties; subheader1: React.CSSProperties; subheader2: React.CSSProperties; @@ -62,15 +217,9 @@ interface TypographyCustomVariants { buttonM: React.CSSProperties; buttonS: React.CSSProperties; helperText: React.CSSProperties; - tooltip: React.CSSProperties; - main21: React.CSSProperties; secondary21: React.CSSProperties; - main16: React.CSSProperties; secondary16: React.CSSProperties; - main14: React.CSSProperties; - secondary14: React.CSSProperties; main12: React.CSSProperties; - secondary12: React.CSSProperties; } declare module '@mui/material/styles' { @@ -89,6 +238,7 @@ declare module '@mui/material/styles' { // Update the Typography's variant prop options declare module '@mui/material/Typography' { interface TypographyPropsVariantOverrides { + base: true; display1: true; subheader1: true; subheader2: true; @@ -97,16 +247,10 @@ declare module '@mui/material/Typography' { buttonM: true; buttonS: true; helperText: true; - tooltip: true; - main21: true; secondary21: true; - main16: true; secondary16: true; - main14: true; - secondary14: true; main12: true; - secondary12: true; - h5: false; + h5: true; h6: false; subtitle1: false; subtitle2: false; @@ -117,99 +261,97 @@ declare module '@mui/material/Typography' { } } +// Add a `tertiary` button variant (the secondary pill minus its ring/shadow). declare module '@mui/material/Button' { interface ButtonPropsVariantOverrides { - surface: true; - gradient: true; + tertiary: true; + } +} + +declare module '@mui/material/Paper' { + interface PaperPropsVariantOverrides { + modal: true; + card: true; + table: true; } } export const getDesignTokens = (mode: 'light' | 'dark') => { - const getColor = (lightColor: string, darkColor: string) => - mode === 'dark' ? darkColor : lightColor; + const t = pickFigma(mode); // ← the one line of setup return { breakpoints: { - keys: ['xs', 'xsm', 'sm', 'md', 'lg', 'xl', 'xxl'], + keys: ['xs', 'xsm', 'sm', 'md', 'mdlg', 'lg', 'xl', 'xxl'], values: { xs: 0, xsm: 640, sm: 760, md: 960, mdlg: 1125, lg: 1280, xl: 1575, xxl: 1800 }, }, palette: { mode, + // Design tokens flattened onto the palette root → MUI generates a `--mui-palette-` + // var per token, so `sx={{ bgcolor: 'bg-1' }}` and `figVars['bg-1']` both resolve to it. + ...t, primary: { - main: getColor('#383D51', '#EAEBEF'), - light: getColor('#62677B', '#F1F1F3'), - dark: getColor('#292E41', '#D2D4DC'), - contrast: getColor('#FFFFFF', '#0F121D'), + main: t['fg-1'], + light: t['fg-2'], + dark: t['fg-max'], + contrastText: t['bg-1'], }, secondary: { - main: getColor('#FF607B', '#F48FB1'), - light: getColor('#FF607B', '#F6A5C0'), - dark: getColor('#B34356', '#AA647B'), + main: t['secondary-main'], + light: t['secondary-light'], + dark: t['secondary-dark'], }, error: { - main: getColor('#BC0000B8', '#F44336'), - light: getColor('#D26666', '#E57373'), - dark: getColor('#BC0000', '#D32F2F'), - '100': getColor('#4F1919', '#FBB4AF'), // for alert text - '200': getColor('#F9EBEB', '#2E0C0A'), // for alert background + main: t['red-1'], + light: t['error-light'], + dark: t['error-dark'], + '100': t['error-text'], // alert text + '200': t['error-bg'], // alert background }, warning: { - main: getColor('#F89F1A', '#FFA726'), - light: getColor('#FFCE00', '#FFB74D'), - dark: getColor('#C67F15', '#F57C00'), - '100': getColor('#63400A', '#FFDCA8'), // for alert text - '200': getColor('#FEF5E8', '#301E04'), // for alert background + main: t['yellow-1'], + light: t['warning-light'], + dark: t['warning-dark'], + '100': t['warning-text'], + '200': t['warning-bg'], }, info: { - main: getColor('#0062D2', '#29B6F6'), - light: getColor('#0062D2', '#4FC3F7'), - dark: getColor('#002754', '#0288D1'), - '100': getColor('#002754', '#A9E2FB'), // for alert text - '200': getColor('#E5EFFB', '#071F2E'), // for alert background + main: t['blue-1'], + light: t['info-light'], + dark: t['info-dark'], + '100': t['info-text'], + '200': t['info-bg'], }, success: { - main: getColor('#4CAF50', '#66BB6A'), - light: getColor('#90FF95', '#90FF95'), - dark: getColor('#318435', '#388E3C'), - '100': getColor('#1C4B1E', '#C2E4C3'), // for alert text - '200': getColor('#ECF8ED', '#0A130B'), // for alert background + main: t['data-green'], + light: t['success-light'], + dark: t['success-dark'], + '100': t['success-text'], + '200': t['success-bg'], }, text: { - primary: getColor('#303549', '#F1F1F3'), - secondary: getColor('#62677B', '#A5A8B6'), - disabled: getColor('#D2D4DC', '#62677B'), - muted: getColor('#A5A8B6', '#8E92A3'), - highlight: getColor('#383D51', '#C9B3F9'), + primary: t['fg-1'], + secondary: t['fg-2'], + disabled: t['fg-4'], + muted: t['fg-3'], }, background: { - default: getColor('#F1F1F3', '#1B2030'), - paper: getColor('#FFFFFF', '#292E41'), - surface: getColor('#F7F7F9', '#383D51'), - surface2: getColor('#F9F9FB', '#383D51'), - header: getColor('#2B2D3C', '#1B2030'), - disabled: getColor('#EAEBEF', '#EBEBEF14'), - }, - divider: getColor('#EAEBEF', '#EBEBEF14'), - action: { - active: getColor('#8E92A3', '#EBEBEF8F'), - hover: getColor('#F1F1F3', '#EBEBEF14'), - selected: getColor('#EAEBEF', '#EBEBEF29'), - disabled: getColor('#BBBECA', '#EBEBEF4D'), - disabledBackground: getColor('#EAEBEF', '#EBEBEF1F'), - focus: getColor('#F1F1F3', '#EBEBEF1F'), - }, - other: { - standardInputLine: getColor('#383D511F', '#EBEBEF6B'), + default: t['bg-5'], + paper: t['surface-elevated'], + surface: t['bg-2'], }, - gradients: { - aaveGradient: 'linear-gradient(248.86deg, #B6509E 10.51%, #2EBAC6 93.41%)', - newGradient: 'linear-gradient(79.67deg, #8C3EBC 0%, #007782 95.82%)', + divider: t['border-0'], + action: { + active: t['fg-3'], + hover: t['button-hover'], + selected: t['selected'], + disabled: t['disabled-fg'], + disabledBackground: t['disabled-bg'], + focus: t['focus'], }, }, spacing: 4, typography: { fontFamily: FONT, - h5: undefined, h6: undefined, subtitle1: undefined, subtitle2: undefined, @@ -233,16 +375,14 @@ export const getDesignTokens = (mode: 'light' | 'dark') => { }, h2: { fontFamily: FONT, - fontWeight: 600, - letterSpacing: 'unset', - lineHeight: '133.4%', - fontSize: pxToRem(21), + fontWeight: 500, + lineHeight: '120%', + fontSize: pxToRem(24), }, h3: { fontFamily: FONT, - fontWeight: 600, - letterSpacing: pxToRem(0.15), - lineHeight: '160%', + fontWeight: 500, + lineHeight: '120%', fontSize: pxToRem(18), }, h4: { @@ -252,6 +392,12 @@ export const getDesignTokens = (mode: 'light' | 'dark') => { lineHeight: pxToRem(24), fontSize: pxToRem(16), }, + h5: { + fontFamily: FONT, + fontWeight: 500, + lineHeight: pxToRem(18), + fontSize: pxToRem(14), + }, subheader1: { fontFamily: FONT, fontWeight: 600, @@ -266,6 +412,12 @@ export const getDesignTokens = (mode: 'light' | 'dark') => { lineHeight: pxToRem(16), fontSize: pxToRem(12), }, + base: { + fontFamily: FONT, + fontWeight: 400, + lineHeight: '100%', + fontSize: pxToRem(14), + }, description: { fontFamily: FONT, fontWeight: 400, @@ -290,7 +442,8 @@ export const getDesignTokens = (mode: 'light' | 'dark') => { buttonM: { fontFamily: FONT, fontWeight: 500, - lineHeight: pxToRem(24), + letterSpacing: '-0.00563rem', + lineHeight: '1.25rem', fontSize: pxToRem(14), }, buttonS: { @@ -308,32 +461,12 @@ export const getDesignTokens = (mode: 'light' | 'dark') => { lineHeight: pxToRem(12), fontSize: pxToRem(10), }, - tooltip: { - fontFamily: FONT, - fontWeight: 400, - letterSpacing: pxToRem(0.15), - lineHeight: pxToRem(16), - fontSize: pxToRem(12), - }, - main21: { - fontFamily: FONT, - fontWeight: 800, - lineHeight: '133.4%', - fontSize: pxToRem(21), - }, secondary21: { fontFamily: FONT, fontWeight: 500, lineHeight: '133.4%', fontSize: pxToRem(21), }, - main16: { - fontFamily: FONT, - fontWeight: 600, - letterSpacing: pxToRem(0.15), - lineHeight: pxToRem(24), - fontSize: pxToRem(16), - }, secondary16: { fontFamily: FONT, fontWeight: 500, @@ -341,20 +474,6 @@ export const getDesignTokens = (mode: 'light' | 'dark') => { lineHeight: pxToRem(24), fontSize: pxToRem(16), }, - main14: { - fontFamily: FONT, - fontWeight: 600, - letterSpacing: pxToRem(0.15), - lineHeight: pxToRem(20), - fontSize: pxToRem(14), - }, - secondary14: { - fontFamily: FONT, - fontWeight: 500, - letterSpacing: pxToRem(0.15), - lineHeight: pxToRem(20), - fontSize: pxToRem(14), - }, main12: { fontFamily: FONT, fontWeight: 600, @@ -362,18 +481,43 @@ export const getDesignTokens = (mode: 'light' | 'dark') => { lineHeight: pxToRem(16), fontSize: pxToRem(12), }, - secondary12: { - fontFamily: FONT, - fontWeight: 500, - letterSpacing: pxToRem(0.1), - lineHeight: pxToRem(16), - fontSize: pxToRem(12), - }, }, } as ThemeOptions; }; -export function getThemedComponents(theme: Theme) { +/** + * Subtle press feedback shared by buttons and dropdown triggers: the control scales down + * slightly while active (pointer/touch down), and never when disabled. Pair with a `transform` + * transition (at `motion.duration.hover`) so the release animates back. Reduced-motion users + * get the scale instantly via the global `prefers-reduced-motion` rule in MuiCssBaseline. + */ +const pressScaleActive = { + '&:active:not(.Mui-disabled)': { + transform: 'scale(0.99)', + }, +}; + +/** + * Disabled button treatment: the label/icon stay crisp while the button's own background (+ box + * shadow) render at 50% on an `opacity: 0.5` `::before` layer. Opacity is used (not color-mix / + * channel alpha) so the faded fill keeps its Display-P3 color; a box-shadow also has no opacity of + * its own, so fading a layer is the only clean way to halve it. `isolation: isolate` makes the root + * a stacking context so the `z-index: -1` layer sits behind the label, not behind the parent bg. + */ +const disabledFade = (opts: { color: string; before: CSSObject }): CSSObject => ({ + color: opts.color, + backgroundColor: 'transparent', + border: 'none', + boxShadow: 'none', + isolation: 'isolate', + '&::before': { + ...insetLayer, + opacity: 0.5, + ...opts.before, + }, +}); + +export function getThemedComponents(theme: AppTheme) { return { components: { MuiSkeleton: { @@ -386,27 +530,58 @@ export function getThemedComponents(theme: Theme) { MuiOutlinedInput: { styleOverrides: { root: { - borderRadius: '6px', - borderColor: theme.palette.divider, - '&:hover .MuiOutlinedInput-notchedOutline': { - borderColor: '#CBCDD8', + borderRadius: '0.5rem', + // Text inputs (everything that isn't a Select): a bg-3 surface with the shared + // surface shadow (shadow-low drop + shadow-stroke-2 1px ring) instead of a border. + // Selects keep their own fill via the `:has(.MuiSelect-select)` block below. + '&:not(:has(.MuiSelect-select))': { + backgroundColor: figVars['bg-3'], + boxShadow: figSurfaceShadow(), + '& .MuiOutlinedInput-notchedOutline': { border: 'none' }, }, - '&.Mui-focused .MuiOutlinedInput-notchedOutline': { - borderColor: '#CBCDD8', + // Select trigger = the outlined-button surface: the same `surfaceFill` recipe the + // pill uses, same 0.5rem radius (from `root`). The tokens are shared rather than + // restated so the two can't drift. The notched border is dropped — the ring IS the + // outline — so there's no blueish or animated border; hover & open step the fill while + // the ring stays put. `pillStyle` itself isn't spread here: its fg-1 color, + // start-icon selector and `[aria-expanded]` selector are all wrong for an input (the + // attribute lands on the inner `.MuiSelect-select`, hence the `:has()` below). + '&:has(.MuiSelect-select)': { + ...surfaceFill, + // Animate the hover/open fill+ring step (was instant — the root had no transition). + transition: theme.transitions.create(['background-color', 'box-shadow'], { + duration: motion.duration.hover, + }), + '& .MuiOutlinedInput-notchedOutline': { border: 'none' }, + // Open fill is keyed to the Select's actual open state (`aria-expanded` on the + // select), NOT `.Mui-focused`: a Select keeps focus after its menu closes, so a + // focus-based fill would linger after closing and while other fields are focused. + '&:hover, &:has(.MuiSelect-select[aria-expanded="true"])': { + ...surfaceFillHover, + '& .MuiOutlinedInput-notchedOutline': { border: 'none' }, + }, + // Keyboard-focus ring only (browser deems focus visible → keyboard nav, not the + // focus MUI restores to the trigger on close). Matches the outlined-button ring. + '&:has(.MuiSelect-select:focus-visible)': { + outline: `2px solid ${figVars['fg-1']}`, + outlineOffset: '3px', + }, + // Disabled dropdown: inert to hover / pointer / touch (no hover fill step, no + // pointer cursor). The faded look still comes from MUI's `.Mui-disabled` text. + '&.Mui-disabled': { + pointerEvents: 'none', + }, }, }, }, }, - MuiSlider: { - styleOverrides: { - root: { - '& .MuiSlider-thumb': { - color: theme.palette.mode === 'light' ? '#62677B' : '#C9B3F9', - }, - '& .MuiSlider-track': { - color: theme.palette.mode === 'light' ? '#383D51' : '#9C93B3', - }, - }, + MuiButtonBase: { + defaultProps: { + // No ripple / pressed "splash" on any control (menu items, buttons, icon + // buttons, toggles, checkboxes, tabs, …). Interaction is conveyed by hover, + // keyboard focus, and the press-scale — not MUI's ripple. Set on ButtonBase so + // it covers every ButtonBase-derived component in one place. + disableRipple: true, }, }, MuiButton: { @@ -415,55 +590,155 @@ export function getThemedComponents(theme: Theme) { }, styleOverrides: { root: { - borderRadius: '4px', + // Size to content + padding, not MUI's default 64px floor (which let buttons in tight + // flex rows squish below their content). Row action buttons re-add an even floor + // locally (ListButtonsColumn); deliberate collapses keep their own minWidth: 0. + minWidth: 'unset', + // Never wrap the label to a second line — buttons size to their text and stay one line + // even in tight flex rows (e.g. the sGHO markets banner's action row). + whiteSpace: 'nowrap', + // Hover/focus state transition at 100ms (overrides MUI's 250ms default). + // `transform` is included so the active-press scale animates in and out. + transition: theme.transitions.create( + ['background-color', 'box-shadow', 'border-color', 'color', 'transform'], + { duration: motion.duration.hover } + ), + // Subtle press feedback — scale down while active (not when disabled). + ...pressScaleActive, + // Keyboard-focus ring in the variant's own text color; ButtonBase zeroes the + // native outline, so we set our own (2px, offset 3px out). + '&.Mui-focusVisible': { + outline: '2px solid currentColor', + outlineOffset: '3px', + }, }, sizeLarge: { ...theme.typography.buttonL, - padding: '10px 24px', + height: '48px', + padding: '0 24px', + borderRadius: '0.625rem', }, sizeMedium: { ...theme.typography.buttonM, - padding: '6px 12px', + height: '36px', + // Text-side padding; a start/end icon's -4px slot margin (MUI default) tightens + // the icon side to ~10px automatically. + padding: '0 0.88rem', + borderRadius: '0.5rem', }, sizeSmall: { - ...theme.typography.buttonS, - padding: '0 6px', + // v3: small buttons use buttonM (14px / 500 / no uppercase) + 0.62rem side padding — + // the same label style as sizeMedium, at a compact height. (Was the legacy buttonS: + // uppercase 10px / 6px padding, which the button rework never migrated.) + ...theme.typography.buttonM, + height: '28px', + padding: '0 0.62rem', + borderRadius: '0.375rem', }, }, variants: [ + // Secondary pill (`variant="outlined"`): bg-3 in both modes. { - props: { variant: 'surface' }, + props: { color: 'primary', variant: 'outlined' }, style: { - color: theme.palette.common.white, - border: '1px solid', - borderColor: '#EBEBED1F', - backgroundColor: '#383D51', - '&:hover, &.Mui-focusVisible': { - backgroundColor: theme.palette.background.header, - }, + ...secondaryPillStyle, + '&.Mui-disabled': pillDisabled, }, }, { - props: { variant: 'gradient' }, + props: { variant: 'contained', color: 'primary' }, style: { - color: theme.palette.common.white, - background: theme.palette.gradients.aaveGradient, - transition: 'all 0.2s ease', - '&:hover, &.Mui-focusVisible': { - background: theme.palette.gradients.aaveGradient, - opacity: '0.9', + backgroundColor: figVars['fg-1'], + // Same lift as the outlined pill, but ringed in the button's own fill (not + // shadow-stroke-2) — the opaque bg already reads as a boundary, so the ring just + // needs to disappear into it while the drop-shadow layer still adds the lift. + boxShadow: figSurfaceShadow('fg-1'), + ...hoverOverlay(figVars['button-hover-primary']), + // The root focus ring uses `currentColor`, which here is contrastText (bg-1) — + // nearly the same shade as the page background, so it's invisible. Re-point it at + // fg-1 (same ink the outlined variant's ring uses) so it reads against the page. + '&.Mui-focusVisible': { + outlineColor: figVars['fg-1'], }, + // Disabled: crisp label, fg-1 fill at 50% (no box-shadow on contained). + '&.Mui-disabled': disabledFade({ + color: figVars['bg-1'], + before: { backgroundColor: figVars['fg-1'] }, + }), }, }, + // Tertiary pill: the app's default button. { - props: { color: 'primary', variant: 'outlined' }, + props: { variant: 'tertiary', color: 'primary' }, style: { - background: theme.palette.background.surface, - borderColor: theme.palette.divider, + ...tertiaryPillStyle, + '&.Mui-disabled': pillDisabled, }, }, ], }, + MuiIconButton: { + styleOverrides: { + root: { + transition: theme.transitions.create(['background-color', 'color', 'transform'], { + duration: motion.duration.hover, + }), + // Subtle press feedback — scale down while active (not when disabled). + ...pressScaleActive, + // Keep the hover fill while the menu this button opens is expanded (open === hover). + // MUI's IconButton hover is `action.hover` (= button-hover), so match it. + '&[aria-expanded="true"]': { + backgroundColor: figVars['button-hover'], + }, + }, + }, + }, + MuiToggleButton: { + styleOverrides: { + root: { + transition: theme.transitions.create( + ['background-color', 'color', 'transform', 'opacity'], + { + duration: motion.duration.hover, + } + ), + // Subtle press feedback — scale down while active (not when disabled). + ...pressScaleActive, + }, + }, + }, + MuiCheckbox: { + defaultProps: { + icon: , + checkedIcon: ( + + + + + + ), + }, + styleOverrides: selectionControlRootReset, + }, + MuiRadio: { + defaultProps: { + // Circular twin of the custom checkbox — shares its recipe, overriding the shape. + icon: , + checkedIcon: ( + + + + ), + }, + styleOverrides: selectionControlRootReset, + }, MuiTypography: { defaultProps: { variant: 'description', @@ -473,23 +748,19 @@ export function getThemedComponents(theme: Theme) { h2: 'h2', h3: 'h3', h4: 'h4', + h5: 'p', subheader1: 'p', subheader2: 'p', caption: 'p', + base: 'p', description: 'p', buttonL: 'p', buttonM: 'p', buttonS: 'p', main12: 'p', - main14: 'p', - main16: 'p', - main21: 'p', - secondary12: 'p', - secondary14: 'p', secondary16: 'p', secondary21: 'p', helperText: 'span', - tooltip: 'span', }, }, }, @@ -500,21 +771,56 @@ export function getThemedComponents(theme: Theme) { }, MuiMenu: { defaultProps: { + // Menu hard-defaults transitionDuration='auto' and forwards it explicitly, + // shadowing the MuiPopover default below — so menus/selects need the duration + // set here too. TransitionComponent is set explicitly as well (rather than + // relying on the inner Popover's own default) to keep the theme authoritative. + TransitionComponent: ScaleFade, + transitionDuration: motion.duration.overlay, PaperProps: { - elevation: 0, variant: 'outlined', style: { minWidth: 240, - marginTop: '4px', }, }, }, + styleOverrides: { + // Own the dropdown paper's look HERE (not only via PaperProps) so it survives + // components that inject their own paper slotProps and drop the theme's PaperProps — + // most notably Select, whose menu would otherwise lose the 8px offset + outlined + // surface and look nothing like our other dropdowns. `&&` outweighs the MuiPaper + // variant styles. With the 0.38rem list inset + 2rem rows (MuiMenuItem), every + // dropdown (Selects included) matches the settings menu. + paper: { + '&&': { + marginTop: '8px', + borderRadius: MENU_PAPER_RADIUS, + border: 'none', + boxShadow: figSurfaceShadow(), + backgroundColor: figVars['surface-elevated'], + }, + // Dark surface at the SAME doubled specificity as the light fill above, so it wins + // in dark mode. (The darkScheme helper's single `&` lost to `&&`, which left the + // light paper — and light-looking options — showing in dark mode.) + '*:where([data-mui-color-scheme="dark"]) &&': { + backgroundColor: figVars['bg-2'], + }, + '.MuiList-root': { padding: MENU_LIST_INSET }, + }, + }, + }, + MuiPopover: { + // Covers raw Popover usages (MarketSwitcher desktop, multiselects, swap inputs). + defaultProps: { + TransitionComponent: ScaleFade, + transitionDuration: motion.duration.overlay, + }, }, MuiList: { styleOverrides: { root: { - '.MuiMenuItem-root+.MuiDivider-root, .MuiDivider-root': { - marginTop: '4px', + '.MuiDivider-root': { + marginTop: '8px', marginBottom: '4px', }, }, @@ -527,21 +833,59 @@ export function getThemedComponents(theme: Theme) { MuiMenuItem: { styleOverrides: { root: { - padding: '12px 16px', + minHeight: '2rem', + // MUI relaxes MenuItem min-height to `auto` at ≥sm; re-assert 2rem there so + // every option row is a firm 2rem tall on desktop too. + [theme.breakpoints.up('sm')]: { minHeight: '2rem' }, + padding: '0.31rem 0.38rem', + // The hover/selected highlight is a pseudo-element inset 1px top & bottom, so + // adjacent highlights keep a small gap while the row itself stays full-height — the + // hover target is continuous, so moving between rows never interrupts the highlight. + // Shared recipe (geometry + motion) lives in insetHighlight.ts; the radius is kept + // concentric with the menu paper (paper radius − list inset). + ...insetHighlightBase({ + theme, + radius: `calc(${MENU_PAPER_RADIUS} - ${MENU_LIST_INSET})`, + top: '1px', + bottom: '1px', + }), + // Hover, keyboard focus (arrow-key nav sets .Mui-focusVisible), and the selected row + // all share one subtle highlight — the button-hover fill, never MUI's primary tint. + '&:hover::before, &.Mui-focusVisible::before, &.Mui-selected::before': + insetHighlightActive(figVars['button-hover']), + // Highlight lives on the pseudo above — keep the row's own background clear. + // The compound selected states are listed explicitly: MUI's base MenuItem paints + // `&.Mui-selected:hover` / `&.Mui-selected.Mui-focusVisible` with a primary tint at + // higher specificity than a lone `&.Mui-selected`, so without these the selected row + // would show a stronger fill than other rows on hover/keyboard-focus. + '&:hover, &.Mui-focusVisible, &.Mui-selected, &.Mui-selected:hover, &.Mui-selected.Mui-focusVisible': + { + backgroundColor: 'transparent', + }, + // A row's leading icon sits one step back from its label, exactly like a button's + // start-icon (fg-3 icon against fg-1 text — see `pillStyle`). Scoped to a + // DIRECT SvgIcon child so it only catches currentColor UI icons; brand artwork + // (TokenIcon, MarketLogo) is ``-based and unaffected. + '& > .MuiSvgIcon-root': { + color: figVars['fg-3'], + }, }, }, }, MuiListItemText: { styleOverrides: { root: { - ...theme.typography.subheader1, + ...theme.typography.subheader2, + fontSize: pxToRem(14), + fontWeight: 400, + lineHeight: pxToRem(14), }, }, }, MuiListItemIcon: { styleOverrides: { root: { - color: theme.palette.primary.light, + color: theme.vars.palette.primary.light, minWidth: 'unset !important', marginRight: '12px', }, @@ -558,26 +902,58 @@ export function getThemedComponents(theme: Theme) { MuiPaper: { styleOverrides: { root: { - borderRadius: '4px', + borderRadius: '8px', }, }, variants: [ { props: { variant: 'outlined' }, style: { - border: `1px solid ${theme.palette.divider}`, - boxShadow: '0px 0px 2px rgba(0, 0, 0, 0.2), 0px 2px 10px rgba(0, 0, 0, 0.1)', - background: - theme.palette.mode === 'light' - ? theme.palette.background.paper - : theme.palette.background.surface, + border: 'none', + boxShadow: figSurfaceShadow(), + background: figVars['surface-elevated'], + ...darkScheme({ + background: figVars['bg-2'], + }), }, }, { props: { variant: 'elevation' }, style: { boxShadow: '0px 2px 1px rgba(0, 0, 0, 0.05), 0px 0px 1px rgba(0, 0, 0, 0.25)', - ...(theme.palette.mode === 'dark' ? { backgroundImage: 'none' } : {}), + ...darkScheme({ backgroundImage: 'none' }), + }, + }, + { + props: { variant: 'modal' }, + style: { + borderRadius: '0.75rem', + backgroundColor: figVars['bg-1'], + ...darkScheme({ backgroundColor: figVars['bg-2'] }), + boxShadow: `0 0 0 1px ${figVars['border-1']}, 0 4px 16px 0 ${figVars['shadow-medium']}`, + }, + }, + { + // Canonical content card surface — the module cards (reserve-overview, staking, sGho, + // …). surface-elevated in light / bg-2 in dark, 10px radius, the shared surface ring + // (shadow-stroke-1 hairline + soft drop). Asset tables use the `table` variant below. + props: { variant: 'card' }, + style: { + backgroundColor: figVars['surface-elevated'], + ...darkScheme({ backgroundColor: figVars['bg-2'] }), + borderRadius: '10px', + boxShadow: figSurfaceShadow('shadow-stroke-1'), + }, + }, + { + // The `card` surface on the table fill — the single source of truth for ListWrapper and + // the standalone asset tables. Only differs from `card` in dark mode, so a table left on + // `card` by mistake is invisible in light and wrong in dark. + props: { variant: 'table' }, + style: { + backgroundColor: figVars['table-bg'], + borderRadius: '10px', + boxShadow: figSurfaceShadow('shadow-stroke-1'), }, }, ], @@ -589,10 +965,8 @@ export function getThemedComponents(theme: Theme) { flexDirection: 'column', flex: 1, paddingBottom: '39px', - [theme.breakpoints.up('xs')]: { - paddingLeft: '8px', - paddingRight: '8px', - }, + paddingLeft: '8px', + paddingRight: '8px', [theme.breakpoints.up('xsm')]: { paddingLeft: '20px', paddingRight: '20px', @@ -601,18 +975,29 @@ export function getThemedComponents(theme: Theme) { paddingLeft: '48px', paddingRight: '48px', }, + // 20px, not the 96px this used to carry. The box is still uncapped here, so padding IS + // the gutter: 96px made the content *narrower* at 960 (863px → 768px) than it was at + // 959, and left it 152px behind the page content all the way to 1279 — the header and + // footer visibly disagreed with the page they framed. This ladder must stay identical + // to whatever a page's own Container resolves to, or the two drift apart again. [theme.breakpoints.up('md')]: { - paddingLeft: '96px', - paddingRight: '96px', + paddingLeft: '20px', + paddingRight: '20px', }, [theme.breakpoints.up('lg')]: { paddingLeft: '20px', paddingRight: '20px', + maxWidth: '1280px', }, + // The `xl` gutter is only safe because `maxWidth` rises with it: 96px of padding inside + // a box capped at 1632px still yields 1440px of content (1632 − 2×96), so content grows + // 1383px → 1440px across 1575–1632 and then holds, meeting `xxl` exactly. Raising this + // padding *without* lifting the cap is the old bug — it takes width from the content + // instead of adding outer gutter. Never pad a capped box without widening the cap. [theme.breakpoints.up('xl')]: { - maxWidth: 'unset', paddingLeft: '96px', paddingRight: '96px', + maxWidth: '1632px', }, [theme.breakpoints.up('xxl')]: { paddingLeft: 0, @@ -625,34 +1010,55 @@ export function getThemedComponents(theme: Theme) { MuiSwitch: { styleOverrides: { root: { - height: 20 + 6 * 2, - width: 34 + 6 * 2, - padding: 6, + width: '1.75rem', + height: '1.125rem', + padding: 0, + flexShrink: 0, + borderRadius: '9px', + // Keyboard-focus ring (see `focusRing`). The focus class lands on the inner + // switchBase, so key the root's ring off it. + '&:has(.Mui-focusVisible)': focusRing, }, switchBase: { - padding: 8, + padding: 0, + margin: '2px', '&.Mui-checked': { - transform: 'translateX(14px)', + transform: 'translateX(10px)', '& + .MuiSwitch-track': { - backgroundColor: theme.palette.success.main, + backgroundColor: figVars['purple-1'], opacity: 1, }, }, '&.Mui-disabled': { - opacity: theme.palette.mode === 'dark' ? 0.3 : 0.7, + opacity: 0.7, + ...darkScheme({ opacity: 0.3 }), }, }, thumb: { - color: theme.palette.common.white, - borderRadius: '6px', - width: '16px', - height: '16px', - boxShadow: '0px 1px 1px rgba(0, 0, 0, 0.12)', + color: onAccent, + borderRadius: '50%', + width: '14px', + height: '14px', + boxShadow: controlThumbShadow, }, track: { opacity: 1, - backgroundColor: theme.palette.action.active, - borderRadius: '8px', + backgroundColor: figVars['bg-6'], + borderRadius: '9px', + }, + }, + }, + MuiFormControlLabel: { + styleOverrides: { + root: { + // A Switch has no internal padding, so MUI's default -11px label offset (meant for + // padded checkboxes/radios) crams the switch against whatever precedes it in a row. + // Zero it for switch-labeled controls, and give the switch↔label text a 0.5rem gap. + // Checkbox/radio labels keep MUI's defaults. + '&:has(.MuiSwitch-root)': { + marginLeft: 0, + gap: '0.5rem', + }, }, }, }, @@ -669,129 +1075,133 @@ export function getThemedComponents(theme: Theme) { MuiTableCell: { styleOverrides: { root: { - borderColor: theme.palette.divider, + borderColor: figVars['border-2'], + }, + // Column labels are fg-3 app-wide. MUI defaults the `head` variant to text.primary + // (fg-1), which reads as body ink — this pins every cell to the muted + // header token, matching the `ListHeaderTitle` primitive the list-based tables use. + head: { + color: figVars['fg-3'], }, }, }, MuiAlert: { styleOverrides: { root: { - boxShadow: 'none', - borderRadius: '4px', - padding: '8px 12px', - ...theme.typography.caption, + display: 'flex', alignItems: 'flex-start', - '.MuiAlert-message': { - padding: 0, - paddingTop: '2px', - paddingBottom: '2px', - }, + gap: '0.88rem', + padding: '1rem 1.25rem', + borderRadius: '0.375rem', + boxShadow: figSurfaceShadow(), + // Icon box: a 2.5rem rounded square with a border-0 hairline. Its per-severity tint + // fill + icon color are set in the severity variants below. '.MuiAlert-icon': { - padding: 0, + margin: 0, + padding: '0.625rem', + width: '2.5rem', + height: '2.5rem', + flexShrink: 0, + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + borderRadius: '0.375rem', + boxShadow: `inset 0 0 0 1px ${figVars['border-0']}`, opacity: 1, '.MuiSvgIcon-root': { - fontSize: pxToRem(20), + fontSize: '1rem', + flexShrink: 0, }, }, - a: { - ...theme.typography.caption, + // Message: Paragraph text in fg-max, centered against the icon box on a single line; + // multi-line grows and top-aligns via the container's flex-start. + '.MuiAlert-message': { + padding: 0, + alignSelf: 'center', + color: figVars['fg-max'], + fontFamily: FONT, + fontWeight: 400, + fontSize: pxToRem(14), + lineHeight: pxToRem(19), + }, + // Title (AlertTitle): identical to the message text, one weight step up (500). No + // bespoke per-alert heading styling — overrides MUI's larger/heavier default + margins. + '.MuiAlertTitle-root': { + margin: 0, + marginBottom: '0.13rem', + color: figVars['fg-max'], + fontFamily: FONT, fontWeight: 500, + fontSize: pxToRem(14), + lineHeight: pxToRem(19), + }, + a: { + color: 'inherit', + fontWeight: 'inherit', textDecoration: 'underline', '&:hover': { textDecoration: 'none', }, }, '.MuiButton-text': { - ...theme.typography.caption, - fontWeight: 500, + // Inline buttons (copy / switch-network / …) fully match the alert text — same font + // size/family/line-height, no uppercase — plus an underline. Otherwise they keep MUI's + // button typography and render a size off (most visibly in the small variant). + color: 'inherit', + // `font` shorthand inherits family/size/weight/line-height in one go; letter-spacing + // isn't part of it, so inherit that separately. + font: 'inherit', + letterSpacing: 'inherit', + textTransform: 'none', textDecoration: 'underline', padding: 0, margin: 0, minWidth: 'unset', + height: 'auto', + verticalAlign: 'baseline', '&:hover': { textDecoration: 'none', background: 'transparent', }, }, - }, - }, - defaultProps: { - iconMapping: { - error: ( - - - - ), - info: ( - - - - ), - success: ( - - - - ), - warning: ( - - - - ), - }, - }, - variants: [ - { - props: { severity: 'error' }, - style: { - color: theme.palette.error['100'], - background: theme.palette.error['200'], - a: { - color: theme.palette.error['100'], - }, - '.MuiButton-text': { - color: theme.palette.error['100'], - }, - }, - }, - { - props: { severity: 'info' }, - style: { - color: theme.palette.info['100'], - background: theme.palette.info['200'], - a: { - color: theme.palette.info['100'], - }, - '.MuiButton-text': { - color: theme.palette.info['100'], + // Compact sizing: tighter padding + a 2rem icon box (the glyph inside keeps the default + // 1rem size). Shared by both `small` and `small-icon`. `small` additionally shrinks the + // text to 0.75rem; `small-icon` keeps the default-size text (for dense inline chips, + // e.g. history status badges). + '&[data-size="small"], &[data-size="small-icon"]': { + padding: '0.75rem', + gap: '0.75rem', + '.MuiAlert-icon': { + width: '2rem', + height: '2rem', + padding: '0.53125rem 0.5rem 0.46875rem 0.5rem', }, }, - }, - { - props: { severity: 'success' }, - style: { - color: theme.palette.success['100'], - background: theme.palette.success['200'], - a: { - color: theme.palette.success['100'], + '&[data-size="small"]': { + '.MuiAlert-message': { + fontSize: '0.75rem', + lineHeight: '1.0125rem', }, - '.MuiButton-text': { - color: theme.palette.success['100'], + '.MuiAlertTitle-root': { + fontSize: '0.75rem', + lineHeight: '1.0125rem', }, }, }, - { - props: { severity: 'warning' }, - style: { - color: theme.palette.warning['100'], - background: theme.palette.warning['200'], - a: { - color: theme.palette.warning['100'], - }, - '.MuiButton-text': { - color: theme.palette.warning['100'], - }, - }, + }, + defaultProps: { + iconMapping: { + error: , + info: , + success: , + warning: , }, + }, + variants: [ + { props: { severity: 'error' }, style: alertSeverityStyle(figVars['danger']) }, + { props: { severity: 'info' }, style: alertSeverityStyle(figVars['purple-1']) }, + { props: { severity: 'success' }, style: alertSeverityStyle(figVars['data-green']) }, + { props: { severity: 'warning' }, style: alertSeverityStyle(figVars['favourite-star']) }, ], }, MuiCssBaseline: { @@ -801,48 +1211,124 @@ export function getThemedComponents(theme: Theme) { fontWeight: 400, fontSize: pxToRem(14), minWidth: '375px', + backgroundColor: figVars['bg-1'], '> div:first-of-type': { minHeight: '100vh', display: 'flex', flexDirection: 'column', }, }, + // Respect the OS "reduce motion" preference app-wide (incl. the dev showcase, + // since CssBaseline is injected once at the app root). + '@media (prefers-reduced-motion: reduce)': { + '*, *::before, *::after': { + animationDuration: '0.01ms !important', + animationIterationCount: '1 !important', + transitionDuration: '0.01ms !important', + scrollBehavior: 'auto !important', + }, + }, }, }, MuiSvgIcon: { styleOverrides: { colorPrimary: { - color: theme.palette.primary.light, + color: theme.vars.palette.primary.light, }, }, }, MuiSelect: { defaultProps: { IconComponent: (props) => ( - - - + ), }, styleOverrides: { outlined: { - backgroundColor: theme.palette.background.surface, + // The trigger's fill + ring live on the OutlinedInput root (see MuiOutlinedInput) + // so they're rounded and wrapped like the outlined button; here just the text. ...theme.typography.buttonM, - padding: '6px 12px', - color: theme.palette.primary.light, + color: figVars['fg-1'], }, }, }, MuiLinearProgress: { styleOverrides: { bar1Indeterminate: { - background: theme.palette.gradients.aaveGradient, + background: figVars['purple-1'], }, bar2Indeterminate: { - background: theme.palette.gradients.aaveGradient, + background: figVars['purple-1'], }, }, }, }, } as ThemeOptions; } + +/** + * Assemble the full app MUI theme (CSS-variables mode): both color schemes' design tokens + * plus the component overrides. Single source of truth shared by the app root + * (`AppGlobalStyles`) and the dev component showcase, so they can't drift apart. Color + * scheme is switched via the `data-mui-color-scheme` attribute, not by rebuilding the theme. + */ +export const createAppTheme = () => { + const light = getDesignTokens('light'); + const dark = getDesignTokens('dark'); + const shared = { + breakpoints: light.breakpoints, + spacing: light.spacing, + typography: light.typography, + colorSchemes: { + light: { palette: light.palette }, + dark: { palette: dark.palette }, + }, + }; + // Build a base theme first so `getThemedComponents` can read its `.vars` (CSS-var refs), + // then rebuild with those overrides attached. (A build-once `theme.components = …` mutation + // trips MUI's `Components` typing, so the two-pass is the type-clean form.) + const base = experimental_extendTheme(shared); + return experimental_extendTheme({ + ...shared, + components: getThemedComponents(base).components, + }); +}; + +// --- Display-P3 override layer ------------------------------------------------------------- + +const isColorValue = (v: string) => v.startsWith('#') || v.startsWith('rgb'); + +// Walk a color scheme's palette and, for every solid color leaf, emit a P3 override keyed to +// the CSS variable MUI generates for it (`--mui-palette-`). Non-color +// leaves (numbers, `mode`, channel strings like "32 29 29", gradients) are skipped. +const collectP3Vars = ( + node: Record, + path: string[], + out: Record +) => { + Object.entries(node).forEach(([key, value]) => { + if (typeof value === 'string' && isColorValue(value)) { + out[`--mui-palette-${[...path, key].join('-')}`] = colorToP3(value); + } else if (value && typeof value === 'object') { + collectP3Vars(value as Record, [...path, key], out); + } + }); +}; + +/** + * Build Display-P3 overrides for the generated `--mui-palette-*` CSS variables — one entry + * per solid color token, per color scheme. Injected under `@supports (color-gamut: p3)` so + * wide-gamut displays get the richer color while everything else keeps the sRGB base var. + * (Alpha-composited tints via MUI's `rgba( / a)` stay sRGB — see migration notes.) + */ +export const buildP3Overrides = (theme: AppTheme) => { + const forScheme = (scheme?: { palette?: unknown }) => { + const out: Record = {}; + collectP3Vars((scheme?.palette ?? {}) as Record, [], out); + return out; + }; + return { + light: forScheme(theme.colorSchemes.light), + dark: forScheme(theme.colorSchemes.dark), + }; +};