feat: resolved voting power

CHANGELOG.md

@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#880](https://github.com/alleslabs/celatone-frontend/pull/880) Add resolved voting power for proposals
 - [#878](https://github.com/alleslabs/celatone-frontend/pull/878) Support searching proposal id and validator address on the main search
 - [#875](https://github.com/alleslabs/celatone-frontend/pull/875) Add Amplitude tracking to validator details page
 - [#865](https://github.com/alleslabs/celatone-frontend/pull/865) Apply voted proposals filter and search input to table

src/lib/components/ExplorerLink.tsx

@@ -198,7 +198,6 @@ export const ExplorerLink = ({
       display={{ base: "inline-flex", md: "flex" }}
       align="center"
       h={fixedHeight ? "24px" : "auto"}
-      w="full"
       transition="all 0.25s ease-in-out"
       _hover={{
         textDecoration: "underline",

src/lib/components/PageHeader.tsx

@@ -13,8 +13,8 @@ interface PageHeaderProps {
 export const PageHeader = ({ title, subtitle, docHref }: PageHeaderProps) => {
   const isMobile = useMobile();
   return (
-    <Flex w="full" justifyContent="space-between" alignItems="center" mb={8}>
-      <div>
+    <Flex justifyContent="space-between" alignItems="center" mb={8}>
+      <div style={{ width: "100%" }}>
         <Flex justifyContent="space-between">
           <Heading
             as="h5"

src/lib/components/Tooltip.tsx

@@ -18,7 +18,11 @@ export const Tooltip = ({
       {...tooltipProps}
     >
       <span
-        style={{ display: "flex", alignItems: "center" }}
+        style={{
+          display: "inline-flex",
+          alignItems: "center",
+          height: "fit-content",
+        }}
         onMouseEnter={onOpen}
         onMouseLeave={onClose}
         onClickCapture={onToggle}

src/lib/components/button/AdminButton.tsx

@@ -20,7 +20,7 @@ export const AdminButton = ({ contractAddress, admin }: AdminButtonProps) => {
     <Menu>
       <Tooltip
         label="You don't have admin access to this contract."
-        isDisabled={isAdmin}
+        hidden={isAdmin}
       >
         <MenuButton
           variant="outline-gray"

src/lib/components/delegations/radio-card/MultiBondsRadioCard.tsx

@@ -1,5 +1,5 @@
 import { Flex, Heading, Spinner, Text } from "@chakra-ui/react";
-import type { Big } from "big.js";
+import type Big from "big.js";
 
 import { big } from "lib/types";
 import type { Option, TokenWithValue, USD } from "lib/types";

src/lib/components/delegations/total-card/MultiBondsCard.tsx

@@ -1,5 +1,5 @@
 import { Flex, Heading, Text, useDisclosure } from "@chakra-ui/react";
-import type { Big } from "big.js";
+import type Big from "big.js";
 import plur from "plur";
 
 import { CustomIcon } from "lib/components/icon";

src/lib/components/delegations/total-card/OverviewCard.tsx

@@ -1,5 +1,5 @@
 import { Flex, Heading } from "@chakra-ui/react";
-import type { Big } from "big.js";
+import type Big from "big.js";
 
 import { big } from "lib/types";
 import type { Option, TokenWithValue, USD } from "lib/types";

src/lib/components/delegations/total-card/TotalCardModal.tsx

@@ -11,7 +11,7 @@ import {
   ModalOverlay,
   Text,
 } from "@chakra-ui/react";
-import type { Big } from "big.js";
+import type Big from "big.js";
 
 import { CopyLink } from "lib/components/CopyLink";
 import { CustomIcon } from "lib/components/icon";

src/lib/components/delegations/total-card/single-bond-card/SingleBondCardBodyMulti.tsx

@@ -1,6 +1,6 @@
 import { Flex, Heading, Text, useDisclosure } from "@chakra-ui/react";
 import big from "big.js";
-import type { Big } from "big.js";
+import type Big from "big.js";
 
 import { TotalCardModal } from "../TotalCardModal";
 import { CustomIcon } from "lib/components/icon";

src/lib/components/module/FunctionCard.tsx

@@ -49,9 +49,10 @@ export const FunctionCard = ({
     <Tooltip
       bg="primary.dark"
       label="Only functions with “is_entry: true” are able to interacted through Celatone’s module interactions."
-      isDisabled={!disabled}
+      hidden={!disabled}
     >
       <Flex
+        w="full"
         borderRadius={8}
         py={2}
         px={3}

src/lib/components/module/FunctionDetailCard.tsx

@@ -193,9 +193,9 @@ export const FunctionDetailCard = ({
                     </Flex>
 
                     <Tooltip
-                      isDisabled={!disabled}
                       bg="primary.dark"
                       label="Only execute functions with “is_entry: true” and “visibility: public” are interactable through Celatone’s module interactions."
+                      hidden={!disabled}
                     >
                       <Button
                         variant={getButtonStyle().variant}

src/lib/components/table/blocks/BlocksTable.tsx

@@ -0,0 +1,60 @@
+import { useMobile } from "lib/app-provider";
+import { Loading } from "lib/components/Loading";
+import { ErrorFetching } from "lib/components/state";
+import { MobileTableContainer, TableContainer } from "lib/components/table";
+import type { Block, Option } from "lib/types";
+
+import { BlocksTableHeader } from "./BlocksTableHeader";
+import { BlocksTableMobileCard } from "./BlocksTableMobileCard";
+import { BlocksTableRow } from "./BlocksTableRow";
+
+interface BlocksTableProps {
+  blocks: Option<Block[]>;
+  isLoading: boolean;
+  emptyState: JSX.Element;
+  showProposer?: boolean;
+}
+
+export const BlocksTable = ({
+  blocks,
+  isLoading,
+  emptyState,
+  showProposer = true,
+}: BlocksTableProps) => {
+  const isMobile = useMobile();
+
+  if (isLoading) return <Loading />;
+  if (!blocks) return <ErrorFetching dataName="blocks" />;
+  if (!blocks.length) return emptyState;
+
+  const templateColumns = showProposer
+    ? "140px 160px minmax(300px,1fr) 120px 280px"
+    : "150px minmax(160px, 1fr) 180px 280px";
+
+  return isMobile ? (
+    <MobileTableContainer>
+      {blocks.map((block) => (
+        <BlocksTableMobileCard
+          key={block.hash}
+          blockData={block}
+          showProposer={showProposer}
+        />
+      ))}
+    </MobileTableContainer>
+  ) : (
+    <TableContainer>
+      <BlocksTableHeader
+        templateColumns={templateColumns}
+        showProposer={showProposer}
+      />
+      {blocks.map((block) => (
+        <BlocksTableRow
+          key={block.hash}
+          templateColumns={templateColumns}
+          blockData={block}
+          showProposer={showProposer}
+        />
+      ))}
+    </TableContainer>
+  );
+};

src/lib/pages/blocks/components/BlocksTableHeader.tsx → src/lib/components/table/blocks/BlocksTableHeader.tsx

@@ -5,23 +5,20 @@ import { TableHeader } from "lib/components/table";
 
 interface BlocksTableHeaderProps {
   templateColumns: GridProps["templateColumns"];
-  scrollComponentId: string;
-  hideProposer?: boolean;
+  showProposer: boolean;
 }
 
 export const BlocksTableHeader = ({
   templateColumns,
-  scrollComponentId,
-  hideProposer = false,
+  showProposer = true,
 }: BlocksTableHeaderProps) => (
   <Grid
     templateColumns={templateColumns}
-    id={scrollComponentId}
     sx={{ "> div": { color: "text.dark" } }}
   >
     <TableHeader>Block Height</TableHeader>
     <TableHeader>Block Hash</TableHeader>
-    {!hideProposer && <TableHeader>Proposed by</TableHeader>}
+    {showProposer && <TableHeader>Proposed by</TableHeader>}
     <TableHeader textAlign="center">Transactions</TableHeader>
     <TableHeader>Timestamp</TableHeader>
   </Grid>

src/lib/pages/blocks/components/BlocksTableMobileCard.tsx → src/lib/components/table/blocks/BlocksTableMobileCard.tsx

@@ -9,11 +9,11 @@ import { dateFromNow, formatUTC, truncate } from "lib/utils";
 
 interface BlocksTableMobileCardProps {
   blockData: Block;
-  hideProposer?: boolean;
+  showProposer: boolean;
 }
 export const BlocksTableMobileCard = ({
   blockData,
-  hideProposer = false,
+  showProposer,
 }: BlocksTableMobileCardProps) => {
   const navigate = useInternalNavigate();
   return (
@@ -47,7 +47,7 @@ export const BlocksTableMobileCard = ({
         </Flex>
       }
       middleContent={
-        !hideProposer && <ValidatorBadge validator={blockData.proposer} />
+        showProposer && <ValidatorBadge validator={blockData.proposer} />
       }
       bottomContent={
         <Flex align="start" gap={4} w="full">

src/lib/pages/blocks/components/BlocksTableRow.tsx → src/lib/components/table/blocks/BlocksTableRow.tsx

@@ -11,13 +11,13 @@ import { dateFromNow, formatUTC, truncate } from "lib/utils";
 interface BlocksTableRowProps {
   templateColumns: GridProps["templateColumns"];
   blockData: Block;
-  hideProposer?: boolean;
+  showProposer: boolean;
 }
 
 export const BlocksTableRow = ({
   templateColumns,
   blockData,
-  hideProposer = false,
+  showProposer,
 }: BlocksTableRowProps) => {
   const navigate = useInternalNavigate();
 
@@ -46,9 +46,9 @@ export const BlocksTableRow = ({
         </ExplorerLink>
       </TableRow>
       <TableRow>
-        {truncate(blockData.hash.toUpperCase(), hideProposer ? [9, 9] : [6, 6])}
+        {truncate(blockData.hash.toUpperCase(), showProposer ? [6, 6] : [9, 9])}
       </TableRow>
-      {!hideProposer && (
+      {showProposer && (
         <TableRow>
           <ValidatorBadge
             validator={blockData.proposer}

src/lib/components/table/blocks/index.ts

@@ -0,0 +1 @@
+export * from "./BlocksTable";

src/lib/components/table/proposals/ProposalTextCell.tsx

@@ -32,7 +32,7 @@ export const ProposalTextCell = ({
       Number(typeRef.current?.scrollWidth) >
         Number(typeRef.current?.clientWidth));
 
-  if (isMobile) {
+  if (isMobile)
     return (
       <Flex direction="column" gap={1}>
         <MobileLabel label="Proposal Title" />
@@ -68,7 +68,6 @@ export const ProposalTextCell = ({
         )}
       </Flex>
     );
-  }
 
   return (
     <Flex