Merge pull request #88 from OpenFuturePlatform/key-master-fix

Stable Coin Transactions

Author: Elaman Nazarkulov

frontend/src/App.js

@@ -10,6 +10,7 @@ import { Container } from 'semantic-ui-react';
 import './css/main.css';
 import { t } from './utils/messageTexts';
 import styled from 'styled-components';
+import UserToken from "./scenes/UserToken";
 
 const UnAuthorizeMessage = styled.div`
   font-size: 18px;
@@ -39,6 +40,7 @@ class App extends Component {
       <Switch>
         <Route path="/scaffolds" component={Scaffolds} />
         <Route path="/applications" component={GatewayApplication} />
+        <Route path="/tokens" component={UserToken} />
         <Redirect from="*" to="/scaffolds" />
       </Switch>
     );

frontend/src/actions/eth-account.js

@@ -1,8 +1,9 @@
-import { SET_CURRENT_ETH_ACCOUNT } from './types';
+import {SET_CURRENT_ETH_ACCOUNT} from './types';
 import web3 from '../utils/web3';
 import eth from '../utils/eth';
 import ethUnit from 'ethjs-unit';
-import { openTokenSelectorEth } from '../selectors/open-token';
+import {openTokenSelectorEth} from '../selectors/open-token';
+import {ERC20_ABI} from "../const";
 
 const setNetworkId = () => async dispatch => {
   const activeNetworkId = await web3.eth.net.getId();
@@ -52,6 +53,19 @@ export const subscribeEthAccount = () => async dispatch => {
   return dispatch(setNetworkId());
 };
 
+export const getErc20Token = address => async dispatch => {
+  if (!web3 || address === undefined) {
+    return;
+  }
+
+  const tokenContract = new web3.eth.Contract(ERC20_ABI, address);
+  const symbol = await tokenContract.methods.symbol().call();
+  const decimals = await tokenContract.methods.decimals().call();
+  const name = await tokenContract.methods.name().call();
+
+  return {address: address, name: name, symbol: symbol, decimal: decimals};
+};
+
 export const unsubscribeEthAccount = () => () => {
   clearInterval(ethAccountTimer);
   ethAccountTimer = null;

frontend/src/actions/gateway-wallet.js

@@ -1,23 +1,44 @@
 import {apiDelete, apiGet, apiPost} from "./apiRequest";
-import {getGatewayApplicationWalletsPath} from "../utils/apiPathes";
+import {getGatewayApplicationWalletExport, getGatewayApplicationWalletsPath} from "../utils/apiPathes";
 import {FETCH_GATEWAY_APPLICATION_WALLET} from "./types";
 import {parseApiError} from "../utils/parseApiError";
 
 export const getGatewayApplicationWallet = (gatewayId) => async dispatch => {
   const wallets = await dispatch(apiGet(getGatewayApplicationWalletsPath(gatewayId), {}));
-  dispatch({ type: FETCH_GATEWAY_APPLICATION_WALLET, payload: {gatewayId, wallets} });
+  dispatch({type: FETCH_GATEWAY_APPLICATION_WALLET, payload: {gatewayId, wallets}});
 };
 
 export const generateGatewayApplicationWallet = (wallet, blockchain) => async (dispatch) => {
-  await dispatch(apiPost(getGatewayApplicationWalletsPath(), {applicationId: wallet.applicationId, webHook: wallet.webHook, blockchainType: blockchain.blockchain}));
+  await dispatch(apiPost(getGatewayApplicationWalletsPath(), {
+    applicationId: wallet.applicationId,
+    webHook: wallet.webHook,
+    blockchainType: blockchain.blockchain
+  }));
   dispatch(getGatewayApplicationWallet(wallet.applicationId));
 };
 
 export const removeGatewayApplicationWallet = (gatewayId, address) => async dispatch => {
   try {
-    await dispatch(apiDelete( getGatewayApplicationWalletsPath()+"?applicationId="+gatewayId+"&address="+address, {}));
+    await dispatch(apiDelete(getGatewayApplicationWalletsPath() + "?applicationId=" + gatewayId + "&address=" + address, {}));
     await dispatch(getGatewayApplicationWallet(gatewayId));
   } catch (e) {
     throw parseApiError(e);
   }
 };
+
+export const exportApplicationWalletPrivateKey = (address, blockchain) => async (dispatch) => {
+  return await dispatch(apiPost(getGatewayApplicationWalletExport(), {
+    address: address,
+    blockchain: blockchain
+  }));
+};
+
+export const importGatewayApplicationWallet = (gateway, wallet) => async (dispatch) => {
+  await dispatch(apiPost(getGatewayApplicationWalletsPath()+"import", {
+    applicationId: gateway.applicationId,
+    webHook: gateway.webHook,
+    address: wallet.address,
+    blockchainType: wallet.blockchain
+  }));
+  dispatch(getGatewayApplicationWallet(wallet.applicationId));
+};

frontend/src/actions/types.js

@@ -32,4 +32,7 @@ export const SHOW_WITHDRAWAL_MODAL = 'SHOW_WITHDRAWAL_MODAL';
 
 export const FETCH_GATEWAY_APPLICATIONS = 'FETCH_GATEWAY_APPLICATIONS';
 export const SET_GATEWAY_APPLICATION_SET = 'SET_GATEWAY_APPLICATION_SET';
-export const FETCH_GATEWAY_APPLICATION_WALLET = 'FETCH_GATEWAY_APPLICATION_WALLET';
+export const FETCH_GATEWAY_APPLICATION_WALLET = 'FETCH_GATEWAY_APPLICATION_WALLET';
+
+export const FETCH_USER_TOKENS = 'FETCH_USER_TOKENS';
+export const SET_USER_TOKEN = 'SET_USER_TOKEN';

frontend/src/actions/user-token.js

@@ -0,0 +1,24 @@
+import {apiGet, apiPost} from "./apiRequest";
+import {getUserTokenPath} from "../utils/apiPathes";
+import {FETCH_USER_TOKENS, SHOW_MODAL} from "./types";
+import {parseApiError} from "../utils/parseApiError";
+
+export const fetchUserTokens = (offset = 0, limit = 10) => async dispatch => {
+  const params = { offset, limit };
+
+  try {
+    const data = await dispatch(apiGet(getUserTokenPath(), params));
+    dispatch({ type: FETCH_USER_TOKENS, payload: data });
+  } catch (err) {
+    const error = parseApiError(err);
+    dispatch({
+      type: SHOW_MODAL,
+      payload: {showLoader: false, showModal: true, error: error.message}
+    });
+    throw error;
+  }
+};
+
+export const saveUserToken = formValues => async (dispatch) => {
+  await dispatch(apiPost(getUserTokenPath(), formValues));
+};

frontend/src/components-ui/OpenScanLink.js

@@ -0,0 +1,8 @@
+import React from "react";
+
+export const OpenScanLink = ({children}) => (
+  <a href={`http://localhost:8080/widget/trx/address/${children}`} target="_blank" rel="noopener noreferrer">
+    {children}
+  </a>
+);
+

