feat: drep update

Author: Lucas Araujo

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

@@ -0,0 +1,40 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { ConfirmDRepUpdate } from '@lace/core';
+import { SignTxData } from './types';
+import { certificateInspectorFactory, drepIDasBech32FromHash } from './utils';
+import { Wallet } from '@lace/cardano';
+
+const { CertificateType } = Wallet.Cardano;
+
+interface Props {
+  signTxData: SignTxData;
+  errorMessage?: string;
+}
+
+export const ConfirmDRepUpdateContainer = ({ signTxData, errorMessage }: Props): React.ReactElement => {
+  const { t } = useTranslation();
+  const certificate = certificateInspectorFactory<Wallet.Cardano.UpdateDelegateRepresentativeCertificate>(
+    CertificateType.UpdateDelegateRepresentative
+  )(signTxData.tx);
+
+  return (
+    <ConfirmDRepUpdate
+      dappInfo={signTxData.dappInfo}
+      metadata={{
+        drepId: drepIDasBech32FromHash(certificate.dRepCredential.hash),
+        hash: certificate.anchor?.dataHash,
+        url: certificate.anchor?.url
+      }}
+      translations={{
+        metadata: t('core.drepUpdate.metadata'),
+        labels: {
+          drepId: t('core.drepUpdate.drepId'),
+          hash: t('core.drepUpdate.hash'),
+          url: t('core.drepUpdate.url')
+        }
+      }}
+      errorMessage={errorMessage}
+    />
+  );
+};

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

@@ -7,6 +7,7 @@ import { SignTxData } from './types';
 import { ConfirmDRepRetirementContainer } from './ConfirmDRepRetirementContainer';
 import { ConfirmVoteDelegationContainer } from './ConfirmVoteDelegationContainer';
 import { VotingProceduresContainer } from './VotingProceduresContainer';
+import { ConfirmDRepUpdateContainer } from './ConfirmDRepUpdateContainer';
 
 interface Props {
   txType?: TxType;
@@ -24,6 +25,9 @@ export const ConfirmTransactionContent = ({ txType, signTxData, errorMessage }:
   if (txType === TxType.DRepRetirement) {
     return <ConfirmDRepRetirementContainer signTxData={signTxData} errorMessage={errorMessage} />;
   }
+  if (txType === TxType.DRepUpdate) {
+    return <ConfirmDRepUpdateContainer signTxData={signTxData} errorMessage={errorMessage} />;
+  }
   if (txType === TxType.VoteDelegation) {
     return <ConfirmVoteDelegationContainer signTxData={signTxData} errorMessage={errorMessage} />;
   }

apps/browser-extension-wallet/src/features/dapp/components/confirm-transaction/utils.ts

@@ -18,6 +18,7 @@ export enum TxType {
   Burn = 'Burn',
   DRepRegistration = 'DRepRegistration',
   DRepRetirement = 'DRepRetirement',
+  DRepUpdate = 'DRepUpdate',
   VoteDelegation = 'VoteDelegation',
   VotingProcedures = 'VotingProcedures'
 }
@@ -31,6 +32,10 @@ export const getTitleKey = (txType: TxType): string => {
     return 'core.drepRetirement.title';
   }
 
+  if (txType === TxType.DRepUpdate) {
+    return 'core.drepUpdate.title';
+  }
+
   if (txType === TxType.VoteDelegation) {
     return 'core.voteDelegation.title';
   }
@@ -101,10 +106,11 @@ export const getTxType = (tx: Wallet.Cardano.Tx): TxType => {
     votingProcedures: votingProceduresInspector,
     dRepRegistration: certificateInspectorFactory(CertificateType.RegisterDelegateRepresentative),
     dRepRetirement: certificateInspectorFactory(CertificateType.UnregisterDelegateRepresentative),
+    dRepUpdate: certificateInspectorFactory(CertificateType.UpdateDelegateRepresentative),
     voteDelegation: certificateInspectorFactory(CertificateType.VoteDelegation)
   });
 
-  const { minted, burned, dRepRegistration, dRepRetirement, voteDelegation, votingProcedures } = inspector(
+  const { minted, burned, dRepRegistration, dRepRetirement, dRepUpdate, voteDelegation, votingProcedures } = inspector(
     tx as Wallet.Cardano.HydratedTx
   );
   const isMintTransaction = minted.length > 0;
@@ -134,6 +140,10 @@ export const getTxType = (tx: Wallet.Cardano.Tx): TxType => {
     return TxType.VoteDelegation;
   }
 
+  if (dRepUpdate) {
+    return TxType.DRepUpdate;
+  }
+
   return TxType.Send;
 };
 

apps/browser-extension-wallet/src/lib/translations/en.json

@@ -1137,6 +1137,13 @@
       "isOwnRetirement": "This is your DRep retirement.",
       "isNotOwnRetirement": "The presented DRepID does not match your wallet's DRepID."
     },
