(Feature) Automatic ui updates

src/services/web3_wrapper.ts

@@ -38,3 +38,25 @@ export const getWeb3WrapperOrThrow = async (): Promise<Web3Wrapper> => {
 
     return web3WrapperOrNull;
 };
+
+/* Event to detect if user has changed the account */
+export const accountChangedSubscription = (onChangeCb: () => void) => {
+    const { ethereum } = window;
+    if (!web3Wrapper || !onChangeCb) {
+        return;
+    }
+    ethereum.on('accountsChanged', async (accounts: []) => {
+        onChangeCb();
+    });
+};
+
+/* Event to detect if user has changed the network */
+export const networkChangedSubscription = (onChangeCb: () => void) => {
+    const { ethereum } = window;
+    if (!web3Wrapper || !onChangeCb) {
+        return;
+    }
+    ethereum.on('networkChanged', async (network: number) => {
+        onChangeCb();
+    });
+};

src/store/actions.ts

@@ -7,7 +7,12 @@ import { getContractWrappers } from '../services/contract_wrappers';
 import { cancelSignedOrder, getAllOrdersAsUIOrders, getUserOrdersAsUIOrders } from '../services/orders';
 import { getRelayer } from '../services/relayer';
 import { getTokenBalance, tokenToTokenBalance } from '../services/tokens';
-import { getWeb3Wrapper, getWeb3WrapperOrThrow } from '../services/web3_wrapper';
+import {
+    accountChangedSubscription,
+    getWeb3Wrapper,
+    getWeb3WrapperOrThrow,
+    networkChangedSubscription,
+} from '../services/web3_wrapper';
 import { getKnownTokens } from '../util/known_tokens';
 import { buildOrder } from '../util/orders';
 import { BlockchainState, OrderSide, RelayerState, Token, TokenBalance, UIOrder, Web3State } from '../util/types';
@@ -168,6 +173,15 @@ export const initWallet = () => {
 
             const selectedToken = knownTokens.getTokenBySymbol('ZRX');
 
+            /* Subscriptions register **/
+            networkChangedSubscription(() => {
+                /* Performs a reload to avoid a bug with MetaMask: "MetaMask - RPC Error: Internal JSON-RPC" **/
+                window.location.reload();
+            });
+            accountChangedSubscription(() => {
+                window.location.reload();
+            });
+
             dispatch(
                 initializeBlockchainData({
                     web3State: Web3State.Done,