treasury detail bounties #1404 (#1413)

site/src/pages/Overview/polkadot/treasuryDetail/bounties.jsx

@@ -0,0 +1,63 @@
+import { Link as LinkOrigin } from "react-router-dom";
+import { useBountiesData } from "../../../../hooks/bounties/useBountiesData";
+import TreasuryDetailItem from "./common/item";
+import { useBountiesTotalBalance } from "../../../../hooks/bounties/useBountiesBalances";
+import ValueDisplay from "../../../../components/ValueDisplay";
+import { currentChainSettings } from "../../../../utils/chains";
+import styled from "styled-components";
+import AssetWrapper from "./common/assetWrapper";
+import AssetValueDisplay from "./common/assetValueDisplay";
+import { overviewSelector } from "../../../../store/reducers/overviewSlice";
+import { useSelector } from "react-redux";
+import { toPrecision } from "../../../../utils";
+import BigNumber from "bignumber.js";
+import SkeletonBar from "../../../../components/skeleton/bar";
+
+const Link = styled(LinkOrigin)`
+  color: var(--textSecondary);
+  &:hover {
+    color: var(--textSecondary);
+    text-decoration: underline;
+  }
+`;
+
+// TODO: overview, loading effects
+export default function TreasuryDetailBounties() {
+  const { bounties, bountiesCount } = useBountiesData();
+  const { balance, isLoading } = useBountiesTotalBalance(bounties);
+  const overview = useSelector(overviewSelector);
+  const dotPrice = overview?.latestSymbolPrice ?? 0;
+
+  const total = toPrecision(
+    BigNumber(balance).multipliedBy(dotPrice),
+    currentChainSettings.decimals,
+  );
+
+  return (
+    <TreasuryDetailItem
+      title={
+        <>
+          <Link to="/bounties">Bounties</Link> · {bountiesCount}
+        </>
+      }
+      titleTooltipContent="Funds for bounty programs"
+      iconSrc="/imgs/data-bounties.svg"
+      content={
+        isLoading ? (
+          <SkeletonBar width={64} height={28} />
+        ) : (
+          <ValueDisplay value={total} precision={0} />
+        )
+      }
+      footer={
+        <AssetWrapper>
+          <AssetValueDisplay
+            symbol="dot"
+            value={balance}
+            precision={currentChainSettings.decimals}
+          />
+        </AssetWrapper>
+      }
+    />
+  );
+}

site/src/pages/Overview/polkadot/treasuryDetail/common/item.jsx

@@ -2,7 +2,7 @@ import styled from "styled-components";
 import SummaryItemOrigin from "../../../../../components/Summary/Item";
 import { space_y } from "../../../../../styles/tailwindcss";
 import ImageWithDark from "../../../../../components/ImageWithDark";
-import { h3_18_semibold } from "../../../../../styles/text";
+import { h3_18_semibold, p_12_medium } from "../../../../../styles/text";
 import Tooltip from "../../../../../components/Tooltip";
 
 const Wrapper = styled.div`
@@ -22,6 +22,7 @@ const SummaryItem = styled(SummaryItemOrigin)`
 `;
 
 const TitleWrapper = styled.div`
+  ${p_12_medium}
   display: flex;
   align-items: center;
   gap: 4px;
@@ -45,7 +46,7 @@ export default function TreasuryDetailItem({
             </Tooltip>
           </TitleWrapper>
         }
-        icon={iconSrc && <ImageWithDark src={iconSrc} />}
+        icon={iconSrc && <ImageWithDark src={iconSrc} width={48} height={48} />}
         content={content && <ContentWrapper>{content}</ContentWrapper>}
         footer={footer}
       />

site/src/pages/Overview/polkadot/treasuryDetail/index.jsx

@@ -4,6 +4,7 @@ import styled from "styled-components";
 import Card from "../../../../components/Card";
 import TreasuryDetailHydration from "./hydration";
 import { grid, grid_cols } from "../../../../styles/tailwindcss";
+import TreasuryDetailBounties from "./bounties";
 
 const Wrapper = styled(Card)`
   padding: 24px;
@@ -16,6 +17,7 @@ export default function OverviewTreasuryDetail() {
   return (
     <Wrapper>
       <TreasuryDetailHydration />
+      <TreasuryDetailBounties />
     </Wrapper>
   );
 }