refactor(extension): dApp containers move translations to core/ui com…

…ponents
input-output-hk · Apr 30, 2024 · 9256e03 · 9256e03
1 parent 6a72208
commit 9256e03
Show file tree

Hide file tree

Showing 19 changed files with 545 additions and 338 deletions.
diff --git a/...let/src/features/dapp/components/confirm-transaction/ConfirmDRepRegistrationContainer.tsx b/...let/src/features/dapp/components/confirm-transaction/ConfirmDRepRegistrationContainer.tsx
@@ -1,16 +1,15 @@
 import React, { useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { ConfirmDRepRegistration } from '@lace/core';
+import { ConfirmDRepRegistration, DappInfo } from '@lace/core';
 import { certificateInspectorFactory, depositPaidWithSymbol } from './utils';
 import { Wallet } from '@lace/cardano';
 import { useWalletStore } from '@src/stores';
 import { useViewsFlowContext } from '@providers';
 import { Skeleton } from 'antd';
+import { Box, Flex } from '@lace/ui';
 
 const { CertificateType } = Wallet.Cardano;
 
 export const ConfirmDRepRegistrationContainer = (): React.ReactElement => {
-  const { t } = useTranslation();
   const {
     walletUI: { cardanoCoin }
   } = useWalletStore();
@@ -37,26 +36,20 @@ export const ConfirmDRepRegistrationContainer = (): React.ReactElement => {
   }
 
   const depositPaidWithCardanoSymbol = depositPaidWithSymbol(certificate.deposit, cardanoCoin);
-
   // TODO: might be changed in scope of https://input-output.atlassian.net/browse/LW-9034
   return (
-    <ConfirmDRepRegistration
-      dappInfo={dappInfo}
-      metadata={{
-        depositPaid: depositPaidWithCardanoSymbol,
-        drepId: Wallet.util.drepIDasBech32FromHash(certificate.dRepCredential.hash),
-        hash: certificate.anchor?.dataHash,
-        url: certificate.anchor?.url
-      }}
-      translations={{
-        metadata: t('core.DRepRegistration.metadata'),
-        labels: {
-          depositPaid: t('core.DRepRegistration.depositPaid'),
-          drepId: t('core.DRepRegistration.drepId'),
-          hash: t('core.DRepRegistration.hash'),
-          url: t('core.DRepRegistration.url')
-        }
-      }}
-    />
+    <Flex h="$fill" flexDirection="column">
+      <Box mb={'$24'} mt={'$24'}>
+        <DappInfo {...dappInfo} />
+      </Box>
+      <ConfirmDRepRegistration
+        metadata={{
+          depositPaid: depositPaidWithCardanoSymbol,
+          drepId: Wallet.util.drepIDasBech32FromHash(certificate.dRepCredential.hash),
+          hash: certificate.anchor?.dataHash,
+          url: certificate.anchor?.url
+        }}
+      />
+    </Flex>
   );
 };
diff --git a/...allet/src/features/dapp/components/confirm-transaction/ConfirmDRepRetirementContainer.tsx b/...allet/src/features/dapp/components/confirm-transaction/ConfirmDRepRetirementContainer.tsx
@@ -1,13 +1,14 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { ConfirmDRepRetirement } from '@lace/core';
+import { ConfirmDRepRetirement, DappInfo } from '@lace/core';
 import { certificateInspectorFactory, depositPaidWithSymbol, disallowSignTx } from './utils';
 import { Wallet } from '@lace/cardano';
 import { useWalletStore } from '@src/stores';
 import { useGetOwnPubDRepKeyHash } from './hooks';
 import { Skeleton } from 'antd';
 import { DappError } from '../DappError';
 import { useViewsFlowContext } from '@providers';
+import { Box, Flex } from '@lace/ui';
 
 const { CertificateType } = Wallet.Cardano;
 
@@ -75,19 +76,16 @@ export const ConfirmDRepRetirementContainer = ({ onError }: Props): React.ReactE
   }
 
   return (
-    <ConfirmDRepRetirement
-      dappInfo={dappInfo}
-      metadata={{
-        depositReturned: depositPaidWithCardanoSymbol,
-        drepId: Wallet.util.drepIDasBech32FromHash(certificate.dRepCredential.hash)
-      }}
-      translations={{
-        metadata: t('core.DRepRetirement.metadata'),
-        labels: {
-          depositReturned: t('core.DRepRetirement.depositReturned'),
-          drepId: t('core.DRepRetirement.drepId')
-        }
-      }}
-    />
+    <Flex h="$fill" flexDirection="column">
+      <Box mb={'$24'} mt={'$24'}>
+        <DappInfo {...dappInfo} />
+      </Box>
+      <ConfirmDRepRetirement
+        metadata={{
+          depositReturned: depositPaidWithCardanoSymbol,
+          drepId: Wallet.util.drepIDasBech32FromHash(certificate.dRepCredential.hash)
+        }}
+      />
+    </Flex>
   );
 };
