feat: Oracles details events tab 2

src/components/OracleEventsPanel.vue

@@ -0,0 +1,67 @@
+<template>
+  <app-panel class="oracle-events-panel">
+    <paginated-content
+      :entities="oracleEvents"
+      @prev-clicked="loadPrevEvents"
+      @next-clicked="loadNextEvents">
+      <oracle-events-table
+        v-if="oracleEvents"
+        :oracle-events="oracleEvents"
+        class="oracle-events-panel__table"/>
+
+      <oracle-events-table-condensed
+        v-if="oracleEvents"
+        :oracle-events="oracleEvents"
+        class="oracle-events-panel__table-condensed"/>
+    </paginated-content>
+  </app-panel>
+</template>
+<script setup>
+import { storeToRefs } from 'pinia'
+import { useOracleDetailsStore } from '@/stores/oracleDetails'
+import OracleEventsTable from '@/components/OracleEventsTable'
+import OracleEventsTableCondensed from '@/components/OracleEventsTableCondensed'
+
+const oracleDetailsStore = useOracleDetailsStore()
+const { oracleEvents } = storeToRefs(oracleDetailsStore)
+const { fetchOracleEvents } = oracleDetailsStore
+
+function loadPrevEvents() {
+  fetchOracleEvents({ queryParameters: oracleEvents.value.prev })
+}
+
+function loadNextEvents() {
+  fetchOracleEvents({ queryParameters: oracleEvents.value.next })
+}
+
+if (process.client) {
+  const limit = computed(() => isDesktop() ? 10 : 3)
+  await fetchOracleEvents({
+    limit: limit.value,
+  })
+}
+</script>
+
+<style scoped>
+.oracle-events-panel {
+  padding: var(--space-3) var(--space-1) var(--space-4);
+  margin-top: var(--space-2);
+
+  @media (--desktop) {
+    padding: var(--space-2) var(--space-4) var(--space-4);
+  }
+
+  &__table {
+    display: none;
+    @media (--desktop) {
+      display: revert;
+    }
+  }
+
+  &__table-condensed {
+    @media (--desktop) {
+      display: none;
+    }
+  }
+}
+</style>

src/components/OracleEventsQueryPanel.vue

@@ -0,0 +1,51 @@
+<template>
+  <app-panel class="oracle-events-query-panel">
+    <div class="oracle-events-query-panel__heading">
+      QueryDetails
+    </div>
+    <dl>
+      <dt>Query ID:</dt>
+      <dd>{{ event.queryId }}</dd>
+      <dt>Query Fee:</dt>
+      <dd>{{ formatAePrice(event.queryFee) }}</dd>
+      <dt>
+        Query:
+      </dt>
+      <dd>
+        {{ event.query }}
+      </dd>
+      <dt>Response TTL:</dt>
+      <dd>{{ event.responseTtl }}</dd>
+      <dt>
+        Response:
+      </dt>
+      <dd>
+        {{ event.response }}
+      </dd>
+    </dl>
+  </app-panel>
+</template>
+
+<script setup>
+defineProps({
+  event: {
+    type: Object,
+    required: true,
+  },
+})
+</script>
+
+<style scoped>
+.oracle-events-query-panel {
+  padding: var(--space-3);
+  background: var(--color-snow) !important;
+  font-size: 11px;
+  line-height: 16px;
+
+  &__heading {
+    font-weight: 700;
+    letter-spacing: 0.015em;
+    margin-bottom: var(--space-1);
+  }
+}
+</style>

src/components/OracleEventsTable.vue

@@ -0,0 +1,83 @@
+<template>
+  <table>
+    <thead>
+      <tr>
+        <th>Query Tx</th>
+        <th>Status</th>
+        <th>Queried at</th>
+        <th>Respond Tx</th>
+        <th>Respond at</th>
+      </tr>
+    </thead>
+    <tbody>
+      <template
+        v-for="(event, index) in oracleEvents.data"
+        :key="event.respondTx">
+        <tr>
+          <td :class="[{'oracle-events-table__opened': isOpened.includes(index)}]">
+            <hash-symbol>th</hash-symbol>
+            <value-hash-ellipsed
+              :hash="event.queryTx"
+              :link-to="`/transactions/${event.queryTx}`"/>
+          </td>
+          <td :class="[{'oracle-events-table__opened': isOpened.includes(index)}]">
+            <response-button
+              :status="event.status"
+              :is-collapsed="!isOpened.includes(index)"
+              @click="toggle(index)"/>
+          </td>
+          <td :class="[{'oracle-events-table__opened': isOpened.includes(index)}]">
+            <div>
+              {{ event.queriedAtHeight }}
+            </div>
+            <datetime-label :datetime="event.queriedAtTime"/>
+          </td>
+          <td :class="[{'oracle-events-table__opened': isOpened.includes(index)}]">
+            N/A
+          </td>
+          <td :class="[{'oracle-events-table__opened': isOpened.includes(index)}]">
+            N/A
+          </td>
+        </tr>
+        <tr v-if="isOpened.includes(index)">
+          <td
+            colspan="5"
+            class="oracle-events-table__query">
+            <oracle-events-query-panel :event="event"/>
+          </td>
+        </tr>
+      </template>
+    </tbody>
+  </table>
+</template>
+
+<script setup>
+defineProps({
+  oracleEvents: {
+    type: Array,
+    required: true,
+  },
+})
+const isOpened = ref([])
+
+function toggle(id) {
+  const index = isOpened.value.indexOf(id)
+  if (index > -1) {
+    isOpened.value.splice(index, 1)
+  } else {
+    isOpened.value.push(id)
+  }
+}
+</script>
+
+<style scoped>
+.oracle-events-table {
+  &__opened {
+    border-bottom: 0;
+  }
+
+  &__query {
+    border-top: 0;
+  }
+}
+</style>

