Network component

src/App.tsx

@@ -15,6 +15,7 @@ import Topup from "./components/v2/Topup";
 import BalanceTracker from "./components/v2/BalanceTracker";
 import {Routes} from "./components/v2/Routes";
 import HeiswapTracker from "./components/v2/HeiswapTracker";
+import Network from "./components/v2/Network";
 import Transactions from "./components/v2/Transactions";
 
 declare global {
@@ -53,6 +54,7 @@ export default class App extends Component<Props, State> {
     return (
 
       <Router>
+        <Network/>
         <BalanceTracker/>
         <HeiswapTracker/>
         <Route exact path={Routes.Main} component={Main}/>

src/components/v2/Network.tsx

@@ -0,0 +1,82 @@
+import {Component} from 'react';
+import {
+
+} from "../../redux/actions";
+import {connect} from "react-redux";
+import Metamask from "../../services/Metamask";
+import {Network as NetworkViewModel, NetworkConfig, WalletType} from "../../viewModels/Network";
+
+interface Props {
+  walletType: WalletType;
+  networkConfig: NetworkConfig;
+  updateWalletType: Function,
+  updateNetworkConfiguration: Function
+}
+
+interface State {
+  walletType?: WalletType;
+  networkConfig?: NetworkConfig;
+  updateWalletType?: Function,
+  updateNetworkConfiguration?: Function
+}
+
+class Network extends Component<Props, State> {
+
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
+  async componentDidMount() {
+  }
+
+  componentDidUpdate(prevProps, prevState, snapshot) {
+    const selectedWallet: WalletType = this.props.walletType;
+    const networkConfig:NetworkConfig = this.props.networkConfig;
+    console.log('networkConfig :- ',networkConfig);
+    switch (selectedWallet) {
+
+      case WalletType.Metamask:
+        const metamask = new Metamask();
+        if(metamask.isMetamaskSupported()) {
+          let ethereum = (window as any).ethereum;
+          ethereum.on("accountsChanged",
+            (newAccount) => NetworkViewModel.subscribeAccountsChanged(newAccount)
+          );
+        }
+        break;
+
+      case WalletType.WalletConnect:
+        break;
+
+      case WalletType.Custom:
+        break;
+    }
+
+  }
+
+  componentWillUnmount() {
+    this.state = {};
+  }
+
+  render() {
+    return (null);
+  }
+
+}
+
+const mapStateToProps = state => {
+  return {
+    walletType: state.network.walletType,
+    networkConfig: state.network.networkConfig
+  }
+};
+
+const mapDispatchToProps = {
+};
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(Network);
+

src/components/v2/SelectReserve.tsx

@@ -1,4 +1,5 @@
 import React, {Component} from 'react';
+import Web3 from 'web3';
 import Card from "react-bootstrap/Card";
 import selectReserverModel, {
   ReserveAccount,
@@ -12,15 +13,27 @@ import {
   disconnectToReserve,
   addAccount,
   removeAccount,
+  addWalletType,
+  addNetworkConfig,
+  removeWalletType,
+  removeNetworkConfig
 } from "../../redux/actions";
 import Account, {AccountType} from "../../viewModels/Account";
+import {NetworkConfig, WalletType} from "../../viewModels/Network";
+import Config from "../../services/Config";
+import {Chains} from "../../services/Chains";
+import configData from '../../config/configV2.json';
 
 interface Props {
   reserves: ReserveAccount[];
   connectToReserve: Function;
   disconnectToReserve: Function;
   addAccount: Function;
   removeAccount: Function;
+  addWalletType: Function;
+  addNetworkConfig: Function;
+  removeWalletType: Function;
+  removeNetworkConfig: Function;
 }
 
 interface State {
@@ -153,6 +166,26 @@ class SelectReserve extends Component<Props, State> {
       token: undefined,
       account: account,
     });
+
+    this.props.addWalletType(WalletType.Metamask);
+    const web3:Web3 = window.web3;
+    const networkId = await web3.eth.net.getId();
+
+    const networkName = Chains.getNetworkName(networkId);
+
+    const config: NetworkConfig = Config.parse(
+      JSON.stringify(configData),
+      networkName === null ? networkId.toString() : networkName,
+    );
+
+    const networkConfig = new NetworkConfig(
+      networkName,
+      config.heiswapAddress,
+      config.relayerUrl,
+      web3,
+    );
+    this.props.addNetworkConfig(networkConfig);
+    console.log('networkConfig : ',networkConfig);
   }
 
   public metamaskDisconnect() {
@@ -173,6 +206,8 @@ class SelectReserve extends Component<Props, State> {
       token: undefined,
       account: account,
     });
+    this.props.removeWalletType(WalletType.None);
+    this.props.removeNetworkConfig(new NetworkConfig());
   }
 }
 
@@ -188,6 +223,10 @@ const mapDispatchToProps = {
   disconnectToReserve,
   addAccount,
   removeAccount,
+  addWalletType,
+  addNetworkConfig,
+  removeWalletType,
+  removeNetworkConfig
 };
 
 export default connect(

src/config/configV2.json

@@ -0,0 +1,12 @@
+{
+  "ropsten": {
+    "heiswapAddress":"0x8AAbE42EeCA45E040fab330fD24eA6746b832Ad2",
+    "relayerUrl":"",
+    "gasPrice":"0x2540BE400"
+  },
+  "goerli": {
+    "heiswapAddress":"0xFD546C315e6b09ba6E647b424Ef94CA743a74379",
+    "relayerUrl":"http://3.248.54.171:6363/relay",
+    "gasPrice":"0x2540BE400"
+  }
+}

src/redux/actionTypes.ts

@@ -8,3 +8,7 @@ export const UPDATE_BALANCE = "UPDATE_BALANCE";
 export const ADD_TRANSACTION = "ADD_TRANSACTION";
 export const ADD_HEISWAP_TOKEN = "ADD_HEISWAP_TOKEN";
 export const CLAIM_HEISWAP = "CLAIM_HEISWAP";
+export const REMOVE_WALLET_TYPE = "REMOVE_WALLET_TYPE";
+export const ADD_WALLET_TYPE = "ADD_WALLET_TYPE";
+export const REMOVE_NETWORK_CONFIG = "REMOVE_NETWORK_CONFIG";
+export const ADD_NETWORK_CONFIG = "ADD_NETWORK_CONFIG";

src/redux/actions.ts

@@ -8,6 +8,10 @@ import {
   UPDATE_BALANCE,
   ADD_TRANSACTION,
   ADD_HEISWAP_TOKEN, CLAIM_HEISWAP,
+  REMOVE_WALLET_TYPE,
+  ADD_WALLET_TYPE,
+  REMOVE_NETWORK_CONFIG,
+  ADD_NETWORK_CONFIG
 } from "./actionTypes";
 
 export const connectToReserve = content => ({
@@ -58,4 +62,24 @@ export const addHeiswapToken = content => ({
 export const claimHeiswapToken = content => ({
   type: CLAIM_HEISWAP,
   payload: content,
-})
+});
+
+export const addWalletType = content => ({
+  type: ADD_WALLET_TYPE,
+  payload: content,
+});
+
+export const addNetworkConfig = content => ({
+  type: ADD_NETWORK_CONFIG,
+  payload: content,
+});
+
+export const removeWalletType = content => ({
+  type: REMOVE_WALLET_TYPE,
+  payload: content,
+});
+
+export const removeNetworkConfig = content => ({
+  type: REMOVE_NETWORK_CONFIG,
+  payload: content,
+});

src/redux/reducers/index.ts

@@ -2,9 +2,13 @@ import { combineReducers } from "redux";
 import reserves from "./reserves";
 import token from "./token";
 import profile from './profile';
+import heiswap from "./heiswap";
+import network from "./network";
 
 export default combineReducers({
   reserves,
   token,
   profile,
+  heiswap,
+  network,
 });

src/redux/reducers/network.ts

@@ -0,0 +1,56 @@
+ import {
+  ADD_NETWORK_CONFIG,
+  ADD_WALLET_TYPE,
+  REMOVE_NETWORK_CONFIG,
+  REMOVE_WALLET_TYPE
+} from '../actionTypes';
+ import {NetworkConfig, WalletType} from "../../viewModels/Network";
+
+interface State {
+  walletType: WalletType,
+  networkConfig: NetworkConfig | undefined
+}
+
+const initialState = {
+  walletType: WalletType.None,
+  networkConfig: undefined
+};
+
+export default function (state: State = initialState, action) {
+  switch (action.type) {
+    case REMOVE_WALLET_TYPE: {
+      const walletType = action.payload;
+      return {
+        ...state,
+        walletType,
+      };
+    }
+
+    case REMOVE_NETWORK_CONFIG: {
+      const networkConfig = action.payload;
+      return {
+        ...state,
+        networkConfig,
+      };
+    }
+
+    case ADD_NETWORK_CONFIG: {
+      const networkConfig = action.payload;
+      return {
+        ...state,
+        networkConfig: networkConfig,
+      };
+    }
+
+    case ADD_WALLET_TYPE: {
+      const walletType = action.payload;
+      return {
+        ...state,
+        walletType: walletType,
+      };
+    }
+
+    default:
+      return state;
+  }
+}

src/services/Chains.ts

@@ -0,0 +1,12 @@
+export class Chains {
+
+  private static chains = {
+    '1': 'mainnet',
+    '3': 'ropsten',
+    '5': 'goerli'
+  };
+
+  public static getNetworkName(networkId: number): string {
+    return this.chains[networkId.toString()];
+  }
+}

src/services/Config.ts

@@ -0,0 +1,9 @@
+class Config {
+
+  public static parse(configData: any, networkType: string) {
+    const config = JSON.parse(configData);
+    return config[networkType];
+  }
+}
+
+export default Config;

src/viewModels/Network.ts

@@ -0,0 +1,48 @@
+import Metamask from "../services/Metamask";
+import Web3 from "web3";
+import BigNumber from "bignumber.js";
+
+export enum WalletType {
+  None='None',
+  Metamask='Metamask',
+  Custom='Custom',
+  WalletConnect='WalletConnect',
+}
+
+export class NetworkConfig {
+  public networkType?: string;
+  public heiswapAddress?: string;
+  public relayerUrl?: string;
+  public web3?: Web3;
+  public gasPrice?: BigNumber;
+
+  constructor(
+    networkType?: string,
+    heiswapAddress?: string,
+    relayerUrl?: string,
+    web3?: Web3,
+    gasPrice?: BigNumber
+  ) {
+    this.networkType = networkType;
+    this.heiswapAddress = heiswapAddress;
+    this.relayerUrl = relayerUrl;
+    this.web3 = web3;
+    this.gasPrice = gasPrice;
+  }
+}
+
+export class Network {
+  public metamask: Metamask;
+  public networkConfig: NetworkConfig;
+
+  constructor(networkConfig: NetworkConfig) {
+    this.metamask = new Metamask();
+    this.networkConfig = networkConfig;
+  }
+
+  public static subscribeAccountsChanged(account: string) {
+    console.log('new account :- ',account);
+  }
+}
+
+export default new Network(new NetworkConfig());

src/viewModels/SelectReserveModel.ts

@@ -60,7 +60,7 @@ class SelectReserveModel {
       supportedByBrowser: isMetamaskSupportedByBrowser,
       web3: window.web3,
     };
-    if (this.metamask.isMetamaskSupported()) {
+    if (isMetamaskSupportedByBrowser) {
       if (this.metamaskAccount) {
         metamaskReserveAccount.description = i18n.t('metamask_connected_description');
         connectedOptions.push(metamaskReserveAccount);