aboutsummaryrefslogtreecommitdiffstats
path: root/packages
diff options
context:
space:
mode:
Diffstat (limited to 'packages')
-rw-r--r--packages/instant/src/components/zero_ex_instant.tsx6
-rw-r--r--packages/instant/src/containers/selected_asset_theme_provider.ts32
2 files changed, 35 insertions, 3 deletions
diff --git a/packages/instant/src/components/zero_ex_instant.tsx b/packages/instant/src/components/zero_ex_instant.tsx
index a67c0f412..c59c838a2 100644
--- a/packages/instant/src/components/zero_ex_instant.tsx
+++ b/packages/instant/src/components/zero_ex_instant.tsx
@@ -3,12 +3,12 @@ import { ObjectMap } from '@0x/types';
import * as React from 'react';
import { Provider } from 'react-redux';
+import { SelectedAssetThemeProvider } from '../containers/selected_asset_theme_provider';
import { assetMetaDataMap } from '../data/asset_meta_data_map';
import { asyncData } from '../redux/async_data';
import { State } from '../redux/reducer';
import { store, Store } from '../redux/store';
import { fonts } from '../style/fonts';
-import { theme, ThemeProvider } from '../style/theme';
import { AssetMetaData } from '../types';
import { assetUtils } from '../util/asset';
import { getProvider } from '../util/provider';
@@ -53,9 +53,9 @@ export class ZeroExInstant extends React.Component<ZeroExInstantProps> {
public render(): React.ReactNode {
return (
<Provider store={this.store}>
- <ThemeProvider theme={theme}>
+ <SelectedAssetThemeProvider>
<ZeroExInstantContainer />
- </ThemeProvider>
+ </SelectedAssetThemeProvider>
</Provider>
);
}
diff --git a/packages/instant/src/containers/selected_asset_theme_provider.ts b/packages/instant/src/containers/selected_asset_theme_provider.ts
new file mode 100644
index 000000000..6e6b83d73
--- /dev/null
+++ b/packages/instant/src/containers/selected_asset_theme_provider.ts
@@ -0,0 +1,32 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+import { connect } from 'react-redux';
+
+import { State } from '../redux/reducer';
+import { Theme, theme as defaultTheme, ThemeProvider } from '../style/theme';
+import { Asset } from '../types';
+
+export interface SelectedAssetThemeProviderProps {}
+
+interface ConnectedState {
+ theme: Theme;
+}
+
+const getTheme = (asset?: Asset): Theme => {
+ if (!_.isUndefined(asset) && !_.isUndefined(asset.metaData.primaryColor)) {
+ return {
+ ...defaultTheme,
+ primaryColor: asset.metaData.primaryColor,
+ };
+ }
+ return defaultTheme;
+};
+
+const mapStateToProps = (state: State, _ownProps: SelectedAssetThemeProviderProps): ConnectedState => {
+ const theme = getTheme(state.selectedAsset);
+ return { theme };
+};
+
+export const SelectedAssetThemeProvider: React.ComponentClass<SelectedAssetThemeProviderProps> = connect(
+ mapStateToProps,
+)(ThemeProvider);