Merge pull request #6 from logion-network/feature/cost-calculator

Cost calculator
logion-network · Dec 19, 2023 · 55771da · 55771da
2 parents f1e71ff + a3606b9
commit 55771da
Show file tree

Hide file tree

Showing 50 changed files with 2,527 additions and 16 deletions.
diff --git a/package.json b/package.json
@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@logion/node-api": "^0.27.0-4",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "^13.2.1",
@@ -16,6 +17,7 @@
     "react-bootstrap": "^2.7.4",
     "react-bootstrap-icons": "^1.10.3",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.20.1",
     "react-scripts": "5.0.1",
     "typescript": "^4.4.2",
     "web-vitals": "^2.1.0"

diff --git a/public/index.html b/public/index.html
@@ -7,7 +7,7 @@
     <meta name="theme-color" content="#000000" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo.png" />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <title>logion | Safe Digital Ownership</title>
+    <title>Logion | Safe Digital Ownership</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/Content.tsx b/src/Content.tsx
@@ -41,12 +41,12 @@ export const CONTENT: ReactNode = (<>
     <Banner
         firstText={<>
             { /* START EDIT */ }
-           Empowering Tokens <br/>on Any Blockchain as <br/><em>Legal-Grade Digital Assets</em>
+           <p>Empowering Tokens <br/>on Any Blockchain as <br/><em>Legal-Grade Digital Assets</em></p>
             { /* STOP EDIT */ }
         </>}
         secondText={<>
             { /* START EDIT */ }
-            Harness the full potential of tokenization with Logion, the groundbreaking blockchain infrastructure that protects the inherent token value.
+            <p>Harness the full potential of tokenization with Logion, the groundbreaking blockchain infrastructure that protects the inherent token value.</p>
             { /* STOP EDIT */ }
         </>}
         thirdText={<>
@@ -71,17 +71,17 @@ export const CONTENT: ReactNode = (<>
         </>}
         firstText={<>
             { /* START EDIT */ }
-            The <em>Proof of Law</em>
+            <p>The <em>Proof of Law</em></p>
             { /* STOP EDIT */ }
         </>}
         secondText={<>
             { /* START EDIT */ }
-            Say goodbye to the disconnection between on-chain tokens and their associated rights and assets.<br/>Logion <em>verifies</em> and <em>binds</em> identities, companies, assets, rights, and obligations with any token on any chain.
+            <p>Say goodbye to the disconnection between on-chain tokens and their associated rights and assets.<br/>Logion <em>verifies</em> and <em>binds</em> identities, companies, assets, rights, and obligations with any token on any chain.</p>
             { /* STOP EDIT */ }
         </>}
         thirdText={<>
             { /* START EDIT */ }
-         Experience the power of tokens as tangible and trustworthy digital assets based on a <em>certified representation</em> of token value.
+            <p>Experience the power of tokens as tangible and trustworthy digital assets based on a <em>certified representation</em> of token value.</p>
             { /* STOP EDIT */ }
         </>}
     />
@@ -220,12 +220,12 @@ export const CONTENT: ReactNode = (<>
      <Banner
         firstText={<>
             { /* START EDIT */ }
-            The Logion Certificate:<br/> Proof of Law <em>materialization</em>
+            <p>The Logion Certificate:<br/> Proof of Law <em>materialization</em></p>
             { /* STOP EDIT */ }
         </>}
         secondText={<>
             { /* START EDIT */ }
-            The online logion zero knowledge proof certificate with restricted delivery of digital assets and files.
+            <p>The online logion zero knowledge proof certificate with restricted delivery of digital assets and files.</p>
             { /* STOP EDIT */ }
         </>}
         thirdText={<>

diff --git a/src/components/App.css b/src/components/App.css
@@ -19,3 +19,9 @@
         --header-height: 252px;
     }
 }
+
+@media print {
+    .App .content {
+        padding-top: 0;
+    }
+}
diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -1,17 +1,25 @@
 import { CookieConsentProvider } from '@use-cookie-consent/react'
 import Header from './Header';
-import { CONTENT, FOOTER_LEGAL, FOOTER_SUMMARY, GA_ID } from '../Content';
+import { FOOTER_LEGAL, FOOTER_SUMMARY, GA_ID } from '../Content';
 import Footer from './Footer';
 import "./App.css";
 import CookieConsent from './CookieConsent';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import CostCalculatorPage from '../pages/CostCalculatorPage';
+import Home from '../pages/HomePage';
 
 export default function App() {
     return (
         <CookieConsentProvider>
             <div className="App">
                 <Header/>
                 <div className="content">
-                    { CONTENT }
+                    <BrowserRouter>
+                        <Routes>
+                            <Route path="/cost-calculator" element={ <CostCalculatorPage /> } />
+                            <Route path="/" element={ <Home /> } />
+                        </Routes>
+                    </BrowserRouter>
                 </div>
                 <Footer
                     summary={ FOOTER_SUMMARY }

diff --git a/src/components/BannerText.tsx b/src/components/BannerText.tsx
@@ -10,9 +10,9 @@ export interface Props {
 export default function BannerText(props: Props) {
     return (
         <div className="BannerText">
-            <p className="first">{ props.firstText }</p>
-            <p className="second">{ props.secondText }</p>
-            <p className="third">{ props.thirdText }</p>
+            <div className="first">{ props.firstText }</div>
+            <div className="second">{ props.secondText }</div>
+            <div className="third">{ props.thirdText }</div>
         </div>
     );
 }
diff --git a/src/components/Center.css b/src/components/Center.css
@@ -0,0 +1,3 @@
+.Center {
+    text-align: center;
+}
diff --git a/src/components/Center.tsx b/src/components/Center.tsx
@@ -0,0 +1,12 @@
+import { ReactNode } from "react"
+import "./Center.css";
+
+export interface Props {
+    children: ReactNode;
+}
+
+export default function Center(props: Props) {
+    return (
+        <div className="Center">{ props.children }</div>
+    )
+}
diff --git a/src/components/Footer.css b/src/components/Footer.css
@@ -38,3 +38,9 @@
 .Footer .legal p:last-child {
     margin-bottom: 0;
 }
+
+@media print {
+    .Footer {
+        display: none;
+    }
+}
diff --git a/src/components/Header.css b/src/components/Header.css
@@ -20,3 +20,9 @@
         align-items: center;
     }
 }
+
+@media print {
+    .Header {
+        display: none;
+    }
+}
diff --git a/src/components/Menu.tsx b/src/components/Menu.tsx
@@ -15,7 +15,7 @@ export interface Props {
 export default function Menu(props: Props) {
     return (
         <div className={`Menu${ props.smaller ? " smaller" : "" }`}>
-            { MENU.map(item => item.external ? <ExternalLink href={ item.link }>{ item.text }</ExternalLink> : <a href={ item.link }>{ item.text }</a>) }
+            { MENU.map((item, index) => item.external ? <ExternalLink key={ index } href={ item.link }>{ item.text }</ExternalLink> : <a href={ item.link }>{ item.text }</a>) }
         </div>
     );
 }
diff --git a/src/components/Team.tsx b/src/components/Team.tsx
@@ -14,7 +14,7 @@ export default function Team(props: Props) {
                 <h2>{ props.title }</h2>
                 <Row md={4} className="g-5">
                     {
-                        props.members.map(member => <Col>{ member }</Col>)
+                        props.members.map((member, index) => <Col key={ index }>{ member }</Col>)
                     }
                 </Row>
             </Container>

diff --git a/src/components/calculator/AddLocButtons.css b/src/components/calculator/AddLocButtons.css
@@ -0,0 +1,7 @@
+.AddLocButtons {
+    margin-top: 30px;
+}
+
+.AddLocButtons .btn-toolbar {
+    justify-content: center;
+}
diff --git a/src/components/calculator/AddLocButtons.tsx b/src/components/calculator/AddLocButtons.tsx
@@ -0,0 +1,44 @@
+import { Button, ButtonGroup, ButtonToolbar } from "react-bootstrap";
+import { useCalculatorContext } from "./CalculatorContext";
+import { useCallback, useState } from "react";
+import { LocType } from "@logion/node-api";
+import { LegalOfficerCaseCost } from "./LegalOfficerCaseCost";
+import "./AddLocButtons.css";
+
+export default function AddLocButtons() {
+    const { addLocCost } = useCalculatorContext();
+    const [ adding, setAdding ] = useState(false);
+
+    const addLoc = useCallback(async (locType: LocType) => {
+        setAdding(true);
+        try {
+            if(locType === "Identity") {
+                await addLocCost(LegalOfficerCaseCost.defaultIdentityLocCost());
+            } else if(locType === "Transaction") {
+                await addLocCost(LegalOfficerCaseCost.defaultTransactionLocCost());
+            } else if(locType === "Collection") {
+                await addLocCost(LegalOfficerCaseCost.defaultCollectionLocCost());
+            } else {
+                throw new Error("");
+            }
+        } finally {
+            setAdding(false);
+        }
+    }, [ addLocCost ]);
+
+    return (
+        <div className="AddLocButtons">
+            <ButtonToolbar>
+                <ButtonGroup className="me-2">
+                    <Button onClick={ () => addLoc("Identity") } disabled={ adding }>Add an ID LOC</Button>
+                </ButtonGroup>
+                <ButtonGroup className="me-2">
+                    <Button onClick={ () => addLoc("Transaction") } disabled={ adding }>Add a Transaction LOC</Button>
+                </ButtonGroup>
+                <ButtonGroup className="me-2">
+                    <Button onClick={ () => addLoc("Collection") } disabled={ adding }>Add a Collection LOC</Button>
+                </ButtonGroup>
+            </ButtonToolbar>
+        </div>
+    );
+}
diff --git a/src/components/calculator/AmountInputGroup.tsx b/src/components/calculator/AmountInputGroup.tsx
@@ -0,0 +1,36 @@
+import { Lgnt } from "@logion/node-api";
+import { useCallback, useMemo } from "react";
+import { InputGroup } from "react-bootstrap";
+import DebounceFormControl from "./DebounceFormControl";
+
+export interface Props {
+    amount?: Lgnt;
+    readOnly?: boolean;
+    onChange?: (value: Lgnt) => void;
+    disabled?: boolean;
+}
+
+export default function AmountInputGroup(props: Props) {
+    const value = useMemo(() => props.amount?.toPrefixedNumber().coefficient.unnormalize() || "0", [ props.amount ]);
+
+    const onChange = useCallback((value: string) => {
+        if(props.onChange) {
+            const nLgnt = Number(value);
+            props.onChange(Lgnt.from(nLgnt));
+        }
+    }, [ props ]);
+
+    return (
+        <InputGroup>
+            <DebounceFormControl
+                value={ value }
+                readOnly={ props.readOnly }
+                disabled={ props.disabled }
+                onChange={ props.onChange ? onChange : undefined }
+                type="number"
+                format
+            />
+            <InputGroup.Text>{ Lgnt.CODE }</InputGroup.Text>
+        </InputGroup>
+    );
+}
diff --git a/src/components/calculator/Calculator.css b/src/components/calculator/Calculator.css
@@ -0,0 +1,19 @@
+.Calculator .top-bar {
+    margin-top: 20px;
+}
+
+.Calculator .accordion-header .loc-description {
+    display: inline-block;
+    width: calc(100% - 150px);
+}
+
+@media print {
+    .Calculator .btn {
+        display: none;
+    }
+
+    .Calculator .accordion-button {
+        font-size: 1.7rem;
+        color: var(--color1-color);
+    }
+}