add sign with WC

enjin · Oct 10, 2023 · fb56f6c · fb56f6c
1 parent cec39e4
commit fb56f6c
Show file tree

Hide file tree

Showing 4 changed files with 146 additions and 29 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -46,6 +46,7 @@
         "@vuepic/vue-datepicker": "^5.3.0",
         "@vueuse/core": "^10.2.0",
         "@walletconnect/modal-sign-html": "^2.6.0",
+        "@walletconnect/sign-client": "^2.10.2",
         "@web3modal/html": "^2.7.0",
         "eslint-plugin-import": "^2.27.5",
         "eventemitter3": "^5.0.0",

diff --git a/resources/js/components/SignTransaction.vue b/resources/js/components/SignTransaction.vue
@@ -33,7 +33,7 @@
                         </span>
                     </div>
                 </div>
-                <div v-if="!useAppStore().accounts.length" class="text-center">
+                <div v-if="!useAppStore().accounts?.length" class="text-center">
                     <span class="text-sm text-gray-500"> No accounts found. Please connect your wallet. </span>
                 </div>
             </div>
@@ -94,7 +94,7 @@ const closeModal = () => {
 const selectAccount = async (account) => {
     try {
         isLoading.value = true;
-        appStore.setAccount(account);
+        await appStore.setAccount(account);
         showAccountsModal.value = false;
         const res = await transactionStore.signTransaction(props.transaction);
         if (res) {

diff --git a/resources/js/store/index.ts b/resources/js/store/index.ts
@@ -8,13 +8,22 @@ import { CollectionApi } from '~/api/collection';
 import { WalletConnectModalSign } from '@walletconnect/modal-sign-html';
 import { wcOptions } from '~/util';
 import { wcRequiredNamespaces } from '~/util';
-import { getSdkError } from '@walletconnect/utils';
+import { getAppMetadata, getSdkError } from '@walletconnect/utils';
 import { PolkadotjsWallet, Wallet } from '@talismn/connect-wallets';
+import SignClient from '@walletconnect/sign-client';
+import { HexString } from '@polkadot/util/types';
 
 const parseConfigURL = (url: string): URL => {
     return new URL(url);
 };
 
+const initWC2Client = async () => {
+    return SignClient.init({
+        projectId: 'a4b92f550ab3039f7e084a879882bc96',
+        metadata: getAppMetadata(),
+    });
+};
+
 export const useAppStore = defineStore('app', {
     state: (): AppState => ({
         url: undefined,
@@ -318,7 +327,28 @@ export const useAppStore = defineStore('app', {
                 this.provider = '';
             }
         },
-        setAccount(account: Wallet) {
+        async setAccount(account: Wallet) {
+            if (this.provider === 'wc') {
+                const signClient = await initWC2Client();
+                const session = await this.getSession();
+                account.signer = {
+                    signPayload: async (payload: any) => {
+                        const result = await signClient!.request<{ signature: HexString }>({
+                            chainId: 'polkadot:3af4ff48ec76d2efc8476730f423ac07',
+                            topic: session?.topic,
+                            request: {
+                                method: 'polkadot_signTransaction',
+                                params: {
+                                    address: payload.address,
+                                    transactionPayload: payload,
+                                },
+                            },
+                        });
+
+                        return result;
+                    },
+                };
+            }
             this.account = account;
         },
         async getAccounts() {