diff --git a/package-lock.json b/package-lock.json
index 10e1866..9b1bf65 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,6 +20,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",
@@ -4677,23 +4678,23 @@
             }
         },
         "node_modules/@walletconnect/core": {
-            "version": "2.9.0",
-            "resolved": "https://registry.npmjs.org/@walletconnect/core/-/core-2.9.0.tgz",
-            "integrity": "sha512-MZYJghS9YCvGe32UOgDj0mCasaOoGHQaYXWeQblXE/xb8HuaM6kAWhjIQN9P+MNp5QP134BHP5olQostcCotXQ==",
+            "version": "2.10.2",
+            "resolved": "https://registry.npmjs.org/@walletconnect/core/-/core-2.10.2.tgz",
+            "integrity": "sha512-JQz/xp3SLEpTeRQctdck2ugSBVEpMxoSE+lFi2voJkZop1hv6P+uqr6E4PzjFluAjeAnKlT1xvra0aFWjPWVcw==",
             "dependencies": {
                 "@walletconnect/heartbeat": "1.2.1",
                 "@walletconnect/jsonrpc-provider": "1.0.13",
                 "@walletconnect/jsonrpc-types": "1.0.3",
                 "@walletconnect/jsonrpc-utils": "1.0.8",
-                "@walletconnect/jsonrpc-ws-connection": "1.0.12",
+                "@walletconnect/jsonrpc-ws-connection": "1.0.13",
                 "@walletconnect/keyvaluestorage": "^1.0.2",
                 "@walletconnect/logger": "^2.0.1",
                 "@walletconnect/relay-api": "^1.0.9",
                 "@walletconnect/relay-auth": "^1.0.4",
                 "@walletconnect/safe-json": "^1.0.2",
                 "@walletconnect/time": "^1.0.2",
-                "@walletconnect/types": "2.9.0",
-                "@walletconnect/utils": "2.9.0",
+                "@walletconnect/types": "2.10.2",
+                "@walletconnect/utils": "2.10.2",
                 "events": "^3.3.0",
                 "lodash.isequal": "4.5.0",
                 "uint8arrays": "^3.1.0"
@@ -4756,9 +4757,9 @@
             }
         },
         "node_modules/@walletconnect/jsonrpc-ws-connection": {
-            "version": "1.0.12",
-            "resolved": "https://registry.npmjs.org/@walletconnect/jsonrpc-ws-connection/-/jsonrpc-ws-connection-1.0.12.tgz",
-            "integrity": "sha512-HAcadga3Qjt1Cqy+qXEW6zjaCs8uJGdGQrqltzl3OjiK4epGZRdvSzTe63P+t/3z+D2wG+ffEPn0GVcDozmN1w==",
+            "version": "1.0.13",
+            "resolved": "https://registry.npmjs.org/@walletconnect/jsonrpc-ws-connection/-/jsonrpc-ws-connection-1.0.13.tgz",
+            "integrity": "sha512-mfOM7uFH4lGtQxG+XklYuFBj6dwVvseTt5/ahOkkmpcAEgz2umuzu7fTR+h5EmjQBdrmYyEBOWADbeaFNxdySg==",
             "dependencies": {
                 "@walletconnect/jsonrpc-utils": "^1.0.6",
                 "@walletconnect/safe-json": "^1.0.2",
@@ -4823,6 +4824,91 @@
                 "@walletconnect/sign-client": "2.9.0"
             }
         },
