Skip to content

Commit 7896501

Browse files
renanvalentinrenanvalentin
committed
[DDW-788] Chakra-ui
1 parent 7ec4afd commit 7896501

File tree

12 files changed

+1888
-113
lines changed

12 files changed

+1888
-113
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: 124 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@ import BigNumber from 'bignumber.js';
33
import React, { Component } from 'react';
44
import { observer } from 'mobx-react';
55
import SVGInline from 'react-svg-inline';
6-
import classnames from 'classnames';
6+
import { Box, Text, Center, Flex } from '@chakra-ui/react';
7+
import styled from '@emotion/styled';
78
import clockIcon from '../../../assets/images/clock-corner.inline.svg';
89
import noDataDashBigImage from '../../../assets/images/no-data-dash-big.inline.svg';
9-
import styles from './ThumbPoolContent.scss';
1010
import { getColorFromRange, getSaturationColor } from '../../../utils/colors';
1111
import StakePool from '../../../domains/StakePool';
1212
import {
@@ -16,6 +16,38 @@ import {
1616
import adaIcon from '../../../assets/images/ada-symbol.inline.svg';
1717
import { formattedWalletAmount } from '../../../utils/formatters';
1818

19+
const AdaIcon = styled(SVGInline)`
20+
svg {
21+
height: 11px;
22+
width: 10px;
23+
24+
& > g {
25+
& > g {
26+
stroke: var(--theme-staking-wallet-row-ticker-ada-icon-fill-color);
27+
}
28+
}
29+
}
30+
`;
31+
32+
const ClockIcon = styled(SVGInline)`
33+
svg {
34+
height: 15px;
35+
width: 15px;
36+
}
37+
`;
38+
39+
const NoDataDashIcon = styled(SVGInline)`
40+
svg {
41+
height: 3px;
42+
width: 12px;
43+
44+
path {
45+
fill: var(--theme-staking-stake-pool-grey-color) !important;
46+
opacity: 1 !important;
47+
}
48+
}
49+
`;
50+
1951
type Props = {
2052
stakePool: StakePool,
2153
numberOfRankedStakePools: number,
@@ -55,74 +87,100 @@ export default class ThumbPoolContent extends Component<Props> {
5587
} = stakePool;
5688
const color = getColorFromRange(ranking, numberOfRankedStakePools);
5789

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-
6890
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-
</>
91+
<Flex
92+
h="16"
93+
w="20"
94+
flexDirection="column"
95+
pt={!IS_SATURATION_DATA_AVAILABLE ? '3' : '2'}
96+
pos="relative"
97+
>
98+
<Box h="full">
99+
<Center mb={!IS_SATURATION_DATA_AVAILABLE ? '1' : 'px'}>
100+
<Text
101+
fontWeight="semibold"
102+
fontSize="sm"
103+
sx={{ color: 'var(--theme-staking-stake-pool-ticker-color)' }}
104+
lineHeight="none"
105+
>
106+
{ticker}
107+
</Text>
108+
</Center>
109+
{isGridRewardsView &&
110+
(IS_RANKING_DATA_AVAILABLE && nonMyopicMemberRewards ? (
111+
<Center py="0.5" pos="relative" flex="1 1 auto">
112+
<Text fontSize="sm" fontWeight="semibold">
113+
{this.formattedRewards(potentialRewards)}
114+
</Text>
115+
<AdaIcon svg={adaIcon} />
116+
</Center>
117+
) : (
118+
<Center flex="1 1 auto">
119+
<NoDataDashIcon svg={noDataDashBigImage} />
120+
</Center>
121+
))}
122+
{!isGridRewardsView &&
123+
(IS_RANKING_DATA_AVAILABLE ? (
124+
<Center flex="1" style={{ color }} mt="1">
125+
<Text fontSize="xl" fontWeight="bold" lineHeight="none">
126+
{nonMyopicMemberRewards ? (
127+
ranking
128+
) : (
129+
<>
130+
{numberOfRankedStakePools + 1}
131+
<Text display="inline-block">*</Text>
132+
</>
133+
)}
134+
</Text>
135+
</Center>
136+
) : (
137+
<Center flex="1 1 auto">
138+
<NoDataDashIcon svg={noDataDashBigImage} />
139+
</Center>
140+
))}
141+
{IS_SATURATION_DATA_AVAILABLE && (
142+
<Center my="1">
143+
<Flex
144+
h="1"
145+
w="10"
146+
sx={{
147+
background:
148+
'var(--theme-staking-stake-pool-saturation-background-color)',
149+
}}
150+
borderRadius="sm"
151+
>
152+
<Box
153+
as="span"
154+
h="1"
155+
sx={{
156+
width: `${parseFloat(saturation).toFixed(2)}%`,
157+
}}
158+
bg={`stakePoolSaturation.${getSaturationColor(saturation)}`}
159+
/>
160+
</Flex>
161+
</Center>
162+
)}
163+
</Box>
164+
<Box alignSelf="flex-end" w="full">
165+
{IS_RANKING_DATA_AVAILABLE ? (
166+
<>
167+
{retiring && (
168+
<Box pos="absolute" right="0" top="0">
169+
<ClockIcon svg={clockIcon} />
170+
</Box>
92171
)}
93-
</div>
172+
<Box h="1" w="full" sx={{ background: color }} flexShrink="0" />
173+
</>
94174
) : (
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-
}}
175+
<Box
176+
h="1"
177+
w="full"
178+
sx={{ background: 'var(--theme-staking-stake-pool-grey-color)' }}
179+
flexShrink="0"
120180
/>
121-
</>
122-
) : (
123-
<div className={styles.greyColorBand} />
124-
)}
125-
</div>
181+
)}
182+
</Box>
183+
</Flex>
126184
);
127185
}
128186
}

0 commit comments

Comments
 (0)