From c61e77129199c8f98b2d1599d582acc8f7e29e06 Mon Sep 17 00:00:00 2001
From: Remon Nashid <remon.sherin@gmail.com>
Date: Thu, 7 Nov 2019 14:03:00 -0800
Subject: [PATCH 1/5] GT-87 initial compliance tabs

---
 .../src/pages/compliance/CompliancePage.js    | 313 ++++++++++--------
 .../src/pages/compliance/style.scss           |   8 -
 2 files changed, 168 insertions(+), 153 deletions(-)

diff --git a/packages/polymath-issuer/src/pages/compliance/CompliancePage.js b/packages/polymath-issuer/src/pages/compliance/CompliancePage.js
index 0e3b90a18..c7b60ce4c 100644
--- a/packages/polymath-issuer/src/pages/compliance/CompliancePage.js
+++ b/packages/polymath-issuer/src/pages/compliance/CompliancePage.js
@@ -8,6 +8,8 @@ import {
   NotFoundPage,
   Page,
   Grid,
+  Remark,
+  FormItem,
 } from '@polymathnetwork/ui';
 import { BigNumber } from 'bignumber.js';
 import {
@@ -23,7 +25,10 @@ import {
   OverflowMenuItem,
   TextInput,
   Toggle,
+  Tabs,
+  Tab,
 } from 'carbon-components-react';
+import { Heading, CardFeatureState, icons } from '@polymathnetwork/new-ui';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { reset } from 'redux-form';
@@ -593,69 +598,55 @@ class CompliancePage extends Component<Props, State> {
     return (
       <Page title="Compliance – Polymath">
         <Progress />
-        <Grid>
-          <Grid.Row gridGap="0px">
-            <Grid.Col gridSpan={9}>
-              <h1 className="pui-h1">Token Compliance</h1>
-              <h3 className="pui-h3">
-                Manage compliance requirements of your tokens. You can import
-                and export your whitelist, manage ownership percentages, add 3rd
-                party whitelist managers, and manage approval of token transfers
-                between wallets.
-              </h3>
-            </Grid.Col>
-            <Grid.Col style={{ alignSelf: 'center' }}>
-              <Button
-                icon="upload"
-                onClick={this.handleImportModalOpen}
-                className="import-whitelist-btn"
-              >
-                Import Whitelist
-              </Button>
-            </Grid.Col>
-            <Grid.Col style={{ alignSelf: 'center' }}>
-              <ImportWhitelistModal
-                isOpen={this.state.isImportModalOpen}
-                onSubmit={this.handleImport}
-                onClose={this.handleImportModalClose}
-              />
-              {/* <WhitelistModal
-                isOpen={this.state.isWhitelistModalOpen}
-                handleOpen={this.}
-              /> */}
-
-              <Button
-                icon="download"
-                kind="secondary"
-                onClick={this.handleExport}
-                className="import-whitelist-btn"
-              >
-                Export Whitelist
-              </Button>
-            </Grid.Col>
-            <Grid.Col style={{ alignSelf: 'center', justifySelf: 'left' }}>
-              <OverflowMenu floatingMenu flipped style={{ float: 'right' }}>
-                <OverflowMenuItem
-                  itemText={
-                    this.props.isTokenFrozen
-                      ? 'Resume All Transfers'
-                      : 'Pause All Transfers'
-                  }
-                  onClick={
-                    this.props.isTokenFrozen
-                      ? this.handleUnFreezeModalOpen
-                      : this.handleFreezeModalOpen
-                  }
-                />
-              </OverflowMenu>
-            </Grid.Col>
-          </Grid.Row>
-          <Grid.Row>
-            <Grid.Col gridSpan={[12, 12, 6, 6]}>
-              <div id="compliance">
-                <br />
-                <div className="pui-page-box compliance-form">
-                  {/* <OverflowMenu floatingMenu flipped style={{ float: 'right' }}>
+        <h1 className="pui-h1">Token Compliance</h1>
+        <h3 className="pui-h3">
+          Manage compliance requirements of your tokens. You can import and
+          export your whitelist, manage ownership percentages, add 3rd party
+          whitelist managers, and manage approval of token transfers between
+          wallets.
+        </h3>
+        <Tabs>
+          <Tab label="Whitelist">
+            <Grid>
+              <Grid.Row>
+                <Grid.Col gridSpan={9}>
+                  <h1 className="pui-h1">Whitelist</h1>
+                  <h3 className="pui-h3">
+                    Whitelisted addresses may hold, buy, or sell the security
+                    token and may participate into the STO.
+                  </h3>
+                  <Remark title="Note">
+                    Security token buy/sell operations may be subject to
+                    additional restrictions.
+                  </Remark>
+                </Grid.Col>
+                <Grid.Col style={{ alignSelf: 'center' }}>
+                  <Button
+                    icon="upload"
+                    onClick={this.handleImportModalOpen}
+                    className="import-whitelist-btn"
+                  >
+                    Import Whitelist
+                  </Button>
+                </Grid.Col>
+                <Grid.Col style={{ alignSelf: 'center' }}>
+                  <ImportWhitelistModal
+                    isOpen={this.state.isImportModalOpen}
+                    onSubmit={this.handleImport}
+                    onClose={this.handleImportModalClose}
+                  />
+
+                  <Button
+                    icon="download"
+                    kind="secondary"
+                    onClick={this.handleExport}
+                    className="import-whitelist-btn"
+                  >
+                    Export Whitelist
+                  </Button>
+                </Grid.Col>
+                <Grid.Col style={{ alignSelf: 'center', justifySelf: 'left' }}>
+                  <OverflowMenu floatingMenu flipped style={{ float: 'right' }}>
                     <OverflowMenuItem
                       itemText={
                         this.props.isTokenFrozen
@@ -668,13 +659,114 @@ class CompliancePage extends Component<Props, State> {
                           : this.handleFreezeModalOpen
                       }
                     />
-                  </OverflowMenu> */}
+                  </OverflowMenu>
+                </Grid.Col>
+              </Grid.Row>
+              <Grid.Row>
+                <Grid.Col gridSpan={[12, 12, 6, 6]}>
+                  <div id="compliance">
+                    <br />
+                    <div className="pui-page-box compliance-form">
+                      <h1 className="pui-h1">Whitelist Management</h1>
+                      <div className="whitelist-settings">
+                        <div className="bx--form-item">
+                          <label
+                            htmlFor="whitelistToggle"
+                            className="bx--label"
+                          >
+                            Enable Third-Party Whitelist Management
+                          </label>
+                          <Toggle
+                            onToggle={this.handleToggleWhitelist}
+                            toggled={this.props.isWhitelistToggled}
+                            id="whitelistToggle"
+                          />
+                        </div>
+                        <div
+                          className="bx--form-item"
+                          style={
+                            this.props.isWhitelistToggled
+                              ? {}
+                              : { display: 'none' }
+                          }
+                        >
+                          <WhitelistTable />
+                        </div>
+                      </div>
+                      <div className="pui-clearfix" />
+                    </div>
+                  </div>
+                </Grid.Col>
+              </Grid.Row>
+            </Grid>
+          </Tab>
+          <Tab label="Ownership Restrictions">
+            <Grid>
+              <Grid.Row>
+                <Grid.Col gridSpan={9}>
                   <h1 className="pui-h1">Ownership Restrictions</h1>
-                  <div className="compliance-settings">
-                    <div className="bx--form-item">
-                      <label htmlFor="percentageToggle" className="bx--label">
-                        Enable Ownership Restrictions
-                      </label>
+                  <h3 className="pui-h3">
+                    Ownership
+                    Restrictions!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+                  </h3>
+                  <div
+                    className="bx--form-item"
+                    style={
+                      !isPercentagePaused ||
+                      (!isPercentageEnabled && this.state.isPercentageToggled)
+                        ? {}
+                        : {
+                            display: 'none',
+                          }
+                    }
+                  >
+                    <label htmlFor="percentage" className="bx--label">
+                      Each individual investor can own up to this percentage of
+                      outstanding tokens
+                    </label>
+                    <div>
+                      <TextInput
+                        labelText=""
+                        id="percentage"
+                        value={this.state.percentage}
+                        placeholder="%"
+                        onChange={this.handlePercentageChange}
+                      />
+                      <Button
+                        className="apply-percentage-btn"
+                        onClick={this.handleApplyPercentage}
+                        disabled={
+                          this.isPercentageValid() ||
+                          typeof this.state.percentage === 'undefined' ||
+                          this.state.percentage === ''
+                        }
+                      >
+                        Apply
+                      </Button>
+                    </div>
+                  </div>
+                </Grid.Col>
+                <Grid.Col
+                  gridSpan={3}
+                  style={{
+                    alignSelf: 'center',
+                    boxShadow: '0 8px 24px 0 rgba(0,0,0,0.1)',
+                  }}
+                >
+                  <CardFeatureState
+                    status={
+                      isPercentageEnabled
+                        ? !isPercentagePaused
+                        : this.state.isPercentageToggled
+                        ? 'idle'
+                        : 'inactive'
+                    }
+                    IconAsset={icons.SvgRestriction}
+                  >
+                    <Heading color="primary" mt={2}>
+                      Enable Ownership Restrictions
+                    </Heading>
+                    <div style={{ marginLeft: 70 }}>
                       <Toggle
                         onToggle={this.handleTogglePercentage}
                         toggled={
@@ -682,84 +774,15 @@ class CompliancePage extends Component<Props, State> {
                             ? !isPercentagePaused
                             : this.state.isPercentageToggled
                         }
-                        id="percentageToggle"
+                        id="volumeRestrictionToggle"
                       />
                     </div>
-
-                    <div
-                      className="bx--form-item"
-                      style={
-                        !isPercentagePaused ||
-                        (!isPercentageEnabled && this.state.isPercentageToggled)
-                          ? {}
-                          : {
-                              display: 'none',
-                            }
-                      }
-                    >
-                      <label htmlFor="percentage" className="bx--label">
-                        Each Individual Investor Can
-                        <br />
-                        Own Up To of Outstanding Tokens
-                      </label>
-                      <div>
-                        <TextInput
-                          labelText=""
-                          id="percentage"
-                          value={this.state.percentage}
-                          placeholder="–"
-                          onChange={this.handlePercentageChange}
-                        />
-                        <Button
-                          className="apply-percentage-btn"
-                          onClick={this.handleApplyPercentage}
-                          disabled={
-                            this.isPercentageValid() ||
-                            typeof this.state.percentage === 'undefined' ||
-                            this.state.percentage === ''
-                          }
-                        >
-                          Apply
-                        </Button>
-                      </div>
-                    </div>
-                  </div>
-                  <div className="pui-clearfix" />
-                </div>
-              </div>
-            </Grid.Col>
-            <Grid.Col gridSpan={[12, 12, 6, 6]}>
-              <div id="compliance">
-                <br />
-                <div className="pui-page-box compliance-form">
-                  <h1 className="pui-h1">Whitelist Management</h1>
-                  <div className="whitelist-settings">
-                    <div className="bx--form-item">
-                      <label htmlFor="whitelistToggle" className="bx--label">
-                        Enable Third-Party Whitelist Management
-                      </label>
-                      <Toggle
-                        onToggle={this.handleToggleWhitelist}
-                        toggled={this.props.isWhitelistToggled}
-                        id="whitelistToggle"
-                      />
-                    </div>
-
-                    <div
-                      className="bx--form-item"
-                      style={
-                        this.props.isWhitelistToggled ? {} : { display: 'none' }
-                      }
-                    >
-                      <WhitelistTable />
-                    </div>
-                  </div>
-                  <div className="pui-clearfix" />
-                </div>
-              </div>
-            </Grid.Col>
-          </Grid.Row>
-        </Grid>
+                  </CardFeatureState>
+                </Grid.Col>
+              </Grid.Row>
+            </Grid>
+          </Tab>
+        </Tabs>
       </Page>
     );
   }
diff --git a/packages/polymath-issuer/src/pages/compliance/style.scss b/packages/polymath-issuer/src/pages/compliance/style.scss
index 5a6c919b3..a922337a6 100644
--- a/packages/polymath-issuer/src/pages/compliance/style.scss
+++ b/packages/polymath-issuer/src/pages/compliance/style.scss
@@ -86,14 +86,6 @@
             }
           }
 
