Ip Filter

frontend/src/actions/gateway-wallet.js

@@ -0,0 +1,23 @@
+import {apiDelete, apiGet, apiPost} from "./apiRequest";
+import {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} });
+};
+
+export const generateGatewayApplicationWallet = (wallet, blockchain) => async (dispatch) => {
+  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(getGatewayApplicationWallet(gatewayId));
+  } catch (e) {
+    throw parseApiError(e);
+  }
+};

frontend/src/actions/gateways.js

@@ -9,6 +9,7 @@ import {
     SHOW_MODAL
 } from "./types";
 import {parseApiError} from "../utils/parseApiError";
+import {getGatewayApplicationWallet} from "./gateway-wallet";
 
 
 export const fetchGatewayApplications = (offset = 0, limit = 10) => async dispatch => {
@@ -31,14 +32,14 @@ export const saveGatewayApplication = formValues => async (dispatch) => {
     await dispatch(apiPost(getGatewayApplicationsPath(), formValues));
 };
 
-export const fetchGatewayApplicationDetails = (id) => async dispatch => {
+export const fetchGatewayApplicationDetailsFromApi = (id) => async dispatch => {
     dispatch({ type: SET_GATEWAY_APPLICATION_SET, payload: { id, loading: true } });
 
     try {
         const gateway = await dispatch(apiGet(getGatewayApplicationsPath(id)));
-        const wallets = await dispatch(getGatewayApplicationWallet(id));
+
         const error = '';
-        const payload = { id, gateway, wallets, error, loading: false };
+        const payload = { id, gateway, error, loading: false };
         dispatch({ type: SET_GATEWAY_APPLICATION_SET, payload });
 
     } catch (e) {
@@ -50,6 +51,11 @@ export const fetchGatewayApplicationDetails = (id) => async dispatch => {
     }
 };
 
+export const fetchGatewayApplicationDetails = (id) => async dispatch => {
+    dispatch(fetchGatewayApplicationDetailsFromApi(id));
+    dispatch(getGatewayApplicationWallet(id));
+};
+
 export const removeGatewayApplication = (id) => async dispatch => {
     try {
         await dispatch(apiDelete(getGatewayApplicationsPath()+"?id="+id, {}));
@@ -59,23 +65,3 @@ export const removeGatewayApplication = (id) => async dispatch => {
     }
 };
 
-export const getGatewayApplicationWallet = (gatewayId) => async dispatch => {
-    const wallets = await dispatch(apiGet(getGatewayApplicationWalletsPath(gatewayId), {}));
-    const error = '';
-    dispatch({ type: SET_GATEWAY_APPLICATION_SET, payload: {gatewayId, wallets, error, loading: false} });
-    return wallets;
-};
-
-export const generateGatewayApplicationWallet = (wallet, blockchain) => async (dispatch) => {
-    await dispatch(apiPost(getGatewayApplicationWalletsPath(), {applicationId: wallet.applicationId, webHook: wallet.webHook, blockchainType: blockchain.blockchain}));
-    dispatch(fetchGatewayApplicationDetails(wallet.applicationId))
-};
-
-export const removeGatewayApplicationWallet = (gatewayId, address) => async dispatch => {
-    try {
-        await dispatch(apiDelete( getGatewayApplicationWalletsPath()+"?applicationId="+gatewayId+"&address="+address, {}));
-        await dispatch(fetchGatewayApplicationDetails(gatewayId))
-    } catch (e) {
-        throw parseApiError(e);
-    }
-};

frontend/src/components/GatewayApplicationKeyGenerate.js

@@ -0,0 +1,79 @@
+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 {Datepicker} from "../components-ui/Datepicker";
+
+
+const KeyGenerateContainer = styled.div`
+  overflow: hidden;
+  padding-bottom: 15px;
+`;
+
+class GatewayApplicationKeyGenerateComponent extends Component {
+  state = {
+    expiredDate: null,
+    gatewayId : null
+  };
+
+  onShow = () => {
+    const { onShow, gateway } = this.props;
+
+    this.setState({gatewayId: gateway.id });
+
+    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 { expiredDate, gatewayId } = this.state;
+    this.setState({ isSaving: true });
+
+    submitWithSaving({ expiredDate: expiredDate, gatewayId: gatewayId });
+  };
+
+  render() {
+    const { isVisible, onHide, isSaving } = this.props;
+
+    return (
+      <KeyGenerateContainer>
+        <Button primary type="button" floated="right" onClick={this.onShow}>
+          Generate New Key
+        </Button>
+        <Modal size="tiny" open={isVisible} onClose={this.onBackgroundClick}>
+          <Modal.Header>Generate Application Key</Modal.Header>
+          <Modal.Content>
+            <Datepicker date={this.state.expiredDate} onChange={expiredDate => this.setState({ expiredDate })} />
+          </Modal.Content>
+          <Modal.Actions>
+            <Button negative disabled={isSaving} onClick={onHide}>
+              Cancel
+            </Button>
+            <Button
+              positive
+              loading={isSaving}
+              icon="checkmark"
+              labelPosition="right"
+              content="Generate"
+              onClick={this.onSubmit}
+            />
+          </Modal.Actions>
+        </Modal>
+      </KeyGenerateContainer>
+    );
+  }
+}
+
+export const GatewayKeyGenerate = withVisible(withSaving(GatewayApplicationKeyGenerateComponent));

frontend/src/components/GatewayApplicationList.js

@@ -5,7 +5,6 @@ import {ProjectPagination} from '../components-ui/ProjectPagination';
 import {GATEWAY_LIMIT} from '../const';
 import {
     fetchGatewayApplications,
-    getGatewayApplicationWallet,
     removeGatewayApplication
 } from "../actions/gateways";
 import {GatewayApplicationRemove} from "./GatewayApplicationRemove";
@@ -26,8 +25,6 @@ class GatewayApplicationList extends Component {
         this.props.removeGatewayApplication(gateway.id);
     }
 
-    onFetchWallet = gateway => this.props.getGatewayApplicationWallet(gateway.id)
-
     renderApplications() {
         const gateways = this.props.gateways;
 
@@ -81,7 +78,6 @@ export default connect(
     mapStateToProps,
     {
         fetchGatewayApplications,
-        removeGatewayApplication,
-        getGatewayApplicationWallet
+        removeGatewayApplication
     }
 )(GatewayApplicationList);

frontend/src/components/GatewayApplicationRemove.js

@@ -3,9 +3,9 @@ import {t} from "../utils/messageTexts";
 import React from "react";
 
 export const GatewayApplicationRemove = ({ onSubmit }) => (
-    <EntityRemove onSubmit={onSubmit} header="Delete Gateway">
+    <EntityRemove onSubmit={onSubmit} header="Delete Application">
         <div>
-            {t('sure to delete Gateway')}
+            {t('sure to delete Application')}
         </div>
     </EntityRemove>
-);
+);

frontend/src/components/GatewayApplicationWallet.js

@@ -6,7 +6,11 @@ import {connect} from "react-redux";
 
 import {Table} from "../components-ui/Table";
 import {WalletGenerate} from "./GatewayApplicationWalletGenerate";
-import {generateGatewayApplicationWallet, removeGatewayApplicationWallet} from "../actions/gateways";
+import {
+  generateGatewayApplicationWallet,
+  getGatewayApplicationWallet,
+  removeGatewayApplicationWallet
+} from "../actions/gateway-wallet";
 
 import {getGatewayWalletSelector} from "../selectors/getGatewayWalletsSelector";
 
@@ -54,13 +58,13 @@ class GatewayApplicationWalletComponent extends React.Component {
     render() {
         const { wallets, gateway } = this.props;
 
-        const columns = getColumns(wallets, this.onRemoveWallet);
+        const columns = getColumns(wallets.list, this.onRemoveWallet);
         const noDataText = 'No Wallet exist'
         return (
             <div className="table-with-add">
                 <WalletGenerate  gateway={gateway} onSubmit={this.onGenerateWallet} />
                 <Segment attached styles={{ padding: 0 }}>
-                    <Table data={wallets} columns={columns} noDataText={noDataText} />
+                    <Table data={wallets.list} columns={columns} noDataText={noDataText} />
                 </Segment>
             </div>
         );
@@ -78,4 +82,4 @@ export const GatewayApplicationWallet = connect(
         generateGatewayApplicationWallet,
         removeGatewayApplicationWallet
     }
-)(GatewayApplicationWalletComponent);
+)(GatewayApplicationWalletComponent);

frontend/src/components/GatewayApplicationWalletGenerate.js

@@ -1,12 +1,10 @@
 import React, {Component} from "react";
 import {Button, Divider, Dropdown, Input, Modal} from "semantic-ui-react";
-import {Datepicker} from "../components-ui/Datepicker";
-import {TransactionError} from "../components-ui/TransactionError";
+
 import {withVisible} from "../components-ui/withVisible";
 import {withSaving} from "../components-ui/withSaving";
 import styled from "styled-components";
 import {t} from "../utils/messageTexts";
-import {toChecksumAddress} from "../utils/toChecksumAddress";
 
 
 const WalletGenerateContainer = styled.div`
@@ -93,4 +91,4 @@ class WalletGenerateComponent extends Component {
     }
 }
 
-export const WalletGenerate = withVisible(withSaving(WalletGenerateComponent));
+export const WalletGenerate = withVisible(withSaving(WalletGenerateComponent));

frontend/src/components/Header.js

@@ -30,9 +30,9 @@ class Header extends Component {
             <Dropdown.Item text='Open' as={Link} to={'/scaffolds/open'}/>
           </Dropdown.Menu>
         </Dropdown>
-        <Link className="item" to={'/keys'}>
+        {/*<Link className="item" to={'/keys'}>
           Key Management
-        </Link>
+        </Link>*/}
         <Link className="item" to={'/applications'}>
           Applications
         </Link>

frontend/src/reducers/gatewayById.js

@@ -1,7 +1,18 @@
 import {
-    SET_GATEWAY_APPLICATION_SET,
+  FETCH_GATEWAY_APPLICATION_WALLET,
+  SET_GATEWAY_APPLICATION_SET,
 } from "../actions/types";
 
+const gatewayWalletReducer = (state = {}, action) => {
+  switch (action.type) {
+    case FETCH_GATEWAY_APPLICATION_WALLET:
+      const list  = action.payload.wallets;
+      return { ...state, list};
+    default:
+      return state;
+  }
+}
+
 export default function(state = {}, action) {
     switch (action.type) {
         case SET_GATEWAY_APPLICATION_SET: {
@@ -10,7 +21,13 @@ export default function(state = {}, action) {
             const gatewaySet = action.payload;
             return { ...state, [gatewayId]: { ...oldGatewaySet, ...gatewaySet } };
         }
+        case FETCH_GATEWAY_APPLICATION_WALLET: {
+          const gatewayId = action.payload.gatewayId;
+          const oldGatewaySet = state[gatewayId] || {};
+          const wallets = gatewayWalletReducer(oldGatewaySet.wallets, action);
+          return { ...state, [gatewayId]: { ...oldGatewaySet, wallets } };
+        }
         default:
             return state;
     }
-}
+}

frontend/src/scenes/GatewayApplicationForm.js

@@ -4,9 +4,7 @@ import {connect} from 'react-redux';
 import {Field, getFormValues, reduxForm} from 'redux-form';
 import {withRouter} from 'react-router-dom';
 import {Button, Grid} from 'semantic-ui-react';
-import {DropdownField} from 'react-semantic-redux-form';
 import {asyncValidate, validate, warn} from '../utils/validation';
-import ScaffoldActionField from '../components-ui/inputs/ActionField';
 import ScaffoldField from '../components-ui/inputs/Field';
 import {fetchGatewayApplications, saveGatewayApplication} from "../actions/gateways";
 

frontend/src/scenes/GatewayApplicationSummary.js

@@ -3,13 +3,19 @@ import {Card, Grid} from "semantic-ui-react";
 import {WordWrap} from "../components-ui/WordWrap";
 import {bindActionCreators} from "redux";
 import {connect} from "react-redux";
-import {fetchGatewayApplicationDetails, generateGatewayApplicationWallet} from "../actions/gateways";
+import {fetchGatewayApplicationDetails} from "../actions/gateways";
+
 import {GatewayApplicationWallet} from "../components/GatewayApplicationWallet";
+import {getGatewayApplicationWallet} from "../actions/gateway-wallet";
+import {KeyGenerate} from "../components/KeyGenerate";
+import {WalletGenerate} from "../components/GatewayApplicationWalletGenerate";
+import {GatewayKeyGenerate} from "../components/GatewayApplicationKeyGenerate";
 
 class GatewayApplicationSummary extends Component {
     async componentDidMount() {
         const gatewayId = this.getGatewayId();
         await this.props.actions.fetchGatewayApplicationDetails(gatewayId);
+        await this.props.actions.getGatewayApplicationWallet(gatewayId);
     }
 
     componentDidUpdate(prevProps) {
@@ -18,13 +24,16 @@ class GatewayApplicationSummary extends Component {
 
         if (byApiMethodChanged) {
             const gatewayId = this.getGatewayId();
-            console.log(gatewayId);
             this.props.actions.fetchGatewayApplicationDetails(gatewayId);
         }
     }
 
     getGatewayId = () => this.props.match.params.id;
 
+    onKeyGenerate = () => {
+      const { gateway } = this.props;
+    }
+
     render() {
         const { gateway } = this.props;
 
@@ -36,15 +45,16 @@ class GatewayApplicationSummary extends Component {
             <div style={{ marginTop: '20px' }}>
                 <Grid>
                     <Grid.Row>
+
                         <Grid.Column width={16}>
                             <Card fluid>
-
                                 <Card.Content>
                                     <div>
                                         <strong> <WordWrap>{gateway.name}</WordWrap>{' '}</strong>
                                     </div>
                                 </Card.Content>
                                 <Card.Content>
+                                    <GatewayKeyGenerate  gateway={gateway} onSubmit={this.onKeyGenerate()} />
                                     <div className="table-key"><strong>Access Key</strong></div>
                                     <div className="table-value table-value-background-color access-key selectable"
                                          id="credentials-sb">{gateway.apiAccessKey}
@@ -86,7 +96,8 @@ const mapStateToProps = (
 const mapDispatchToProps = dispatch => ({
     actions: bindActionCreators(
         {
-            fetchGatewayApplicationDetails
+            fetchGatewayApplicationDetails,
+            getGatewayApplicationWallet
         },
         dispatch
     )
@@ -95,4 +106,4 @@ const mapDispatchToProps = dispatch => ({
 export const GatewayApplicationSummaryContainer = connect(
     mapStateToProps,
     mapDispatchToProps
-)(GatewayApplicationSummary);
+)(GatewayApplicationSummary);