Add Loans to treasury panel, #5002

packages/next-common/components/summary/polkadotTreasurySummary/common/fiatPriceLabel.jsx

@@ -8,16 +8,16 @@ import { SYMBOL_DECIMALS } from "next-common/utils/consts/asset";
 
 export default function FiatPriceLabel({
   free = 0,
-  USDCBalance = 0,
-  USDtBalance = 0,
+  usdcBalance = 0,
+  usdtBalance = 0,
 }) {
   const { price: fiatPrice } = useFiatPrice();
   const { decimals } = useChainSettings();
   const totalPrice = BigNumber(free || 0)
     .dividedBy(Math.pow(10, decimals))
     .multipliedBy(fiatPrice)
-    .plus(toPrecision(USDCBalance, SYMBOL_DECIMALS.USDC))
-    .plus(toPrecision(USDtBalance, SYMBOL_DECIMALS.USDT));
+    .plus(toPrecision(usdcBalance, SYMBOL_DECIMALS.USDC))
+    .plus(toPrecision(usdtBalance, SYMBOL_DECIMALS.USDT));
 
   return (
     <div>

packages/next-common/components/summary/polkadotTreasurySummary/common/summaryLabelLinkItem.jsx

@@ -0,0 +1,18 @@
+import Link from "next/link";
+
+export default function SummaryLabelLinkItem({ label, href, children }) {
+  return (
+    <div className="flex gap-[4px]">
+      <Link
+        className="text12Medium"
+        href={href}
+        target="_blank"
+        rel="noreferrer"
+      >
+        <span className="text-textTertiary hover:underline">{label}</span>
+        <i className="text-textTertiary">&nbsp;↗</i>
+      </Link>
+      <div className="flex">{children}</div>
+    </div>
+  );
+}

packages/next-common/components/summary/polkadotTreasurySummary/context/index.js

@@ -1,12 +1,11 @@
-import { createContext, useContext, useState, useEffect } from "react";
+import { createContext, useContext } from "react";
 import useSubscribeAssetHubAssets from "next-common/hooks/assetHub/useSubscribeAssetHubAssets";
 import { useSubscribeFellowshipTreasuryFree } from "../hook/useSubscribeAssetHubTreasuryFree";
 import {
   StatemintTreasuryAccount,
   getAssetBySymbol,
   StatemintFellowShipTreasuryAccount,
 } from "next-common/hooks/treasury/useAssetHubTreasuryBalance";
-import BigNumber from "bignumber.js";
 import useTreasuryFree from "next-common/utils/hooks/useTreasuryFree";
 import { useContextApi } from "next-common/context/api";
 import useSubscribeFellowshipSalaryBalance from "../hook/useSubscribeFellowshipSalaryBalance";
@@ -19,51 +18,55 @@ function useTreasuryAccountAssetBalance(symbol) {
 }
 
 export function PolkadotTreasurySummaryProvider({ children }) {
-  const [DOTBalance, setDOTBalance] = useState(0);
-
-  const [isTotalAssetsLoading, setIsTotalAssetsLoading] = useState(true);
-
   const api = useContextApi();
-  const relayChainFree = useTreasuryFree(api);
+  const {
+    free: dotTreasuryBalanceOnRelayChain,
+    isLoading: isDotTreasuryBalanceOnRelayChainLoading,
+  } = useTreasuryFree(api);
 
-  const { free: fellowshipFree, isLoading: isFellowshipLoading } =
-    useSubscribeFellowshipTreasuryFree(StatemintFellowShipTreasuryAccount);
+  const {
+    free: fellowshipTreasuryDotBalance,
+    isLoading: isFellowshipTreasuryDotBalanceLoading,
+  } = useSubscribeFellowshipTreasuryFree(StatemintFellowShipTreasuryAccount);
 
   const {
     balance: fellowshipSalaryUsdtBalance,
     isLoading: isFellowshipSalaryUsdtBalanceLoading,
   } = useSubscribeFellowshipSalaryBalance("USDt");
 
-  const { free: multiAssetsFree, isLoading: isMultiAssetsLoading } =
-    useSubscribeFellowshipTreasuryFree(StatemintTreasuryAccount);
+  const {
+    free: dotTreasuryBalanceOnAssetHub,
+    isLoading: isDotTreasuryBalanceOnAssetHubLoading,
+  } = useSubscribeFellowshipTreasuryFree(StatemintTreasuryAccount);
 
-  const { balance: USDtBalance } = useTreasuryAccountAssetBalance("USDt");
-  const { balance: USDCBalance } = useTreasuryAccountAssetBalance("USDC");
+  const {
+    balance: usdtTreasuryBalanceOnAssetHub,
+    isLoading: isUsdtTreasuryBalanceOnAssetHubLoading,
+  } = useTreasuryAccountAssetBalance("USDt");
 
-  useEffect(() => {
-    if (relayChainFree && multiAssetsFree && fellowshipFree) {
-      const totalDOTBalance = BigNumber(relayChainFree)
-        .plus(multiAssetsFree)
-        .plus(fellowshipFree);
-      setDOTBalance(totalDOTBalance);
-      setIsTotalAssetsLoading(false);
-    }
-  }, [relayChainFree, multiAssetsFree, fellowshipFree]);
+  const {
+    balance: usdcTreasuryBalanceOnAssetHub,
+    isLoading: isUsdcTreasuryBalanceOnAssetHubLoading,
+  } = useTreasuryAccountAssetBalance("USDC");
 
   return (
     <PolkadotTreasurySummaryContext.Provider
       value={{
-        relayChainFree,
-        multiAssetsFree,
-        fellowshipFree,
+        dotTreasuryBalanceOnRelayChain,
+        isDotTreasuryBalanceOnRelayChainLoading,
+        dotTreasuryBalanceOnAssetHub,
+        isDotTreasuryBalanceOnAssetHubLoading,
+        fellowshipTreasuryDotBalance,
+        isFellowshipTreasuryDotBalanceLoading,
         fellowshipSalaryUsdtBalance,
-        USDtBalance,
-        USDCBalance,
-        DOTBalance,
-        isFellowshipLoading,
         isFellowshipSalaryUsdtBalanceLoading,
-        isMultiAssetsLoading,
-        isTotalAssetsLoading,
+        usdtTreasuryBalanceOnAssetHub,
+        isUsdtTreasuryBalanceOnAssetHubLoading,
+        usdcTreasuryBalanceOnAssetHub,
+        isUsdcTreasuryBalanceOnAssetHubLoading,
+        loanCentrifugeUsdcBalance: 3000000000000,
+        loanBifrostDotBalance: 5000000000000000,
+        loadPendulumDotBalance: 500000000000000,
       }}
     >
       {children}

packages/next-common/components/summary/polkadotTreasurySummary/fellowshipTreasuryOnAssetHub/index.js

@@ -0,0 +1,80 @@
+import LoadableContent from "next-common/components/common/loadableContent";
+import SummaryLabelLinkItem from "../common/summaryLabelLinkItem";
+import { usePolkadotTreasurySummary } from "../context";
+import FiatPriceLabel from "../common/fiatPriceLabel";
+import SummaryItem from "next-common/components/summary/layout/item";
+import { StatemintFellowShipTreasuryAccount } from "next-common/hooks/treasury/useAssetHubTreasuryBalance";
+import { toPrecision } from "next-common/utils";
+import { SYMBOL_DECIMALS } from "next-common/utils/consts/asset";
+import { StatemintFellowShipSalaryAccount } from "../hook/useSubscribeFellowshipSalaryBalance";
+import { useChainSettings } from "next-common/context/chain";
+import ValueDisplay from "next-common/components/valueDisplay";
+
+function FellowshipTreasuryItemList({
+  fellowshipTreasuryDotBalance,
+  fellowshipSalaryUsdtBalance,
+}) {
+  const { decimals, symbol } = useChainSettings();
+  const fellowshipFreeBalance = toPrecision(
+    fellowshipTreasuryDotBalance || 0,
+    decimals,
+  );
+
+  return (
+    <div className="flex flex-col gap-[4px]">
+      <SummaryLabelLinkItem
+        label="Treasury"
+        href={`https://assethub-polkadot.subscan.io/account/${StatemintFellowShipTreasuryAccount}`}
+      >
+        <ValueDisplay
+          value={fellowshipFreeBalance}
+          symbol={symbol}
+          className={"text12Medium text-textPrimary"}
+          tooltipClassName={"inline-flex items-center"}
+        />
+      </SummaryLabelLinkItem>
+      <SummaryLabelLinkItem
+        label="Salary"
+        href={`https://assethub-polkadot.subscan.io/account/${StatemintFellowShipSalaryAccount}`}
+      >
+        <ValueDisplay
+          value={toPrecision(fellowshipSalaryUsdtBalance, SYMBOL_DECIMALS.USDT)}
+          symbol="USDt"
+          className={"text12Medium text-textPrimary"}
+          tooltipClassName={"inline-flex items-center"}
+        />
+      </SummaryLabelLinkItem>
+    </div>
+  );
+}
+
+export default function FellowshipTreasuryOnAssetHub() {
+  const {
+    fellowshipTreasuryDotBalance,
+    isFellowshipTreasuryDotBalanceLoading,
+    fellowshipSalaryUsdtBalance,
+    isFellowshipSalaryUsdtBalanceLoading,
+  } = usePolkadotTreasurySummary();
+
+  return (
+    <SummaryItem title="Fellowship">
+      <LoadableContent
+        isLoading={
+          isFellowshipTreasuryDotBalanceLoading ||
+          isFellowshipSalaryUsdtBalanceLoading
+        }
+      >
+        <div className="flex flex-col gap-[4px]">
+          <FiatPriceLabel
+            free={fellowshipTreasuryDotBalance}
+            usdtBalance={fellowshipSalaryUsdtBalance}
+          />
+          <FellowshipTreasuryItemList
+            fellowshipTreasuryDotBalance={fellowshipTreasuryDotBalance}
+            fellowshipSalaryUsdtBalance={fellowshipSalaryUsdtBalance}
+          />
+        </div>
+      </LoadableContent>
+    </SummaryItem>
+  );
+}

packages/next-common/components/summary/polkadotTreasurySummary/index.jsx

@@ -6,6 +6,8 @@ import TreasuryOnHydration from "./treasuryOnHydration";
 import { cn } from "next-common/utils";
 import { PolkadotTreasurySummaryProvider } from "./context";
 import { TreasuryOnHydrationProvider } from "./context/treasuryOnHydration";
+import FellowshipTreasuryOnAssetHub from "./fellowshipTreasuryOnAssetHub";
+import Loans from "./loans";
 
 function PolkadotTreasurySummaryInContext() {
   return (
@@ -14,6 +16,8 @@ function PolkadotTreasurySummaryInContext() {
       <RelayChainTreasury />
       <TreasuryOnAssetHub />
       <TreasuryOnHydration />
+      <FellowshipTreasuryOnAssetHub />
+      <Loans />
     </SummaryLayout>
   );
 }

packages/next-common/components/summary/polkadotTreasurySummary/loans/index.js

@@ -0,0 +1,81 @@
+import SummaryLabelLinkItem from "../common/summaryLabelLinkItem";
+import FiatPriceLabel from "../common/fiatPriceLabel";
+import SummaryItem from "next-common/components/summary/layout/item";
+import { toPrecision } from "next-common/utils";
+import { SYMBOL_DECIMALS } from "next-common/utils/consts/asset";
+import { useChainSettings } from "next-common/context/chain";
+import ValueDisplay from "next-common/components/valueDisplay";
+import BigNumber from "bignumber.js";
+import { usePolkadotTreasurySummary } from "../context";
+
+function LoansItemList() {
+  const {
+    loanCentrifugeUsdcBalance,
+    loanBifrostDotBalance,
+    loadPendulumDotBalance,
+  } = usePolkadotTreasurySummary();
+
+  const { decimals, symbol } = useChainSettings();
+  const bifrostDotAmount = toPrecision(loanBifrostDotBalance || 0, decimals);
+  const pendulumDotAmount = toPrecision(loadPendulumDotBalance || 0, decimals);
+
+  return (
+    <div className="flex flex-col gap-[4px]">
+      <SummaryLabelLinkItem
+        label="Centrifuge"
+        href={"https://polkadot.subsquare.io/referenda/1122"}
+      >
+        <ValueDisplay
+          value={toPrecision(loanCentrifugeUsdcBalance, SYMBOL_DECIMALS.USDC)}
+          symbol="USDC"
+          className={"text12Medium text-textPrimary"}
+          tooltipClassName={"inline-flex items-center"}
+        />
+      </SummaryLabelLinkItem>
+      <SummaryLabelLinkItem
+        label="Bifrost"
+        href="https://polkadot.subsquare.io/referenda/432"
+      >
+        <ValueDisplay
+          value={bifrostDotAmount}
+          symbol={symbol}
+          className={"text12Medium text-textPrimary"}
+          tooltipClassName={"inline-flex items-center"}
+        />
+      </SummaryLabelLinkItem>
+      <SummaryLabelLinkItem
+        label="Pendulum"
+        href="https://polkadot.subsquare.io/referenda/748"
+      >
+        <ValueDisplay
+          value={pendulumDotAmount}
+          symbol={symbol}
+          className={"text12Medium text-textPrimary"}
+          tooltipClassName={"inline-flex items-center"}
+        />
+      </SummaryLabelLinkItem>
+    </div>
+  );
+}
+
+export default function Loans() {
+  const {
+    loanCentrifugeUsdcBalance,
+    loanBifrostDotBalance,
+    loadPendulumDotBalance,
+  } = usePolkadotTreasurySummary();
+
+  return (
+    <SummaryItem title="Loans">
+      <div className="flex flex-col gap-[4px]">
+        <FiatPriceLabel
+          free={new BigNumber(loanBifrostDotBalance)
+            .plus(loadPendulumDotBalance)
+            .toString()}
+          usdtBalance={loanCentrifugeUsdcBalance}
+        />
+        <LoansItemList />
+      </div>
+    </SummaryItem>
+  );
+}

packages/next-common/components/summary/polkadotTreasurySummary/relayChainTreasury/index.jsx

@@ -1,6 +1,6 @@
 import LoadableContent from "next-common/components/common/loadableContent";
 import SummaryItem from "next-common/components/summary/layout/item";
-import SummaryLabelItem from "./summaryLabelItem";
+import SummaryLabelItem from "../common/summaryLabelItem";
 import SpendPeriodCountdown from "./spendPeriodCountdown";
 import ToBeAwarded from "./toBeAwarded";
 import useSpendPeriodSummary from "next-common/components/summary/treasurySummary/useSpendPeriodSummary";
@@ -13,7 +13,10 @@ import DotTokenSymbolAsset from "../common/dotTokenSymbolAsset";
 import { usePolkadotTreasurySummary } from "../context";
 
 export default function RelayChainTreasury() {
-  const { relayChainFree } = usePolkadotTreasurySummary();
+  const {
+    dotTreasuryBalanceOnRelayChain,
+    isDotTreasuryBalanceOnRelayChainLoading,
+  } = usePolkadotTreasurySummary();
 
   const summary = useSpendPeriodSummary();
   const toBeAwarded = useToBeAwarded();
@@ -22,20 +25,22 @@ export default function RelayChainTreasury() {
     <SummaryItem title="Relay Chain">
       <LoadableContent
         isLoading={
-          isNil(relayChainFree) || isNil(toBeAwarded) || isNil(summary)
+          isDotTreasuryBalanceOnRelayChainLoading ||
+          isNil(toBeAwarded) ||
+          isNil(summary)
         }
       >
         <div className="flex flex-col gap-[4px]">
-          <FiatPriceLabel free={relayChainFree} />
+          <FiatPriceLabel free={dotTreasuryBalanceOnRelayChain} />
           <div className="!ml-0 flex flex-col gap-y-1">
-            <div className="mb-3">
-              <DotTokenSymbolAsset free={relayChainFree} />
+            <div>
+              <DotTokenSymbolAsset free={dotTreasuryBalanceOnRelayChain} />
             </div>
             <SummaryLabelItem label={"To be awarded"}>
               <ToBeAwarded toBeAwarded={toBeAwarded} />
             </SummaryLabelItem>
             <SummaryLabelItem label={"Next burn"}>
-              <NextBurn free={relayChainFree} />
+              <NextBurn free={dotTreasuryBalanceOnRelayChain} />
             </SummaryLabelItem>
             <SummaryLabelItem label={"Spend period"}>
               <SpendPeriod summary={summary} />