diff --git a/package-lock.json b/package-lock.json index 5fdf5fa..1dec184 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16071,7 +16071,7 @@ } }, "websocket": { - "version": "github:web3-js/WebSocket-Node#905deb4812572b344f5801f8c9ce8bb02799d82e", + "version": "github:web3-js/WebSocket-Node#b134a75541b5db59668df81c03e926cd5f325077", "from": "github:web3-js/WebSocket-Node#polyfill/globalThis", "requires": { "debug": "^2.2.0", diff --git a/src/App.tsx b/src/App.tsx index 4f30975..69dae6d 100644 --- a/src/App.tsx +++ b/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 { return ( + diff --git a/src/components/v2/Network.tsx b/src/components/v2/Network.tsx new file mode 100644 index 0000000..de4ff09 --- /dev/null +++ b/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 { + + 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); + diff --git a/src/components/v2/SelectReserve.tsx b/src/components/v2/SelectReserve.tsx index 7a95997..4d13cfa 100644 --- a/src/components/v2/SelectReserve.tsx +++ b/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,8 +13,16 @@ 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[]; @@ -21,6 +30,10 @@ interface Props { disconnectToReserve: Function; addAccount: Function; removeAccount: Function; + addWalletType: Function; + addNetworkConfig: Function; + removeWalletType: Function; + removeNetworkConfig: Function; } interface State { @@ -153,6 +166,26 @@ class SelectReserve extends Component { 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 { 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( diff --git a/src/config/configV2.json b/src/config/configV2.json new file mode 100644 index 0000000..a8daee4 --- /dev/null +++ b/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" + } +} diff --git a/src/redux/actionTypes.ts b/src/redux/actionTypes.ts index a0b7772..11de580 100644 --- a/src/redux/actionTypes.ts +++ b/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"; diff --git a/src/redux/actions.ts b/src/redux/actions.ts index 11b5d3c..7edca54 100644 --- a/src/redux/actions.ts +++ b/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, +}); diff --git a/src/redux/reducers/index.ts b/src/redux/reducers/index.ts index a8bf204..4e10644 100644 --- a/src/redux/reducers/index.ts +++ b/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, }); diff --git a/src/redux/reducers/network.ts b/src/redux/reducers/network.ts new file mode 100644 index 0000000..6163f48 --- /dev/null +++ b/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; + } +} diff --git a/src/services/Chains.ts b/src/services/Chains.ts new file mode 100644 index 0000000..40425a3 --- /dev/null +++ b/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()]; + } +} diff --git a/src/services/Config.ts b/src/services/Config.ts new file mode 100644 index 0000000..3ab3e1d --- /dev/null +++ b/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; diff --git a/src/viewModels/Network.ts b/src/viewModels/Network.ts new file mode 100644 index 0000000..705789c --- /dev/null +++ b/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()); diff --git a/src/viewModels/SelectReserveModel.ts b/src/viewModels/SelectReserveModel.ts index f83ee91..9fbd693 100644 --- a/src/viewModels/SelectReserveModel.ts +++ b/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);