Skip to content

Commit 015c02d

Browse files
RafaelVidaurreRafaelVidaurre
authored
Merge pull request #560 from PolymathNetwork/fix/dividends-details-page-update
Fix/dividends details page update
2 parents a0f9a6b + 170a200 commit 015c02d

9 files changed

Lines changed: 195 additions & 87 deletions

File tree

‎packages/new-polymath-issuer/src/components/CheckpointList/Container.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -74,9 +74,8 @@ export class CheckpointListContainerBase extends Component<Props> {
7474
securityTokenSymbol,
7575
}),
7676
]}
77-
render={(data: { checkpoints: types.CheckpointEntity[] }) => {
77+
render={(data: { checkpoints: types.CheckpointEntity[] }, loading) => {
7878
const { checkpoints } = data;
79-
8079
const fetchers = checkpoints.map(({ index }) =>
8180
createDividendsByCheckpointFetcher(
8281
{
@@ -89,6 +88,7 @@ export class CheckpointListContainerBase extends Component<Props> {
8988

9089
return (
9190
<DataFetcher
91+
watchProps={[loading]}
9292
fetchers={fetchers}
9393
render={(dividendsData: {
9494
[key: string]: types.DividendEntity[];
@@ -129,6 +129,7 @@ export class CheckpointListContainerBase extends Component<Props> {
129129
checkpoints={sortedCheckpoints}
130130
securityTokenSymbol={securityTokenSymbol}
131131
downloadOwnershipList={this.downloadOwnershipList}
132+
loading={loading}
132133
/>
133134
);
134135
}}

‎packages/new-polymath-issuer/src/components/CheckpointList/Presenter.tsx‎

Lines changed: 77 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from 'react';
1+
import React, { Fragment } from 'react';
22
import { groupBy } from 'lodash';
33
import { types, formatters } from '@polymathnetwork/new-shared';
44
import {
@@ -9,6 +9,7 @@ import {
99
Icon,
1010
icons,
1111
IconText,
12+
LoadingDots,
1213
} from '@polymathnetwork/new-ui';
1314
import { DividendList } from '~/components/DividendList';
1415
import * as sc from './styles';
@@ -19,88 +20,96 @@ export interface Props {
1920
securityTokenSymbol: string;
2021
downloadOwnershipList: (checkpoint: types.CheckpointEntity) => void;
2122
allDividendsCompleted: boolean;
23+
loading?: boolean;
2224
}
2325

2426
export const CheckpointListPresenter = ({
2527
checkpoints,
2628
securityTokenSymbol,
2729
downloadOwnershipList,
2830
allDividendsCompleted,
31+
loading,
2932
}: Props) => {
3033
const checkpointsByYear = groupBy(checkpoints, checkpoint =>
3134
checkpoint.createdAt.getFullYear()
3235
);
3336

3437
return (
35-
<sc.Container alignItems="flex-start" vertical gridGap={7}>
36-
{Object.keys(checkpointsByYear).map(year => {
37-
const yearCheckpoints = checkpointsByYear[year];
38+
<Fragment>
39+
{loading && <LoadingDots />}
40+
<sc.Container alignItems="flex-start" vertical gridGap={7}>
41+
{Object.keys(checkpointsByYear).map(year => {
42+
const yearCheckpoints = checkpointsByYear[year];
3843

39-
return (
40-
<sc.Checkpoints key={year}>
41-
<Grid gridAutoFlow="column" gridAutoColumns="200px 1fr">
42-
<Grid.Item gridColumn="2">
43-
<sc.Year>{year}</sc.Year>
44-
</Grid.Item>
45-
</Grid>
46-
<List vertical>
47-
{yearCheckpoints.map(checkpoint => {
48-
const isLastDividend =
49-
yearCheckpoints.indexOf(checkpoint) ===
50-
yearCheckpoints.length - 1 &&
51-
Object.keys(checkpointsByYear).indexOf(year) !==
52-
Object.keys(checkpointsByYear).length - 1;
44+
return (
45+
<sc.Checkpoints key={year}>
46+
<Grid gridAutoFlow="column" gridAutoColumns="200px 1fr">
47+
<Grid.Item gridColumn="2">
48+
<sc.Year>{year}</sc.Year>
49+
</Grid.Item>
50+
</Grid>
51+
<List vertical>
52+
{yearCheckpoints.map(checkpoint => {
53+
const isLastDividend =
54+
yearCheckpoints.indexOf(checkpoint) ===
55+
yearCheckpoints.length - 1 &&
56+
Object.keys(checkpointsByYear).indexOf(year) !==
57+
Object.keys(checkpointsByYear).length - 1;
5358

54-
return (
55-
<sc.YearCheckpoints key={checkpoint.index}>
56-
<Grid gridAutoFlow="column" gridAutoColumns="200px 1fr">
57-
<Grid.Item pr="gridGap">
58-
<Paragraph fontSize={1} textAlign="right">
59-
<IconText>
60-
<Icon Asset={icons.SvgCalendar} color="secondary" />{' '}
61-
<span>
62-
{formatters.toDateFormat(checkpoint.createdAt)}
63-
</span>
64-
</IconText>
65-
<br />
66-
{formatters.toTimeFormat(checkpoint.createdAt)}
67-
</Paragraph>
68-
<Paragraph color="primary" textAlign="right">
69-
<Button
70-
variant="ghostSecondary"
71-
iconPosition="right"
72-
onClick={() => downloadOwnershipList(checkpoint)}
73-
>
74-
Ownership list <Icon Asset={icons.SvgDownload} />
75-
</Button>
76-
</Paragraph>
77-
</Grid.Item>
78-
<Grid.Item>
79-
<sc.Dividends>
80-
<sc.ProgressIndicator isLastChild={isLastDividend}>
81-
<sc.StepIcon
82-
Asset={icons.SvgCheckmark}
83-
width={iconSize}
84-
height={iconSize}
85-
scale={0.8}
86-
color="primary"
59+
return (
60+
<sc.YearCheckpoints key={checkpoint.index}>
61+
<Grid gridAutoFlow="column" gridAutoColumns="200px 1fr">
62+
<Grid.Item pr="gridGap">
63+
<Paragraph fontSize={1} textAlign="right">
64+
<IconText>
65+
<Icon
66+
Asset={icons.SvgCalendar}
67+
color="secondary"
68+
/>{' '}
69+
<span>
70+
{formatters.toDateFormat(checkpoint.createdAt)}
71+
</span>
72+
</IconText>
73+
<br />
74+
{formatters.toTimeFormat(checkpoint.createdAt)}
75+
</Paragraph>
76+
<Paragraph color="primary" textAlign="right">
77+
<Button
78+
variant="ghostSecondary"
79+
iconPosition="right"
80+
onClick={() => downloadOwnershipList(checkpoint)}
81+
>
82+
Ownership list <Icon Asset={icons.SvgDownload} />
83+
</Button>
84+
</Paragraph>
85+
</Grid.Item>
86+
<Grid.Item>
87+
<sc.Dividends>
88+
<sc.ProgressIndicator isLastChild={isLastDividend}>
89+
<sc.StepIcon
90+
Asset={icons.SvgCheckmark}
91+
width={iconSize}
92+
height={iconSize}
93+
scale={0.8}
94+
color="primary"
95+
/>
96+
</sc.ProgressIndicator>
97+
<DividendList
98+
allDividendsCompleted={allDividendsCompleted}
99+
checkpointIndex={checkpoint.index}
100+
securityTokenSymbol={securityTokenSymbol}
87101
/>
88-
</sc.ProgressIndicator>
89-
<DividendList
90-
allDividendsCompleted={allDividendsCompleted}
91-
checkpointIndex={checkpoint.index}
92-
securityTokenSymbol={securityTokenSymbol}
93-
/>
94-
</sc.Dividends>
95-
</Grid.Item>
96-
</Grid>
97-
</sc.YearCheckpoints>
98-
);
99-
})}
100-
</List>
101-
</sc.Checkpoints>
102-
);
103-
})}
104-
</sc.Container>
102+
</sc.Dividends>
103+
</Grid.Item>
104+
</Grid>
105+
</sc.YearCheckpoints>
106+
);
107+
})}
108+
</List>
109+
</sc.Checkpoints>
110+
);
111+
})}
112+
</sc.Container>
113+
</Fragment>
105114
);
106115
};

‎packages/new-polymath-issuer/src/pages/DividendDetails/Container.tsx‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -83,15 +83,17 @@ export class ContainerBase extends Component<Props> {
8383
dividendIndex: parseInt(dividendIndex, 10),
8484
}),
8585
]}
86-
render={(data: {
87-
taxWithholdings: types.TaxWithholdingEntity[];
88-
dividends: types.DividendEntity[];
89-
}) => {
86+
render={(
87+
data: {
88+
taxWithholdings: types.TaxWithholdingEntity[];
89+
dividends: types.DividendEntity[];
90+
},
91+
loading
92+
) => {
9093
const {
9194
taxWithholdings,
9295
dividends: [dividend],
9396
} = data;
94-
9597
return (
9698
<Presenter
9799
subdomain={subdomain}
@@ -100,6 +102,7 @@ export class ContainerBase extends Component<Props> {
100102
taxWithholdings={taxWithholdings}
101103
pushDividendPayments={this.pushDividendPayments}
102104
withdrawTaxes={this.withdrawTaxes}
105+
loading={loading}
103106
/>
104107
);
105108
}}

‎packages/new-polymath-issuer/src/pages/DividendDetails/Presenter.tsx‎

Lines changed: 29 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import {
1919
Label,
2020
Link,
2121
Hr,
22+
LoadingDots,
2223
} from '@polymathnetwork/new-ui';
2324
import { utils, types, formatters } from '@polymathnetwork/new-shared';
2425
import _ from 'lodash';
@@ -33,6 +34,7 @@ export interface Props {
3334
pushDividendPayments: () => void;
3435
withdrawTaxes: () => void;
3536
subdomain?: string;
37+
loading?: boolean;
3638
}
3739

3840
enum PaymentStatus {
@@ -47,6 +49,7 @@ export const Presenter = ({
4749
pushDividendPayments,
4850
withdrawTaxes,
4951
subdomain,
52+
loading,
5053
}: Props) => {
5154
const {
5255
investors,
@@ -241,11 +244,15 @@ export const Presenter = ({
241244
/>
242245
)}
243246
<Box ml="m">
244-
<Text color="highlightText" fontSize={6} fontWeight={0}>
245-
{formatters.toPercent(
246-
1 - pendingTransactions / (totalTransactions || 1)
247-
)}
248-
</Text>
247+
{loading ? (
248+
<LoadingDots />
249+
) : (
250+
<Text color="highlightText" fontSize={6} fontWeight={0}>
251+
{formatters.toPercent(
252+
1 - pendingTransactions / (totalTransactions || 1)
253+
)}
254+
</Text>
255+
)}
249256
<Paragraph>Transactions are completed</Paragraph>
250257
</Box>
251258
</Grid>
@@ -297,9 +304,13 @@ export const Presenter = ({
297304
borderWidth="5px"
298305
/>
299306
<Box ml="m">
300-
<Text color="highlightText" fontSize={6} fontWeight={0}>
301-
{formatters.toTokens(unwithdrawnTaxes)} {currency}
302-
</Text>
307+
{loading ? (
308+
<LoadingDots />
309+
) : (
310+
<Text color="highlightText" fontSize={6} fontWeight={0}>
311+
{formatters.toTokens(unwithdrawnTaxes)} {currency}
312+
</Text>
313+
)}
303314
<Paragraph>
304315
Tax withholdings left to withdraw from the dividends smart
305316
contract escrow
@@ -468,10 +479,16 @@ export const Presenter = ({
468479
<Heading variant="h2" mt="l" mb="m">
469480
Transactions
470481
</Heading>
471-
<Table columns={columns} data={transactions}>
472-
<Table.Rows />
473-
<Table.Pagination />
474-
</Table>
482+
{loading ? (
483+
<Box mt="l" mb="m">
484+
<LoadingDots />
485+
</Box>
486+
) : (
487+
<Table columns={columns} data={transactions}>
488+
<Table.Rows />
489+
<Table.Pagination />
490+
</Table>
491+
)}
475492
</div>
476493
);
477494
};

‎packages/new-polymath-ui/src/components/LoadingDots/LoadingDots.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import React from 'react';
2+
3+
import * as sc from './styles';
4+
5+
export const LoadingDots = () => {
6+
return (
7+
<sc.Wrapper>
8+
<span />
9+
<span />
10+
<span />
11+
</sc.Wrapper>
12+
);
13+
};

‎packages/new-polymath-ui/src/components/LoadingDots/docs/LoadingDots.mdx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
---
2+
name: LoadingDots
3+
menu: Components
4+
---
5+
6+
import { Playground, PropsTable } from 'docz';
7+
8+
import { LoadingDots } from '../';
9+
10+
# LoadingDots
11+
12+
<PropsTable of={LoadingDots} />
13+
14+
## Basic usage
15+
16+
<Playground>
17+
<LoadingDots />
18+
</Playground>

‎packages/new-polymath-ui/src/components/LoadingDots/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './LoadingDots';

‎packages/new-polymath-ui/src/components/LoadingDots/styles.ts‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import styled, { keyframes } from 'styled-components';
2+
3+
const bounce = keyframes`
4+
0% {
5+
transform: scale(0);
6+
}
7+
40% {
8+
transform: scale(1);
9+
}
10+
80% {
11+
transform: scale(0);
12+
}
13+
100% {
14+
transform: scale(0);
15+
}
16+
`;
17+
18+
export const Wrapper = styled.div`
19+
width: 30px;
20+
height: 35px;
21+
text-align: center;
22+
23+
span:before {
24+
content: '';
25+
width: 8px;
26+
height: 8px;
27+
background-color: ${({ theme }) => theme.colors.secondary};
28+
border-radius: 100%;
29+
display: inline-block;
30+
animation: ${bounce} 1.4s infinite ease-in-out both;
31+
}
32+
33+
,
34+
span:nth-child(1) {
35+
&:before {
36+
animation-delay: -0.32s;
37+
}
38+
}
39+
40+
span:nth-child(2) {
41+
&:before {
42+
animation-delay: -0.16s;
43+
}
44+
}
45+
`;

0 commit comments

Comments
 (0)