Skip to content

Commit

Permalink
[DDW-788] Chakra-ui
Browse files Browse the repository at this point in the history
  • Loading branch information
@renanvalentin
renanvalentin committed Jan 19, 2022
1 parent 7ec4afd commit 7896501
Show file tree
Hide file tree
Showing 12 changed files with 1,888 additions and 113 deletions.
5 changes: 5 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,7 @@
"@babel/preset-react": "7.0.0",
"@babel/register": "7.0.0",
"@dump247/storybook-state": "1.6.1",
"@emotion/babel-plugin": "11.7.2",
"@storybook/addon-actions": "5.3.14",
"@storybook/addon-knobs": "5.3.14",
"@storybook/addon-links": "5.3.14",
Expand Down Expand Up @@ -178,6 +179,9 @@
},
"dependencies": {
"@cardano-foundation/ledgerjs-hw-app-cardano": "4.0.0",
"@chakra-ui/react": "1.7.4",
"@emotion/react": "11.7.1",
"@emotion/styled": "11.6.0",
"@iohk-jormungandr/wallet-js": "0.5.0-pre7",
"@ledgerhq/hw-transport-node-hid": "5.51.1",
"aes-js": "3.1.2",
Expand All @@ -204,6 +208,7 @@
"find-process": "1.4.7",
"fireworks-js": "1.0.4",
"form-data": "3.0.0",
"framer-motion": "4.1.17",
"fs-extra": "9.0.1",
"glob": "7.1.6",
"graceful-fs": "4.2.4",
Expand Down
90 changes: 58 additions & 32 deletions source/renderer/app/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { SimpleDefaults } from 'react-polymorph/lib/themes/simple';
import DevTools from 'mobx-react-devtools';
import { Router } from 'react-router-dom';
import { IntlProvider } from 'react-intl';
import { ChakraProvider, extendTheme } from '@chakra-ui/react';
import { Routes } from './Routes';
import { daedalusTheme } from './themes/daedalus';
import { themeOverrides } from './themes/overrides';
Expand All @@ -21,6 +22,29 @@ import type { StoresMap } from './stores/index';
import type { ActionsMap } from './actions/index';
import NewsFeedContainer from './containers/news/NewsFeedContainer';

const theme = extendTheme({
fonts: {
body: 'NotoSans-Regular, NotoSansCJKjp-Regular',
heading: 'NotoSans-Regular, NotoSansCJKjp-Regular',
mono: 'NotoSans-Regular, NotoSansCJKjp-Regular',
},
components: {
Text: {
baseStyle: {
fontFamily: 'NotoSans-Regular, NotoSansCJKjp-Regular',
},
},
},
colors: {
stakePoolSaturation: {
green: '--theme-staking-stake-pool-saturation-green-color',
orange: '--theme-staking-stake-pool-saturation-orange-color',
red: '--theme-staking-stake-pool-saturation-red-color',
yellow: '--theme-staking-stake-pool-saturation-yellow-color',
},
},
});

@observer
export default class App extends Component<{
stores: StoresMap,
Expand Down Expand Up @@ -53,39 +77,41 @@ export default class App extends Component<{
}

return (
<Fragment>
<ThemeManager variables={themeVars} />
<Provider stores={stores} actions={actions}>
<ThemeProvider
theme={daedalusTheme}
skins={SimpleSkins}
variables={SimpleDefaults}
themeOverrides={themeOverrides}
>
<IntlProvider
{...{ locale, key: locale, messages: translations[locale] }}
<ChakraProvider theme={theme}>
<Fragment>
<ThemeManager variables={themeVars} />
<Provider stores={stores} actions={actions}>
<ThemeProvider
theme={daedalusTheme}
skins={SimpleSkins}
variables={SimpleDefaults}
themeOverrides={themeOverrides}
>
<Fragment>
<Router history={history}>
<Routes />
</Router>
{mobxDevTools}
{[
isActiveDialog(ABOUT) && <AboutDialog key="aboutDialog" />,
isActiveDialog(DAEDALUS_DIAGNOSTICS) && (
<DaedalusDiagnosticsDialog key="daedalusDiagnosticsDialog" />
),
<NotificationsContainer key="notificationsContainer" />,
]}
{canShowNews && [
<NewsFeedContainer key="newsFeedList" />,
<NewsOverlayContainer key="newsFeedOverlay" />,
]}
</Fragment>
</IntlProvider>
</ThemeProvider>
</Provider>
</Fragment>
<IntlProvider
{...{ locale, key: locale, messages: translations[locale] }}
>
<Fragment>
<Router history={history}>
<Routes />
</Router>
{mobxDevTools}
{[
isActiveDialog(ABOUT) && <AboutDialog key="aboutDialog" />,
isActiveDialog(DAEDALUS_DIAGNOSTICS) && (
<DaedalusDiagnosticsDialog key="daedalusDiagnosticsDialog" />
),
<NotificationsContainer key="notificationsContainer" />,
]}
{canShowNews && [
<NewsFeedContainer key="newsFeedList" />,
<NewsOverlayContainer key="newsFeedOverlay" />,
]}
</Fragment>
</IntlProvider>
</ThemeProvider>
</Provider>
</Fragment>
</ChakraProvider>
);
}
}
4 changes: 2 additions & 2 deletions source/renderer/app/components/staking/widgets/ThumbPool.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,8 @@
background-color: var(--theme-staking-stake-pool-background-color);
border: 1px solid var(--theme-staking-stake-pool-border-color);
cursor: pointer;
height: 71px;
width: 80px;
// height: 71px;
// width: 80px;
}
}
}
190 changes: 124 additions & 66 deletions source/renderer/app/components/staking/widgets/ThumbPoolContent.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,10 @@ import BigNumber from 'bignumber.js';
import React, { Component } from 'react';
import { observer } from 'mobx-react';
import SVGInline from 'react-svg-inline';
import classnames from 'classnames';
import { Box, Text, Center, Flex } from '@chakra-ui/react';
import styled from '@emotion/styled';
import clockIcon from '../../../assets/images/clock-corner.inline.svg';
import noDataDashBigImage from '../../../assets/images/no-data-dash-big.inline.svg';
import styles from './ThumbPoolContent.scss';
import { getColorFromRange, getSaturationColor } from '../../../utils/colors';
import StakePool from '../../../domains/StakePool';
import {
Expand All @@ -16,6 +16,38 @@ import {
import adaIcon from '../../../assets/images/ada-symbol.inline.svg';
import { formattedWalletAmount } from '../../../utils/formatters';

const AdaIcon = styled(SVGInline)`
svg {
height: 11px;
width: 10px;
& > g {
& > g {
stroke: var(--theme-staking-wallet-row-ticker-ada-icon-fill-color);
}
}
}
`;

const ClockIcon = styled(SVGInline)`
svg {
height: 15px;
width: 15px;
}
`;

const NoDataDashIcon = styled(SVGInline)`
svg {
height: 3px;
width: 12px;
path {
fill: var(--theme-staking-stake-pool-grey-color) !important;
opacity: 1 !important;
}
}
`;

type Props = {
stakePool: StakePool,
numberOfRankedStakePools: number,
Expand Down Expand Up @@ -55,74 +87,100 @@ export default class ThumbPoolContent extends Component<Props> {
} = stakePool;
const color = getColorFromRange(ranking, numberOfRankedStakePools);

const componentClassnames = classnames([
styles.component,
!IS_SATURATION_DATA_AVAILABLE ? styles.hideSaturation : null,
]);

const saturationClassnames = classnames([
styles.saturationBar,
styles[getSaturationColor(saturation)],
]);

return (
<div className={componentClassnames}>
<div className={styles.ticker}>{ticker}</div>
{isGridRewardsView &&
(IS_RANKING_DATA_AVAILABLE && nonMyopicMemberRewards ? (
<div className={styles.rewards}>
{this.formattedRewards(potentialRewards)}
<SVGInline svg={adaIcon} className={styles.adaIcon} />
</div>
) : (
<div className={styles.noDataDash}>
<SVGInline svg={noDataDashBigImage} />
</div>
))}
{!isGridRewardsView &&
(IS_RANKING_DATA_AVAILABLE ? (
<div className={styles.ranking} style={{ color }}>
{nonMyopicMemberRewards ? (
ranking
) : (
<>
{numberOfRankedStakePools + 1}
<sup>*</sup>
</>
<Flex
h="16"
w="20"
flexDirection="column"
pt={!IS_SATURATION_DATA_AVAILABLE ? '3' : '2'}
pos="relative"
>
<Box h="full">
<Center mb={!IS_SATURATION_DATA_AVAILABLE ? '1' : 'px'}>
<Text
fontWeight="semibold"
fontSize="sm"
sx={{ color: 'var(--theme-staking-stake-pool-ticker-color)' }}
lineHeight="none"
>
{ticker}
</Text>
</Center>
{isGridRewardsView &&
(IS_RANKING_DATA_AVAILABLE && nonMyopicMemberRewards ? (
<Center py="0.5" pos="relative" flex="1 1 auto">
<Text fontSize="sm" fontWeight="semibold">
{this.formattedRewards(potentialRewards)}
</Text>
<AdaIcon svg={adaIcon} />
</Center>
) : (
<Center flex="1 1 auto">
<NoDataDashIcon svg={noDataDashBigImage} />
</Center>
))}
{!isGridRewardsView &&
(IS_RANKING_DATA_AVAILABLE ? (
<Center flex="1" style={{ color }} mt="1">
<Text fontSize="xl" fontWeight="bold" lineHeight="none">
{nonMyopicMemberRewards ? (
ranking
) : (
<>
{numberOfRankedStakePools + 1}
<Text display="inline-block">*</Text>
</>
)}
</Text>
</Center>
) : (
<Center flex="1 1 auto">
<NoDataDashIcon svg={noDataDashBigImage} />
</Center>
))}
{IS_SATURATION_DATA_AVAILABLE && (
<Center my="1">
<Flex
h="1"
w="10"
sx={{
background:
'var(--theme-staking-stake-pool-saturation-background-color)',
}}
borderRadius="sm"
>
<Box
as="span"
h="1"
sx={{
width: `${parseFloat(saturation).toFixed(2)}%`,
}}
bg={`stakePoolSaturation.${getSaturationColor(saturation)}`}
/>
</Flex>
</Center>
)}
</Box>
<Box alignSelf="flex-end" w="full">
{IS_RANKING_DATA_AVAILABLE ? (
<>
{retiring && (
<Box pos="absolute" right="0" top="0">
<ClockIcon svg={clockIcon} />
</Box>
)}
</div>
<Box h="1" w="full" sx={{ background: color }} flexShrink="0" />
</>
) : (
<div className={styles.noDataDash}>
<SVGInline svg={noDataDashBigImage} />
</div>
))}
{IS_SATURATION_DATA_AVAILABLE && (
<div className={saturationClassnames}>
<span
style={{
width: `${parseFloat(saturation).toFixed(2)}%`,
}}
/>
</div>
)}
{IS_RANKING_DATA_AVAILABLE ? (
<>
{retiring && (
<div className={styles.clock}>
<SVGInline svg={clockIcon} className={styles.clockIcon} />
</div>
)}
<div
className={styles.colorBand}
style={{
background: color,
}}
<Box
h="1"
w="full"
sx={{ background: 'var(--theme-staking-stake-pool-grey-color)' }}
flexShrink="0"
/>
</>
) : (
<div className={styles.greyColorBand} />
)}
</div>
)}
</Box>
</Flex>
);
}
}
Loading

0 comments on commit 7896501

Please sign in to comment.