From 74127213aa9b5e1a8ad7058223a92c4b6c204181 Mon Sep 17 00:00:00 2001 From: Linkie Link Date: Mon, 18 Sep 2023 16:54:36 +0200 Subject: [PATCH] Mp 3413 pending tx toasts (#478) * MP-3413: added pending transaction toast * fix: removed txLoader/broadcastInitialized * fix: replace the toast instead of closing the previous * fix: fixed the build * MP-3413: added transition on update and success checkmark * fix: changed Search for ChevronDown --- .../AccountFund/AccountFundContent.tsx | 35 +- src/components/Account/AccountMenuContent.tsx | 2 +- src/components/CheckMark.tsx | 55 ++++ src/components/CircularProgress.tsx | 8 +- src/components/Modal.tsx | 5 - .../Modals/Account/AccountDeleteModal.tsx | 12 +- src/components/Modals/AlertDialog/index.tsx | 17 +- .../Modals/AssetAmountSelectActionModal.tsx | 4 - src/components/Modals/BorrowModal.tsx | 17 +- .../FundWithdraw/WithdrawFromAccount.tsx | 27 +- .../Modals/LendAndReclaim/index.tsx | 10 +- .../Modals/Unlock/UnlockModalContent.tsx | 7 +- .../Modals/Vault/VaultBorrowings.tsx | 22 +- .../Modals/WithdrawFromVaultsModal.tsx | 12 +- src/components/Select/Option.tsx | 12 +- src/components/Select/index.tsx | 30 +- src/components/Toaster.tsx | 127 -------- src/components/Toaster/index.tsx | 215 ++++++++++++ src/components/TransactionLoader.tsx | 307 ------------------ src/components/Wallet/WalletSelect.tsx | 2 + src/pages/_layout.tsx | 2 +- src/store/slices/broadcast.ts | 253 +++++++++------ src/store/slices/modal.ts | 2 - src/styles/globals.css | 15 + src/types/interfaces/store/broadcast.d.ts | 26 +- src/types/interfaces/store/common.d.ts | 2 +- src/types/interfaces/store/modals.d.ts | 2 - tailwind.config.js | 20 ++ 28 files changed, 570 insertions(+), 678 deletions(-) create mode 100644 src/components/CheckMark.tsx delete mode 100644 src/components/Toaster.tsx create mode 100644 src/components/Toaster/index.tsx delete mode 100644 src/components/TransactionLoader.tsx diff --git a/src/components/Account/AccountFund/AccountFundContent.tsx b/src/components/Account/AccountFund/AccountFundContent.tsx index 4c08a357..3e5bbc37 100644 --- a/src/components/Account/AccountFund/AccountFundContent.tsx +++ b/src/components/Account/AccountFund/AccountFundContent.tsx @@ -36,7 +36,7 @@ export default function AccountFundContent(props: Props) { const deposit = useStore((s) => s.deposit) const accounts = useStore((s) => s.accounts) const walletAssetModal = useStore((s) => s.walletAssetsModal) - const showTxLoader = useStore((s) => s.showTxLoader) + const [isConfirming, setIsConfirming] = useState(false) const [lendAssets, setLendAssets] = useLocalStorage( LEND_ASSETS_KEY, DEFAULT_SETTINGS.lendAssets, @@ -76,18 +76,27 @@ export default function AccountFundContent(props: Props) { const handleClick = useCallback(async () => { if (!props.accountId) return - const result = await deposit({ + + const depositObject = { accountId: props.accountId, coins: fundingAssets, lend: isLending, - }) - if (result) - useStore.setState({ - fundAndWithdrawModal: null, - walletAssetsModal: null, - focusComponent: null, - }) - }, [props.accountId, deposit, fundingAssets, isLending]) + } + + if (props.isFullPage) { + setIsConfirming(true) + const result = await deposit(depositObject) + setIsConfirming(false) + if (result) + useStore.setState({ + walletAssetsModal: null, + focusComponent: null, + }) + } else { + deposit(depositObject) + useStore.setState({ fundAndWithdrawModal: null, walletAssetsModal: null }) + } + }, [props.accountId, deposit, fundingAssets, isLending, props.isFullPage]) useEffect(() => { if (BN(baseBalance).isLessThan(defaultFee.amount[0].amount)) { @@ -171,7 +180,7 @@ export default function AccountFundContent(props: Props) { max={balance} balances={balances} maxText='Max' - disabled={showTxLoader} + disabled={isConfirming} /> ) @@ -184,7 +193,7 @@ export default function AccountFundContent(props: Props) { rightIcon={} iconClassName='w-3' onClick={handleSelectAssetsClick} - disabled={showTxLoader} + disabled={isConfirming} /> 0} - showProgressIndicator={showTxLoader} + showProgressIndicator={isConfirming} onClick={handleClick} color={props.isFullPage ? 'tertiary' : undefined} size={props.isFullPage ? 'lg' : undefined} diff --git a/src/components/Account/AccountMenuContent.tsx b/src/components/Account/AccountMenuContent.tsx index cb59ccc0..1c2659ce 100644 --- a/src/components/Account/AccountMenuContent.tsx +++ b/src/components/Account/AccountMenuContent.tsx @@ -57,7 +57,7 @@ export default function AccountMenuContent(props: Props) { }, [transactionFeeCoinBalance]) const performCreateAccount = useCallback(async () => { - setShowMenu(true) + setShowMenu(false) setIsCreating(true) const accountId = await createAccount() setIsCreating(false) diff --git a/src/components/CheckMark.tsx b/src/components/CheckMark.tsx new file mode 100644 index 00000000..0c20ba5d --- /dev/null +++ b/src/components/CheckMark.tsx @@ -0,0 +1,55 @@ +import classNames from 'classnames' + +import { CheckCircled } from 'components/Icons' +import { DEFAULT_SETTINGS } from 'constants/defaultSettings' +import { REDUCE_MOTION_KEY } from 'constants/localStore' +import useLocalStorage from 'hooks/useLocalStorage' + +interface Props { + color?: string + size?: number + className?: string +} + +export const CheckMark = ({ color = '#FFFFFF', size = 20, className }: Props) => { + const [reduceMotion] = useLocalStorage(REDUCE_MOTION_KEY, DEFAULT_SETTINGS.reduceMotion) + const classes = classNames('inline-block relative', className) + + if (reduceMotion) + return ( + + ) + + return ( +
+ + + + +
+ ) +} diff --git a/src/components/CircularProgress.tsx b/src/components/CircularProgress.tsx index 5d7b4281..b48ff777 100644 --- a/src/components/CircularProgress.tsx +++ b/src/components/CircularProgress.tsx @@ -1,6 +1,5 @@ import classNames from 'classnames' -import Text from 'components/Text' import { DEFAULT_SETTINGS } from 'constants/defaultSettings' import { REDUCE_MOTION_KEY } from 'constants/localStore' import useLocalStorage from 'hooks/useLocalStorage' @@ -25,9 +24,12 @@ export const CircularProgress = ({ color = '#FFFFFF', size = 20, className }: Pr className={classNames('flex items-center', loaderClasses)} style={{ width: `${size}px`, height: `${size}px` }} > - +

... - +

) diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx index 34950cfd..9eb81d51 100644 --- a/src/components/Modal.tsx +++ b/src/components/Modal.tsx @@ -3,7 +3,6 @@ import { ReactNode, useEffect, useRef } from 'react' import EscButton from 'components/Button/EscButton' import Card from 'components/Card' -import TransactionLoader from 'components/TransactionLoader' import useStore from 'store' interface Props { @@ -23,11 +22,9 @@ interface Props { export default function Modal(props: Props) { const ref: React.RefObject = useRef(null) const modalClassName = props.modalClassName ?? 'max-w-modal' - const showTxLoader = useStore((s) => s.showTxLoader) function onClose() { ref.current?.close() - useStore.setState({ showTxLoader: false }) props.onClose() } @@ -42,7 +39,6 @@ export default function Modal(props: Props) { return () => { dialog?.removeAttribute('open') dialog?.close() - useStore.setState({ showTxLoader: false }) document.body.classList.remove('h-screen', 'overflow-hidden') } }, []) @@ -76,7 +72,6 @@ export default function Modal(props: Props) { 'flex-1 overflow-y-scroll scrollbar-hide relative', )} > - {showTxLoader && !props.hideTxLoader && } {props.children ? props.children : props.content} diff --git a/src/components/Modals/Account/AccountDeleteModal.tsx b/src/components/Modals/Account/AccountDeleteModal.tsx index 8fc093be..080aa7a9 100644 --- a/src/components/Modals/Account/AccountDeleteModal.tsx +++ b/src/components/Modals/Account/AccountDeleteModal.tsx @@ -35,13 +35,11 @@ function AccountDeleteModal(props: Props) { useStore.setState({ accountDeleteModal: null }) }, []) - const deleteAccountHandler = useCallback(async () => { + const deleteAccountHandler = useCallback(() => { const options = { accountId: modal.id, lends: modal.lends } - const isSuccess = await deleteAccount(options) - if (isSuccess) { - navigate(getRoute(getPage(pathname), address)) - closeDeleteAccountModal() - } + deleteAccount(options) + navigate(getRoute(getPage(pathname), address)) + closeDeleteAccountModal() }, [modal, deleteAccount, navigate, pathname, address, closeDeleteAccountModal]) const depositsAndLends = useMemo( @@ -92,7 +90,6 @@ function AccountDeleteModal(props: Props) { positiveButton={{ text: 'Delete Account', icon: , - isAsync: true, onClick: deleteAccountHandler, }} /> @@ -120,7 +117,6 @@ function AccountDeleteModal(props: Props) { positiveButton={{ text: 'Delete Account', icon: , - isAsync: true, onClick: deleteAccountHandler, }} /> diff --git a/src/components/Modals/AlertDialog/index.tsx b/src/components/Modals/AlertDialog/index.tsx index 94548c7e..c9e61e64 100644 --- a/src/components/Modals/AlertDialog/index.tsx +++ b/src/components/Modals/AlertDialog/index.tsx @@ -23,20 +23,11 @@ interface Props { function AlertDialog(props: Props) { const { title, icon, description, negativeButton, positiveButton } = props.config - const [isConfirming, setIsConfirming] = useState(false) const handleButtonClick = (button?: AlertDialogButton) => { button?.onClick && button.onClick() props.close() } - async function handleAsyncButtonClick(button?: AlertDialogButton) { - if (!button?.onClick) return - setIsConfirming(true) - await button.onClick() - setIsConfirming(false) - props.close() - } - return ( } - showProgressIndicator={isConfirming} - onClick={() => - positiveButton.isAsync - ? handleAsyncButtonClick(positiveButton) - : handleButtonClick(positiveButton) - } + onClick={() => handleButtonClick(positiveButton)} /> )}