refactor(extension): [LW-10281] dApp connector and activityDetail sam…

…e components (#1085)
input-output-hk · May 21, 2024 · 4af8ee7 · 4af8ee7
1 parent 946d40a
commit 4af8ee7
Show file tree

Hide file tree

Showing 114 changed files with 2,719 additions and 4,630 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 { certificateInspectorFactory, depositPaidWithSymbol, drepIDasBech32FromHash } from './utils';
+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,19 @@ 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: 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 { certificateInspectorFactory, depositPaidWithSymbol, disallowSignTx, drepIDasBech32FromHash } from './utils';
+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: 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 { certificateInspectorFactory, drepIDasBech32FromHash } from './utils';
+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: 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/...tures/dapp/components/confirm-transaction/ConfirmStakeRegistrationDelegationContainer.tsx b/...tures/dapp/components/confirm-transaction/ConfirmStakeRegistrationDelegationContainer.tsx
@@ -1,11 +1,12 @@
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { ConfirmStakeRegistrationDelegation } from '@lace/core';
+import { ConfirmStakeRegistrationDelegation, 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, TransactionSummary } from '@lace/ui';
 
 const { CertificateType, RewardAddress } = Wallet.Cardano;
 
@@ -36,24 +37,22 @@ export const ConfirmStakeRegistrationDelegationContainer = (): React.ReactElemen
     return <Skeleton loading />;
   }
   const depositPaidWithCardanoSymbol = depositPaidWithSymbol(certificate.deposit, cardanoCoin);
+
   return (
-    <ConfirmStakeRegistrationDelegation
-      dappInfo={dappInfo}
-      metadata={{
-        poolId: certificate.poolId,
-        stakeKeyHash: RewardAddress.fromCredentials(currentChain.networkId, certificate.stakeCredential)
-          .toAddress()
-          .toBech32(),
-        depositPaid: depositPaidWithCardanoSymbol
-      }}
-      translations={{
-        metadata: t('core.StakeRegistrationDelegation.metadata'),
-        labels: {
-          poolId: t('core.StakeRegistrationDelegation.poolId'),
-          stakeKeyHash: t('core.StakeRegistrationDelegation.stakeKeyHash'),
-          depositPaid: t('core.StakeRegistrationDelegation.depositPaid')
-        }
-      }}
-    />
+    <Flex h="$fill" flexDirection="column">
+      <Box mb={'$28'} mt={'$32'}>
+        <DappInfo {...dappInfo} />
+      </Box>
+      <TransactionSummary.Metadata label={t('core.StakeRegistrationDelegation.metadata')} text="" />
+      <ConfirmStakeRegistrationDelegation
+        metadata={{
+          poolId: certificate.poolId,
+          stakeKeyHash: RewardAddress.fromCredentials(currentChain.networkId, certificate.stakeCredential)
+            .toAddress()
+            .toBech32(),
+          depositPaid: depositPaidWithCardanoSymbol
+        }}
+      />
+    </Flex>
   );
 };