-          &:after {
-            content: '%';
-            position: absolute;
-            top: 13px;
-            left: 55px;
-            color: #8c9ba5;
-            font-size: 14px;
-          }
         }
 
         button {

From 7e48dbaae5b088108eaf5bf941fefd33e9cb4877 Mon Sep 17 00:00:00 2001
From: Remon Nashid <remon.sherin@gmail.com>
Date: Wed, 13 Nov 2019 14:30:58 -0800
Subject: [PATCH 2/5] GT-85: fix token creation emails

---
 packages/polymath-offchain/src/startup/setupWeb3.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/polymath-offchain/src/startup/setupWeb3.js b/packages/polymath-offchain/src/startup/setupWeb3.js
index c4f4fc008..ed083beb5 100644
--- a/packages/polymath-offchain/src/startup/setupWeb3.js
+++ b/packages/polymath-offchain/src/startup/setupWeb3.js
@@ -439,7 +439,6 @@ export const registerTickerHandler = async (
  */
 export const addTickerRegisterListener = async (networkId: string) => {
   const contract = await getSTRContract(networkId);
-
   contract.events.RegisterTicker({}, (error, result) =>
     registerTickerHandler(contract, networkId, error, result)
   );
@@ -507,10 +506,11 @@ export const newSecurityTokenHandler = async (
  */
 export const addTokenCreateListener = async (networkId: string) => {
   const contract = await getSTRContract(networkId);
-
-  contract.events.NewSecurityToken({}, (error, result) =>
-    newSecurityTokenHandler(contract, networkId, error, result)
-  );
+  contract.events[
+    'NewSecurityToken(string,string,address,address,uint256,address,bool,uint256,uint256,uint256)'
+  ]({}, (error, result) => {
+    newSecurityTokenHandler(contract, networkId, error, result);
+  });
 
   contract.events.SecurityTokenRefreshed({}, (error, result) =>
     newSecurityTokenHandler(contract, networkId, error, result)

From 802f20325921463052f81f2a107d6f11edccd510 Mon Sep 17 00:00:00 2001
From: Remon Nashid <remon.sherin@gmail.com>
Date: Mon, 18 Nov 2019 09:23:53 -0800
Subject: [PATCH 3/5] GT-87: add remaining copy

---
 .../src/pages/compliance/CompliancePage.js    | 26 ++++++++++++++-----
 1 file changed, 20 insertions(+), 6 deletions(-)

diff --git a/packages/polymath-issuer/src/pages/compliance/CompliancePage.js b/packages/polymath-issuer/src/pages/compliance/CompliancePage.js
index c7b60ce4c..be56dd20e 100644
--- a/packages/polymath-issuer/src/pages/compliance/CompliancePage.js
+++ b/packages/polymath-issuer/src/pages/compliance/CompliancePage.js
@@ -667,7 +667,7 @@ class CompliancePage extends Component<Props, State> {
                   <div id="compliance">
                     <br />
                     <div className="pui-page-box compliance-form">
-                      <h1 className="pui-h1">Whitelist Management</h1>
+                      <h1 className="pui-h1">3rd Party Whitelist Management</h1>
                       <div className="whitelist-settings">
                         <div className="bx--form-item">
                           <label
@@ -706,9 +706,15 @@ class CompliancePage extends Component<Props, State> {
                 <Grid.Col gridSpan={9}>
                   <h1 className="pui-h1">Ownership Restrictions</h1>
                   <h3 className="pui-h3">
-                    Ownership
-                    Restrictions!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+                    Manage ownership limits by setting the maximum percentage of
+                    your token a single investor can hold.{' '}
                   </h3>
+                  <Remark title="Note">
+                    This percentage relates to the holdings of a single wallet
+                    address and may not support investor holdings held in a
+                    custodial omnibus wallet.
+                  </Remark>
+                  <br />
                   <div
                     className="bx--form-item"
                     style={
@@ -721,11 +727,17 @@ class CompliancePage extends Component<Props, State> {
                     }
                   >
                     <label htmlFor="percentage" className="bx--label">
-                      Each individual investor can own up to this percentage of
-                      outstanding tokens
+                      Percentage of outstanding tokens individual investors can
+                      own:
                     </label>
-                    <div>
+                    <div
+                      style={{
+                        display: 'flex',
+                        flexDirection: 'row',
+                      }}
+                    >
                       <TextInput
+                        style={{ width: 100 }}
                         labelText=""
                         id="percentage"
                         value={this.state.percentage}
@@ -733,6 +745,8 @@ class CompliancePage extends Component<Props, State> {
                         onChange={this.handlePercentageChange}
                       />
                       <Button
+                        style={{ marginTop: 0 }}
+                        kind="secondary"
                         className="apply-percentage-btn"
                         onClick={this.handleApplyPercentage}
                         disabled={

From 91a019bb82bfe1e3c7250671bec1b76b70cb26a7 Mon Sep 17 00:00:00 2001
From: Remon Nashid <remon.sherin@gmail.com>
Date: Wed, 20 Nov 2019 16:22:31 -0800
Subject: [PATCH 4/5] GT-87 tackle review issues

---
 .../src/pages/compliance/CompliancePage.js            | 11 +++++++----
 .../polymath-issuer/src/pages/compliance/style.scss   |  2 +-
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/packages/polymath-issuer/src/pages/compliance/CompliancePage.js b/packages/polymath-issuer/src/pages/compliance/CompliancePage.js
index be56dd20e..bbecc3472 100644
--- a/packages/polymath-issuer/src/pages/compliance/CompliancePage.js
+++ b/packages/polymath-issuer/src/pages/compliance/CompliancePage.js
@@ -612,8 +612,8 @@ class CompliancePage extends Component<Props, State> {
                 <Grid.Col gridSpan={9}>
                   <h1 className="pui-h1">Whitelist</h1>
                   <h3 className="pui-h3">
-                    Whitelisted addresses may hold, buy, or sell the security
-                    token and may participate into the STO.
+                    Your whitelist is the list of wallet addresses of approved
+                    or exempted to buy and sell your security token.
                   </h3>
                   <Remark title="Note">
                     Security token buy/sell operations may be subject to
@@ -622,6 +622,7 @@ class CompliancePage extends Component<Props, State> {
                 </Grid.Col>
                 <Grid.Col style={{ alignSelf: 'center' }}>
                   <Button
+                    style={{ width: 185 }}
                     icon="upload"
                     onClick={this.handleImportModalOpen}
                     className="import-whitelist-btn"
@@ -637,6 +638,7 @@ class CompliancePage extends Component<Props, State> {
                   />
 
                   <Button
+                    style={{ width: 185 }}
                     icon="download"
                     kind="secondary"
                     onClick={this.handleExport}
@@ -706,8 +708,9 @@ class CompliancePage extends Component<Props, State> {
                 <Grid.Col gridSpan={9}>
                   <h1 className="pui-h1">Ownership Restrictions</h1>
                   <h3 className="pui-h3">
-                    Manage ownership limits by setting the maximum percentage of
-                    your token a single investor can hold.{' '}
+                    Manage ownership of your security token by setting limits
+                    like capping the percentage of available tokens a single
+                    investor can hold.{' '}
                   </h3>
                   <Remark title="Note">
                     This percentage relates to the holdings of a single wallet
diff --git a/packages/polymath-issuer/src/pages/compliance/style.scss b/packages/polymath-issuer/src/pages/compliance/style.scss
index a922337a6..589e5d996 100644
--- a/packages/polymath-issuer/src/pages/compliance/style.scss
+++ b/packages/polymath-issuer/src/pages/compliance/style.scss
@@ -133,7 +133,7 @@
 .import-whitelist-btn {
   float: left;
   margin-top: 6px;
-  margin-right: 26px;
+  // margin-right: px;
 }
 
 .permanent-checkbox-container {

From f277c47bc375d32510e1b7da59ef62caf411b6e5 Mon Sep 17 00:00:00 2001
From: Remon Nashid <remon.sherin@gmail.com>
Date: Mon, 25 Nov 2019 13:03:28 -0800
Subject: [PATCH 5/5] GT-87: remove the part of compliance copy, that is
 associated with MATM

---
 .../polymath-issuer/src/pages/compliance/CompliancePage.js   | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/polymath-issuer/src/pages/compliance/CompliancePage.js b/packages/polymath-issuer/src/pages/compliance/CompliancePage.js
index bbecc3472..7eb41bf1c 100644
--- a/packages/polymath-issuer/src/pages/compliance/CompliancePage.js
+++ b/packages/polymath-issuer/src/pages/compliance/CompliancePage.js
@@ -601,9 +601,8 @@ class CompliancePage extends Component<Props, State> {
         <h1 className="pui-h1">Token Compliance</h1>
         <h3 className="pui-h3">
           Manage compliance requirements of your tokens. You can import and
-          export your whitelist, manage ownership percentages, add 3rd party
-          whitelist managers, and manage approval of token transfers between
-          wallets.
+          export your whitelist, manage ownership percentages and add 3rd party
+          whitelist managers.
         </h3>
         <Tabs>
           <Tab label="Whitelist">