Skip to content

Commit c0e7eab

Browse files
renanvalentinrenanvalentin
committed
[DDW-788] Chakra-ui
1 parent edaf6c8 commit c0e7eab

File tree

8 files changed

+1147
-281
lines changed

8 files changed

+1147
-281
lines changed

‎package.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,7 @@
8282
"@babel/preset-react": "7.0.0",
8383
"@babel/register": "7.0.0",
8484
"@dump247/storybook-state": "1.6.1",
85+
"@emotion/babel-plugin": "11.7.2",
8586
"@storybook/addon-actions": "5.3.14",
8687
"@storybook/addon-knobs": "5.3.14",
8788
"@storybook/addon-links": "5.3.14",
@@ -178,6 +179,9 @@
178179
},
179180
"dependencies": {
180181
"@cardano-foundation/ledgerjs-hw-app-cardano": "4.0.0",
182+
"@chakra-ui/react": "1.7.4",
183+
"@emotion/react": "11.7.1",
184+
"@emotion/styled": "11.6.0",
181185
"@iohk-jormungandr/wallet-js": "0.5.0-pre7",
182186
"@ledgerhq/hw-transport-node-hid": "5.51.1",
183187
"aes-js": "3.1.2",
@@ -204,6 +208,7 @@
204208
"find-process": "1.4.7",
205209
"fireworks-js": "1.0.4",
206210
"form-data": "3.0.0",
211+
"framer-motion": "4.1.17",
207212
"fs-extra": "9.0.1",
208213
"glob": "7.1.6",
209214
"graceful-fs": "4.2.4",

‎source/renderer/app/App.js‎

Lines changed: 58 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { SimpleDefaults } from 'react-polymorph/lib/themes/simple';
77
import DevTools from 'mobx-react-devtools';
88
import { Router } from 'react-router-dom';
99
import { IntlProvider } from 'react-intl';
10+
import { ChakraProvider, extendTheme } from '@chakra-ui/react';
1011
import { Routes } from './Routes';
1112
import { daedalusTheme } from './themes/daedalus';
1213
import { themeOverrides } from './themes/overrides';
@@ -21,6 +22,29 @@ import type { StoresMap } from './stores/index';
2122
import type { ActionsMap } from './actions/index';
2223
import NewsFeedContainer from './containers/news/NewsFeedContainer';
2324

25+
const theme = extendTheme({
26+
fonts: {
27+
body: 'NotoSans-Regular, NotoSansCJKjp-Regular',
28+
heading: 'NotoSans-Regular, NotoSansCJKjp-Regular',
29+
mono: 'NotoSans-Regular, NotoSansCJKjp-Regular',
30+
},
31+
components: {
32+
Text: {
33+
baseStyle: {
34+
fontFamily: 'NotoSans-Regular, NotoSansCJKjp-Regular',
35+
},
36+
},
37+
},
38+
colors: {
39+
stakePoolSaturation: {
40+
green: '--theme-staking-stake-pool-saturation-green-color',
41+
orange: '--theme-staking-stake-pool-saturation-orange-color',
42+
red: '--theme-staking-stake-pool-saturation-red-color',
43+
yellow: '--theme-staking-stake-pool-saturation-yellow-color',
44+
},
45+
},
46+
});
47+
2448
@observer
2549
export default class App extends Component<{
2650
stores: StoresMap,
@@ -53,39 +77,41 @@ export default class App extends Component<{
5377
}
5478

5579
return (
56-
<Fragment>
57-
<ThemeManager variables={themeVars} />
58-
<Provider stores={stores} actions={actions}>
59-
<ThemeProvider
60-
theme={daedalusTheme}
61-
skins={SimpleSkins}
62-
variables={SimpleDefaults}
63-
themeOverrides={themeOverrides}
64-
>
65-
<IntlProvider
66-
{...{ locale, key: locale, messages: translations[locale] }}
80+
<ChakraProvider theme={theme}>
81+
<Fragment>
82+
<ThemeManager variables={themeVars} />
83+
<Provider stores={stores} actions={actions}>
84+
<ThemeProvider
85+
theme={daedalusTheme}
86+
skins={SimpleSkins}
87+
variables={SimpleDefaults}
88+
themeOverrides={themeOverrides}
6789
>
68-
<Fragment>
69-
<Router history={history}>
70-
<Routes />
71-
</Router>
72-
{mobxDevTools}
73-
{[
74-
isActiveDialog(ABOUT) && <AboutDialog key="aboutDialog" />,
75-
isActiveDialog(DAEDALUS_DIAGNOSTICS) && (
76-
<DaedalusDiagnosticsDialog key="daedalusDiagnosticsDialog" />
77-
),
78-
<NotificationsContainer key="notificationsContainer" />,
79-
]}
80-
{canShowNews && [
81-
<NewsFeedContainer key="newsFeedList" />,
82-
<NewsOverlayContainer key="newsFeedOverlay" />,
83-
]}
84-
</Fragment>
85-
</IntlProvider>
86-
</ThemeProvider>
87-
</Provider>
88-
</Fragment>
90+
<IntlProvider
91+
{...{ locale, key: locale, messages: translations[locale] }}
92+
>
93+
<Fragment>
94+
<Router history={history}>
95+
<Routes />
96+
</Router>
97+
{mobxDevTools}
98+
{[
99+
isActiveDialog(ABOUT) && <AboutDialog key="aboutDialog" />,
100+
isActiveDialog(DAEDALUS_DIAGNOSTICS) && (
101+
<DaedalusDiagnosticsDialog key="daedalusDiagnosticsDialog" />
102+
),
103+
<NotificationsContainer key="notificationsContainer" />,
104+
]}
105+
{canShowNews && [
106+
<NewsFeedContainer key="newsFeedList" />,
107+
<NewsOverlayContainer key="newsFeedOverlay" />,
108+
]}
109+
</Fragment>
110+
</IntlProvider>
111+
</ThemeProvider>
112+
</Provider>
113+
</Fragment>
114+
</ChakraProvider>
89115
);
90116
}
91117
}

