feat: add remix link in contract code view

src/components/ContractCode.vue

@@ -12,7 +12,7 @@
       <h3 class="subtitle">Contract Source</h3>
 
       <!-- Source -->
-      <ctrl-big-text v-if="source" :value="source.contents" :fileName="source.name" fileType="sol" :title="source.name">
+      <ctrl-big-text v-if="source" :value="source.contents" :fileName="source.name" fileType="sol" :title="source.name" :remixLink="remixLink">
         <source-code language="solidity" :code="source.contents"></source-code>
       </ctrl-big-text>
 
@@ -144,6 +144,16 @@ export default {
       const result = this.result || {}
       const { constructorArguments: decoded, encodedConstructorArguments: encoded } = result
       return (encoded || decoded) ? { encoded, decoded } : undefined
+    },
+    remixLink () {
+      const address = this.data.address
+
+      // backend url format: without protocol and trailing slash
+      // const backend = process.env.WS_URL // Staging behind VPN -> Remix cannot reach it
+      const backend = 'mock-backend.netlify.app/.netlify/functions/index' // TODO: Update with the correct backend once QA is done
+      const link = `https://remix.ethereum.org/?address=${address}&blockscout=${backend}`
+
+      return link
     }
   },
   methods: {
@@ -159,28 +169,5 @@ export default {
   }
 }
 </script>
-// <style lang="stylus">
-// .contract-details
-//   .verify
-//     display block
-//     margin 1em
-//     width 100%
-//     text-align right
-
-//   .files
-//     display flex
-//     flex-flow row wrap
-//     position relative
-//     min-width 100%
-//     width 100%
-//     justify-content flex-start
-
-//     button
-//       margin 0 0.5em
-
-//   .selected-file-enter-active, .selected-file-leave-active
-//     transition opacity 0.2s ease-in
-
-//   .selected-file-enter, .selected-file-leave-to
-//     opacity 0
-// </style>
+<style>
+</style>

src/components/RemixLink.vue

@@ -0,0 +1,44 @@
+<template>
+  <a v-if="remixLink" :href="remixLink" target="_blank" class="remix-link">
+    <img src="@/assets/icons/remix.png" height="16px" width="16px" alt="Remix Icon" class="remix-icon" />
+    Open in Remix
+    <img src="@/assets/svg/link.svg" height="12px" alt="link icon">
+  </a>
+</template>
+
+<script>
+export default {
+  name: 'RemixLink',
+  props: {
+    remixLink: {
+      type: String,
+      required: true
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/styles/variables.scss';
+
+.remix-link {
+  padding: 8px 10px;
+  font-size: 12px;
+  border-radius: 10px;
+  background-color: none;
+  color: $white_100;
+  border: 2px solid $white_400;
+  transition: background-color 0.3s ease, border 0.3s ease;
+  text-decoration: none;
+  text-align: center;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-left: 6px;
+  margin-right: 3px;
+
+  &:hover {
+    border: 2px solid $white_100;
+  }
+}
+</style>

src/components/controls/CtrlBigText.vue

@@ -5,18 +5,22 @@
         strong.subtitle {{title}}
       copy-button.button(v-bind='{value,css,title:copyTitle}')
       download-button.button(v-if='fileType' v-bind='{fileName,fileType,value,css, title:downloadTitle}')
+      remix-link(v-if='remixLink' :remixLink='remixLink')
     .big-text(:style='style')
       slot
       .content(v-if='!hasSlots') {{value}}
 </template>
 <script>
 import CopyButton from './CopyButton'
 import DownloadButton from './DownloadButton'
+import RemixLink from '../RemixLink.vue'
+
 export default {
   name: 'ctrl-big-text',
   components: {
     CopyButton,
-    DownloadButton
+    DownloadButton,
+    RemixLink
   },
   props: {
     value: {
@@ -29,6 +33,10 @@ export default {
     height: {
       type: String,
       default: '20em'
+    },
+    remixLink: {
+      type: String,
+      default: null
     }
   },
   computed: {