feat(extension): handle requests from non registered users

apps/browser-extension-wallet/src/features/dapp/components/confirm-transaction/ConfirmTransaction.tsx

@@ -20,6 +20,7 @@ import { UserPromptService } from '@lib/scripts/background/services';
 import { DAPP_CHANNELS } from '@src/utils/constants';
 import { of, take } from 'rxjs';
 import { runtime } from 'webextension-polyfill';
+import { Skeleton } from 'antd';
 
 export const ConfirmTransaction = (): React.ReactElement => {
   const { t } = useTranslation();
@@ -92,7 +93,11 @@ export const ConfirmTransaction = (): React.ReactElement => {
       pageClassname={styles.spaceBetween}
       title={!confirmTransactionError && txType && t(`core.${txType}.title`)}
     >
-      {req && txType && <ConfirmTransactionContent txType={txType} onError={() => setConfirmTransactionError(true)} />}
+      {req && txType ? (
+        <ConfirmTransactionContent txType={txType} onError={() => setConfirmTransactionError(true)} />
+      ) : (
+        <Skeleton loading />
+      )}
       {!confirmTransactionError && (
         <div className={styles.actions}>
           <Button

apps/browser-extension-wallet/src/features/dapp/components/confirm-transaction/NonRegisteredUserModal/NonRegisteredUserModal.module.scss

@@ -0,0 +1,52 @@
+@import '../../../../../../../../packages/common/src/ui/styles/theme.scss';
+@import '../../../../../../../../packages/common/src/ui/styles/abstracts/_typography';
+@import '../../../../../../../../packages/common/src/ui/styles/abstracts/mixins';
+@import '../../../../../styles/rules/modal.scss';
+
+.continueInBrowser {
+  @extend %modal-globals;
+}
+
+.modal {
+  &:global(.ant-modal) {
+    max-width: calc(100vw - #{size_unit(6)}) !important;
+    max-height: calc(100vh - 80px) !important;
+  }
+  :global(.ant-modal-content) {
+    background: var(--color-white, var(--dark-mode-light-black)) !important;
+    border-radius: size_unit(2) !important;
+    box-shadow: var(--shadows-card-pop-up) !important;
+    max-height: calc(100vh - 80px) !important;
+  }
+  :global(.ant-modal-body) {
+    display: flex;
+    flex-direction: column;
+    padding: size_unit(5) !important;
+    max-height: calc(100vh - 80px) !important;
+  }
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: size_unit(3);
+  text-align: center
+}
+
+.title {
+  @include text-subHeading-bold;
+  color: var(--text-color-primary) !important;
+  margin-bottom: 0 !important;
+}
+
+.description {
+  @include text-body-medium;
+  color: var(--text-color-secondary) !important;
+}
+
+.buttons {
+  display: flex;
+  gap: size_unit(2);
+  flex-direction: column;
+  width: 100%;
+}

apps/browser-extension-wallet/src/features/dapp/components/confirm-transaction/NonRegisteredUserModal/NonRegisteredUserModal.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Modal, Typography } from 'antd';
+import { Button } from '@lace/common';
+import styles from './NonRegisteredUserModal.module.scss';
+
+const { Title, Text } = Typography;
+
+interface NonRegisteredUserModalProps {
+  visible: boolean;
+  onConfirm: () => void;
+  onClose: () => void;
+}
+
+export const NonRegisteredUserModal = ({
+  visible,
+  onConfirm,
+  onClose
+}: NonRegisteredUserModalProps): React.ReactElement => {
+  const { t } = useTranslation();
+
+  return (
+    <Modal
+      centered
+      closable={false}
+      // eslint-disable-next-line unicorn/no-null
+      footer={null}
+      open={visible}
+      width="100%"
+      className={styles.modal}
+    >
+      <div data-testid="NonRegisteredUserModal" className={styles.container}>
+        <Title data-testid="NonRegisteredUserModalTitle" level={3} className={styles.title}>
+          {t('core.VotingProcedures.NonRegisteredUserModal.title')}
+        </Title>
+        <Text data-testid="NonRegisteredUserModalDescription" className={styles.description}>
+          {t('core.VotingProcedures.NonRegisteredUserModal.description')}
+        </Text>
+        <div className={styles.buttons}>
+          <Button data-testid="NonRegisteredUserModalConfirm" onClick={onConfirm} block>
+            {t('core.VotingProcedures.NonRegisteredUserModal.cta.ok')}
+          </Button>
+          <Button data-testid="NonRegisteredUserModalCancel" onClick={onClose} color="secondary" block>
+            {t('core.VotingProcedures.NonRegisteredUserModal.cta.cancel')}
+          </Button>
+        </div>
+      </div>
+    </Modal>
+  );
+};

apps/browser-extension-wallet/src/features/dapp/components/confirm-transaction/VotingProceduresContainer.tsx

@@ -1,19 +1,25 @@
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { VotingProcedures } from '@lace/core';
-import { drepIDasBech32FromHash, votingProceduresInspector } from './utils';
-import { useCexplorerBaseUrl } from './hooks';
-import { VoterTypeEnum, getVote, getVoterType } from '@src/utils/tx-inspection';
+import { getDRepId, hasValidDrepRegistration, votingProceduresInspector } from './utils';
+import { useCexplorerBaseUrl, useDisallowSignTx } from './hooks';
+import { getVote, getVoterType } from '@src/utils/tx-inspection';
 import { Wallet } from '@lace/cardano';
+import { NonRegisteredUserModal } from './NonRegisteredUserModal/NonRegisteredUserModal';
 import { useViewsFlowContext } from '@providers';
+import { useWalletStore } from '@src/stores';
 
 export const VotingProceduresContainer = (): React.ReactElement => {
   const { t } = useTranslation();
   const {
     signTxRequest: { request },
     dappInfo
   } = useViewsFlowContext();
+  const { walletState } = useWalletStore();
   const [votingProcedures, setVotingProcedures] = useState<Wallet.Cardano.VotingProcedures>([]);
+  const [isNonRegisteredUserModalVisible, setIsNonRegisteredUserModalVisible] = useState<boolean>(false);
+  const [userAckNonRegisteredState, setUserAckNonRegisteredState] = useState<boolean>(false);
+  const disallowSignTx = useDisallowSignTx(request);
 
   useEffect(() => {
     const getVotingProcedures = async () => {
@@ -24,54 +30,65 @@ export const VotingProceduresContainer = (): React.ReactElement => {
     getVotingProcedures();
   }, [request]);
 
+  useEffect(() => {
+    if (!walletState?.transactions.history || userAckNonRegisteredState) return;
+    setIsNonRegisteredUserModalVisible(!hasValidDrepRegistration(walletState.transactions.history));
+  }, [walletState?.transactions.history, userAckNonRegisteredState]);
+
   const explorerBaseUrl = useCexplorerBaseUrl();
 
   return (
-    <VotingProcedures
-      dappInfo={dappInfo}
-      data={votingProcedures.map((votingProcedure) => {
-        const voterType = getVoterType(votingProcedure.voter.__typename);
+    <>
+      <NonRegisteredUserModal
+        visible={isNonRegisteredUserModalVisible}
+        onConfirm={() => {
+          setUserAckNonRegisteredState(true);
+          setIsNonRegisteredUserModalVisible(false);
+        }}
+        onClose={() => disallowSignTx(true)}
+      />
+      <VotingProcedures
+        dappInfo={dappInfo}
+        data={votingProcedures.map((votingProcedure) => {
+          const voterType = getVoterType(votingProcedure.voter.__typename);
 
-        const drepId =
-          voterType === VoterTypeEnum.DREP
-            ? drepIDasBech32FromHash(votingProcedure.voter.credential.hash)
-            : votingProcedure.voter.credential.hash.toString();
-        return {
-          voter: {
-            type: t(`core.VotingProcedures.voterTypes.${voterType}`),
-            dRepId: drepId
-          },
-          votes: votingProcedure.votes.map((vote) => ({
-            actionId: {
-              index: vote.actionId.actionIndex,
-              txHash: vote.actionId.id.toString(),
-              txHashUrl: `${explorerBaseUrl}/${vote.actionId.id}`
+          return {
+            voter: {
+              type: t(`core.VotingProcedures.voterTypes.${voterType}`),
+              dRepId: getDRepId(votingProcedure.voter)
             },
-            votingProcedure: {
-              vote: t(`core.VotingProcedures.votes.${getVote(vote.votingProcedure.vote)}`),
-              anchor: !!vote.votingProcedure.anchor?.url && {
-                url: vote.votingProcedure.anchor?.url,
-                hash: vote.votingProcedure.anchor?.dataHash.toString()
+            votes: votingProcedure.votes.map((vote) => ({
+              actionId: {
+                index: vote.actionId.actionIndex,
+                txHash: vote.actionId.id.toString(),
+                txHashUrl: `${explorerBaseUrl}/${vote.actionId.id}`
+              },
+              votingProcedure: {
+                vote: t(`core.VotingProcedures.votes.${getVote(vote.votingProcedure.vote)}`),
+                anchor: !!vote.votingProcedure.anchor && {
+                  url: vote.votingProcedure.anchor.url,
+                  hash: vote.votingProcedure.anchor.dataHash.toString()
+                }
               }
-            }
-          }))
-        };
-      })}
-      translations={{
-        voterType: t('core.VotingProcedures.voterType'),
-        procedureTitle: t('core.VotingProcedures.procedureTitle'),
-        actionIdTitle: t('core.VotingProcedures.actionIdTitle'),
-        vote: t('core.VotingProcedures.vote'),
-        actionId: {
-          index: t('core.VotingProcedures.actionId.index'),
-          txHash: t('core.VotingProcedures.actionId.txHash')
-        },
-        anchor: {
-          hash: t('core.VotingProcedures.anchor.hash'),
-          url: t('core.VotingProcedures.anchor.url')
-        },
-        dRepId: t('core.VotingProcedures.dRepId')
-      }}
-    />
+            }))
+          };
+        })}
+        translations={{
+          voterType: t('core.VotingProcedures.voterType'),
+          procedureTitle: t('core.VotingProcedures.procedureTitle'),
+          actionIdTitle: t('core.VotingProcedures.actionIdTitle'),
+          vote: t('core.VotingProcedures.vote'),
+          actionId: {
+            index: t('core.VotingProcedures.actionId.index'),
+            txHash: t('core.VotingProcedures.actionId.txHash')
+          },
+          anchor: {
+            hash: t('core.VotingProcedures.anchor.hash'),
+            url: t('core.VotingProcedures.anchor.url')
+          },
+          dRepId: t('core.VotingProcedures.dRepId')
+        }}
+      />
+    </>
   );
 };