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

@@ -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,14 +64,14 @@ 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,
     semi: ['error', 'never'],
     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 }],
   },
 }

cypress.config.ts

@@ -1,4 +1,4 @@
-import { defineConfig } from 'cypress'
+import {defineConfig} from 'cypress'
 
 export default defineConfig({
   env: {

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')
   })

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",

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");

src/components/AccountDetailsPanel.vue

@@ -81,8 +81,7 @@
             Is Generalized
           </th>
           <td>
-            <app-chip
-              size="sm">
+            <app-chip size="sm">
               Generalized
             </app-chip>
           </td>

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>

src/components/AppButton.vue

@@ -63,8 +63,8 @@ defineProps({
       'link',
       'link-error',
       'primary',
-      'light']
-      .includes(val),
+      'light',
+    ].includes(val),
   },
   type: {
     type: String,

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);

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;
     }

src/components/CodeEditor.vue

@@ -70,6 +70,5 @@ const codeModel = ref(props.code)
   .mtk7 {
     color: var(--color-success);
   }
-
 }
 </style>