Add HOLLAR balance to collectives fellowship finance

packages/next-common/components/assethubMigrationAssets/known/polkadot.js

@@ -1,4 +1,5 @@
 import dynamic from "next/dynamic";
+import HollarSvg from "next-common/assets/icons/assethub/Hollar.svg";
 
 const AssetIconDed = dynamic(() => import("@osn/icons/subsquare/AssetIconDed"));
 const AssetIconDota = dynamic(() =>
@@ -40,6 +41,11 @@ const knownPolkadotAssetHubAssets = [
     assetId: 23,
     icon: AssetIconPink,
   },
+  {
+    symbol: "HOLLAR",
+    assetId: 222,
+    icon: HollarSvg,
+  },
 ];
 
 export default knownPolkadotAssetHubAssets;

packages/next-common/components/overview/fellowship/finance/common.js

@@ -0,0 +1,44 @@
+import { useAssetHubApi } from "next-common/hooks/chain/useAssetHubApi";
+import { SYMBOL_DECIMALS } from "next-common/utils/consts/asset";
+import { useAsync } from "react-use";
+
+export const HOLLAR_FOREIGN_ASSET_KEY = {
+  parents: 1,
+  interior: {
+    X2: [{ Parachain: 2034 }, { GeneralIndex: "222" }],
+  },
+};
+
+export const HOLLAR_DECIMALS = SYMBOL_DECIMALS.HOLLAR;
+
+export function useFetchHollarBalance(address) {
+  const api = useAssetHubApi();
+
+  const { loading, value } = useAsync(async () => {
+    if (!api) {
+      return;
+    }
+
+    const result = await api?.query?.foreignAssets?.account(
+      HOLLAR_FOREIGN_ASSET_KEY,
+      address,
+    );
+
+    return result?.toJSON()?.balance || "0";
+  }, [api, address]);
+
+  return { balance: value || "0", loading };
+}
+
+export function ExternalLink({ href, children }) {
+  return (
+    <a
+      href={href}
+      className="text12Medium text-textTertiary hover:underline"
+      target="_blank"
+      rel="noreferrer"
+    >
+      {children}
+    </a>
+  );
+}

packages/next-common/components/overview/fellowship/finance/salary.jsx

@@ -1,5 +1,4 @@
 import SummaryItem from "next-common/components/summary/layout/item";
