Update dependencies and enhance Polkasafe repository functionality

package.json

@@ -67,8 +67,10 @@
     "luxon": "^2.5.2",
     "marked": "^4.0.15",
     "path": "^0.12.7",
-    "polkasafe": "^1.4.4",
+    "polkasafe": "^1.5.0",
     "quasar": "^2.12.7",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "reflect-metadata": "^0.1.13",
     "secp256k1": "^4.0.2",
     "serve-static": "^1.14.1",
@@ -108,6 +110,8 @@
     "@types/marked": "^4.0.3",
     "@types/node": "^16.11.9",
     "@types/query-string": "^6.3.0",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
     "@types/store": "^2.0.2",
     "@types/three": "^0.165.0",
     "@types/validator": "^13.7.11",
@@ -144,5 +148,20 @@
   "browser": {
     "crypto": false,
     "stream": false
+  },
+  "resolutions": {
+    "@polkadot/api": "16.4.2",
+    "@polkadot/types": "16.4.2",
+    "@polkadot/types-known": "16.4.2",
+    "@polkadot/util": "13.5.3",
+    "@polkadot/util-crypto": "13.5.3",
+    "@polkadot/keyring": "13.5.3",
+    "@polkadot/ui-keyring": "3.15.2",
+    "@polkadot/extension-dapp": "0.61.4",
+    "@polkadot/hw-ledger": "13.5.3",
+    "@polkadot/api-contract": "16.4.2",
+    "@polkadot/rpc-provider": "16.4.2",
+    "@polkadot/x-randomvalues": "13.5.3",
+    "@substrate/connect": "^1.0.0"
   }
 }

quasar.conf.js

@@ -12,8 +12,7 @@ const { configure } = require('quasar/wrappers');
 const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
 const ESLintPlugin = require('eslint-webpack-plugin');
 const path = require('path');
