refactor and add readCssVar function

Emurgo · Oct 13, 2021 · 25c345a · 25c345a
1 parent 97b1267
commit 25c345a
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 27 deletions.
diff --git a/packages/yoroi-extension/app/components/wallet/staking/dashboard/GraphWrapper.js b/packages/yoroi-extension/app/components/wallet/staking/dashboard/GraphWrapper.js
@@ -10,6 +10,7 @@ import styles from './GraphWrapper.scss';
 import CardShadow from './CardShadow';
 import globalMessages from '../../../../i18n/global-messages';
 import type { $npm$ReactIntl$IntlFormat } from 'react-intl';
+import { readCssVar } from '../../../../styles/utils';
 
 const messages = defineMessages({
   epochAxisLabel: {
@@ -95,7 +96,6 @@ const GraphTabs: {|
 // };
 
 const Graph: {|
-  themeVars: Object,
   data: Array<GraphItems>,
   epochTitle: string,
   stakepoolNameTitle: string,
@@ -104,7 +104,6 @@ const Graph: {|
   primaryBarLabel: string,
   hideYAxis: boolean,
 |} => Node = ({
-  themeVars,
   data,
   epochTitle,
   stakepoolNameTitle,
@@ -115,11 +114,11 @@ const Graph: {|
 }) => {
 
   const graphVars = {
-    axisTickColor: themeVars['--theme-dashboard-graph-axis-tick-color'],
-    axisTextColor: themeVars['--theme-dashboard-graph-axis-text-color'],
-    barWidth: themeVars['--theme-dashboard-graph-bar-width'],
-    barHoverBgColor: themeVars['--theme-dashboard-graph-bar-hover-background-color'],
-    barPrimaryColor: themeVars['--theme-dashboard-graph-bar-primary-color'],
+    axisTickColor: readCssVar('--theme-dashboard-graph-axis-tick-color'),
+    axisTextColor: readCssVar('--theme-dashboard-graph-axis-text-color'),
+    barWidth: readCssVar('--theme-dashboard-graph-bar-width'),
+    barHoverBgColor: readCssVar('--theme-dashboard-graph-bar-hover-background-color'),
+    barPrimaryColor: readCssVar('--theme-dashboard-graph-bar-primary-color'),
     fontSize: '0.75rem',
     lineHeight: 14,
   };
@@ -214,7 +213,6 @@ const Graph: {|
 };
 
 type Props = {|
-  themeVars: Object,
   epochLength: ?number,
   tabs: Array<{|
     tabName: string,
@@ -253,7 +251,7 @@ export default class GraphWrapper extends Component<Props, State> {
 
   render(): Node {
     const { intl } = this.context;
-    const { tabs, themeVars } = this.props;
+    const { tabs } = this.props;
 
     return (
       <div className={styles.wrapper}>
@@ -277,7 +275,6 @@ export default class GraphWrapper extends Component<Props, State> {
               xAxisLabel={this._getEpochLengthLabel()}
               yAxisLabel={tabs[this.state.selectedTab].yAxisLabel}
               primaryBarLabel={tabs[this.state.selectedTab].primaryBarLabel}
-              themeVars={themeVars}
               data={tabs[this.state.selectedTab].data}
               hideYAxis={tabs[this.state.selectedTab].hideYAxis}
             />

diff --git a/packages/yoroi-extension/app/components/wallet/staking/dashboard/StakingDashboard.js b/packages/yoroi-extension/app/components/wallet/staking/dashboard/StakingDashboard.js
@@ -58,7 +58,6 @@ export type GraphData = {|
 |};
 
 type Props = {|
-  +themeVars: Object,
   +graphData: GraphData,
   +stakePools: {| error: LocalizableError, |} | {| pools: null | Array<Node | void> |},
   +userSummary: Node,
@@ -161,7 +160,6 @@ export default class StakingDashboard extends Component<Props> {
     const items = graphData.items;
     return (
       <GraphWrapper
-        themeVars={this.props.themeVars}
         tabs={[
           {
             tabName: intl.formatMessage(globalMessages.rewardsLabel),

diff --git a/packages/yoroi-extension/app/components/widgets/QrCodeWrapper.js b/packages/yoroi-extension/app/components/widgets/QrCodeWrapper.js
@@ -3,17 +3,13 @@ import { Component } from 'react';
 import type { Node } from 'react';
 import { observer } from 'mobx-react';
 import QRCode from 'qrcode.react';
+import { readCssVar } from '../../styles/utils';
 
 type Props = {|
   +value: string,
   +size: number,
 |};
 
-function readCssVar(varName: string): string {
-  varName = varName.startsWith('--') ? varName : '--' + varName;
-  return window.getComputedStyle(document.documentElement).getPropertyValue(varName);
-}
-
 @observer
 export default class QrCodeWrapper extends Component<Props> {
   render(): Node {

diff --git a/packages/yoroi-extension/app/containers/wallet/staking/StakingDashboardPage.js b/packages/yoroi-extension/app/containers/wallet/staking/StakingDashboardPage.js
@@ -118,8 +118,6 @@ export default class StakingDashboardPage extends Component<Props> {
     const errorIfPresent = this.getErrorInFetch(publicDeriver);
     const stakePools = errorIfPresent == null ? this.getStakePools(publicDeriver) : errorIfPresent;
 
-    const { getThemeVars } = this.generated.stores.profile;
-
     const dashboard = (
       <StakingDashboard
         pageInfo={
@@ -139,7 +137,6 @@ export default class StakingDashboardPage extends Component<Props> {
               }
         }
         hasAnyPending={this.generated.stores.transactions.hasAnyPending}
-        themeVars={getThemeVars({ theme: 'YoroiModern' })}
         stakePools={stakePools}
         userSummary={this._generateUserSummary({
           delegationRequests,
@@ -995,10 +992,6 @@ export default class StakingDashboardPage extends Component<Props> {
         selectedExplorer: Map<number, SelectedExplorer>,
       |},
       profile: {|
-        getThemeVars: ({| theme: string |}) => {
-          [key: string]: string,
-          ...
-        },
         isClassicTheme: boolean,
         shouldHideBalance: boolean,
         unitOfAccount: UnitOfAccountSettingType,
@@ -1094,7 +1087,6 @@ export default class StakingDashboardPage extends Component<Props> {
         profile: {
           isClassicTheme: stores.profile.isClassicTheme,
           shouldHideBalance: stores.profile.shouldHideBalance,
-          getThemeVars: stores.profile.getThemeVars,
           unitOfAccount: stores.profile.unitOfAccount,
         },
         wallets: {

diff --git a/packages/yoroi-extension/app/containers/wallet/staking/StakingDashboardPage.stories.js b/packages/yoroi-extension/app/containers/wallet/staking/StakingDashboardPage.stories.js
@@ -28,7 +28,6 @@ import CachedRequest from '../../../stores/lib/LocalizedCachedRequest';
 import type { GetBalanceFunc } from '../../../api/common/types';
 import StakingDashboardPage from './StakingDashboardPage';
 import { mockWalletProps } from '../Wallet.mock';
-import { getVarsForTheme } from '../../../stores/base/BaseProfileStore';
 import { defaultToSelectedExplorer } from '../../../domain/SelectedExplorer';
 import { buildRoute } from '../../../utils/routing';
 import { ROUTES } from '../../../routes-config';
@@ -137,7 +136,6 @@ const genBaseProps: {|
         shouldHideBalance: request.allowToggleHidden
           ? boolean('hideBalance', false)
           : false,
-        getThemeVars: getVarsForTheme,
         unitOfAccount: genUnitOfAccount(),
       },
       wallets: {

diff --git a/packages/yoroi-extension/app/styles/utils.js b/packages/yoroi-extension/app/styles/utils.js
@@ -0,0 +1,6 @@
+// @flow
+function readCssVar(varName: string): string {
+  varName = varName.startsWith('--') ? varName : '--' + varName;
+  return window.getComputedStyle(document.documentElement).getPropertyValue(varName);
+}
+export { readCssVar };