From bbba514fd593b96af16fc85e272bfdd7b5abdcfc Mon Sep 17 00:00:00 2001
From: gabaldon <maria@otherplane.com>
Date: Fri, 12 Apr 2024 12:02:08 +0200
Subject: [PATCH 1/2] feat: set ui for contract v2 address and fix address
 alignment

---
 packages/ui/components/IntegrationDetails.vue | 100 +++++++++++-------
 packages/ui/components/TransactionItem.vue    |   3 +
 packages/ui/locales/en-US.json                |   1 +
 packages/ui/locales/es-ES.json                |   1 +
 4 files changed, 64 insertions(+), 41 deletions(-)

diff --git a/packages/ui/components/IntegrationDetails.vue b/packages/ui/components/IntegrationDetails.vue
index e9bc5ce2..ed07d9ec 100644
--- a/packages/ui/components/IntegrationDetails.vue
+++ b/packages/ui/components/IntegrationDetails.vue
@@ -24,20 +24,34 @@
       </div>
     </div>
     <div class="right">
-      <p class="title-address">
+      <p v-if="isContractVersion2" class="title-address">
+        {{ $t('data_feed_details.contract_address_title').toUpperCase() }}
+      </p>
+      <p v-else class="title-address">
         {{ $t('data_feed_details.proxy_address').toUpperCase() }}
       </p>
-      <a :href="urlProxyContract" target="_blank" class="contract-info">
+      <a
+        v-if="isContractVersion2"
+        :href="urlProxyContract"
+        target="_blank"
+        class="contract-info"
+      >
         {{ proxyAddress }}
         <font-awesome-icon class="icon" icon="external-link-alt" />
       </a>
-      <p class="title-address">
-        {{ $t('data_feed_details.underlying_feed_contract').toUpperCase() }}
-      </p>
-      <a :href="urlUnderlyingContract" target="_blank" class="contract-info">
-        {{ feedAddress }}
-        <font-awesome-icon class="icon" icon="external-link-alt" />
-      </a>
+      <div v-else class="contract-addresses">
+        <a :href="urlProxyContract" target="_blank" class="contract-info">
+          {{ proxyAddress }}
+          <font-awesome-icon class="icon" icon="external-link-alt" />
+        </a>
+        <p class="title-address">
+          {{ $t('data_feed_details.underlying_feed_contract').toUpperCase() }}
+        </p>
+        <a :href="urlUnderlyingContract" target="_blank" class="contract-info">
+          {{ feedAddress }}
+          <font-awesome-icon class="icon" icon="external-link-alt" />
+        </a>
+      </div>
       <p class="title-address">
         {{ $t('data_feed_details.erc2362_asset_id').toUpperCase() }}
       </p>
@@ -48,41 +62,37 @@
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
 import { urls } from '../constants'