diff --git a/...on-wallet/src/features/dapp/components/confirm-transaction/ConfirmDRepUpdateContainer.tsx b/...on-wallet/src/features/dapp/components/confirm-transaction/ConfirmDRepUpdateContainer.tsx
@@ -1,15 +1,14 @@
 import React, { useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { ConfirmDRepUpdate } from '@lace/core';
+import { ConfirmDRepUpdate, DappInfo } from '@lace/core';
 import { certificateInspectorFactory } from './utils';
 import { Wallet } from '@lace/cardano';
 import { useViewsFlowContext } from '@providers';
 import { Skeleton } from 'antd';
+import { Box, Flex } from '@lace/ui';
 
 const { CertificateType } = Wallet.Cardano;
 
 export const ConfirmDRepUpdateContainer = (): React.ReactElement => {
-  const { t } = useTranslation();
   const {
     signTxRequest: { request },
     dappInfo
@@ -32,21 +31,17 @@ export const ConfirmDRepUpdateContainer = (): React.ReactElement => {
   }
 
   return (
-    <ConfirmDRepUpdate
-      dappInfo={dappInfo}
-      metadata={{
-        drepId: Wallet.util.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')
-        }
-      }}
-    />
+    <Flex h="$fill" flexDirection="column">
+      <Box mb={'$24'} mt={'$24'}>
+        <DappInfo {...dappInfo} />
+      </Box>
+      <ConfirmDRepUpdate
+        metadata={{
+          drepId: Wallet.util.drepIDasBech32FromHash(certificate.dRepCredential.hash),
+          hash: certificate.anchor?.dataHash,
+          url: certificate.anchor?.url
+        }}
+      />
+    </Flex>
   );
 };
diff --git a/...n-wallet/src/features/dapp/components/confirm-transaction/ProposalProceduresContainer.tsx b/...n-wallet/src/features/dapp/components/confirm-transaction/ProposalProceduresContainer.tsx
@@ -35,7 +35,6 @@ export const ProposalProceduresContainer = (): React.ReactElement => {
       deposit: Wallet.Cardano.ProposalProcedure['deposit'];
       rewardAccount: Wallet.Cardano.ProposalProcedure['rewardAccount'];
       anchor: Wallet.Cardano.ProposalProcedure['anchor'];
-      errorMessage?: string;
     }) => React.ReactElement
   > = useMemo(
     () => ({

diff --git a/.../components/confirm-transaction/proposal-procedures/HardForkInitiationActionContainer.tsx b/.../components/confirm-transaction/proposal-procedures/HardForkInitiationActionContainer.tsx
@@ -23,36 +23,14 @@ export const HardForkInitiationActionContainer = ({
 
   const explorerBaseUrl = useCexplorerBaseUrl();
 
-  const { governanceActionId, protocolVersion } = governanceAction;
-
-  const data: Parameters<typeof HardForkInitiationAction>[0]['data'] = {
-    txDetails: {
-      // TODO: remove
-      txType: '', // t('core.ProposalProcedure.governanceAction.hardForkInitiation.title'),
-      deposit: Wallet.util.getFormattedAmount({
-        amount: deposit.toString(),
-        cardanoCoin
-      }),
-      rewardAccount
-    },
-    procedure: {
-      anchor: {
-        url: anchor.url,
-        hash: anchor.dataHash,
-        txHashUrl: `${explorerBaseUrl}/${anchor.dataHash}`
-      }
-    },
-    protocolVersion: {
-      major: protocolVersion.major.toString(),
-      minor: protocolVersion.minor.toString()
-    },
-    ...(governanceActionId && {
-      actionId: {
-        index: governanceActionId.actionIndex.toString(),
-        id: governanceActionId.id || ''
-      }
-    })
-  };
+  const data = Wallet.util.hardFormInitiationActionDataMap({
+    anchor,
+    cardanoCoin,
+    deposit,
+    explorerBaseUrl,
+    governanceAction,
+    rewardAccount
+  });
 
   return <HardForkInitiationAction data={data} />;
 };
diff --git a/.../features/dapp/components/confirm-transaction/proposal-procedures/InfoActionContainer.tsx b/.../features/dapp/components/confirm-transaction/proposal-procedures/InfoActionContainer.tsx
@@ -10,19 +10,7 @@ interface Props {
 export const InfoActionContainer = ({ anchor }: Props): React.ReactElement => {
   const explorerBaseUrl = useCexplorerBaseUrl();
 
-  const data: Parameters<typeof InfoAction>[0]['data'] = {
-    txDetails: {
-      // remove
-      txType: '' // t('core.ProposalProcedure.governanceAction.infoAction.title')
-    },
-    procedure: {
-      anchor: {
-        url: anchor.url,
-        hash: anchor.dataHash,
-        txHashUrl: `${explorerBaseUrl}/${anchor.dataHash}`
-      }
-    }
-  };
+  const data = Wallet.util.infoActionDataMap({ anchor, explorerBaseUrl });
 
   return <InfoAction data={data} />;
 };
diff --git a/...app/components/confirm-transaction/proposal-procedures/NewConstitutionActionContainer.tsx b/...app/components/confirm-transaction/proposal-procedures/NewConstitutionActionContainer.tsx
@@ -23,39 +23,14 @@ export const NewConstitutionActionContainer = ({
 
   const explorerBaseUrl = useCexplorerBaseUrl();
 
-  const { governanceActionId, constitution } = governanceAction;
-
-  const data: Parameters<typeof NewConstitutionAction>[0]['data'] = {
-    txDetails: {
-      // TODO: remove!
-      txType: '', // t('core.ProposalProcedure.governanceAction.newConstitutionAction.title'),
-      deposit: Wallet.util.getFormattedAmount({
-        amount: deposit.toString(),
-        cardanoCoin
-      }),
-      rewardAccount
-    },
-    procedure: {
-      anchor: {
-        url: anchor.url,
-        hash: anchor.dataHash,
-        txHashUrl: `${explorerBaseUrl}/${anchor.dataHash}`
-      }
-    },
-    ...(governanceActionId && {
-      actionId: {
-        index: governanceActionId.actionIndex.toString(),
-        id: governanceActionId.id || ''
-      }
-    }),
-    constitution: {
-      anchor: {
-        dataHash: constitution.anchor.dataHash.toString(),
-        url: constitution.anchor.url.toString()
-      },
-      ...(constitution.scriptHash && { scriptHash: constitution.scriptHash.toString() })
-    }
-  };
+  const data = Wallet.util.newConstitutionActionDataMap({
+    anchor,
+    cardanoCoin,
+    deposit,
+    explorerBaseUrl,
+    governanceAction,
+    rewardAccount
+  });
 
   return <NewConstitutionAction data={data} />;
 };
diff --git a/...s/dapp/components/confirm-transaction/proposal-procedures/NoConfidenceActionContainer.tsx b/...s/dapp/components/confirm-transaction/proposal-procedures/NoConfidenceActionContainer.tsx
@@ -23,32 +23,14 @@ export const NoConfidenceActionContainer = ({
 
   const explorerBaseUrl = useCexplorerBaseUrl();
 
-  const { governanceActionId } = governanceAction;
-
-  const data: Parameters<typeof NoConfidenceAction>[0]['data'] = {
-    txDetails: {
-      // TODO: remove!
-      txType: '', // t('core.ProposalProcedure.governanceAction.noConfidenceAction.title'),
-      deposit: Wallet.util.getFormattedAmount({
-        amount: deposit.toString(),
-        cardanoCoin
-      }),
-      rewardAccount
-    },
-    procedure: {
-      anchor: {
-        url: anchor.url,
-        hash: anchor.dataHash,
-        txHashUrl: `${explorerBaseUrl}/${anchor.dataHash}`
-      }
-    },
-    ...(governanceActionId && {
-      actionId: {
-        index: governanceActionId.actionIndex.toString(),
-        id: governanceActionId.id || ''
-      }
-    })
-  };
+  const data = Wallet.util.noConfidenceActionDataMap({
+    anchor,
+    cardanoCoin,
+    deposit,
+    explorerBaseUrl,
+    governanceAction,
+    rewardAccount
+  });
 
   return <NoConfidenceAction data={data} />;
 };
diff --git a/...components/confirm-transaction/proposal-procedures/TreasuryWithdrawalsActionContainer.tsx b/...components/confirm-transaction/proposal-procedures/TreasuryWithdrawalsActionContainer.tsx
@@ -24,30 +24,14 @@ export const TreasuryWithdrawalsActionContainer = ({
 
   const explorerBaseUrl = useCexplorerBaseUrl();
 
-  const { withdrawals } = governanceAction;
-
-  const data: Parameters<typeof TreasuryWithdrawalsAction>[0]['data'] = {
-    txDetails: {
-      // TODO: remove!
-      txType: '', // t('core.ProposalProcedure.governanceAction.treasuryWithdrawals.title'),
-      deposit: depositPaidWithSymbol(deposit, cardanoCoin),
-      rewardAccount
-    },
-    procedure: {
-      anchor: {
-        url: anchor.url,
-        hash: anchor.dataHash,
-        txHashUrl: `${explorerBaseUrl}/${anchor.dataHash}`
-      }
-    },
-    withdrawals: [...withdrawals].map((withdrawal) => ({
-      rewardAccount: withdrawal.rewardAccount.toString(),
-      lovelace: Wallet.util.getFormattedAmount({
-        amount: withdrawal.coin.toString(),
-        cardanoCoin
-      })
-    }))
-  };
+  const data = Wallet.util.treasuryWithdrawalsActionDataMap({
+    anchor,
+    cardanoCoin,
+    deposit,
+    explorerBaseUrl,
+    governanceAction,
+    rewardAccount
+  });
 
   return <TreasuryWithdrawalsAction data={data} />;
 };