Paired token APR display (#851)

* paired APR on Pool Stats and Pool * testnet release 2.14.22
Sifchain · Dec 8, 2023 · 7423069 · 7423069 · vercel · Dec 8, 2023
1 parent a61253f
commit 7423069
Show file tree

Hide file tree

Showing 7 changed files with 62 additions and 20 deletions.
diff --git a/app/package.json b/app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "app",
-  "version": "2.14.21",
+  "version": "2.14.22",
   "private": true,
   "scripts": {
     "bump": "bump patch --tag --commit 'testnet release '",

diff --git a/app/src/hooks/usePoolStats.ts b/app/src/hooks/usePoolStats.ts
@@ -52,6 +52,7 @@ export interface PoolStat {
   nativeCustody: string;
   nativeLiability: string;
   interestRate: string;
+  pairedApr: number;
 }
 
 export interface Headers {

diff --git a/app/src/views/PoolPage/PoolItem.tsx b/app/src/views/PoolPage/PoolItem.tsx
@@ -398,12 +398,25 @@ export default defineComponent({
               : "..."}
           </div>
           <div
-            class={[COLUMNS_LOOKUP.apy.class, "flex items-center font-mono"]}
+            class={[
+              COLUMNS_LOOKUP.rowanApr.class,
+              "flex items-center font-mono",
+            ]}
           >
             {isNil(this.$props.poolStat?.poolApr)
               ? "..."
               : `${(this.$props.poolStat?.poolApr ?? 0).toFixed(2)}%`}
           </div>
+          <div
+            class={[
+              COLUMNS_LOOKUP.pairedApr.class,
+              "flex items-center font-mono",
+            ]}
+          >
+            {isNil(this.$props.poolStat?.pairedApr)
+              ? "..."
+              : `${(this.$props.poolStat?.pairedApr ?? 0).toFixed(2)}%`}
+          </div>
           {/* <div
             class={[
               COLUMNS_LOOKUP.marginapy.class,

diff --git a/app/src/views/PoolPage/PoolPage.tsx b/app/src/views/PoolPage/PoolPage.tsx
@@ -29,7 +29,7 @@ export default defineComponent({
   name: "PoolsPage",
   data() {
     return {
-      sortBy: "rewardApy" as PoolPageColumnId,
+      sortBy: "rowanApr" as PoolPageColumnId,
       sortReverse: false,
       searchQuery: "",
       showSmallPools: true,

diff --git a/app/src/views/PoolPage/usePoolPageData.tsx b/app/src/views/PoolPage/usePoolPageData.tsx
@@ -28,7 +28,8 @@ export type PoolPageData = ReturnType<typeof usePoolPageData>;
 
 export type PoolPageColumnId =
   | "token"
-  | "apy"
+  | "rowanApr"
+  | "pairedApr"
   // | "marginapy"
   | "gainLoss"
   | "rewardApr"
@@ -59,25 +60,36 @@ export const COLUMNS: PoolPageColumn[] = [
   {
     id: "token",
     name: "Token Pair",
-    class: "w-[280px] text-left justify-start whitespace-nowrap",
+    class: "w-[260px] text-left justify-start whitespace-nowrap",
     sortable: true,
   },
   {
     id: "poolTvl",
     name: "Pool TVL",
     sortable: true,
-    class: "w-[200px] text-right justify-end whitespace-nowrap",
+    class: "w-[128px] text-right justify-end whitespace-nowrap",
+  },
+  {
+    id: "rowanApr",
+    name: "Rowan APR",
+    class: "w-[128px] text-right justify-end whitespace-nowrap",
+    sortable: true,
+    help: (
+      <code class="text-xs">
+        Annualized reward rate, paid in Rowan. Rowan APR = Total rewards
+        distributed in current program / (Total blocks passed in current program
+        * Current pool balance) * (Total blocks per year)
+      </code>
+    ),
   },
   {
-    id: "apy",
-    name: "Reward APR",
+    id: "pairedApr",
+    name: "Paired APR",
     class: "w-[128px] text-right justify-end whitespace-nowrap",
     sortable: true,
     help: (
       <code class="text-xs">
-        Pool reward APR = Total rewards distributed in current program / (Total
-        blocks passed in current program * Current pool balance) * (Total blocks
-        per year)
+        Annualized reward rate, paid in the paired token.
       </code>
     ),
   },

diff --git a/app/src/views/StatsPage/StatsPage.tsx b/app/src/views/StatsPage/StatsPage.tsx
@@ -31,7 +31,7 @@ export default defineComponent({
       {
         name: "Token",
         sortBy: "asset",
-        class: "min-w-[120px] text-left",
+        class: "min-w-[170px] text-left",
         ref: ref<HTMLElement>(),
       },
       {
@@ -51,7 +51,7 @@ export default defineComponent({
       {
         name: "Pool TVL (USD)",
         sortBy: "tvl",
-        class: "min-w-[120px] text-right",
+        class: "min-w-[110px] text-right",
         ref: ref<HTMLElement>(),
       },
       {
@@ -61,15 +61,26 @@ export default defineComponent({
         ref: ref<HTMLElement>(),
       },
       {
-        name: "Pool APR",
-        sortBy: "poolApr",
-        class: "min-w-[100px] text-right",
+        name: "Rowan APR",
+        sortBy: "rowanApr",
+        class: "min-w-[80px] text-right",
         ref: ref<HTMLElement>(),
         message: (
           <code class="text-xs">
-            Pool reward APR = Total rewards distributed in current program /
-            (Total blocks passed in current program * Current pool balance) *
-            (Total blocks per year)
+            Annualized reward rate, paid in Rowan. Pool rowan APR = Total
+            rewards distributed in current program / (Total blocks passed in
+            current program * Current pool balance) * (Total blocks per year)
+          </code>
+        ),
+      },
+      {
+        name: "Paired APR",
+        sortBy: "pairedApr",
+        class: "min-w-[80px] text-right",
+        ref: ref<HTMLElement>(),
+        message: (
+          <code class="text-xs">
+            Annualized reward rate, paid in the paired token.
           </code>
         ),
       },
@@ -261,6 +272,9 @@ export default defineComponent({
                       <td class="text-mono text-right align-middle">
                         {item.poolApr}%
                       </td>
+                      <td class="text-mono text-right align-middle">
+                        {item.pairedApr}%
+                      </td>
                       {/* <td class="text-mono text-right align-middle">
                         {!isNil(item.marginApr)
                           ? `${prettyNumberMinMax(item.marginApr ?? 0)}%`

diff --git a/app/src/views/StatsPage/useStatsPageData.ts b/app/src/views/StatsPage/useStatsPageData.ts
@@ -13,7 +13,8 @@ export type StatsPageState = {
     | "volume"
     | "arbitrage"
     | "poolApr"
-    | "rewardApr"
+    | "rowanApr"
+    | "pairedApr"
     | "marginApr";
   sortDirection: "asc" | "desc";
 };
@@ -44,6 +45,7 @@ export function useStatsPageData(initialState: StatsPageState) {
           volume: pool.volume ?? 0,
           arbitrage: pool.arb == null ? null : pool.arb ?? 0,
           poolApr: pool.poolApr?.toFixed(1),
+          pairedApr: pool.pairedApr?.toFixed(1),
           rewardApr: pool.rewardApr,
           marginApr: pool.margin_apr,
         };