Add median price to scan UI (#2614)

* Add median price to scan UI [ci]

Fixes #504

Signed-off-by: fayi-da <[email protected]>

* Separate components as requested [ci]

Signed-off-by: fayi-da <[email protected]>

---------

Signed-off-by: fayi-da <[email protected]>

Author: fayi-da

apps/common/frontend/src/components/index.ts

@@ -39,48 +39,48 @@ import {
 
 export {
   ActionView,
-  AmountDisplay,
-  Alerting,
   AlertState,
-  AuthProvider,
+  Alerting,
+  AmountDisplay,
   AnsEntry,
   AnsEntryDisplay,
   AnsEntryProps,
   AnsField,
-  BaseAnsField,
   AnsFieldProps,
-  UserInput,
+  AuthProvider,
+  BaseAnsField,
+  BaseVotesHooks,
   ConfirmationDialog,
   CopyableTypography,
   Copyright,
   DateDisplay,
+  DateWithDurationDisplay,
   DisableConditionally,
+  DsoInfo,
+  DsoViewPrettyJSON,
   ErrorBoundary,
   ErrorDisplay,
   ErrorRouterPage,
   Header,
   IntervalDisplay,
+  ListVoteRequests,
   Loading,
   Login,
   LoginFailed,
   PartyId,
   PrettyJsonDiff,
   RateDisplay,
+  SubscriptionButton,
   TitledTable,
   TransferButton,
-  SubscriptionButton,
-  DateWithDurationDisplay,
-  DsoViewPrettyJSON,
-  DsoInfo,
-  VotesHooksContext,
-  BaseVotesHooks,
-  VotesHooks,
-  useVotesHooks,
-  ListVoteRequests,
-  ViewMoreButton,
+  UpdateId,
+  UserInput,
   ValidatorLicenses,
   ValidatorLicensesPage,
+  ViewMoreButton,
+  VotesHooks,
+  VotesHooksContext,
   computeDiff,
-  UpdateId,
   updateIdFromEventId,
+  useVotesHooks,
 };

apps/common/frontend/src/utils/index.ts

@@ -1,6 +1,21 @@
 // Copyright (c) 2024 Digital Asset (Switzerland) GmbH and/or its affiliates. All rights reserved.
 // SPDX-License-Identifier: Apache-2.0
+
+import BigNumber from 'bignumber.js';
+
 export * from './auth';
 export * from './amuletRules';
 export * from './helpers';
 export * from './voteRequests';
+
+export const medianPriceVotes = (votedPrices: BigNumber[]): BigNumber | undefined => {
+  if (votedPrices && votedPrices.length > 0) {
+    const sorted = [...votedPrices].sort((a, b) => {
+      return a.isEqualTo(b) ? 0 : a.isLessThan(b) ? -1 : 1;
+    });
+    const length = sorted.length;
+    const half = Math.floor(length / 2);
+    return length % 2 !== 0 ? sorted[half] : sorted[half - 1].plus(sorted[half]).multipliedBy(0.5);
+  }
+  return undefined;
+};

apps/scan/frontend/src/components/MedianAmuletPrice.tsx

@@ -0,0 +1,60 @@
+// Copyright (c) 2024 Digital Asset (Switzerland) GmbH and/or its affiliates. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import {
+  AmountDisplay,
+  Loading,
+  medianPriceVotes,
+  useVotesHooks,
+} from '@lfdecentralizedtrust/splice-common-frontend';
+import BigNumber from 'bignumber.js';
+import React, { useMemo } from 'react';
+
+import { Stack } from '@mui/material';
+import Typography from '@mui/material/Typography';
+
+interface MedianAmuletPriceProps {
+  amuletName: string;
+}
+
+export const MedianAmuletPrice: React.FC<MedianAmuletPriceProps> = props => {
+  const { amuletName } = props;
+
+  const voteHooks = useVotesHooks();
+  const amuletPriceVotesQuery = voteHooks.useAmuletPriceVotes();
+
+  const amuletPrices = useMemo(
+    () =>
+      amuletPriceVotesQuery.data
+        ?.map(v => (v.amuletPrice ? new BigNumber(v.amuletPrice) : undefined))
+        .filter((p): p is BigNumber => !!p),
+    [amuletPriceVotesQuery.data]
+  );
+
+  const medianAmuletPrice = useMemo(
+    () => (amuletPrices ? medianPriceVotes(amuletPrices) : undefined),
+    [amuletPrices]
+  );
+
+  if (amuletPriceVotesQuery.isLoading) {
+    return <Loading />;
+  }
+
+  if (amuletPriceVotesQuery.isError) {
+    return <p>Error, something went wrong.</p>;
+  }
+
+  return (
+    <Stack mt={4} spacing={2} direction="column" justifyContent="center">
+      <Typography mt={4} variant="h4">
+        {amuletName} Price for Next Open Mining Round
+      </Typography>
+      <Typography id="median-amulet-price-usd" variant="h2">
+        {medianAmuletPrice && <AmountDisplay amount={medianAmuletPrice} currency="USDUnit" />}
+      </Typography>
+      <Typography variant="caption">
+        Median of {amuletName} prices voted by all Super Validators
+      </Typography>
+    </Stack>
+  );
+};

apps/scan/frontend/src/routes/amuletPriceVotes.tsx

@@ -4,12 +4,17 @@ import { Box, Container } from '@mui/material';
 
 import Layout from '../components/Layout';
 import ListAmuletPriceVotes from '../components/votes/ListAmuletPriceVotes';
+import { MedianAmuletPrice } from '../components/MedianAmuletPrice';
+import { useScanConfig } from '../utils';
 
 const AmuletPriceVotes: React.FC = () => {
+  const config = useScanConfig();
+
   return (
     <Layout>
       <Box bgcolor="colors.neutral.15" sx={{ flex: 1 }}>
         <Container maxWidth="lg" sx={{ marginTop: 2 }}>
+          <MedianAmuletPrice amuletName={config.spliceInstanceNames.amuletName} />
           <ListAmuletPriceVotes />
         </Container>
       </Box>

apps/sv/frontend/src/components/amuletprice/MedianAmuletPrice.tsx

@@ -1,33 +1,27 @@
 // Copyright (c) 2024 Digital Asset (Switzerland) GmbH and/or its affiliates. All rights reserved.
 // SPDX-License-Identifier: Apache-2.0
-import { AmountDisplay, Loading } from '@lfdecentralizedtrust/splice-common-frontend';
+
+import {
+  AmountDisplay,
+  Loading,
+  medianPriceVotes,
+  useVotesHooks,
+} from '@lfdecentralizedtrust/splice-common-frontend';
 import BigNumber from 'bignumber.js';
 import React, { useMemo } from 'react';
 
 import { Stack } from '@mui/material';
 import Typography from '@mui/material/Typography';
 
-import { useAmuletPriceVotes } from '../../hooks/useAmuletPriceVotes';
-import { useSvConfig } from '../../utils';
+interface MedianAmuletPriceProps {
+  amuletName: string;
+}
 
-const MedianAmuletPrice: React.FC = () => {
-  const config = useSvConfig();
-  const amuletPriceVotesQuery = useAmuletPriceVotes();
-  const amuletName = config.spliceInstanceNames.amuletName;
+export const MedianAmuletPrice: React.FC<MedianAmuletPriceProps> = props => {
+  const { amuletName } = props;
 
-  const median = (votedPrices: BigNumber[]) => {
-    if (votedPrices && votedPrices.length > 0) {
-      const sorted = [...votedPrices].sort((a, b) => {
-        return a.isEqualTo(b) ? 0 : a.isLessThan(b) ? -1 : 1;
-      });
-      const length = sorted.length;
-      const half = Math.floor(length / 2);
-      return length % 2 !== 0
-        ? sorted[half]
-        : sorted[half - 1].plus(sorted[half]).multipliedBy(0.5);
-    }
-    return undefined;
-  };
+  const voteHooks = useVotesHooks();
+  const amuletPriceVotesQuery = voteHooks.useAmuletPriceVotes();
 
   const amuletPrices = useMemo(
     () =>
@@ -38,7 +32,7 @@ const MedianAmuletPrice: React.FC = () => {
   );
 
   const medianAmuletPrice = useMemo(
-    () => (amuletPrices ? median(amuletPrices) : undefined),
+    () => (amuletPrices ? medianPriceVotes(amuletPrices) : undefined),
     [amuletPrices]
   );
 
@@ -64,5 +58,3 @@ const MedianAmuletPrice: React.FC = () => {
     </Stack>
   );
 };
-
-export default MedianAmuletPrice;

apps/sv/frontend/src/routes/amuletPrice.tsx

@@ -5,13 +5,16 @@ import * as React from 'react';
 import { Box } from '@mui/material';
 
 import DesiredAmuletPrice from '../components/amuletprice/DesiredAmuletPrice';
-import MedianAmuletPrice from '../components/amuletprice/MedianAmuletPrice';
 import OpenMiningRounds from '../components/amuletprice/OpenMiningRounds';
+import { MedianAmuletPrice } from '../components/amuletprice/MedianAmuletPrice';
+import { useSvConfig } from '../utils';
 
 const AmuletPrice: React.FC = () => {
+  const config = useSvConfig();
+
   return (
     <Box>
-      <MedianAmuletPrice />
+      <MedianAmuletPrice amuletName={config.spliceInstanceNames.amuletName} />
       <DesiredAmuletPrice canEditVote />
       <OpenMiningRounds />
     </Box>