Skip to content

Commit 0fc42b3

Browse files
ross-rosarioross-rosario
authored
Merge pull request #670 from PolymathNetwork/develop
Release 2.3.1
2 parents 0b2b096 + f277c47 commit 0fc42b3

3 files changed

Lines changed: 190 additions & 159 deletions

File tree

‎packages/polymath-issuer/src/pages/compliance/CompliancePage.js‎

Lines changed: 184 additions & 145 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ import {
88
NotFoundPage,
99
Page,
1010
Grid,
11+
Remark,
12+
FormItem,
1113
} from '@polymathnetwork/ui';
1214
import { BigNumber } from 'bignumber.js';
1315
import {
@@ -23,7 +25,10 @@ import {
2325
OverflowMenuItem,
2426
TextInput,
2527
Toggle,
28+
Tabs,
29+
Tab,
2630
} from 'carbon-components-react';
31+
import { Heading, CardFeatureState, icons } from '@polymathnetwork/new-ui';
2732
import React, { Component } from 'react';
2833
import { connect } from 'react-redux';
2934
import { reset } from 'redux-form';
@@ -593,69 +598,56 @@ class CompliancePage extends Component<Props, State> {
593598
return (
594599
<Page title="Compliance – Polymath">
595600
<Progress />
596-
<Grid>
597-
<Grid.Row gridGap="0px">
598-
<Grid.Col gridSpan={9}>
599-
<h1 className="pui-h1">Token Compliance</h1>
600-
<h3 className="pui-h3">
601-
Manage compliance requirements of your tokens. You can import
602-
and export your whitelist, manage ownership percentages, add 3rd
603-
party whitelist managers, and manage approval of token transfers
604-
between wallets.
605-
</h3>
606-
</Grid.Col>
607-
<Grid.Col style={{ alignSelf: 'center' }}>
608-
<Button
609-
icon="upload"
610-
onClick={this.handleImportModalOpen}
611-
className="import-whitelist-btn"
612-
>
613-
Import Whitelist
614-
</Button>
615-
</Grid.Col>
616-
<Grid.Col style={{ alignSelf: 'center' }}>
617-
<ImportWhitelistModal
618-
isOpen={this.state.isImportModalOpen}
619-
onSubmit={this.handleImport}
620-
onClose={this.handleImportModalClose}
621-
/>
622-
{/* <WhitelistModal
623-
isOpen={this.state.isWhitelistModalOpen}
624-
handleOpen={this.}
625-
/> */}
626-
627-
<Button
628-
icon="download"
629-
kind="secondary"
630-
onClick={this.handleExport}
631-
className="import-whitelist-btn"
632-
>
633-
Export Whitelist
634-
</Button>
635-
</Grid.Col>
636-
<Grid.Col style={{ alignSelf: 'center', justifySelf: 'left' }}>
637-
<OverflowMenu floatingMenu flipped style={{ float: 'right' }}>
638-
<OverflowMenuItem
639-
itemText={
640-
this.props.isTokenFrozen
641-
? 'Resume All Transfers'
642-
: 'Pause All Transfers'
643-
}
644-
onClick={
645-
this.props.isTokenFrozen
646-
? this.handleUnFreezeModalOpen
647-
: this.handleFreezeModalOpen
648-
}
649-
/>
650-
</OverflowMenu>
651-
</Grid.Col>
652-
</Grid.Row>
653-
<Grid.Row>
654-
<Grid.Col gridSpan={[12, 12, 6, 6]}>
655-
<div id="compliance">
656-
<br />
657-
<div className="pui-page-box compliance-form">
658-
{/* <OverflowMenu floatingMenu flipped style={{ float: 'right' }}>
601+
<h1 className="pui-h1">Token Compliance</h1>
602+
<h3 className="pui-h3">
603+
Manage compliance requirements of your tokens. You can import and
604+
export your whitelist, manage ownership percentages and add 3rd party
605+
whitelist managers.
606+
</h3>
607+
<Tabs>
608+
<Tab label="Whitelist">
609+
<Grid>
610+
<Grid.Row>
611+
<Grid.Col gridSpan={9}>
612+
<h1 className="pui-h1">Whitelist</h1>
613+
<h3 className="pui-h3">
614+
Your whitelist is the list of wallet addresses of approved
615+
or exempted to buy and sell your security token.
616+
</h3>
617+
<Remark title="Note">
618+
Security token buy/sell operations may be subject to
619+
additional restrictions.
620+
</Remark>
621+
</Grid.Col>
622+
<Grid.Col style={{ alignSelf: 'center' }}>
623+
<Button
624+
style={{ width: 185 }}
625+
icon="upload"
626+
onClick={this.handleImportModalOpen}
627+
className="import-whitelist-btn"
628+
>
629+
Import Whitelist
630+
</Button>
631+
</Grid.Col>
632+
<Grid.Col style={{ alignSelf: 'center' }}>
633+
<ImportWhitelistModal
634+
isOpen={this.state.isImportModalOpen}
635+
onSubmit={this.handleImport}
636+
onClose={this.handleImportModalClose}
637+
/>
638+
639+
<Button
640+
style={{ width: 185 }}
641+
icon="download"
642+
kind="secondary"
643+
onClick={this.handleExport}
644+
className="import-whitelist-btn"
645+
>
646+
Export Whitelist
647+
</Button>
648+
</Grid.Col>
649+
<Grid.Col style={{ alignSelf: 'center', justifySelf: 'left' }}>
650+
<OverflowMenu floatingMenu flipped style={{ float: 'right' }}>
659651
<OverflowMenuItem
660652
itemText={
661653
this.props.isTokenFrozen
@@ -668,98 +660,145 @@ class CompliancePage extends Component<Props, State> {
668660
: this.handleFreezeModalOpen
669661
}
670662
/>
671-
</OverflowMenu> */}
663+
</OverflowMenu>
664+
</Grid.Col>
665+
</Grid.Row>
666+
<Grid.Row>
667+
<Grid.Col gridSpan={[12, 12, 6, 6]}>
668+
<div id="compliance">
669+
<br />
670+
<div className="pui-page-box compliance-form">
671+
<h1 className="pui-h1">3rd Party Whitelist Management</h1>
672+
<div className="whitelist-settings">
673+
<div className="bx--form-item">
674+
<label
675+
htmlFor="whitelistToggle"
676+
className="bx--label"
677+
>
678+
Enable Third-Party Whitelist Management
679+
</label>
680+
<Toggle
681+
onToggle={this.handleToggleWhitelist}
682+
toggled={this.props.isWhitelistToggled}
683+
id="whitelistToggle"
684+
/>
685+
</div>
686+
<div
687+
className="bx--form-item"
688+
style={
689+
this.props.isWhitelistToggled
690+
? {}
691+
: { display: 'none' }
692+
}
693+
>
694+
<WhitelistTable />
695+
</div>
696+
</div>
697+
<div className="pui-clearfix" />
698+
</div>
699+
</div>
700+
</Grid.Col>
701+
</Grid.Row>
702+
</Grid>
703+
</Tab>
704+
<Tab label="Ownership Restrictions">
705+
<Grid>
706+
<Grid.Row>
707+
<Grid.Col gridSpan={9}>
672708
<h1 className="pui-h1">Ownership Restrictions</h1>
673-
<div className="compliance-settings">
674-
<div className="bx--form-item">
675-
<label htmlFor="percentageToggle" className="bx--label">
676-
Enable Ownership Restrictions
677-
</label>
709+
<h3 className="pui-h3">
710+
Manage ownership of your security token by setting limits
711+
like capping the percentage of available tokens a single
712+
investor can hold.{' '}
713+
</h3>
714+
<Remark title="Note">
715+
This percentage relates to the holdings of a single wallet
716+
address and may not support investor holdings held in a
717+
custodial omnibus wallet.
718+
</Remark>
719+
<br />
720+
<div
721+
className="bx--form-item"
722+
style={
723+
!isPercentagePaused ||
724+
(!isPercentageEnabled && this.state.isPercentageToggled)
725+
? {}
726+
: {
727+
display: 'none',
728+
}
729+
}
730+
>
731+
<label htmlFor="percentage" className="bx--label">
732+
Percentage of outstanding tokens individual investors can
733+
own:
734+
</label>
735+
<div
736+
style={{
737+
display: 'flex',
738+
flexDirection: 'row',
739+
}}
740+
>
741+
<TextInput
742+
style={{ width: 100 }}
743+
labelText=""
744+
id="percentage"
745+
value={this.state.percentage}
746+
placeholder="%"
747+
onChange={this.handlePercentageChange}
748+
/>
749+
<Button
750+
style={{ marginTop: 0 }}
751+
kind="secondary"
752+
className="apply-percentage-btn"
753+
onClick={this.handleApplyPercentage}
754+
disabled={
755+
this.isPercentageValid() ||
756+
typeof this.state.percentage === 'undefined' ||
757+
this.state.percentage === ''
758+
}
759+
>
760+
Apply
761+
</Button>
762+
</div>
763+
</div>
764+
</Grid.Col>
765+
<Grid.Col
766+
gridSpan={3}
767+
style={{
768+
alignSelf: 'center',
769+
boxShadow: '0 8px 24px 0 rgba(0,0,0,0.1)',
770+
}}
771+
>
772+
<CardFeatureState
773+
status={
774+
isPercentageEnabled
775+
? !isPercentagePaused
776+
: this.state.isPercentageToggled
777+
? 'idle'
778+
: 'inactive'
779+
}
780+
IconAsset={icons.SvgRestriction}
781+
>
782+
<Heading color="primary" mt={2}>
783+
Enable Ownership Restrictions
784+
</Heading>
785+
<div style={{ marginLeft: 70 }}>
678786
<Toggle
679787
onToggle={this.handleTogglePercentage}
680788
toggled={
681789
isPercentageEnabled
682790
? !isPercentagePaused
683791
: this.state.isPercentageToggled
684792
}
685-
id="percentageToggle"
686-
/>
687-
</div>
688-
689-
<div
690-
className="bx--form-item"
691-
style={
692-
!isPercentagePaused ||
693-
(!isPercentageEnabled && this.state.isPercentageToggled)
694-
? {}
695-
: {
696-
display: 'none',
697-
}
698-
}
699-
>
700-
<label htmlFor="percentage" className="bx--label">
701-
Each Individual Investor Can
702-
<br />
703-
Own Up To of Outstanding Tokens
704-
</label>
705-
<div>
706-
<TextInput
707-
labelText=""
708-
id="percentage"
709-
value={this.state.percentage}
710-
placeholder="–"
711-
onChange={this.handlePercentageChange}
712-
/>
713-
<Button
714-
className="apply-percentage-btn"
715-
onClick={this.handleApplyPercentage}
716-
disabled={
717-
this.isPercentageValid() ||
718-
typeof this.state.percentage === 'undefined' ||
719-
this.state.percentage === ''
720-
}
721-
>
722-
Apply
723-
</Button>
724-
</div>
725-
</div>
726-
</div>
727-
<div className="pui-clearfix" />
728-
</div>
729-
</div>
730-
</Grid.Col>
731-
<Grid.Col gridSpan={[12, 12, 6, 6]}>
732-
<div id="compliance">
733-
<br />
734-
<div className="pui-page-box compliance-form">
735-
<h1 className="pui-h1">Whitelist Management</h1>
736-
<div className="whitelist-settings">
737-
<div className="bx--form-item">
738-
<label htmlFor="whitelistToggle" className="bx--label">
739-
Enable Third-Party Whitelist Management
740-
</label>
741-
<Toggle
742-
onToggle={this.handleToggleWhitelist}
743-
toggled={this.props.isWhitelistToggled}
744-
id="whitelistToggle"
793+
id="volumeRestrictionToggle"
745794
/>
746795
</div>
747-
748-
<div
749-
className="bx--form-item"
750-
style={
751-
this.props.isWhitelistToggled ? {} : { display: 'none' }
752-
}
753-
>
754-
<WhitelistTable />
755-
</div>
756-
</div>
757-
<div className="pui-clearfix" />
758-
</div>
759-
</div>
760-
</Grid.Col>
761-
</Grid.Row>
762-
</Grid>
796+
</CardFeatureState>
797+
</Grid.Col>
798+
</Grid.Row>
799+
</Grid>
800+
</Tab>
801+
</Tabs>
763802
</Page>
764803
);
765804
}

‎packages/polymath-issuer/src/pages/compliance/style.scss‎

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -86,14 +86,6 @@
8686
}
8787
}
8888

89-
&:after {
90-
content: '%';
91-
position: absolute;
92-
top: 13px;
93-
left: 55px;
94-
color: #8c9ba5;
95-
font-size: 14px;
96-
}
9789
}
9890

9991
button {
@@ -141,7 +133,7 @@
141133
.import-whitelist-btn {
142134
float: left;
143135
margin-top: 6px;
144-
margin-right: 26px;
136+
// margin-right: px;
145137
}
146138

147139
.permanent-checkbox-container {

0 commit comments

Comments
 (0)