From fc039c5548368fb514527a4f42fe93d9d06818df Mon Sep 17 00:00:00 2001
From: thomasRalee <thomas.leera@gmail.com>
Date: Thu, 28 Dec 2023 18:22:05 +0800
Subject: [PATCH] chore: layer add accordion component

---
 layer/Service.ts               |  2 +
 layer/components/Accordion.vue | 71 ++++++++++++++++++++++++++++++++++
 layer/icons/rotate-thin.vue    | 20 ++++++++++
 layer/utils/network.ts         |  9 +++--
 4 files changed, 99 insertions(+), 3 deletions(-)
 create mode 100644 layer/components/Accordion.vue
 create mode 100644 layer/icons/rotate-thin.vue

diff --git a/layer/Service.ts b/layer/Service.ts
index cd7f3011..0730c03a 100644
--- a/layer/Service.ts
+++ b/layer/Service.ts
@@ -14,6 +14,7 @@ import {
   IndexerGrpcOracleApi,
   IndexerGrpcAccountApi,
   IndexerRestExplorerApi,
+  IndexerGrpcExplorerApi,
   IndexerRestSpotChronosApi,
   IndexerGrpcDerivativesApi,
   IndexerGrpcAccountPortfolioApi
@@ -47,6 +48,7 @@ export const indexerAccountPortfolioApi = new IndexerGrpcAccountPortfolioApi(
   ENDPOINTS.indexer
 )
 export const indexerOracleApi = new IndexerGrpcOracleApi(ENDPOINTS.indexer)
+export const indexerExplorerApi = new IndexerGrpcExplorerApi(ENDPOINTS.indexer)
 export const indexerRestExplorerApi = new IndexerRestExplorerApi(
   `${ENDPOINTS.indexer}/api/explorer/v1`
 )
diff --git a/layer/components/Accordion.vue b/layer/components/Accordion.vue
new file mode 100644
index 00000000..966b1cf5
--- /dev/null
+++ b/layer/components/Accordion.vue
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps({
+  modelValue: {
+    type: [String, Number],
+    default: ''
+  },
+
+  value: {
+    type: [String, Number],
+    default: ''
+  },
+
+  activeClass: {
+    type: String,
+    default: ''
+  }
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string | number]
+}>()
+
+const isActive = computed(() => props.modelValue === props.value)
+
+function onClick() {
+  if (props.value === props.modelValue) {
+    emit('update:modelValue', '')
+
+    return
+  }
+
+  emit('update:modelValue', props.value)
+}
+</script>
+
+<template>
+  <div class="accordion" :class="[isActive ? activeClass : '']">
+    <div class="header" @click="onClick">
+      <slot name="header" v-bind="{ isActive }" />
+    </div>
+    <div class="content" :class="[isActive ? 'open' : 'closed']">
+      <div>
+        <slot name="content" v-bind="{ isActive }" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.accordion {
+  .header {
+    user-select: none;
+  }
+
+  .content {
+    display: grid;
+    transition: all 0.3s;
+  }
+  .content > div {
+    overflow: hidden;
+  }
+  .open {
+    grid-template-rows: 1fr;
+  }
+  .closed {
+    grid-template-rows: 0fr;
+  }
+}
+</style>
diff --git a/layer/icons/rotate-thin.vue b/layer/icons/rotate-thin.vue
new file mode 100644
index 00000000..29762530
--- /dev/null
+++ b/layer/icons/rotate-thin.vue
@@ -0,0 +1,20 @@
+<template>
+  <svg
+    width="16"
+    height="17"
+    viewBox="0 0 16 17"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M8 3.49992C5.23858 3.49992 3 5.7385 3 8.49992C3 11.2613 5.23858 13.4999 8 13.4999C10.7614 13.4999 13 11.2613 13 8.49992C13 7.75449 12.8372 7.04845 12.5457 6.41426C12.4304 6.16335 12.5403 5.86646 12.7912 5.75113C13.0421 5.6358 13.339 5.74571 13.4543 5.99661C13.8048 6.75915 14 7.60742 14 8.49992C14 11.8136 11.3137 14.4999 8 14.4999C4.68629 14.4999 2 11.8136 2 8.49992C2 5.18621 4.68629 2.49992 8 2.49992V3.49992Z"
+      fill="currentColor"
+    />
+    <path
+      d="M8 4.96616V1.03368C8 0.821722 8.24721 0.705932 8.41005 0.841626L10.7695 2.80787C10.8895 2.90781 10.8895 3.09203 10.7695 3.19198L8.41005 5.15822C8.24721 5.29391 8 5.17812 8 4.96616Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>
diff --git a/layer/utils/network.ts b/layer/utils/network.ts
index 1560e9df..13b171ea 100644
--- a/layer/utils/network.ts
+++ b/layer/utils/network.ts
@@ -1,5 +1,4 @@
-import { getExplorerUrl as getExplorerUrlHelper } from '@injectivelabs/sdk-ui-ts'
-import { IS_DEVNET, IS_TESTNET, NETWORK } from './../utils/constant'
+import { IS_DEVNET, IS_TESTNET } from './../utils/constant'
 
 export const getHubUrl = (): string => {
   if (IS_DEVNET) {
@@ -26,9 +25,13 @@ export const getExchangeUrl = (): string => {
 }
 
 export const getExplorerUrl = (): string => {
+  if (IS_DEVNET) {
+    return 'https://devnet.explorer.injective.dev'
+  }
+
   if (IS_TESTNET) {
     return 'https://testnet.explorer.injective.network'
   }
 
-  return getExplorerUrlHelper(NETWORK)
+  return 'https://explorer.injective.network'
 }