Skip to content

Commit d6baff6

Browse files
ross-rosarioross-rosario
authored
Merge pull request #668 from PolymathNetwork/compliance-tabs
Compliance tabs
2 parents 18e38c5 + 91a019b commit d6baff6

2 files changed

Lines changed: 186 additions & 154 deletions

File tree

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

Lines changed: 185 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,57 @@ 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, add 3rd party
605+
whitelist managers, and manage approval of token transfers between
606+
wallets.
607+
</h3>
608+
<Tabs>
609+
<Tab label="Whitelist">
610+
<Grid>
611+
<Grid.Row>
612+
<Grid.Col gridSpan={9}>
613+
<h1 className="pui-h1">Whitelist</h1>
614+
<h3 className="pui-h3">
615+
Your whitelist is the list of wallet addresses of approved
616+
or exempted to buy and sell your security token.
617+
</h3>
618+
<Remark title="Note">
619+
Security token buy/sell operations may be subject to
620+
additional restrictions.
621+
</Remark>
622+
</Grid.Col>
623+
<Grid.Col style={{ alignSelf: 'center' }}>
624+
<Button
625+
style={{ width: 185 }}
626+
icon="upload"
627+
onClick={this.handleImportModalOpen}
628+
className="import-whitelist-btn"
629+
>
630+
Import Whitelist
631+
</Button>
632+
</Grid.Col>
633+
<Grid.Col style={{ alignSelf: 'center' }}>
634+
<ImportWhitelistModal
635+
isOpen={this.state.isImportModalOpen}
636+
onSubmit={this.handleImport}
637+
onClose={this.handleImportModalClose}
638+
/>
639+
640+
<Button
641+
style={{ width: 185 }}
642+
icon="download"
643+
kind="secondary"
644+
onClick={this.handleExport}
645+
className="import-whitelist-btn"
646+
>
647+
Export Whitelist
648+
</Button>
649+
</Grid.Col>
650+
<Grid.Col style={{ alignSelf: 'center', justifySelf: 'left' }}>
651+
<OverflowMenu floatingMenu flipped style={{ float: 'right' }}>
659652
<OverflowMenuItem
660653
itemText={
661654
this.props.isTokenFrozen
@@ -668,98 +661,145 @@ class CompliancePage extends Component<Props, State> {
668661
: this.handleFreezeModalOpen
669662
}
670663
/>
671-
</OverflowMenu> */}
664+
</OverflowMenu>
665+
</Grid.Col>
666+
</Grid.Row>
667+
<Grid.Row>
668+
<Grid.Col gridSpan={[12, 12, 6, 6]}>
669+
<div id="compliance">
670+
<br />
671+
<div className="pui-page-box compliance-form">
672+
<h1 className="pui-h1">3rd Party Whitelist Management</h1>
673+
<div className="whitelist-settings">
674+
<div className="bx--form-item">
675+
<label
676+
htmlFor="whitelistToggle"
677+
className="bx--label"
678+
>
679+
Enable Third-Party Whitelist Management
680+
</label>
681+
<Toggle
682+
onToggle={this.handleToggleWhitelist}
683+
toggled={this.props.isWhitelistToggled}
684+
id="whitelistToggle"
685+
/>
686+
</div>
687+
<div
688+
className="bx--form-item"
689+
style={
690+
this.props.isWhitelistToggled
691+
? {}
692+
: { display: 'none' }
693+
}
694+
>
695+
<WhitelistTable />
696+
</div>
697+
</div>
698+
<div className="pui-clearfix" />
699+
</div>
700+
</div>
701+
</Grid.Col>
702+
</Grid.Row>
703+
</Grid>
704+
</Tab>
705+
<Tab label="Ownership Restrictions">
706+
<Grid>
707+
<Grid.Row>
708+
<Grid.Col gridSpan={9}>
672709
<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>
710+
<h3 className="pui-h3">
711+
Manage ownership of your security token by setting limits
712+
like capping the percentage of available tokens a single
713+
investor can hold.{' '}
714+
</h3>
715+
<Remark title="Note">
716+
This percentage relates to the holdings of a single wallet
717+
address and may not support investor holdings held in a
718+
custodial omnibus wallet.
719+
</Remark>
720+
<br />
721+
<div
722+
className="bx--form-item"
723+
style={
724+
!isPercentagePaused ||
725+
(!isPercentageEnabled && this.state.isPercentageToggled)
726+
? {}
727+
: {
728+
display: 'none',
729+
}
730+
}
731+
>
732+
<label htmlFor="percentage" className="bx--label">
733+
Percentage of outstanding tokens individual investors can
734+
own:
735+
</label>
736+
<div
737+
style={{
738+
display: 'flex',
739+
flexDirection: 'row',
740+
}}
741+
>
742+
<TextInput
743+
style={{ width: 100 }}
744+
labelText=""
745+
id="percentage"
746+
value={this.state.percentage}
747+
placeholder="%"
748+
onChange={this.handlePercentageChange}
749+
/>
750+
<Button
751+
style={{ marginTop: 0 }}
752+
kind="secondary"
753+
className="apply-percentage-btn"
754+
onClick={this.handleApplyPercentage}
755+
disabled={
756+
this.isPercentageValid() ||
757+
typeof this.state.percentage === 'undefined' ||
758+
this.state.percentage === ''
759+
}
760+
>
761+
Apply
762+
</Button>
763+
</div>
764+
</div>
765+
</Grid.Col>
766+
<Grid.Col
767+
gridSpan={3}
768+
style={{
769+
alignSelf: 'center',
770+
boxShadow: '0 8px 24px 0 rgba(0,0,0,0.1)',
771+
}}
772+
>
773+
<CardFeatureState
774+
status={
775+
isPercentageEnabled
776+
? !isPercentagePaused
777+
: this.state.isPercentageToggled
778+
? 'idle'
779+
: 'inactive'
780+
}
781+
IconAsset={icons.SvgRestriction}
782+
>
783+
<Heading color="primary" mt={2}>
784+
Enable Ownership Restrictions
785+
</Heading>
786+
<div style={{ marginLeft: 70 }}>
678787
<Toggle
679788
onToggle={this.handleTogglePercentage}
680789
toggled={
681790
isPercentageEnabled
682791
? !isPercentagePaused
683792
: this.state.isPercentageToggled
684793
}
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"
794+
id="volumeRestrictionToggle"
745795
/>
746796
</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>
797+
</CardFeatureState>
798+
</Grid.Col>
799+
</Grid.Row>
800+
</Grid>
801+
</Tab>
802+
</Tabs>
763803
</Page>
764804
);
765805
}

‎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)