wip

components/protocols/yearn-v2/CardYearn.vue

@@ -5,7 +5,13 @@
   >
     <div class="flex items-center h-14">
       <div class="flex mr-4 -space-x-3 overflow-hidden">
-        <IconCurrency :currency="tokenKey" class="w-12 h-12" no-height />
+        <div
+          v-if="tokenIcon"
+          class="inline-flex items-center justify-center dark:opacity-90 w-12 h-12"
+        >
+          <img class="w-full h-full object-cover" :src="tokenIcon" />
+        </div>
+        <IconCurrency v-else :currency="tokenKey" class="w-12 h-12" no-height />
       </div>
 
       <div class="flex flex-col flex-grow">
@@ -25,7 +31,7 @@
       </div>
 
       <div class="ml-auto text-right">
-        <p class="text-lg font-medium">{{ formatPercent(netAPY) }}</p> 
+        <p class="text-lg font-medium">{{ formatPercent(netAPY) }}</p>
         <p class="text-sm font-medium text-[#9FB0C9]">net APY</p>
       </div>
     </div>
@@ -57,6 +63,7 @@ import { useToken } from "~/composables/useToken";
 export default defineComponent({
   props: {
     tokenKey: { type: String, required: true },
+    tokenIcon: { type: String, required: false },
     vault: { type: String, default: null },
     supply: { type: String, required: true },
     supplyUsd: { type: String, required: true },

composables/protocols/useYearnV2Position.ts

@@ -10,7 +10,9 @@ import { useBigNumber } from "../useBigNumber";
 
 const resolver = addresses.mainnet.resolver.yearnV2;
 
-const wantAddresses = tokens.mainnet.allTokens.map((token) => token.address);
+const allTokens = tokens.mainnet.allTokens.map(token => token.address);
+
+const wantAddresses = allTokens;
 
 const vaults = ref([]);
 
@@ -39,7 +41,16 @@ export function useYearnV2Position() {
       resolver
     );
 
-    const tokensArr = wantAddresses; // tokens.mainnet.allTokens.map(a => a.address);
+    // const tokensArr = wantAddresses;
+    
+    // allow user to add custom tokens
+    const tokensArr = [
+      ...new Set(
+        availableVaults.filter(v => v.type === "v2").map(v => v.token.address)
+        .filter(a => allTokens.includes(a))
+      )
+    ];
+    
 
     const rawData = await resolverInstance.methods
       .getPositionsForLatest(activeAccount.value.address, tokensArr)
@@ -65,8 +76,8 @@ export function useYearnV2Position() {
         const v = availableVaults.find(v => v.address === vault);
         if (v) {
           const supply = new BigNumber(balanceOf)
-          .dividedBy(10 ** decimals)
-          .toFixed();
+            .dividedBy(10 ** decimals)
+            .toFixed();
 
           newVaults.push({
             ...v,
@@ -85,7 +96,7 @@ export function useYearnV2Position() {
               isDeprecated,
               emergencyShutdown,
               supply,
-              supplyUsd: times(supply, v.tvl.price).toFixed(),
+              supplyUsd: times(supply, v.tvl.price).toFixed()
             }
           });
         }

pages/mainnet/yearn-v2.vue

@@ -48,6 +48,7 @@
           <card-yearn
             :vault="item.address"
             :token-key="item.token.display_name.toLowerCase()"
+            :token-icon="item.token.icon"
             :supply="item.position.supply"
             :supply-usd="item.position.supplyUsd"
             :type="item.type"