feat: add new circular progress component and add to transaction

kibis-is · Jul 17, 2024 · 6798443 · 6798443
1 parent 5fce108
commit 6798443
Show file tree

Hide file tree

Showing 18 changed files with 151 additions and 63 deletions.
diff --git a/src/extension/components/CircularProgressWithIcon/CircularProgressWithIcon.tsx b/src/extension/components/CircularProgressWithIcon/CircularProgressWithIcon.tsx
@@ -0,0 +1,57 @@
+import {
+  CircularProgress,
+  CircularProgressLabel,
+  Icon,
+} from '@chakra-ui/react';
+import React, { FC } from 'react';
+
+// hooks
+import usePrimaryColor from '@extension/hooks/usePrimaryColor';
+import useSubTextColor from '@extension/hooks/useSubTextColor';
+
+// types
+import type { IProps } from './types';
+
+// utils
+import calculateIconSize from '@extension/utils/calculateIconSize';
+
+const CircularProgressWithIcon: FC<IProps> = ({
+  icon,
+  iconColor,
+  progress,
+  progressColor,
+}) => {
+  // hooks
+  const primaryColor = usePrimaryColor();
+  const subTextColor = useSubTextColor();
+  // misc
+  const iconSize = calculateIconSize('lg');
+
+  return (
+    <CircularProgress
+      color={progressColor || primaryColor}
+      isIndeterminate={!progress}
+      size="100px"
+      thickness="4px"
+      trackColor={subTextColor}
+      {...(progress && {
+        value: progress[1] > 0 ? (progress[0] / progress[1]) * 100 : 0,
+      })}
+    >
+      <CircularProgressLabel
+        alignItems="center"
+        display="flex"
+        justifyContent="center"
+      >
+        <Icon
+          as={icon}
+          color={iconColor || subTextColor}
+          h={iconSize}
+          w={iconSize}
+        />
+      </CircularProgressLabel>
+    </CircularProgress>
+  );
+};
+
+export default CircularProgressWithIcon;
diff --git a/src/extension/components/CircularProgressWithIcon/index.ts b/src/extension/components/CircularProgressWithIcon/index.ts
@@ -0,0 +1,2 @@
+export { default } from './CircularProgressWithIcon';
+export * from './types';
diff --git a/src/extension/components/CircularProgressWithIcon/types/IProps.ts b/src/extension/components/CircularProgressWithIcon/types/IProps.ts
@@ -0,0 +1,17 @@
+import { IconType } from 'react-icons';
+
+/**
+ * @property {IconType} icon - the icon to use in the centre.
+ * @property {string} iconColor - [optional] the color of the icon. Defaults to the default text color.
+ * @property {[number, number]} progress - [optional] a tuple where the first value is the count and the second value
+ * is the total. If this value is omitted, the progress will be indeterminate.
+ * @property {string} progressColor - [optional] the color of the progress bar. Defaults to the primary color.
+ */
+interface IProps {
+  icon: IconType;
+  iconColor?: string;
+  progress?: [number, number];
+  progressColor?: string;
+}
+
+export default IProps;
diff --git a/src/extension/components/CircularProgressWithIcon/types/index.ts b/src/extension/components/CircularProgressWithIcon/types/index.ts
@@ -0,0 +1,2 @@
+export type { default as IEncryptionState } from './IEncryptionState';
+export type { default as IProps } from './IProps';
diff --git a/src/extension/components/ReEncryptKeysLoadingContent/ReEncryptKeysLoadingContent.tsx b/src/extension/components/ReEncryptKeysLoadingContent/ReEncryptKeysLoadingContent.tsx
@@ -1,43 +1,36 @@
-import {
-  CircularProgress,
-  CircularProgressLabel,
-  Icon,
-  Text,
-  VStack,
-} from '@chakra-ui/react';
+import { Text, VStack } from '@chakra-ui/react';
 import React, { FC } from 'react';
 import { useTranslation } from 'react-i18next';
 import { IoLockClosedOutline, IoLockOpenOutline } from 'react-icons/io5';
 
+// components
+import CircularProgressWithIcon from '@extension/components/CircularProgressWithIcon';
+
 // constants
 import { DEFAULT_GAP } from '@extension/constants';
 
 // hooks
+import useDefaultTextColor from '@extension/hooks/useDefaultTextColor';
 import useSubTextColor from '@extension/hooks/useSubTextColor';
 
 // types
 import type { IProps } from './types';
 
