feat: use color from metaData instead of default primaryColor

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);