Skip to content

chore: remove market switcher functionality for umbrella #3022

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
sammdec wants to merge 1 commit into
base: main
Choose a base branch
from
+22 −290
Open

chore: remove market switcher functionality for umbrella #3022

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion src/locales/en/messages.po
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1333,7 +1333,6 @@ msgstr "You have assets with zero LTV that are blocking this operation. Please w
#: src/modules/staking/SavingsGhoProgram.tsx
#: src/modules/umbrella/StakeCooldownModalContent.tsx
#: src/modules/umbrella/StakeCooldownModalContent.tsx
#: src/modules/umbrella/UmbrellaMarketSwitcher.tsx
msgid "{0}"
msgstr "{0}"

Expand Down
311 changes: 22 additions & 289 deletions src/modules/umbrella/UmbrellaMarketSwitcher.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,29 +1,12 @@
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 { Box, BoxProps, Tooltip, Typography, useMediaQuery, useTheme } from '@mui/material';
import React 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';

Expand Down Expand Up @@ -102,284 +85,34 @@ export const MarketLogo = ({ size, logo, testChainName, sx }: MarketLogoProps) =
);
};

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>(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);
const currentMarket = useRootStore(useShallow((store) => store.currentMarket));

return market.v3;
})
.some((item) => !!item);

const handleMarketSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
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: (
// <Trans>Main Ethereum market with the largest selection of assets and yield options</Trans>
// ),
// proto_lido_v3: (
// <Trans>Optimized for efficiency and risk by supporting blue-chip collateral assets</Trans>
// ),
// };
const { market, logo } = getMarketInfoById(currentMarket);

return (
<TextField
select
aria-label="select market"
data-cy="marketSelector"
value={currentMarket}
onChange={handleMarketSelect}
sx={{
mr: 2,
'& .MuiOutlinedInput-notchedOutline': {
border: 'none',
},
}}
SelectProps={{
native: false,
className: 'MarketSwitcher__select',
IconComponent: () => null,
renderValue: (marketId) => {
const { market, logo } = getMarketInfoById(marketId as CustomMarket);

return (
<Box>
{/* Main Row with Market Name */}
<Box sx={{ display: 'flex', alignItems: 'center' }}>
<MarketLogo
size={upToLG ? 32 : 28}
logo={logo}
testChainName={getMarketHelpData(market.marketTitle).testChainName}
/>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
<Typography
variant={upToLG ? 'display1' : 'h1'}
sx={{
fontSize: downToXSM ? '1.55rem' : undefined,
color: 'common.white',
mr: 1,
}}
>
{getMarketHelpData(market.marketTitle).name} {market.isFork ? 'Fork' : ''}
{/* {upToLG &&
(currentMarket === 'proto_mainnet_v3' || currentMarket === 'proto_lido_v3')
? 'Instance'
: ' Market'} */}
</Typography>

<Box sx={{ display: 'flex', alignItems: 'center' }}>
{/* <Box
sx={{
color: '#A5A8B6',
px: 2,
borderRadius: '12px',
backgroundColor: '#383D51',
display: 'flex',
alignItems: 'center',
}}
>
<Typography variant="subheader2">V2</Typography>
</Box> */}
<SvgIcon
fontSize="medium"
sx={{
ml: 1,
color: '#F1F1F3',
}}
>
<ChevronDownIcon />
</SvgIcon>
</Box>
</Box>
</Box>

{/* {marketBlurbs[currentMarket] && (
<Typography
sx={{
color: 'common.white',
mt: 0.5,
fontSize: '0.85rem',
wordWrap: 'break-word',
whiteSpace: 'normal',
lineHeight: 1.3,
maxWidth: '100%',
}}
>
{marketBlurbs[currentMarket]}
</Typography>
)} */}
</Box>
);
},

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,
},
},
}}
>
<Box>
<Typography variant="subheader2" color="text.secondary" sx={{ px: 4, pt: 2 }}>
<Trans>
{ENABLE_TESTNET || STAGING_ENV ? 'Select Aave Testnet Market' : 'Select Aave Market'}
</Trans>
<Box sx={{ mr: 2 }}>
{/* Main Row with Market Name */}
<Box sx={{ display: 'flex', alignItems: 'center' }}>
<MarketLogo
size={upToLG ? 32 : 28}
logo={logo}
testChainName={getMarketHelpData(market.marketTitle).testChainName}
/>
<Typography
variant={upToLG ? 'display1' : 'h1'}
sx={{
fontSize: downToXSM ? '1.55rem' : undefined,
color: 'common.white',
mr: 1,
}}
>
{getMarketHelpData(market.marketTitle).name} {market.isFork ? 'Fork' : ''}
</Typography>
</Box>
{isV3MarketsAvailable && (
<Box sx={{ mx: '18px', display: 'flex', justifyContent: 'center' }}>
{/* <StyledToggleButtonGroup
value={selectedMarketVersion}
exclusive
onChange={(_, value) => {
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',
}}
>
<StyledToggleButton
value={SelectedMarketVersion.V3}
data-cy={`markets_switch_button_v3`}
sx={{
backgroundColor: theme.palette.mode === 'dark' ? '#EAEBEF' : '#383D51',
'&.Mui-selected, &.Mui-selected:hover': {
backgroundColor: theme.palette.mode === 'dark' ? '#292E41' : '#FFFFFF',
boxShadow: '0px 1px 0px rgba(0, 0, 0, 0.05)',
},
borderRadius: '4px',
}}
>
<Typography
variant="buttonM"
sx={
selectedMarketVersion === SelectedMarketVersion.V3
? {
backgroundImage: (theme) => theme.palette.gradients.aaveGradient,
backgroundClip: 'text',
color: 'transparent',
}
: {
color: theme.palette.mode === 'dark' ? '#0F121D' : '#FFFFFF',
}
}
>
<Trans>Version 3</Trans>
</Typography>
</StyledToggleButton>
<StyledToggleButton
value={SelectedMarketVersion.V2}
data-cy={`markets_switch_button_v2`}
sx={{
backgroundColor: theme.palette.mode === 'dark' ? '#EAEBEF' : '#383D51',
'&.Mui-selected, &.Mui-selected:hover': {
backgroundColor: theme.palette.mode === 'dark' ? '#292E41' : '#FFFFFF',
boxShadow: '0px 1px 0px rgba(0, 0, 0, 0.05)',
},
borderRadius: '4px',
}}
>
<Typography
variant="buttonM"
sx={
selectedMarketVersion === SelectedMarketVersion.V2
? {
backgroundImage: (theme) => theme.palette.gradients.aaveGradient,
backgroundClip: 'text',
color: 'transparent',
}
: {
color: theme.palette.mode === 'dark' ? '#0F121D' : '#FFFFFF',
}
}
>
<Trans>Version 2</Trans>
</Typography>
</StyledToggleButton>
</StyledToggleButtonGroup> */}
</Box>
)}
{availableMarkets.map((marketId: CustomMarket) => {
const { market, logo } = getMarketInfoById(marketId);
const marketNaming = getMarketHelpData(market.marketTitle);
return (
<MenuItem
key={marketId}
data-cy={`marketSelector_${marketId}`}
value={marketId}
sx={{
'.MuiListItemIcon-root': { minWidth: 'unset' },
display:
(market.v3 && selectedMarketVersion === SelectedMarketVersion.V2) ||
(!market.v3 && selectedMarketVersion === SelectedMarketVersion.V3)
? 'none'
: 'flex',
}}
>
<MarketLogo size={32} logo={logo} testChainName={marketNaming.testChainName} />
<ListItemText sx={{ mr: 0 }}>
{marketNaming.name} {market.isFork ? 'Fork' : ''}
</ListItemText>
<ListItemText sx={{ textAlign: 'right' }}>
<Typography color="text.muted" variant="description">
{marketNaming.testChainName}
</Typography>
</ListItemText>
</MenuItem>
);
})}
</TextField>
</Box>
);
};
Loading