From f5a0f8094673339eca5d39a1d588699a129de757 Mon Sep 17 00:00:00 2001
From: Jan Michek <15363559+janmichek@users.noreply.github.com>
Date: Mon, 2 Sep 2024 18:37:13 +0200
Subject: [PATCH] feat: Contract read & write (#872)

Co-authored-by: Michele F. <michele-franchi@users.noreply.github.com>
Co-authored-by: Michele Franchi <michele.franchi933@gmail.com>
---
 eslint.config.js => .eslintrc.js              |  52 +++---
 cypress.config.ts                             |   2 +-
 cypress/e2e/app/contractDetail.cy.js          |   2 +-
 package.json                                  |   3 +-
 src/assets/loader-small.svg                   |  67 ++++++++
 src/assets/styles/main.css                    |   2 +-
 src/components/AccountDetailsPanel.vue        |   3 +-
 src/components/AppAccordion.vue               |  99 ++++++++++++
 src/components/AppButton.vue                  |   4 +-
 src/components/AppDropdown.vue                |  13 +-
 src/components/ChartControls.vue              |   6 +-
 src/components/CodeEditor.vue                 |   1 -
 .../ContractEntrypointAccordion.vue           |  89 ++++++++++
 src/components/ContractReadPanel.vue          |  47 ++++++
 src/components/ContractWritePanel.vue         |  69 ++++++++
 src/components/LoaderIndicatorSmall.vue       |   6 +
 src/components/TheHeader.vue                  |   2 +-
 ...Controls.vue => WalletAccountControls.vue} |  34 +++-
 src/components/WalletConnectionPanel.vue      |  13 +-
 src/pages/contracts/[id].vue                  |  14 +-
 src/pages/wallet/index.vue                    |  13 +-
 src/plugins/sentry.js                         |   8 +-
 src/stores/aesdk.js                           |   4 +-
 src/stores/contractVerified.js                |  86 +++++++++-
 src/stores/contracts.js                       |   1 -
 src/stores/recentBlocks.js                    |  50 +++---
 src/stores/wallet.js                          |  15 +-
 src/utils/adapters.js                         |  15 ++
 src/utils/format.js                           |  17 ++
 src/utils/hints/contractVerifiedHints.js      |   1 +
 yarn.lock                                     | 153 +++++++++++++-----
 31 files changed, 754 insertions(+), 137 deletions(-)
 rename eslint.config.js => .eslintrc.js (66%)
 create mode 100644 src/assets/loader-small.svg
 create mode 100644 src/components/AppAccordion.vue
 create mode 100644 src/components/ContractEntrypointAccordion.vue
 create mode 100644 src/components/ContractReadPanel.vue
 create mode 100644 src/components/ContractWritePanel.vue
 create mode 100644 src/components/LoaderIndicatorSmall.vue
 rename src/components/{TheWalletAccountControls.vue => WalletAccountControls.vue} (66%)

diff --git a/eslint.config.js b/.eslintrc.js
similarity index 66%
rename from eslint.config.js
rename to .eslintrc.js
index 7b939dc58..213757099 100644
--- a/eslint.config.js
+++ b/.eslintrc.js
@@ -1,28 +1,28 @@
 module.exports = {
-  files: ["src/*.ts", "src/*.js", "src/*.vue"],
-  // parser: 'vue-eslint-parser',
-  // parserOptions: {
-  //   ecmaVersion: 2020,
-  //   extraFileExtensions: ['.vue'],
-  //   ecmaFeatures: {
-  //     jsx: false,
-  //   },
-  // },
-  // globals: {
-  //   defineProps: 'readonly',
-  //   defineEmits: 'readonly',
-  //   defineExpose: 'readonly',
-  //   withDefaults: 'readonly',
-  // },
-  // extends: [
-  //   'standard',
-  //   'plugin:vue/base',
-  //   'plugin:vue/vue3-recommended',
-  //   'plugin:import/recommended',
-  //   'eslint:recommended',
-  //   '@nuxtjs/eslint-config-typescript',
-  // ],
-  // plugins: ['prettier'],
+  root: true,
+  parser: 'vue-eslint-parser',
+  parserOptions: {
+    ecmaVersion: 2020,
+    extraFileExtensions: ['.vue'],
+    ecmaFeatures: {
+      jsx: false,
+    },
+  },
+  globals: {
+    defineProps: 'readonly',
+    defineEmits: 'readonly',
+    defineExpose: 'readonly',
+    withDefaults: 'readonly',
+  },
+  extends: [
+    'standard',
+    'plugin:vue/base',
+    'plugin:vue/vue3-recommended',
+    'plugin:import/recommended',
+    'eslint:recommended',
+    '@nuxtjs/eslint-config-typescript',
+  ],
+  plugins: ['prettier'],
   rules: {
     'no-console': 'off',
     quotes: ['error', 'single'],
@@ -64,7 +64,7 @@ module.exports = {
     }],
     'vue/max-attributes-per-line': ['error', {
       singleline: 1,
-      multiline: {max: 1},
+      multiline: { max: 1 },
     }],
     'vue/require-v-for-key': 'error',
     'vue/no-v-html': 0,
@@ -72,6 +72,6 @@ module.exports = {
     camelcase: ['error', {
       properties: 'never',
     }],
-    'max-len': ['error', {code: 120, ignoreUrls: true, ignoreStrings: true, ignoreTemplateLiterals: true}],
+    'max-len': ['error', { code: 120, ignoreUrls: true, ignoreStrings: true, ignoreTemplateLiterals: true }],
   },
 }
