feat: add new loading icons (#345)

* refactor: move send assets thunk to feature * feat: add new passkey icon and use when loading passkey * style: update more information toggle styling * feat: add notice component * refactor: fix some lint warnings
kibis-is · Nov 21, 2024 · f52ca54 · f52ca54
1 parent 7969090
commit f52ca54
Show file tree

Hide file tree

Showing 25 changed files with 215 additions and 91 deletions.
diff --git a/src/extension/components/ModalSubHeading/ModalSubHeading.tsx b/src/extension/components/ModalSubHeading/ModalSubHeading.tsx
@@ -19,7 +19,7 @@ const ModalSubHeading: FC<IProps> = ({ color, text }: IProps) => {
       as="b"
       color={color || subTextColor}
       fontSize="md"
-      pb={DEFAULT_GAP / 3}
+      pt={DEFAULT_GAP / 3}
       textAlign="left"
       w="full"
     >

diff --git a/src/extension/components/MoreInformationAccordion/MoreInformationAccordion.tsx b/src/extension/components/MoreInformationAccordion/MoreInformationAccordion.tsx
@@ -10,9 +10,10 @@ import React, { type FC } from 'react';
 import { useTranslation } from 'react-i18next';
 
 // constants
-import { DEFAULT_GAP } from '@extension/constants';
+import { DEFAULT_GAP, INPUT_HEIGHT } from '@extension/constants';
 
 // hooks
+import useBorderColor from '@extension/hooks/useBorderColor';
 import useDefaultTextColor from '@extension/hooks/useDefaultTextColor';
 
 // types
@@ -24,11 +25,11 @@ const MoreInformationAccordion: FC<IProps> = ({
   fontSize,
   isOpen,
   label,
-  minButtonHeight,
   onChange,
 }) => {
   const { t } = useTranslation();
   // hooks
+  const borderColor = useBorderColor();
   const defaultTextColor = useDefaultTextColor();
   // handlers
   const handleOnChange = (value: number) => onChange(value > -1);
@@ -41,7 +42,14 @@ const MoreInformationAccordion: FC<IProps> = ({
       w="full"
     >
       <AccordionItem border="none" w="full">
-        <AccordionButton minH={minButtonHeight} p={0}>
+        <AccordionButton
+          borderColor={borderColor}
+          borderRadius="full"
+          borderStyle="solid"
+          borderWidth="1px"
+          h={INPUT_HEIGHT}
+          px={DEFAULT_GAP - 2}
+        >
           <Text
             color={color || defaultTextColor}
             fontSize={fontSize}
@@ -51,7 +59,7 @@ const MoreInformationAccordion: FC<IProps> = ({
             {label || t<string>('labels.moreInformation')}
           </Text>
 
-          <AccordionIcon />
+          <AccordionIcon color={color || defaultTextColor} />
         </AccordionButton>
 
         <AccordionPanel pb={0} pt={DEFAULT_GAP / 3} px={0}>

diff --git a/src/extension/components/Notice/Notice.tsx b/src/extension/components/Notice/Notice.tsx
@@ -0,0 +1,76 @@
+import { HStack, Icon, Text } from '@chakra-ui/react';
+import React, { type FC, useMemo } from 'react';
+import { IoInformationCircleOutline, IoWarningOutline } from 'react-icons/io5';
+
+// constants
+import { DEFAULT_GAP } from '@extension/constants';
+
+// types
+import type { IProps } from './types';
+
+const Notice: FC<IProps> = ({ message, size = 'md', type = 'info' }) => {
+  // misc
+  const backgroundColor = useMemo(() => {
+    switch (type) {
+      case 'warning':
+        return 'orange.100';
+      case 'info':
+      default:
+        return 'blue.100';
+    }
+  }, [type]);
+  const borderColor = useMemo(() => {
+    switch (type) {
+      case 'warning':
+        return 'orange.600';
+      case 'info':
+      default:
+        return 'blue.600';
+    }
+  }, [type]);
+  const icon = useMemo(() => {
+    switch (type) {
+      case 'warning':
+        return IoWarningOutline;
+      case 'info':
+      default:
+        return IoInformationCircleOutline;
+    }
+  }, [type]);
+  let iconSize = useMemo(() => {
+    switch (size) {
+      case 'lg':
+        return 10;
+      case 'sm':
+        return 6;
+      case 'xs':
+        return 3;
+      case 'md':
+      default:
+        return 8;
+    }
+  }, []);
+
+  return (
+    <HStack
+      backgroundColor={backgroundColor}
+      borderColor={borderColor}
+      borderRadius="md"
+      borderStyle="solid"
+      borderWidth={1}
+      px={DEFAULT_GAP / 3}
+      py={1}
+      spacing={DEFAULT_GAP / 3}
+    >
+      {/*icon*/}
+      <Icon as={icon} color={borderColor} h={iconSize} w={iconSize} />
+
+      {/*message*/}
+      <Text as="b" color={borderColor} fontSize={size} textAlign="left">
+        {message}
+      </Text>
+    </HStack>
+  );
+};
+
+export default Notice;
diff --git a/src/extension/components/Notice/index.ts b/src/extension/components/Notice/index.ts
@@ -0,0 +1 @@
+export { default } from './Notice';
diff --git a/src/extension/components/Notice/types/IProps.ts b/src/extension/components/Notice/types/IProps.ts
@@ -0,0 +1,7 @@
+interface IProps {
+  message: string;
+  size?: 'lg' | 'md' | 'sm' | 'xs';
+  type?: 'info' | 'warning';
+}
+
+export default IProps;
diff --git a/src/extension/components/Notice/types/index.ts b/src/extension/components/Notice/types/index.ts
@@ -0,0 +1 @@
+export type { default as IProps } from './IProps';
diff --git a/src/extension/components/PageHeader/PageHeader.tsx b/src/extension/components/PageHeader/PageHeader.tsx
@@ -73,11 +73,7 @@ const PageHeader: FC<IProps> = ({
           <>
             {/*title*/}
             <Tooltip label={title}>
-              <Heading
-                color={defaultTextColor}
-                fontSize="md"
-                textAlign="center"
-              >
+              <Heading color={defaultTextColor} size="md" textAlign="center">
                 {title}
               </Heading>
             </Tooltip>

diff --git a/src/extension/enums/SendAssetsThunkEnum.ts b/src/extension/enums/SendAssetsThunkEnum.ts
diff --git a/src/extension/enums/index.ts b/src/extension/enums/index.ts
@@ -16,7 +16,6 @@ export { default as EventsThunkEnum } from './EventsThunkEnum';
 export { default as MessagesThunkEnum } from './MessagesThunkEnum';
 export { default as NetworkTypeEnum } from './NetworkTypeEnum';
 export { default as ScanModeEnum } from './ScanModeEnum';
-export { default as SendAssetsThunkEnum } from './SendAssetsThunkEnum';
 export { default as StandardAssetsThunkEnum } from './StandardAssetsThunkEnum';
 export { default as StoreNameEnum } from './StoreNameEnum';
 export { default as TransactionTypeEnum } from './TransactionTypeEnum';
diff --git a/src/extension/features/send-assets/enums/ThunkEnum.ts b/src/extension/features/send-assets/enums/ThunkEnum.ts
@@ -0,0 +1,6 @@
+enum ThunkEnum {
+  CreateUnsignedTransactions = 'sendAssets/createUnsignedTransactions',
+  SubmitTransactions = 'sendAssets/submitTransactions',
+}
+
+export default ThunkEnum;
diff --git a/src/extension/features/send-assets/enums/index.ts b/src/extension/features/send-assets/enums/index.ts
@@ -0,0 +1 @@
+export { default as ThunkEnum } from './ThunkEnum';
diff --git a/src/extension/features/send-assets/thunks/createUnsignedTransactionsThunk.ts b/src/extension/features/send-assets/thunks/createUnsignedTransactionsThunk.ts
@@ -3,7 +3,8 @@ import { type Transaction } from 'algosdk';
 import BigNumber from 'bignumber.js';
 
 // enums
-import { AssetTypeEnum, SendAssetsThunkEnum } from '@extension/enums';
+import { AssetTypeEnum } from '@extension/enums';
+import { ThunkEnum } from '../enums';
 
 // errors
 import {
@@ -43,7 +44,7 @@ const createUnsignedTransactionsThunk: AsyncThunk<
   ICreateUnsignedTransactionsPayload,
   IAsyncThunkConfigWithRejectValue<IMainRootState>
 >(
-  SendAssetsThunkEnum.CreateUnsignedTransactions,
+  ThunkEnum.CreateUnsignedTransactions,
   async (
     { amountInStandardUnits, note, receiverAddress },
     { getState, rejectWithValue }
@@ -64,16 +65,14 @@ const createUnsignedTransactionsThunk: AsyncThunk<
     if (!asset || !sender) {
       _error = 'required fields not completed';
 
-      logger.debug(
-        `${SendAssetsThunkEnum.CreateUnsignedTransactions}: ${_error}`
-      );
+      logger.debug(`${ThunkEnum.CreateUnsignedTransactions}: ${_error}`);
 
       return rejectWithValue(new MalformedDataError(_error));
     }
 
     if (!online) {
       logger.debug(
-        `${SendAssetsThunkEnum.CreateUnsignedTransactions}: extension offline`
+        `${ThunkEnum.CreateUnsignedTransactions}: extension offline`
       );
 
       return rejectWithValue(
@@ -88,7 +87,7 @@ const createUnsignedTransactionsThunk: AsyncThunk<
 
     if (!network) {
       logger.debug(
-        `${SendAssetsThunkEnum.CreateUnsignedTransactions}: no network selected`
+        `${ThunkEnum.CreateUnsignedTransactions}: no network selected`
       );
 
       return rejectWithValue(
@@ -105,9 +104,7 @@ const createUnsignedTransactionsThunk: AsyncThunk<
     if (!senderAccountInformation) {
       _error = `no account information found for "${senderAddress}" on network "${network.genesisId}"`;
 
-      logger.debug(
-        `${SendAssetsThunkEnum.CreateUnsignedTransactions}: ${_error}`
-      );
+      logger.debug(`${ThunkEnum.CreateUnsignedTransactions}: ${_error}`);
 
       return rejectWithValue(new MalformedDataError(_error));
     }
@@ -161,10 +158,7 @@ const createUnsignedTransactionsThunk: AsyncThunk<
           throw new Error('unknown asset');
       }
     } catch (error) {
-      logger.debug(
-        `${SendAssetsThunkEnum.CreateUnsignedTransactions}: `,
-        error
-      );
+      logger.debug(`${ThunkEnum.CreateUnsignedTransactions}: `, error);
 
       return rejectWithValue(new FailedToSendTransactionError(error.message));
     }

diff --git a/src/extension/features/send-assets/thunks/submitTransactionThunk.ts b/src/extension/features/send-assets/thunks/submitTransactionThunk.ts
@@ -1,7 +1,7 @@
 import { type AsyncThunk, createAsyncThunk } from '@reduxjs/toolkit';
 
 // enums
-import { SendAssetsThunkEnum } from '@extension/enums';
+import { ThunkEnum } from '../enums';
 
 // errors
 import {
@@ -41,7 +41,7 @@ const submitTransactionThunk: AsyncThunk<
   TSubmitTransactionsThunkPayload,
   IAsyncThunkConfigWithRejectValue<IMainRootState>
 >(
-  SendAssetsThunkEnum.SubmitTransaction,
+  ThunkEnum.SubmitTransactions,
   async (
     { transactions, ...encryptionOptions },
     { getState, rejectWithValue }
@@ -63,15 +63,13 @@ const submitTransactionThunk: AsyncThunk<
     if (!sender) {
       _error = `sender not assigned`;
 
-      logger.debug(`${SendAssetsThunkEnum.SubmitTransaction}: ${_error}`);
+      logger.debug(`${ThunkEnum.SubmitTransactions}: ${_error}`);
 
       return rejectWithValue(new MalformedDataError(_error));
     }
 
     if (!online) {
-      logger.debug(
-        `${SendAssetsThunkEnum.SubmitTransaction}: extension offline`
-      );
+      logger.debug(`${ThunkEnum.SubmitTransactions}: extension offline`);
 
       return rejectWithValue(
         new OfflineError('attempted to send transaction, but extension offline')
@@ -80,7 +78,7 @@ const submitTransactionThunk: AsyncThunk<
 
     if (!genesisHash) {
       logger.debug(
-        `${SendAssetsThunkEnum.SubmitTransaction}: failed to get the genesis hash from the transactions`
+        `${ThunkEnum.SubmitTransactions}: failed to get the genesis hash from the transactions`
       );
 
       return rejectWithValue(
@@ -96,7 +94,7 @@ const submitTransactionThunk: AsyncThunk<
     if (!network) {
       _error = `no network configuration found for "${genesisHash}"`;
 
-      logger.debug(`${SendAssetsThunkEnum.SubmitTransaction}: ${_error}`);
+      logger.debug(`${ThunkEnum.SubmitTransactions}: ${_error}`);
 
       return rejectWithValue(new NetworkNotSelectedError(_error));
     }
@@ -107,7 +105,7 @@ const submitTransactionThunk: AsyncThunk<
     if (!isAccountKnown(accounts, senderAddress)) {
       _error = `no account data found for "${senderAddress}" in wallet`;
 
-      logger.debug(`${SendAssetsThunkEnum.SubmitTransaction}: ${_error}`);
+      logger.debug(`${ThunkEnum.SubmitTransactions}: ${_error}`);
 
       return rejectWithValue(new MalformedDataError(_error));
     }
@@ -123,7 +121,7 @@ const submitTransactionThunk: AsyncThunk<
     ) {
       _error = `total transaction cost will bring the account "${senderAddress}" balance below the minimum balance requirement`;
 
-      logger.debug(`${SendAssetsThunkEnum.SubmitTransaction}: ${_error}`);
+      logger.debug(`${ThunkEnum.SubmitTransactions}: ${_error}`);
 
       return rejectWithValue(new NotEnoughMinimumBalanceError(_error));
     }
@@ -153,7 +151,7 @@ const submitTransactionThunk: AsyncThunk<
 
       return transactions.map((value) => value.txID());
     } catch (error) {
-      logger.error(`${SendAssetsThunkEnum.SubmitTransaction}:`, error);
+      logger.error(`${ThunkEnum.SubmitTransactions}:`, error);
 
       if ((error as BaseExtensionError).code) {
         return rejectWithValue(error);
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export type { default as IProps } from './IProps';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { default as ThunkEnum } from './ThunkEnum';