Feature/dashboard button (#90)

* contract details logic * add whole contract details * fixes after review * add mixins for contract info pages * dashboard links
MorpheusAIs · Sep 4, 2024 · 7673f19 · 7673f19
1 parent 8e748fe
commit 7673f19
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 1 deletion.
diff --git a/src/localization/resources/en.json b/src/localization/resources/en.json
@@ -181,7 +181,10 @@
           "title": "L2 Token Receiver V2",
           "description": "A contract that receives tokens from the L1Sender contract and used for Uniswap market making with extended functionality."
         }
-      }
+      },
+      "copy-button": "Copy Dashboard Link",
+      "copied-text": "Copied!",
+      "dashboard-button": "Contract Dashboard"
     },
     "protocol-creation-page": {
       "distribution-address-label": "Distribution address",

diff --git a/src/pages/Mor20Ecosystem/MainPage.vue b/src/pages/Mor20Ecosystem/MainPage.vue
@@ -7,6 +7,22 @@
             <h2 class="main-page__title">
               {{ protocol?.name || $t(`${I18N_KEY_PREFIX}.title`) }}
             </h2>
+            <div class="main-page__dashboard-links">
+              <app-button
+                scheme="link"
+                :icon-right="$icons.externalLink"
+                :text="$t(`${I18N_KEY_PREFIX}.dashboard-button`)"
+                :route="{
+                  name: $routes.appDashboardCapital,
+                  query: { address: web3ProvidersStore.address },
+                }"
+              />
+              <app-button
+                :text="copyButtonText"
+                :icon-right="$icons.copy"
+                @click="copyDashboardLink"
+              />
+            </div>
             <div class="main-page__content-wrp">
               <ul class="main-page__cards">
                 <li v-for="(card, idx) in cards" :key="idx">
@@ -66,6 +82,8 @@ import { useWeb3ProvidersStore } from '@/store'
 import type { InfoCardType, Mor20EcosystemType } from '@/types'
 import { config } from '@config'
 import { computed, ref, watch } from 'vue'
+import { useClipboard } from '@vueuse/core'
+import { useRoute } from 'vue-router'
 
 // TODO: remove the condition when the page will have a mainnet contract
 onBeforeRouteUpdate(to => {
@@ -77,11 +95,31 @@ const I18N_KEY_PREFIX = 'mor20-ecosystem.main-page'
 
 const { t } = useI18n()
 const router = useRouter()
+const route = useRoute()
 const web3ProvidersStore = useWeb3ProvidersStore()
 
 const protocol = ref<Mor20EcosystemType.Protocol | null>(null)
 const isInitializing = ref(false)
 
+const { copy: _copy, copied: isCopied } = useClipboard()
+
+const copyButtonText = computed(() =>
+  isCopied.value
+    ? t(`${I18N_KEY_PREFIX}.copied-text`)
+    : t(`${I18N_KEY_PREFIX}.copy-button`),
+)
+
+const dashboardLink = computed(() => {
+  const link = router.resolve({
+    name: ROUTE_NAMES.appDashboardCapital,
+    query: {
+      address: web3ProvidersStore.address,
+      network: route.query.network,
+    },
+  }).href
+  return `${window.location.origin}${link}`
+})
+
 const cards = computed<InfoCardType.Card[]>(() => [
   {
     title: t('mor20-ecosystem.main-page.info-card.token.title'),
@@ -167,6 +205,14 @@ const init = async () => {
   isInitializing.value = false
 }
 
+const copyDashboardLink = async () => {
+  try {
+    await _copy(dashboardLink.value)
+  } catch (error) {
+    ErrorHandler.process(error)
+  }
+}
+
 watch(
   [
     () => web3ProvidersStore.address,
@@ -288,4 +334,10 @@ init()
     grid-template-columns: unset;
   }
 }
+
+.main-page__dashboard-links {
+  display: flex;
+  gap: toRem(12);
+  margin-top: toRem(20);
+}
 </style>