chore: replaced integration lib in polkadot extension feature (#2991)

novasamatech · Jan 17, 2025 · 68c1aa8 · 68c1aa8
1 parent a376619
commit 68c1aa8
Show file tree

Hide file tree

Showing 14 changed files with 151 additions and 87 deletions.
diff --git a/package.json b/package.json
@@ -74,7 +74,6 @@
     "@ariakit/react": "0.4.14",
     "@headlessui/react": "^1.7.17",
     "@polkadot/api": "15.3.1",
-    "@polkadot/extension-dapp": "0.58.1",
     "@polkadot/keyring": "13.3.1",
     "@polkadot/react-identicon": "3.11.3",
     "@polkadot/rpc-provider": "15.3.1",
@@ -97,6 +96,7 @@
     "@substrate/connect": "2.1.1",
     "@substrate/txwrapper-orml": "7.5.3",
     "@substrate/txwrapper-polkadot": "7.5.3",
+    "@talismn/connect-wallets": "1.2.8",
     "@walletconnect/core": "2.17.3",
     "@walletconnect/sign-client": "2.17.3",
     "@walletconnect/types": "2.17.3",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/renderer/features/operations/OperationSign/model/polkadotExtensionSign.ts b/src/renderer/features/operations/OperationSign/model/polkadotExtensionSign.ts
@@ -1,5 +1,5 @@
 import { type ApiPromise } from '@polkadot/api';
-import { web3Enable, web3FromAddress } from '@polkadot/extension-dapp';
+import { getWalletBySource } from '@talismn/connect-wallets';
 import { createEffect, createStore, sample } from 'effector';
 import { createGate } from 'effector-react';
 
@@ -8,6 +8,7 @@ import { series } from '@/shared/effector';
 import { assert, createTxMetadata, toAddress } from '@/shared/lib/utils';
 import { networkModel } from '@/entities/network';
 import { transactionService } from '@/entities/transaction';
+import { polkadotExtensionService } from '@/features/polkadot-extension-wallet';
 import { type SigningPayload } from '../lib/types';
 
 type Step = 'idle' | 'signing' | 'rejected' | 'failed' | 'success';
@@ -30,24 +31,29 @@ type SetupParams = {
 const signFx = createEffect(async ({ payload, apis }: SetupParams): Promise<SignResponse> => {
   const api = apis[payload.transaction.chainId];
   const account = payload.signatory || payload.account;
+
   assert(api, `Api from chain ${payload.transaction.chainId} not found.`);
   assert(account, 'Signing account not found');
 
+  if (!polkadotExtensionService.isPolkadotExtensionAccount(account)) throw new Error('Incorrect account for signing');
+
   const address = toAddress(account.accountId, { prefix: payload.chain.addressPrefix });
-  const metadata = await createTxMetadata(address, api);
+  const wallet = getWalletBySource(account.extension);
 
+  assert(wallet, 'Wallet not found');
+
+  const metadata = await createTxMetadata(address, api);
   const txPayload = transactionService.createPayloadWithMetadata(payload.transaction, api, metadata);
 
   transactionService.logPayload([txPayload]);
 
   // Init connection
-  await web3Enable('Nova Spektr');
-  // Fetching actual account injector
-  const injector = await web3FromAddress(address);
+  await wallet.enable('Nova Spektr');
   // Method for signing
-  const signPayload = injector?.signer?.signPayload;
+  const signPayload = wallet?.signer?.signPayload;
   assert(signPayload, 'Signer not found');
 
+  // @ts-expect-error No types for signPayload method
   const { signature } = await signPayload(txPayload.unsigned);
 
   return {
@@ -61,7 +67,7 @@ const signAllFx = series(signFx);
 sample({
   clock: flow.open,
   source: networkModel.$apis,
-  fn: (apis, { payloads }) => {
+  fn(apis, { payloads }) {
     return payloads.map((payload) => ({
       payload,
       apis,

diff --git a/src/renderer/features/polkadot-extension-wallet/components/PairingModal.tsx b/src/renderer/features/polkadot-extension-wallet/components/PairingModal.tsx
@@ -10,12 +10,15 @@ import { Box, Carousel, Field, Input, Modal, Select } from '@/shared/ui-kit';
 import { accountsService } from '@/domains/network';
 import { networkModel } from '@/entities/network';
 import { pairingForm } from '../model/pairingForm';
+import { type ExtensionType } from '../types';
 
 import { EmptyState } from './EmptyState';
 
-type Props = PropsWithChildren;
+type Props = PropsWithChildren<{
+  extension: ExtensionType;
+}>;
 
-export const PairingModal = ({ children }: Props) => {
+export const PairingModal = ({ extension, children }: Props) => {
   const { t } = useI18n();
 
   const open = useUnit(pairingForm.flow.status);
@@ -46,11 +49,11 @@ export const PairingModal = ({ children }: Props) => {
 
   const toggleModal = (open: boolean) => {
     if (open) {
-      pairingForm.flow.open();
+      pairingForm.flow.open({ extension });
     } else {
       setName('');
       setSelectedAccount(null);
-      pairingForm.flow.close();
+      pairingForm.flow.close({ extension: null });
     }
   };
 
@@ -66,7 +69,7 @@ export const PairingModal = ({ children }: Props) => {
                 <Carousel.Item id="idle" index={0}>
                   <Box gap={4}>
                     <SmallTitleText>{t('onboarding.polkadotExtension.permissionStep')}</SmallTitleText>
-                    <Button onClick={() => pairingForm.requestPermission()}>
+                    <Button onClick={() => pairingForm.reconnect()}>
                       {t('onboarding.polkadotExtension.requestPairing')}
                     </Button>
                   </Box>
@@ -104,7 +107,7 @@ export const PairingModal = ({ children }: Props) => {
                 <Carousel.Item id="rejected" index={3}>
                   <Box gap={4}>
                     <SmallTitleText>{t('onboarding.polkadotExtension.requestRejected')}</SmallTitleText>
-                    <Button onClick={() => pairingForm.requestPermission()}>
+                    <Button onClick={() => pairingForm.reconnect()}>
                       {t('onboarding.polkadotExtension.askPermissionAgain')}
                     </Button>
                   </Box>

diff --git a/src/renderer/features/polkadot-extension-wallet/components/WalletGroup.tsx b/src/renderer/features/polkadot-extension-wallet/components/WalletGroup.tsx
@@ -3,7 +3,7 @@ import { memo } from 'react';
 import { type Wallet } from '@/shared/core';
 import { Slot, createSlot } from '@/shared/di';
 import { performSearch } from '@/shared/lib/utils';
-import { Icon } from '@/shared/ui';
+import { Icon, type IconNames } from '@/shared/ui';
 import { Accordion, Box } from '@/shared/ui-kit';
 import { WalletCardMd } from '@/entities/wallet';
 import { walletsFiatBalanceFeature } from '@/features/wallet-fiat-balance';
@@ -17,12 +17,13 @@ export const walletActionsSlot = createSlot<{ wallet: Wallet }>();
 
 type Props = {
   title: string;
+  icon: IconNames;
   wallets: Wallet[];
   query: string;
   onSelect: (wallet: Wallet) => unknown;
 };
 
-export const WalletGroup = memo(({ wallets, query, title, onSelect }: Props) => {
+export const WalletGroup = memo(({ wallets, icon, query, title, onSelect }: Props) => {
   const filteredWallets = performSearch({
     query,
     records: wallets,
@@ -37,7 +38,7 @@ export const WalletGroup = memo(({ wallets, query, title, onSelect }: Props) =>
     <Box padding={[1, 0, 0]}>
       <Accordion initialOpen>
         <Accordion.Trigger>
-          <Icon name="polkadotExtensionBackground" size={20} />
+          <Icon name={icon} size={20} />
           <span>{title}</span>
           <span className="text-text-tertiary">{wallets.length}</span>
         </Accordion.Trigger>

diff --git a/src/renderer/features/polkadot-extension-wallet/constants.ts b/src/renderer/features/polkadot-extension-wallet/constants.ts
@@ -0,0 +1,10 @@
+import { type IconNames } from '@/shared/ui';
+
+import { type ExtensionType } from './types';
+
+export const walletIcon: Record<ExtensionType, { icon: IconNames; onboarding: IconNames }> = {
+  'polkadot-js': {
+    icon: 'polkadotExtensionBackground',
+    onboarding: 'polkadotExtensionOnboarding',
+  },
+};
diff --git a/src/renderer/features/polkadot-extension-wallet/index.tsx b/src/renderer/features/polkadot-extension-wallet/index.tsx
@@ -12,6 +12,7 @@ import { onboardingActionsSlot } from '@/pages/Onboarding';
 
 import { PairingModal } from './components/PairingModal';
 import { WalletGroup, walletActionsSlot } from './components/WalletGroup';
+import { walletIcon } from './constants';
 import { polkadotExtensionWalletFeature } from './model/feature';
 import { wallets } from './model/wallets';
 import { polkadotExtensionService } from './service';
@@ -31,16 +32,16 @@ polkadotExtensionWalletFeature.inject(accountsService.accountActionPermissionAny
 polkadotExtensionWalletFeature.inject(walletIconSlot, ({ wallet, size }) => {
   if (!polkadotExtensionService.isPolkadotExtensionWallet(wallet)) return null;
 
-  return <Icon name="polkadotExtensionBackground" size={size} />;
+  return <Icon name={walletIcon[wallet.extension].icon} size={size} />;
 });
 
 polkadotExtensionWalletFeature.inject(walletPairingDropdownOptionsSlot, {
   order: 3,
   render({ t }) {
     return (
-      <PairingModal>
+      <PairingModal extension="polkadot-js">
         <Dropdown.Item>
-          <Icon name="polkadotExtensionBackground" size={20} />
+          <Icon name={walletIcon['polkadot-js'].icon} size={20} />
           {t('wallets.addPolkadotExtension')}
         </Dropdown.Item>
       </PairingModal>
@@ -54,11 +55,11 @@ polkadotExtensionWalletFeature.inject(onboardingActionsSlot, {
     const { t } = useI18n();
 
     return (
-      <PairingModal>
+      <PairingModal extension="polkadot-js">
         <WalletOnboardingCard
           title={t('onboarding.welcome.polkadotExtensionTitle')}
           description={t('onboarding.welcome.polkadotExtensionDescription')}
-          iconName="polkadotExtensionOnboarding"
+          iconName={walletIcon['polkadot-js'].onboarding}
           testId={TEST_IDS.ONBOARDING.POLKADOT_EXTENSION_BUTTON}
         />
       </PairingModal>
@@ -70,12 +71,13 @@ polkadotExtensionWalletFeature.inject(walletGroupSlot, {
   order: 0,
   render({ query, onSelect }) {
     const { t } = useI18n();
-    const walletsList = useUnit(wallets.$list);
+    const polkadot = useUnit(wallets.$polkadot);
 
     return (
       <WalletGroup
         title={t('wallets.polkadotExtensionLabel')}
-        wallets={walletsList}
+        icon={walletIcon['polkadot-js'].icon}
+        wallets={polkadot}
         query={query}
         onSelect={onSelect}
       />