improve QR code handling and wallet select

iotaledger · Sep 6, 2024 · a01374d · a01374d
1 parent c6472d1
commit a01374d
Show file tree

Hide file tree

Showing 8 changed files with 48 additions and 17 deletions.
diff --git a/web/src/components/QRCode.tsx b/web/src/components/QRCode.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { App, Input, QRCode } from 'antd';
 import { CopyOutlined, SendOutlined } from '@ant-design/icons';
 
-const QRCodeComponent = ({ text, size }: { text: string; size?: number; }) => {
+const QRCodeComponent = ({ text, size }: { text?: string; size?: number; }) => {
 
     const { message } = App.useApp();
 
@@ -46,7 +46,7 @@ const QRCodeComponent = ({ text, size }: { text: string; size?: number; }) => {
                 )}
             </div>
             <div className='qr-code__link'>
-                <Input addonBefore={<CopyOutlined onClick={() => copyToClipbloard(text)} />} value={text} onChange={() => undefined} addonAfter={<SendOutlined onClick={() => gotoLink(text)} />} />
+                <Input addonBefore={<CopyOutlined onClick={() => copyToClipbloard(text ?? "")} />} value={text} onChange={() => undefined} addonAfter={<SendOutlined onClick={() => gotoLink(text ?? "")} />} />
             </div>
         </>
     )

diff --git a/web/src/context/globalState.tsx b/web/src/context/globalState.tsx
@@ -14,6 +14,7 @@ export enum Actions {
     REQUEST_ISSUANCE,
     CONNECT_DID,
     SET_QR_CONTENT,
+    RESET_QR_CONTENT,
     COMPLETE_ISSUANCE,
     REQUEST_DOMAIN_LINKAGE_VALIDATION,
     SET_DOMAIN_LINKAGE_VALIDATION,
@@ -86,6 +87,10 @@ interface SetQRContentAction extends ScopedReducerAction {
     QRContent: string,
 }
 
+interface ResetQRContentAction extends ScopedReducerAction {
+    type: Actions.RESET_QR_CONTENT,
+}
+
 interface SetCompleteIssuanceAction extends ScopedReducerAction {
     type: Actions.COMPLETE_ISSUANCE,
 }
@@ -141,7 +146,21 @@ export type State = {
     }
 };
 
