adding integrity check before opening dapp links

css/main.css

@@ -891,6 +891,9 @@ theme-toggle {
   margin-top: 1rem;
   margin-left: auto;
 }
+.dapp-card__link {
+  gap: 0.5rem;
+}
 .dapp-card__link--primary {
   background-color: rgba(var(--text-color), 1);
   color: rgba(var(--background-color), 1);

css/main.scss

@@ -832,6 +832,7 @@ theme-toggle {
     margin-left: auto;
   }
   &__link {
+    gap: 0.5rem;
     &--primary {
       background-color: rgba(var(--text-color), 1);
       color: rgba(var(--background-color), 1);

index.html

@@ -730,9 +730,9 @@
                             <a href=${`https://github.com/ranchimall/${appLink.split('/').pop()}/archive/refs/heads/master.zip`} class="button dapp-card__link dapp-download-button" title="Download dapp Zip">
                                 <svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><rect fill="none" height="24" width="24"/></g><g><path d="M18,15v3H6v-3H4v3c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2v-3H18z M17,11l-1.41-1.41L13,12.17V4h-2v8.17L8.41,9.59L7,11l5,5 L17,11z"/></g></svg>
                             </a>`: ''}
-                        <a href=${appLink} class="button dapp-card__link dapp-card__link--primary" target="_blank">
+                        <a href=${appLink} class="button dapp-card__link dapp-card__link--primary" target="_blank" onclick=${checkLinkBeforeVisiting}>
                             Try it
-                            <svg class="icon margin-left-0-5" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"> <path d="M0 0h24v24H0z" fill="none"></path> <path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"></path> </svg>    
+                            <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"> <path d="M0 0h24v24H0z" fill="none"></path> <path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"></path> </svg>    
                         </a>
                     </div>
                 </li>
@@ -1155,12 +1155,12 @@
                             ${allowDownload ? html`
                                 <a href=${`https://github.com/ranchimall/${appLink.split('/').pop()}/archive/refs/heads/master.zip`} class="button dapp-card__link dapp-download-button" title="Download dapp Zip">
                                     Download
-                                    <svg class="icon margin-left-0-5" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><rect fill="none" height="24" width="24"/></g><g><path d="M18,15v3H6v-3H4v3c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2v-3H18z M17,11l-1.41-1.41L13,12.17V4h-2v8.17L8.41,9.59L7,11l5,5 L17,11z"/></g></svg>
+                                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><rect fill="none" height="24" width="24"/></g><g><path d="M18,15v3H6v-3H4v3c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2v-3H18z M17,11l-1.41-1.41L13,12.17V4h-2v8.17L8.41,9.59L7,11l5,5 L17,11z"/></g></svg>
                                 </a>
                             `: ''}
                             <a href=${appLink} class="button dapp-card__link dapp-card__link--primary margin-right-auto" target="_blank">
                                 Try it
-                                <svg class="icon margin-left-0-5" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"> <path d="M0 0h24v24H0z" fill="none"></path> <path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"></path> </svg>    
+                                <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"> <path d="M0 0h24v24H0z" fill="none"></path> <path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"></path> </svg>    
                             </a>
                         </div>
                     </section>
@@ -1241,6 +1241,37 @@
                 return null
             }
         }
+        async function checkLinkBeforeVisiting(e) {
+            try {
+                e.preventDefault();
+                const anchor = e.target.closest('a')
+                const originalInnerHTML = anchor.innerHTML;
+                const link = anchor.href;
+                const wrapper = e.target.closest('.flex')
+                anchor.classList.remove('dapp-card__link--primary')
+                renderElem(anchor, html`
+                    <sm-spinner></sm-spinner>
+                    <h4>Checking integrity...</h4>
+                `)
+                const { hasValidHash, knownHash, latestHash } = await hasAKnownHash(link)
+                if (!hasValidHash) {
+                    renderElem(wrapper, html`
+                        <strong style="color: var(--danger-color)">Failed integrity check</strong>
+                    `)
+                    return
+                }
+                // restore the original element
+                anchor.innerHTML = originalInnerHTML;
+                anchor.classList.add('dapp-card__link--primary')
+                // open link in new tab
+                window.open(link, '_blank')
+            }
+            catch (e) {
+                notify('Integrity check failed. Please try again later.', 'error', {
+                    timeout: 10000,
+                })
+            }
+        }
     </script>
 </body>