+        "node_modules/@walletconnect/modal-sign-html/node_modules/@walletconnect/core": {
+            "version": "2.9.0",
+            "resolved": "https://registry.npmjs.org/@walletconnect/core/-/core-2.9.0.tgz",
+            "integrity": "sha512-MZYJghS9YCvGe32UOgDj0mCasaOoGHQaYXWeQblXE/xb8HuaM6kAWhjIQN9P+MNp5QP134BHP5olQostcCotXQ==",
+            "dependencies": {
+                "@walletconnect/heartbeat": "1.2.1",
+                "@walletconnect/jsonrpc-provider": "1.0.13",
+                "@walletconnect/jsonrpc-types": "1.0.3",
+                "@walletconnect/jsonrpc-utils": "1.0.8",
+                "@walletconnect/jsonrpc-ws-connection": "1.0.12",
+                "@walletconnect/keyvaluestorage": "^1.0.2",
+                "@walletconnect/logger": "^2.0.1",
+                "@walletconnect/relay-api": "^1.0.9",
+                "@walletconnect/relay-auth": "^1.0.4",
+                "@walletconnect/safe-json": "^1.0.2",
+                "@walletconnect/time": "^1.0.2",
+                "@walletconnect/types": "2.9.0",
+                "@walletconnect/utils": "2.9.0",
+                "events": "^3.3.0",
+                "lodash.isequal": "4.5.0",
+                "uint8arrays": "^3.1.0"
+            }
+        },
+        "node_modules/@walletconnect/modal-sign-html/node_modules/@walletconnect/jsonrpc-ws-connection": {
+            "version": "1.0.12",
+            "resolved": "https://registry.npmjs.org/@walletconnect/jsonrpc-ws-connection/-/jsonrpc-ws-connection-1.0.12.tgz",
+            "integrity": "sha512-HAcadga3Qjt1Cqy+qXEW6zjaCs8uJGdGQrqltzl3OjiK4epGZRdvSzTe63P+t/3z+D2wG+ffEPn0GVcDozmN1w==",
+            "dependencies": {
+                "@walletconnect/jsonrpc-utils": "^1.0.6",
+                "@walletconnect/safe-json": "^1.0.2",
+                "events": "^3.3.0",
+                "tslib": "1.14.1",
+                "ws": "^7.5.1"
+            }
+        },
+        "node_modules/@walletconnect/modal-sign-html/node_modules/@walletconnect/sign-client": {
+            "version": "2.9.0",
+            "resolved": "https://registry.npmjs.org/@walletconnect/sign-client/-/sign-client-2.9.0.tgz",
+            "integrity": "sha512-mEKc4LlLMebCe45qzqh+MX4ilQK4kOEBzLY6YJpG8EhyT45eX4JMNA7qQoYa9MRMaaVb/7USJcc4e3ZrjZvQmA==",
+            "dependencies": {
+                "@walletconnect/core": "2.9.0",
+                "@walletconnect/events": "^1.0.1",
+                "@walletconnect/heartbeat": "1.2.1",
+                "@walletconnect/jsonrpc-utils": "1.0.8",
+                "@walletconnect/logger": "^2.0.1",
+                "@walletconnect/time": "^1.0.2",
+                "@walletconnect/types": "2.9.0",
+                "@walletconnect/utils": "2.9.0",
+                "events": "^3.3.0"
+            }
+        },
+        "node_modules/@walletconnect/modal-sign-html/node_modules/@walletconnect/types": {
+            "version": "2.9.0",
+            "resolved": "https://registry.npmjs.org/@walletconnect/types/-/types-2.9.0.tgz",
+            "integrity": "sha512-ORopsMfSRvUYqtjKKd6scfg8o4/aGebipLxx92AuuUgMTERSU6cGmIrK6rdLu7W6FBJkmngPLEGc9mRqAb9Lug==",
+            "dependencies": {
+                "@walletconnect/events": "^1.0.1",
+                "@walletconnect/heartbeat": "1.2.1",
+                "@walletconnect/jsonrpc-types": "1.0.3",
+                "@walletconnect/keyvaluestorage": "^1.0.2",
+                "@walletconnect/logger": "^2.0.1",
+                "events": "^3.3.0"
+            }
+        },
+        "node_modules/@walletconnect/modal-sign-html/node_modules/@walletconnect/utils": {
+            "version": "2.9.0",
+            "resolved": "https://registry.npmjs.org/@walletconnect/utils/-/utils-2.9.0.tgz",
+            "integrity": "sha512-7Tu3m6dZL84KofrNBcblsgpSqU2vdo9ImLD7zWimLXERVGNQ8smXG+gmhQYblebIBhsPzjy9N38YMC3nPlfQNw==",
+            "dependencies": {
+                "@stablelib/chacha20poly1305": "1.0.1",
+                "@stablelib/hkdf": "1.0.1",
+                "@stablelib/random": "^1.0.2",
+                "@stablelib/sha256": "1.0.1",
+                "@stablelib/x25519": "^1.0.3",
+                "@walletconnect/relay-api": "^1.0.9",
+                "@walletconnect/safe-json": "^1.0.2",
+                "@walletconnect/time": "^1.0.2",
+                "@walletconnect/types": "2.9.0",
+                "@walletconnect/window-getters": "^1.0.1",
+                "@walletconnect/window-metadata": "^1.0.1",
+                "detect-browser": "5.3.0",
+                "query-string": "7.1.3",
+                "uint8arrays": "^3.1.0"
+            }
+        },
         "node_modules/@walletconnect/modal-ui": {
             "version": "2.6.0",
             "resolved": "https://registry.npmjs.org/@walletconnect/modal-ui/-/modal-ui-2.6.0.tgz",
@@ -4865,18 +4951,18 @@
             }
         },
         "node_modules/@walletconnect/sign-client": {
-            "version": "2.9.0",
-            "resolved": "https://registry.npmjs.org/@walletconnect/sign-client/-/sign-client-2.9.0.tgz",
-            "integrity": "sha512-mEKc4LlLMebCe45qzqh+MX4ilQK4kOEBzLY6YJpG8EhyT45eX4JMNA7qQoYa9MRMaaVb/7USJcc4e3ZrjZvQmA==",
+            "version": "2.10.2",
+            "resolved": "https://registry.npmjs.org/@walletconnect/sign-client/-/sign-client-2.10.2.tgz",
+            "integrity": "sha512-vviSLV3f92I0bReX+OLr1HmbH0uIzYEQQFd1MzIfDk9PkfFT/LLAHhUnDaIAMkIdippqDcJia+5QEtT4JihL3Q==",
             "dependencies": {
-                "@walletconnect/core": "2.9.0",
+                "@walletconnect/core": "2.10.2",
                 "@walletconnect/events": "^1.0.1",
                 "@walletconnect/heartbeat": "1.2.1",
                 "@walletconnect/jsonrpc-utils": "1.0.8",
                 "@walletconnect/logger": "^2.0.1",
                 "@walletconnect/time": "^1.0.2",
-                "@walletconnect/types": "2.9.0",
-                "@walletconnect/utils": "2.9.0",
+                "@walletconnect/types": "2.10.2",
+                "@walletconnect/utils": "2.10.2",
                 "events": "^3.3.0"
             }
         },
