refactor(extension): move translations from dapp containers to core c…

…omponents
input-output-hk · Apr 30, 2024 · 6a72208 · 6a72208
1 parent 57dfcf3
commit 6a72208
Show file tree

Hide file tree

Showing 21 changed files with 943 additions and 1,027 deletions.
diff --git a/...n-wallet/src/features/dapp/components/confirm-transaction/ProposalProceduresContainer.tsx b/...n-wallet/src/features/dapp/components/confirm-transaction/ProposalProceduresContainer.tsx
@@ -9,7 +9,8 @@ import { ParameterChangeActionContainer } from './proposal-procedures/ParameterC
 import { TreasuryWithdrawalsActionContainer } from './proposal-procedures/TreasuryWithdrawalsActionContainer';
 import { UpdateCommitteeActionContainer } from './proposal-procedures/UpdateCommitteeActionContainer';
 import { useViewsFlowContext } from '@providers';
-import { SignTxData } from './types';
+import { Box, Flex } from '@lace/ui';
+import { DappInfo } from '@lace/core';
 
 export const ProposalProceduresContainer = (): React.ReactElement => {
   const [proposalProcedures, setProposalProcedures] = useState<Wallet.Cardano.ProposalProcedure[]>([]);
@@ -30,7 +31,6 @@ export const ProposalProceduresContainer = (): React.ReactElement => {
   const containerPerTypeMap: Record<
     Wallet.Cardano.GovernanceActionType,
     (props: {
-      dappInfo: SignTxData['dappInfo'];
       governanceAction: Wallet.Cardano.GovernanceAction;
       deposit: Wallet.Cardano.ProposalProcedure['deposit'];
       rewardAccount: Wallet.Cardano.ProposalProcedure['rewardAccount'];
@@ -55,10 +55,12 @@ export const ProposalProceduresContainer = (): React.ReactElement => {
       {proposalProcedures.map(({ deposit, rewardAccount, anchor, governanceAction }) => {
         const Container = containerPerTypeMap[governanceAction.__typename];
         return (
-          <Container
-            key={`${governanceAction.__typename}_${anchor.dataHash}`}
-            {...{ dappInfo, deposit, rewardAccount, anchor, governanceAction }}
-          />
+          <Flex h="$fill" flexDirection="column" key={`${governanceAction.__typename}_${anchor.dataHash}`}>
+            <Box mb={'$28'} mt={'$16'}>
+              <DappInfo {...dappInfo} />
+            </Box>
+            <Container {...{ deposit, rewardAccount, anchor, governanceAction }} />
+          </Flex>
         );
       })}
     </>

diff --git a/.../components/confirm-transaction/proposal-procedures/HardForkInitiationActionContainer.tsx b/.../components/confirm-transaction/proposal-procedures/HardForkInitiationActionContainer.tsx
@@ -1,69 +1,34 @@
-import React, { useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
+import React from 'react';
 import { Wallet } from '@lace/cardano';
 import { HardForkInitiationAction } from '@lace/core';
 import { useWalletStore } from '@src/stores';
-import { SignTxData } from '../types';
 import { useCexplorerBaseUrl } from '../hooks';
 
 interface Props {
-  dappInfo: SignTxData['dappInfo'];
   governanceAction: Wallet.Cardano.HardForkInitiationAction;
   deposit: Wallet.Cardano.ProposalProcedure['deposit'];
   rewardAccount: Wallet.Cardano.ProposalProcedure['rewardAccount'];
   anchor: Wallet.Cardano.ProposalProcedure['anchor'];
-  errorMessage?: string;
 }
 
 export const HardForkInitiationActionContainer = ({
-  dappInfo,
   governanceAction,
   deposit,
   rewardAccount,
-  anchor,
-  errorMessage
+  anchor
 }: Props): React.ReactElement => {
-  const { t } = useTranslation();
   const {
     walletUI: { cardanoCoin }
   } = useWalletStore();
 
   const explorerBaseUrl = useCexplorerBaseUrl();
 
-  const translations = useMemo<Parameters<typeof HardForkInitiationAction>[0]['translations']>(
-    () => ({
-      txDetails: {
-        title: t('core.ProposalProcedure.txDetails.title'),
-        txType: t('core.ProposalProcedure.txDetails.txType'),
-        deposit: t('core.ProposalProcedure.txDetails.deposit'),
-        rewardAccount: t('core.ProposalProcedure.txDetails.rewardAccount')
-      },
-      procedure: {
-        title: t('core.ProposalProcedure.procedure.title'),
-        anchor: {
-          url: t('core.ProposalProcedure.procedure.anchor.url'),
-          hash: t('core.ProposalProcedure.procedure.anchor.hash')
-        }
-      },
-      protocolVersion: {
-        major: t('core.ProposalProcedure.governanceAction.hardForkInitiation.protocolVersion.major'),
-        minor: t('core.ProposalProcedure.governanceAction.hardForkInitiation.protocolVersion.minor'),
-        patch: t('core.ProposalProcedure.governanceAction.hardForkInitiation.protocolVersion.patch')
-      },
-      actionId: {
-        title: t('core.ProposalProcedure.governanceAction.actionId.title'),
-        index: t('core.ProposalProcedure.governanceAction.actionId.index'),
-        txId: t('core.ProposalProcedure.governanceAction.actionId.txId')
-      }
-    }),
-    [t]
-  );
-
   const { governanceActionId, protocolVersion } = governanceAction;
 
   const data: Parameters<typeof HardForkInitiationAction>[0]['data'] = {
     txDetails: {
-      txType: t('core.ProposalProcedure.governanceAction.hardForkInitiation.title'),
+      // TODO: remove
+      txType: '', // t('core.ProposalProcedure.governanceAction.hardForkInitiation.title'),
       deposit: Wallet.util.getFormattedAmount({
         amount: deposit.toString(),
         cardanoCoin
@@ -89,7 +54,5 @@ export const HardForkInitiationActionContainer = ({
     })
   };
 
-  return (
-    <HardForkInitiationAction dappInfo={dappInfo} errorMessage={errorMessage} data={data} translations={translations} />
-  );
+  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
@@ -1,41 +1,19 @@
-import React, { useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
+import React from 'react';
 import { Wallet } from '@lace/cardano';
 import { InfoAction } from '@lace/core';
-import { SignTxData } from '../types';
 import { useCexplorerBaseUrl } from '../hooks';
 
 interface Props {
-  dappInfo: SignTxData['dappInfo'];
   anchor: Wallet.Cardano.ProposalProcedure['anchor'];
-  errorMessage?: string;
 }
 
-export const InfoActionContainer = ({ dappInfo, anchor, errorMessage }: Props): React.ReactElement => {
-  const { t } = useTranslation();
-
+export const InfoActionContainer = ({ anchor }: Props): React.ReactElement => {
   const explorerBaseUrl = useCexplorerBaseUrl();
 
-  const translations = useMemo<Parameters<typeof InfoAction>[0]['translations']>(
-    () => ({
-      txDetails: {
-        title: t('core.ProposalProcedure.txDetails.title'),
-        txType: t('core.ProposalProcedure.txDetails.txType')
-      },
-      procedure: {
-        title: t('core.ProposalProcedure.procedure.title'),
-        anchor: {
-          url: t('core.ProposalProcedure.procedure.anchor.url'),
-          hash: t('core.ProposalProcedure.procedure.anchor.hash')
-        }
-      }
-    }),
-    [t]
-  );
-
   const data: Parameters<typeof InfoAction>[0]['data'] = {
     txDetails: {
-      txType: t('core.ProposalProcedure.governanceAction.infoAction.title')
+      // remove
+      txType: '' // t('core.ProposalProcedure.governanceAction.infoAction.title')
     },
     procedure: {
       anchor: {
@@ -46,5 +24,5 @@ export const InfoActionContainer = ({ dappInfo, anchor, errorMessage }: Props):
     }
   };
 
-  return <InfoAction dappInfo={dappInfo} errorMessage={errorMessage} data={data} translations={translations} />;
+  return <InfoAction data={data} />;
 };
diff --git a/...app/components/confirm-transaction/proposal-procedures/NewConstitutionActionContainer.tsx b/...app/components/confirm-transaction/proposal-procedures/NewConstitutionActionContainer.tsx
@@ -1,72 +1,34 @@
-import React, { useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
+import React from 'react';
 import { Wallet } from '@lace/cardano';
 import { NewConstitutionAction } from '@lace/core';
 import { useWalletStore } from '@src/stores';
-import { SignTxData } from '../types';
 import { useCexplorerBaseUrl } from '../hooks';
 
 interface Props {
-  dappInfo: SignTxData['dappInfo'];
   governanceAction: Wallet.Cardano.NewConstitution;
   deposit: Wallet.Cardano.ProposalProcedure['deposit'];
   rewardAccount: Wallet.Cardano.ProposalProcedure['rewardAccount'];
   anchor: Wallet.Cardano.ProposalProcedure['anchor'];
-  errorMessage?: string;
 }
 
 export const NewConstitutionActionContainer = ({
-  dappInfo,
   governanceAction,
   deposit,
   rewardAccount,
-  anchor,
-  errorMessage
+  anchor
 }: Props): React.ReactElement => {
-  const { t } = useTranslation();
   const {
     walletUI: { cardanoCoin }
   } = useWalletStore();
 
   const explorerBaseUrl = useCexplorerBaseUrl();
 
-  const translations = useMemo<Parameters<typeof NewConstitutionAction>[0]['translations']>(
-    () => ({
-      txDetails: {
-        title: t('core.ProposalProcedure.txDetails.title'),
-        txType: t('core.ProposalProcedure.txDetails.txType'),
-        deposit: t('core.ProposalProcedure.txDetails.deposit'),
-        rewardAccount: t('core.ProposalProcedure.txDetails.rewardAccount')
-      },
-      procedure: {
-        title: t('core.ProposalProcedure.procedure.title'),
-        anchor: {
-          url: t('core.ProposalProcedure.procedure.anchor.url'),
-          hash: t('core.ProposalProcedure.procedure.anchor.hash')
-        }
-      },
-      constitution: {
-        title: t('core.ProposalProcedure.governanceAction.newConstitutionAction.constitution.title'),
-        anchor: {
-          dataHash: t('core.ProposalProcedure.governanceAction.newConstitutionAction.constitution.anchor.dataHash'),
-          url: t('core.ProposalProcedure.governanceAction.newConstitutionAction.constitution.anchor.url')
-        },
-        scriptHash: t('core.ProposalProcedure.governanceAction.newConstitutionAction.constitution.scriptHash')
-      },
-      actionId: {
-        title: t('core.ProposalProcedure.governanceAction.actionId.title'),
-        index: t('core.ProposalProcedure.governanceAction.actionId.index'),
-        txId: t('core.ProposalProcedure.governanceAction.actionId.txId')
-      }
-    }),
-    [t]
-  );
-
   const { governanceActionId, constitution } = governanceAction;
 
   const data: Parameters<typeof NewConstitutionAction>[0]['data'] = {
     txDetails: {
-      txType: t('core.ProposalProcedure.governanceAction.newConstitutionAction.title'),
+      // TODO: remove!
+      txType: '', // t('core.ProposalProcedure.governanceAction.newConstitutionAction.title'),
       deposit: Wallet.util.getFormattedAmount({
         amount: deposit.toString(),
         cardanoCoin
@@ -95,7 +57,5 @@ export const NewConstitutionActionContainer = ({
     }
   };
 
-  return (
-    <NewConstitutionAction dappInfo={dappInfo} errorMessage={errorMessage} data={data} translations={translations} />
-  );
+  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
@@ -1,64 +1,34 @@
-import React, { useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
+import React from 'react';
 import { Wallet } from '@lace/cardano';
 import { NoConfidenceAction } from '@lace/core';
 import { useWalletStore } from '@src/stores';
-import { SignTxData } from '../types';
 import { useCexplorerBaseUrl } from '../hooks';
 
 interface Props {
-  dappInfo: SignTxData['dappInfo'];
   governanceAction: Wallet.Cardano.NoConfidence;
   deposit: Wallet.Cardano.ProposalProcedure['deposit'];
   rewardAccount: Wallet.Cardano.ProposalProcedure['rewardAccount'];
   anchor: Wallet.Cardano.ProposalProcedure['anchor'];
-  errorMessage?: string;
 }
 
 export const NoConfidenceActionContainer = ({
-  dappInfo,
   governanceAction,
   deposit,
   rewardAccount,
-  anchor,
-  errorMessage
+  anchor
 }: Props): React.ReactElement => {
-  const { t } = useTranslation();
   const {
     walletUI: { cardanoCoin }
   } = useWalletStore();
 
   const explorerBaseUrl = useCexplorerBaseUrl();
 
-  const translations = useMemo<Parameters<typeof NoConfidenceAction>[0]['translations']>(
-    () => ({
-      txDetails: {
-        title: t('core.ProposalProcedure.txDetails.title'),
-        txType: t('core.ProposalProcedure.txDetails.txType'),
-        deposit: t('core.ProposalProcedure.txDetails.deposit'),
-        rewardAccount: t('core.ProposalProcedure.txDetails.rewardAccount')
-      },
-      procedure: {
-        title: t('core.ProposalProcedure.procedure.title'),
-        anchor: {
-          url: t('core.ProposalProcedure.procedure.anchor.url'),
-          hash: t('core.ProposalProcedure.procedure.anchor.hash')
-        }
-      },
-      actionId: {
-        title: t('core.ProposalProcedure.governanceAction.actionId.title'),
-        index: t('core.ProposalProcedure.governanceAction.actionId.index'),
-        txId: t('core.ProposalProcedure.governanceAction.actionId.txId')
-      }
-    }),
-    [t]
-  );
-
   const { governanceActionId } = governanceAction;
 
   const data: Parameters<typeof NoConfidenceAction>[0]['data'] = {
     txDetails: {
-      txType: t('core.ProposalProcedure.governanceAction.noConfidenceAction.title'),
+      // TODO: remove!
+      txType: '', // t('core.ProposalProcedure.governanceAction.noConfidenceAction.title'),
       deposit: Wallet.util.getFormattedAmount({
         amount: deposit.toString(),
         cardanoCoin
@@ -80,5 +50,5 @@ export const NoConfidenceActionContainer = ({
     })
   };
 
-  return <NoConfidenceAction dappInfo={dappInfo} errorMessage={errorMessage} data={data} translations={translations} />;
+  return <NoConfidenceAction data={data} />;
 };