feat: fetch and display rewards

src/api/requests/rewards.ts

@@ -1,21 +1,21 @@
-import { Bech32Address } from '../../types/common';
+import { HexString } from '../../types/common';
 import { Reward } from '../../types/reward';
-import { fromBase64 } from '../../utils/base64';
-import { toHexString } from '../../utils/hexString';
+import { fromBase64, toBase64 } from '../../utils/base64';
+import { fromHexString, toHexString } from '../../utils/hexString';
 import getFetchAll from '../getFetchAll';
 import { parseResponse } from '../schemas/error';
 import { RewardsListSchema } from '../schemas/rewards';
 
 export const fetchRewardsChunk = (
   rpc: string,
-  address: Bech32Address,
+  smesher: HexString,
   limit = 100,
   offset = 0
 ) =>
   fetch(`${rpc}/spacemesh.v2alpha1.RewardService/List`, {
     method: 'POST',
     body: JSON.stringify({
-      coinbase: address,
+      smesher: toBase64(fromHexString(smesher)),
       limit,
       offset,
     }),
@@ -36,4 +36,4 @@ export const fetchRewardsChunk = (
       )
     );
 
-export const fetchRewardsByAddress = getFetchAll(fetchRewardsChunk, 100);
+export const fetchRewardsBySmesherId = getFetchAll(fetchRewardsChunk, 100);

src/screens/DashboardScreen.tsx

@@ -32,6 +32,7 @@ import useSmesherConnection from '../store/useSmesherConnection';
 import useSmesherStates from '../store/useSmesherStates';
 import { SECOND } from '../utils/constants';
 import { formatTimestamp } from '../utils/datetime';
+import useRewards from '../store/useRewards';
 
 function OptionalError({
   store,
@@ -58,6 +59,7 @@ function DashboardScreen(): JSX.Element {
   const SmesherStates = useSmesherStates();
   const Eligibilities = useEligibilities();
   const Proposals = useProposals();
+  const Rewards = useRewards();
 
   const nodeStatusStore = getStatusByStore(Node);
   const nodeStatusBulb =
@@ -255,13 +257,18 @@ function DashboardScreen(): JSX.Element {
                             2
                           )}
                         </pre>
-                      </Box>
-                      <Box w="35%">
+                        <Divider />
                         <Heading fontSize="sm">Proposals</Heading>
                         <pre style={{ fontSize: '12px' }}>
                           {JSON.stringify(Proposals?.data?.[id] || {}, null, 2)}
                         </pre>
                       </Box>
+                      <Box w="35%">
+                        <Heading fontSize="sm">Rewards</Heading>
+                        <pre style={{ fontSize: '12px' }}>
+                          {JSON.stringify(Rewards?.data?.[id] || {}, null, 2)}
+                        </pre>
+                      </Box>
                     </Flex>
                   </AccordionPanel>
                 </AccordionItem>

src/store/useRewards.ts

@@ -0,0 +1,47 @@
+import { useCallback, useMemo } from 'react';
+import { singletonHook } from 'react-singleton-hook';
+
+import { fetchRewardsBySmesherId } from '../api/requests/rewards';
+import { HexString } from '../types/common';
+import { Reward } from '../types/reward';
+
+import createDynamicStore, {
+  createViewOnlyDynamicStore,
+  getDynamicStoreDefaults,
+} from './utils/createDynamicStore';
+import useEveryLayerFetcher from './utils/useEveryLayerFetcher';
+import useSmesherStates from './useSmesherStates';
+
+type RewardsState = Record<HexString, Reward[]>;
+const useRewardsStore = createDynamicStore<RewardsState>();
+
+const useRewards = () => {
+  const store = useRewardsStore();
+  const { data } = useSmesherStates();
+  const identities = Object.keys(data || {});
+
+  const fetchRewards = useCallback(
+    (rpc: string) => {
+      if (!identities) return Promise.resolve<RewardsState>({});
+      return Promise.all(
+        identities.map((id) => fetchRewardsBySmesherId(rpc, id))
+      )
+        .then((rewards) => {
+          const result: Record<HexString, Reward[]> = Object.fromEntries(
+            rewards.map((r, i) => [identities[i], r])
+          );
+          store.setData(result);
+          return result;
+        })
+        .catch((err) => {
+          store.setError(err);
+          return {};
+        });
+    },
+    [identities, store]
+  );
+  useEveryLayerFetcher(store, fetchRewards);
+  return useMemo(() => createViewOnlyDynamicStore(store), [store]);
+};
+
+export default singletonHook(getDynamicStoreDefaults(), useRewards);