Skip to content

Commit

Permalink
Feat/lido market [skip cypress] (#2119)
Browse files Browse the repository at this point in the history 
Co-authored-by: Mark Grothe <[email protected]>
  • Loading branch information
@foodaka @grothem
foodaka and grothem authored Jul 29, 2024
1 parent f39e797 commit 38a6e46
Show file tree
Hide file tree
Showing 12 changed files with 427 additions and 132 deletions.
57 changes: 56 additions & 1 deletion pages/history.page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,77 @@
import { Trans } from '@lingui/macro';
import { Box, Typography, useMediaQuery, useTheme } from '@mui/material';
import * as React from 'react';
import { useEffect } from 'react';
import { ContentContainer } from 'src/components/ContentContainer';
import { MULTIPLE_MARKET_OPTIONS } from 'src/components/MarketSwitcher';
import { StyledTxModalToggleButton } from 'src/components/StyledToggleButton';
import { StyledTxModalToggleGroup } from 'src/components/StyledToggleButtonGroup';
import { MainLayout } from 'src/layouts/MainLayout';
import { HistoryTopPanel } from 'src/modules/history/HistoryTopPanel';
import { HistoryWrapper } from 'src/modules/history/HistoryWrapper';
import { useRootStore } from 'src/store/root';
import { CustomMarket } from 'src/ui-config/marketsConfig';

export default function History() {
const trackEvent = useRootStore((store) => store.trackEvent);
const [trackEvent, currentMarket, setCurrentMarket, currentAccount] = useRootStore((store) => [
store.trackEvent,
store.currentMarket,
store.setCurrentMarket,
store.account,
]);
const { breakpoints } = useTheme();
const upFromSm = useMediaQuery(breakpoints.up('xsm'));

useEffect(() => {
trackEvent('Page Viewed', {
'Page Name': 'History',
});
}, [trackEvent]);

const handleUpdateEthMarket = (market: CustomMarket) => {
setCurrentMarket(market);
};

return (
<>
<HistoryTopPanel />
{currentAccount && MULTIPLE_MARKET_OPTIONS.includes(currentMarket) && (
<Box pb={2} sx={{ width: upFromSm ? 'calc(50% - 8px)' : '100%' }}>
<StyledTxModalToggleGroup
color="secondary"
value={currentMarket}
exclusive
onChange={(_, value) => handleUpdateEthMarket(value)}
>
<StyledTxModalToggleButton
maxWidth="160px"
unselectedBackgroundColor="#383D51"
value={'proto_mainnet_v3'}
disabled={currentMarket === 'proto_mainnet_v3'}
// Todo tracking?
// onClick={() =>
// trackEvent(WITHDRAW_MODAL.SWITCH_WITHDRAW_TYPE, { withdrawType: 'Withdraw' })
// }
>
<Typography variant="buttonM">
<Trans>Ethereum Main</Trans>
</Typography>
</StyledTxModalToggleButton>

<StyledTxModalToggleButton
maxWidth="160px"
unselectedBackgroundColor="#383D51"
value={'proto_lido_v3'}
disabled={currentMarket === 'proto_lido_v3'}
// Todo tracking?
>
<Typography variant="buttonM">
<Trans>Lido</Trans>
</Typography>
</StyledTxModalToggleButton>
</StyledTxModalToggleGroup>
</Box>
)}
<ContentContainer>
<HistoryWrapper />
</ContentContainer>
Expand Down
1 change: 1 addition & 0 deletions public/icons/networks/lido.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
103 changes: 67 additions & 36 deletions src/components/MarketSwitcher.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,13 +30,30 @@ import {
import StyledToggleButton from './StyledToggleButton';
import StyledToggleButtonGroup from './StyledToggleButtonGroup';

export const MULTIPLE_MARKET_OPTIONS = [
CustomMarket.proto_mainnet_v3,
CustomMarket.proto_lido_v3,
'fork_proto_lido_v3',
'fork_proto_mainnet_v3',
];

export const getMarketInfoById = (marketId: CustomMarket) => {
const market: MarketDataType = marketsData[marketId as CustomMarket];
const network: BaseNetworkConfig = networkConfigs[market.chainId];

return { market, network };
};

export const getMarketLogoById = (marketId: CustomMarket, networkLogoPath: string) => {
const market: MarketDataType = marketsData[marketId as CustomMarket];

if (market.chainId === 1 && market.marketTitle === 'Ethereum Lido Market') {
return { marketLogo: '/icons/networks/lido.svg' };
}

return { marketLogo: networkLogoPath };
};

export const getMarketHelpData = (marketName: string) => {
const testChains = [
'Görli',
Expand All @@ -48,9 +65,17 @@ export const getMarketHelpData = (marketName: string) => {
'Kovan',
'Rinkeby',
];

const arrayName = marketName.split(' ');

const testChainName = arrayName.filter((el) => testChains.indexOf(el) > -1);
const marketTitle = arrayName.filter((el) => !testChainName.includes(el)).join(' ');

const marketTitle =
// Note: We keep Eth for Lido market and fetch Lido market data
marketName === 'Ethereum Lido Market'
? 'Ethereum'
: arrayName.filter((el) => !testChainName.includes(el)).join(' ');

return {
name: marketTitle,
testChainName: testChainName[0],
Expand Down Expand Up @@ -154,6 +179,7 @@ export const MarketSwitcher = () => {
),
renderValue: (marketId) => {
const { market, network } = getMarketInfoById(marketId as CustomMarket);

return (
<Box sx={{ display: 'flex', alignItems: 'center' }}>
<MarketLogo
Expand All @@ -171,7 +197,8 @@ export const MarketSwitcher = () => {
}}
>
{getMarketHelpData(market.marketTitle).name} {market.isFork ? 'Fork' : ''}
{upToLG && ' Market'}
{/* {upToLG && ' Market'} */}
{upToLG && ''}
</Typography>
{market.v3 ? (
<Box
Expand Down Expand Up @@ -230,7 +257,6 @@ export const MarketSwitcher = () => {
</Trans>
</Typography>
</Box>

{isV3MarketsAvailable && (
<Box sx={{ mx: '18px', display: 'flex', justifyContent: 'center' }}>
<StyledToggleButtonGroup
Expand Down Expand Up @@ -315,39 +341,44 @@ export const MarketSwitcher = () => {
</StyledToggleButtonGroup>
</Box>
)}
{availableMarkets.map((marketId: CustomMarket) => {
const { market, network } = 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={network.networkLogoPath}
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>
);
})}
{availableMarkets
.filter((marketId: CustomMarket) => {
const { market } = getMarketInfoById(marketId);

const excludedDropdownMarkets = ['proto_lido_v3'];

return !excludedDropdownMarkets.includes(marketId) && market;
})
.map((marketId: CustomMarket) => {
const { market, network } = getMarketInfoById(marketId);
const marketNaming = getMarketHelpData(market.marketTitle);
const { marketLogo } = getMarketLogoById(marketId, network.networkLogoPath);
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={marketLogo} 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>
);
};
111 changes: 61 additions & 50 deletions src/components/StyledToggleButton.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,58 +1,69 @@
import { styled, ToggleButton, ToggleButtonProps } from '@mui/material';
import React from 'react';

const CustomToggleButton = styled(ToggleButton)<ToggleButtonProps>(({ theme }) => ({
border: '0px',
flex: 1,
backgroundColor: '#383D51',
borderRadius: '4px',

'&.Mui-selected, &.Mui-selected:hover': {
backgroundColor: '#FFFFFF',
borderRadius: '4px !important',
},

'&.Mui-selected, &.Mui-disabled': {
zIndex: 100,
height: '100%',
display: 'flex',
justifyContent: 'center',

'.MuiTypography-subheader1': {
background: theme.palette.gradients.aaveGradient,
backgroundClip: 'text',
textFillColor: 'transparent',
interface CustomToggleButtonProps extends ToggleButtonProps {
unselectedBackgroundColor?: string;
maxWidth?: string;
}

const CustomToggleButton = styled(ToggleButton)<CustomToggleButtonProps>(
({ theme, unselectedBackgroundColor }) => ({
border: '0px',
flex: 1,
backgroundColor: unselectedBackgroundColor || '#383D51',
borderRadius: '4px',

'&.Mui-selected, &.Mui-selected:hover': {
backgroundColor: '#FFFFFF',
borderRadius: '4px !important',
},
'.MuiTypography-secondary14': {
background: theme.palette.gradients.aaveGradient,
backgroundClip: 'text',
textFillColor: 'transparent',

'&.Mui-selected, &.Mui-disabled': {
zIndex: 100,
height: '100%',
display: 'flex',
justifyContent: 'center',

'.MuiTypography-subheader1': {
background: theme.palette.gradients.aaveGradient,
backgroundClip: 'text',
textFillColor: 'transparent',
},
'.MuiTypography-secondary14': {
background: theme.palette.gradients.aaveGradient,
backgroundClip: 'text',
textFillColor: 'transparent',
},
},
},
})) as typeof ToggleButton;

const CustomTxModalToggleButton = styled(ToggleButton)<ToggleButtonProps>(({ theme }) => ({
border: '0px',
flex: 1,
color: theme.palette.text.muted,
borderRadius: '4px',

'&.Mui-selected, &.Mui-selected:hover': {
border: `1px solid ${theme.palette.other.standardInputLine}`,
backgroundColor: '#FFFFFF',
borderRadius: '4px !important',
},

'&.Mui-selected, &.Mui-disabled': {
zIndex: 100,
height: '100%',
display: 'flex',
justifyContent: 'center',
color: theme.palette.background.header,
},
})) as typeof ToggleButton;

export function StyledTxModalToggleButton(props: ToggleButtonProps) {
})
) as typeof ToggleButton;

const CustomTxModalToggleButton = styled(ToggleButton)<CustomToggleButtonProps>(
({ theme, unselectedBackgroundColor, maxWidth }) => ({
border: '0px',
flex: 1,
color: theme.palette.text.muted,
borderRadius: '4px',
backgroundColor: unselectedBackgroundColor || '#383D51',
maxWidth: maxWidth || '100%',

'&.Mui-selected, &.Mui-selected:hover': {
border: `1px solid ${theme.palette.other.standardInputLine}`,
backgroundColor: '#FFFFFF',
borderRadius: '4px !important',
},

'&.Mui-selected, &.Mui-disabled': {
zIndex: 100,
height: '100%',
display: 'flex',
justifyContent: 'center',
color: theme.palette.background.header,
},
})
) as typeof ToggleButton;

export function StyledTxModalToggleButton(props: CustomToggleButtonProps) {
return <CustomTxModalToggleButton {...props} />;
}

Expand Down
3 changes: 3 additions & 0 deletions src/components/TopInfoPanel/TopInfoPanel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ interface TopInfoPanelProps extends PageTitleProps {
children?: ReactNode;
titleComponent?: ReactNode;
containerProps?: ContainerProps;
multiMarket?: boolean;
}

export const TopInfoPanel = ({
Expand All @@ -15,6 +16,7 @@ export const TopInfoPanel = ({
withMarketSwitcher,
withMigrateButton,
bridge,
multiMarket,
children,
containerProps = {},
}: TopInfoPanelProps) => {
Expand Down Expand Up @@ -47,6 +49,7 @@ export const TopInfoPanel = ({
gap: { xs: 3, xsm: 8 },
flexWrap: 'wrap',
width: '100%',
...(multiMarket && { flexDirection: 'column' }),
}}
>
{children}
Expand Down
2 changes: 1 addition & 1 deletion src/locales/en/messages.js
View file

Large diffs are not rendered by default.

Loading

2 comments on commit 38a6e46

@github-actions
Copy link

Choose a reason for hiding this comment

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

This commit was deployed on ipfs

@github-actions
Copy link

Choose a reason for hiding this comment

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

This commit was deployed on ipfs

Please sign in to comment.