-export default {
-  props: {
-    network: {
-      type: String,
-      required: true,
-    },
-    proxyAddress: {
-      type: String,
-      required: true,
-    },
-    feedAddress: {
-      type: String,
-      required: true,
-    },
-    contractId: {
-      type: String,
-      required: true,
-    },
-    urlUnderlyingContract: {
-      type: String,
-      required: true,
-    },
-    urlProxyContract: {
-      type: String,
-      required: true,
-    },
+const props = defineProps({
+  network: {
+    type: String,
+    required: true,
   },
-  data() {
-    return {
-      urls,
-    }
+  proxyAddress: {
+    type: String,
+    required: true,
   },
-}
+  feedAddress: {
+    type: String,
+    required: true,
+  },
+  contractId: {
+    type: String,
+    required: true,
+  },
+  urlUnderlyingContract: {
+    type: String,
+    required: true,
+  },
+  urlProxyContract: {
+    type: String,
+    required: true,
+  },
+})
+const isContractVersion2: boolean = computed(
+  () => props.feedAddress === props.proxyAddress,
+)
 </script>
 
 <style lang="scss" scoped>
@@ -129,6 +139,11 @@ export default {
       word-break: break-all;
       max-width: 400px;
     }
+    .contract-addresses {
+      display: grid;
+      grid-template-columns: 1fr;
+      grid-gap: 8px;
+    }
     .contract-info {
       font-family:
         Roboto Mono,
@@ -138,6 +153,9 @@ export default {
       word-break: break-all;
       margin-bottom: 8px;
       cursor: pointer;
+      display: flex;
+      gap: 4px;
+      align-items: center;
     }
     .icon {
       font-size: 10px;
diff --git a/packages/ui/components/TransactionItem.vue b/packages/ui/components/TransactionItem.vue
index 19b3d1e3..bcb2915d 100644
--- a/packages/ui/components/TransactionItem.vue
+++ b/packages/ui/components/TransactionItem.vue
@@ -78,6 +78,9 @@ export default {
     Roboto Mono,
     monospace;
   transition: all 0.3 ease-in-out;
+  display: flex;
+  align-items: center;
+  gap: 4px;
 
   &:hover {
     opacity: 0.8;
diff --git a/packages/ui/locales/en-US.json b/packages/ui/locales/en-US.json
index 5179e25a..3cd5d1b7 100644
--- a/packages/ui/locales/en-US.json
+++ b/packages/ui/locales/en-US.json
@@ -7,6 +7,7 @@
     "recommended_for_testing": "Recommended for testing and upgradability",
     "optimized_for_gas_cost": "Optimized for gas cost and decentralization",
     "proxy_address": "Proxy address",
+    "contract_address_title": "Contract address",
     "underlying_feed_contract": "Underlying feed contract address",
     "erc2362_asset_id": "ERC2362 asset ID",
     "integration_details_description": "Witnet price feeds can be integrated into your own {0} contracts in two different ways:",
diff --git a/packages/ui/locales/es-ES.json b/packages/ui/locales/es-ES.json
index a3e11c30..adc9175f 100644
--- a/packages/ui/locales/es-ES.json
+++ b/packages/ui/locales/es-ES.json
@@ -7,6 +7,7 @@
     "recommended_for_testing": "Recomendado para pruebas y actualizaciones",
     "optimized_for_gas_cost": "Optimizado para el coste del gas y mayor descentralización",
     "proxy_address": "Dirección proxy",
+    "contract_address_title": "Dirección del contrato",
     "underlying_feed_contract": "Underlying feed contract address",
     "erc2362_asset_id": "Identificador ERC2362",
     "integration_details_description": "Los data feed de Witnet pueden ser integrados en tu propio contrato de {0} de dos formas diferentes:",

From ba949b0878bb256aaae398776485034669240d0e Mon Sep 17 00:00:00 2001
From: gabaldon <maria@otherplane.com>
Date: Fri, 12 Apr 2024 15:58:12 +0200
Subject: [PATCH 2/2] feat: update copies

---
 packages/ui/locales/en-US.json | 2 +-
 packages/ui/locales/es-ES.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/ui/locales/en-US.json b/packages/ui/locales/en-US.json
index 3cd5d1b7..a9f3d447 100644
--- a/packages/ui/locales/en-US.json
+++ b/packages/ui/locales/en-US.json
@@ -7,7 +7,7 @@
     "recommended_for_testing": "Recommended for testing and upgradability",
     "optimized_for_gas_cost": "Optimized for gas cost and decentralization",
     "proxy_address": "Proxy address",
-    "contract_address_title": "Contract address",
+    "contract_address_title": "Price Feeds Contract",
     "underlying_feed_contract": "Underlying feed contract address",
     "erc2362_asset_id": "ERC2362 asset ID",
     "integration_details_description": "Witnet price feeds can be integrated into your own {0} contracts in two different ways:",
diff --git a/packages/ui/locales/es-ES.json b/packages/ui/locales/es-ES.json
index adc9175f..71995592 100644
--- a/packages/ui/locales/es-ES.json
+++ b/packages/ui/locales/es-ES.json
@@ -7,7 +7,7 @@
     "recommended_for_testing": "Recomendado para pruebas y actualizaciones",
     "optimized_for_gas_cost": "Optimizado para el coste del gas y mayor descentralización",
     "proxy_address": "Dirección proxy",
-    "contract_address_title": "Dirección del contrato",
+    "contract_address_title": "Dirección de Price Feeds",
     "underlying_feed_contract": "Underlying feed contract address",
     "erc2362_asset_id": "Identificador ERC2362",
     "integration_details_description": "Los data feed de Witnet pueden ser integrados en tu propio contrato de {0} de dos formas diferentes:",