src/components/OracleEventsTableCondensed.vue

@@ -0,0 +1,127 @@
+<template>
+  <div class="oracle-events-table-condensed">
+    <table
+      v-for="event in oracleEvents.data"
+      :key="event.respondTx"
+      class="oracle-events-table-condensed__table">
+      <tbody>
+        <tr class="oracle-events-table-condensed__row">
+          <th class="oracle-events-table-condensed__header">
+            Query Tx
+          </th>
+          <td class="oracle-events-table-condensed__data">
+            <value-hash-ellipsed
+              :hash="event.queryTx"
+              :link-to="`/transactions/${event.callTxHash}`"/>
+          </td>
+        </tr>
+        <tr class="oracle-events-table-condensed__row">
+          <th class="oracle-events-table-condensed__header">
+            Status
+          </th>
+          <td class="oracle-events-table-condensed__data">
+            <response-button
+              :status="event.status"
+              :is-collapsed="!isOpened.includes(index)"
+              @click="toggle(index)"/>
+          </td>
+        </tr>
+        <tr class="oracle-events-table-condensed__row">
+          <th class="oracle-events-table-condensed__header">
+            Queried at
+          </th>
+          <td class="oracle-events-table-condensed__data">
+            <div>
+              {{ event.queriedAtHeight }}
+            </div>
+            <datetime-label :datetime="event.queriedAtTime"/>
+          </td>
+        </tr>
+        <tr class="oracle-events-table-condensed__row">
+          <th class="oracle-events-table-condensed__header">
+            Respond Tx
+          </th>
+          <td class="oracle-events-table-condensed__data">
+            N/A
+          </td>
+        </tr>
+        <tr class="oracle-events-table-condensed__row">
+          <th
+            :class="[
+              'oracle-events-table-condensed__header',
+              {'oracle-events-table-condensed__header--opened': isOpened.includes(index)}]">
+            Respond at
+          </th>
+          <td
+            :class="[
+              'oracle-events-table-condensed__data',
+              {'oracle-events-table-condensed__data--opened': isOpened.includes(index)}]">
+            N/A
+          </td>
+        </tr>
+        <tr
+          v-if="isOpened.includes(index)"
+          class="oracle-events-table-condensed__row">
+          <td colspan="5">
+            <oracle-events-query-panel :event="event"/>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  oracleEvents: {
+    type: Array,
+    required: true,
+  },
+})
+const isOpened = ref([])
+
+function toggle(id) {
+  const index = isOpened.value.indexOf(id)
+  if (index > -1) {
+    isOpened.value.splice(index, 1)
+  } else {
+    isOpened.value.push(id)
+  }
+}
+</script>
+
+<style scoped>
+.oracle-events-table-condensed {
+  &__table {
+    background: var(--color-white);
+    padding: 0 var(--space-1) var(--space-7);
+    margin-bottom: var(--space-5);
+
+    &:last-of-type {
+      margin-bottom: var(--space-2);
+    }
+  }
+
+  &__header {
+    vertical-align: top;
+    border-bottom: 1px solid var(--color-midnight-15);
+    padding-right: var(--space-4);
+
+    &--opened {
+      border-bottom: 0;
+    }
+  }
+
+  &__row:last-of-type &__header {
+    border-bottom: 0;
+  }
+
+  &__data {
+    text-align: right;
+
+    &--opened {
+      border-bottom: 0;
+    }
+  }
+}
+</style>

src/components/ResponseButton.vue

@@ -0,0 +1,39 @@
+<template>
+  <div>
+    <app-chip :class="['response-button', {'response-button--activated': !isCollapsed}]">
+      Response available
+      <app-icon
+        class="response-button__icon"
+        :name="isCollapsed ? 'plus-circle' : 'minus-circle' "/>
+    </app-chip>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  status: {
+    type: String,
+    required: true,
+  },
+  isCollapsed: {
+    type: Boolean,
+    default: true,
+  },
+})
+</script>
+
+<style scoped>
+.response-button {
+  cursor: pointer;
+  color: var(--color-midnight);
+
+  &__icon {
+    margin-left: var(--space-1);
+  }
+
+  &--activated {
+    color: var(--color-white);
+    background-color: var(--color-midnight-55);
+  }
+}
+</style>