Skip to content

Commit

Permalink
Release/1.8.4 (#965)
Browse files Browse the repository at this point in the history
* feature: add Torus Wallet account import feature (#964)

* Add Torus Wallet account import feature

* Improve validation of Torus Wallet secret key imports

* Update Torus Wallet secret and public keys for E2E tests

* Replace ERC20 icon with CEP18 contract icon in UI components (#962)

* Release 1.8.4 version

---------

Co-authored-by: Ostap Piatkovskyi <[email protected]>
  • Loading branch information
Comp0te and ost-ptk authored Mar 29, 2024
1 parent d4c9930 commit 02a039f
Show file tree
Hide file tree
Showing 29 changed files with 1,508 additions and 39 deletions.
18 changes: 16 additions & 2 deletions e2e-tests/constants.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,21 @@ export const twelveWordsSecretPhrase =
'small vendor member cry motion lava hurdle gravity cry sentence medal seminar';
export const secretKeyPath = path.join(__dirname, './account_secret_key.pem');

export const torusSecretKeyHex =
'1ac774d1b4e05a5546ddc8345e8ccf1d7ef3d19b0e5cd722f161260e6bf1d35d';

export const ACCOUNT_NAMES = {
defaultFirstAccountName: 'Account 1',
defaultSecondAccountName: 'Account 2',
createdAccountName: 'New account 1',
importedAccountName: 'Imported account',
renamedAccountName: 'Renamed account'
renamedAccountName: 'Renamed account',
importedPemAccountName: 'Imported pem account',
importedTorusAccountName: 'Torus account'
};

export const PLAYGROUND_URL = 'https://casper-wallet-playground.make.services/';
export const PLAYGROUND_URL =
'https://cspr-wallet-playground.dev.make.services/';

export const IMPORTED_ACCOUNT = {
accountName: ACCOUNT_NAMES.importedAccountName,
Expand All @@ -25,6 +31,14 @@ export const IMPORTED_ACCOUNT = {
mediumTruncatedPublicKey: '0184f6d260...561ce0dad55'
};

export const IMPORTED_TORUS_ACCOUNT = {
accountName: ACCOUNT_NAMES.importedTorusAccountName,
publicKey:
'02029fcc5bb34a6b2768086ac3bad7ccab6870e980df2c53f26ec06a8865182ffd4f',
truncatedPublicKey: '02029...ffd4f',
mediumTruncatedPublicKey: '02029fcc5b...65182ffd4f'
};

export const DEFAULT_FIRST_ACCOUNT = {
accountName: ACCOUNT_NAMES.defaultFirstAccountName,
publicKey:
Expand Down
6 changes: 3 additions & 3 deletions e2e-tests/popup/connect-account/connect-account.spec.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { Page } from '@playwright/test';

import { popup, popupExpect } from '../../fixtures';
import { ACCOUNT_NAMES, PLAYGROUND_URL } from '../../constants';
import { popup, popupExpect } from '../../fixtures';

popup.describe('Popup UI: connect account', () => {
let connectAccountPage: Page;
Expand Down Expand Up @@ -50,7 +50,7 @@ popup.describe('Popup UI: connect account', () => {
page.getByText('Casper Wallet Playground')
).toBeVisible();
await popupExpect(
page.getByText('casper-wallet-playground.make.services')
page.getByText('cspr-wallet-playground.dev.make.services')
).toBeVisible();
await popupExpect(
page.getByRole('button', { name: 'Disconnect' })
Expand Down Expand Up @@ -92,7 +92,7 @@ popup.describe('Popup UI: connect account', () => {
page.getByText('Casper Wallet Playground')
).toBeVisible();
await popupExpect(
page.getByText('casper-wallet-playground.make.services')
page.getByText('cspr-wallet-playground.dev.make.services')
).toBeVisible();
await popupExpect(
page.getByRole('button', { name: 'Disconnect' })
Expand Down
52 changes: 52 additions & 0 deletions e2e-tests/popup/import-torus-account/import-torus-account.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
import {
ACCOUNT_NAMES,
IMPORTED_TORUS_ACCOUNT,
torusSecretKeyHex
} from '../../constants';
import { popup, popupExpect } from '../../fixtures';

popup.describe('Popup UI: import account with file', () => {
popup('should import torus account', async ({ unlockVault, popupPage }) => {
await unlockVault();

await popupPage.getByTestId('menu-open-icon').click();
await popupPage.getByText('Import Torus account').click();

await popupExpect(
popupPage.getByRole('heading', {
name: 'Import account from Torus Wallet'
})
).toBeVisible();

await popupPage.getByRole('button', { name: 'Next' }).click();

await popupPage
.getByPlaceholder('Secret key', { exact: true })
.fill(torusSecretKeyHex);
await popupPage
.getByPlaceholder('Account name', { exact: true })
.fill(IMPORTED_TORUS_ACCOUNT.accountName);

await popupPage.getByRole('button', { name: 'Import' }).click();

await popupExpect(
popupPage.getByRole('heading', {
name: 'Your account was successfully imported'
})
).toBeVisible();

await popupPage.getByRole('button', { name: 'Done' }).click();

await popupPage.getByTestId('connection-status-modal').click();

await popupExpect(
popupPage.getByText(ACCOUNT_NAMES.importedTorusAccountName)
).toBeVisible();
await popupExpect(
popupPage.getByText(IMPORTED_TORUS_ACCOUNT.truncatedPublicKey)
).toBeVisible();
await popupExpect(
popupPage.getByText('Imported', { exact: true })
).toBeVisible();
});
});
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "Casper Wallet",
"description": "Securely manage your CSPR tokens and interact with dapps with the self-custody wallet for the Casper blockchain.",
"version": "1.8.3",
"version": "1.8.4",
"author": "MAKE LLC",
"scripts": {
"devtools:redux": "redux-devtools --hostname=localhost",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ export function ImportAccountWithFileSuccessContentPage() {
<ParagraphContainer top={SpacingSize.Medium}>
<Typography type="body" color="contentSecondary">
<Trans t={t}>
Imported accounts are distinguished by an ‘IMPORTED’ badge in the
Imported accounts are distinguished by an ‘IMPORTED’ icon in the
account lists.
</Trans>
</Typography>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import { Trans, useTranslation } from 'react-i18next';

import {
ContentContainer,
IllustrationContainer,
InputsContainer,
ParagraphContainer,
SpacingSize
Expand Down Expand Up @@ -44,16 +43,9 @@ export function ImportAccountWithFileUploadPageContent({

return (
<ContentContainer>
<IllustrationContainer>
<SvgIcon
src="assets/illustrations/import-secret-key.svg"
width={200}
height={120}
/>
</IllustrationContainer>
<ParagraphContainer top={SpacingSize.XL}>
<Typography type="header">
<Trans t={t}>Import account from secret key file</Trans>
<Trans t={t}>Account details</Trans>
</Typography>
</ParagraphContainer>
<InputsContainer>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ export function useSecretKeyFileReader({

return onSuccess({
imported: true,
name,
name: name.trim(),
publicKey: publicKeyHex,
secretKey: secretKeyBase64
});
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import {
ParagraphContainer,
SpacingSize
} from '@libs/layout';
import { SvgIcon, Tag, Typography } from '@libs/ui/components';
import { SvgIcon, Typography } from '@libs/ui/components';

export function ImportAccountWithFileContentPage() {
const { t } = useTranslation();
Expand All @@ -28,11 +28,6 @@ export function ImportAccountWithFileContentPage() {
<Trans t={t}>Import account from secret key file</Trans>
</Typography>
</ParagraphContainer>
<ParagraphContainer top={SpacingSize.Medium}>
<Tag>
<Trans t={t}>Imported</Trans>
</Tag>
</ParagraphContainer>
<ParagraphContainer top={SpacingSize.Medium}>
<Typography type="body" color="contentSecondary">
<Trans t={t}>
Expand Down
5 changes: 5 additions & 0 deletions src/apps/popup/app-router.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import { CreateAccountPage } from '@popup/pages/create-account';
import { DownloadSecretKeysPage } from '@popup/pages/download-secret-keys';
import { DownloadedSecretKeysPage } from '@popup/pages/downloaded-secret-keys';
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';
Expand Down Expand Up @@ -277,6 +278,10 @@ function AppRoutes() {
path={RouterPath.ContactDetails}
element={<ContactDetailsPage />}
/>
<Route
path={RouterPath.ImportAccountFromTorus}
element={<ImportAccountFromTorusPage />}
/>
</Routes>
);
}
2 changes: 1 addition & 1 deletion src/apps/popup/pages/home/components/tokens-list/utils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ export const formatErc20TokenBalance = (
symbol: token?.metadata?.symbol || '',
decimals: token?.metadata?.decimals,
amountFiat: null,
icon: token.icon_url || 'assets/icons/erc20-avatar.svg'
icon: token.icon_url || 'assets/icons/cep18-contract-icon.svg'
};
})
.sort((a, b) => {
Expand Down
44 changes: 44 additions & 0 deletions src/apps/popup/pages/import-account-from-torus/failure.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
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';

interface ImportTorusAccountFailureProps {
message?: string;
}

export const ImportTorusAccountFailure = ({
message
}: ImportTorusAccountFailureProps) => {
const { t } = useTranslation();

return (
<ContentContainer>
<IllustrationContainer>
<SvgIcon
src="assets/illustrations/error.svg"
width={200}
height={120}
/>
</IllustrationContainer>
<ParagraphContainer top={SpacingSize.XL}>
<Typography type="header">
<Trans t={t}>Something went wrong</Trans>
</Typography>
</ParagraphContainer>
<ParagraphContainer top={SpacingSize.Medium}>
<Typography type="body" color="contentSecondary">
{message
? message
: 'We couldn’t import your account. Please confirm that you’re importing a secret key (not to be confused with your public key).'}
</Typography>
</ParagraphContainer>
</ContentContainer>
);
};
56 changes: 56 additions & 0 deletions src/apps/popup/pages/import-account-from-torus/import-form.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
import React from 'react';
import { FieldErrors, UseFormRegister } from 'react-hook-form';
import { Trans, useTranslation } from 'react-i18next';

import {
ContentContainer,
InputsContainer,
ParagraphContainer,
SpacingSize
} from '@libs/layout';
import {
FormField,
FormFieldStatus,
Input,
TextArea,
Typography
} from '@libs/ui/components';
import { ImportAccountFromTorusFromValues } from '@libs/ui/forms/import-account-from-torus';

interface ImportTorusFormProps {
register: UseFormRegister<ImportAccountFromTorusFromValues>;
errors: FieldErrors<ImportAccountFromTorusFromValues>;
}

export const ImportTorusForm = ({ register, errors }: ImportTorusFormProps) => {
const { t } = useTranslation();

return (
<ContentContainer>
<ParagraphContainer top={SpacingSize.XL}>
<Typography type="header">
<Trans t={t}>Account details</Trans>
</Typography>
</ParagraphContainer>
<InputsContainer>
<FormField
statusText={errors.secretKey?.message}
status={!!errors.secretKey ? FormFieldStatus.Error : undefined}
>
<TextArea
{...register('secretKey')}
placeholder={t('Secret key')}
type="bodyHash"
/>
</FormField>
<Input
type="text"
placeholder={t('Account name')}
{...register('name')}
error={!!errors.name}
validationText={errors.name?.message}
/>
</InputsContainer>
</ContentContainer>
);
};
Loading

0 comments on commit 02a039f

Please sign in to comment.