Merge pull request MyCryptoHQ#88 from amacar/overhaul/global-account-…

…unlock-v1 Gau
PeterZlodej · Aug 8, 2019 · 58bc9e1 · 58bc9e1
2 parents 9b1dd0a + 85925c1
commit 58bc9e1
Show file tree

Hide file tree

Showing 8 changed files with 79 additions and 94 deletions.
diff --git a/common/AppRouter.tsx b/common/AppRouter.tsx
@@ -4,9 +4,7 @@ import { HashRouter, BrowserRouter, Route, Switch } from 'react-router-dom';
 import { ErrorScreen, LogOutPrompt } from 'components';
 import {
   BroadcastTx,
-  CheckTransaction,
   Contracts,
-  ENS,
   GenerateWallet,
   SendTransaction,
   SignAndVerifyMessage,
@@ -52,9 +50,7 @@ export const AppRouter = (props: AppRouterProps) => {
               <Route path="/account" component={SendTransaction} exact={true} />
               <Route path="/generate" component={GenerateWallet} />
               <Route path="/contracts" component={Contracts} />
-              <Route path="/ens" component={ENS} exact={true} />
               <Route path="/sign-and-verify-message" component={SignAndVerifyMessage} />
-              <Route path="/tx-status" component={CheckTransaction} exact={true} />
               <Route path="/pushTx" component={BroadcastTx} />
               <Route path="/support-us" component={SupportPage} exact={true} />
               <Layout>

diff --git a/common/v2/config/networks/globalProvider.ts b/common/v2/config/networks/globalProvider.ts
@@ -54,29 +54,25 @@ export const createProviderHandler = (network: Network): FallbackProvider => {
   return createFallBackProvidersFrom(newProviderPattern)[network.name as NetworkKey];
 };
 
-//allProviders are by default fallBackProviders, ex. allProviders.Ethereum -> will have main node (MyCrypto), and 2 fallback nodes
-export const allProviders: FallbackProviders = createFallBackProvidersFrom(PROVIDER_OPTIONS);
-
-type FilterFlags<Base, Condition> = {
-  [Key in keyof Base]: Base[Key] extends Condition ? Key : never;
-};
-type AllowedNames<Base, Condition> = FilterFlags<Base, Condition>[keyof Base];
+export class EthersJS {
+  public static getEthersInstance(network: Network): FallbackProvider {
+    if (!EthersJS.instance || !EthersJS.networkName) {
+      EthersJS.instance = createProviderHandler(network);
+      EthersJS.networkName = network.name;
+    }
+    return EthersJS.instance;
+  }
 
-type SubType<Base, Condition> = Pick<Base, AllowedNames<Base, Condition>>;
+  public static updateEthersInstance(network: Network): FallbackProvider {
+    EthersJS.instance = createProviderHandler(network);
+    EthersJS.networkName = network.name;
+    return EthersJS.instance;
+  }
 
-type ProviderMethod = SubType<FallbackProvider, (...args: any) => any>;
+  private static instance: FallbackProvider;
+  private static networkName: string;
 
-async function callMultiProviderMethod<K extends keyof ProviderMethod>(
-  method: K,
-  args: { [NetworkName in NetworkKey]?: Parameters<ProviderMethod[K]> }
-) {
-  const arrayOfResults = [];
-  for (const network of Object.keys(args)) {
-    const provider = allProviders[network as NetworkKey];
-    const argsForNetwork: any = args[network as NetworkKey];
-    arrayOfResults.push(await (provider[method] as any)(...argsForNetwork));
-  }
-  return arrayOfResults;
+  private constructor() {}
 }
 
-export default callMultiProviderMethod;
+export default EthersJS;
diff --git a/common/v2/config/networks/providerHandler.ts b/common/v2/config/networks/providerHandler.ts
@@ -3,7 +3,7 @@ import { formatEther } from 'ethers/utils/units';
 
 import { Asset, Network, IHexStrTransaction, TxObj } from 'v2/types';
 import { RPCRequests, baseToConvertedUnit, ERC20 } from 'v2/services/EthService';
-import { createProviderHandler } from './globalProvider';
+import { EthersJS } from './globalProvider';
 
 class ProviderHandler {
   public network: Network;
@@ -72,7 +72,7 @@ class ProviderHandler {
 
   /* TODO: Needs handling for web3 providers. */
   private fetchProvider(network: Network): FallbackProvider {
-    return createProviderHandler(network);
+    return EthersJS.getEthersInstance(network);
   }
 }
 

diff --git a/common/v2/features/Dashboard/Dashboard.tsx b/common/v2/features/Dashboard/Dashboard.tsx
@@ -1,7 +1,6 @@
 import React, { useContext } from 'react';
 import { Heading } from '@mycrypto/ui';
 
-import { NotificationsContext, NotificationTemplates } from 'v2/providers';
 import { useDevMode } from 'v2/services';
 import { AccountContext, AddressBookContext } from 'v2/services/Store';
 import { AccountList, BannerAd, Desktop, Mobile } from 'v2/components';
@@ -13,23 +12,13 @@ import './Dashboard.scss';
 export default function Dashboard() {
   const { isDevelopmentMode } = useDevMode();
   const { accounts } = useContext(AccountContext);
-  const { notifications, displayNotification } = useContext(NotificationsContext);
   const { readAddressBook } = useContext(AddressBookContext);
 
-  if (
-    !notifications.find(x => x.template === NotificationTemplates.onboardingResponsible) &&
-    accounts.length > 0
-  ) {
-    displayNotification(NotificationTemplates.onboardingResponsible, {
-      firstDashboardVisitDate: new Date()
-    });
-  }
-
   return (
     <div>
       {/* Mobile only */}
       <Mobile className="Dashboard-mobile">
-        <NotificationsPanel />
+        <NotificationsPanel accounts={accounts} />
         <div className="Dashboard-mobile-actions">
           {actions.map(action => (
             <ActionTile key={action.title} {...action} />
@@ -56,7 +45,7 @@ export default function Dashboard() {
       </Mobile>
       {/* Desktop only */}
       <Desktop className="Dashboard-desktop">
-        <NotificationsPanel />
+        <NotificationsPanel accounts={accounts} />
         <div className="Dashboard-desktop-top">
           <div className="Dashboard-desktop-top-left">
             <Heading as="h2" className="Dashboard-desktop-top-left-heading">

diff --git a/common/v2/features/Dashboard/NotificationsPanel/NotificationsPanel.tsx b/common/v2/features/Dashboard/NotificationsPanel/NotificationsPanel.tsx
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { useContext } from 'react';
 import { Panel, Button } from '@mycrypto/ui';
 import styled from 'styled-components';
 
@@ -8,7 +8,7 @@ import {
   notificationsConfigs,
   NotificationTemplates
 } from 'v2/providers/NotificationsProvider';
-import { Notification } from 'v2/types';
+import { ExtendedAccount } from 'v2/types';
 
 // Legacy
 import closeIcon from 'common/assets/images/icn-close.svg';
@@ -37,12 +37,19 @@ const CloseButton = styled(Button)`
   }
 `;
 
-class NotificationsPanel extends Component {
-  public handleCloseClick = (
-    currentNotification: Notification,
-    dismissCurrentNotification: () => void,
-    displayNotification: (templateName: string, templateData?: object) => void
-  ) => {
+interface Props {
+  accounts: ExtendedAccount[];
+}
+
+const NotificationsPanel = ({ accounts }: Props) => {
+  const {
+    notifications,
+    displayNotification,
+    currentNotification,
+    dismissCurrentNotification
+  } = useContext(NotificationsContext);
+
+  const handleCloseClick = () => {
     if (!currentNotification) {
       return;
     }
@@ -66,40 +73,34 @@ class NotificationsPanel extends Component {
     }
   };
 
-  public render() {
-    return (
-      <NotificationsContext.Consumer>
-        {({ currentNotification, dismissCurrentNotification, displayNotification }) => (
-          <React.Fragment>
-            {currentNotification && (
-              <MainPanel>
-                <CloseButton
-                  basic={true}
-                  onClick={() =>
-                    this.handleCloseClick(
-                      currentNotification,
-                      dismissCurrentNotification,
-                      displayNotification
-                    )
-                  }
-                >
-                  <img src={closeIcon} alt="Close" />
-                </CloseButton>
-                {this.getNotificationBody(currentNotification)}
-              </MainPanel>
-            )}
-          </React.Fragment>
-        )}
-      </NotificationsContext.Consumer>
-    );
+  if (
+    !notifications.find(x => x.template === NotificationTemplates.onboardingResponsible) &&
+    accounts.length > 0
+  ) {
+    displayNotification(NotificationTemplates.onboardingResponsible, {
+      firstDashboardVisitDate: new Date()
+    });
   }
 
-  private getNotificationBody(currentNotification: Notification) {
-    const template = currentNotification.template;
-    const templateData = currentNotification.templateData;
+  const getNotificationBody = () => {
+    const template = currentNotification!.template;
+    const templateData = currentNotification!.templateData;
     const NotificationComponent = notificationsConfigs[template].layout;
     return <NotificationComponent {...templateData} />;
-  }
-}
+  };
+
+  return (
+    <React.Fragment>
+      {currentNotification && (
+        <MainPanel>
+          <CloseButton basic={true} onClick={handleCloseClick}>
+            <img src={closeIcon} alt="Close" />
+          </CloseButton>
+          {getNotificationBody()}
+        </MainPanel>
+      )}
+    </React.Fragment>
+  );
+};
 
 export default NotificationsPanel;
diff --git a/common/v2/features/Layout/Header/constants.ts b/common/v2/features/Layout/Header/constants.ts
@@ -39,18 +39,10 @@ export const links = [
         to: '/contracts',
         title: 'Interact with Contracts'
       },
-      {
-        to: '/transaction-status',
-        title: 'Check Transaction Status'
-      },
       {
         to: '/broadcast-transaction',
         title: 'Broadcast Transaction'
       },
-      {
-        to: '/ens',
-        title: 'ENS Domains'
-      },
       {
         to: '/helpers',
         title: 'Helpers'

diff --git a/common/v2/services/Store/Settings/SettingsProvider.tsx b/common/v2/services/Store/Settings/SettingsProvider.tsx
@@ -57,12 +57,16 @@ export class SettingsProvider extends Component {
     return <SettingsContext.Provider value={this.state}>{children}</SettingsContext.Provider>;
   }
   private isValidImport(importedCache: string, localStorage: string) {
-    const parsedImport = JSON.parse(importedCache);
-    const parsedLocalStorage = JSON.parse(localStorage);
+    try {
+      const parsedImport = JSON.parse(importedCache);
+      const parsedLocalStorage = JSON.parse(localStorage);
 
-    const oldKeys = Object.keys(parsedImport).sort();
-    const newKeys = Object.keys(parsedLocalStorage).sort();
-    return JSON.stringify(oldKeys) === JSON.stringify(newKeys);
+      const oldKeys = Object.keys(parsedImport).sort();
+      const newKeys = Object.keys(parsedLocalStorage).sort();
+      return JSON.stringify(oldKeys) === JSON.stringify(newKeys);
+    } catch (error) {
+      return false;
+    }
   }
   private getSettings = () => {
     const settings: ISettings = readAllSettings() || [];

diff --git a/webpack_config/makeConfig.js b/webpack_config/makeConfig.js
@@ -79,11 +79,18 @@ module.exports = function(opts = {}) {
     rules.push(
       {
         test: /\.css$/,
-        use: [MiniCSSExtractPlugin.loader, 'css-loader']
+        include: [
+          path.resolve(config.path.src, 'vendor'),
+          path.resolve(__dirname, '../node_modules/typeface-lato')
+        ],
+        use: ['style-loader', 'css-loader']
       },
       {
         test: /\.scss$/,
-        use: [MiniCSSExtractPlugin.loader, 'css-loader', sassLoader]
+        include: ['components', 'containers', 'sass', 'v2']
+          .map(dir => path.resolve(config.path.src, dir))
+          .concat([config.path.modules]),
+        use: ['style-loader', 'css-loader', sassLoader]
       }
     );
   } else {