‎source/renderer/app/components/staking/widgets/ThumbPool.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,8 @@
2121
background-color: var(--theme-staking-stake-pool-background-color);
2222
border: 1px solid var(--theme-staking-stake-pool-border-color);
2323
cursor: pointer;
24-
height: 71px;
25-
width: 80px;
24+
// height: 71px;
25+
// width: 80px;
2626
}
2727
}
2828
}

‎source/renderer/app/components/staking/widgets/ThumbPoolContent.js‎

Lines changed: 92 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,9 @@
22
import BigNumber from 'bignumber.js';
33
import React, { Component } from 'react';
44
import { observer } from 'mobx-react';
5-
import SVGInline from 'react-svg-inline';
6-
import classnames from 'classnames';
5+
import { Box, Text, Center, Flex } from '@chakra-ui/react';
76
import clockIcon from '../../../assets/images/clock-corner.inline.svg';
87
import noDataDashBigImage from '../../../assets/images/no-data-dash-big.inline.svg';
9-
import styles from './ThumbPoolContent.scss';
108
import { getColorFromRange, getSaturationColor } from '../../../utils/colors';
119
import StakePool from '../../../domains/StakePool';
1210
import {
@@ -15,6 +13,7 @@ import {
1513
} from '../../../config/stakingConfig';
1614
import adaIcon from '../../../assets/images/ada-symbol.inline.svg';
1715
import { formattedWalletAmount } from '../../../utils/formatters';
16+
import { AdaIcon, ClockIcon, NoDataDashIcon } from './ThumbPoolContent.styles';
1817

1918
type Props = {
2019
stakePool: StakePool,
@@ -55,74 +54,100 @@ export default class ThumbPoolContent extends Component<Props> {
5554
} = stakePool;
5655
const color = getColorFromRange(ranking, numberOfRankedStakePools);
5756

58-
const componentClassnames = classnames([
59-
styles.component,
60-
!IS_SATURATION_DATA_AVAILABLE ? styles.hideSaturation : null,
61-
]);
62-
63-
const saturationClassnames = classnames([
64-
styles.saturationBar,
65-
styles[getSaturationColor(saturation)],
66-
]);
67-
6857
return (
69-
<div className={componentClassnames}>
70-
<div className={styles.ticker}>{ticker}</div>
71-
{isGridRewardsView &&
72-
(IS_RANKING_DATA_AVAILABLE && nonMyopicMemberRewards ? (
73-
<div className={styles.rewards}>
74-
{this.formattedRewards(potentialRewards)}
75-
<SVGInline svg={adaIcon} className={styles.adaIcon} />
76-
</div>
77-
) : (
78-
<div className={styles.noDataDash}>
79-
<SVGInline svg={noDataDashBigImage} />
80-
</div>
81-
))}
82-
{!isGridRewardsView &&
83-
(IS_RANKING_DATA_AVAILABLE ? (
84-
<div className={styles.ranking} style={{ color }}>
85-
{nonMyopicMemberRewards ? (
86-
ranking
87-
) : (
88-
<>
89-
{numberOfRankedStakePools + 1}
90-
<sup>*</sup>
91-
</>
58+
<Flex
59+
h="16"
60+
w="20"
61+
flexDirection="column"
62+
pt={!IS_SATURATION_DATA_AVAILABLE ? '3' : '2'}
63+
pos="relative"
64+
>
65+
<Box h="full">
66+
<Center mb={!IS_SATURATION_DATA_AVAILABLE ? '1' : 'px'}>
67+
<Text
68+
fontWeight="semibold"
69+
fontSize="sm"
70+
sx={{ color: 'var(--theme-staking-stake-pool-ticker-color)' }}
71+
lineHeight="none"
72+
>
73+
{ticker}
74+
</Text>
75+
</Center>
76+
{isGridRewardsView &&
77+
(IS_RANKING_DATA_AVAILABLE && nonMyopicMemberRewards ? (
78+
<Center py="0.5" pos="relative" flex="1 1 auto">
79+
<Text fontSize="sm" fontWeight="semibold">
80+
{this.formattedRewards(potentialRewards)}
81+
</Text>
82+
<AdaIcon svg={adaIcon} />
83+
</Center>
84+
) : (
85+
<Center flex="1 1 auto">
86+
<NoDataDashIcon svg={noDataDashBigImage} />
87+
</Center>
88+
))}
89+
{!isGridRewardsView &&
90+
(IS_RANKING_DATA_AVAILABLE ? (
91+
<Center flex="1" style={{ color }} mt="1">
92+
<Text fontSize="xl" fontWeight="bold" lineHeight="none">
93+
{nonMyopicMemberRewards ? (
94+
ranking
95+
) : (
96+
<>
97+
{numberOfRankedStakePools + 1}
98+
<Text display="inline-block">*</Text>
99+
</>
100+
)}
101+
</Text>
102+
</Center>
103+
) : (
104+
<Center flex="1 1 auto">
105+
<NoDataDashIcon svg={noDataDashBigImage} />
106+
</Center>
107+
))}
108+
{IS_SATURATION_DATA_AVAILABLE && (
109+
<Center my="1">
110+
<Flex
111+
h="1"
112+
w="10"
113+
sx={{
114+
background:
115+
'var(--theme-staking-stake-pool-saturation-background-color)',
116+
}}
117+
borderRadius="sm"
118+
>
119+
<Box
120+
as="span"
121+
h="1"
122+
sx={{
123+
width: `${parseFloat(saturation).toFixed(2)}%`,
124+
}}
125+
bg={`stakePoolSaturation.${getSaturationColor(saturation)}`}
126+
/>
127+
</Flex>
128+
</Center>
129+
)}
130+
</Box>
131+
<Box alignSelf="flex-end" w="full">
132+
{IS_RANKING_DATA_AVAILABLE ? (
133+
<>
134+
{retiring && (
135+
<Box pos="absolute" right="0" top="0">
136+
<ClockIcon svg={clockIcon} />
137+
</Box>
92138
)}
93-
</div>
139+
<Box h="1" w="full" sx={{ background: color }} flexShrink="0" />
140+
</>
94141
) : (
95-
<div className={styles.noDataDash}>
96-
<SVGInline svg={noDataDashBigImage} />
97-
</div>
98-
))}
99-
{IS_SATURATION_DATA_AVAILABLE && (
100-
<div className={saturationClassnames}>
101-
<span
102-
style={{
103-
width: `${parseFloat(saturation).toFixed(2)}%`,
104-
}}
105-
/>
106-
</div>
107-
)}
108-
{IS_RANKING_DATA_AVAILABLE ? (
109-
<>
110-
{retiring && (
111-
<div className={styles.clock}>
112-
<SVGInline svg={clockIcon} className={styles.clockIcon} />
113-
</div>
114-
)}
115-
<div
116-
className={styles.colorBand}
117-
style={{
118-
background: color,
119-
}}
142+
<Box
143+
h="1"
144+
w="full"
145+
sx={{ background: 'var(--theme-staking-stake-pool-grey-color)' }}
146+
flexShrink="0"
120147
/>
121-
</>
122-
) : (
123-
<div className={styles.greyColorBand} />
124-
)}
125-
</div>
148+
)}
149+
</Box>
150+
</Flex>
126151
);
127152
}
128153
}

0 commit comments

Comments
 (0)