Add mining tx analysis and claim logic

package.json

@@ -8,6 +8,7 @@
     "@emotion/styled": "^11.11.0",
     "@micro-stacks/react": "^1.0.9",
     "@stacks/stacks-blockchain-api-types": "^7.10.0",
+    "@stacks/transactions": "^6.15.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.4.3",

src/components/tabs/mining-claims.tsx

@@ -1,11 +1,72 @@
-import { Heading, Stack } from "@chakra-ui/react";
-import ComingSoon from "../coming-soon";
+import {
+  Heading,
+  Stack,
+  Stat,
+  StatLabel,
+  StatNumber,
+  Text,
+} from "@chakra-ui/react";
+import {
+  CityNames,
+  miningBlocksToClaimPerCityAtom,
+  miningClaimTransactionsAtom,
+  miningTransactionsAtom,
+} from "../../store/citycoins";
+import { useAtomValue } from "jotai";
 
 function MiningClaims() {
+  const miningTxs = useAtomValue(miningTransactionsAtom);
+  const miningClaimTxs = useAtomValue(miningClaimTransactionsAtom);
+  const { miaBlockHeights, nycBlockHeights } = useAtomValue(
+    miningBlocksToClaimPerCityAtom
+  );
   return (
     <Stack spacing={4}>
       <Heading>CityCoins Mining Claims</Heading>
-      <ComingSoon />
+      <Stack
+        direction={["column", null, "row"]}
+        justifyContent="space-between"
+        spacing={2}
+      >
+        <Stat>
+          <StatLabel>Mining TXs</StatLabel>
+          <StatNumber>{miningTxs.length}</StatNumber>
+        </Stat>
+        <Stat>
+          <StatLabel>Mining Claim TXs</StatLabel>
+          <StatNumber>{miningClaimTxs.length}</StatNumber>
+        </Stat>
+        <Stat>
+          <StatLabel>MIA Blocks to Claim</StatLabel>
+          <StatNumber>{miaBlockHeights.length}</StatNumber>
+        </Stat>
+        <Stat>
+          <StatLabel>NYC Blocks to Claim</StatLabel>
+          <StatNumber>{nycBlockHeights.length}</StatNumber>
+        </Stat>
+      </Stack>
+      <MiningClaimsList city="mia" blockHeights={miaBlockHeights} />
+      <MiningClaimsList city="nyc" blockHeights={nycBlockHeights} />
+    </Stack>
+  );
+}
+
+interface MiningClaimsListProps {
+  city: CityNames;
+  blockHeights: number[];
+}
+
+function MiningClaimsList({ city, blockHeights }: MiningClaimsListProps) {
+  return (
+    <Stack>
+      <Text fontWeight="bold" size="lg">
+        {city.toUpperCase()}
+      </Text>
+      <Stack>
+        {blockHeights.map((blockHeight) => (
+          <Text key={`${city}-${blockHeight}`}>{blockHeight}</Text>
+        ))}
+      </Stack>
     </Stack>
   );
 }

src/components/tabs/voting.tsx

@@ -21,7 +21,7 @@ function Voting() {
     <Stack spacing={4}>
       <Heading>CityCoins Proposals</Heading>
       <Text>View CityCoins proposal and vote details below.</Text>
-      <Accordion allowMultiple allowToggle>
+      <Accordion allowMultiple>
         <AccordionItem>
           <h2>
             <AccordionButton>

src/components/transaction-list.tsx

@@ -145,8 +145,8 @@ function TransactionFunctionArgs({
     <Stack>
       <Text fontWeight="bold">Function Arguments</Text>
       <List spacing={2}>
-        {functionArgs.map((arg) => (
-          <ListItem key={arg.hex}>
+        {functionArgs.map((arg, idx) => (
+          <ListItem key={idx}>
             <Text>Name: {arg.name}</Text>
             <Text>Type: {arg.type}</Text>
             <Text>Repr: {arg.repr}</Text>