problem: password field is inconsistent and uses plain-html

solution: refactor and ensure it works the same way on all places

packages/core/tsconfig.json

@@ -1,16 +1,8 @@
 {
+ "extends": "../../tsconfig.json",
  "compilerOptions": {
- "composite": true,
- "esModuleInterop": true,
- "forceConsistentCasingInFileNames": true,
- "module": "CommonJS",
- "moduleResolution": "Node",
  "outDir": "lib/",
  "rootDir": "src/",
- "skipLibCheck": true,
- "sourceMap": true,
- "strict": true,
- "target": "ES2021",
  "typeRoots": [
  "../../node_modules/@types",
  "node_modules/@types",

packages/desktop/src/main/index.ts

@@ -93,13 +93,13 @@ app.on('ready', () => {
 
  logger.info('Connect to', apiAccess.address);
 
- const persistentStateDir = dataDir == null ? null : resolvePath(joinPath(dataDir, 'state'));
+ const persistentStateDir = dataDir == null ? undefined : resolvePath(joinPath(dataDir, 'state'));
 
  logger.info(`Setup Persistent State in ${persistentStateDir ?? 'default directory'}`);
 
  const persistentState = new PersistentStateManager(persistentStateDir);
 
- const vaultDir = dataDir == null ? null : resolvePath(joinPath(dataDir, 'vault'));
+ const vaultDir = dataDir == null ? undefined : resolvePath(joinPath(dataDir, 'vault'));
 
  logger.info(`Setup Vault in ${vaultDir ?? 'default directory'}`);
 

packages/desktop/src/renderer/store/cache/allowances.ts

@@ -15,23 +15,23 @@ export function initAllowancesState(api: WalletApi, backendApi: BackendApi, stor
  );
 
  if (entry != null) {
- const {
- address: { value: address },
- } = entry;
+ const { address } = entry;
 
- const available = tokens.selectors.selectBalance(state, blockchain, owner, token)?.number.toString() ?? '0';
+ if (address != null) {
+ const available = tokens.selectors.selectBalance(state, blockchain, owner, token)?.number.toString() ?? '0';
 
- store.dispatch(
- allowances.actions.initAddressAllowance({
- address,
- available,
- blockchain,
- allowance: amount,
- contractAddress: token,
- ownerAddress: owner,
- spenderAddress: spender,
- }) as unknown as Action,
- );
+ store.dispatch(
+ allowances.actions.initAddressAllowance({
+ available,
+ blockchain,
+ address: address.value,
+ allowance: amount,
+ contractAddress: token,
+ ownerAddress: owner,
+ spenderAddress: spender,
+ }) as unknown as Action,
+ );
+ }
  }
  }),
  ),

packages/desktop/src/renderer/store/cache/balances.ts

@@ -3,10 +3,12 @@ import { EthereumAddress, PersistentState, WalletApi } from '@emeraldwallet/core
 import { IState, accounts, tokens } from '@emeraldwallet/store';
 import { Action, Store } from 'redux';
 
-type Balances = {
+interface Balances {
  coinBalances: PersistentState.Balance[];
  tokenBalances: PersistentState.Balance[];
-};
+}
+
+type EntriesByAddress = Record<string, WalletEntry[]>;
 
 export function initBalancesState(api: WalletApi, store: Store<IState>): void {
  const entries = accounts.selectors.allEntries(store.getState());
@@ -57,10 +59,13 @@ export function initBalancesState(api: WalletApi, store: Store<IState>): void {
  { coinBalances: [], tokenBalances: [] },
  );
 
- const entryByAddress = Object.entries(balanceByIdentifier).reduce<Record<string, WalletEntry[]>>(
+ const entryByAddress = Object.entries(balanceByIdentifier).reduce<EntriesByAddress>(
  (carry, [identifier, balances]) => {
- return balances.reduce(
- (balancesCarry, balance) => ({ ...balancesCarry, [balance.address]: entryByIdentifier.get(identifier) }),
+ return balances.reduce<EntriesByAddress>(
+ (balancesCarry, balance) => ({
+ ...balancesCarry,
+ [balance.address]: entryByIdentifier.get(identifier) ?? [],
+ }),
  carry,
  );
  },

packages/desktop/src/renderer/store/store.ts

@@ -142,7 +142,11 @@ function startSync(): void {
  });
 
  triggers.onceAccountsLoaded(store).then(() => {
- RemoteCache.get('rates').then((rates) => store.dispatch(settings.actions.setRates(JSON.parse(rates))));
+ RemoteCache.get('rates').then((rates) => {
+ if (rates != null) {
+ store.dispatch(settings.actions.setRates(JSON.parse(rates)));
+ }
+ });
 
  triggers.onceTokenBalancesLoaded(store).then(() => initAllowancesState(api, backendApi, store));
 

packages/desktop/tsconfig.base.json

@@ -1,14 +1,9 @@
 {
+ "extends": "../../tsconfig.json",
  "compilerOptions": {
- "esModuleInterop": true,
+ "composite": false,
  "jsx": "react",
- "module": "CommonJS",
- "moduleResolution": "Node",
- "resolveJsonModule": true,
- "skipLibCheck": true,
- "sourceMap": true,
- "strict": false,
- "target": "ES2021"
+ "resolveJsonModule": true
  },
  "files": [
  "commit-data.json",

packages/electron-app/tsconfig.json

@@ -1,15 +1,8 @@
 {
+ "extends": "../../tsconfig.json",
  "compilerOptions": {
- "composite": true,
- "esModuleInterop": true,
- "module": "CommonJS",
- "moduleResolution": "Node",
  "outDir": "lib/",
- "rootDir": "src/",
- "skipLibCheck": true,
- "sourceMap": true,
- "strict": true,
- "target": "ES2021"
+ "rootDir": "src/"
  },
  "exclude": [
  "node_modules",

packages/persistent-state/tsconfig.json

@@ -1,16 +1,8 @@
 {
+ "extends": "../../tsconfig.json",
  "compilerOptions": {
- "composite": true,
- "esModuleInterop": true,
- "forceConsistentCasingInFileNames": true,
- "module": "CommonJS",
- "moduleResolution": "Node",
  "outDir": "lib/",
  "rootDir": "src/",
- "skipLibCheck": true,
- "sourceMap": true,
- "strict": true,
- "target": "ES2021",
  "typeRoots": [
  "../../node_modules/@types",
  "node_modules/@types",

packages/react-app/.storybook/tsconfig.json

@@ -1,29 +1,22 @@
 {
+ "extends": "../../../tsconfig.json",
  "compilerOptions": {
- "baseUrl": "src",
- "esModuleInterop": true,
+ "baseUrl": "../src",
+ "composite": false,
  "jsx": "react",
- "module": "CommonJS",
- "moduleResolution": "Node",
- "skipLibCheck": true,
- "sourceMap": true,
- "strict": true,
- "target": "ES2021",
  "resolveJsonModule": true,
  "rootDirs": [
- "src",
- "stories"
+ "../src",
+ "../stories"
  ],
  "typeRoots": [
- "node_modules/@types",
  "../../node_modules/@types"
  ]
  },
  "exclude": [
  "../../node_modules",
  "../src/**/*.spec.ts",
- "../src/**/*.spec.tsx",
- "node_modules"
+ "../src/**/*.spec.tsx"
  ],
  "include": [
  "../src/**/*.ts",

packages/react-app/src/app/vault/PasswordMigration/PasswordMigration.tsx

@@ -45,58 +45,67 @@ const useStyles = makeStyles(
 );
 
 interface DispatchProps {
- checkGlobalKey(password: string): Promise<boolean>;
  getLegacyItems(): Promise<OddPasswordItem[]>;
  goHome(): Promise<void>;
- upgradeLegacyItems(globalPassword: string, password: string): Promise<Uuid[]>;
+ upgradeLegacyItems(legacyPassword: string, globalPassword: string): Promise<Uuid[]>;
+ verifyGlobalKey(password: string): Promise<boolean>;
 }
 
 type PasswordType = OddPasswordItem & { upgraded?: boolean };
 
-const PasswordMigration: React.FC<DispatchProps> = ({ checkGlobalKey, getLegacyItems, goHome, upgradeLegacyItems }) => {
+const PasswordMigration: React.FC<DispatchProps> = ({
+ getLegacyItems,
+ goHome,
+ upgradeLegacyItems,
+ verifyGlobalKey,
+}) => {
  const styles = useStyles();
 
  const [initializing, setInitializing] = useState(true);
  const [upgrading, setUpgrading] = useState(false);
+ const [verifying, setVerifying] = React.useState(false);
 
  const [legacyItems, setLegacyItems] = React.useState<PasswordType[]>([]);
 
- const [globalPassword, setGlobalPassword] = React.useState('');
- const [password, setPassword] = React.useState('');
-
+ const [globalPassword, setGlobalPassword] = React.useState<string>();
  const [globalPasswordError, setGlobalPasswordError] = React.useState<string>();
- const [passwordError, setPasswordError] = React.useState<string>();
 
- const applyPassword = React.useCallback(async () => {
+ const [legacyPassword, setLegacyPassword] = React.useState<string>();
+ const [legacyPasswordError, setLegacyPasswordError] = React.useState<string>();
+
+ const applyPassword = async (): Promise<void> => {
+ if (globalPassword == null || legacyPassword == null || legacyPassword.length === 0) {
+ return;
+ }
+
  setGlobalPasswordError(undefined);
- setPasswordError(undefined);
+ setLegacyPasswordError(undefined);
+
+ setVerifying(true);
 
- const correctGlobalPassword = await checkGlobalKey(globalPassword);
+ const correctGlobalPassword = await verifyGlobalKey(globalPassword);
 
  if (!correctGlobalPassword) {
  setGlobalPasswordError('Incorrect password');
-
- return;
- }
-
- if (password.length === 0) {
- setPasswordError('Incorrect password');
+ setVerifying(false);
 
  return;
  }
 
  setUpgrading(true);
 
- const upgraded = await upgradeLegacyItems(globalPassword, password);
+ const upgraded = await upgradeLegacyItems(legacyPassword, globalPassword);
 
- setUpgrading(false);
  setLegacyItems(
  legacyItems.map((item) => ({
  ...item,
  upgraded: item.upgraded === true ? item.upgraded : upgraded.includes(item.id),
  })),
  );
- }, [legacyItems, globalPassword, password, checkGlobalKey, upgradeLegacyItems]);
+
+ setUpgrading(false);
+ setVerifying(false);
+ };
 
  React.useEffect(
  () => {
@@ -114,6 +123,9 @@ const PasswordMigration: React.FC<DispatchProps> = ({ checkGlobalKey, getLegacyI
 
  const allItemsUpgraded = legacyItems.reduce((carry, item) => carry && item.upgraded === true, true);
 
+ const processing = initializing || upgrading || verifying;
+ const applyDisabled = processing || (globalPassword?.length ?? 0) === 0 || (legacyPassword?.length ?? 0) === 0;
+
  return (
  <Page title="Setup Global Password">
  <Alert severity="info" style={{ marginBottom: 15 }}>
@@ -133,22 +145,22 @@ const PasswordMigration: React.FC<DispatchProps> = ({ checkGlobalKey, getLegacyI
  </TableRow>
  </TableHead>
  <TableBody>
- {legacyItems.map((password) => (
- <TableRow key={password.id}>
- <TableCell>{password.type === 'key' ? 'Private Key' : 'Seed'}</TableCell>
- <TableCell>{password.id}</TableCell>
+ {legacyItems.map((item) => (
+ <TableRow key={item.id}>
+ <TableCell>{item.type === 'key' ? 'Private Key' : 'Seed'}</TableCell>
+ <TableCell>{item.id}</TableCell>
  <TableCell>
- {upgrading && !password.upgraded ? (
+ {upgrading && !item.upgraded ? (
  <div className={styles.status}>
  <CircularProgress color="primary" className={styles.loader} size="1em" />
  <span>Migrating...</span>
  </div>
- ) : password.upgraded == null ? (
+ ) : item.upgraded == null ? (
  <div className={styles.status}>
  <WarningIcon style={{ color: orangeColor['500'] }} />
  <span>Migration required</span>
  </div>
- ) : password.upgraded ? (
+ ) : item.upgraded ? (
  <div className={styles.status}>
  <DoneIcon style={{ color: greenColor['500'] }} />
  <span>Migration successful</span>
@@ -169,23 +181,35 @@ const PasswordMigration: React.FC<DispatchProps> = ({ checkGlobalKey, getLegacyI
  <PasswordInput
  disabled={initializing}
  error={globalPasswordError}
+ minLength={1}
+ placeholder="Enter existing password"
+ showLengthNotice={false}
  onChange={(value) => setGlobalPassword(value)}
  />
  </FormRow>
  <FormRow>
  <FormLabel classes={{ root: styles.label }}>Old password (for any of the items above):</FormLabel>
- <PasswordInput disabled={initializing} error={passwordError} onChange={(value) => setPassword(value)} />
+ <PasswordInput
+ disabled={initializing}
+ error={legacyPasswordError}
+ minLength={1}
+ placeholder="Enter existing password"
+ showLengthNotice={false}
+ onChange={(value) => setLegacyPassword(value)}
+ />
  </FormRow>
  <FormRow>
  <FormLabel classes={{ root: styles.label }} />
  <ButtonGroup classes={{ container: styles.buttons }}>
  <Button
- disabled={initializing}
+ disabled={processing}
  label={allItemsUpgraded ? 'Continue' : 'Skip'}
  primary={allItemsUpgraded}
  onClick={goHome}
  />
- {!allItemsUpgraded && <Button disabled={initializing} label="Apply" primary={true} onClick={applyPassword} />}
+ {!allItemsUpgraded && (
+ <Button disabled={applyDisabled} label="Apply" primary={true} onClick={applyPassword} />
+ )}
  </ButtonGroup>
  </FormRow>
  </Page>
@@ -196,17 +220,17 @@ export default connect<unknown, DispatchProps>(
  null,
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  (dispatch: any) => ({
- checkGlobalKey(password) {
- return dispatch(accounts.actions.verifyGlobalKey(password));
- },
  getLegacyItems() {
  return dispatch(accounts.actions.getOddPasswordItems());
  },
  goHome() {
  return dispatch(screen.actions.gotoWalletsScreen());
  },
- upgradeLegacyItems(globalPassword, password) {
- return dispatch(accounts.actions.tryUpgradeOddItems(password, globalPassword));
+ upgradeLegacyItems(legacyPassword, globalPassword) {
+ return dispatch(accounts.actions.tryUpgradeOddItems(legacyPassword, globalPassword));
+ },
+ verifyGlobalKey(password) {
+ return dispatch(accounts.actions.verifyGlobalKey(password));
  },
  }),
 )(PasswordMigration);