-type ReducerAction = AddCredentialAction | ConnectDIDAction | RequestInviteAction | RequestInviteAction | RequestIssuanceAction | RequestPresentationAction | SetQRContentAction | SetCompleteIssuanceAction | SetIssuanceDataAction | RequestDomainLinkageValidationAction | SetDomainLinkageValidationAction | ResetStateAction | RequestParsedDIDAction | SetParsedDIDAction;
+type ReducerAction = AddCredentialAction |
+    ConnectDIDAction |
+    RequestInviteAction | 
+    RequestInviteAction |
+    RequestIssuanceAction |
+    RequestPresentationAction |
+    SetQRContentAction |
+    ResetQRContentAction |
+    SetCompleteIssuanceAction |
+    SetIssuanceDataAction |
+    RequestDomainLinkageValidationAction |
+    SetDomainLinkageValidationAction |
+    ResetStateAction |
+    RequestParsedDIDAction |
+    SetParsedDIDAction;
 
 const socket = SocketIOClient("/", {
     autoConnect: true,
@@ -370,6 +389,15 @@ export function GlobalStateProvider({ children }: any) {
                 };
             }
 
+            case Actions.RESET_QR_CONTENT: {
+                return {
+                    ...state, [action.scope]: {
+                        ...state[action.scope],
+                        QRcontent: undefined
+                    }
+                };
+            }
+
             case Actions.SET_ISSUANCE_DATA: {
                 return {
                     ...state, [action.scope]: {

diff --git a/web/src/pages/Company/ProveIdentity.tsx b/web/src/pages/Company/ProveIdentity.tsx
@@ -25,6 +25,7 @@ const ProveIdentity: React.FC = () => {
     }, [nextStep, navigate]);
 
     useEffect(() => {
+        dispatch?.({type: Actions.RESET_QR_CONTENT, scope: Scopes.CompanyHouse});
         dispatch?.({type: Actions.REQUEST_INVITE, provider: Providers.Impierce, scope: Scopes.CompanyHouse});
     }, [dispatch]);
 
@@ -54,8 +55,7 @@ const ProveIdentity: React.FC = () => {
                         <Trans i18nKey="pages.company.signIn.subtitle" />
                     </p>
                     <div className='qr-wrapper'>
-                        {/* TODO: Handle loading state */}
-                        <QRCode text={state[Scopes.CompanyHouse]?.QRcontent ?? ""} />
+                        <QRCode text={state[Scopes.CompanyHouse]?.QRcontent} />
                     </div>
                     <p className='bold'>{t(status)}</p>
                     {loading && <Loading />}

diff --git a/web/src/pages/Company/ProvideData.tsx b/web/src/pages/Company/ProvideData.tsx
@@ -44,6 +44,8 @@ const ProvideData: React.FC = () => {
             return navigate(fallbackRoute!.path.replace(":lng?", i18n.language.toString()));
         }
 
+        dispatch?.({type: Actions.RESET_QR_CONTENT, scope: Scopes.CompanyHouse});
+
         dispatch?.({
             type: Actions.REQUEST_PRESENTATION,
             provider: Providers.Impierce,
@@ -83,8 +85,7 @@ const ProvideData: React.FC = () => {
                         <Trans i18nKey="pages.company.provideData.subTitle" />
                     </p>
                     <div className='qr-wrapper'>
-                        {/* TODO: Handle loading state */}
-                        <QRCode text={state[Scopes.CompanyHouse]?.QRcontent ?? ""} />
+                        <QRCode text={state[Scopes.CompanyHouse]?.QRcontent} />
                     </div>
                     <p className='bold'>{t(status)}</p>
                     {loading && <Loading />}

diff --git a/web/src/pages/Company/ReceiveCredentials.tsx b/web/src/pages/Company/ReceiveCredentials.tsx
@@ -40,6 +40,8 @@ const ReceiveCredentials: React.FC = () => {
             return navigate(fallbackRoute!.path.replace(":lng?", i18n.language.toString()));
         }
 
+        dispatch?.({type: Actions.RESET_QR_CONTENT, scope: Scopes.CompanyHouse});
+
         dispatch?.({
             type: Actions.REQUEST_ISSUANCE,
             provider: Providers.Impierce,
@@ -75,8 +77,7 @@ const ReceiveCredentials: React.FC = () => {
                         <Trans i18nKey="pages.company.receiveCredentials.subTitle" />
                     </p>
                     <div className='qr-wrapper'>
-                        {/* TODO: Handle loading state */}
-                        <QRCode text={state[Issuers.CompanyHouse]?.QRcontent ?? ""} />
+                        <QRCode text={state[Issuers.CompanyHouse]?.QRcontent} />
                     </div>
                     <p className='bold'>{t(status)}</p>
                     {loading && <Loading />}

diff --git a/web/src/pages/Government/ProveIdentity.tsx b/web/src/pages/Government/ProveIdentity.tsx
@@ -22,6 +22,7 @@ const ProveIdentity: React.FC = () => {
     }, [nextStep, navigate]);
 
     useEffect(() => {
+        dispatch?.({type: Actions.RESET_QR_CONTENT, scope: Scopes.Government});
         dispatch?.({type: Actions.REQUEST_INVITE, provider: Providers.TangleLabs, scope: Scopes.Government});
     }, [dispatch]);
 
@@ -51,8 +52,7 @@ const ProveIdentity: React.FC = () => {
                         <Trans i18nKey="pages.government.signIn.subtitle" />
                     </p>
                     <div className='qr-wrapper'>
-                        {/* TODO: Handle loading state */}
-                        <QRCode text={state[Scopes.Government]?.QRcontent ?? ""} />
+                        <QRCode text={state[Scopes.Government]?.QRcontent} />
                     </div>
                     <p className='bold'>{t(status)}</p>
                     {loading && <Loading />}

diff --git a/web/src/pages/Government/ReceiveCredentials.tsx b/web/src/pages/Government/ReceiveCredentials.tsx
@@ -40,6 +40,8 @@ const ReceiveCredentials: React.FC = () => {
             return navigate(fallbackRoute!.path.replace(":lng?", i18n.language.toString()));
         }
 
+        dispatch?.({type: Actions.RESET_QR_CONTENT, scope: Scopes.Government});
+
         dispatch?.({
             type: Actions.REQUEST_ISSUANCE,
             provider: Providers.TangleLabs, 
@@ -75,8 +77,7 @@ const ReceiveCredentials: React.FC = () => {
                         <Trans i18nKey="pages.government.receiveCredentials.subTitle" />
                     </p>
                     <div className='qr-wrapper'>
-                        {/* TODO: Handle loading state */}
-                        <QRCode text={state[Issuers.Government]?.QRcontent ?? ""} />
+                        <QRCode text={state[Issuers.Government]?.QRcontent} />
                     </div>
                     <p className='bold'>{t(status)}</p>
                     {loading && <Loading />}

diff --git a/web/src/styles/pages/appPicker.scss b/web/src/styles/pages/appPicker.scss
@@ -113,8 +113,8 @@
   }
 
   .circle {
-    position: absolute;
-    bottom: -250px;
+    position: fixed;
+    bottom: -400px;
     z-index: 0;
     width: 800px;
 
@@ -146,8 +146,8 @@
         background-color: #ffffff;
         padding: 15px 0 15px 15px;
         border-radius: 5px;
-        border: 1px solid rgba(0, 0, 0, 0.2);
-        box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.15);
+        border: 1px solid rgba(0, 0, 0, 0.1);
+        box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.09);
       }
 
       &__column {