feat: add token offchain data provider attribution

matter-labs · Nov 28, 2023 · 7c4153f · 7c4153f
1 parent 4a665b0
commit 7c4153f
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 1 deletion.
diff --git a/packages/app/src/locales/en.json b/packages/app/src/locales/en.json
@@ -587,6 +587,7 @@
     "tokenListView": {
         "title": "Token List",
         "heading": "Tokens",
+        "offChainDataPoweredBy": "Off-chain data powered by",
         "table": {
             "tokenName": "Token Name",
             "price": "Price",

diff --git a/packages/app/src/locales/uk.json b/packages/app/src/locales/uk.json
@@ -328,6 +328,7 @@
     "tokenListView": {
         "title": "Список Токенів",
         "heading": "Токени",
+        "offChainDataPoweredBy": "Off-chain дані взяті з",
         "table": {
             "tokenName": "Назва Токена",
             "price": "Ціна",

diff --git a/packages/app/src/views/TokensView.vue b/packages/app/src/views/TokensView.vue
@@ -4,7 +4,13 @@
       <Breadcrumbs :items="breadcrumbItems" />
       <SearchForm class="search-form" />
     </div>
-    <h1>{{ t("tokenListView.heading") }}</h1>
+    <div class="tokens-header">
+      <h1>{{ t("tokenListView.heading") }}</h1>
+      <div v-if="tokens[0]?.iconURL" class="coingecko-attribution">
+        <span>{{ t("tokenListView.offChainDataPoweredBy") }}{{ " " }}</span>
+        <a href="https://www.coingecko.com/en/api" target="_blank">CoinGecko API</a>
+      </div>
+    </div>
     <div class="tokens-container">
       <span v-if="isTokensFailed" class="error-message">
         {{ t("failedRequest") }}
@@ -51,4 +57,16 @@ getTokens();
 .tokens-container {
   @apply mt-8;
 }
+
+.tokens-header {
+  @apply flex justify-between items-end gap-4;
+
+  .coingecko-attribution {
+    @apply mr-1 text-gray-300;
+
+    a {
+      @apply text-blue-100;
+    }
+  }
+}
 </style>