diff --git a/.../src/features/dapp/components/confirm-transaction/ConfirmStakeVoteDelegationContainer.tsx b/.../src/features/dapp/components/confirm-transaction/ConfirmStakeVoteDelegationContainer.tsx
@@ -1,16 +1,15 @@
 import React, { useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { ConfirmStakeVoteDelegation } from '@lace/core';
-import { certificateInspectorFactory, drepIDasBech32FromHash } from './utils';
+import { ConfirmStakeVoteDelegation, DappInfo } from '@lace/core';
+import { certificateInspectorFactory } from './utils';
 import { Wallet } from '@lace/cardano';
 import { useWalletStore } from '@src/stores';
 import { useViewsFlowContext } from '@providers';
 import { Skeleton } from 'antd';
+import { Box } from '@lace/ui';
 
 const { CertificateType, RewardAddress } = Wallet.Cardano;
 
 export const ConfirmStakeVoteDelegationContainer = (): React.ReactElement => {
-  const { t } = useTranslation();
   const { currentChain } = useWalletStore();
   const {
     signTxRequest: { request },
@@ -36,28 +35,21 @@ export const ConfirmStakeVoteDelegationContainer = (): React.ReactElement => {
   const dRep = certificate.dRep;
 
   return (
-    <ConfirmStakeVoteDelegation
-      dappInfo={dappInfo}
-      metadata={{
-        poolId: certificate.poolId,
-        stakeKeyHash: RewardAddress.fromCredentials(currentChain.networkId, certificate.stakeCredential)
-          .toAddress()
-          .toBech32(),
-        alwaysAbstain: Wallet.Cardano.isDRepAlwaysAbstain(dRep),
-        alwaysNoConfidence: Wallet.Cardano.isDRepAlwaysNoConfidence(dRep),
-        ...(Wallet.Cardano.isDRepCredential(dRep) ? { drepId: drepIDasBech32FromHash(dRep.hash) } : {})
-      }}
-      translations={{
-        metadata: t('core.StakeVoteDelegation.metadata'),
-        option: t('core.StakeVoteDelegation.option'),
-        labels: {
-          poolId: t('core.StakeVoteDelegation.poolId'),
-          stakeKeyHash: t('core.StakeVoteDelegation.stakeKeyHash'),
-          drepId: t('core.StakeVoteDelegation.drepId'),
-          alwaysAbstain: t('core.StakeVoteDelegation.alwaysAbstain'),
-          alwaysNoConfidence: t('core.StakeVoteDelegation.alwaysNoConfidence')
-        }
-      }}
-    />
+    <>
+      <Box mb={'$28'} mt={'$32'}>
+        <DappInfo {...dappInfo} />
+      </Box>
+      <ConfirmStakeVoteDelegation
+        metadata={{
+          poolId: certificate.poolId,
+          stakeKeyHash: RewardAddress.fromCredentials(currentChain.networkId, certificate.stakeCredential)
+            .toAddress()
+            .toBech32(),
+          alwaysAbstain: Wallet.Cardano.isDRepAlwaysAbstain(dRep),
+          alwaysNoConfidence: Wallet.Cardano.isDRepAlwaysNoConfidence(dRep),
+          ...(Wallet.Cardano.isDRepCredential(dRep) ? { drepId: Wallet.util.drepIDasBech32FromHash(dRep.hash) } : {})
+        }}
+      />
+    </>
   );
 };
diff --git a/...s/dapp/components/confirm-transaction/ConfirmStakeVoteRegistrationDelegationContainer.tsx b/...s/dapp/components/confirm-transaction/ConfirmStakeVoteRegistrationDelegationContainer.tsx
@@ -1,11 +1,12 @@
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { ConfirmStakeVoteRegistrationDelegation } from '@lace/core';
-import { certificateInspectorFactory, depositPaidWithSymbol, drepIDasBech32FromHash } from './utils';
+import { ConfirmStakeVoteRegistrationDelegation, 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, TransactionSummary } from '@lace/ui';
 
 const { CertificateType, RewardAddress } = Wallet.Cardano;
 
@@ -41,30 +42,23 @@ export const ConfirmStakeVoteRegistrationDelegationContainer = (): React.ReactEl
   const depositPaidWithCardanoSymbol = depositPaidWithSymbol(certificate.deposit, cardanoCoin);
 
   return (
-    <ConfirmStakeVoteRegistrationDelegation
-      dappInfo={dappInfo}
-      metadata={{
-        poolId: certificate.poolId,
-        stakeKeyHash: RewardAddress.fromCredentials(currentChain.networkId, certificate.stakeCredential)
-          .toAddress()
-          .toBech32(),
-        depositPaid: depositPaidWithCardanoSymbol,
-        alwaysAbstain: Wallet.Cardano.isDRepAlwaysAbstain(dRep),
-        alwaysNoConfidence: Wallet.Cardano.isDRepAlwaysNoConfidence(dRep),
-        ...(Wallet.Cardano.isDRepCredential(dRep) ? { drepId: drepIDasBech32FromHash(dRep.hash) } : {})
-      }}
-      translations={{
-        metadata: t('core.StakeVoteDelegationRegistration.metadata'),
-        option: t('core.StakeVoteDelegationRegistration.option'),
-        labels: {
-          poolId: t('core.StakeVoteDelegationRegistration.poolId'),
-          stakeKeyHash: t('core.StakeVoteDelegationRegistration.stakeKeyHash'),
-          drepId: t('core.StakeVoteDelegationRegistration.drepId'),
-          alwaysAbstain: t('core.StakeVoteDelegationRegistration.alwaysAbstain'),
-          alwaysNoConfidence: t('core.StakeVoteDelegationRegistration.alwaysNoConfidence'),
-          depositPaid: t('core.StakeVoteDelegationRegistration.depositPaid')
-        }
-      }}
-    />
+    <Flex h="$fill" flexDirection="column">
+      <Box mb={'$28'} mt={'$32'}>
+        <DappInfo {...dappInfo} />
+      </Box>
+      <TransactionSummary.Metadata label={t('core.StakeVoteDelegationRegistration.metadata')} text="" />
+      <ConfirmStakeVoteRegistrationDelegation
+        metadata={{
+          poolId: certificate.poolId,
+          stakeKeyHash: RewardAddress.fromCredentials(currentChain.networkId, certificate.stakeCredential)
+            .toAddress()
+            .toBech32(),
+          depositPaid: depositPaidWithCardanoSymbol,
+          alwaysAbstain: Wallet.Cardano.isDRepAlwaysAbstain(dRep),
+          alwaysNoConfidence: Wallet.Cardano.isDRepAlwaysNoConfidence(dRep),
+          ...(Wallet.Cardano.isDRepCredential(dRep) ? { drepId: Wallet.util.drepIDasBech32FromHash(dRep.hash) } : {})
+        }}
+      />
+    </Flex>
   );
 };