-import Link from "next-common/components/link";
 import LoadableContent from "next-common/components/common/loadableContent";
 import FiatPriceLabel from "next-common/components/summary/polkadotTreasurySummary/common/fiatPriceLabel";
 import useQueryFellowshipSalaryBalance, {
@@ -8,36 +7,45 @@ import useQueryFellowshipSalaryBalance, {
 import { toPrecision } from "next-common/utils";
 import { SYMBOL_DECIMALS } from "next-common/utils/consts/asset";
 import TokenSymbolAsset from "next-common/components/summary/polkadotTreasurySummary/common/tokenSymbolAsset";
+import { HOLLAR_DECIMALS, useFetchHollarBalance, ExternalLink } from "./common";
 
 export default function FellowshipSalary() {
-  const { balance, isLoading } = useQueryFellowshipSalaryBalance("USDT");
+  const { balance: usdtBalance, isLoading: usdtLoading } =
+    useQueryFellowshipSalaryBalance("USDT");
+  const { balance: hollarBalance, loading: hollarLoading } =
+    useFetchHollarBalance(StatemintFellowShipSalaryAccount);
 
   const Title = (
-    <>
-      <Link
-        href={`https://assethub-polkadot.statescan.io/#/accounts/${StatemintFellowShipSalaryAccount}`}
-        className="text12Medium text-textTertiary hover:underline"
-        target="_blank"
-        rel="noreferrer"
-      >
-        Salary ↗
-      </Link>
-    </>
+    <ExternalLink
+      href={`https://assethub-polkadot.statescan.io/#/accounts/${StatemintFellowShipSalaryAccount}`}
+    >
+      Salary ↗
+    </ExternalLink>
   );
 
   return (
     <SummaryItem title={Title}>
-      <LoadableContent isLoading={isLoading}>
+      <LoadableContent isLoading={usdtLoading && hollarLoading}>
         <div className="flex flex-col gap-[4px]">
           <div>
-            <FiatPriceLabel usdtBalance={balance} />
+            <FiatPriceLabel
+              usdtBalance={usdtBalance}
+              hollarBalance={hollarBalance}
+            />
           </div>
-          <div className="flex flex-col gap-y-1 !ml-0">
+          <div className="flex flex-col gap-y-1">
             <TokenSymbolAsset
-              amount={toPrecision(balance, SYMBOL_DECIMALS.USDT)}
+              amount={toPrecision(usdtBalance, SYMBOL_DECIMALS.USDT)}
               symbol="USDT"
             />
           </div>
+          <div className="flex flex-col gap-y-1">
+            <TokenSymbolAsset
+              amount={toPrecision(hollarBalance, HOLLAR_DECIMALS)}
+              symbol="HOLLAR"
+              type="foreign"
+            />
+          </div>
         </div>
       </LoadableContent>
     </SummaryItem>

packages/next-common/components/overview/fellowship/finance/treasury.jsx

@@ -1,11 +1,13 @@
 import SummaryItem from "next-common/components/summary/layout/item";
-import Link from "next-common/components/link";
 import LoadableContent from "next-common/components/common/loadableContent";
 import NativeTokenSymbolAsset from "next-common/components/summary/polkadotTreasurySummary/common/nativeTokenSymbolAsset";
 import FiatPriceLabel from "next-common/components/summary/polkadotTreasurySummary/common/fiatPriceLabel";
 import { StatemintFellowShipTreasuryAccount } from "next-common/hooks/treasury/useAssetHubTreasuryBalance";
 import { useAssetHubApi } from "next-common/hooks/chain/useAssetHubApi";
 import useSubStorage from "next-common/hooks/common/useSubStorage";
+import { toPrecision } from "next-common/utils";
+import TokenSymbolAsset from "next-common/components/summary/polkadotTreasurySummary/common/tokenSymbolAsset";
+import { HOLLAR_DECIMALS, useFetchHollarBalance, ExternalLink } from "./common";
 
 function useFetchFellowshipTreasuryBalance() {
   const api = useAssetHubApi();
@@ -22,30 +24,35 @@ function useFetchFellowshipTreasuryBalance() {
 }
 
 export default function FellowshipTreasury() {
-  const { balance, loading } = useFetchFellowshipTreasuryBalance();
+  const { balance: dotBalance, loading: dotLoading } =
+    useFetchFellowshipTreasuryBalance();
+  const { balance: hollarBalance, loading: hollarLoading } =
+    useFetchHollarBalance(StatemintFellowShipTreasuryAccount);
 
   const Title = (
-    <>
-      <Link
-        href={`https://assethub-polkadot.statescan.io/#/accounts/${StatemintFellowShipTreasuryAccount}`}
-        className="text12Medium text-textTertiary hover:underline"
-        target="_blank"
-        rel="noreferrer"
-      >
-        Treasury ↗
-      </Link>
-    </>
+    <ExternalLink
+      href={`https://assethub-polkadot.statescan.io/#/accounts/${StatemintFellowShipTreasuryAccount}`}
+    >
+      Treasury ↗
+    </ExternalLink>
   );
 
   return (
     <SummaryItem title={Title}>
-      <LoadableContent isLoading={loading}>
+      <LoadableContent isLoading={dotLoading || hollarLoading}>
         <div className="flex flex-col gap-[4px]">
           <div>
-            <FiatPriceLabel free={balance} />
+            <FiatPriceLabel free={dotBalance} hollarBalance={hollarBalance} />
           </div>
-          <div className="flex flex-col gap-y-1 !ml-0">
-            <NativeTokenSymbolAsset free={balance} />
+          <div className="flex items-center gap-x-1">
+            <NativeTokenSymbolAsset free={dotBalance} />
+          </div>
+          <div className="flex items-center gap-x-1">
+            <TokenSymbolAsset
+              amount={toPrecision(hollarBalance, HOLLAR_DECIMALS)}
+              symbol="HOLLAR"
+              type="foreign"
+            />
           </div>
         </div>
       </LoadableContent>

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

@@ -10,6 +10,7 @@ export default function FiatPriceLabel({
   free = 0,
   usdcBalance = 0,
   usdtBalance = 0,
+  hollarBalance = 0,
 }) {
   const { price: fiatPrice } = useFiatPriceSnapshot();
   const { decimals } = useChainSettings();
@@ -18,7 +19,8 @@ export default function FiatPriceLabel({
     .dividedBy(Math.pow(10, decimals))
     .multipliedBy(fiatPrice)
     .plus(toPrecision(usdcBalance, SYMBOL_DECIMALS.USDC))
-    .plus(toPrecision(usdtBalance, SYMBOL_DECIMALS.USDT));
+    .plus(toPrecision(usdtBalance, SYMBOL_DECIMALS.USDT))
+    .plus(toPrecision(hollarBalance, SYMBOL_DECIMALS.HOLLAR));
 
   return (
     <div>

packages/next-common/utils/consts/asset.js

@@ -2,6 +2,7 @@ export const SYMBOL_DECIMALS = {
   DOT: 10,
   USDT: 6,
   USDC: 6,
+  HOLLAR: 18,
 };
 
 export const ASSET_DETAIL_LINKS = {