diff --git a/src/extension/components/ModalSubHeading/ModalSubHeading.tsx b/src/extension/components/ModalSubHeading/ModalSubHeading.tsx index 8523eff6..42b0942f 100644 --- a/src/extension/components/ModalSubHeading/ModalSubHeading.tsx +++ b/src/extension/components/ModalSubHeading/ModalSubHeading.tsx @@ -19,7 +19,7 @@ const ModalSubHeading: FC = ({ 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 index a540f3c1..8274007b 100644 --- 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 = ({ 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 = ({ w="full" > - + = ({ {label || t('labels.moreInformation')} - + diff --git a/src/extension/components/Notice/Notice.tsx b/src/extension/components/Notice/Notice.tsx new file mode 100644 index 00000000..5e2cba7a --- /dev/null +++ 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 = ({ 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 ( + + {/*icon*/} + + + {/*message*/} + + {message} + + + ); +}; + +export default Notice; diff --git a/src/extension/components/Notice/index.ts b/src/extension/components/Notice/index.ts new file mode 100644 index 00000000..e63d58db --- /dev/null +++ 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 new file mode 100644 index 00000000..7997771c --- /dev/null +++ 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 new file mode 100644 index 00000000..f404deed --- /dev/null +++ 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 index 39f79ef3..77ba3532 100644 --- a/src/extension/components/PageHeader/PageHeader.tsx +++ b/src/extension/components/PageHeader/PageHeader.tsx @@ -73,11 +73,7 @@ const PageHeader: FC = ({ <> {/*title*/} - + {title} diff --git a/src/extension/enums/SendAssetsThunkEnum.ts b/src/extension/enums/SendAssetsThunkEnum.ts deleted file mode 100644 index 165f464a..00000000 --- a/src/extension/enums/SendAssetsThunkEnum.ts +++ /dev/null @@ -1,6 +0,0 @@ -enum SendAssetsThunkEnum { - CreateUnsignedTransactions = 'sendAssets/createUnsignedTransactions', - SubmitTransaction = 'sendAssets/submitTransaction', -} - -export default SendAssetsThunkEnum; diff --git a/src/extension/enums/index.ts b/src/extension/enums/index.ts index a53966aa..e934b4b8 100644 --- 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 new file mode 100644 index 00000000..43ee41fe --- /dev/null +++ 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 new file mode 100644 index 00000000..14ab6bbd --- /dev/null +++ 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 index d350eefc..aa4290d8 100644 --- 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 >( - 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 index 9522534e..42186b81 100644 --- 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 >( - 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); diff --git a/src/extension/icons/KbPasskey/KbPasskey.tsx b/src/extension/icons/KbPasskey/KbPasskey.tsx new file mode 100644 index 00000000..d7f54165 --- /dev/null +++ b/src/extension/icons/KbPasskey/KbPasskey.tsx @@ -0,0 +1,49 @@ +import { GenIcon, type IconBaseProps, type IconType } from 'react-icons'; + +const KbPasskey: IconType = (props: IconBaseProps) => + GenIcon({ + tag: 'svg', + attr: { + viewBox: '0 0 353 353', + }, + child: [ + { + tag: 'path', + attr: { + d: 'M0 0 C1.01693939 -0.0065712 2.03387878 -0.0131424 3.08163452 -0.01991272 C6.44293294 -0.03960202 9.80418674 -0.05129948 13.16552734 -0.0612793 C14.31666393 -0.06535482 15.46780052 -0.06943035 16.65382004 -0.07362938 C22.74837819 -0.09447284 28.84291394 -0.10878129 34.9375 -0.11816406 C41.21517005 -0.12921666 47.49248451 -0.16360873 53.77002907 -0.20333576 C58.61209752 -0.22954936 63.4540819 -0.2378602 68.29621506 -0.24144554 C70.609332 -0.24630024 72.92244547 -0.25788213 75.23549271 -0.27648354 C78.48279816 -0.3009723 81.72919194 -0.29989173 84.9765625 -0.29296875 C85.92033752 -0.30577881 86.86411255 -0.31858887 87.83648682 -0.33178711 C97.52411985 -0.25702665 106.12078562 2.48922498 113.22021484 9.23950195 C118.82828194 15.79988233 120.02568928 22.70119898 120.03709412 31.11277771 C120.04218194 32.03792413 120.04726976 32.96307056 120.05251175 33.91625172 C120.06826202 37.02977827 120.07676821 40.14328157 120.08520508 43.25683594 C120.09474168 45.48408659 120.10463276 47.71133575 120.11485291 49.93858337 C120.14626795 57.26673621 120.16651179 64.59490048 120.18505859 71.9230957 C120.18835592 73.16995187 120.19165324 74.41680804 120.19505048 75.70144773 C120.22583871 87.4623461 120.25270703 99.22324858 120.26946926 110.98417568 C120.27341855 113.70820054 120.27742156 116.43222532 120.28149414 119.15625 C120.2825025 119.83326594 120.28351086 120.51028188 120.28454978 121.20781345 C120.30153483 132.16039075 120.3426191 143.11274123 120.39351713 154.06520795 C120.44538908 165.32027761 120.47394248 176.57523563 120.48166615 187.83043724 C120.48661725 194.14555302 120.5016471 200.46026603 120.54141045 206.77526665 C120.57836016 212.72204403 120.58665865 218.66819002 120.57340431 224.61506081 C120.57345813 226.79183863 120.58369911 228.96864501 120.60515594 231.14531708 C120.8260782 254.83280789 120.8260782 254.83280789 111.7624445 264.4110508 C100.63759706 274.52614079 84.1402413 272.60563094 70.18115234 272.5402832 C67.98023479 272.5397636 65.77931676 272.54028517 63.57839966 272.54179382 C58.98416135 272.54170451 54.3901 272.53135681 49.79589844 272.51318359 C43.92758227 272.49047134 38.05952353 272.48996172 32.19117546 272.49670124 C27.65281921 272.50005301 23.11452092 272.49338882 18.57617569 272.48357201 C16.4129784 272.47974258 14.24977464 272.47856235 12.08657455 272.48015785 C9.05791829 272.48053151 6.0295841 272.46782551 3.00097656 272.45166016 C1.68057373 272.45537628 1.68057373 272.45537628 0.33349609 272.45916748 C-9.80464881 272.37343689 -18.29338643 270.92713017 -26.12353516 264.17700195 C-33.64345002 256.52573486 -35.58965983 247.1249502 -35.50448608 236.69642639 C-35.50916606 235.79726185 -35.51384603 234.8980973 -35.51866782 233.97168535 C-35.53054081 230.98796784 -35.52119084 228.00471622 -35.51171875 225.02099609 C-35.5157879 222.86990595 -35.5211317 220.71881789 -35.52764893 218.56773376 C-35.54128822 212.74540654 -35.53603759 206.92323938 -35.52651167 201.10090947 C-35.51889657 194.99617802 -35.52596591 188.89145992 -35.53067017 182.78672791 C-35.53612273 172.53536529 -35.52894959 162.28406759 -35.51464844 152.03271484 C-35.49832729 140.19704834 -35.50360863 128.36153693 -35.52012765 116.5258742 C-35.5337619 106.34807673 -35.53565256 96.17032583 -35.52781165 85.99252218 C-35.52314524 79.92081661 -35.52248178 73.84918382 -35.53242111 67.77748299 C-35.54111652 62.06710526 -35.53502178 56.35692654 -35.51773834 50.64657021 C-35.51378707 48.55647359 -35.51488413 46.46636009 -35.52152634 44.37627029 C-35.59877584 17.58913875 -35.59877584 17.58913875 -25.53369141 7.27856445 C-17.795938 0.53154446 -9.88734228 0.02781206 0 0 Z M-18.75744629 21.25302315 C-20.65207659 25.30829288 -20.54239224 28.8173177 -20.51121521 33.24180603 C-20.51660075 34.15656049 -20.52198629 35.07131495 -20.52753502 36.01378924 C-20.5418462 39.07996756 -20.53470301 42.14571609 -20.52758789 45.21191406 C-20.53328979 47.40978849 -20.54025335 49.60765995 -20.54838562 51.80552673 C-20.56635183 57.77656005 -20.56514212 63.7474467 -20.55944324 69.71849895 C-20.55635644 74.70127823 -20.56243815 79.68402913 -20.56848198 84.66680437 C-20.58334077 97.09268905 -20.57970411 109.51850842 -20.56761868 121.94438995 C-20.5576863 132.73271732 -20.57062693 143.52087319 -20.59455287 154.30917411 C-20.61894276 165.39027676 -20.62815225 176.47131028 -20.62190014 187.5524407 C-20.61852595 193.77220136 -20.62097646 199.99182031 -20.63815117 206.2115612 C-20.65359472 212.05978763 -20.64969328 217.90768608 -20.63084602 223.75589943 C-20.62715302 225.90292167 -20.63028923 228.04996806 -20.64073181 230.19696808 C-20.6538944 233.12676368 -20.64243582 236.05546594 -20.6247406 238.98521423 C-20.63434561 239.835899 -20.64395061 240.68658378 -20.65384668 241.56304687 C-20.58748763 246.89881814 -19.67167551 249.94699773 -16.12353516 254.17700195 C-10.96849367 257.83715508 -5.89029342 257.60957461 0.19287109 257.58105469 C1.21798798 257.58791794 2.24310486 257.59478119 3.29928589 257.60185242 C6.67932075 257.62011621 10.05889134 257.61628376 13.43896484 257.6105957 C15.79256338 257.61515731 18.14616059 257.62046282 20.49975586 257.6264801 C25.42909156 257.63541012 30.35826523 257.63298875 35.28759766 257.62304688 C41.60277516 257.61155068 47.91739405 257.63177982 54.23249817 257.66096401 C59.09154814 257.67931269 63.95046388 257.67903628 68.80953979 257.67332649 C71.13793726 257.67317315 73.46634375 257.67922792 75.79470825 257.69161797 C79.05018148 257.70650241 82.30461773 257.69586908 85.56005859 257.67871094 C86.52023895 257.68837891 87.48041931 257.69804687 88.46969604 257.70800781 C94.25824794 257.64415267 97.42839469 256.9566353 101.87646484 253.17700195 C106.13464885 248.33148222 106.024992 243.71024496 106.02363586 237.51802063 C106.02731255 236.62272036 106.03098924 235.7274201 106.03477734 234.80498952 C106.04582642 231.79267607 106.04966011 228.7803971 106.0534668 225.76806641 C106.05973053 223.6131428 106.06637725 221.45822028 106.07337952 219.30329895 C106.0907977 213.43949385 106.10134356 207.57569691 106.10958505 201.71187234 C106.11473357 198.04919242 106.12080938 194.38651503 106.12709618 190.7238369 C106.14615072 179.26663461 106.16038118 167.80943878 106.16870815 156.35222369 C106.1784819 143.12232963 106.20480408 129.89260283 106.24520904 116.66276771 C106.27535936 106.44016003 106.29017601 96.21760032 106.29348916 85.99494904 C106.2958409 79.88797382 106.30481766 73.78117722 106.32995033 67.67424965 C106.35321687 61.9278462 106.35746982 56.18173916 106.34718895 50.43530083 C106.34669314 48.32781107 106.35302692 46.2203068 106.366745 44.11286163 C106.38444698 41.23185335 106.3773658 38.35191076 106.36421204 35.47090149 C106.37518128 34.64024195 106.38615053 33.80958242 106.39745218 32.95375139 C106.3347519 27.25121116 105.02532269 22.96423589 101.87646484 18.17700195 C97.53179463 14.09311104 92.12362766 14.74713625 86.48999023 14.77294922 C85.44551224 14.76608597 84.40103424 14.75922272 83.3249054 14.75215149 C79.87450543 14.73385991 76.42455912 14.7377245 72.97412109 14.7434082 C70.57425285 14.73884755 68.17438591 14.73354233 65.77452087 14.7275238 C60.74505304 14.71858804 55.71574395 14.72102125 50.6862793 14.73095703 C44.24216174 14.74244713 37.79859211 14.72223631 31.35454655 14.69303989 C26.39855978 14.67469092 21.44270463 14.67496781 16.48669243 14.68067741 C14.11084665 14.68083079 11.73499204 14.67477332 9.35917854 14.66238594 C6.03654769 14.647503 2.71493311 14.65813427 -0.60766602 14.67529297 C-1.5881189 14.665625 -2.56857178 14.65595703 -3.57873535 14.64599609 C-10.21509869 14.71773322 -14.45249956 15.7832271 -18.75744629 21.25302315 Z', + fill: 'currentColor', + transform: 'translate(134.12353515625,0.822998046875)', + }, + child: [], + }, + { + tag: 'path', + attr: { + d: 'M0 0 C8.75718764 6.11823715 13.98530082 15.00594352 16.1328125 25.39453125 C17.47914309 36.52980714 15.15427678 46.78453423 8.75 56.03515625 C2.6341639 63.43853679 -4.463173 67.48642225 -13.4921875 70.49609375 C-13.4921875 98.87609375 -13.4921875 127.25609375 -13.4921875 156.49609375 C-18.7721875 156.49609375 -24.0521875 156.49609375 -29.4921875 156.49609375 C-29.4921875 151.54609375 -29.4921875 146.59609375 -29.4921875 141.49609375 C-38.4021875 141.49609375 -47.3121875 141.49609375 -56.4921875 141.49609375 C-56.4921875 136.21609375 -56.4921875 130.93609375 -56.4921875 125.49609375 C-47.5821875 125.49609375 -38.6721875 125.49609375 -29.4921875 125.49609375 C-29.4921875 120.54609375 -29.4921875 115.59609375 -29.4921875 110.49609375 C-37.4121875 110.49609375 -45.3321875 110.49609375 -53.4921875 110.49609375 C-53.4921875 105.21609375 -53.4921875 99.93609375 -53.4921875 94.49609375 C-45.9021875 94.49609375 -38.3121875 94.49609375 -30.4921875 94.49609375 C-30.9871875 82.61609375 -30.9871875 82.61609375 -31.4921875 70.49609375 C-35.1221875 69.17609375 -38.7521875 67.85609375 -42.4921875 66.49609375 C-51.5851477 60.87985362 -57.50863164 52.718492 -60.83203125 42.546875 C-63.22000512 31.5113271 -61.96851005 20.97870394 -56.171875 11.2890625 C-42.68040114 -7.98973758 -19.79988683 -11.94820757 0 0 Z M-40.8671875 16.87109375 C-45.1188661 22.30955527 -46.54876806 28.66116264 -46.4921875 35.49609375 C-45.36523122 42.62136572 -41.74146881 47.68802359 -36.4921875 52.49609375 C-31.06691423 56.23350423 -24.59224264 57.13312711 -18.12890625 56.12890625 C-11.33742209 54.22869825 -5.98895074 50.28695399 -2.10546875 44.390625 C1.06864683 38.09808008 1.66749558 31.9246335 -0.1171875 25.109375 C-2.68299997 18.36266274 -7.39153579 13.52605213 -13.8515625 10.328125 C-23.96861252 7.14035628 -33.7311889 9.15326313 -40.8671875 16.87109375 Z', + fill: 'currentColor', + transform: 'translate(200.4921875,81.50390625)', + }, + child: [], + }, + { + tag: 'path', + attr: { + d: 'M0 0 C2 2 2 2 2.24050903 4.3664856 C2.23606781 5.35687836 2.23162659 6.34727112 2.22705078 7.36767578 C2.22680908 8.50438721 2.22656738 9.64109863 2.22631836 10.81225586 C2.21608643 12.01116455 2.20585449 13.21007324 2.1953125 14.4453125 C2.19329834 15.54415771 2.19128418 16.64300293 2.18920898 17.77514648 C2.17872104 21.8918066 2.15079862 26.00840736 2.125 30.125 C2.08375 39.32375 2.0425 48.5225 2 58 C25.43 58 48.86 58 73 58 C72.92087839 40.40862991 72.92087839 40.40862991 72.81982422 22.81738281 C72.81398319 20.61263217 72.80888671 18.40787938 72.8046875 16.203125 C72.79445557 15.05763184 72.78422363 13.91213867 72.77368164 12.73193359 C72.77331909 11.08813721 72.77331909 11.08813721 72.77294922 9.41113281 C72.768508 8.46071106 72.76406677 7.51028931 72.75949097 6.53106689 C73.01549479 3.83693609 73.50898977 2.2484041 75 0 C77.8125 -1.4375 77.8125 -1.4375 81 -2 C84.56446721 -0.46079825 85.82847773 0.74271659 88 4 C88.26069641 6.71884155 88.26069641 6.71884155 88.2746582 10.04443359 C88.28419022 11.28937592 88.29372223 12.53431824 88.30354309 13.81698608 C88.30328163 15.17747018 88.30234443 16.53795428 88.30078125 17.8984375 C88.30466894 19.29464851 88.30900377 20.69085835 88.31376648 22.08706665 C88.3212285 25.0141381 88.32093803 27.94108895 88.31567383 30.86816406 C88.30988544 34.61304841 88.32679442 38.35743717 88.3500185 42.10223961 C88.36477695 44.98650992 88.36562459 47.87066154 88.36250877 50.75496292 C88.36302114 52.13521937 88.36824297 53.51548261 88.37832069 54.89570236 C88.39070435 56.82935541 88.38194039 58.76310861 88.37231445 60.69677734 C88.37294388 61.7958139 88.3735733 62.89485046 88.3742218 64.02719116 C87.94990454 67.3979571 87.00703838 69.28271351 85 72 C81.74781038 73.62609481 78.16567631 73.17444476 74.59057617 73.19287109 C73.28545326 73.20513733 73.28545326 73.20513733 71.95396423 73.21765137 C69.06697279 73.24251787 66.18003054 73.25902417 63.29296875 73.2734375 C62.30811304 73.27876118 61.32325733 73.28408485 60.30855751 73.28956985 C55.09625654 73.3163063 49.88397957 73.33568003 44.67163086 73.35009766 C39.28436019 73.36675105 33.89770061 73.41153332 28.51066113 73.4624691 C24.37139675 73.49610277 20.23227815 73.50767081 16.09288979 73.51332474 C14.10692993 73.52004744 12.12098 73.53529586 10.13515282 73.55921555 C7.35546236 73.59078824 4.57742966 73.5909159 1.79760742 73.58349609 C0.56693542 73.6081041 0.56693542 73.6081041 -0.68859863 73.63320923 C-4.7957957 73.58832866 -6.56423747 73.30861635 -10.01040649 70.8679657 C-12.3830606 67.44782456 -12.62758949 65.66344059 -12.63110352 61.52905273 C-12.64363663 60.24099228 -12.65616974 58.95293182 -12.66908264 57.62583923 C-12.65681525 56.22841375 -12.64339537 54.83099797 -12.62890625 53.43359375 C-12.62973541 51.99300457 -12.63219657 50.55241548 -12.63621521 49.11183167 C-12.63906901 46.0981079 -12.62441283 43.08512907 -12.59692383 40.0715332 C-12.56280954 36.21203636 -12.56887253 32.35386835 -12.5875864 28.49430752 C-12.59816242 25.52164158 -12.58921394 22.54928407 -12.57420158 19.5766468 C-12.56902569 18.15371682 -12.56949442 16.73075456 -12.57574654 15.3078289 C-12.58120608 13.31902769 -12.55795722 11.3302104 -12.53344727 9.34155273 C-12.52724869 8.21079819 -12.52105011 7.08004364 -12.5146637 5.9150238 C-11.884874 2.34793333 -10.83250532 1.19082524 -8 -1 C-4.34765818 -2.21744727 -3.37046678 -1.64202228 0 0 Z', + fill: 'currentColor', + transform: 'translate(139,278)', + }, + child: [], + }, + { + tag: 'path', + attr: { + d: 'M0 0 C4.06610902 2.10835283 6.29054187 3.77663286 8 8 C8.8382746 12.85316873 8.49228037 16.15389312 6 20.4375 C2.43601866 23.48173407 -0.29699654 24.88376607 -5 25 C-9.58409235 23.6247723 -13.21489654 21.96341647 -16 18 C-17.12491289 13.35036006 -17.43816997 11.16115041 -15.75 6.6875 C-11.72788453 0.51067981 -7.42077649 -1.0240391 0 0 Z', + fill: 'currentColor', + transform: 'translate(181,33)', + }, + child: [], + }, + ], + })(props); + +export default KbPasskey; diff --git a/src/extension/icons/KbPasskey/index.ts b/src/extension/icons/KbPasskey/index.ts new file mode 100644 index 00000000..95acc270 --- /dev/null +++ b/src/extension/icons/KbPasskey/index.ts @@ -0,0 +1 @@ +export { default } from './KbPasskey'; diff --git a/src/extension/modals/AddPasskeyModal/AddPasskeyModal.tsx b/src/extension/modals/AddPasskeyModal/AddPasskeyModal.tsx index 5719ae04..164750ce 100644 --- a/src/extension/modals/AddPasskeyModal/AddPasskeyModal.tsx +++ b/src/extension/modals/AddPasskeyModal/AddPasskeyModal.tsx @@ -16,11 +16,11 @@ import React, { FC, useEffect } from 'react'; import { useTranslation } from 'react-i18next'; import { GoShieldLock } from 'react-icons/go'; import { IoKeyOutline } from 'react-icons/io5'; -import { Radio } from 'react-loader-spinner'; import { useDispatch } from 'react-redux'; // components import Button from '@extension/components/Button'; +import CircularProgressWithIcon from '@extension/components/CircularProgressWithIcon'; import CopyIconButton from '@extension/components/CopyIconButton'; import COSEAlgorithmBadge from '@extension/components/COSEAlgorithmBadge'; import ModalItem from '@extension/components/ModalItem'; @@ -40,11 +40,13 @@ import { import { create as createNotification } from '@extension/features/notifications'; // hooks -import useColorModeValue from '@extension/hooks/useColorModeValue'; import useDefaultTextColor from '@extension/hooks/useDefaultTextColor'; import useSubTextColor from '@extension/hooks/useSubTextColor'; import useAddPasskey from './hooks/useAddPasskey'; +// icons +import KbPasskey from '@extension/icons/KbPasskey'; + // modals import ConfirmPasswordModal from '@extension/modals/ConfirmPasswordModal'; @@ -87,10 +89,6 @@ const AddPasskeyModal: FC = ({ addPasskey, onClose }) => { resetAction: resetAddPasskeyAction, } = useAddPasskey(); const defaultTextColor = useDefaultTextColor(); - const primaryColorCode = useColorModeValue( - theme.colors.primaryLight['500'], - theme.colors.primaryDark['500'] - ); const subTextColor = useSubTextColor(); // misc const isLoading = encrypting || requesting || saving; @@ -167,12 +165,8 @@ const AddPasskeyModal: FC = ({ addPasskey, onClose }) => { spacing={DEFAULT_GAP} w="full" > - {/*loader*/} - + {/*passkey loader*/} + {/*caption*/} diff --git a/src/extension/modals/AuthenticationModal/AuthenticationModal.tsx b/src/extension/modals/AuthenticationModal/AuthenticationModal.tsx index 80272c67..f17d59fb 100644 --- a/src/extension/modals/AuthenticationModal/AuthenticationModal.tsx +++ b/src/extension/modals/AuthenticationModal/AuthenticationModal.tsx @@ -18,7 +18,6 @@ import React, { } from 'react'; import { useTranslation } from 'react-i18next'; import { IoCheckmarkOutline, IoLockClosedOutline } from 'react-icons/io5'; -import { Radio } from 'react-loader-spinner'; import browser from 'webextension-polyfill'; // components @@ -32,12 +31,14 @@ import { BODY_BACKGROUND_COLOR, DEFAULT_GAP } from '@extension/constants'; // enums import { EncryptionMethodEnum } from '@extension/enums'; +// icons +import KbPasskey from '@extension/icons/KbPasskey'; + // managers import PasskeyManager from '@extension/managers/PasskeyManager'; import PasswordManager from '@extension/managers/PasswordManager'; // hooks -import useColorModeValue from '@extension/hooks/useColorModeValue'; import useGenericInput from '@extension/hooks/useGenericInput'; import useSubTextColor from '@extension/hooks/useSubTextColor'; @@ -69,10 +70,6 @@ const AuthenticationModal: FC = ({ const logger = useSelectLogger(); const passkey = useSelectPasskeysPasskey(); // hooks - const primaryColorCode = useColorModeValue( - theme.colors.primaryLight['500'], - theme.colors.primaryDark['500'] - ); const { error: passwordError, label: passwordLabel, @@ -179,11 +176,7 @@ const AuthenticationModal: FC = ({ w="full" > {/*passkey loader*/} - + {/*caption*/} diff --git a/src/extension/modals/ConfirmModal/ConfirmModal.tsx b/src/extension/modals/ConfirmModal/ConfirmModal.tsx index ef27b7ac..e9078e12 100644 --- a/src/extension/modals/ConfirmModal/ConfirmModal.tsx +++ b/src/extension/modals/ConfirmModal/ConfirmModal.tsx @@ -16,7 +16,7 @@ import { IoCheckmarkOutline } from 'react-icons/io5'; // components import Button from '@extension/components/Button'; -import Warning from '@extension/components/Warning'; +import Notice from '@extension/components/Notice'; // constants import { BODY_BACKGROUND_COLOR, DEFAULT_GAP } from '@extension/constants'; @@ -95,7 +95,7 @@ const ConfirmModal: FC = ({ onClose }) => { {/*warning text*/} {confirm?.warningText && ( - + )} diff --git a/src/extension/modals/MoveGroupModal/MoveGroupModal.tsx b/src/extension/modals/MoveGroupModal/MoveGroupModal.tsx index 6f4a9316..e3ad59aa 100644 --- a/src/extension/modals/MoveGroupModal/MoveGroupModal.tsx +++ b/src/extension/modals/MoveGroupModal/MoveGroupModal.tsx @@ -1,6 +1,5 @@ import { Heading, - HStack, Modal, ModalBody, ModalContent, diff --git a/src/extension/modals/RemovePasskeyModal/RemovePasskeyModal.tsx b/src/extension/modals/RemovePasskeyModal/RemovePasskeyModal.tsx index e169bac1..a3d4ae9c 100644 --- a/src/extension/modals/RemovePasskeyModal/RemovePasskeyModal.tsx +++ b/src/extension/modals/RemovePasskeyModal/RemovePasskeyModal.tsx @@ -11,15 +11,15 @@ import { useDisclosure, VStack, } from '@chakra-ui/react'; -import React, { FC, useEffect } from 'react'; +import React, { type FC, useEffect } from 'react'; import { useTranslation } from 'react-i18next'; import { IoTrashOutline } from 'react-icons/io5'; import { GoShieldSlash } from 'react-icons/go'; -import { Radio } from 'react-loader-spinner'; import { useDispatch } from 'react-redux'; // components import Button from '@extension/components/Button'; +import CircularProgressWithIcon from '@extension/components/CircularProgressWithIcon'; import ReEncryptKeysLoadingContent from '@extension/components/ReEncryptKeysLoadingContent'; // constants @@ -29,11 +29,13 @@ import { BODY_BACKGROUND_COLOR, DEFAULT_GAP } from '@extension/constants'; import { create as createNotification } from '@extension/features/notifications'; // hooks -import useColorModeValue from '@extension/hooks/useColorModeValue'; import useDefaultTextColor from '@extension/hooks/useDefaultTextColor'; import useSubTextColor from '@extension/hooks/useSubTextColor'; import useRemovePasskey from './hooks/useRemovePasskey'; +// icons +import KbPasskey from '@extension/icons/KbPasskey'; + // modals import ConfirmPasswordModal from '@extension/modals/ConfirmPasswordModal'; @@ -70,10 +72,6 @@ const RemovePasskeyModal: FC = ({ onClose, removePasskey }) => { resetAction: resetRemovePasskeyAction, } = useRemovePasskey(); const defaultTextColor = useDefaultTextColor(); - const primaryColorCode = useColorModeValue( - theme.colors.primaryLight['500'], - theme.colors.primaryDark['500'] - ); const subTextColor = useSubTextColor(); // misc const isLoading = encrypting || requesting || saving; @@ -148,12 +146,8 @@ const RemovePasskeyModal: FC = ({ onClose, removePasskey }) => { spacing={DEFAULT_GAP} w="full" > - {/*loader*/} - + {/*passkey loader*/} + {/*caption*/} diff --git a/src/extension/modals/ScanQRCodeModal/ScanQRCodeModal.tsx b/src/extension/modals/ScanQRCodeModal/ScanQRCodeModal.tsx index a3ac1a97..41d81bbb 100644 --- a/src/extension/modals/ScanQRCodeModal/ScanQRCodeModal.tsx +++ b/src/extension/modals/ScanQRCodeModal/ScanQRCodeModal.tsx @@ -1,6 +1,7 @@ import { Modal } from '@chakra-ui/react'; +import { randomString } from '@stablelib/random'; import { TransactionType } from 'algosdk'; -import React, { type FC, useState } from 'react'; +import React, { type FC, useMemo, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { IoArrowBackOutline } from 'react-icons/io5'; @@ -53,7 +54,7 @@ const ScanQRCodeModal: FC = ({ onClose }) => { const [scanViaTab, setScanViaTab] = useState(false); const [uris, setURIs] = useState([]); // misc - const _context = 'scan-qr-code-modal'; + const _context = useMemo(() => randomString(8), []); const reset = () => { setURIs([]); setScanViaCamera(false); diff --git a/src/extension/pages/AccountPage/AccountPage.tsx b/src/extension/pages/AccountPage/AccountPage.tsx index 01884a9c..f33aebe5 100644 --- a/src/extension/pages/AccountPage/AccountPage.tsx +++ b/src/extension/pages/AccountPage/AccountPage.tsx @@ -47,6 +47,9 @@ import ReKeyedAccountBadge from '@extension/components/RekeyedAccountBadge'; import WatchAccountBadge from '@extension/components/WatchAccountBadge'; import AccountPageSkeletonContent from './AccountPageSkeletonContent'; +// components +import GroupBadge from '@extension/components/GroupBadge'; + // constants import { ACCOUNT_PAGE_HEADER_ITEM_HEIGHT, @@ -118,8 +121,6 @@ import type { import convertPublicKeyToAVMAddress from '@extension/utils/convertPublicKeyToAVMAddress'; import ellipseAddress from '@extension/utils/ellipseAddress'; import isReKeyedAuthAccountAvailable from '@extension/utils/isReKeyedAuthAccountAvailable'; -import { HiSave } from 'react-icons/hi'; -import GroupBadge from '@extension/components/GroupBadge'; const AccountPage: FC = () => { const { t } = useTranslation(); diff --git a/src/extension/pages/AccountPage/AccountPageSkeletonContent.tsx b/src/extension/pages/AccountPage/AccountPageSkeletonContent.tsx index f494d87c..6b30cc5b 100644 --- a/src/extension/pages/AccountPage/AccountPageSkeletonContent.tsx +++ b/src/extension/pages/AccountPage/AccountPageSkeletonContent.tsx @@ -7,7 +7,7 @@ import { VStack, } from '@chakra-ui/react'; import { faker } from '@faker-js/faker'; -import React, { type FC } from 'react'; +import React, { type FC, useMemo } from 'react'; // components import { NetworkSelectSkeleton } from '@extension/components/NetworkSelect'; @@ -16,7 +16,19 @@ import { NativeBalanceSkeleton } from '@extension/components/NativeBalance'; // hooks import useDefaultTextColor from '@extension/hooks/useDefaultTextColor'; +// utils +import ellipseAddress from '@extension/utils/ellipseAddress'; + const AccountPageSkeletonContent: FC = (props) => { + // memos + const fakeAccount = useMemo( + () => + ellipseAddress(faker.random.alphaNumeric(58).toUpperCase(), { + end: 10, + start: 10, + }), + [] + ); // hooks const defaultTextColor: string = useDefaultTextColor(); @@ -28,7 +40,7 @@ const AccountPageSkeletonContent: FC = (props) => { {/*name/address*/} - {faker.random.alphaNumeric(12).toUpperCase()} + {fakeAccount} diff --git a/src/extension/repositories/BaseRepository/BaseRepository.ts b/src/extension/repositories/BaseRepository/BaseRepository.ts index 5bb3abe3..73bf7045 100644 --- a/src/extension/repositories/BaseRepository/BaseRepository.ts +++ b/src/extension/repositories/BaseRepository/BaseRepository.ts @@ -1,9 +1,8 @@ import { decode as decodeHex, encode as encodeHex } from '@stablelib/hex'; -import browser, { Menus } from 'webextension-polyfill'; +import browser from 'webextension-polyfill'; // types import type { TStorageItemTypes } from '@extension/types'; -import ItemType = Menus.ItemType; export default class BaseRepository { /** diff --git a/src/extension/utils/convertPublicKeyToAVMAddress/convertPublicKeyToAVMAddress.ts b/src/extension/utils/convertPublicKeyToAVMAddress/convertPublicKeyToAVMAddress.ts index eaef7b6d..18323c40 100644 --- a/src/extension/utils/convertPublicKeyToAVMAddress/convertPublicKeyToAVMAddress.ts +++ b/src/extension/utils/convertPublicKeyToAVMAddress/convertPublicKeyToAVMAddress.ts @@ -5,8 +5,8 @@ import AccountRepository from '@extension/repositories/AccountRepository'; /** * Convenience function that simply converts a public key to a base32 encoded AVM address. - * @param {Uint8Array | } publicKey - a raw or hexadecimal encoded public key. - * @returns {string} a base32 encoded AVM address derived from a public key. + * @param {Uint8Array | } publicKey - A raw or hexadecimal encoded public key. + * @returns {string} A base32 encoded AVM address derived from a public key. */ export default function convertPublicKeyToAVMAddress( publicKey: Uint8Array | string