+    "drepUpdate": {
+      "title": "Confirm DRep update",
+      "metadata": "Metadata",
+      "drepId": "Drep ID",
+      "url": "URL",
+      "hash": "Hash"
+    },
     "voteDelegation": {
       "title": "Confirm vote delegation",
       "metadata": "Metadata",

packages/core/src/index.ts

@@ -30,5 +30,6 @@ export * from '@ui/components/MnemonicWordsAutoComplete';
 export * from '@ui/components/AddressCard';
 export * from '@ui/components/ConfirmDRepRegistration';
 export * from '@ui/components/ConfirmDRepRetirement';
+export * from '@ui/components/ConfirmDRepUpdate';
 export * from '@ui/components/ConfirmVoteDelegation';
 export * from '@ui/components/VotingProcedures';

packages/core/src/ui/components/ConfirmDRepUpdate/ConfirmDRepUpdate.stories.ts

@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { ConfirmDRepUpdate } from './ConfirmDRepUpdate';
+import { ComponentProps } from 'react';
+
+const meta: Meta<typeof ConfirmDRepUpdate> = {
+  title: 'ConfirmDRepUpdate',
+  component: ConfirmDRepUpdate,
+  parameters: {
+    layout: 'centered'
+  }
+};
+
+export default meta;
+type Story = StoryObj<typeof ConfirmDRepUpdate>;
+
+const data: ComponentProps<typeof ConfirmDRepUpdate> = {
+  dappInfo: {
+    logo: 'https://cdn.mint.handle.me/favicon.png',
+    name: 'Mint',
+    url: 'https://preprod.mint.handle.me'
+  },
+  translations: {
+    labels: {
+      drepId: 'Drep ID',
+      hash: 'Hash',
+      url: 'URL'
+    },
+    metadata: 'Metadata'
+  },
+  metadata: {
+    drepId: '65ge6g54g5dd5',
+    hash: '9bba8233cdd086f0325daba465d568a88970d42536f9e71e92a80d5922ded885',
+    url: 'https://raw.githubusercontent.com/Ryun1/gov-metadata/main/governace-action/metadata.jsonldr1q99...uqvzlalu'
+  }
+};
+
+export const Overview: Story = {
+  args: {
+    ...data
+  }
+};
+
+export const Empty: Story = {
+  args: {
+    ...data,
+    metadata: {
+      drepId: '65ge6g54g5dd5'
+    }
+  }
+};
+
+export const WithError: Story = {
+  args: {
+    ...data,
+    errorMessage: 'Something went wrong'
+  }
+};

packages/core/src/ui/components/ConfirmDRepUpdate/ConfirmDRepUpdate.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { Box, Cell, Grid, TransactionSummary, Flex } from '@lace/ui';
+import { DappInfo, DappInfoProps } from '../DappInfo';
+import { ErrorPane } from '@lace/common';
+
+interface Props {
+  dappInfo: Omit<DappInfoProps, 'className'>;
+  errorMessage?: string;
+  translations: {
+    labels: {
+      url: string;
+      hash: string;
+      drepId: string;
+    };
+    metadata: string;
+  };
+  metadata: {
+    url?: string;
+    hash?: string;
+    drepId: string;
+  };
+}
+
+export const ConfirmDRepUpdate = ({ dappInfo, errorMessage, translations, metadata }: Props): JSX.Element => (
+  <Flex h="$fill" flexDirection="column">
+    <Box mb={'$28'} mt={'$32'}>
+      <DappInfo {...dappInfo} />
+    </Box>
+    {errorMessage && (
+      <Box my={'$16'}>
+        <ErrorPane error={errorMessage} />
+      </Box>
+    )}
+    <Grid columns="$1" gutters="$20">
+      <Cell>
+        <TransactionSummary.Metadata label={translations.metadata} text="" />
+      </Cell>
+      {metadata.url && (
+        <Cell>
+          <TransactionSummary.Address label={translations.labels.url} address={metadata.url} />
+        </Cell>
+      )}
+      {metadata.hash && (
+        <Cell>
+          <TransactionSummary.Address label={translations.labels.hash} address={metadata.hash} />
+        </Cell>
+      )}
+      <Cell>
+        <TransactionSummary.Address label={translations.labels.drepId} address={metadata.drepId} />
+      </Cell>
+    </Grid>
+  </Flex>
+);

packages/core/src/ui/components/ConfirmDRepUpdate/index.ts

@@ -0,0 +1 @@
+export { ConfirmDRepUpdate } from './ConfirmDRepUpdate';