@@ -4889,9 +4975,9 @@
             }
         },
         "node_modules/@walletconnect/types": {
-            "version": "2.9.0",
-            "resolved": "https://registry.npmjs.org/@walletconnect/types/-/types-2.9.0.tgz",
-            "integrity": "sha512-ORopsMfSRvUYqtjKKd6scfg8o4/aGebipLxx92AuuUgMTERSU6cGmIrK6rdLu7W6FBJkmngPLEGc9mRqAb9Lug==",
+            "version": "2.10.2",
+            "resolved": "https://registry.npmjs.org/@walletconnect/types/-/types-2.10.2.tgz",
+            "integrity": "sha512-luNV+07Wdla4STi9AejseCQY31tzWKQ5a7C3zZZaRK/di+rFaAAb7YW04OP4klE7tw/mJRGPTlekZElmHxO8kQ==",
             "dependencies": {
                 "@walletconnect/events": "^1.0.1",
                 "@walletconnect/heartbeat": "1.2.1",
@@ -4902,9 +4988,9 @@
             }
         },
         "node_modules/@walletconnect/utils": {
-            "version": "2.9.0",
-            "resolved": "https://registry.npmjs.org/@walletconnect/utils/-/utils-2.9.0.tgz",
-            "integrity": "sha512-7Tu3m6dZL84KofrNBcblsgpSqU2vdo9ImLD7zWimLXERVGNQ8smXG+gmhQYblebIBhsPzjy9N38YMC3nPlfQNw==",
+            "version": "2.10.2",
+            "resolved": "https://registry.npmjs.org/@walletconnect/utils/-/utils-2.10.2.tgz",
+            "integrity": "sha512-syxXRpc2yhSknMu3IfiBGobxOY7fLfLTJuw+ppKaeO6WUdZpIit3wfuGOcc0Ms3ZPFCrGfyGOoZsCvgdXtptRg==",
             "dependencies": {
                 "@stablelib/chacha20poly1305": "1.0.1",
                 "@stablelib/hkdf": "1.0.1",
@@ -4914,7 +5000,7 @@
                 "@walletconnect/relay-api": "^1.0.9",
                 "@walletconnect/safe-json": "^1.0.2",
                 "@walletconnect/time": "^1.0.2",
-                "@walletconnect/types": "2.9.0",
+                "@walletconnect/types": "2.10.2",
                 "@walletconnect/window-getters": "^1.0.1",
                 "@walletconnect/window-metadata": "^1.0.1",
                 "detect-browser": "5.3.0",
@@ -8017,9 +8103,9 @@
             "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw=="
         },
         "node_modules/fast-redact": {
-            "version": "3.2.0",
-            "resolved": "https://registry.npmjs.org/fast-redact/-/fast-redact-3.2.0.tgz",
-            "integrity": "sha512-zaTadChr+NekyzallAMXATXLOR8MNx3zqpZ0MUF2aGf4EathnG0f32VLODNlY8IuGY3HoRO2L6/6fSzNsLaHIw==",
+            "version": "3.3.0",
+            "resolved": "https://registry.npmjs.org/fast-redact/-/fast-redact-3.3.0.tgz",
+            "integrity": "sha512-6T5V1QK1u4oF+ATxs1lWUmlEk6P2T9HqJG3e2DnHOdVgZy2rFJBoEnrIedcTXlkAHU/zKC+7KETJ+KGGKwxgMQ==",
             "engines": {
                 "node": ">=6"
             }
diff --git a/package.json b/package.json
index 018530b..22fc7b1 100644
--- 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/Identicon.vue b/resources/js/components/Identicon.vue
index 036963b..069c75a 100644
--- a/resources/js/components/Identicon.vue
+++ b/resources/js/components/Identicon.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="relative">
-        <svg :height="44" viewBox="0 0 64 64" :width="44">
+        <svg :height="44" viewBox="0 0 64 64" :width="40">
             <circle
                 v-for="(circle, index) in circles"
                 :key="index"
diff --git a/resources/js/components/SignTransaction.vue b/resources/js/components/SignTransaction.vue
index 8c42fcb..6b7732b 100644
--- a/resources/js/components/SignTransaction.vue
+++ b/resources/js/components/SignTransaction.vue
@@ -5,22 +5,23 @@
     </Btn>
     <Modal :is-open="showAccountsModal" :close="closeModal" width="max-w-lg">
         <DialogTitle as="h3" class="text-lg font-medium leading-6 text-gray-900 text-center">
-            Select an account to sign the transaction
+            <span v-if="!signing">Select an account to sign the transaction</span>
+            <span v-else>Signing</span>
         </DialogTitle>
         <div class="flex flex-col space-y-2 mt-4 relative">
-            <div class="inline-flex space-x-2">
+            <div class="inline-flex space-x-2 mb-2">
                 <span> Transaction fee: </span>
                 <LoadingCircle v-if="loadingApi" :size="20" class="my-auto text-primary" />
                 <span v-else class="font-bold animate-fade-in">
-                    {{ feeCost }}
+                    {{ `${feeCost} ENJ` }}
                 </span>
             </div>
             <div v-if="loadingApi" class="py-20 animate-fade-in">
                 <LoadingCircle class="my-auto text-primary" :size="42" />
             </div>
-            <div v-else class="flex flex-col space-y-2 animate-fade-in">
+            <div v-else-if="!loadingApi && !signing" class="flex flex-col space-y-2 animate-fade-in">
                 <div
-                    v-for="account in useAppStore().accounts"
+                    v-for="account in connectionStore.accounts"
                     :key="account.address"
                     class="px-4 py-3 border border-gray-300 rounded-md cursor-pointer hover:bg-primary/20 transition-all flex items-center space-x-4"
                     @click="selectAccount(account)"
@@ -33,10 +34,14 @@
                         </span>
                     </div>
                 </div>
-                <div v-if="!useAppStore().accounts.length" class="text-center">
+                <div v-if="!connectionStore.accounts?.length" class="text-center">
                     <span class="text-sm text-gray-500"> No accounts found. Please connect your wallet. </span>
                 </div>
             </div>
+            <div v-else class="py-20">
+                <LoadingCircle class="my-auto text-primary" :size="42" />
+                <p class="text-center text-lg mt-2">Please sign your transaction in your wallet</p>
+            </div>
         </div>
     </Modal>
 </template>
@@ -46,12 +51,13 @@ import { DialogTitle } from '@headlessui/vue';
 import Btn from './Btn.vue';
 import Modal from './Modal.vue';
 import { addressShortHex } from '~/util/address';
-import { useAppStore } from '~/store';
 import { useTransactionStore } from '~/store/transaction';
 import { ref } from 'vue';
 import LoadingCircle from './LoadingCircle.vue';
 import snackbar from '~/util/snackbar';
 import Identicon from './Identicon.vue';
+import { formatPriceFromENJ } from '~/util';
+import { useConnectionStore } from '~/store/connection';
 
 const props = defineProps<{
     transaction: any;
@@ -63,22 +69,23 @@ const isLoading = ref(false);
 const showAccountsModal = ref(false);
 const feeCost = ref();
 const loadingApi = ref(false);
+const signing = ref(false);
 
-const appStore = useAppStore();
 const transactionStore = useTransactionStore();
+const connectionStore = useConnectionStore();
 
 const signTransaction = async () => {
     try {
-        if (!appStore.provider) {
+        if (!connectionStore.provider) {
             snackbar.error({ title: 'Please connect your wallet to sign' });
 
             return;
         }
         showAccountsModal.value = true;
         loadingApi.value = true;
-        appStore.getAccounts();
+        connectionStore.getAccounts();
         await transactionStore.init();
-        feeCost.value = await transactionStore.getTransactionCost(props.transaction);
+        feeCost.value = formatPriceFromENJ(props.transaction.fee)?.toFixed(5);
         loadingApi.value = false;
     } catch (e) {
         snackbar.error({ title: 'Failed to sign transaction' });
@@ -93,8 +100,8 @@ const closeModal = () => {
 const selectAccount = async (account) => {
     try {
         isLoading.value = true;
-        appStore.setAccount(account);
-        showAccountsModal.value = false;
+        await connectionStore.setAccount(account);
+        signing.value = true;
         const res = await transactionStore.signTransaction(props.transaction);
         if (res) {
             emit('success');
@@ -103,6 +110,8 @@ const selectAccount = async (account) => {
         snackbar.error({ title: 'Failed to sign transaction' });
     } finally {
         isLoading.value = false;
+        showAccountsModal.value = false;
+        signing.value = false;
     }
 };
 </script>
diff --git a/resources/js/components/WalletConnectButton.vue b/resources/js/components/WalletConnectButton.vue
index 234d9c3..52d7279 100644
--- a/resources/js/components/WalletConnectButton.vue
+++ b/resources/js/components/WalletConnectButton.vue
@@ -14,6 +14,17 @@
                 class="absolute right-0 z-10 mt-2 w-44 origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none pt-1"
             >
                 <template v-if="!walletSession">
+                    <MenuItem v-slot="{ active }">
+                        <button
+                            :class="[
+                                active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                                'block px-4 py-2 text-sm w-full text-center transition-all',
+                            ]"
+                            @click="connectWallet('wc')"
+                        >
+                            Enjin Wallet
+                        </button>
+                    </MenuItem>
                     <MenuItem v-slot="{ active }">
                         <button
                             :class="[
@@ -46,25 +57,25 @@
 
 <script setup lang="ts">
 import { WalletIcon } from '@heroicons/vue/24/outline';
-import { useAppStore } from '~/store';
 import LoadingCircle from './LoadingCircle.vue';
 import { computed, ref } from 'vue';
 import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue';
 import ScaleTransition from './ScaleTransition.vue';
 import snackbar from '~/util/snackbar';
+import { useConnectionStore } from '~/store/connection';
 
-const appStore = useAppStore();
+const connectionStore = useConnectionStore();
 
 const loading = ref(false);
 const showAccountsModal = ref(false);
 
-const walletSession = computed(() => appStore.wallet);
+const walletSession = computed(() => connectionStore.wallet);
 
 const connectWallet = async (provider: string) => {
     try {
         loading.value = true;
-        await appStore.connectWallet(provider);
-        if (appStore.accounts) {
+        await connectionStore.connectWallet(provider);
+        if (connectionStore.accounts) {
             showAccountsModal.value = true;
         }
     } catch {
@@ -76,7 +87,7 @@ const connectWallet = async (provider: string) => {
 
 const disconnectWallet = async () => {
     loading.value = true;
-    await appStore.disconnectWallet();
+    await connectionStore.disconnectWallet();
     loading.value = false;
 };
 </script>
diff --git a/resources/js/components/pages/Transactions.vue b/resources/js/components/pages/Transactions.vue
index fdc9e55..2d219fe 100644
--- a/resources/js/components/pages/Transactions.vue
+++ b/resources/js/components/pages/Transactions.vue
@@ -114,7 +114,8 @@
                                     >
                                         <Btn
                                             v-if="
-                                                transaction.transactionId ||
+                                                (transaction.state !== TransactionState.PENDING &&
+                                                    transaction.transactionId) ||
                                                 transaction.state === TransactionState.BROADCAST
                                             "
                                             primary
diff --git a/resources/js/components/slideovers/common/DetailsTransactionSlideover.vue b/resources/js/components/slideovers/common/DetailsTransactionSlideover.vue
index f152eed..39a5768 100644
--- a/resources/js/components/slideovers/common/DetailsTransactionSlideover.vue
+++ b/resources/js/components/slideovers/common/DetailsTransactionSlideover.vue
@@ -13,7 +13,12 @@
                             </div>
                         </template>
 
-                        <template v-if="transaction?.state !== TransactionState.FINALIZED">
+                        <template
+                            v-if="
+                                transaction?.state !== TransactionState.FINALIZED &&
+                                transaction?.state !== TransactionState.PENDING
+                            "
+                        >
                             <div v-if="!webSocketEvents && webSocket">
                                 <LoadingCircle :size="40" class="pt-10" />
                                 <p class="text-center py-4">Waiting for the transaction details...</p>
diff --git a/resources/js/graphql/query/GetTransaction.ts b/resources/js/graphql/query/GetTransaction.ts
index 22a86bd..7d85cbc 100644
--- a/resources/js/graphql/query/GetTransaction.ts
+++ b/resources/js/graphql/query/GetTransaction.ts
@@ -10,6 +10,8 @@ export default `query GetTransaction($id: BigInt!) {
         method
         result
         state
+        fee
+        deposit
         transactionId
         encodedData
         signedAtBlock
diff --git a/resources/js/graphql/query/GetTransactions.ts b/resources/js/graphql/query/GetTransactions.ts
index 9bb0141..1b345ba 100644
--- a/resources/js/graphql/query/GetTransactions.ts
+++ b/resources/js/graphql/query/GetTransactions.ts
@@ -27,6 +27,8 @@ export default `query GetTransactions($idempotencyKeys: [String], $ids: [BigInt!
           method
           result
           state
+          fee
+          deposit
           transactionId
           encodedData
           signedAtBlock
diff --git a/resources/js/store/connection.ts b/resources/js/store/connection.ts
new file mode 100644
index 0000000..05ad305
--- /dev/null
+++ b/resources/js/store/connection.ts
@@ -0,0 +1,171 @@
+import { defineStore } from 'pinia';
+import { ConnectionState } from '~/types/types.interface';
+import { wcOptions } from '~/util';
+import { wcRequiredNamespaces } from '~/util';
+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';
+import { wcNamespaces, wcProjectId } from '~/util/constants';
+import { useAppStore } from '.';
+import { WalletConnectModalSign } from '@walletconnect/modal-sign-html';
+
+export const useConnectionStore = defineStore('connection', {
+    state: (): ConnectionState => ({
+        provider: '',
+        wallet: false,
+        walletClient: null,
+        walletSession: null,
+        account: null,
+        accounts: null,
+    }),
+    persist: {
+        paths: ['provider'],
+    },
+    actions: {
+        getWeb3Modal() {
+            return new WalletConnectModalSign(wcOptions);
+        },
+        async connectWallet(provider) {
+            if (provider === 'wc') {
+                await this.connectWC();
+            }
+
+            if (provider === 'polkadot.js') {
+                await this.connectPolkadotJS();
+            }
+        },
+        async initWalletClient() {
+            this.walletClient = await SignClient.init({
+                projectId: wcProjectId,
+                metadata: getAppMetadata(),
+            });
+
+            if (this.walletClient) {
+                this.walletClient.on('session_delete', () => {
+                    this.disconnectWallet();
+                });
+                this.walletClient.on('session_expire', () => {
+                    this.disconnectWallet();
+                });
+            }
+
+            this.walletClient.session.getAll({});
+            if (this.walletClient.session.length) {
+                const lastKeyIndex = this.walletClient.session.keys.length - 1;
+                this.walletSession = this.walletClient.session.get(this.walletClient.session.keys[lastKeyIndex]);
+            }
+        },
+        async connectWC() {
+            const walletConnect = this.getWeb3Modal();
+            await this.initWalletClient();
+
+            this.walletSession = await walletConnect.connect({
+                requiredNamespaces: wcRequiredNamespaces(useAppStore().config.network),
+            });
+
+            if (this.walletSession && this.walletSession.acknowledged) {
+                this.provider = 'wc';
+                this.wallet = true;
+                await this.initWalletClient();
+
+                return;
+            }
+
+            await walletConnect!.disconnect({
+                topic: this.walletSession.topic,
+                reason: getSdkError('USER_REJECTED'),
+            });
+
+            this.account = null;
+        },
+        async connectPolkadotJS() {
+            const pkjs = new PolkadotjsWallet();
+            if (pkjs.installed) {
+                await pkjs.enable('Platform');
+                this.wallet = true;
+                this.provider = 'polkadot.js';
+                this.walletSession = pkjs;
+            }
+        },
+
+        async getSession(): Promise<any> {
+            if (this.provider === 'wc') {
+                await this.initWalletClient();
+
+                if (this.walletSession?.acknowledged) {
+                    this.wallet = true;
+                }
+            } else if (this.provider === 'polkadot.js') {
+                const pkjs = new PolkadotjsWallet();
+                this.walletSession = pkjs;
+
+                if (this.walletSession.installed) {
+                    await this.walletSession.enable('Platform');
+                    this.wallet = true;
+                }
+            }
+            return this.walletSession;
+        },
+        async disconnectWallet() {
+            try {
+                if (this.provider === 'wc') {
+                    if (this.walletClient) {
+                        this.walletClient.disconnect({
+                            topic: this.walletSession.topic,
+                            reason: getSdkError('USER_DISCONNECTED'),
+                        });
+                    }
+                }
+            } finally {
+                this.account = null;
+                this.wallet = false;
+                this.provider = '';
+                this.walletClient = null;
+                this.walletSession = null;
+            }
+        },
+        async setAccount(account: Wallet) {
+            if (this.provider === 'wc') {
+                account.signer = {
+                    signPayload: async (payload: any) => {
+                        const result = await (this.walletClient! as SignClient).request<{ signature: HexString }>({
+                            chainId: wcNamespaces[useAppStore().config.network],
+                            topic: this.walletSession?.topic,
+                            request: {
+                                method: 'polkadot_signTransaction',
+                                params: {
+                                    address: payload.address,
+                                    transactionPayload: payload,
+                                },
+                            },
+                        });
+
+                        return result;
+                    },
+                };
+            }
+            this.account = account;
+        },
+        async getAccounts() {
+            if (this.provider === 'wc') {
+                if (!this.walletSession) {
+                    return;
+                }
+
+                const accounts = Object.values(this.walletSession.namespaces)
+                    .map((namespace: any) => namespace.accounts)
+                    .flat()
+                    .map((account) => {
+                        return {
+                            address: account.split(':')[2],
+                        };
+                    });
+                this.accounts = accounts;
+            } else if (this.provider === 'polkadot.js') {
+                const accounts = await this.walletSession.getAccounts();
+                this.accounts = accounts;
+            }
+        },
+    },
+});
diff --git a/resources/js/store/index.ts b/resources/js/store/index.ts
index 3bf0f80..0e3c222 100644
--- a/resources/js/store/index.ts
+++ b/resources/js/store/index.ts
@@ -5,11 +5,7 @@ import { ApiService } from '~/api';
 import snackbar from '~/util/snackbar';
 import { AuthApi } from '~/api/auth';
 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 { PolkadotjsWallet, Wallet } from '@talismn/connect-wallets';
+import { useConnectionStore } from './connection';
 
 const parseConfigURL = (url: string): URL => {
     return new URL(url);
@@ -41,10 +37,6 @@ export const useAppStore = defineStore('app', {
         loggedIn: false,
         newCollection: false,
         user: null,
-        provider: '',
-        wallet: false,
-        account: null,
-        accounts: null,
     }),
     persist: {
         paths: ['url', 'authorization_token', 'loggedIn', 'advanced', 'provider'],
@@ -78,12 +70,14 @@ export const useAppStore = defineStore('app', {
                 if (this.hasMarketplacePackage) this.addMarketplaceNavigation();
 
                 if (this.loggedIn) await this.getUser();
-                await this.getSession();
+                await useConnectionStore().getSession();
 
                 return await this.fetchCollectionIds();
             } catch (error: any) {
                 snackbar.error({ title: error });
-                this.clearLogin();
+                if (this.config.tenant) {
+                    this.clearLogin();
+                }
             }
 
             return false;
@@ -233,112 +227,6 @@ export const useAppStore = defineStore('app', {
         setCollections(collections: string[]) {
             this.collections = collections;
         },
-        getWeb3Modal() {
-            return new WalletConnectModalSign(wcOptions);
-        },
-        async getSession() {
-            if (this.provider === 'wc') {
-                const walletConnect = this.getWeb3Modal();
-                const session = await walletConnect.getSession();
-                if (session && !session.acknowledged) {
-                    this.wallet = true;
-                }
-
-                return session;
-            } else if (this.provider === 'polkadot.js') {
-                const pkjs = new PolkadotjsWallet();
-
-                if (pkjs.installed) {
-                    await pkjs.enable('Platform');
-                    this.wallet = true;
-                }
-
-                return pkjs;
-            }
-        },
-        async connectWallet(provider) {
-            if (provider === 'wc') {
-                await this.connectWC();
-            }
-
-            if (provider === 'polkadot.js') {
-                await this.connectPolkadotJS();
-            }
-        },
-        async connectWC() {
-            const walletConnect = this.getWeb3Modal();
-
-            const session = await walletConnect.connect({
-                requiredNamespaces: wcRequiredNamespaces,
-            });
-
-            if (session && session.acknowledged) {
-                this.provider = 'wc';
-                this.wallet = true;
-
-                return;
-            }
-
-            await walletConnect.disconnect({
-                topic: session.topic,
-                reason: getSdkError('USER_REJECTED'),
-            });
-
-            this.account = null;
-        },
-        async connectPolkadotJS() {
-            const pkjs = new PolkadotjsWallet();
-            if (pkjs.installed) {
-                await pkjs.enable('Platform');
-                this.wallet = true;
-                this.provider = 'polkadot.js';
-            }
-        },
-
-        async disconnectWallet() {
-            try {
-                if (this.provider === 'wc') {
-                    const walletConnect = this.getWeb3Modal();
-                    const session = await walletConnect.getSession();
-
-                    if (session) {
-                        await walletConnect.disconnect({
-                            topic: session.topic,
-                            reason: getSdkError('USER_DISCONNECTED'),
-                        });
-                    }
-                }
-
-                this.account = null;
-                this.wallet = false;
-                this.provider = '';
-            } catch {
-                this.account = null;
-                this.wallet = false;
-                this.provider = '';
-            }
-        },
-        setAccount(account: Wallet) {
-            this.account = account;
-        },
-        async getAccounts() {
-            if (this.provider === 'wc') {
-                const session = (await this.getSession()) as any;
-                const accounts = Object.values(session.namespaces)
-                    .map((namespace: any) => namespace.accounts)
-                    .flat()
-                    .map((account) => {
-                        return {
-                            address: account.split(':')[2],
-                        };
-                    });
-                this.accounts = accounts;
-            } else if (this.provider === 'polkadot.js') {
-                const session = (await this.getSession()) as any;
-                const accounts = await session.getAccounts();
-                this.accounts = accounts;
-            }
-        },
     },
     getters: {
         hasValidConfig(state: AppState) {
diff --git a/resources/js/store/transaction.ts b/resources/js/store/transaction.ts
index 8a443eb..dd39849 100644
--- a/resources/js/store/transaction.ts
+++ b/resources/js/store/transaction.ts
@@ -9,6 +9,7 @@ import { SignerPayloadJSON } from '@polkadot/types/types';
 import { markRaw } from 'vue';
 import { AccountInfoWithTripleRefCount } from '@polkadot/types/interfaces';
 import { publicKeyToAddress } from '~/util/address';
+import { useConnectionStore } from './connection';
 
 const RPC_URLS = {
     canary: 'wss://rpc.matrix.canary.enjin.io',
@@ -71,11 +72,15 @@ export const useTransactionStore = defineStore('transaction', {
             };
         },
         async getTransactionCost(transaction: any) {
-            const { extrinsic } = await this.getExtrinsicData(transaction, useAppStore().accounts[0].address, this.api);
+            const { extrinsic } = await this.getExtrinsicData(
+                transaction,
+                useConnectionStore().accounts[0].address,
+                this.api
+            );
 
             const paymentInfo = await this.api.tx[extrinsic.method.section]
                 [extrinsic.method.method](...extrinsic.method.args)
-                .paymentInfo(useAppStore().accounts[0].address);
+                .paymentInfo(useConnectionStore().accounts[0].address);
 
             return paymentInfo.partialFee.toHuman();
         },
@@ -83,7 +88,7 @@ export const useTransactionStore = defineStore('transaction', {
             const appStore = useAppStore();
             if (appStore.user?.account || appStore.config.daemon) {
                 if (
-                    publicKeyToAddress(appStore.account.address) !==
+                    publicKeyToAddress(useConnectionStore().account.address) !==
                     publicKeyToAddress(appStore.user?.account ?? appStore.config.daemon)
                 ) {
                     snackbar.error({
@@ -97,20 +102,20 @@ export const useTransactionStore = defineStore('transaction', {
 
             const { extrinsic, payloadToSign, currentBlock } = await this.getExtrinsicData(
                 transaction,
-                appStore.account.address,
+                useConnectionStore().account.address,
                 this.api
             );
 
-            const { signature } = await appStore.account.signer.signPayload(payloadToSign);
+            const { signature } = await useConnectionStore().account.signer.signPayload(payloadToSign);
 
-            extrinsic.addSignature(appStore.account.address, signature, payloadToSign);
+            extrinsic.addSignature(useConnectionStore().account.address, signature, payloadToSign);
 
             const transactionHash = await this.api.rpc.author.submitExtrinsic(extrinsic.toHex());
 
             return await this.updateTransaction({
                 id: transaction.id,
                 transactionHash: transactionHash.toHex(),
-                signingAccount: appStore.account.address,
+                signingAccount: useConnectionStore().account.address,
                 signedAtBlock: currentBlock.block.header.number.toNumber(),
             });
         },
diff --git a/resources/js/types/types.interface.ts b/resources/js/types/types.interface.ts
index b200f95..f196b21 100644
--- a/resources/js/types/types.interface.ts
+++ b/resources/js/types/types.interface.ts
@@ -1,4 +1,5 @@
 import { BeamType, NotificationType, TokenCapType, TokenIdSelectType } from './types.enums';
+import type SignClient from '@walletconnect/sign-client';
 
 export interface AppState {
     url?: URL;
@@ -20,8 +21,13 @@ export interface AppState {
     loggedIn: boolean;
     newCollection: boolean;
     user: any;
+}
+
+export interface ConnectionState {
     provider: string;
     wallet: boolean;
+    walletClient?: SignClient | null;
+    walletSession: any;
     account: any;
     accounts: any;
 }
diff --git a/resources/js/util/auth.guard.ts b/resources/js/util/auth.guard.ts
index dff9f4f..b483f6b 100644
--- a/resources/js/util/auth.guard.ts
+++ b/resources/js/util/auth.guard.ts
@@ -23,7 +23,7 @@ export function initAuthGuard(router: Router) {
 
             if (requiresAuth && !isLoggedIn) {
                 next({ name: 'platform.auth.login' });
-            } else if (requiresToken && appStore.user && !isLoggedIn) {
+            } else if (requiresToken && appStore.user && !validConfig) {
                 next({ name: 'platform.user.settings' });
             } else if (to.name == 'platform.auth.login' && isLoggedIn) {
                 next({ name: 'platform.collections' });
diff --git a/resources/js/util/constants.ts b/resources/js/util/constants.ts
new file mode 100644
index 0000000..26fe8f8
--- /dev/null
+++ b/resources/js/util/constants.ts
@@ -0,0 +1,6 @@
+export const wcProjectId = 'a4b92f550ab3039f7e084a879882bc96';
+
+export const wcNamespaces = {
+    canary: 'polkadot:a37725fd8943d2a524cb7ecc65da438f',
+    polkadot: 'polkadot:3af4ff48ec76d2efc8476730f423ac07',
+};
diff --git a/resources/js/util/index.ts b/resources/js/util/index.ts
index 5a98021..5d467b0 100644
--- a/resources/js/util/index.ts
+++ b/resources/js/util/index.ts
@@ -2,6 +2,7 @@ import { TokenIdSelectType } from '~/types/types.enums';
 import { TokenIdType } from '~/types/types.interface';
 import snackbar from '~/util/snackbar';
 import { getAppMetadata } from '@walletconnect/utils';
+import { wcNamespaces, wcProjectId } from './constants';
 import { WalletConnectModalSignOptions } from '@walletconnect/modal-sign-html';
 
 export const formatData = (entries: any, type = 'object') => {
@@ -139,24 +140,28 @@ export const shortString = (str: string, length = 10) => {
     return `${str.substring(0, length)}...`;
 };
 
-export const wcProjectId = 'a4b92f550ab3039f7e084a879882bc96';
-
-export const wcRequiredNamespaces = {
-    polkadot: {
-        methods: ['polkadot_signTransaction'],
-        chains: ['polkadot:3af4ff48ec76d2efc8476730f423ac07'],
-        events: [],
-    },
+export const wcRequiredNamespaces = (network: string) => {
+    return {
+        polkadot: {
+            methods: ['polkadot_signTransaction'],
+            chains: [wcNamespaces[network]],
+            events: [],
+        },
+    };
 };
 
+
 export const wcOptions: WalletConnectModalSignOptions = {
     projectId: wcProjectId,
     metadata: getAppMetadata(),
     modalOptions: {
         themeMode: 'light',
-        explorerRecommendedWalletIds: ['bdc9433ffdaee55d31737d83b931caa1f17e30666f5b8e03eea794bac960eb4a'],
+        explorerRecommendedWalletIds: ['210cd0946d2b026755635b95761c0570e817ade3f3052a0c6d273dba7ba47aff'],
         enableExplorer: true,
-        walletImages: {},
+        walletImages: {
+            enjin: 'https://nft.io/images/enjin-wallet-long.svg',
+        },
+
         themeVariables: {
             '--wcm-background-color': '#7567CE',
             '--wcm-accent-color': '#7567CE',