reorg issuance page

iotaledger · Aug 21, 2024 · c6472d1 · c6472d1
1 parent 083a47f
commit c6472d1
Show file tree

Hide file tree

Showing 8 changed files with 55 additions and 18 deletions.
diff --git a/web/src/components/DIDCard.tsx b/web/src/components/DIDCard.tsx
@@ -17,6 +17,10 @@ const shortenDID = (did: string):string => {
     return [...splitDID, shortMethodSpecificIdentifier].join(':');
 }
 
+const extractDIDMethod = (did: string):string => {
+    const splitDID = did.split(':');
+    return splitDID[1] ?? "";
+}
 
 const DIDCard = ({ did, parsedDID, domains, loading }: { 
     did: string | null, 
@@ -40,15 +44,15 @@ const DIDCard = ({ did, parsedDID, domains, loading }: {
 
     return (
 
-        <Card loading={loading} actions={actions} style={{ minWidth: 300 }}>
+        <Card loading={loading} actions={actions} style={{ minWidth: 300 }} className={ `did-card did-method_${extractDIDMethod(did ?? "")}` }>
             <Card.Meta
                 // avatar={<Avatar src="https://api.dicebear.com/7.x/miniavs/svg?seed=1" />}
                 title={
                     <Popover 
                     content={
                         <pre style={{ maxWidth: 300, wordBreak: "break-all", whiteSpace: "pre-wrap" }}>{did}</pre>
                     }>
-                            {did && shortenDID(did)}
+                            <pre>{did && shortenDID(did)}</pre>
                     </Popover>
                 }
                 description={

diff --git a/web/src/pages/AppPicker.tsx b/web/src/pages/AppPicker.tsx
@@ -4,13 +4,11 @@ import { Button, Flex, Modal } from 'antd';
 import { Layout, RandomGraphicElement } from '../components';
 import { QRCode } from 'antd';
 import useStep from '../utils/useStep';
-import appStore from '../assets/appStore.svg';
-import googlePlay from '../assets/googlePlay.svg';
 import avatar1 from '../assets/avatar1.png';
 import avatar2 from '../assets/avatar2.png';
 import dots from '../assets/backgrounds/dots.png';
 import circle from '../assets/backgrounds/circleFrame6.svg';
-import { useTranslation, Trans } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 import { wallets } from '../wallets';
 import { utilityRoutes } from '../steps';
 import { Actions, useCredentialsDispatch } from '../context/globalState';
@@ -82,9 +80,14 @@ const AppPicker: React.FC = () => {
                                                     </div>
                                                     <p>{wallet.description}</p>
 
-                                                    <div className='wallet-modal__qr'>
-                                                        <QRCode type="svg" bordered={false} errorLevel='H' size={200} value={window.location.origin + generatePath(walletDownloadRoute!.path, { wallet: wallet.name })} />
-                                                    </div>
+                                                    {wallet.storeLinks && 
+                                                        <>
+                                                            <p><b>Scan QR code to download:</b></p> {/* TODO: translate */}
+                                                            <div className='wallet-modal__qr'>
+                                                                <QRCode type="svg" bordered={false} errorLevel='H' size={200} value={window.location.origin + generatePath(walletDownloadRoute!.path, { wallet: wallet.name })} />
+                                                            </div>
+                                                        </>
+                                                    }
                                                 </section>
                                             </Modal>
                                         </div>

diff --git a/web/src/pages/Company/CompanyData.tsx b/web/src/pages/Company/CompanyData.tsx
@@ -75,7 +75,7 @@ const CompanyData: React.FC = () => {
 
         if(!state[Scopes.CompanyHouse]?.credentials.length) {
             message.open({
-                type: 'error',
+                type: 'info',
                 content: 'Please present your national ID credential', //TODO: translate
             });
             return navigate(fallbackRoute!.path.replace(":lng?", i18n.language.toString()));
@@ -134,38 +134,44 @@ const CompanyData: React.FC = () => {
                     <h3 className='section-header'>{t("pages.company.companyData.businessOwner")}</h3>
                     <Space direction="vertical" size="middle" style={{ display: 'flex' }}>
 
+                        <PrefilledForm dataFields={prefilledData} />
+
                         <p>Issued by:</p>
+
                         <DIDCard 
                             loading={!relevantCredential?.issuer || !state.parsedDID[relevantCredential.issuer] || state.parsedDID[relevantCredential.issuer] === "in-flight"} 
                             did={relevantCredential?.issuer ?? null}
                             parsedDID={relevantCredential?.issuer ? state.parsedDID[relevantCredential?.issuer] : null}
                             domains={credentialsDomains}
                         />
 
-                        <PrefilledForm dataFields={prefilledData} />
-
+
                     </Space>
                 </section>
                 <section>
                     <h3 className='section-header'>{t("pages.company.companyData.companyDetails")}</h3>
                     <Space direction="vertical" size="middle" style={{ display: 'flex' }}>
+
+                        <Form dataFields={emptyFields} onSubmit={onSubmit} submitLabel={t("actions.continue")} />
 
                         <p>Will be issued by:</p>
+
                         <DIDCard 
                             loading={!issuerDID || !state.parsedDID[issuerDID] || state.parsedDID[issuerDID] === "in-flight"} 
                             did={issuerDID ?? null}
                             parsedDID={issuerDID ? state.parsedDID[issuerDID] : null}
                             domains={issuerDomains}
-                            />
-                        <p>to</p>
+                        />
+
+                        <p>to:</p>
+
                         <DIDCard 
                             loading={!state.COMPANY_HOUSE?.connectedDID} 
                             did={state.COMPANY_HOUSE?.connectedDID ?? null}
                             parsedDID={null}
                             domains={null}
-                            />
+                        />
 
-                        <Form dataFields={emptyFields} onSubmit={onSubmit} submitLabel={t("actions.continue")} />
                     </Space>
                 </section>
                 {

diff --git a/web/src/pages/Company/ProvideData.tsx b/web/src/pages/Company/ProvideData.tsx
@@ -38,7 +38,7 @@ const ProvideData: React.FC = () => {
 
         if(!state[Scopes.CompanyHouse]?.connectedDID) {
             message.open({
-                type: 'error',
+                type: 'info',
                 content: 'Please reconnect your digital identity', //TODO: translate
             });
             return navigate(fallbackRoute!.path.replace(":lng?", i18n.language.toString()));

diff --git a/web/src/pages/Company/ReceiveCredentials.tsx b/web/src/pages/Company/ReceiveCredentials.tsx
@@ -34,7 +34,7 @@ const ReceiveCredentials: React.FC = () => {
 
         if(!state[Scopes.CompanyHouse]?.connectedDID) {
             message.open({
-                type: 'error',
+                type: 'info',
                 content: 'Please fill out the company data', //TODO: translate
             });
             return navigate(fallbackRoute!.path.replace(":lng?", i18n.language.toString()));

diff --git a/web/src/pages/Government/ReceiveCredentials.tsx b/web/src/pages/Government/ReceiveCredentials.tsx
@@ -34,7 +34,7 @@ const ReceiveCredentials: React.FC = () => {
 
         if(!state[Scopes.Government]?.connectedDID) {
             message.open({
-                type: 'error',
+                type: 'info',
                 content: 'Please reconnect your digital identity', //TODO: translate
             });
             return navigate(fallbackRoute!.path.replace(":lng?", i18n.language.toString()));

diff --git a/web/src/styles/components/did-card.scss b/web/src/styles/components/did-card.scss
@@ -0,0 +1,23 @@
+.did-card {
+
+    overflow: hidden;
+
+    &:after {
+        content: "";
+        display: block;
+        position: absolute;
+        right: -20px;
+        top: -20px;
+        width: 90px;
+        height: 90px;
+        opacity: 0.5;
+        background-repeat: no-repeat;
+        background-position: 50% 0;
+        background-size: contain;
+    }
+    &.did-method_iota {
+        &:after {
+            background-image: url("../../assets/iota.png");
+        }
+    }
+}
diff --git a/web/src/styles/index.scss b/web/src/styles/index.scss
@@ -10,6 +10,7 @@
 @import './components/drawer';
 @import './components/mobileMenu';
 @import './components/dropSelector';
+@import './components/did-card';
 
 // pages
 @import './pages/landing';