Merge pull request #246 from rsksmart/staging

Merge staging into develop

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/Search/CtrlSearch.vue

@@ -39,7 +39,8 @@
               <a
                 :href="result.link"
                 @touchend.passive="gotoResult($event, i)"
-                @click="gotoResult($event, i)">
+                @click="gotoResult($event, i)"
+              >
                 {{ result.name || result.value }}
               </a>
             </div>
@@ -92,7 +93,7 @@ export default {
       'fetchSearch'
     ]),
     formatValue (value) {
-      return value.toString().replaceAll(',', '')
+      return value.toString().replaceAll(',', '').trim()
     },
     btnClear () {
       this.clear()
@@ -121,8 +122,8 @@ export default {
       this.selectResult(0)
       const value = event.target.value
       this.value = value
-      this.emit(event, type, value)
-      this.emit(event, 'change', value)
+      this.emit(event, type, value.trim())
+      this.emit(event, 'change', value.trim())
     },
     emit (event, type, value) {
       type = type || event.type
@@ -230,3 +231,12 @@ export default {
   }
 }
 </script>
+
+<style>
+.highlight {
+  background-color: #ffef60;
+  color: #000;
+  border-radius: 4px;
+  font-weight: bold;
+}
+</style>

src/components/Search/SearchBox.vue

@@ -88,7 +88,7 @@ export default {
     },
     onInput ({ event, value }) {
       this.clearRequests()
-      if (!value || value.length < 2) return
+      if (!value) return
       this.setValue(value)
       this.fetchSearch({ value })
     },

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: {

src/store/modules/search/payloads.js

@@ -13,8 +13,12 @@ export const createPayloads = (payloads) => {
 }
 
 const getAddressName = data => {
-  const { address, name } = data
-  return `${name} ${address}`
+  const { address, symbol, name } = data
+  const validSymbol = typeof symbol === 'string' && symbol !== ''
+
+  if (validSymbol) return `(${symbol}) ${name}: ${address}`
+
+  return `${name}: ${address}`
 }
 
 const getAddressTime = data => {