fix: small ui fixes for pjs extensions feature (#2974)

src/renderer/entities/balance/model/balance-model.ts

@@ -65,4 +65,7 @@ export const balanceModel = {
     balancesUpdated,
     balancesRemoved,
   },
+  __test: {
+    removeBalancesFx,
+  },
 };

src/renderer/entities/operations/ui/SignButton.tsx

@@ -5,7 +5,7 @@ import { type IconNames } from '@/shared/ui/Icon/data';
 
 const WalletIcon: Record<SignableWalletFamily, IconNames> = {
   [WalletType.POLKADOT_VAULT]: 'vault',
-  [WalletType.POLKADOT_EXTENSION]: 'keyCustom',
+  [WalletType.POLKADOT_EXTENSION]: 'polkadotExtensionBackground',
   [WalletType.WALLET_CONNECT]: 'walletConnect',
   [WalletType.NOVA_WALLET]: 'novaWallet',
   // legacy

src/renderer/entities/wallet/model/wallet-model.ts

@@ -182,7 +182,8 @@ const multishardCreatedFx = createEffect(
 );
 
 const removeWalletFx = createEffect(async (wallet: Wallet): Promise<ID> => {
-  await Promise.all([accounts.deleteAccounts(wallet.accounts), storageService.wallets.delete(wallet.id)]);
+  await storageService.wallets.delete(wallet.id);
+  await accounts.deleteAccounts(wallet.accounts);
 
   return wallet.id;
 });
@@ -424,5 +425,6 @@ export const walletModel = {
   __test: {
     $rawWallets,
     walletCreatedFx,
+    removeWalletFx,
   },
 };

src/renderer/entities/wallet/ui/WalletIcon/WalletIcon.tsx

@@ -6,7 +6,7 @@ type WalletIconTypes = WalletType | WalletIconType;
 
 const WalletIconNames: Record<WalletIconTypes, IconNames> = {
   [WalletType.POLKADOT_VAULT]: 'vaultBackground',
-  [WalletType.POLKADOT_EXTENSION]: 'keyCustom',
+  [WalletType.POLKADOT_EXTENSION]: 'polkadotExtensionBackground',
   [WalletType.SINGLE_PARITY_SIGNER]: 'vaultBackground',
   [WalletType.WATCH_ONLY]: 'watchOnlyBackground',
   [WalletType.MULTISIG]: 'multisigBackground',

src/renderer/features/polkadot-extension-wallet/components/WalletGroup.tsx

@@ -37,7 +37,7 @@ export const WalletGroup = memo(({ wallets, query, title, onSelect }: Props) =>
     <Box padding={[1, 0, 0]}>
       <Accordion initialOpen>
         <Accordion.Trigger>
-          <Icon name="keyCustom" />
+          <Icon name="polkadotExtensionBackground" size={20} />
           <span>{title}</span>
           <span className="text-text-tertiary">{wallets.length}</span>
         </Accordion.Trigger>

src/renderer/features/polkadot-extension-wallet/index.tsx

@@ -31,7 +31,7 @@ polkadotExtensionWalletFeature.inject(accountsService.accountActionPermissionAny
 polkadotExtensionWalletFeature.inject(walletIconSlot, ({ wallet, size }) => {
   if (!polkadotExtensionService.isPolkadotExtensionWallet(wallet)) return null;
 
-  return <Icon name="keyCustom" size={size} />;
+  return <Icon name="polkadotExtensionBackground" size={size} />;
 });
 
 polkadotExtensionWalletFeature.inject(walletPairingDropdownOptionsSlot, {
@@ -40,7 +40,7 @@ polkadotExtensionWalletFeature.inject(walletPairingDropdownOptionsSlot, {
     return (
       <PairingModal>
         <Dropdown.Item>
-          <Icon name="keyCustom" size={20} />
+          <Icon name="polkadotExtensionBackground" size={20} />
           {t('wallets.addPolkadotExtension')}
         </Dropdown.Item>
       </PairingModal>
@@ -58,7 +58,7 @@ polkadotExtensionWalletFeature.inject(onboardingActionsSlot, {
         <WalletOnboardingCard
           title={t('onboarding.welcome.polkadotExtensionTitle')}
           description={t('onboarding.welcome.polkadotExtensionDescription')}
-          iconName="keyCustom"
+          iconName="polkadotExtensionOnboarding"
           testId={TEST_IDS.ONBOARDING.POLKADOT_EXTENSION_BUTTON}
         />
       </PairingModal>

src/renderer/features/polkadot-extension-wallet/model/pairingForm.ts

@@ -16,7 +16,6 @@ type AccountDraft = AnyAccountDraft<PolkadotExtensionAccount>;
 
 const flow = createGate();
 
-const requestPermission = createEvent();
 const create = createEvent<{ name: string; account: AccountDraft }>();
 
 const $step = createStore<Step>('idle');
@@ -44,22 +43,25 @@ const $accounts = $rawAccounts.map((accounts) => {
   });
 });
 
-const getInjectedExtensionsFx = createEffect(() => web3Enable('Nova Spektr'));
+const requestInjectedExtensionsFx = createEffect(() => web3Enable('Nova Spektr'));
 const requestAccessToAccountsFx = createEffect(() => web3Accounts());
 const createWalletFx = attach({ effect: walletModel.createWallet });
 
+const receivedEmptyAccountList = requestAccessToAccountsFx.doneData.filter({ fn: (a) => a.length === 0 });
+const receivedAccountList = requestAccessToAccountsFx.doneData.filter({ fn: (a) => a.length > 0 });
+
 sample({
-  clock: requestPermission,
-  target: getInjectedExtensionsFx,
+  clock: flow.open,
+  target: requestInjectedExtensionsFx,
 });
 
 sample({
-  clock: getInjectedExtensionsFx.doneData,
+  clock: requestInjectedExtensionsFx.doneData,
   target: $extensions,
 });
 
 sample({
-  clock: getInjectedExtensionsFx.doneData,
+  clock: requestInjectedExtensionsFx.doneData,
   target: requestAccessToAccountsFx,
 });
 
@@ -98,19 +100,19 @@ sample({
 });
 
 sample({
-  clock: requestPermission,
+  clock: requestInjectedExtensionsFx,
   fn: () => 'pairing' as const,
   target: $step,
 });
 
 sample({
-  clock: [getInjectedExtensionsFx.fail, requestAccessToAccountsFx.fail],
+  clock: [receivedEmptyAccountList, requestInjectedExtensionsFx.fail, requestAccessToAccountsFx.fail],
   fn: () => 'rejected' as const,
   target: $step,
 });
 
 sample({
-  clock: requestAccessToAccountsFx.done,
+  clock: receivedAccountList,
   fn: () => 'select' as const,
   target: $step,
 });
@@ -123,6 +125,6 @@ export const pairingForm = {
   $extensions,
 
   create,
-  requestPermission,
+  requestPermission: requestInjectedExtensionsFx,
   requestAccessToAccounts: requestAccessToAccountsFx,
 };

src/renderer/features/wallet-details/ui/wallets/SimpleWalletDetails.tsx

@@ -47,7 +47,8 @@ export const SimpleWalletDetails = ({ wallet, onClose }: Props) => {
   const [chains, setChains] = useState<Chain[]>([]);
   const [tab, setTab] = useState('accounts');
 
-  const isEthereumBased = accountUtils.isEthereumBased(wallet.accounts[0]);
+  const firstAccount = wallet.accounts.at(0);
+  const isEthereumBased = firstAccount ? accountUtils.isEthereumBased(firstAccount) : false;
 
   useEffect(() => {
     const filteredChains = Object.values(allChains).filter(c => {
@@ -102,12 +103,9 @@ export const SimpleWalletDetails = ({ wallet, onClose }: Props) => {
     </Dropdown>
   );
 
-  const account = wallet.accounts.at(0);
-  if (!account) return null;
-
   const accounts = useMemo(
-    () => Object.values(chains).map(chain => [chain, account.accountId] as const),
-    [chains, account],
+    () => (firstAccount ? Object.values(chains).map(chain => [chain, firstAccount.accountId] as const) : []),
+    [chains, firstAccount],
   );
 
   return (

src/renderer/features/wallet-pairing-wallet-connect/model/pairingForm.ts

@@ -42,8 +42,8 @@ const createWalletConnectWalletFx = attach({ effect: walletModel.createWallet })
 
 sample({
   clock: createWallet,
-  source: { accounts: $accounts, session: $session },
-  fn({ accounts, session }, { name }) {
+  source: { accounts: $accounts, session: $session, walletType: flow.state },
+  fn({ accounts, session, walletType }, { name }) {
     const wcAccounts = accounts.map<Omit<WcAccount, 'id' | 'walletId'>>(({ accountId, chain }) => {
       return {
         type: 'chain',
@@ -63,7 +63,7 @@ sample({
       accounts: wcAccounts,
       wallet: {
         name: name.trim(),
-        type: WalletType.WALLET_CONNECT,
+        type: walletType === 'novawallet' ? WalletType.NOVA_WALLET : WalletType.WALLET_CONNECT,
         signingType: SigningType.WALLET_CONNECT,
       },
     };

src/renderer/features/wallets/ForgetWallet/model/__tests__/forget-wallet-model.test.ts

@@ -14,6 +14,7 @@ import {
 import { TEST_ACCOUNTS, TEST_CHAIN_ID } from '@/shared/lib/utils';
 import { createAccountId } from '@/shared/mocks';
 import { type AnyAccount, accounts } from '@/domains/network';
+import { balanceModel } from '@/entities/balance';
 import { proxyModel } from '@/entities/proxy';
 import { walletModel } from '@/entities/wallet';
 import { forgetWalletModel } from '../forget-wallet-model';
@@ -108,21 +109,22 @@ describe('features/wallets/ForgetModel', () => {
     const spyDeleteWallet = jest.fn();
     const spyDeleteAccounts = jest.fn().mockImplementation((accounts: AnyAccount[]) => accounts);
 
-    storageService.wallets.delete = spyDeleteWallet;
-
     const scope = fork({
       values: [
         [walletModel.__test.$rawWallets, [wallet]],
         [accounts.__test.$list, wallet.accounts],
       ],
-      handlers: [[accounts.deleteAccounts, spyDeleteAccounts]],
+      handlers: [
+        [accounts.deleteAccounts, spyDeleteAccounts],
+        [walletModel.__test.removeWalletFx, spyDeleteWallet],
+        [balanceModel.__test.removeBalancesFx, () => {}],
+      ],
     });
 
     await allSettled(forgetWalletModel.events.callbacksChanged, { scope, params: { onDeleteFinished: () => {} } });
     await allSettled(forgetWalletModel.events.forgetWallet, { scope, params: wallet });
 
-    expect(spyDeleteWallet).toHaveBeenCalledWith(1);
-    expect(spyDeleteAccounts).toHaveBeenCalledWith(wallet.accounts);
+    expect(spyDeleteWallet).toHaveBeenCalledWith(wallet);
   });
 
   test('should delete proxied accounts, wallets and proxyGroups', async () => {

src/renderer/shared/ui/Icon/data/walletType.tsx

@@ -7,6 +7,8 @@ import MultisigBackgroundIcon from '@/shared/assets/images/walletTypes/multisigB
 import NovaWalletIcon from '@/shared/assets/images/walletTypes/novaWallet.svg?jsx';
 import NovaWalletBackgroundIcon from '@/shared/assets/images/walletTypes/novaWalletBackground.svg?jsx';
 import NovaWalletOnboardingIcon from '@/shared/assets/images/walletTypes/novaWalletOnboarding.svg?jsx';
+import PolkadotExtensionBackgroundIcon from '@/shared/assets/images/walletTypes/polkadotExtensionBackground.svg?jsx';
+import PolkadotExtensionOnboardingIcon from '@/shared/assets/images/walletTypes/polkadotExtensionOnboarding.svg?jsx';
 import ProxiedIcon from '@/shared/assets/images/walletTypes/proxied.svg?jsx';
 import ProxiedBackgroundIcon from '@/shared/assets/images/walletTypes/proxiedBackground.svg?jsx';
 import VaultIcon from '@/shared/assets/images/walletTypes/vault.svg?jsx';
@@ -36,6 +38,8 @@ const WalletTypeImages = {
   walletConnectOnboarding: { svg: WalletConnectOnboardingIcon },
   proxied: { svg: ProxiedIcon },
   proxiedBackground: { svg: ProxiedBackgroundIcon },
+  polkadotExtensionOnboarding: { svg: PolkadotExtensionOnboardingIcon },
+  polkadotExtensionBackground: { svg: PolkadotExtensionBackgroundIcon },
 } as const;
 
 export type WalletImages = keyof typeof WalletTypeImages;