feat: add token network icon (#84)

* feat: add token network icon * fix name
snapshot-labs · Feb 26, 2024 · 0373b05 · 0373b05
1 parent 7a55303
commit 0373b05
Show file tree

Hide file tree

Showing 6 changed files with 66 additions and 24 deletions.
diff --git a/apps/ui/src/components/PickerToken.vue b/apps/ui/src/components/PickerToken.vue
@@ -126,7 +126,7 @@ watch(
       @click="handlePick(asset)"
     >
       <div class="flex items-center min-w-0 pr-2">
-        <UiStamp :id="`${networkId}:${asset.contractAddress}`" type="token" :size="32" />
+        <UiStampToken :id="`${networkId}:${asset.contractAddress}`" :size="32" />
         <div class="flex flex-col ml-3 leading-5 min-w-0">
           <div class="text-skin-link" v-text="shorten(asset.symbol, 'symbol')" />
           <div class="text-[17px] truncate" v-text="shorten(asset.name, 24)" />

diff --git a/apps/ui/src/components/SpaceDelegates.vue b/apps/ui/src/components/SpaceDelegates.vue
@@ -75,7 +75,7 @@ watchEffect(() => setTitle(`Delegates - ${props.space.name}`));
           <colgroup>
             <col class="w-auto" />
             <col class="w-auto md:w-[120px]" />
-            <col class="w-0 md:w-[200px]" />
+            <col class="w-0 md:w-[240px]" />
           </colgroup>
           <thead
             class="bg-skin-bg sticky top-[112px] lg:top-[113px] z-40 after:border-b after:absolute after:w-full"

diff --git a/apps/ui/src/components/SpacesListItem.vue b/apps/ui/src/components/SpacesListItem.vue
@@ -35,6 +35,7 @@ const spacesStore = useSpacesStore();
       />
       <img
         :src="(currentNetwork && getUrl(currentNetwork.avatar)) ?? undefined"
+        :title="(currentNetwork && currentNetwork.name) ?? undefined"
         class="w-[18px] h-[18px] rounded-full -right-1.5 bottom-0 absolute border-2 border-skin-bg"
       />
     </div>

diff --git a/apps/ui/src/components/Ui/StampToken.vue b/apps/ui/src/components/Ui/StampToken.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { getNetwork } from '@/networks';
+import { NetworkID } from '@/types';
+import { getUrl } from '@/helpers/utils';
+
+const props = withDefaults(
+  defineProps<{
+    id: string;
+    size?: number;
+    cb?: string;
+  }>(),
+  {
+    size: 22
+  }
+);
+
+const [network] = props.id.split(':');
+
+const currentNetwork = computed(() => {
+  try {
+    return getNetwork(network as NetworkID);
+  } catch (e) {
+    return null;
+  }
+});
+</script>
+
+<template>
+  <div class="relative">
+    <img
+      :src="(currentNetwork && getUrl(currentNetwork.avatar)) ?? undefined"
+      :title="(currentNetwork && currentNetwork.name) ?? undefined"
+      class="absolute rounded-full w-[16px] h-[16px] -bottom-1 -right-1 border border-skin-bg"
+    />
+    <UiStamp :id="id" type="token" :size="size" />
+  </div>
+</template>
diff --git a/apps/ui/src/composables/useBalances.ts b/apps/ui/src/composables/useBalances.ts
@@ -7,7 +7,8 @@ import {
   COINGECKO_BASE_ASSETS
 } from '@/helpers/constants';
 
-const COINGECKO_API_URL = 'https://api.coingecko.com/api/v3/simple';
+const COINGECKO_API_KEY = 'CG-1z19sMoCC6LoqR4b6avyLi3U';
+const COINGECKO_API_URL = 'https://pro-api.coingecko.com/api/v3/simple';
 const COINGECKO_PARAMS = '&vs_currencies=usd&include_24hr_change=true';
 
 export const METADATA_BY_CHAIN_ID = new Map(
@@ -26,11 +27,13 @@ export function useBalances() {
 
   async function getCoins(assetPlatform: string, baseToken: string, contractAddresses: string[]) {
     const [baseTokenData, tokenData] = await Promise.all([
-      callCoinGecko(`${COINGECKO_API_URL}/price?ids=${baseToken}${COINGECKO_PARAMS}`),
+      callCoinGecko(
+        `${COINGECKO_API_URL}/price?ids=${baseToken}${COINGECKO_PARAMS}&x_cg_pro_api_key=${COINGECKO_API_KEY}`
+      ),
       callCoinGecko(
         `${COINGECKO_API_URL}/token_price/${assetPlatform}?contract_addresses=${contractAddresses
-          .slice(0, 10)
-          .join(',')}${COINGECKO_PARAMS}`
+          .slice(0, 100)
+          .join(',')}${COINGECKO_PARAMS}&x_cg_pro_api_key=${COINGECKO_API_KEY}`
       )
     ]);
 
@@ -65,20 +68,22 @@ export function useBalances() {
           )
         : [];
 
-    assets.value = tokensWithBalance.map(asset => {
-      if (!coins[asset.contractAddress]) return asset;
-
-      const price = coins[asset.contractAddress]?.usd || 0;
-      const change = coins[asset.contractAddress]?.usd_24h_change || 0;
-      const value = parseFloat(formatUnits(asset.tokenBalance, asset.decimals)) * price;
-
-      return {
-        ...asset,
-        price,
-        change,
-        value
-      };
-    });
+    assets.value = tokensWithBalance
+      .map(asset => {
+        if (!coins[asset.contractAddress]) return asset;
+
+        const price = coins[asset.contractAddress]?.usd || 0;
+        const change = coins[asset.contractAddress]?.usd_24h_change || 0;
+        const value = parseFloat(formatUnits(asset.tokenBalance, asset.decimals)) * price;
+
+        return {
+          ...asset,
+          price,
+          change,
+          value
+        };
+      })
+      .sort((a, b) => b.value - a.value);
 
     loading.value = false;
     loaded.value = true;

diff --git a/apps/ui/src/views/Space/Treasury.vue b/apps/ui/src/views/Space/Treasury.vue
@@ -192,11 +192,10 @@ watchEffect(() => setTitle(`Treasury - ${props.space.name}`));
             class="mx-4 py-3 border-b flex"
           >
             <div class="flex-auto flex items-center min-w-0">
-              <UiStamp
+              <UiStampToken
                 :id="`${treasury.networkId}:${asset.contractAddress}`"
                 type="token"
                 :size="32"
-                :network="treasury.network"
               />
               <div class="flex flex-col ml-3 leading-[22px] min-w-0 pr-2 md:pr-0">
                 <h4 class="truncate" v-text="asset.symbol" />
@@ -205,7 +204,7 @@ watchEffect(() => setTitle(`Treasury - ${props.space.name}`));
             </div>
             <div
               v-if="asset.price"
-              class="flex-col items-end text-right leading-[22px] w-[180px] hidden md:block"
+              class="flex-col items-end text-right leading-[22px] w-[240px] hidden md:block"
             >
               <h4
                 class="text-skin-link"
@@ -224,7 +223,7 @@ watchEffect(() => setTitle(`Treasury - ${props.space.name}`));
                 />
               </div>
             </div>
-            <div class="flex-col items-end text-right leading-[22px] w-auto md:w-[180px]">
+            <div class="flex-col items-end text-right leading-[22px] w-auto md:w-[240px]">
               <h4
                 class="text-skin-link truncate"
                 v-text="