Merge pull request #759 from Sifchain/staging

[release] v2.11.0

app/CHANGELOG.md

@@ -1,3 +1,13 @@
+## Release 2022.09.17
+
+- Margin APR’s on Pool Stats page
+
+## Release 2022.09.16
+
+- Margin trading release
+- 3rd party charting integration
+- Margin APR’s on Pool page
+
 ## Release 2022.09.13
 
 - Remove PMTP rate from sidebar

app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "app",
-  "version": "2.10.1",
+  "version": "2.11.0",
   "private": true,
   "scripts": {
     "bump": "bump patch --tag --commit 'testnet release '",

app/src/business/services/DataService/DataService.ts

@@ -158,10 +158,11 @@ export default class DataService {
         "tokenStats",
         () =>
           fetchJSON<PoolStatsResponseData>(
-            `${this.baseUrl}/beta/asset/tokenStats`,
+            `${this.baseUrl}/beta/asset/tokenStatsPMTP`,
           ),
         60000 * 5, // cache for 5 minutes
       );
+
       return res;
     } catch (error) {
       return {} as PoolStatsResponseData;

app/src/business/usecases/clp/syncPools.ts

@@ -90,9 +90,17 @@ export function SyncPools(
         const toNativeAmountDerived = (rawAmount: string) =>
           AssetAmount(nativeAsset, rawAmount).toDerived();
 
+        const nativeAssetBalance = Amount(pool.nativeAssetBalance)
+          .add(pool.nativeCustody)
+          .add(pool.nativeLiabilities);
+
+        const externalAssetBalance = Amount(pool.externalAssetBalance)
+          .add(pool.externalCustody)
+          .add(pool.externalLiabilities);
+
         return new Pool(
-          AssetAmount(nativeAsset, pool.nativeAssetBalance),
-          AssetAmount(asset, pool.externalAssetBalance),
+          AssetAmount(nativeAsset, nativeAssetBalance),
+          AssetAmount(asset, externalAssetBalance),
           {
             poolUnits: Amount(pool.poolUnits),
             swapPrices: {

app/src/components/AssetIcon.tsx

@@ -62,6 +62,7 @@ export type NavIconName =
   | "balances"
   | "dashboard"
   | "changelog"
+  | "charts"
   | "documents"
   | "more"
   | "pool"

app/src/components/NavSidePanel/NavSidePanel.tsx

@@ -157,6 +157,11 @@ export default defineComponent({
                   icon="navigation/stake"
                   href="https://wallet.keplr.app/#/sifchain/stake"
                 />
+                <NavSidePanelItem
+                  displayName="Charts"
+                  icon="navigation/charts"
+                  href="https://dexscreener.com/sifchain/cusdc"
+                />
                 <NavSidePanelItem
                   icon="navigation/changelog"
                   onClick={() => {

app/src/components/NavSidePanel/RowanPrice.tsx

@@ -1,14 +1,12 @@
-import { computed, defineComponent } from "vue";
-import { usePoolStats } from "@/hooks/usePoolStats";
+import { defineComponent } from "vue";
+import { useRowanPrice } from "@/hooks/useRowanPrice";
+
 import NavSidePanelItem from "./NavSidePanelItem";
 
 export default defineComponent({
   name: "RowanPrice",
   setup() {
-    const poolStats = usePoolStats();
-    const rowanPrice = computed(() => {
-      return poolStats.data.value?.rowanUsd;
-    });
+    const { data: rowanPrice } = useRowanPrice();
 
     return () => (
       <NavSidePanelItem

app/src/hooks/usePoolStats.ts

@@ -7,33 +7,50 @@ import { useNativeChain } from "./useChains";
 import { useCore } from "./useCore";
 
 export interface PoolStatsResponseData {
-  statusCode: number;
-  headers: Headers;
-  body: Body;
-}
-
-interface Body {
   liqAPY: string;
   rowanUSD: string;
+  last_updated: string;
   pools: PoolStat[];
 }
 
 export interface PoolStat {
   symbol: string;
   priceToken: number;
-  rowanUSD: number;
   poolDepth: number;
+  rowanUSD?: number;
   poolTVL: number;
+  rowan_24h_lowest: number;
+  rowan_24h_highest: number;
+  rowan_24h_average: number;
+  rowan_24h_change: number;
+  volume_24h_lowest: number;
+  volume_24h_highest: number;
+  volume_24h_average: number;
+  volume_24h_change: number;
+  asset_24h_lowest: number;
+  asset_24h_highest: number;
+  asset_24h_average: number;
+  asset_24h_change: number;
+  tvl_24h_lowest: string;
+  tvl_24h_highest: string;
+  tvl_24h_average: string;
+  tvl_24h_change: string;
   volume: number;
   arb: number;
   dailySwapFees: number;
   poolBalance: number;
-  accruedNumSecsRewards: number;
+  poolBalanceInRowan: number;
+  accruedNumBlocksRewards: number;
   rewardPeriodNativeDistributed: number;
-  secsPerYear: number;
-  tradingApr: number;
+  blocksPerYear: number;
   rewardApr: number;
   poolApr: number;
+  margin_apr: number;
+  margin_apr_data_window: number;
+  health: string;
+  nativeCustody: string;
+  nativeLiability: string;
+  interestRate: string;
 }
 
 export interface Headers {
@@ -71,12 +88,12 @@ export function usePoolStats() {
       if (!poolStatsQuery.data.value) {
         return;
       }
-      const { body: poolData } = poolStatsQuery.data.value;
+      const poolData = poolStatsQuery.data.value;
 
       const response = {
         poolData,
         liqAPY: 0,
-        rowanUsd: poolData.rowanUSD,
+        rowanUSD: poolData.rowanUSD,
       };
 
       return response;
@@ -129,7 +146,7 @@ export function usePoolStats() {
       poolStatLookup[asset.symbol] = {
         ...poolStat,
         symbol: asset.symbol,
-        rowanUSD: parseFloat(poolStatsRes.data.value?.rowanUsd ?? "0"),
+        rowanUSD: parseFloat(poolStatsRes.data.value?.rowanUSD ?? "0"),
       };
     });
 
@@ -138,7 +155,7 @@ export function usePoolStats() {
     // exist, then if poolStats doesn't have data default to empty.
     const pools = Object.values(store.pools).map((pool) => ({
       ...pool,
-      rowanUSD: poolStatsRes.data.value?.rowanUsd || 0,
+      rowanUSD: poolStatsRes.data.value?.rowanUSD || 0,
     }));
     return pools.map((pool) => {
       const [, externalAssetAmount] = pool.amounts;

app/src/hooks/useRowanPrice.ts

@@ -3,15 +3,15 @@ import { watchEffect } from "vue";
 import { useCore } from "@/hooks/useCore";
 import { useAsyncDataCached } from "@/hooks/useAsyncDataCached";
 
+function isNumeric(s: string): boolean {
+  return Number(s) - 0 === Number(s) && ("" + s).trim().length > 0;
+}
+
 export const useRowanPrice = (params?: { shouldReload: boolean }) => {
   const { services } = useCore();
 
   const price = useAsyncDataCached("rowanPrice", async () => {
-    function isNumeric(s: string): boolean {
-      return Number(s) - 0 === Number(s) && ("" + s).trim().length > 0;
-    }
-
-    const { body: stats } = await services.data.getTokenStats();
+    const stats = await services.data.getTokenStats();
     const rowanPriceInUSDT = stats.rowanUSD ?? "";
 
     if (isNumeric(rowanPriceInUSDT)) {

app/src/hooks/useTVL.ts

@@ -8,7 +8,7 @@ export function useTVL() {
   const loadTVL = async () => {
     const tokenStats = await services.data.getTokenStats();
 
-    const pools = tokenStats.body.pools ?? [];
+    const pools = tokenStats.pools ?? [];
 
     const total = pools.reduce(
       (acc, { poolTVL, poolDepth }) =>

app/src/store/modules/flags.ts

@@ -66,7 +66,7 @@ export const flagsStore = Vuextra.createStore({
     liquidityUnlockCancellation: true,
     asymmetricPooling: false,
     lppdRewards: true,
-    margin: false,
+    margin: true,
     remoteFlags: {
       DISABLE_ETH_BRIDGE: false,
     },

app/src/utils/prettyNumber.ts

@@ -9,3 +9,10 @@ export function prettyNumber(n: number, precision = 2) {
   // if (fraction) final += "." + fraction;
   // return final;
 }
+
+export function prettyNumberMinMax(n: number, min = 0, max = 4) {
+  return new Intl.NumberFormat("en-us", {
+    minimumFractionDigits: min,
+    maximumFractionDigits: max,
+  }).format(n);
+}

app/src/views/PoolPage/PoolItem.tsx

@@ -9,7 +9,7 @@ import { useChains, useNativeChain } from "@/hooks/useChains";
 import { PoolStat } from "@/hooks/usePoolStats";
 import { useRowanPrice } from "@/hooks/useRowanPrice";
 import { isNil, isNilOrWhitespace } from "@/utils/assertion";
-import { prettyNumber } from "@/utils/prettyNumber";
+import { prettyNumber, prettyNumberMinMax } from "@/utils/prettyNumber";
 import { AssetAmount, IAssetAmount, Network, Pool } from "@sifchain/sdk";
 import { LiquidityProviderData } from "@sifchain/sdk/build/typescript/generated/proto/sifnode/clp/v1/types";
 import { computed, defineComponent, PropType } from "vue";
@@ -394,6 +394,16 @@ export default defineComponent({
               ? `${(this.$props.poolStat?.poolApr ?? 0).toFixed(2)}%`
               : "..."}
           </div>
+          <div
+            class={[
+              COLUMNS_LOOKUP.marginapy.class,
+              "flex items-center font-mono",
+            ]}
+          >
+            {!isNil(this.$props.poolStat?.margin_apr)
+              ? `${prettyNumberMinMax(this.$props.poolStat?.margin_apr ?? 0)}%`
+              : "..."}
+          </div>
           <div
             class={[
               COLUMNS_LOOKUP.userShare.class,

app/src/views/PoolPage/usePoolPageData.tsx

@@ -29,6 +29,7 @@ export type PoolPageData = ReturnType<typeof usePoolPageData>;
 export type PoolPageColumnId =
   | "token"
   | "apy"
+  | "marginapy"
   | "gainLoss"
   | "rewardApr"
   | "poolTvl"
@@ -69,7 +70,7 @@ export const COLUMNS: PoolPageColumn[] = [
   },
   {
     id: "apy",
-    name: "Pool APR",
+    name: "Reward APR",
     class: "w-[128px] text-right justify-end",
     sortable: true,
     help: (
@@ -80,6 +81,19 @@ export const COLUMNS: PoolPageColumn[] = [
       </code>
     ),
   },
+  {
+    id: "marginapy",
+    name: "Margin APR",
+    class: "w-[128px] text-right justify-end",
+    sortable: true,
+    help: (
+      <code class="text-xs">
+        Margin APR represents the ratio of interest payments to pool balances
+        over a given time period. The current time period is set as the previous
+        600 blocks (≈ 1 hour) of trading activity.
+      </code>
+    ),
+  },
   {
     id: "userShare",
     name: "Your Pool Share",

app/src/views/StatsPage/StatsPage.tsx

@@ -7,9 +7,10 @@ import { SearchBox } from "@/components/SearchBox";
 import Toggle from "@/components/Toggle";
 import { TokenNetworkIcon } from "@/components/TokenNetworkIcon/TokenNetworkIcon";
 import { Tooltip } from "@/components/Tooltip";
-import { prettyNumber } from "@/utils/prettyNumber";
+import { prettyNumber, prettyNumberMinMax } from "@/utils/prettyNumber";
 import { SMALL_POOL_CAP } from "../PoolPage/PoolPage";
 import { StatsPageState, useStatsPageData } from "./useStatsPageData";
+import { isNil } from "@/utils/assertion";
 
 export default defineComponent({
   name: "StatsPage",
@@ -72,6 +73,19 @@ export default defineComponent({
           </code>
         ),
       },
+      {
+        name: "Margin APR",
+        sortBy: "marginApr",
+        class: "min-w-[100px] text-right",
+        ref: ref<HTMLElement>(),
+        message: (
+          <code class="text-xs">
+            Margin APR represents the ratio of interest payments to pool
+            balances over a given time period. The current time period is set as
+            the previous 600 blocks (≈ 1 hour) of trading activity.
+          </code>
+        ),
+      },
     ];
     const colStyles = computed(() => {
       return columns.map((col) => {
@@ -247,6 +261,11 @@ export default defineComponent({
                       <td class="text-mono text-right align-middle">
                         {item.poolApr}%
                       </td>
+                      <td class="text-mono text-right align-middle">
+                        {!isNil(item.marginApr)
+                          ? `${prettyNumberMinMax(item.marginApr ?? 0)}%`
+                          : "..."}
+                      </td>
                     </tr>
                   );
                 })}

app/src/views/StatsPage/useStatsPageData.ts

@@ -13,7 +13,8 @@ export type StatsPageState = {
     | "volume"
     | "arbitrage"
     | "poolApr"
-    | "rewardApr";
+    | "rewardApr"
+    | "marginApr";
   sortDirection: "asc" | "desc";
 };
 
@@ -44,6 +45,7 @@ export function useStatsPageData(initialState: StatsPageState) {
           arbitrage: pool.arb == null ? null : pool.arb ?? 0,
           poolApr: pool.poolApr?.toFixed(1),
           rewardApr: pool.rewardApr,
+          marginApr: pool.margin_apr,
         };
 
         return item;

core/src/clients/wallets/cosmos/CosmosWalletProvider.ts

@@ -313,7 +313,25 @@ export abstract class CosmosWalletProvider extends WalletProvider<EncodeObject>
           // If it's not in the master list of all denom traces, that list may just be outdated...
           // Newly minted tokens aren't added to the master list immediately.
           // @ts-ignore
-          denomTrace = await this.getDenomTraceCached(chain, coin.denom);
+          try {
+            const cachedDenomTrace = await this.getDenomTraceCached(
+              chain,
+              coin.denom,
+            );
+
+            if (cachedDenomTrace) {
+              denomTrace = cachedDenomTrace;
+            }
+          } catch (error) {
+            console.log(
+              "failed to get denom_traces for asset, ignoring balance:",
+              {
+                chain: chain.chainConfig.chainId,
+                denom: coin.denom,
+              },
+            );
+            // invalid token, ignore
+          }
         }
 
         if (!denomTrace) {