From 38d8b67cca22296d2097e82cecd21a8b5397626a Mon Sep 17 00:00:00 2001
From: Tim Schmidt <tim@launchbadge.com>
Date: Thu, 12 Oct 2023 12:56:07 -0700
Subject: [PATCH] feat: add decoded url links, fix test

Signed-off-by: Tim Schmidt <tim@launchbadge.com>
---
 src/components/values/BlobValue.vue   | 15 +++++++++++++-
 tests/e2e/specs/TokenNavigation.cy.ts | 28 ++++++++++++++-------------
 2 files changed, 29 insertions(+), 14 deletions(-)

diff --git a/src/components/values/BlobValue.vue b/src/components/values/BlobValue.vue
index e8cdc2647..e583223d7 100644
--- a/src/components/values/BlobValue.vue
+++ b/src/components/values/BlobValue.vue
@@ -24,6 +24,7 @@
 
 <template>
   <a v-if="isURL && blobValue" v-bind:href="blobValue">{{ blobValue }}</a>
+  <a v-else-if="decodedURL" :href="decodedURL.toString()">{{ decodedURL }}</a>
   <a v-else-if="ipfsAddress" :href="ipfsAddress">{{ decodedValue }}</a>
   <div v-else-if="jsonValue"
        class="h-is-json is-inline-block has-text-left is-family-monospace h-is-text-size-3">{{ jsonValue }}</div>
@@ -88,6 +89,17 @@ export default defineComponent({
       return result
     })
 
+    const decodedURL = computed(() => {
+      if (decodedValue.value.startsWith("http://") || decodedValue.value.startsWith("https://")) {
+        try {
+          return new URL(decodedValue.value)
+        } catch {
+          return null
+        }
+      }
+      return null
+    })
+
     const jsonValue = computed(() => {
       let result
       if (decodedValue.value && props.pretty) {
@@ -139,7 +151,8 @@ export default defineComponent({
       jsonValue,
       decodedValue,
       initialLoading,
-      ipfsAddress
+      ipfsAddress,
+      decodedURL
     }
   }
 })
diff --git a/tests/e2e/specs/TokenNavigation.cy.ts b/tests/e2e/specs/TokenNavigation.cy.ts
index ace49b886..9fcebc281 100644
--- a/tests/e2e/specs/TokenNavigation.cy.ts
+++ b/tests/e2e/specs/TokenNavigation.cy.ts
@@ -75,19 +75,21 @@ describe('Token Navigation', () => {
         cy.contains('Token ID:' + nftId)
 
         cy.get('#nft-holder-table')
-            .find('tbody tr')
-            .should('be.visible')
-            .should('have.length.at.least', 2)
-            .eq(0)
-            .find('td')
-            .eq(1)
-            .find('a')
-            .click()
-            .then(($id) => {
-                // cy.log('Selected account Id: ' + $id.text())
-                cy.url().should('include', '/mainnet/account/' + $id.text())
-                cy.contains('Account ID:' + $id.text())
-            })
+          .find('tbody tr')
+          .should('be.visible')
+          .should('have.length.at.least', 2)
+          .eq(0)
+          .find('td')
+          .eq(0)
+          .click()
+          .then(($id) => {
+              cy.url().should('include', '/mainnet/token/' + nftId + '/' + $id.text())
+              cy.contains('Serial Number ' + $id.text())
+              cy.contains('Token ID')
+              cy.contains('Account ID')
+              cy.contains('Metadata')
+              cy.contains('Recent Transactions')
+          })
     })
 
     const tokenId = "0.0.1738807"