yam-finance · ghost · Dec 25, 2021
diff --git a/src/components/loader/ExploreTableLoader.vue b/src/components/loader/ExploreTableLoader.vue
@@ -0,0 +1,41 @@
+<template>
+    <tr v-if="loading && target == 'desktop'" class="border-b bg-main cursor-pointer basic-hover">
+        <td class="pl-4 py-2 font-semibold flex">
+            <div class="rounded-full animate-pulse bg-white w-6 h-6" />
+            <div class="animate-pulse bg-white ml-2 w-full">.</div>
+        </td>
+        <td><div class="animate-pulse bg-white">.</div></td>
+        <td><div class="animate-pulse bg-white">.</div></td>
+        <td class="pr-2 m-0">
+            <div class="rounded-full animate-pulse bg-white w-6 h-6" />
+        </td>
+    </tr>
+
+    <tr v-if="loading && target == 'mobile'" class="border-b bg-main basic-hover">
+        <td class="pl-4 py-2 font-semibold flex">
+            <div class="rounded-full animate-pulse bg-white w-6 h-6" />
+            <div class="animate-pulse bg-white ml-2 w-full">.</div>
+        </td>
+        <td><div class="animate-pulse bg-white">.</div></td>
+        <td><div class="animate-pulse bg-white">.</div></td>
+        <td>
+            <div class="rounded-full animate-pulse bg-white w-6 h-6" />
+        </td>
+    </tr>
+</template>
+
+<script>
+export default {
+    name: "ExploreTableLoader",
+    props: {
+        target: {
+            type: String,
+            default: "desktop",
+        },
+        loading: {
+            type: Boolean,
+            default: true,
+        },
+    },
+}
+</script>
diff --git a/src/components/TableLoader.vue → ...omponents/loader/PortfolioTableLoader.vue b/src/components/TableLoader.vue → ...omponents/loader/PortfolioTableLoader.vue
@@ -38,7 +38,7 @@
 
 <script>
 export default {
-    name: "TableLoader",
+    name: "PortfolioTableLoader",
     props: {
         target: {
             type: String,

diff --git a/src/composables/useSynthsSDK.ts b/src/composables/useSynthsSDK.ts
@@ -1,15 +1,18 @@
 import { ref, computed } from "vue"
 import { ethers } from "ethers"
-import Synths, { getRecentSynthData, getTotalMarketData } from "synths-sdk"
+import Synths, { getRecentSynthData, getTotalMarketData, getSynthData } from "synths-sdk"
 import { JsonRpcProvider } from "@ethersproject/providers"
 // TOOD Remove after testphase.
 import { defaultAssetsConfig, defaultTestAssetsConfig } from "synths-sdk/dist/src/lib/config"
+import { AssetConfig, isAssetConfigLSP } from "synths-sdk/dist/src/types/assets.t"
 
 let synthsSDK: Synths
+const POLYSCAN_API_KEY = import.meta.env.VITE_POLYSCAN_API_KEY as string
 const loading = ref(true)
 const data = ref({})
 const totalMarketData = ref()
 const recentSynthData = ref()
+const lspAssets = ref({})
 const lspPortfolio = ref()
 const totalSynthsMinted = ref(0)
 const totalPortfolioValue = ref(0)
@@ -23,7 +26,6 @@ export function useSynthsSDK() {
     async function init(provider: JsonRpcProvider, networkId: number) {
         loading.value = true
 
-        const POLYSCAN_API_KEY = import.meta.env.VITE_POLYSCAN_API_KEY as string
 
         synthsSDK = await Synths.create({ ethersProvider: provider, userAssetsConfig: defaultTestAssetsConfig })
         totalMarketData.value = await getTotalMarketData([networkId], synthsSDK.config, POLYSCAN_API_KEY)
@@ -44,9 +46,54 @@ export function useSynthsSDK() {
             }
         }
 
+        await getLspAssets()
+
         loading.value = false
     }
-    const getSDK = () => synthsSDK
+
+    /**
+     * @notice Loads the latest synth data.
+     * @dev Can be used for explore page.
+     */
+    async function getLspAssets() {
+        const assetsConfig = synthsSDK.assets
+
+        if (assetsConfig) {
+            for (const assetCategory in assetsConfig) {
+                const latestSynth: AssetConfig = assetsConfig[assetCategory][0]
+                if (isAssetConfigLSP(latestSynth)) {
+
+                    const tokenData = {}
+                    let shortData;
+                    let longData;
+
+                    for (const pool of latestSynth.pools) {
+                        const longOrShortToken = await getSynthData(
+                            pool.location, 
+                            pool.address, 
+                            latestSynth.collateral, 
+                            "137", 
+                            POLYSCAN_API_KEY
+                        )
+
+                        if (longOrShortToken) {
+                            if (longOrShortToken.tokenSymbol.startsWith("s")) {
+                                shortData = longOrShortToken;
+                            } else {
+                                longData = longOrShortToken;
+                            }
+                        }
+                    }
+
+                    lspAssets.value[assetCategory] = {
+                        "address": latestSynth.lsp.address,
+                        "short": shortData,
+                        "long": longData
+                    };
+                }
+            }
+        }
+    }
 
     /**
      * @notice Connect the sdk to a synth.
@@ -71,8 +118,8 @@ export function useSynthsSDK() {
         lspPortfolio: computed(() => lspPortfolio.value),
         totalSynthsMinted: computed(() => totalSynthsMinted.value),
         totalPortfolioValue: computed(() => totalPortfolioValue.value),
+        lspAssets: computed(() => lspAssets.value),
         connectTo,
         init,
-        getSDK,
     }
 }
diff --git a/src/views/Explore.vue b/src/views/Explore.vue
@@ -62,38 +62,35 @@
             </div>
         </div>
 
-        <table class="text-white border-b bg-main w-full font-normal hidden md:table">
+        <table cellpadding="5" class="text-white border-b bg-main w-full font-normal hidden md:table">
             <thead class="lg:text-xs xl:text-sm txt-main text-left">
                 <th class="py-2 px-4">Synth</th>
-                <th>Price</th>
-                <th>24h Change</th>
-                <th>24h Volume</th>
-                <th>Liquidity</th>
-                <th>APR</th>
+                <th>Price long</th>
+                <th>Price short</th>
                 <th></th>
             </thead>
             <tbody class="border-t bg-main lg:text-xs xl:text-sm 2xl:text-base">
-                <tr v-for="(synth, key) in synths" :key="key" class="cursor-pointer border-b bg-main basic-hover">
+                <tr v-for="(synth, key) of assets" :key="key" class="cursor-pointer border-b bg-main basic-hover">
                     <td class="px-4 py-2 flex">
                         <img src="@/assets/images/zombie.png" class="w-6 h-6" />
-                        <router-link class="font-semibold" :to="{ name: 'Markets', params: { synth: synth.tokenId } }">
-                            &nbsp;{{ synth.tokenSymbol }}
+                        <router-link class="font-semibold" :to="{ name: 'Markets', params: { synth: synth.address } }">
+                            &nbsp;{{ key }}
                         </router-link>
                     </td>
-                    <td>{{ synth.price }}</td>
-                    <td>
-                        <img src="@/assets/images/arrow-up-right.svg" class="h-4 inline -translate-y-0.5" />
-                        {{ synth.priceChanged24h }}
-                    </td>
-                    <td>{{ synth.volume24h }}</td>
-                    <td>{{ synth.liquidity }}</td>
-                    <td>{{ synth.apr }}%</td>
+
+                    <td v-if="synth.long">{{ $i18n.global.n(synth.long.price, "currency") }}</td>
+                    <td v-else>{{ $i18n.global.n(0, "currency") }}</td>
+
+                    <td v-if="synth.short">{{ $i18n.global.n(synth.short.price, "currency") }}</td>
+                    <td v-else>{{ $i18n.global.n(0, "currency") }}</td>
+
                     <td class="p-0 m-0">
-                        <router-link :to="{ name: 'Markets', params: { synth: synth.tokenId } }">
+                        <router-link :to="{ name: 'Markets', params: { synth: synth.address } }">
                             <img src="@/assets/images/arrow-right.svg" class="cursor-pointer" />
                         </router-link>
                     </td>
                 </tr>
+                <table-loader target="mobile" :loading="loading" />
             </tbody>
         </table>
         <div v-if="synths && !synths.length" class="cursor-pointer bg-main text-center flex justify-center w-full mt-3">
@@ -143,8 +140,8 @@
         <table class="text-white border-b bg-main w-full font-normal">
             <thead class="text-sm txt-main text-left">
                 <th class="py-2 px-4">Synth</th>
-                <th>Price</th>
-                <th>24h Change</th>
+                <th>Price long</th>
+                <th>Price short</th>
                 <th></th>
             </thead>
             <tbody class="border-t bg-main text-base">
@@ -156,41 +153,31 @@
                         </router-link>
                     </td>
                     <td>{{ synth.price }}</td>
-                    <td>
-                        <img src="@/assets/images/arrow-up-right.svg" class="h-4 inline -translate-y-0.5" />
-                        {{ synth.priceChanged24h }}
-                    </td>
+                    <td>{{ synth.price }}</td>
                     <router-link :to="{ name: 'Markets', params: { synth: synth.tokenId } }">
                         <img src="@/assets/images/arrow-right.svg" class="cursor-pointer" />
                     </router-link>
                 </tr>
+                <table-loader target="mobile" :loading="loading" />
             </tbody>
         </table>
     </div>
 </template>
 
+<script>
+import ExploreTableLoader from "@/components/loader/ExploreTableLoader.vue"
+
+export default {
+    components: {
+        "table-loader": ExploreTableLoader,
+    }
+}
+</script>
 <script setup>
 import { ref, computed } from "vue"
 import { useSynthsSDK } from "../composables/useSynthsSDK"
 
-const { loading, getSDK, recentSynthData } = useSynthsSDK()
-
-const lsp_assets = computed(() => {
-  if(!loading.value) {
-    const assetsConfig = getSDK().assets
-    if(assetsConfig) {
-      const lsps = []
-      for (const assetCategory in assetsConfig) {
-        const assets = assetsConfig[assetCategory]
-        lsps.push(assets)
-        }
-      }
-      return lsps
-    }
-
-})
-
-
+const { loading, lspAssets, recentSynthData } = useSynthsSDK()
 
 const filter_string = ref("")
 const synths = computed(() => {
@@ -201,5 +188,15 @@ const synths = computed(() => {
     }
 })
 
+const assets = computed(() => {
+    if (!loading.value) {
+        return lspAssets.value
+        /*
+        return lspAssets.value.filter((synth) =>
+            synth.toLowerCase().includes(filter_string.value.toLowerCase())
+        )
+        */
+    }
+})
 const filter = (event) => (filter_string.value = event.target.value)
 </script>
diff --git a/src/views/Portfolio.vue b/src/views/Portfolio.vue
@@ -192,15 +192,15 @@ import { computed, ref } from "vue"
 import { ethers } from "ethers"
 import { useSynthsSDK } from "@/composables/useSynthsSDK"
 import SynthsRoundedButton from "@/components/buttons/SynthsRoundedButton.vue"
-import TableLoader from "@/components/TableLoader.vue"
+import PortfolioTableLoader from "@/components/loader/PortfolioTableLoader.vue"
 
 const filter_string = ref("")
 
 export default {
     name: "Portfolio",
     components: {
         "s-button": SynthsRoundedButton,
-        "table-loader": TableLoader,
+        "table-loader": PortfolioTableLoader,
     },
     setup() {
         const { loading, lspPortfolio, totalSynthsMinted, totalPortfolioValue } = useSynthsSDK()