frontend/src/components/GatewayApplicationWallet.js

@@ -7,19 +7,23 @@ import {connect} from "react-redux";
 import {Table} from "../components-ui/Table";
 import {WalletGenerate} from "./GatewayApplicationWalletGenerate";
 import {
-  generateGatewayApplicationWallet,
+  exportApplicationWalletPrivateKey,
+  generateGatewayApplicationWallet, importGatewayApplicationWallet,
   removeGatewayApplicationWallet
 } from "../actions/gateway-wallet";
 
 import {getGatewayWalletSelector} from "../selectors/getGatewayWalletsSelector";
 
 import {GatewayApplicationWalletRemove} from "./GatewayApplicationWalletRemove";
+import {GatewayApplicationWalletPrivateKey} from "./GatewayApplicationWalletPrivateKey";
+import {WalletImport} from "./GatewayApplicationWalletImport";
+import {OpenScanLink} from "../components-ui/OpenScanLink";
 
-const getColumns = (wallets, onRemove) => [
+const getColumns = (wallets, onRemove, onExport) => [
     {
         Header: 'Wallet Address',
         accessor: 'address',
-        Cell: ({ value }) => <EtherscanLink>{value}</EtherscanLink>,
+        Cell: ({ value }) => <OpenScanLink>{value}</OpenScanLink>,
         sortable: false
     },
     {
@@ -39,6 +43,17 @@ const getColumns = (wallets, onRemove) => [
              </span>
         ),
         sortable: false
+    },
+    {
+      Header: '',
+      accessor: 'address',
+      width: 150,
+      Cell: (props) => (
+        <span>
+            <GatewayApplicationWalletPrivateKey onSubmit={() => onExport(props.row._original.address,props.row._original.blockchain)}/>
+        </span>
+      ),
+      sortable: false
     }
 ];
 
@@ -49,19 +64,28 @@ class GatewayApplicationWalletComponent extends React.Component {
         return this.props.removeGatewayApplicationWallet(gateway.id, address);
     };
 
+    onExportPrivateKey = (address, blockchain) => {
+      return this.props.exportApplicationWalletPrivateKey(address, blockchain);
+    }
+
     onGenerateWallet = blockchain => {
         const { gateway } = this.props;
         this.props.generateGatewayApplicationWallet({ applicationId: gateway.id, webHook: gateway.webHook}, blockchain);
     }
 
+    onImportWallet = walletImport => {
+      this.props.importGatewayApplicationWallet(walletImport.walletRequest, {address: walletImport.address, blockchain: walletImport.blockchain});
+    }
+
     render() {
         const { wallets, gateway } = this.props;
 
-        const columns = getColumns(wallets.list, this.onRemoveWallet);
+        const columns = getColumns(wallets.list, this.onRemoveWallet, this.onExportPrivateKey);
         const noDataText = 'No Wallet exist'
         return (
             <div className="table-with-add">
                 <WalletGenerate  gateway={gateway} onSubmit={this.onGenerateWallet} />
+                <WalletImport  gateway={gateway} onSubmit={this.onImportWallet} />
                 <Segment attached styles={{ padding: 0 }}>
                     <Table data={wallets.list} columns={columns} noDataText={noDataText} />
                 </Segment>
@@ -70,7 +94,7 @@ class GatewayApplicationWalletComponent extends React.Component {
     }
 }
 
-const mapStateToProps = (state, { gateway }) => {
+const mapStateToProps = (state, { gateway}) => {
     const wallets = getGatewayWalletSelector(state, gateway.id);
     return { gateway, wallets };
 };
@@ -79,6 +103,8 @@ export const GatewayApplicationWallet = connect(
     mapStateToProps,
     {
         generateGatewayApplicationWallet,
-        removeGatewayApplicationWallet
+        importGatewayApplicationWallet,
+        removeGatewayApplicationWallet,
+        exportApplicationWalletPrivateKey
     }
 )(GatewayApplicationWalletComponent);

frontend/src/components/GatewayApplicationWalletImport.js

@@ -0,0 +1,105 @@
+import React, {Component} from "react";
+import {Button, Divider, Dropdown, Input, Modal} from "semantic-ui-react";
+
+import {withVisible} from "../components-ui/withVisible";
+import {withSaving} from "../components-ui/withSaving";
+import styled from "styled-components";
+import {t} from "../utils/messageTexts";
+import ScaffoldField from "../components-ui/inputs/Field";
+import {Field} from "redux-form";
+
+
+const WalletImportContainer = styled.div`
+  overflow: hidden;
+  padding-bottom: 15px;
+`;
+
+class WalletImportComponent extends Component {
+  state = {
+    walletRequest: null,
+    blockchain: null,
+    address: null
+  };
+
+  onInputChange = (e, {value}) => {
+    this.setState({ address: value });
+  }
+
+  onBlockchainChange = (e, {value}) => {
+    this.setState({ blockchain: value });
+  }
+
+  onShow = () => {
+    const { onShow, gateway } = this.props;
+
+    this.setState({ walletRequest: { applicationId: gateway.id, webHook: gateway.webHook} });
+
+    onShow();
+  };
+
+  onBackgroundClick = e => {
+    const { onHide, isSaving } = this.props;
+    const target = e.target;
+    if (isSaving || !target.classList.contains('modals')) {
+      return;
+    }
+    onHide();
+  };
+
+  onSubmit = async () => {
+    const { submitWithSaving } = this.props;
+    const { walletRequest, blockchain, address } = this.state;
+    this.setState({ isSaving: true });
+
+    submitWithSaving({ walletRequest, blockchain, address });
+  };
+
+  render() {
+    const { isVisible, onHide, isSaving } = this.props;
+
+    return (
+      <WalletImportContainer>
+        <Button primary type="button" floated="right" onClick={this.onShow}>
+          Import Address
+        </Button>
+        <Modal size="tiny" open={isVisible} onClose={this.onBackgroundClick}>
+          <Modal.Header>Import Wallet</Modal.Header>
+          <Modal.Content>
+            <Input focus fluid={true} placeholder='address' onChange={ this.onInputChange }>
+              <input style={{
+                marginTop: '10px',
+                marginBottom: '5px'
+              }}/>
+            </Input>
+            <Dropdown
+              placeholder='Select Blockchain'
+              fluid
+              selection
+              options={[
+                { key: 'ether', text: 'ETH', value: 'ETH' },
+                { key: 'bitcoin', text: 'BTC', value: 'BTC' },
+                { key: 'binance', text: 'BNB', value: 'BNB' }
+              ]}
+              onChange={this.onBlockchainChange}
+            />
+          </Modal.Content>
+          <Modal.Actions>
+            <Button negative disabled={isSaving} onClick={onHide}>
+              Cancel
+            </Button>
+            <Button
+              positive
+              loading={isSaving}
+              icon="checkmark"
+              labelPosition="right"
+              content="Import"
+              onClick={this.onSubmit}
+            />
+          </Modal.Actions>
+        </Modal>
+      </WalletImportContainer>
+    );
+  }
+}
+
+export const WalletImport = withVisible(withSaving(WalletImportComponent));