From a6842434ab1e160d7dccba4c9b7322797d56b05d Mon Sep 17 00:00:00 2001 From: ost-ptk Date: Wed, 15 May 2024 11:14:29 +0300 Subject: [PATCH 1/2] Improve extension in-tab view --- .../import-account-with-file/app-router.tsx | 19 +- .../content.tsx | 44 ++++ .../index.tsx | 69 +++---- .../content.tsx | 39 ++++ .../index.tsx | 54 ++--- src/apps/popup/app-router.tsx | 53 +---- .../pages/no-connected-account/content.tsx | 39 ++++ .../pages/no-connected-account/index.tsx | 57 ++---- .../popup/pages/remove-account/content.tsx | 39 ++++ src/apps/popup/pages/remove-account/index.tsx | 70 +++---- .../popup/pages/rename-account/content.tsx | 51 +++++ src/apps/popup/pages/rename-account/index.tsx | 64 +++--- src/apps/popup/router/types.ts | 2 +- src/libs/layout/containers.ts | 14 +- src/libs/layout/locked-router/index.tsx | 63 ++---- src/libs/layout/reset-vault/content.tsx | 40 ++++ src/libs/layout/reset-vault/index.tsx | 106 +++++----- src/libs/layout/unlock-vault/content.tsx | 114 +++++++++++ src/libs/layout/unlock-vault/index.tsx | 189 ++++++------------ src/libs/ui/components/modal/modal.tsx | 2 +- 20 files changed, 634 insertions(+), 494 deletions(-) create mode 100644 src/apps/import-account-with-file/pages/import-account-with-file-failure/content.tsx create mode 100644 src/apps/import-account-with-file/pages/import-account-with-file-success/content.tsx create mode 100644 src/apps/popup/pages/no-connected-account/content.tsx create mode 100644 src/apps/popup/pages/remove-account/content.tsx create mode 100644 src/apps/popup/pages/rename-account/content.tsx create mode 100644 src/libs/layout/reset-vault/content.tsx create mode 100644 src/libs/layout/unlock-vault/content.tsx diff --git a/src/apps/import-account-with-file/app-router.tsx b/src/apps/import-account-with-file/app-router.tsx index 710f4c748..0d81c423f 100644 --- a/src/apps/import-account-with-file/app-router.tsx +++ b/src/apps/import-account-with-file/app-router.tsx @@ -4,11 +4,10 @@ import { HashRouter, Route, Routes } from 'react-router-dom'; import { useUserActivityTracker } from '@hooks/use-user-activity-tracker'; import '@libs/i18n/i18n'; -import { HeaderPopup, LayoutWindow } from '@libs/layout'; import { ImportAccountWithFilePage } from './pages/import-account-with-file'; -import { ImportAccountWithFileFailureContentPage } from './pages/import-account-with-file-failure'; -import { ImportAccountWithFileSuccessContentPage } from './pages/import-account-with-file-success'; +import { ImportAccountWithFileFailurePage } from './pages/import-account-with-file-failure'; +import { ImportAccountWithFileSuccessPage } from './pages/import-account-with-file-success'; import { ImportAccountWithFileUploadPage } from './pages/import-account-with-file-upload'; import { RouterPath } from './router'; @@ -28,21 +27,11 @@ export function AppRouter() { /> } - renderContent={() => } - /> - } + element={} /> } - renderContent={() => } - /> - } + element={} /> diff --git a/src/apps/import-account-with-file/pages/import-account-with-file-failure/content.tsx b/src/apps/import-account-with-file/pages/import-account-with-file-failure/content.tsx new file mode 100644 index 000000000..e046ec40f --- /dev/null +++ b/src/apps/import-account-with-file/pages/import-account-with-file-failure/content.tsx @@ -0,0 +1,44 @@ +import React from 'react'; +import { Trans, useTranslation } from 'react-i18next'; + +import { useTypedLocation } from '@import-account-with-file/router'; + +import { + ContentContainer, + IllustrationContainer, + ParagraphContainer, + SpacingSize +} from '@libs/layout'; +import { SvgIcon, Typography } from '@libs/ui/components'; + +export function ImportAccountWithFileFailureContentPage() { + const { t } = useTranslation(); + const location = useTypedLocation(); + const state = location.state; + + return ( + + + + + + + Something went wrong + + + + + {state?.importAccountStatusMessage + ? state.importAccountStatusMessage + : t( + ': We couldn’t import your account. Please confirm that you’re importing a file containing your secret key (not to be confused with your public key).' + )} + + + + ); +} diff --git a/src/apps/import-account-with-file/pages/import-account-with-file-failure/index.tsx b/src/apps/import-account-with-file/pages/import-account-with-file-failure/index.tsx index e69b48ffa..79831c7a1 100644 --- a/src/apps/import-account-with-file/pages/import-account-with-file-failure/index.tsx +++ b/src/apps/import-account-with-file/pages/import-account-with-file-failure/index.tsx @@ -1,60 +1,37 @@ import React from 'react'; import { Trans, useTranslation } from 'react-i18next'; -import { - RouterPath, - useTypedLocation, - useTypedNavigate -} from '@import-account-with-file/router'; +import { RouterPath, useTypedNavigate } from '@import-account-with-file/router'; import { closeCurrentWindow } from '@background/close-current-window'; import { - ContentContainer, - FooterButtonsAbsoluteContainer, - IllustrationContainer, - ParagraphContainer, - SpacingSize + FooterButtonsContainer, + HeaderPopup, + LayoutWindow } from '@libs/layout'; -import { Button, SvgIcon, Typography } from '@libs/ui/components'; +import { Button } from '@libs/ui/components'; + +import { ImportAccountWithFileFailureContentPage } from './content'; -export function ImportAccountWithFileFailureContentPage() { +export const ImportAccountWithFileFailurePage = () => { const { t } = useTranslation(); const navigate = useTypedNavigate(); - const location = useTypedLocation(); - const state = location.state; return ( - - - - - - - Something went wrong - - - - - {state?.importAccountStatusMessage - ? state.importAccountStatusMessage - : t( - ': We couldn’t import your account. Please confirm that you’re importing a file containing your secret key (not to be confused with your public key).' - )} - - - - - - - + } + renderContent={() => } + renderFooter={() => ( + + + + + )} + /> ); -} +}; diff --git a/src/apps/import-account-with-file/pages/import-account-with-file-success/content.tsx b/src/apps/import-account-with-file/pages/import-account-with-file-success/content.tsx new file mode 100644 index 000000000..0801d7f1e --- /dev/null +++ b/src/apps/import-account-with-file/pages/import-account-with-file-success/content.tsx @@ -0,0 +1,39 @@ +import React from 'react'; +import { Trans, useTranslation } from 'react-i18next'; + +import { + ContentContainer, + IllustrationContainer, + ParagraphContainer, + SpacingSize +} from '@libs/layout'; +import { SvgIcon, Typography } from '@libs/ui/components'; + +export function ImportAccountWithFileSuccessContentPage() { + const { t } = useTranslation(); + + return ( + + + + + + + Your account was successfully imported + + + + + + Imported accounts are distinguished by an ‘IMPORTED’ icon in the + account lists. + + + + + ); +} diff --git a/src/apps/import-account-with-file/pages/import-account-with-file-success/index.tsx b/src/apps/import-account-with-file/pages/import-account-with-file-success/index.tsx index 74ecc1f9e..dd7ad7576 100644 --- a/src/apps/import-account-with-file/pages/import-account-with-file-success/index.tsx +++ b/src/apps/import-account-with-file/pages/import-account-with-file-success/index.tsx @@ -4,44 +4,28 @@ import { Trans, useTranslation } from 'react-i18next'; import { closeCurrentWindow } from '@background/close-current-window'; import { - ContentContainer, - FooterButtonsAbsoluteContainer, - IllustrationContainer, - ParagraphContainer, - SpacingSize + FooterButtonsContainer, + HeaderPopup, + LayoutWindow } from '@libs/layout'; -import { Button, SvgIcon, Typography } from '@libs/ui/components'; +import { Button } from '@libs/ui/components'; -export function ImportAccountWithFileSuccessContentPage() { +import { ImportAccountWithFileSuccessContentPage } from './content'; + +export const ImportAccountWithFileSuccessPage = () => { const { t } = useTranslation(); return ( - - - - - - - Your account was successfully imported - - - - - - Imported accounts are distinguished by an ‘IMPORTED’ icon in the - account lists. - - - - - - - + } + renderContent={() => } + renderFooter={() => ( + + + + )} + /> ); -} +}; diff --git a/src/apps/popup/app-router.tsx b/src/apps/popup/app-router.tsx index 5b6515491..2dde58fba 100644 --- a/src/apps/popup/app-router.tsx +++ b/src/apps/popup/app-router.tsx @@ -21,11 +21,11 @@ import { HomePageContent } from '@popup/pages/home'; import { ImportAccountFromTorusPage } from '@popup/pages/import-account-from-torus'; import { NavigationMenuPageContent } from '@popup/pages/navigation-menu'; import { NftDetailsPage } from '@popup/pages/nft-details'; -import { NoConnectedAccountPageContent } from '@popup/pages/no-connected-account'; +import { NoConnectedAccountPage } from '@popup/pages/no-connected-account'; import { RateAppPage } from '@popup/pages/rate-app'; import { ReceivePage } from '@popup/pages/receive'; -import { RemoveAccountPageContent } from '@popup/pages/remove-account'; -import { RenameAccountPageContent } from '@popup/pages/rename-account'; +import { RemoveAccountPage } from '@popup/pages/remove-account'; +import { RenameAccountPage } from '@popup/pages/rename-account'; import { StakesPage } from '@popup/pages/stakes'; import { TimeoutPageContent } from '@popup/pages/timeout'; import { TokenDetailPage } from '@popup/pages/token-details'; @@ -132,52 +132,11 @@ function AppRoutes() { /> } /> - ( - ( - - )} - /> - )} - renderContent={() => } - /> - } - /> - ( - ( - - )} - /> - )} - renderContent={() => } - /> - } - /> + } /> + } /> ( - - )} - renderContent={() => } - /> - } + element={} /> + + + + + + Casper Wallet is not connected to this site yet + + + + + + To connect to this site, click on the Connect/Sign In button on the + site. + + + + + ); +} diff --git a/src/apps/popup/pages/no-connected-account/index.tsx b/src/apps/popup/pages/no-connected-account/index.tsx index bc2a0afe3..7dc711c74 100644 --- a/src/apps/popup/pages/no-connected-account/index.tsx +++ b/src/apps/popup/pages/no-connected-account/index.tsx @@ -3,47 +3,28 @@ import { Trans, useTranslation } from 'react-i18next'; import { RouterPath, useTypedNavigate } from '@popup/router'; -import { - ContentContainer, - FooterButtonsAbsoluteContainer, - IllustrationContainer, - ParagraphContainer, - SpacingSize -} from '@libs/layout'; -import { Button, SvgIcon, Typography } from '@libs/ui/components'; +import { FooterButtonsContainer, HeaderPopup, PopupLayout } from '@libs/layout'; +import { Button } from '@libs/ui/components'; -export function NoConnectedAccountPageContent() { +import { NoConnectedAccountPageContent } from './content'; + +export const NoConnectedAccountPage = () => { const navigate = useTypedNavigate(); const { t } = useTranslation(); return ( - - - - - - - Casper Wallet is not connected to this site yet - - - - - - To connect to this site, click on the Connect/Sign In button on the - site. - - - - - - - - + ( + + )} + renderContent={() => } + renderFooter={() => ( + + + + )} + /> ); -} +}; diff --git a/src/apps/popup/pages/remove-account/content.tsx b/src/apps/popup/pages/remove-account/content.tsx new file mode 100644 index 000000000..52ee0af2c --- /dev/null +++ b/src/apps/popup/pages/remove-account/content.tsx @@ -0,0 +1,39 @@ +import React from 'react'; +import { Trans, useTranslation } from 'react-i18next'; + +import { + ContentContainer, + IllustrationContainer, + ParagraphContainer, + SpacingSize +} from '@libs/layout'; +import { SvgIcon, Typography } from '@libs/ui/components'; + +export function RemoveAccountPageContent() { + const { t } = useTranslation(); + + return ( + + + + + + + Remove account? + + + + + + Are you sure you want to remove this account? The action can’t be + undone. + + + + + ); +} diff --git a/src/apps/popup/pages/remove-account/index.tsx b/src/apps/popup/pages/remove-account/index.tsx index 7bff66478..6bdd9a902 100644 --- a/src/apps/popup/pages/remove-account/index.tsx +++ b/src/apps/popup/pages/remove-account/index.tsx @@ -8,18 +8,19 @@ import { dispatchToMainStore } from '@background/redux/utils'; import { accountRemoved } from '@background/redux/vault/actions'; import { - ContentContainer, - FooterButtonsAbsoluteContainer, - IllustrationContainer, - ParagraphContainer, - SpacingSize + FooterButtonsContainer, + HeaderPopup, + HeaderSubmenuBarNavLink, + PopupLayout } from '@libs/layout'; -import { Button, SvgIcon, Typography } from '@libs/ui/components'; +import { Button } from '@libs/ui/components'; -export function RemoveAccountPageContent() { +import { RemoveAccountPageContent } from './content'; + +export const RemoveAccountPage = () => { + const { t } = useTranslation(); const navigate = useTypedNavigate(); const { accountName } = useParams(); - const { t } = useTranslation(); const handleRemoveAccount = useCallback(() => { if (!accountName) { @@ -37,35 +38,28 @@ export function RemoveAccountPageContent() { } return ( - - - ( + ( + + )} /> - - - - Remove account? - - - - - - Are you sure you want to remove this account? The action can’t be - undone. - - - - - - - - + )} + renderContent={() => } + renderFooter={() => ( + + + + + )} + /> ); -} +}; diff --git a/src/apps/popup/pages/rename-account/content.tsx b/src/apps/popup/pages/rename-account/content.tsx new file mode 100644 index 000000000..8dc119fcb --- /dev/null +++ b/src/apps/popup/pages/rename-account/content.tsx @@ -0,0 +1,51 @@ +import React from 'react'; +import { FieldErrors, UseFormRegister } from 'react-hook-form'; +import { Trans, useTranslation } from 'react-i18next'; + +import { + ContentContainer, + IllustrationContainer, + InputsContainer, + ParagraphContainer, + SpacingSize +} from '@libs/layout'; +import { Input, SvgIcon, Typography } from '@libs/ui/components'; +import { RenameAccountFormValues } from '@libs/ui/forms/rename-account'; + +interface RenameAccountPageContentProps { + register: UseFormRegister; + errors: FieldErrors; +} + +export function RenameAccountPageContent({ + register, + errors +}: RenameAccountPageContentProps) { + const { t } = useTranslation(); + + return ( + + + + + + + Rename account + + + + + + + ); +} diff --git a/src/apps/popup/pages/rename-account/index.tsx b/src/apps/popup/pages/rename-account/index.tsx index d21d73351..00cbd8b2f 100644 --- a/src/apps/popup/pages/rename-account/index.tsx +++ b/src/apps/popup/pages/rename-account/index.tsx @@ -10,20 +10,20 @@ import { accountRenamed } from '@background/redux/vault/actions'; import { selectVaultAccountsNames } from '@background/redux/vault/selectors'; import { - ContentContainer, - FooterButtonsAbsoluteContainer, - IllustrationContainer, - InputsContainer, - ParagraphContainer, - SpacingSize + FooterButtonsContainer, + HeaderPopup, + HeaderSubmenuBarNavLink, + PopupLayout } from '@libs/layout'; -import { Button, Input, SvgIcon, Typography } from '@libs/ui/components'; +import { Button } from '@libs/ui/components'; import { RenameAccountFormValues, useRenameAccount } from '@libs/ui/forms/rename-account'; -export function RenameAccountPageContent() { +import { RenameAccountPageContent } from './content'; + +export const RenameAccountPage = () => { const navigate = useTypedNavigate(); const { accountName } = useParams(); const { t } = useTranslation(); @@ -48,30 +48,24 @@ export function RenameAccountPageContent() { } return ( - - - ( + ( + + )} /> - - - - Rename account - - -
- - - - + )} + renderContent={() => ( + + )} + renderFooter={() => ( + @@ -82,8 +76,8 @@ export function RenameAccountPageContent() { > Cancel - -
- + + )} + /> ); -} +}; diff --git a/src/apps/popup/router/types.ts b/src/apps/popup/router/types.ts index 795020a8e..1d624bf6a 100644 --- a/src/apps/popup/router/types.ts +++ b/src/apps/popup/router/types.ts @@ -2,7 +2,7 @@ import { ActivityType } from '@src/constants'; import { TokenType } from '@hooks/use-casper-token'; -import { ErrorLocationState } from '@libs/layout'; +import { ErrorLocationState } from '@libs/layout/error/types'; export interface LocationState extends ErrorLocationState { showNavigationMenu?: boolean; diff --git a/src/libs/layout/containers.ts b/src/libs/layout/containers.ts index 11a224820..f9abb3289 100644 --- a/src/libs/layout/containers.ts +++ b/src/libs/layout/containers.ts @@ -203,16 +203,6 @@ export const FooterButtonsContainer = styled(SpaceBetweenFlexRow)` background-color: ${({ theme }) => theme.color.backgroundPrimary}; `; -/** - * @deprecated to be replaced by FooterButtonsContainer when Popup layout is refactored - * to be the same as window layout - */ -export const FooterButtonsAbsoluteContainer = styled(FooterButtonsContainer)` - position: absolute; - bottom: 0; - left: 0; -`; - export const ListItemClickableContainer = styled(SpaceBetweenFlexRow)` cursor: pointer; @@ -293,9 +283,11 @@ export const Overlay = styled.div` z-index: ${({ theme }) => theme.zIndex.modal}; top: 0; left: 0; + bottom: 0; + right: 0; height: 100vh; - width: 100vw; + max-width: 360px; background: ${({ theme }) => hexToRGBA(theme.color.black, '0.32')}; `; diff --git a/src/libs/layout/locked-router/index.tsx b/src/libs/layout/locked-router/index.tsx index 87b5df7cf..8d6ff2657 100644 --- a/src/libs/layout/locked-router/index.tsx +++ b/src/libs/layout/locked-router/index.tsx @@ -1,13 +1,8 @@ import React from 'react'; import { HashRouter, Route, Routes } from 'react-router-dom'; -import { - LayoutWindow, - PopupLayout, - ResetVaultPageContent, - UnlockVaultPageContent -} from '@libs/layout'; -import { HeaderPopup } from '@libs/layout/header/header-popup'; +import { ResetVaultPage } from '@libs/layout/reset-vault'; +import { UnlockVaultPage } from '@libs/layout/unlock-vault'; export const LockedRouterPath = { Any: '*', @@ -18,43 +13,17 @@ interface LockedRouterProps { popupLayout?: boolean; } -export function LockedRouter({ popupLayout }: LockedRouterProps) { - return ( - - - } - renderContent={() => } - /> - ) : ( - } - renderContent={() => } - /> - ) - } - /> - } - renderContent={() => } - /> - ) : ( - } - renderContent={() => } - /> - ) - } - /> - - - ); -} +export const LockedRouter = ({ popupLayout }: LockedRouterProps) => ( + + + } + /> + } + /> + + +); diff --git a/src/libs/layout/reset-vault/content.tsx b/src/libs/layout/reset-vault/content.tsx new file mode 100644 index 000000000..9f6fa1477 --- /dev/null +++ b/src/libs/layout/reset-vault/content.tsx @@ -0,0 +1,40 @@ +import React from 'react'; +import { Trans, useTranslation } from 'react-i18next'; + +import { + ContentContainer, + IllustrationContainer, + ParagraphContainer, + SpacingSize +} from '@libs/layout'; +import { SvgIcon, Typography } from '@libs/ui/components'; + +export function ResetVaultPageContent() { + const { t } = useTranslation(); + + return ( + + + + + + + Are you sure you want to reset your wallet? + + + + + + All accounts will be removed. Make sure you have securely stored + your Casper Wallet’s secret recovery phrase and any legacy secret + key files. Without them you may be unable to access the accounts. + + + + + ); +} diff --git a/src/libs/layout/reset-vault/index.tsx b/src/libs/layout/reset-vault/index.tsx index a9a986d34..96bdc8b77 100644 --- a/src/libs/layout/reset-vault/index.tsx +++ b/src/libs/layout/reset-vault/index.tsx @@ -1,24 +1,29 @@ import React, { useState } from 'react'; import { Trans, useTranslation } from 'react-i18next'; - -import { useTypedNavigate } from '@popup/router'; +import { useNavigate } from 'react-router-dom'; import { closeWindowByReloadExtension } from '@background/close-window-by-reload-extension'; import { resetVault } from '@background/redux/sagas/actions'; import { dispatchToMainStore } from '@background/redux/utils'; import { - ContentContainer, - FooterButtonsAbsoluteContainer, - IllustrationContainer, - ParagraphContainer, - SpacingSize + FooterButtonsContainer, + HeaderPopup, + LayoutWindow, + PopupLayout } from '@libs/layout'; -import { Button, Checkbox, SvgIcon, Typography } from '@libs/ui/components'; +import { Button, Checkbox } from '@libs/ui/components'; + +import { ResetVaultPageContent } from './content'; + +interface ResetVaultPageProps { + popupLayout?: boolean; +} -export function ResetVaultPageContent() { +export const ResetVaultPage = ({ popupLayout }: ResetVaultPageProps) => { const [isChecked, setIsChecked] = useState(false); - const navigate = useTypedNavigate(); + + const navigate = useNavigate(); const { t } = useTranslation(); function handleResetVault() { @@ -31,50 +36,39 @@ export function ResetVaultPageContent() { navigate(-1); } - return ( - <> - - - - - - - Are you sure you want to reset your wallet? - - - - - - All accounts will be removed. Make sure you have securely stored - your Casper Wallet’s secret recovery phrase and any legacy secret - key files. Without them you may be unable to access the accounts. - - - - - - { - setIsChecked(value); - }} - /> - - - - + const footer = ( + + { + setIsChecked(value); + }} + /> + + + ); -} + + return popupLayout ? ( + } + renderContent={() => } + renderFooter={() => footer} + /> + ) : ( + } + renderContent={() => } + renderFooter={() => footer} + /> + ); +}; diff --git a/src/libs/layout/unlock-vault/content.tsx b/src/libs/layout/unlock-vault/content.tsx new file mode 100644 index 000000000..43fd05cd4 --- /dev/null +++ b/src/libs/layout/unlock-vault/content.tsx @@ -0,0 +1,114 @@ +import React, { useState } from 'react'; +import { FieldErrors, UseFormRegister } from 'react-hook-form'; +import { Trans, useTranslation } from 'react-i18next'; +import { useSelector } from 'react-redux'; + +import { selectHasLoginRetryLockoutTime } from '@background/redux/login-retry-lockout-time/selectors'; + +import { + ContentContainer, + IllustrationContainer, + InputsContainer, + ParagraphContainer, + SpacingSize +} from '@libs/layout'; +import { + Input, + PasswordInputType, + PasswordVisibilityIcon, + SvgIcon, + Typography +} from '@libs/ui/components'; +import { UnlockWalletFormValues } from '@libs/ui/forms/unlock-wallet'; + +interface UnlockVaultPageContentProps { + register: UseFormRegister; + errors: FieldErrors; +} + +export function UnlockVaultPageContent({ + register, + errors +}: UnlockVaultPageContentProps) { + const [passwordInputType, setPasswordInputType] = + useState('password'); + + const { t } = useTranslation(); + const hasLoginRetryLockoutTime = useSelector(selectHasLoginRetryLockoutTime); + + if (hasLoginRetryLockoutTime) { + return ( + <> + + + + + + + + Please wait before the next attempt to unlock your wallet + + + + + + + You’ve reached the maximum number of unlock attempts. For + security reasons, you will need to wait a brief while before you + can attempt again. + + + + + + + You can try again in 5 mins. + + + + + + ); + } + + return ( + + + + + + + Your wallet is locked + + + + + Please enter your password to unlock. + + + + + } + {...register('password')} + /> + + + ); +} diff --git a/src/libs/layout/unlock-vault/index.tsx b/src/libs/layout/unlock-vault/index.tsx index 4d9eabde1..c2d288218 100644 --- a/src/libs/layout/unlock-vault/index.tsx +++ b/src/libs/layout/unlock-vault/index.tsx @@ -9,7 +9,6 @@ import { selectPasswordHash, selectPasswordSaltHash } from '@background/redux/keys/selectors'; -import { selectHasLoginRetryLockoutTime } from '@background/redux/login-retry-lockout-time/selectors'; import { unlockVault } from '@background/redux/sagas/actions'; import { UnlockVault } from '@background/redux/sagas/types'; import { dispatchToMainStore } from '@background/redux/utils'; @@ -21,44 +20,39 @@ import { useLockWalletWhenNoMoreRetries } from '@hooks/use-lock-wallet-when-no-m import unlockAnimation from '@libs/animations/unlock_animation.json'; import { AlignedFlexRow, - ContentContainer, - FooterButtonsAbsoluteContainer, - IllustrationContainer, - InputsContainer, + FooterButtonsContainer, + HeaderPopup, + LayoutWindow, LockedRouterPath, - ParagraphContainer, + PopupLayout, SpacingSize } from '@libs/layout'; -import { - Button, - Input, - PasswordInputType, - PasswordVisibilityIcon, - SvgIcon, - Typography -} from '@libs/ui/components'; +import { Button, Typography } from '@libs/ui/components'; import { UnlockWalletFormValues, useUnlockWalletForm } from '@libs/ui/forms/unlock-wallet'; +import { UnlockVaultPageContent } from './content'; + interface UnlockMessageEvent extends MessageEvent { data: UnlockVault; } -export function UnlockVaultPageContent() { - const { t } = useTranslation(); - const navigate = useNavigate(); +interface UnlockVaultPageProps { + popupLayout?: boolean; +} + +export const UnlockVaultPage = ({ popupLayout }: UnlockVaultPageProps) => { const [isLoading, setIsLoading] = useState(false); - const [passwordInputType, setPasswordInputType] = - useState('password'); + const { t } = useTranslation(); + const navigate = useNavigate(); const passwordHash = useSelector(selectPasswordHash); const passwordSaltHash = useSelector(selectPasswordSaltHash); const keyDerivationSaltHash = useSelector(selectKeyDerivationSaltHash); const vaultCipher = useSelector(selectVaultCipher); - const hasLoginRetryLockoutTime = useSelector(selectHasLoginRetryLockoutTime); if (passwordHash == null || passwordSaltHash == null) { throw Error("Password doesn't exist"); @@ -153,111 +147,58 @@ export function UnlockVaultPageContent() { useLockWalletWhenNoMoreRetries(resetField); - if (hasLoginRetryLockoutTime) { - return ( - <> - - - + - - - + + ) : ( + + Unlock wallet + + )} + + + ); -} + + return popupLayout ? ( + } + renderContent={() => ( + + )} + renderFooter={() => footer} + /> + ) : ( + } + renderContent={() => ( + + )} + renderFooter={() => footer} + /> + ); +}; diff --git a/src/libs/ui/components/modal/modal.tsx b/src/libs/ui/components/modal/modal.tsx index 73f08b69f..eb536cb92 100644 --- a/src/libs/ui/components/modal/modal.tsx +++ b/src/libs/ui/components/modal/modal.tsx @@ -33,7 +33,7 @@ const slideOutToBottom = keyframes` const ModalContainer = styled.div<{ placement: 'top' | 'bottom' | 'fullBottom'; }>(({ theme, placement }) => ({ - position: 'fixed', + position: 'absolute', margin: '0 16px', From 0d8d6b2ffc0b07bafe2661c2a722dbbffb106b8d Mon Sep 17 00:00:00 2001 From: ost-ptk Date: Fri, 31 May 2024 14:14:06 +0300 Subject: [PATCH 2/2] Update Overlay component and add delays in e2e tests The Overlay component's position and size properties were adjusted to fit its new design requirements. The width is now fixed, and it is centered using transform. Meanwhile, explicit delays were added in the end-to-end tests for 'buy-cspr.spec.ts' to ensure proper closing of modal windows before continuing with the tests. --- e2e-tests/popup/buy-cspr/buy-cspr.spec.ts | 6 ++++++ src/libs/layout/containers.ts | 8 +++++--- 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/e2e-tests/popup/buy-cspr/buy-cspr.spec.ts b/e2e-tests/popup/buy-cspr/buy-cspr.spec.ts index 420f74246..331cf0ad4 100644 --- a/e2e-tests/popup/buy-cspr/buy-cspr.spec.ts +++ b/e2e-tests/popup/buy-cspr/buy-cspr.spec.ts @@ -117,6 +117,9 @@ popup.describe('Popup UI: buy cspr', () => { await popupPage.getByText('Ukraine').click(); + // wait until a modal window closed + await new Promise(r => setTimeout(r, 2000)); + await popupPage.getByRole('button', { name: 'Next' }).click(); await popupExpect( @@ -128,6 +131,9 @@ popup.describe('Popup UI: buy cspr', () => { await popupPage.getByText('UAH').click(); + // wait until a modal window closed + await new Promise(r => setTimeout(r, 2000)); + await popupPage.getByRole('button', { name: 'Next' }).click(); await popupExpect( diff --git a/src/libs/layout/containers.ts b/src/libs/layout/containers.ts index f9abb3289..a270185de 100644 --- a/src/libs/layout/containers.ts +++ b/src/libs/layout/containers.ts @@ -281,13 +281,15 @@ export const BorderContainer = styled.div` export const Overlay = styled.div` position: fixed; z-index: ${({ theme }) => theme.zIndex.modal}; - top: 0; - left: 0; + top: 50%; + left: 50%; bottom: 0; right: 0; + transform: translate(-50%, -50%); + height: 100vh; - max-width: 360px; + width: 360px; background: ${({ theme }) => hexToRGBA(theme.color.black, '0.32')}; `;