-require('dotenv').config()
-
+require('dotenv').config();
 
 module.exports = configure(function (ctx) {
   return {
@@ -84,6 +83,10 @@ module.exports = configure(function (ctx) {
         chain.plugin('eslint-webpack-plugin').use(ESLintPlugin, [{ extensions: ['js', 'vue'] }]);
         chain.resolve.symlinks(false);
         chain.resolve.alias.set('vue', path.resolve('./node_modules/vue'));
+
+        // Add React aliases to handle React dependencies in Vue project
+        chain.resolve.alias.set('react', path.resolve('./node_modules/react'));
+        chain.resolve.alias.set('react-dom', path.resolve('./node_modules/react-dom'));
       },
       extendWebpack(cfg) {
         cfg.plugins.push(new NodePolyfillPlugin({}));

src/modules/multisig/index.ts

@@ -1,8 +1,15 @@
+import { sortAddresses } from '@polkadot/util-crypto';
+
 export interface Multisig {
   multisigAccount: MultisigAddress;
   signatory: Signatory;
 }
 
+export interface ProxyAccount {
+  address: string;
+  name: string;
+}
+
 export interface MultisigAddress {
   signatories: string[];
   address: string;
@@ -13,8 +20,9 @@ export interface MultisigAddress {
   threshold: number;
   network: string;
   balance: string;
-  proxy?: string;
+  proxy?: Array<ProxyAccount>;
   isProxyAccount?: boolean;
+  multisigAddress?: string;
 }
 
 export interface Signatory {
@@ -30,22 +38,29 @@ export const addProxyAccounts = (input: MultisigAddress[]): MultisigAddress[] =>
   for (let account of input) {
     if (!uniqueAddresses.has(account.address)) {
       uniqueAddresses.add(account.address);
-
       // Memo: Normal account
       output.push({
         ...account,
+        signatories: sortAddresses(account.signatories),
         isProxyAccount: false,
       });
 
       // Memo: add Proxy account into the output array
-      if (account.proxy && !uniqueAddresses.has(account.proxy)) {
-        uniqueAddresses.add(account.proxy);
-        const proxyAccount = {
-          ...account,
-          address: account.proxy,
-          isProxyAccount: true,
-        };
-        output.push(proxyAccount);
+      if (account.proxy && Array.isArray(account.proxy) && account.proxy.length > 0) {
+        for (const proxy of account.proxy) {
+          if (!uniqueAddresses.has(proxy.address)) {
+            uniqueAddresses.add(proxy.address);
+            const sortedSignatories = sortAddresses(account.signatories);
+            output.push({
+              ...account,
+              multisigAddress: account.address,
+              address: proxy.address,
+              name: proxy.name,
+              signatories: sortedSignatories,
+              isProxyAccount: true,
+            });
+          }
+        }
       }
     }
   }

src/v2/repositories/IPolkasafeRepository.ts

@@ -1,13 +1,16 @@
 import { SubmittableExtrinsic } from '@polkadot/api/types';
 import { ISubmittableResult } from '@polkadot/types/types';
+import { ApiPromise } from '@polkadot/api';
 
 export interface IPolkasafeRepository {
-  sendMultisigTransaction(param: MultisigTransactionParam): Promise<string>;
+  getMultisigTransaction(
+    param: MultisigTransactionParam
+  ): Promise<SubmittableExtrinsic<'promise', ISubmittableResult>>;
 }
 
 export interface MultisigTransactionParam {
   multisigAddress: string;
+  api: ApiPromise;
   transaction: SubmittableExtrinsic<'promise', ISubmittableResult>;
-  tip: string;
-  isProxyAccount: boolean;
+  proxyAddress: string;
 }

src/v2/repositories/implementations/PolkasafeRepository.ts

@@ -4,31 +4,38 @@ import { Symbols } from 'src/v2/symbols';
 import { IPolkasafeRepository, MultisigTransactionParam } from 'src/v2/repositories';
 import { BN } from '@polkadot/util';
 import { PolkasafeWrapper } from 'src/types/polkasafe';
+import { SubmittableExtrinsic } from '@polkadot/api/types';
+import { ISubmittableResult } from '@polkadot/types/types';
 @injectable()
 export class PolkasafeRepository implements IPolkasafeRepository {
   constructor() {}
 
-  public async sendMultisigTransaction({
+  public getAddress(): string {
+    const polkasafeClient = container.get<PolkasafeWrapper>(Symbols.PolkasafeClient);
+    return polkasafeClient.getAddress();
+  }
+
+  public async getMultisigTransaction({
     multisigAddress,
+    api,
     transaction,
-    tip,
-    isProxyAccount,
-  }: MultisigTransactionParam): Promise<string> {
+    proxyAddress,
+  }: MultisigTransactionParam): Promise<SubmittableExtrinsic<'promise', ISubmittableResult>> {
     Guard.ThrowIfUndefined('multisigAddress', multisigAddress);
     Guard.ThrowIfUndefined('transaction', transaction);
 
     const polkasafeClient = container.get<PolkasafeWrapper>(Symbols.PolkasafeClient);
-    const { data, error } = await polkasafeClient.customTransactionAsMulti(
+    const data = await polkasafeClient.signCustomTx({
+      api,
       multisigAddress,
-      transaction as any,
-      undefined,
-      isProxyAccount,
-      new BN(tip)
-    );
-    if (error) {
-      console.error('error', error);
-      throw Error(error.error);
+      tx: transaction,
+      proxyAddress,
+    });
+    if (data.error || !data.transaction) {
+      console.error('error', data.error);
+      throw Error(data.error || 'not able to create transaction');
     }
-    return data.callHash;
+    console.log('data', data);
+    return data.transaction;
   }
 }

src/v2/services/IWalletService.ts

@@ -25,11 +25,10 @@ export interface ParamSendEvmTransaction {
   failureMessage?: string;
 }
 
-export interface ParamSendMultisigTransaction {
+export interface ParamGetMultisigTransaction {
   extrinsic: SubmittableExtrinsic<'promise', ISubmittableResult>;
   multisig: string;
   senderAddress: string;
-  tip: string;
 }
 
 export interface IWalletService {