diff --git a/cypress.config.ts b/cypress.config.ts
index 75ae8000f..f6758d7b2 100644
--- a/cypress.config.ts
+++ b/cypress.config.ts
@@ -1,4 +1,4 @@
-import { defineConfig } from 'cypress'
+import {defineConfig} from 'cypress'
 
 export default defineConfig({
   env: {
diff --git a/cypress/e2e/app/contractDetail.cy.js b/cypress/e2e/app/contractDetail.cy.js
index 4a52f8c46..adb62cb00 100644
--- a/cypress/e2e/app/contractDetail.cy.js
+++ b/cypress/e2e/app/contractDetail.cy.js
@@ -8,7 +8,7 @@ describe('contract detail', () => {
     cy.contains('.tabs__item', 'Events').click()
     cy.get('.contract-events-panel .paginated-content').should('be.visible')
 
-    cy.contains('.tabs__item', 'Contract').click()
+    cy.contains('.tabs__item', 'Verification').click()
     cy.get('.contract-verified-table').should('be.visible')
     cy.get('.code-editor').should('be.visible')
   })
diff --git a/package.json b/package.json
index f4862c5cf..cdb15dafd 100644
--- a/package.json
+++ b/package.json
@@ -29,7 +29,7 @@
     "e2e:open": "cypress open"
   },
   "dependencies": {
-    "@aeternity/aepp-sdk": "^13.3.2",
+    "@aeternity/aepp-sdk": "13.3.3",
     "@sentry/tracing": "^7.114.0",
     "@sentry/vite-plugin": "^2.21.1",
     "@sentry/vue": "^8.17.0",
@@ -57,7 +57,6 @@
   "devDependencies": {
     "@csstools/postcss-global-data": "^2.1.1",
     "@nuxtjs/eslint-config-typescript": "^12.1.0",
-    "@nuxtjs/partytown": "^1.5.0",
     "@nuxtjs/plausible": "^1.0.0",
     "@pinia/nuxt": "^0.5.1",
     "@vitejs/plugin-vue": "^5.0.5",
diff --git a/src/assets/loader-small.svg b/src/assets/loader-small.svg
new file mode 100644
index 000000000..b0ddea2de
--- /dev/null
+++ b/src/assets/loader-small.svg
@@ -0,0 +1,67 @@
+<svg width="13" height="14" viewBox="0 0 43 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0_11159_26702)">
+        <path class="path" d="M17.1806 4.62883L21.9395 1.97737L30.6145 6.75557L30.505 11.8754L17.1806 4.62883Z"
+              fill="#F5274E"/>
+        <path class="path" d="M34.6838 9.26129L39.4578 11.9212L39.4699 21.6538L34.786 24.1631L34.6838 9.26129Z"
+              fill="#F5274E"/>
+
+        <path class="path" d="M39.3301 26.1525V31.4554L30.7045 36.3164L26.1648 33.665L39.3301 26.1525Z" fill="#F5274E"/>
+        <path class="path" d="M26.2954 38.5815L21.5006 41.1722L12.8917 36.2839L13.0713 31.1659L26.2954 38.5815Z"
+              fill="#F5274E"/>
+        <path class="path" d="M8.98413 33.8637L4.21014 31.2038L4.19807 21.4712L8.88195 18.9619L8.98413 33.8637Z"
+              fill="#F5274E"/>
+        <path class="path" d="M4.32422 17.1834V11.8805L13.0512 7.01953L17.6444 9.67098L4.32422 17.1834Z"
+              fill="#F5274E"/>
+    </g>
+    <defs>
+        <clipPath id="clip0_11159_26702">
+            <rect width="43" height="44" fill="white"/>
+        </clipPath>
+    </defs>
+
+    <style>
+        .path {
+        animation: lds-spinner 1.2s linear infinite;
+        }
+
+        .path:nth-child(1) {
+        opacity:0;
+        animation-delay: -1s;
+        }
+        .path:nth-child(2) {
+        opacity:0;
+        animation-delay: -0.8s;
+        }
+        .path:nth-child(3) {
+        opacity:0;
+        animation-delay: -0.6s;
+        }
+        .path:nth-child(4) {
+        opacity:0;
+        animation-delay: -0.4s;
+        }
+        .path:nth-child(5) {
+        opacity:0;
+        animation-delay: -0.2s;
+        }
+        .path:nth-child(6) {
+        opacity:0;
+
+        }
+
+        @keyframes lds-spinner {
+        0% {
+        opacity: 1;
+        }
+        50% {
+        opacity: 0.9;
+        }
+        100% {
+        opacity: 0;
+        }
+        }
+
+    </style>
+</svg>
+
+
diff --git a/src/assets/styles/main.css b/src/assets/styles/main.css
index f3b5aa41b..92425cbc3 100644
--- a/src/assets/styles/main.css
+++ b/src/assets/styles/main.css
@@ -7,9 +7,9 @@
 @import url("elements/_body.css");
 @import url("elements/_dl.css");
 @import url("elements/_h.css");
-@import url("elements/_input.css");
 @import url("elements/_hr.css");
 @import url("elements/_html.css");
+@import url("elements/_input.css");
 @import url("elements/_p.css");
 @import url("elements/_q.css");
 @import url("elements/_table.css");
diff --git a/src/components/AccountDetailsPanel.vue b/src/components/AccountDetailsPanel.vue
index 871efc6dc..f535eed8f 100644
--- a/src/components/AccountDetailsPanel.vue
+++ b/src/components/AccountDetailsPanel.vue
@@ -81,8 +81,7 @@
             Is Generalized
           </th>
           <td>
-            <app-chip
-              size="sm">
+            <app-chip size="sm">
               Generalized
             </app-chip>
           </td>
diff --git a/src/components/AppAccordion.vue b/src/components/AppAccordion.vue
new file mode 100644
index 000000000..d2d49d1d1
--- /dev/null
+++ b/src/components/AppAccordion.vue
@@ -0,0 +1,99 @@
+<template>
+  <div
+    :class="[
+      'accordion',
+      { 'accordion--disabled' : isDisabled }]">
+    <div
+      v-for="(item, index) in accordionItems"
+      :key="index"
+      class="accordion__item">
+      <header
+        :class="[
+          'accordion__header',
+          {'accordion__header--expanded' : item.isExpanded }]"
+        @click="toggle(index)">
+        <h4>
+          {{ item.name }}
+        </h4>
+      </header>
+
+      <transition name="accordion__content">
+        <div
+          v-show="item.isExpanded"
+          class="accordion__content">
+          <slot
+            :content="{item, index}"
+            name="content"/>
+        </div>
+      </transition>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const props = defineProps({
+  items: {
+    type: Array,
+    required: true,
+  },
+  isDisabled: {
+    type: Boolean,
+    required: true,
+  },
+})
+
+const accordionItems = ref(props.items.map(item => ({ ...item, isExpanded: false })))
+
+function toggle(index) {
+  accordionItems.value[index].isExpanded = !accordionItems.value[index].isExpanded
+}
+</script>
+
+<style scoped>
+.accordion {
+  &--disabled {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  &__item {
+    border: 1px solid var(--color-gray);
+    border-radius: 8px;
+    margin-bottom: var(--space-4);
+  }
+
+  &__header {
+    background: var(--color-snow);
+    padding: var(--space-1);
+    border-radius: 8px;
+    cursor: pointer;
+
+    &--expanded {
+      border-bottom: 1px solid var(--color-gray);
+      border-radius: 8px 8px 0 0;
+    }
+  }
+
+  &__content {
+    padding: var(--space-1) 0;
+    margin: 0 var(--space-1);
+
+    &-enter-active, &-leave-active {
+      transition: max-height 0.08s ease, padding 0.08s ease;
+    }
+
+    &-enter-from, &-leave-to {
+      max-height: 0;
+      padding: 0;
+      overflow: hidden;
+    }
+
+    &-enter-to, &-leave-from {
+      max-height: 1000px;
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/src/components/AppButton.vue b/src/components/AppButton.vue
index df3169903..058e5cf1b 100644
--- a/src/components/AppButton.vue
+++ b/src/components/AppButton.vue
@@ -63,8 +63,8 @@ defineProps({
       'link',
       'link-error',
       'primary',
-      'light']
-      .includes(val),
+      'light',
+    ].includes(val),
   },
   type: {
     type: String,
diff --git a/src/components/AppDropdown.vue b/src/components/AppDropdown.vue
index 2c9aa4d6e..c1abac03b 100644
--- a/src/components/AppDropdown.vue
+++ b/src/components/AppDropdown.vue
@@ -1,5 +1,7 @@
 <template>
-  <VMenu  placement="bottom">
+  <VMenu
+    placement="bottom"
+    :disabled="isDisabled">
     <span>
       <slot/>
     </span>
@@ -10,6 +12,15 @@
   </VMenu>
 </template>
 
+<script setup>
+defineProps({
+  isDisabled: {
+    type: Boolean,
+    default: false,
+  },
+})
+</script>
+
 <style>
 .v-popper__popper.v-popper--theme-menu .v-popper__inner {
   margin: 0 var(--space-2);
diff --git a/src/components/ChartControls.vue b/src/components/ChartControls.vue
index 34329aa31..7cd92b162 100644
--- a/src/components/ChartControls.vue
+++ b/src/components/ChartControls.vue
@@ -58,12 +58,12 @@ function selectCustomInterval(dateCustomInterval) {
   &__container {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
-    column-gap: 8px;
-    row-gap: 8px;
+    column-gap: var(--space-1);
+    row-gap: var(--space-1);
 
     @media (--desktop) {
       display: flex;
-      gap: 8px;
+      gap: var(--space-1);
       flex-grow: 1;
       flex-wrap: nowrap;
     }
diff --git a/src/components/CodeEditor.vue b/src/components/CodeEditor.vue
index d2e6d7d50..1100a4779 100644
--- a/src/components/CodeEditor.vue
+++ b/src/components/CodeEditor.vue
@@ -70,6 +70,5 @@ const codeModel = ref(props.code)
   .mtk7 {
     color: var(--color-success);
   }
-
 }
 </style>
diff --git a/src/components/ContractEntrypointAccordion.vue b/src/components/ContractEntrypointAccordion.vue
new file mode 100644
index 000000000..ba97e852e
--- /dev/null
+++ b/src/components/ContractEntrypointAccordion.vue
@@ -0,0 +1,89 @@
+<template>
+  <app-accordion
+    :items="entrypoints"
+    :is-disabled="isDisabled">
+    <template #content="{content: {item: aciItem, index}}">
+      <div class="contract-entrypoint-accordion__container">
+        <p>
+          return type: <i>{{ aciItem.returns }}</i>
+        </p>
+
+        <text-input
+          v-for="(argument, inputIndex) in aciItem.arguments"
+          id="id"
+          :key="inputIndex"
+          v-model="form[aciItem.name + '-' + argument.name]"
+          :placeholder="argument.type"
+          type="text"
+          class="contract-entrypoint-accordion__input"/>
+
+        <loader-indicator-small v-if="loadingIndex === index"/>
+
+        <app-button
+          v-else
+          type="submit"
+          @click="query(aciItem, index, form)">
+          Query
+        </app-button>
+
+        <p
+          v-if="response[index]"
+          :class="[
+            'contract-entrypoint-accordion__response',
+            {'contract-entrypoint-accordion__response--error': response[index].responseType === 'error' }
+          ]">
+          {{ response[index].responseType === 'success' ? 'Return value' : 'Error' }}:
+          {{ response[index].message }}
+        </p>
+      </div>
+    </template>
+  </app-accordion>
+</template>
+
+<script setup>
+const form = ref({})
+
+defineProps({
+  entrypoints: {
+    type: Array,
+    required: true,
+  },
+  response: {
+    type: Object,
+    default: null,
+  },
+  loadingIndex: {
+    type: Number,
+    default: null,
+  },
+  isDisabled: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const emit = defineEmits(['query-clicked'])
+
+function query(aciItem, index) {
+  emit('query-clicked', aciItem, index, form)
+}
+</script>
+
+<style scoped>
+.contract-entrypoint-accordion {
+  &__container {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--space-1);
+  }
+
+  &__response {
+    font-weight: 600;
+
+    &--error {
+      color: red;
+    }
+  }
+}
+</style>
diff --git a/src/components/ContractReadPanel.vue b/src/components/ContractReadPanel.vue
new file mode 100644
index 000000000..d20e3ac1d
--- /dev/null
+++ b/src/components/ContractReadPanel.vue
@@ -0,0 +1,47 @@
+<template>
+  <app-panel>
+    <template v-if="aciReadEntrypoints">
+      <h3 class="contract-read-panel__title">
+        Read Smart Contract Information
+      </h3>
+      <contract-entrypoint-accordion
+        :entrypoints="aciReadEntrypoints"
+        :loading-index="loadingIndex"
+        :response="response"
+        @query-clicked="getEntrypointResponse"/>
+    </template>
+    <blank-state v-else/>
+  </app-panel>
+</template>
+
+<script setup>
+import { useContractVerifiedStore } from '@/stores/contractVerified'
+
+const contractVerifiedStore = useContractVerifiedStore()
+const { aciReadEntrypoints } = storeToRefs(contractVerifiedStore)
+const {
+  fetchEntrypointResponse,
+  getReadContractInstance,
+  parseArguments,
+  parseResponse,
+} = contractVerifiedStore
+
+const response = ref([])
+const loadingIndex = ref(null)
+
+async function getEntrypointResponse(aciItem, index, form) {
+  loadingIndex.value = index
+  const args = parseArguments(aciItem, form)
+  const contractInstance = await getReadContractInstance()
+  const fetchedResponse = await fetchEntrypointResponse(contractInstance, aciItem, args)
+  response.value[index] = parseResponse(fetchedResponse)
+  loadingIndex.value = null
+}
+
+</script>
+
+<style scoped>
+.contract-read-panel__title {
+  margin-bottom: var(--space-2);
+}
+</style>
diff --git a/src/components/ContractWritePanel.vue b/src/components/ContractWritePanel.vue
new file mode 100644
index 000000000..def661edd
--- /dev/null
+++ b/src/components/ContractWritePanel.vue
@@ -0,0 +1,69 @@
+<template>
+  <app-panel>
+    <template v-if="aciWriteEntrypoints.length > 0">
+      <h3 class="contract-write-panel__title">
+        Write Smart Contract Information
+      </h3>
+      <div class="contract-write-panel__container">
+        <wallet-account-controls
+          :backlink="route.fullPath"
+          :has-menu="false"/>
+        <hint-tooltip>
+          {{ contractVerifiedHints.connectWallet }}
+        </hint-tooltip>
+      </div>
+      <contract-entrypoint-accordion
+        :is-disabled="!walletSdk"
+        :entrypoints="aciWriteEntrypoints"
+        :loading-index="loadingIndex"
+        :response="response"
+        @query-clicked="getEntrypointResponse"/>
+    </template>
+    <blank-state v-else/>
+  </app-panel>
+</template>
+
+<script setup>
+import { useContractVerifiedStore } from '@/stores/contractVerified'
+import { contractVerifiedHints } from '@/utils/hints/contractVerifiedHints'
+
+const contractVerifiedStore = useContractVerifiedStore()
+const { aciWriteEntrypoints } = storeToRefs(contractVerifiedStore)
+
+const {
+  fetchEntrypointResponse,
+  parseArguments,
+  parseResponse,
+  getWriteContractInstance,
+  walletSdk,
+} = contractVerifiedStore
+
+const route = useRoute()
+
+const response = ref([])
+const loadingIndex = ref(null)
+
+async function getEntrypointResponse(aciItem, index, form) {
+  loadingIndex.value = index
+  const args = parseArguments(aciItem, form)
+  const contractInstance = await getWriteContractInstance()
+  const fetchedResponse = await fetchEntrypointResponse(contractInstance, aciItem, args)
+  response.value[index] = parseResponse(fetchedResponse)
+  loadingIndex.value = null
+}
+</script>
+
+<style scoped>
+.contract-write-panel {
+  &__container {
+    display: flex;
+    align-items: center;
+    gap: var(--space-1);
+    margin-bottom: var(--space-3);
+  }
+
+  &__title {
+    margin-bottom: var(--space-2);
+  }
+}
+</style>
diff --git a/src/components/LoaderIndicatorSmall.vue b/src/components/LoaderIndicatorSmall.vue
new file mode 100644
index 000000000..003b4216a
--- /dev/null
+++ b/src/components/LoaderIndicatorSmall.vue
@@ -0,0 +1,6 @@
+<template>
+  <img
+    alt="loading"
+    src="@/assets/loader-small.svg"
+    height="20">
+</template>
diff --git a/src/components/TheHeader.vue b/src/components/TheHeader.vue
index 0bbc686f1..4d367ed5a 100644
--- a/src/components/TheHeader.vue
+++ b/src/components/TheHeader.vue
@@ -38,7 +38,7 @@
           'header__network-select',
           { 'header__network-select--open': isMobileMenuOpen }]"/>
 
-      <the-wallet-account-controls class="u-hidden-mobile"/>
+      <wallet-account-controls class="u-hidden-mobile"/>
     </div>
     <div
       v-if="isSyncing"
diff --git a/src/components/TheWalletAccountControls.vue b/src/components/WalletAccountControls.vue
similarity index 66%
rename from src/components/TheWalletAccountControls.vue
rename to src/components/WalletAccountControls.vue
index d2c25b33a..c52af5fa1 100644
--- a/src/components/TheWalletAccountControls.vue
+++ b/src/components/WalletAccountControls.vue
@@ -1,5 +1,7 @@
 <template>
-  <app-dropdown v-if="status === 'connected'">
+  <app-dropdown
+    v-if="status === 'connected'"
+    :is-disabled="!hasMenu">
     <div class="wallet-account-controls">
       <app-identicon
         :hash="aeSdk.address"
@@ -10,7 +12,9 @@
         {{ formatEllipseHash(aeSdk.address) }}
       </app-link>
     </div>
-    <template #menu>
+    <template
+      v-if="hasMenu"
+      #menu>
       <app-button @click="disconnectWallet">
         Disconnect Wallet
       </app-button>
@@ -19,8 +23,8 @@
 
   <app-button
     v-else
-    class="wallet-account-controls__button"
-    to="/wallet">
+    class="wallet-account-controls__button u-hidden-mobile"
+    @click="goToConnection()">
     Connect Wallet
   </app-button>
 </template>
@@ -29,11 +33,26 @@ import { storeToRefs } from 'pinia'
 import { formatEllipseHash } from '@/utils/format'
 import { useWalletStore } from '@/stores/wallet'
 
-const { go } = useRouter()
+const props = defineProps({
+  backlink: {
+    type: String,
+    default: null,
+  },
+  hasMenu: {
+    type: Boolean,
+    default: true,
+  },
+})
 
+const { go, push } = useRouter()
 const walletStore = useWalletStore()
 const { aeSdk, status } = storeToRefs(walletStore)
-const { disconnect } = walletStore
+const { disconnect, setBackLink } = walletStore
+
+function goToConnection() {
+  setBackLink(props.backlink)
+  push('/wallet')
+}
 
 function disconnectWallet() {
   disconnect()
@@ -48,12 +67,11 @@ function disconnectWallet() {
 
   &__identicon {
     margin-right: var(--space-1);
-    width: 32px;
+    width: 36px;
   }
 
   &__link {
     font-family: var(--font-monospaced);
-    font-size: 13px;
   }
 
   &__button {
diff --git a/src/components/WalletConnectionPanel.vue b/src/components/WalletConnectionPanel.vue
index 45ede3d62..6cd4f4dbe 100644
--- a/src/components/WalletConnectionPanel.vue
+++ b/src/components/WalletConnectionPanel.vue
@@ -1,8 +1,8 @@
 <template>
   <app-panel>
     <template
-      #title
-      v-if="title">
+      v-if="title"
+      #title>
       {{ title }}
     </template>
 
@@ -18,7 +18,6 @@
       <wallet-connect-button/>
     </template>
 
-
     <template v-if="status === 'not connected'">
       <p class="wallet-connection-panel__paragraph">
         Superhero wallet detected, but its selected network does not match.
@@ -40,13 +39,11 @@
       </app-button>
     </template>
 
-
     <template v-if="status === 'denied'">
       <p class="wallet-connection-panel__paragraph">
         Connection with your wallet has failed. Please make sure that you are logged into your wallet.
       </p>
-      <app-button
-        @click="router.go()">
+      <app-button @click="router.go()">
         Try again
       </app-button>
     </template>
@@ -55,9 +52,9 @@
 
 <script setup>
 import { storeToRefs } from 'pinia'
+import { useRuntimeConfig } from 'nuxt/app'
 import { useWalletStore } from '@/stores/wallet'
 import AppButton from '@/components/AppButton'
-import { useRuntimeConfig } from "nuxt/app";
 
 const { NETWORK_NAME } = useRuntimeConfig().public
 
@@ -70,7 +67,6 @@ const isProcessing = computed(() => {
   return status.value === 'detecting' || status.value === 'connecting' || status.value === 'disconnecting'
 })
 
-
 const title = computed(() => {
   if (status.value === 'not detected') {
     return 'Wallet not detected'
@@ -96,7 +92,6 @@ const title = computed(() => {
     }
   }
 
-
   &__loader-indicator {
     margin: var(--space-3) 0;
   }
diff --git a/src/pages/contracts/[id].vue b/src/pages/contracts/[id].vue
index e004c9737..1e85071bf 100644
--- a/src/pages/contracts/[id].vue
+++ b/src/pages/contracts/[id].vue
@@ -31,10 +31,20 @@
         <contract-events-panel/>
       </app-tab>
       <app-tab
-        title="Contract"
+        title="Verification"
         :has-verified-icon="isVerified">
         <contract-verified-panel/>
       </app-tab>
+      <app-tab
+        v-if="isVerified"
+        title="Read Contract">
+        <contract-read-panel/>
+      </app-tab>
+      <app-tab
+        v-if="isVerified"
+        title="Write Contract">
+        <contract-write-panel/>
+      </app-tab>
     </app-tabs>
   </template>
   <loader-panel v-else/>
@@ -57,7 +67,7 @@ const { fetchVerificationDetail } = contractVerifiedStore
 const { push, replace } = useRouter()
 const route = useRoute()
 
-const TAB_KEYS = ['call-transactions', 'events', 'contract-verified']
+const TAB_KEYS = ['call-transactions', 'events', 'contract-verified', 'contract-read', 'contract-write']
 
 const activeTabIndex = computed({
   get() {
diff --git a/src/pages/wallet/index.vue b/src/pages/wallet/index.vue
index 1949be699..4a0218da1 100644
--- a/src/pages/wallet/index.vue
+++ b/src/pages/wallet/index.vue
@@ -21,9 +21,11 @@ import { storeToRefs } from 'pinia'
 import { useWalletStore } from '@/stores/wallet'
 import { walletHints } from '@/utils/hints/walletHints'
 
+const { push } = useRouter()
+
 const walletStore = useWalletStore()
-const { scanWallets } = walletStore
-const { status } = storeToRefs(walletStore)
+const { scanWallets, setBackLink } = walletStore
+const { status, backLink } = storeToRefs(walletStore)
 
 const { isLoading } = useLoading()
 
@@ -32,4 +34,11 @@ onBeforeMount(async() => {
     await scanWallets()
   }
 })
+
+watch(status, newStatus => {
+  if (newStatus === 'connected' && backLink.value) {
+    push(backLink.value)
+    setBackLink(null)
+  }
+})
 </script>
diff --git a/src/plugins/sentry.js b/src/plugins/sentry.js
index 5fa3dbd7c..758f36c67 100644
--- a/src/plugins/sentry.js
+++ b/src/plugins/sentry.js
@@ -5,18 +5,18 @@ async function lazyLoadSentryIntegrations() {
   if (process.server) {
     return
   }
-
+  
   import("@sentry/browser").then((lazyLoadedSentry) => {
     Sentry.addIntegration(lazyLoadedSentry.replayIntegration());
   });
 }
 
-export default defineNuxtPlugin(({vueApp}) => {
+export default defineNuxtPlugin(({ vueApp }) => {
   if (process.server) {
     return
   }
 
-  const {SENTRY_DSN, APP_DOMAIN} = useRuntimeConfig().public
+  const { SENTRY_DSN, APP_DOMAIN } = useRuntimeConfig().public
 
   if (!SENTRY_DSN || !APP_DOMAIN) {
     console.warn('Sentry configuration is not set therefore it will not be initialized.')
@@ -28,7 +28,7 @@ export default defineNuxtPlugin(({vueApp}) => {
   Sentry.init({
     app: vueApp,
     dsn: SENTRY_DSN,
-    integrations: [Sentry.browserTracingIntegration({router})],
+    integrations: [Sentry.browserTracingIntegration({ router })],
     tracePropagationTargets: [APP_DOMAIN, /^\//],
 
     beforeSend: (event) => {
diff --git a/src/stores/aesdk.js b/src/stores/aesdk.js
index cea50c380..390418d1d 100644
--- a/src/stores/aesdk.js
+++ b/src/stores/aesdk.js
@@ -3,12 +3,12 @@ import { useRuntimeConfig } from 'nuxt/app'
 import { AeSdk, Node } from '@aeternity/aepp-sdk'
 
 export const useAesdk = defineStore('aesdk', () => {
-  const { NODE_URL } = useRuntimeConfig().public
+  const { NODE_URL, NETWORK_ID } = useRuntimeConfig().public
 
   const node = new Node(NODE_URL)
   const aeSdk = new AeSdk({
     nodes: [
-      { name: 'mainnet', instance: node },
+      { name: NETWORK_ID, instance: node },
     ],
     compilerUrl: 'https://compiler.aepps.com',
   })
diff --git a/src/stores/contractVerified.js b/src/stores/contractVerified.js
index e7b89b58e..27b641906 100644
--- a/src/stores/contractVerified.js
+++ b/src/stores/contractVerified.js
@@ -2,10 +2,16 @@ import { defineStore } from 'pinia'
 import { computed } from 'vue'
 import { useRuntimeConfig } from 'nuxt/app'
 import useAxios from '@/composables/useAxios'
-import { adaptVerificationDetail } from '@/utils/adapters'
+import { useWalletStore } from '@/stores/wallet'
+import { useAesdk } from '@/stores/aesdk'
+import { useContractDetailsStore } from '@/stores/contractDetails'
+import { adaptAciObject, adaptReadEntrypoints, adaptVerificationDetail, adaptWriteEntrypoints } from '~/utils/adapters'
 
 export const useContractVerifiedStore = defineStore('contractVerified', () => {
   const { CONTRACT_VERIFICATION_SERVICE_URL } = useRuntimeConfig().public
+  const { aeSdk: walletSdk } = storeToRefs(useWalletStore())
+  const { aeSdk } = storeToRefs(useAesdk())
+  const { contractDetails } = storeToRefs(useContractDetailsStore())
 
   const axios = useAxios()
   const rawVerificationDetails = ref(null)
@@ -18,6 +24,38 @@ export const useContractVerifiedStore = defineStore('contractVerified', () => {
       : null,
   )
 
+  const aciObject = computed(() =>
+    verificationDetails.value
+      ? adaptAciObject(verificationDetails.value)
+      : null,
+  )
+
+  const aciReadEntrypoints = computed(() =>
+    verificationDetails.value
+      ? adaptReadEntrypoints(aciObject.value)
+      : null,
+  )
+
+  const aciWriteEntrypoints = computed(() =>
+    verificationDetails.value
+      ? adaptWriteEntrypoints(aciObject.value)
+      : null,
+  )
+
+  async function getReadContractInstance() {
+    return await aeSdk.value.initializeContract({
+      aci: [aciObject.value],
+      address: contractDetails.value.id,
+    })
+  }
+
+  async function getWriteContractInstance() {
+    return await walletSdk.value.initializeContract({
+      aci: [aciObject.value],
+      address: contractDetails.value.id,
+    })
+  }
+
   async function fetchVerificationDetail(contractId) {
     rawVerificationDetails.value = null
 
@@ -35,11 +73,57 @@ export const useContractVerifiedStore = defineStore('contractVerified', () => {
     contractCode.value = data
   }
 
+  async function fetchEntrypointResponse(contractInstance, aciItem, args) {
+    try {
+      const contractCallResult = await contractInstance[aciItem.name](...args)
+      return {
+        responseType: 'success',
+        message: formatEntrypointResponse(contractCallResult.decodedResult, aciItem.returns),
+      }
+    } catch (error) {
+      return {
+        responseType: 'error',
+        message: error,
+      }
+    }
+  }
+
+  function parseArguments(aciItem, form) {
+    const argumentNames = aciItem.arguments.map(argument => `${aciItem.name}-${argument.name}`)
+    return argumentNames.map(name => form.value[name])
+  }
+
+  function parseResponse(object) {
+    if (object instanceof Map) {
+      for (const item of object.entries()) {
+        if (typeof item[1] === 'bigint') {
+          object.set(item[0], Number(item[1]))
+        }
+      }
+    }
+    for (const key in object) {
+      if (typeof object[key] === 'bigint') {
+        object[key] = Number(object[key])
+      } else if (typeof object[key] === 'object') {
+        parseResponse(object[key])
+      }
+    }
+    return object
+  }
+
   return {
     isVerified,
     verificationDetails,
     contractCode,
     fetchContractCode,
     fetchVerificationDetail,
+    fetchEntrypointResponse,
+    getReadContractInstance,
+    getWriteContractInstance,
+    parseArguments,
+    parseResponse,
+    aciReadEntrypoints,
+    aciWriteEntrypoints,
+    walletSdk,
   }
 })
diff --git a/src/stores/contracts.js b/src/stores/contracts.js
index dcc9c25ce..7b28f43a5 100644
--- a/src/stores/contracts.js
+++ b/src/stores/contracts.js
@@ -19,7 +19,6 @@ export const useContractsStore = defineStore('contracts', () => {
 
   async function fetchContracts(queryParameters = null) {
     const { data } = await axios.get(`${MIDDLEWARE_URL}${queryParameters || '/v3/transactions?type=contract_create&limit=10'}`)
-
     const verifiedContracts = await fetchVerifiedContracts(data)
     if (verifiedContracts) {
       data.data.forEach(contract => {
diff --git a/src/stores/recentBlocks.js b/src/stores/recentBlocks.js
index ff9dcb7e2..6e4766b92 100644
--- a/src/stores/recentBlocks.js
+++ b/src/stores/recentBlocks.js
@@ -90,7 +90,7 @@ export const useRecentBlocksStore = defineStore('recentBlocks', () => {
   /* HANDLING COMMUNICATION OVER REST API */
 
   async function fetchKeyblocks() {
-    const { data } = await axios.get(`${MIDDLEWARE_URL}/v3/key-blocks?&limit=${VISIBLE_KEYBLOCKS_LIMIT}`)
+    const { data } = await axios.get(`${MIDDLEWARE_URL}/v3/key-blocks?limit=${VISIBLE_KEYBLOCKS_LIMIT}`)
     keyblocks.value = data.data
     blockHeight.value = data.data[0].height
   }
@@ -128,33 +128,33 @@ export const useRecentBlocksStore = defineStore('recentBlocks', () => {
 
   async function processSocketMessage(message) {
     switch (message.subscription) {
-      case 'KeyBlocks':
-        fetchDeltaStats()
-        break
-      case 'MicroBlocks':
-        fetchTotalTransactionsCount()
-        await fetchKeyblocks()
-
-        try {
-          await fetchSelectedKeyblockMicroblocks(selectedKeyblock.value.hash)
-
-          if (isFirstMicroblockSelected.value && isFirstKeyblockSelected.value) {
-            await fetchSelectedMicroblockTransactions()
-          }
-        } catch (error) {
-          // ignore 400 errors when fetching data by a non-existing microblock
-          // as they are caused by microforks
-          if (error?.response.status !== 400) {
-            throw error
-          }
+    case 'KeyBlocks':
+      fetchDeltaStats()
+      break
+    case 'MicroBlocks':
+      fetchTotalTransactionsCount()
+      await fetchKeyblocks()
+
+      try {
+        await fetchSelectedKeyblockMicroblocks(selectedKeyblock.value.hash)
+
+        if (isFirstMicroblockSelected.value && isFirstKeyblockSelected.value) {
+          await fetchSelectedMicroblockTransactions()
         }
-
-        // sometimes delta stats are not yet available on keyblock message, so retry fetching them again
-        if (selectedDeltaStats.value === null) {
-          await fetchDeltaStats()
+      } catch (error) {
+        // ignore 400 errors when fetching data by a non-existing microblock
+        // as they are caused by microforks
+        if (error?.response.status !== 400) {
+          throw error
         }
+      }
+
+      // sometimes delta stats are not yet available on keyblock message, so retry fetching them again
+      if (selectedDeltaStats.value === null) {
+        await fetchDeltaStats()
+      }
 
-        break
+      break
     }
   }
 
diff --git a/src/stores/wallet.js b/src/stores/wallet.js
index 0b128d04b..17b18eb56 100644
--- a/src/stores/wallet.js
+++ b/src/stores/wallet.js
@@ -5,9 +5,10 @@ import { AeSdkAepp, BrowserWindowMessageConnection, Node, walletDetector } from
 export const useWalletStore = defineStore('wallet', () => {
   const { NODE_URL, NETWORK_ID } = useRuntimeConfig().public
 
-  const aeSdk = ref(null)
+  const aeSdk = shallowRef(null)
   const detectedWallets = ref(null)
   const status = ref(null)
+  const backLink = ref(null)
 
   async function initWallet() {
     try {
@@ -19,7 +20,7 @@ export const useWalletStore = defineStore('wallet', () => {
         compilerUrl: 'https://compiler.aepps.com',
       }
 
-      aeSdk.value = shallowReactive(new AeSdkAepp({
+      aeSdk.value = new AeSdkAepp({
         name: 'æScan',
         ...aeSdkOptions,
         onNetworkChange({ networkId }) {
@@ -29,7 +30,7 @@ export const useWalletStore = defineStore('wallet', () => {
         onDisconnect() {
           status.value = 'disconnecting'
         },
-      }))
+      })
       await connect()
     } catch (error) {
       status.value = 'failed'
@@ -44,7 +45,6 @@ export const useWalletStore = defineStore('wallet', () => {
       const timeout = setTimeout(() => {
         resolve(undefined)
         status.value = 'not detected'
-        // disconnect()
       }, 10000)
 
       function setDetected({ newWallet }) {
@@ -58,7 +58,6 @@ export const useWalletStore = defineStore('wallet', () => {
         }
       }
 
-
       const stopScan = walletDetector(new BrowserWindowMessageConnection(), setDetected)
     })
   }
@@ -79,6 +78,10 @@ export const useWalletStore = defineStore('wallet', () => {
     aeSdk.value.disconnectWallet()
   }
 
+  function setBackLink(link) {
+    backLink.value = link
+  }
+
   return {
     detectedWallets,
     status,
@@ -86,5 +89,7 @@ export const useWalletStore = defineStore('wallet', () => {
     initWallet,
     disconnect,
     aeSdk,
+    backLink,
+    setBackLink,
   }
 })
diff --git a/src/utils/adapters.js b/src/utils/adapters.js
index c3c09baab..3c4288541 100644
--- a/src/utils/adapters.js
+++ b/src/utils/adapters.js
@@ -680,3 +680,18 @@ export function adaptTopAccounts(topAccounts, distribution) {
       }
     })
 }
+
+export function adaptAciObject(verificationDetails) {
+  const aci = JSON.parse(verificationDetails.aci).find(item => item.contract)
+  const filteredFunctions = aci?.contract?.functions?.filter(fn => fn.name !== 'init')
+  aci.contract.functions = filteredFunctions
+  return aci
+}
+
+export function adaptReadEntrypoints(aci) {
+  return Object.groupBy(aci.contract.functions, formatIsStatefulEntrypoint).false
+}
+
+export function adaptWriteEntrypoints(aci) {
+  return Object.groupBy(aci.contract.functions, formatIsStatefulEntrypoint).true
+}
diff --git a/src/utils/format.js b/src/utils/format.js
index 868b6e1c0..8a5aa63cb 100644
--- a/src/utils/format.js
+++ b/src/utils/format.js
@@ -178,3 +178,20 @@ export function formatKnownAddress(hash, isEllipsed = true) {
     return hash
   }
 }
+
+export function formatIsStatefulEntrypoint(aciFunction) {
+  return !!aciFunction.stateful
+}
+
+export function formatEntrypointResponse(value, type) {
+  if (type === 'int') {
+    return new BigNumber(value)
+  }
+  if (type === 'address') {
+    return value
+  }
+  if (type === 'bool') {
+    return value.toString()
+  }
+  return value
+}
diff --git a/src/utils/hints/contractVerifiedHints.js b/src/utils/hints/contractVerifiedHints.js
index 4efb7f68c..0a2d4e7fe 100644
--- a/src/utils/hints/contractVerifiedHints.js
+++ b/src/utils/hints/contractVerifiedHints.js
@@ -4,4 +4,5 @@ export const contractVerifiedHints = {
   entryFile: 'Main file of the smart contract source code',
   verifiedAt: 'Timestamp when the smart contract was verified.',
   initCallParameters: 'Initial call parameters of the smart contract.',
+  connectWallet: 'Connect your wallet to execute write action to smart contract.',
 }
diff --git a/yarn.lock b/yarn.lock
index 535533661..d558b8d05 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3,17 +3,17 @@
 
 
 "@aeternity/aepp-calldata@^1.7.0":
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/@aeternity/aepp-calldata/-/aepp-calldata-1.7.0.tgz#3e01aeb464f77290ad79b2e137156d2fb54644fd"
-  integrity sha512-SxxJI+Z/FcxMNRtxmGWSRzrbRwsLI9fGKNdSWKevxa+QWVVOPF9o8XogCbM5FaW+u15P+O0dSvJWZCuJLQ7S9Q==
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/@aeternity/aepp-calldata/-/aepp-calldata-1.8.0.tgz#c34c5f60f54151d3626ba21df32292f460409e75"
+  integrity sha512-nrxnc4hkBMbQ6f/IZbGbJD5EvEMxb+4U+wmsNZkoTRJk3euLCh0Pz5/IevWi/jWeLw9X+LgDG579NdTjWO8znA==
   dependencies:
     blakejs "^1.2.1"
-    bs58 "^5.0.0"
+    bs58 "^6.0.0"
     rlp "^3.0.0"
     safe-buffer "^5.2.1"
     sha.js "^2.4.11"
 
-"@aeternity/aepp-sdk@^13.3.2":
+"@aeternity/aepp-sdk@13.3.3":
   version "13.3.3"
   resolved "https://registry.yarnpkg.com/@aeternity/aepp-sdk/-/aepp-sdk-13.3.3.tgz#6578373264a022bce29ec4f9b370bb03c30dbdff"
   integrity sha512-4t1izquMgEkvbGvZ6xXqed8ZM3LGlpXwxvqgR48VsHPJGRUO48m6PnY7hB9DETkJgWIGeN2jid0QBRqfcEw1yw==
@@ -114,9 +114,9 @@
     tslib "^2.6.2"
 
 "@azure/core-rest-pipeline@^1.9.1":
-  version "1.16.2"
-  resolved "https://registry.yarnpkg.com/@azure/core-rest-pipeline/-/core-rest-pipeline-1.16.2.tgz#3f71b09e45a65926cc598478b4f1bcd0fe67bf4b"
-  integrity sha512-Hnhm/PG9/SQ07JJyLDv3l9Qr8V3xgAe1hFoBYzt6LaalMxfL/ZqFaZf/bz5VN3pMcleCPwl8ivlS2Fjxq/iC8Q==
+  version "1.16.3"
+  resolved "https://registry.yarnpkg.com/@azure/core-rest-pipeline/-/core-rest-pipeline-1.16.3.tgz#bde3bc3ebad7f885ddd9de6af5e5a8fc254b287e"
+  integrity sha512-VxLk4AHLyqcHsfKe4MZ6IQ+D+ShuByy+RfStKfSjxJoL3WBWq17VNmrz8aT8etKzqc2nAeIyLxScjpzsS4fz8w==
   dependencies:
     "@azure/abort-controller" "^2.0.0"
     "@azure/core-auth" "^1.4.0"
@@ -148,7 +148,7 @@
   dependencies:
     tslib "^2.6.2"
 
-"@azure/core-util@^1.1.0", "@azure/core-util@^1.3.0", "@azure/core-util@^1.6.1", "@azure/core-util@^1.9.0":
+"@azure/core-util@^1.1.0", "@azure/core-util@^1.9.0":
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/@azure/core-util/-/core-util-1.9.1.tgz#05ea9505c5cdf29c55ccf99a648c66ddd678590b"
   integrity sha512-OLsq0etbHO1MA7j6FouXFghuHrAFGk+5C1imcpQ2e+0oZhYF07WLA+NW2Vqs70R7d+zOAWiWM3tbE1sXcDN66g==
@@ -156,6 +156,14 @@
     "@azure/abort-controller" "^2.0.0"
     tslib "^2.6.2"
 
+"@azure/core-util@^1.3.0", "@azure/core-util@^1.6.1":
+  version "1.9.2"
+  resolved "https://registry.yarnpkg.com/@azure/core-util/-/core-util-1.9.2.tgz#1dc37dc5b0dae34c578be62cf98905ba7c0cafe7"
+  integrity sha512-l1Qrqhi4x1aekkV+OlcqsJa4AnAkj5p0JV8omgwjaV9OAbP41lvrMvs+CptfetKkeEaGRGSzby7sjPZEX7+kkQ==
+  dependencies:
+    "@azure/abort-controller" "^2.0.0"
+    tslib "^2.6.2"
+
 "@azure/logger@^1.0.0":
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/@azure/logger/-/logger-1.1.3.tgz#09a8fd4850b9112865756e92d5e8b728ee457345"
@@ -440,9 +448,9 @@
     "@babel/plugin-syntax-typescript" "^7.24.7"
 
 "@babel/runtime-corejs3@^7.24.0":
-  version "7.24.8"
-  resolved "https://registry.yarnpkg.com/@babel/runtime-corejs3/-/runtime-corejs3-7.24.8.tgz#c0ae5a1c380f8442920866d0cc51de8024507e28"
-  integrity sha512-DXG/BhegtMHhnN7YPIvxWd303/9aXvYFD1TjNL3CD6tUrhI2LVsg3Lck0aql5TRH29n4sj3emcROypkZVUfSuA==
+  version "7.25.6"
+  resolved "https://registry.yarnpkg.com/@babel/runtime-corejs3/-/runtime-corejs3-7.25.6.tgz#5e3facf42775cc95bcde95746e940061931286e4"
+  integrity sha512-Gz0Nrobx8szge6kQQ5Z5MX9L3ObqNwCQY1PSwSNzreFL7aHGxv8Fp2j3ETV6/wWdbiV+mW6OSm8oQhg3Tcsniw==
   dependencies:
     core-js-pure "^3.30.2"
     regenerator-runtime "^0.14.0"
@@ -491,11 +499,6 @@
   resolved "https://registry.yarnpkg.com/@barbapapazes/plausible-tracker/-/plausible-tracker-0.4.0.tgz#3b3287988a8637d35c59140b6d6ec93664742552"
   integrity sha512-4hhXK62ORb4feJfjnIILXRnb6xfejHM6yvGCid6MwNdKiQyj6YLW0M779zXLH5IBS4mQObmrNul2HUleeavSKw==
 
-"@builder.io/partytown@^0.10.0":
-  version "0.10.2"
-  resolved "https://registry.yarnpkg.com/@builder.io/partytown/-/partytown-0.10.2.tgz#102c909f805c945a638e249275003ef6ba828287"
-  integrity sha512-A9U+4PREWcS+CCYzKGIPovtGB/PBgnH/8oQyCE6Nr9drDJk6cMPpLQIEajpGPmG9tYF7N3FkRvhXm/AS9+0iKg==
-
 "@capsizecss/metrics@^2.1.1":
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/@capsizecss/metrics/-/metrics-2.2.0.tgz#f8cad1e2911e2e1bb16c2cb69da41be8f5c9b31b"
@@ -1094,9 +1097,9 @@
   integrity sha512-GaHYm+c0O9MjZRu0ongGBRbinu8gVAMd2UZjji6jVmqKtZluZnptXGWhz1E8j8D2HJ3f/yMxKAUC0b+57wncIw==
 
 "@ledgerhq/devices@^8.3.0":
-  version "8.4.1"
-  resolved "https://registry.yarnpkg.com/@ledgerhq/devices/-/devices-8.4.1.tgz#ab47c188ef9156f6b81c37c4ef2f2aeec97c19bf"
-  integrity sha512-Mbjzqlcj4Q2StxEmaYEb5wv6sK5Sk26L4xs0BC9io/AyvpXNTDAp67tryB/klNcvd+WwZPcPdYYvlNzfQ0WTUA==
+  version "8.4.2"
+  resolved "https://registry.yarnpkg.com/@ledgerhq/devices/-/devices-8.4.2.tgz#f1c56194cf1343d56cad49c8feba92ad93432e14"
+  integrity sha512-oWNTp3jCMaEvRHsXNYE/yo+PFMgXAJGFHLOU1UdE4/fYkniHbD9wdxwyZrZvrxr9hNw4/9wHiThyITwPtMzG7g==
   dependencies:
     "@ledgerhq/errors" "^6.18.0"
     "@ledgerhq/logs" "^6.12.0"
@@ -1270,7 +1273,7 @@
   optionalDependencies:
     ipx "^2.1.0"
 
-"@nuxt/kit@3.12.4", "@nuxt/kit@^3.11.1", "@nuxt/kit@^3.11.2", "@nuxt/kit@^3.12.2", "@nuxt/kit@^3.5.0", "@nuxt/kit@^3.8.2":
+"@nuxt/kit@3.12.4", "@nuxt/kit@^3.11.1", "@nuxt/kit@^3.12.2", "@nuxt/kit@^3.5.0", "@nuxt/kit@^3.8.2":
   version "3.12.4"
   resolved "https://registry.yarnpkg.com/@nuxt/kit/-/kit-3.12.4.tgz#b7073611d533ac32b504d95664074be3587046b3"
   integrity sha512-aNRD1ylzijY0oYolldNcZJXVyxdGzNTl+Xd0UYyFQCu9f4wqUZqQ9l+b7arCEzchr96pMK0xdpvLcS3xo1wDcw==
@@ -1296,6 +1299,47 @@
     unimport "^3.9.0"
     untyped "^1.4.2"
 
+"@nuxt/kit@^3.11.2":
+  version "3.11.2"
+  resolved "https://registry.yarnpkg.com/@nuxt/kit/-/kit-3.11.2.tgz#dfc43c05992691bcd6aa58c14f88cf43e3abb788"
+  integrity sha512-yiYKP0ZWMW7T3TCmsv4H8+jEsB/nFriRAR8bKoSqSV9bkVYWPE36sf7JDux30dQ91jSlQG6LQkB3vCHYTS2cIg==
+  dependencies:
+    "@nuxt/schema" "3.11.2"
+    c12 "^1.10.0"
+    consola "^3.2.3"
+    defu "^6.1.4"
+    globby "^14.0.1"
+    hash-sum "^2.0.0"
+    ignore "^5.3.1"
+    jiti "^1.21.0"
+    knitwork "^1.1.0"
+    mlly "^1.6.1"
+    pathe "^1.1.2"
+    pkg-types "^1.0.3"
+    scule "^1.3.0"
+    semver "^7.6.0"
+    ufo "^1.5.3"
+    unctx "^2.3.1"
+    unimport "^3.7.1"
+    untyped "^1.4.2"
+
+"@nuxt/schema@3.11.2":
+  version "3.11.2"
+  resolved "https://registry.yarnpkg.com/@nuxt/schema/-/schema-3.11.2.tgz#530c7b4efd24c24523d8fd2d83dd66f44474d434"
+  integrity sha512-Z0bx7N08itD5edtpkstImLctWMNvxTArsKXzS35ZuqyAyKBPcRjO1CU01slH0ahO30Gg9kbck3/RKNZPwfOjJg==
+  dependencies:
+    "@nuxt/ui-templates" "^1.3.2"
+    consola "^3.2.3"
+    defu "^6.1.4"
+    hookable "^5.5.3"
+    pathe "^1.1.2"
+    pkg-types "^1.0.3"
+    scule "^1.3.0"
+    std-env "^3.7.0"
+    ufo "^1.5.3"
+    unimport "^3.7.1"
+    untyped "^1.4.2"
+
 "@nuxt/schema@3.12.4", "@nuxt/schema@^3.12.3":
   version "3.12.4"
   resolved "https://registry.yarnpkg.com/@nuxt/schema/-/schema-3.12.4.tgz#295873c5e8bfbda0c9312bd16272373c936e6a71"
@@ -1337,6 +1381,11 @@
     rc9 "^2.1.2"
     std-env "^3.7.0"
 
+"@nuxt/ui-templates@^1.3.2":
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/@nuxt/ui-templates/-/ui-templates-1.3.4.tgz#daf9fb9e330a12eef56855abc3d14899bb13f532"
+  integrity sha512-zjuslnkj5zboZGis5QpmR5gvRTx5N8Ha/Rll+RRT8YZhXVNBincifhZ9apUQ9f6T0xJE8IHPyVyPx6WokomdYw==
+
 "@nuxt/vite-builder@3.12.4":
   version "3.12.4"
   resolved "https://registry.yarnpkg.com/@nuxt/vite-builder/-/vite-builder-3.12.4.tgz#6ee925959a84fc4e00f1e87e752f2b75e8832129"
@@ -1413,17 +1462,6 @@
     pathe "^1.1.1"
     ufo "^1.3.2"
 
-"@nuxtjs/partytown@^1.5.0":
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/@nuxtjs/partytown/-/partytown-1.5.0.tgz#f76fcc813bef042b7f97a6ab551ca12b7176b525"
-  integrity sha512-3qJXEXoHydCEEiHZCy4Q80kHTqKD0T9Ryj8kjh0bwTfNHGQ5auC7pqJxy6+CFOqfZZRcGalqGb0MhhRc8GdTdw==
-  dependencies:
-    "@builder.io/partytown" "^0.10.0"
-    "@nuxt/kit" "^3.11.1"
-    knitwork "^1.0.0"
-    serve-static "^1.15.0"
-    ufo "^1.5.3"
-
 "@nuxtjs/plausible@^1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@nuxtjs/plausible/-/plausible-1.0.0.tgz#6fd329358e8827ce370782a6203d7ee68c2ddfb8"
@@ -2034,9 +2072,9 @@
     "@types/node" "*"
 
 "@types/ws@^8.5.10":
-  version "8.5.11"
-  resolved "https://registry.yarnpkg.com/@types/ws/-/ws-8.5.11.tgz#90ad17b3df7719ce3e6bc32f83ff954d38656508"
-  integrity sha512-4+q7P5h3SpJxaBft0Dzpbr6lmMaqh0Jr2tbhJZ/luAwvD7ohSCniYkwz/pLxuT2h0EOa6QADgJj1Ko+TzRfZ+w==
+  version "8.5.12"
+  resolved "https://registry.yarnpkg.com/@types/ws/-/ws-8.5.12.tgz#619475fe98f35ccca2a2f6c137702d85ec247b7e"
+  integrity sha512-3tPRkv1EtkDpzlgyKyI8pGsGZAGPEaXeu0DOj5DI25Ja91bdAYddYHbADRYVrZMRbfW+1l5YwXVDKohDJNQxkQ==
   dependencies:
     "@types/node" "*"
 
@@ -2851,6 +2889,11 @@ base-x@^4.0.0:
   resolved "https://registry.yarnpkg.com/base-x/-/base-x-4.0.0.tgz#d0e3b7753450c73f8ad2389b5c018a4af7b2224a"
   integrity sha512-FuwxlW4H5kh37X/oW59pwTzzTKRzfrrQwhmyspRM7swOEZcHtDZSCt45U6oKgtuFE+WYPblePMVIPR4RZrh/hw==
 
+base-x@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/base-x/-/base-x-5.0.0.tgz#6d835ceae379130e1a4cb846a70ac4746f28ea9b"
+  integrity sha512-sMW3VGSX1QWVFA6l8U62MLKz29rRfpTlYdCqLdpLo1/Yd4zZwSbnUaDfciIAowAqvq7YFnWq9hrhdg1KYgc1lQ==
+
 base64-js@^1.1.2, base64-js@^1.3.0, base64-js@^1.3.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a"
@@ -2999,6 +3042,13 @@ bs58@^5.0.0:
   dependencies:
     base-x "^4.0.0"
 
+bs58@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/bs58/-/bs58-6.0.0.tgz#a2cda0130558535dd281a2f8697df79caaf425d8"
+  integrity sha512-PD0wEnEYg6ijszw/u8s+iI3H17cTymlrwkKhDhPZq+Sokl3AU4htyBFTjAeNAlCCmg0f53g6ih3jATyCKftTfw==
+  dependencies:
+    base-x "^5.0.0"
+
 buffer-crc32@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/buffer-crc32/-/buffer-crc32-1.0.0.tgz#a10993b9055081d55304bd9feb4a072de179f405"
@@ -3066,7 +3116,7 @@ bytes@3.1.2:
   resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.1.2.tgz#8b0beeb98605adf1b128fa4386403c009e0221a5"
   integrity sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==
 
-c12@^1.11.1:
+c12@^1.10.0, c12@^1.11.1:
   version "1.11.1"
   resolved "https://registry.yarnpkg.com/c12/-/c12-1.11.1.tgz#d5244e95407af450a523e44eb57e5b87b82f8677"
   integrity sha512-KDU0TvSvVdaYcQKQ6iPHATGz/7p/KiVjPg4vQrB6Jg/wX9R0yl5RZxWm9IoZqaIHD2+6PZd81+KMGwRr/lRIUg==
@@ -9419,6 +9469,25 @@ unicorn-magic@^0.1.0:
   resolved "https://registry.yarnpkg.com/unicorn-magic/-/unicorn-magic-0.1.0.tgz#1bb9a51c823aaf9d73a8bfcd3d1a23dde94b0ce4"
   integrity sha512-lRfVq8fE8gz6QMBuDM6a+LO3IAzTi05H6gCVaUpir2E1Rwpo4ZUog45KpNXKC/Mn3Yb9UDuHumeFTo9iV/D9FQ==
 
+unimport@^3.7.1:
+  version "3.9.1"
+  resolved "https://registry.yarnpkg.com/unimport/-/unimport-3.9.1.tgz#0a895f91d33d858c6626e91869fd894a6b9c94dc"
+  integrity sha512-4gtacoNH6YPx2Aa5Xfyrf8pU2RdXjWUACb/eF7bH1AcZtqs+6ijbNB0M3BPENbtVjnCcg8tw9UJ1jQGbCzKA6g==
+  dependencies:
+    "@rollup/pluginutils" "^5.1.0"
+    acorn "^8.12.1"
+    escape-string-regexp "^5.0.0"
+    estree-walker "^3.0.3"
+    fast-glob "^3.3.2"
+    local-pkg "^0.5.0"
+    magic-string "^0.30.10"
+    mlly "^1.7.1"
+    pathe "^1.1.2"
+    pkg-types "^1.1.3"
+    scule "^1.3.0"
+    strip-literal "^2.1.0"
+    unplugin "^1.12.0"
+
 unimport@^3.7.2, unimport@^3.9.0:
   version "3.9.0"
   resolved "https://registry.yarnpkg.com/unimport/-/unimport-3.9.0.tgz#a3e7f1336f683d0e4dd4be084f8387a45e7f474f"
@@ -9492,6 +9561,16 @@ unplugin@^1.10.0, unplugin@^1.11.0, unplugin@^1.3.1, unplugin@^1.8.3:
     webpack-sources "^3.2.3"
     webpack-virtual-modules "^0.6.1"
 
+unplugin@^1.12.0:
+  version "1.12.0"
+  resolved "https://registry.yarnpkg.com/unplugin/-/unplugin-1.12.0.tgz#a11d3eb565602190748b1f95ecc8590b0f7dcbb4"
+  integrity sha512-KeczzHl2sATPQUx1gzo+EnUkmN4VmGBYRRVOZSGvGITE9rGHRDGqft6ONceP3vgXcyJ2XjX5axG5jMWUwNCYLw==
+  dependencies:
+    acorn "^8.12.1"
+    chokidar "^3.6.0"
+    webpack-sources "^3.2.3"
+    webpack-virtual-modules "^0.6.2"
+
 unstorage@^1.10.1, unstorage@^1.10.2:
   version "1.10.2"
   resolved "https://registry.yarnpkg.com/unstorage/-/unstorage-1.10.2.tgz#fb7590ada8b30e83be9318f85100158b02a76dae"
@@ -9875,7 +9954,7 @@ webpack-virtual-modules@^0.5.0:
   resolved "https://registry.yarnpkg.com/webpack-virtual-modules/-/webpack-virtual-modules-0.5.0.tgz#362f14738a56dae107937ab98ea7062e8bdd3b6c"
   integrity sha512-kyDivFZ7ZM0BVOUteVbDFhlRt7Ah/CSPwJdi8hBpkK7QLumUqdLtVfm/PX/hkcnrvr0i77fO5+TjZ94Pe+C9iw==
 
-webpack-virtual-modules@^0.6.1:
+webpack-virtual-modules@^0.6.1, webpack-virtual-modules@^0.6.2:
   version "0.6.2"
   resolved "https://registry.yarnpkg.com/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz#057faa9065c8acf48f24cb57ac0e77739ab9a7e8"
   integrity sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==