Merge pull request #673 from PolymathNetwork/feat/account-page

Feat/account page

Author: FahdW

packages/polymath-issuer/src/actions/account.js

@@ -0,0 +1,17 @@
+import { SecurityTokenRegistry } from '@polymathnetwork/js';
+
+export const TICKER_LIST = 'account/TICKER_LIST';
+export const getTickerList = tickers => ({
+  type: TICKER_LIST,
+  tickers,
+});
+
+export const fetchTickerList = () => async (
+  dispatch: Function,
+  getState: GetState
+) => {
+  const str = await SecurityTokenRegistry.create();
+  const walletAddress = getState().session.wallet.address;
+  const newTokens = await str.getTickersByOwner(walletAddress);
+  dispatch(getTickerList(newTokens));
+};

packages/polymath-issuer/src/pages/account/components/TickerCard.js

@@ -0,0 +1,36 @@
+import React, { Component } from 'react';
+import { PageCentered, Button, Toaster, notify } from '@polymathnetwork/ui';
+import { Link } from 'react-router-dom';
+
+export default class TickerCard extends Component {
+  render() {
+    const { ticker } = this.props;
+    return (
+      <div className="token-symbol-wrapper">
+        <div className="pui-page-box">
+          <div className="ticker-field">
+            <div className="bx--form-item">
+              <label htmlFor="ticker" className="bx--label">
+                Token Symbol
+              </label>
+              <input
+                type="text"
+                name="ticker"
+                value={ticker}
+                id="ticker"
+                readOnly
+                className="bx--text-input bx--text__input"
+              />
+            </div>
+          </div>
+          <br />
+          <Link to={`/dashboard/${ticker}`}>
+            <Button kind="secondary" className="export-tokens-list-btn">
+              Open Dashboard
+            </Button>
+          </Link>
+        </div>
+      </div>
+    );
+  }
+}

packages/polymath-issuer/src/pages/account/index.js

@@ -0,0 +1,62 @@
+import React, { Component } from 'react';
+import { Link } from 'react-router-dom';
+import {
+  PageCentered,
+  Button,
+  Toaster,
+  notify,
+  Grid,
+} from '@polymathnetwork/ui';
+import { connect } from 'react-redux';
+import { fetchTickerList } from '../../actions/account';
+import TickerCard from './components/TickerCard';
+
+class HomePage extends Component {
+  async componentDidMount() {
+    await this.props.fetchTickerList();
+    if (this.props.tickers.length === 0) {
+      this.props.history.push('/ticker');
+    }
+  }
+
+  render() {
+    const { tickers } = this.props;
+    return (
+      <PageCentered>
+        <Grid>
+          <Grid.Row>
+            <p>
+              <Link to="/ticker">
+                <Button id="create-token-btn" icon="arrow--right">
+                  Continue to configure your security token
+                </Button>
+              </Link>
+            </p>
+          </Grid.Row>
+          <Grid.Row>
+            {tickers.map(ticker => {
+              return (
+                <Grid.Col gridSpan={4}>
+                  <TickerCard ticker={ticker} />
+                </Grid.Col>
+              );
+            })}
+          </Grid.Row>
+        </Grid>
+      </PageCentered>
+    );
+  }
+}
+
+const mapStateToProps = state => ({
+  tickers: state.account.tickers,
+});
+
+const mapDispatchToProps = {
+  fetchTickerList,
+};
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(HomePage);

packages/polymath-issuer/src/pages/home/index.js

@@ -24,7 +24,7 @@ class HomePage extends Component {
           <br />
           <br />
           <p>
-            <Link to="/ticker">
+            <Link to="/account">
               <Button id="create-token-btn" icon="arrow--right">
                 Configure your security token
               </Button>

packages/polymath-issuer/src/pages/token/style.scss

@@ -13,6 +13,10 @@
   margin-top: 13px;
 }
 
+.export-tokens-list-btn {
+  width: 100%;
+}
+
 .max-holders-count {
   .bx--form-item {
     float: left;

packages/polymath-issuer/src/reducers/account.js

@@ -0,0 +1,16 @@
+import * as a from '../actions/account';
+
+const defaultState = {
+  tickers: [],
+};
+
+export default (state = defaultState, action) => {
+  switch (action.type) {
+    case a.TICKER_LIST:
+      return {
+        tickers: [...action.tickers],
+      };
+    default:
+      return state;
+  }
+};

packages/polymath-issuer/src/redux/reducer.js

@@ -21,6 +21,7 @@ import whitelist from '../reducers/compliance';
 import stoModules from '../reducers/stoModules';
 import ui from '../reducers/ui';
 import restrictions from '../reducers/restrictions';
+import account from '../reducers/account';
 
 import type { ProvidersState } from '../reducers/providers';
 import type { TokenState } from '../reducers/token';
@@ -47,6 +48,7 @@ export default history =>
     app,
     session,
     restrictions,
+    account,
     router: connectRouter(history),
   });
 

packages/polymath-issuer/src/routes.js

@@ -19,11 +19,17 @@ import STOPage from './pages/sto/STOPage';
 import DividendsPage from './pages/dividends/DividendsPage';
 import DividendsWizardPage from './pages/dividends/DividendsWizardPage';
 import DividendDetailsPage from './pages/dividends/DividendDetailsPage';
+import AccountPage from './pages/account';
 
 export default [
   {
     component: App,
     routes: [
+      {
+        path: '/account',
+        component: AccountPage,
+        exact: true,
+      },
       {
         path: '/ticker',
         component: TickerPage,

packages/polymath-js/src/contracts/SecurityTokenRegistry.js

@@ -289,6 +289,16 @@ class SecurityTokenRegistry extends Contract {
     return tokens;
   }
 
+  async getTickersByOwner(owner) {
+    const tickers = this._methods.getTickersByOwner(owner).call();
+    const convertedTickers = tickers.reduce((pV, cV) => {
+      let ticker = this._toAscii(cV);
+      pV.push(ticker);
+      return pV;
+    }, []);
+    return convertedTickers;
+  }
+
   async registerTicker(details: SymbolDetails): Promise<Web3Receipt> {
     const fee = await this.registrationFee();
     const allowance = await PolyToken.allowance(this.account, this.address);