Collection parameters - second step

src/loc/CertificateAndDetailsButtons.css

@@ -0,0 +1,61 @@
+.CertificateAndDetailsButtons {
+    margin-top: 30px;
+}
+
+.CertificateAndDetailsButtons .url-copy-paste-container {
+    display: flex;
+}
+
+.CertificateAndDetailsButtons .url-copy-paste-container .url-container {
+    max-width: calc(100% - 20px);
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.CertificateAndDetailsButtons .url-copy-paste-container button {
+    flex-shrink: 0;
+}
+
+.CertificateAndDetailsButtons .CopyPasteButton {
+    margin-left: 10px;
+}
+
+.CertificateAndDetailsButtons .limits {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.CertificateAndDetailsButtons .copy-paste-container {
+    height: 100%;
+    display: flex;
+    align-items: center;
+}
+
+.CertificateAndDetailsButtons .arguments,
+.CertificateAndDetailsButtons .limits {
+    text-align: left;
+}
+
+.CertificateAndDetailsButtons .arguments h3,
+.CertificateAndDetailsButtons .limits h3 {
+    font-size: 1rem;
+}
+
+.CertificateAndDetailsButtons .certificate h2 {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    margin-bottom: 0;
+}
+
+.CertificateAndDetailsButtons .certificate h2 .Button {
+    margin-left: 20px;
+}
+
+.CertificateAndDetailsButtons .buttons-row {
+    margin-top: 20px;
+}

src/loc/CertificateAndLimits.test.tsx → src/loc/CertificateAndDetailsButtons.test.tsx

@@ -3,11 +3,11 @@ import { UUID } from "@logion/node-api";
 import { Viewer } from "src/common/CommonContext";
 
 import { shallowRender } from "src/tests";
-import CertificateAndLimits from "./CertificateAndLimits";
+import CertificateAndDetailsButtons from "./CertificateAndDetailsButtons";
 
 jest.mock("../logion-chain");
 
-describe("CertificateAndLimits", () => {
+describe("CertificateAndDetailsButtons", () => {
 
     it("renders certificate and buttons for non-collection LOC and LO", () => {
         const loc = transactionLocMock();
@@ -55,7 +55,7 @@ function transactionLocMock(): LocData {
 }
 
 function testCertiticateAndLimits(loc: LocData, viewer: Viewer) {
-    const element = shallowRender(<CertificateAndLimits loc={ loc } viewer={ viewer } isReadOnly={ false } />);
+    const element = shallowRender(<CertificateAndDetailsButtons loc={ loc } viewer={ viewer } isReadOnly={ false } />);
     expect(element).toMatchSnapshot();
 }
 

src/loc/CertificateAndLimits.tsx → src/loc/CertificateAndDetailsButtons.tsx

@@ -1,7 +1,6 @@
 import { useEffect, useMemo, useState } from 'react';
 import { Col, Row } from 'react-bootstrap';
 import { LocData } from "@logion/client";
-import { ChainTime } from '@logion/node-api';
 
 import Button from '../common/Button';
 import CopyPasteButton from '../common/CopyPasteButton';
@@ -12,11 +11,10 @@ import { fullCertificateUrl } from '../PublicPaths';
 import NewTabLink from '../common/NewTabLink';
 import StaticLabelValue from '../common/StaticLabelValue';
 
-import './CertificateAndLimits.css';
+import './CertificateAndDetailsButtons.css';
 import StatementOfFactsButton from './statement/StatementOfFactsButton';
 import StatementOfFactsRequestButton from "./statement/StatementOfFactsRequestButton";
 import ArchiveButton from "./archive/ArchiveButton";
-import InlineDateTime from 'src/common/InlineDateTime';
 import { useCommonContext, Viewer } from 'src/common/CommonContext';
 import { isLogionIdentityLoc } from "../common/types/ModelTypes";
 import Nominate from "./issuer/Nominate";
@@ -28,6 +26,7 @@ import { ContributionMode } from './types';
 import ViewQrCodeButton from './ViewQrCodeButton';
 import ViewCertificateButton from './ViewCertificateButton';
 import InvitedContributorsButton from "./invited-contributor/InvitedContributorsButton";
+import { CollectionLimits, DEFAULT_LIMITS } from "./CollectionLimitsForm";
 
 export interface Props {
     loc: LocData;
@@ -36,32 +35,31 @@ export interface Props {
     contributionMode?: ContributionMode;
 }
 
-export default function CertificateAndLimits(props: Props) {
+export default function CertificateAndDetailsButtons(props: Props) {
     const { loc } = props;
     const { api, client } = useLogionChain();
     const { backendConfig } = useCommonContext();
 
-    const [ dateLimit, setDateLimit ] = useState<string>();
+    const [ limits, setLimits ] = useState<CollectionLimits>();
     const [ showSettings, setShowSettings ] = useState(false);
 
     const certificateUrl = fullCertificateUrl(loc.id);
 
     useEffect(() => {
-        if(api !== null && loc.collectionParams && loc.collectionParams?.lastBlockSubmission) {
-            (async function() {
-                const chainTime = await (await ChainTime.now(api.polkadot)).atBlock(loc.collectionParams?.lastBlockSubmission!);
-                setDateLimit(new Date(chainTime.currentTime).toISOString());
-            })();
+        if (api && limits === undefined) {
+            CollectionLimits.fromCollectionParams(api, loc.collectionParams)
+                .then(limits => setLimits(limits || DEFAULT_LIMITS))
         }
-    }, [ api, loc ]);
+    }, [ api, limits, loc.collectionParams ]);
 
     const hasVoteFeature = useMemo(() => {
         return backendConfig(loc.ownerAddress).features.vote;
     }, [ loc, backendConfig ]);
 
+    const { dateLimit, dataNumberLimit } = limits || { ...DEFAULT_LIMITS, dataNumberLimit: "-" };
     return (
         <div
-            className="CertificateAndLimits"
+            className="CertificateAndDetailsButtons"
         >
             <Row>
                 <Col>
@@ -73,16 +71,6 @@ export default function CertificateAndLimits(props: Props) {
                         </h2>
                     </div>
                 </Col>
-                {
-                    loc.locType === 'Collection' && loc.collectionParams &&
-                    <Col>
-                        <div className="limits">
-                            <div><strong>Collection Date Limit:</strong> <InlineDateTime dateTime={ dateLimit } dateOnly={ true } /></div>
-                            <div><strong>Collection Item Limit:</strong> { itemLimit(loc) }</div>
-                            <div><strong>Collection Upload Accepted:</strong> { loc.collectionParams.canUpload ? "Yes" : "No" }</div>
-                        </div>
-                    </Col>
-                }
             </Row>
             <Row>
                 <Col>
@@ -112,7 +100,7 @@ export default function CertificateAndLimits(props: Props) {
             {
                 loc.locType === "Collection" && loc.status === "CLOSED" && !loc.voidInfo &&
                 <Dialog
-                    className="CertificateAndLimits"
+                    className="CertificateAndDetailsButtons"
                     actions={[
                         {
                             id: "close",
@@ -160,8 +148,8 @@ export default function CertificateAndLimits(props: Props) {
                     <div className="limits">
                         <h3>Collection limits</h3>
                         <ul>
-                            <li><strong>Date limit:</strong> { dateLimit }</li>
-                            <li><strong>Item number limit:</strong> { itemLimit(loc) }</li>
+                            <li><strong>Date limit:</strong> { dateLimit?.toISOString() || "-" }</li>
+                            <li><strong>Item number limit:</strong> { dataNumberLimit }</li>
                         </ul>
                     </div>
                 </Dialog>
@@ -170,10 +158,6 @@ export default function CertificateAndLimits(props: Props) {
     );
 }
 
-function itemLimit(loc: LocData): string {
-    return loc.collectionParams?.maxSize ? loc.collectionParams?.maxSize.toString() : "-";
-}
-
 function showInvitedContributors(props: Props): boolean {
     const { loc } = props;
     return loc.locType === 'Collection'

src/loc/CollectionInfo.tsx

@@ -7,13 +7,32 @@ import Detail from "../common/Detail";
 import "./CollectionInfo.css";
 import AmountFormat from "src/common/AmountFormat";
 import LegalFeeAmount from "src/loc/LegalFeeAmount";
+import { CollectionLimits, DEFAULT_LIMITS } from "./CollectionLimitsForm";
+import { useState, useEffect } from "react";
+import { useLogionChain } from "../logion-chain";
+import InlineDateTime from "../common/InlineDateTime";
 
 export interface Props {
     collection: LocData;
 }
 
 export function CollectionInfo(props: Props) {
+    const [ limits, setLimits ] = useState<CollectionLimits>();
     const { valueFee, collectionItemFee, tokensRecordFee } = props.collection.fees;
+    const { api } = useLogionChain();
+
+    useEffect(() => {
+        if (api && limits === undefined) {
+            CollectionLimits.fromCollectionParams(api, props.collection.collectionParams)
+                .then(limits => setLimits(limits || DEFAULT_LIMITS))
+        }
+    }, [ api, limits, props.collection.collectionParams ]);
+
+    if (limits === undefined) {
+        return null;
+    }
+
+    const { dateLimit, dataNumberLimit, canUpload } = limits;
     return (
         <div className="CollectionInfo">
             <p className="title">Collection parameters</p>
@@ -25,9 +44,12 @@ export function CollectionInfo(props: Props) {
                         <AmountFormat amount={ collectionItemFee ? collectionItemFee : Lgnt.zero() }/> { Lgnt.CODE }</span> } />
                     <Detail label="Tokens record fee" value={ <span>
                         <AmountFormat amount={ tokensRecordFee ? tokensRecordFee : Lgnt.zero() }/> { Lgnt.CODE }</span> } />
+                    <Detail label="Legal fee" value={ <LegalFeeAmount loc={ props.collection } />} />
                 </Col>
                 <Col>
-                    <Detail label="Legal fee" value={ <LegalFeeAmount loc={ props.collection } />} />
+                    <Detail label="Collection Date Limit" value={ <InlineDateTime dateTime={ dateLimit?.toISOString() } dateOnly={ true } />} />
+                    <Detail label="Collection Item Limit" value={ dataNumberLimit } />
+                    <Detail label="Collection Upload Accepted" value={ canUpload ? "Yes" : "No" } />
                 </Col>
             </Row>
         </div>