-// utils
-import calculateIconSize from '@extension/utils/calculateIconSize';
-
 const ReEncryptKeysLoadingContent: FC<IProps> = ({
   encryptionProgressState,
   fontSize = 'sm',
 }) => {
   const { t } = useTranslation();
   // hooks
+  const defaultTextColor = useDefaultTextColor();
   const subTextColor = useSubTextColor();
   // misc
   const count = encryptionProgressState.filter(
     ({ encrypted }) => encrypted
   ).length;
-  const iconSize = calculateIconSize('lg');
   const total = encryptionProgressState.length;
   const incomplete = count < total || total <= 0;
 
-  console.log('encryptionProgressState:', encryptionProgressState);
-
   return (
     <VStack
       alignItems="center"
@@ -47,22 +40,12 @@ const ReEncryptKeysLoadingContent: FC<IProps> = ({
       w="full"
     >
       {/*progress*/}
-      <CircularProgress
-        color="green.600"
-        size="100px"
-        thickness="4px"
-        trackColor="gray.600"
-        value={total > 0 ? (count / total) * 100 : 0}
-      >
-        <CircularProgressLabel>
-          <Icon
-            as={incomplete ? IoLockOpenOutline : IoLockClosedOutline}
-            color={incomplete ? 'gray.600' : 'green.600'}
-            h={iconSize}
-            w={iconSize}
-          />
-        </CircularProgressLabel>
-      </CircularProgress>
+      <CircularProgressWithIcon
+        icon={incomplete ? IoLockOpenOutline : IoLockClosedOutline}
+        iconColor={incomplete ? defaultTextColor : 'green.600'}
+        progress={[count, total]}
+        progressColor="green.600"
+      />
 
       {/*caption*/}
       <Text

diff --git a/src/extension/modals/SendAssetModal/SendAssetModal.tsx b/src/extension/modals/SendAssetModal/SendAssetModal.tsx
@@ -246,10 +246,6 @@ const SendAssetModal: FC<IModalProps> = ({ onClose }) => {
           ...result,
         })
       ).unwrap();
-      toAccount =
-        accounts.find(
-          (value) => convertPublicKeyToAVMAddress(value.publicKey) === toAddress
-        ) || null;
 
       logger.debug(
         `${
@@ -259,6 +255,10 @@ const SendAssetModal: FC<IModalProps> = ({ onClose }) => {
           .join(',')}] to the network`
       );
 
+      toAccount =
+        accounts.find(
+          (value) => convertPublicKeyToAVMAddress(value.publicKey) === toAddress
+        ) || null;
       fromAddress = convertPublicKeyToAVMAddress(fromAccount.publicKey);
       questsService = new QuestsService({
         logger,
@@ -383,14 +383,18 @@ const SendAssetModal: FC<IModalProps> = ({ onClose }) => {
   };
   // renders
   const renderContent = () => {
-    if (confirming) {
-      return <SendAssetModalConfirmingContent />;
-    }
-
     if (!fromAccount || !network || !selectedAsset) {
       return <SendAssetModalContentSkeleton />;
     }
 
+    if (confirming) {
+      return (
+        <SendAssetModalConfirmingContent
+          numberOfTransactions={transactions?.length}
+        />
+      );
+    }
+
     if (transactions && transactions.length > 0) {
       return (
         <SendAssetModalSummaryContent

diff --git a/src/extension/modals/SendAssetModal/SendAssetModalConfirmingContent.tsx b/src/extension/modals/SendAssetModal/SendAssetModalConfirmingContent.tsx
@@ -1,38 +1,45 @@
-import { Spinner, Text, VStack } from '@chakra-ui/react';
+import { Text, VStack } from '@chakra-ui/react';
 import React, { FC } from 'react';
 import { useTranslation } from 'react-i18next';
+import { IoSwapVerticalOutline } from 'react-icons/io5';
+
+// components
+import CircularProgressWithIcon from '@extension/components/CircularProgressWithIcon';
 
 // constants
 import { DEFAULT_GAP } from '@extension/constants';
 
 // hooks
 import useDefaultTextColor from '@extension/hooks/useDefaultTextColor';
-import usePrimaryColor from '@extension/hooks/usePrimaryColor';
 
-const SendAssetModalConfirmingContent: FC = () => {
+// types
+import type { ISendAssetModalConfirmingContentProps } from './types';
+
+const SendAssetModalConfirmingContent: FC<
+  ISendAssetModalConfirmingContentProps
+> = ({ numberOfTransactions }) => {
   const { t } = useTranslation();
   // hooks
-  const defaultTextColor: string = useDefaultTextColor();
-  const primaryColor: string = usePrimaryColor();
+  const defaultTextColor = useDefaultTextColor();
 
   return (
     <VStack
       alignItems="center"
       flexGrow={1}
       justifyContent="center"
-      spacing={DEFAULT_GAP / 2}
+      spacing={DEFAULT_GAP - 2}
       w="full"
     >
-      <Spinner
-        color={primaryColor}
-        emptyColor={defaultTextColor}
-        size="xl"
-        speed="0.65s"
-        thickness="4px"
-      />
+      {/*progress*/}
+      <CircularProgressWithIcon icon={IoSwapVerticalOutline} />
 
+      {/*captions*/}
       <Text color={defaultTextColor} fontSize="md" textAlign="center" w="full">
-        {t<string>('captions.confirmingTransaction')}
+        {numberOfTransactions
+          ? t<string>('captions.confirmingTransactionWithAmountWithAmount', {
+              number: numberOfTransactions,
+            })
+          : t<string>('captions.confirmingTransactionWithAmount')}
       </Text>
     </VStack>
   );

diff --git a/src/extension/modals/SendAssetModal/SendAssetModalSummaryContent.tsx b/src/extension/modals/SendAssetModal/SendAssetModalSummaryContent.tsx
@@ -25,7 +25,7 @@ import useMinimumBalanceRequirementsForTransactions from '@extension/hooks/useMi
 import useSubTextColor from '@extension/hooks/useSubTextColor';
 
 // types
-import type { SendAssetModalSummaryContentProps } from './types';
+import type { ISendAssetModalSummaryContentProps } from './types';
 
 // utils
 import convertToAtomicUnit from '@common/utils/convertToAtomicUnit';
@@ -34,7 +34,7 @@ import formatCurrencyUnit from '@common/utils/formatCurrencyUnit';
 import convertPublicKeyToAVMAddress from '@extension/utils/convertPublicKeyToAVMAddress';
 import createIconFromDataUri from '@extension/utils/createIconFromDataUri';
 
-const SendAssetModalSummaryContent: FC<SendAssetModalSummaryContentProps> = ({
+const SendAssetModalSummaryContent: FC<ISendAssetModalSummaryContentProps> = ({
   accounts,
   amountInStandardUnits,
   asset,

diff --git a/src/extension/modals/SendAssetModal/types/ISendAssetModalConfirmingContentProps.ts b/src/extension/modals/SendAssetModal/types/ISendAssetModalConfirmingContentProps.ts
@@ -0,0 +1,5 @@
+interface ISendAssetModalConfirmingContentProps {
+  numberOfTransactions?: number;
+}
+
+export default ISendAssetModalConfirmingContentProps;
diff --git a/...ypes/SendAssetModalSummaryContentProps.ts → ...pes/ISendAssetModalSummaryContentProps.ts b/...ypes/SendAssetModalSummaryContentProps.ts → ...pes/ISendAssetModalSummaryContentProps.ts
@@ -8,7 +8,7 @@ import {
   INetworkWithTransactionParams,
 } from '@extension/types';
 
-interface SendAssetModalSummaryContentProps {
+interface ISendAssetModalSummaryContentProps {
   accounts: IAccountWithExtendedProps[];
   amountInStandardUnits: string;
   asset: IAssetTypes | INativeCurrency;
@@ -19,4 +19,4 @@ interface SendAssetModalSummaryContentProps {
   transactions: Transaction[];
 }
 
-export default SendAssetModalSummaryContentProps;
+export default ISendAssetModalSummaryContentProps;
diff --git a/src/extension/modals/SendAssetModal/types/index.ts b/src/extension/modals/SendAssetModal/types/index.ts
@@ -1 +1,2 @@
-export type { default as SendAssetModalSummaryContentProps } from './SendAssetModalSummaryContentProps';
+export type { default as ISendAssetModalConfirmingContentProps } from './ISendAssetModalConfirmingContentProps';
+export type { default as ISendAssetModalSummaryContentProps } from './ISendAssetModalSummaryContentProps';
diff --git a/src/extension/modals/SignTransactionsModal/SingleTransactionContent.tsx b/src/extension/modals/SignTransactionsModal/SingleTransactionContent.tsx
@@ -22,7 +22,6 @@ import {
   useSelectNetworkByGenesisHash,
   useSelectSettingsPreferredBlockExplorer,
   useSelectStandardAssetsByGenesisHash,
-  useSelectStandardAssetsUpdating,
 } from '@extension/selectors';
 
 // services
@@ -52,7 +51,6 @@ const SingleTransactionContent: FC<ISingleTransactionContentProps> = ({
   const preferredExplorer = useSelectSettingsPreferredBlockExplorer();
   const standardAssets =
     useSelectStandardAssetsByGenesisHash(encodedGenesisHash);
-  const updatingStandardAssets = useSelectStandardAssetsUpdating();
   // states
   const [fetchingAccountInformation, setFetchingAccountInformation] =
     useState<boolean>(false);

diff --git a/src/extension/pages/PasskeyPage/PasskeyPage.tsx b/src/extension/pages/PasskeyPage/PasskeyPage.tsx
@@ -362,7 +362,12 @@ const PasskeyPage: FC = () => {
       <>
         <VStack alignItems="center" flexGrow={1} spacing={DEFAULT_GAP} w="full">
           {/*icon*/}
-          <Icon as={GoShieldLock} color="gray.600" h={iconSize} w={iconSize} />
+          <Icon
+            as={GoShieldLock}
+            color={defaultTextColor}
+            h={iconSize}
+            w={iconSize}
+          />
 
           {/*captions*/}
           <VStack alignItems="center" spacing={DEFAULT_GAP / 3} w="full">

diff --git a/src/extension/services/PasskeyService/PasskeyService.ts b/src/extension/services/PasskeyService/PasskeyService.ts
@@ -123,6 +123,7 @@ export default class PasskeyService {
           },
           challenge: randomBytes(32),
           extensions: {
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             // @ts-ignore
             prf: {
               eval: {
@@ -306,6 +307,7 @@ export default class PasskeyService {
           ],
           challenge: randomBytes(CHALLENGE_BYTE_SIZE),
           extensions: {
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             // @ts-ignore
             prf: {
               eval: {

diff --git a/src/extension/translations/en.ts b/src/extension/translations/en.ts
@@ -99,7 +99,10 @@ const translation: IResourceLanguage = {
       'You will be prompted to enter your current password when you press "Change Password".',
     changeTheme: 'Choose between dark and light mode.',
     checkingAuthenticationCredentials: 'Checking authentication credentials.',
-    confirmingTransaction: 'Please wait, the transaction is being processed.',
+    confirmingTransaction:
+      'Your transaction(s) are being sent to the network to be processed.',
+    confirmingTransactionWithAmount:
+      '{{number}} transaction(s) are being sent to the network to be processed.',
     connectingToWalletConnect: 'Attempting to connect to WalletConnect.',
     copied: 'Copied!',
     createNewAccount:

diff --git a/src/extension/types/styles/TSizes.ts b/src/extension/types/styles/TSizes.ts
@@ -1,3 +1,3 @@
-type TSizes = 'lg' | 'md' | 'sm' | 'xs';
+type TSizes = 'lg' | 'md' | 'sm' | 'xl' | 'xs';
 
 export default TSizes;
diff --git a/src/extension/utils/calculateIconSize/calculateIconSize.ts b/src/extension/utils/calculateIconSize/calculateIconSize.ts
@@ -1,4 +1,7 @@
-export default function calculateIconSize(size: string): number {
+// types
+import type { TSizes } from '@extension/types';
+
+export default function calculateIconSize(size?: TSizes): number {
   switch (size) {
     case 'lg':
       return 10;

diff --git a/src/extension/utils/signBytes/signBytes.ts b/src/extension/utils/signBytes/signBytes.ts
@@ -1,5 +1,4 @@
 import { sign } from 'tweetnacl';
-import browser from 'webextension-polyfill';
 
 // enums
 import { EncryptionMethodEnum } from '@extension/enums';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export { default } from './CircularProgressWithIcon';
		export * from './types';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export type { default as IEncryptionState } from './IEncryptionState';
Check failure on line 1 in src/extension/components/CircularProgressWithIcon/types/index.ts View workflow job for this annotation GitHub Actions / Type Check `Cannot find module './IEncryptionState' or its corresponding type declarations.`
		export type { default as IProps } from './IProps';