(govern) chore: review fixes

.env.example

@@ -42,8 +42,4 @@ NEXT_PUBLIC_POLYGON_BALANCER_URL=__URL__
 NEXT_PUBLIC_ARBITRUM_BALANCER_URL=__URL__
 
 # govern
-NEXT_PUBLIC_MAINNET_TEST_RPC=__URL__
-NEXT_PUBLIC_GNOSIS_TEST_RPC=__URL__
-NEXT_PUBLIC_POLYGON_TEST_RPC=__URL__
-NEXT_PUBLIC_IS_CONNECTED_TO_TEST_NET=__TRUE_OR_FALSE__
 NEXT_PUBLIC_GOVERNOR_SUBGRAPH_URL=__URL__

apps/govern/common-util/graphql/queries.ts

@@ -2,7 +2,7 @@ import { gql, request } from 'graphql-request';
 
 import { Proposals } from './types';
 
-const GOVERNOR_SUBGRAPH_URL = process.env.NEXT_PUBLIC_GOVERNOR_SUBGRAPH_URL || '';
+const GOVERNOR_SUBGRAPH_URL = process.env.NEXT_PUBLIC_GOVERNOR_SUBGRAPH_URL;
 
 const getProposalsQuery = gql`
   query GetProposalCreateds {
@@ -33,4 +33,4 @@ const getProposalsQuery = gql`
 `;
 
 export const getProposals = async () =>
-  request<Proposals>(GOVERNOR_SUBGRAPH_URL, getProposalsQuery);
+  request<Proposals>(GOVERNOR_SUBGRAPH_URL as string, getProposalsQuery);

apps/govern/components/Proposals/ProposalDetails.tsx

@@ -4,17 +4,14 @@ import { mainnet } from 'viem/chains';
 import { useAccount, useBlock } from 'wagmi';
 
 import { Caption } from 'libs/ui-components/src';
-import { EXPLORER_URLS, UNICODE_SYMBOLS } from 'libs/util-constants/src';
 import { areAddressesEqual } from 'libs/util-functions/src';
+import { AddressLink } from 'libs/ui-components/src';
 
-import {
-  estimateFutureBlockTimestamp,
-  getFullFormattedDate,
-  truncateAddress,
-} from 'common-util/functions';
+import { estimateFutureBlockTimestamp, getFullFormattedDate } from 'common-util/functions';
 import { Proposal } from 'common-util/graphql/types';
 
-import { VOTES_SUPPORT, getFormattedValue } from './utils';
+import { VOTES_SUPPORT, formatWeiToEth } from './utils';
+import { NA } from 'libs/util-constants/src';
 
 const { Paragraph, Text } = Typography;
 
@@ -40,23 +37,12 @@ const useBlockTimestamp = (currentBlock: Block | undefined, block: bigint) => {
   };
 };
 
-const AddressLink = ({ address, className }: { address: string; className?: string }) => (
-  <a
-    href={`${EXPLORER_URLS[mainnet.id]}/address/${address}`}
-    target="_blank"
-    rel="noreferrer"
-    className={className}
-  >
-    {`${truncateAddress(address)} ${UNICODE_SYMBOLS.EXTERNAL_LINK}`}
-  </a>
-);
-
 export const ProposalDetails = ({
   item,
   currentBlock,
 }: {
   item: Proposal;
-  currentBlock: Block | undefined;
+  currentBlock?: Block | undefined;
 }) => {
   const { address } = useAccount();
 
@@ -68,14 +54,15 @@ export const ProposalDetails = ({
       <Caption>Proposal description</Caption>
       <Paragraph className="mb-16">{item.description}</Paragraph>
       <Caption>Owner</Caption>
-      <AddressLink address={item.proposer} className="mb-16" />
+      <AddressLink address={item.proposer} chainId={mainnet.id} className="mb-16" />
       <Flex gap={24} className="mb-16">
         <Flex vertical>
           <Caption>Start Date</Caption>
           {startDateBlock.isLoading && <Skeleton.Input active />}
           {startDateBlock.timestamp !== null && (
             <Text>{getFullFormattedDate(Number(startDateBlock.timestamp) * 1000)}</Text>
           )}
+          {!startDateBlock.isLoading && startDateBlock.timestamp === null && NA}
         </Flex>
         <Flex vertical>
           <Caption>End Date</Caption>
@@ -90,10 +77,10 @@ export const ProposalDetails = ({
         {item.voteCasts.map((vote, index) => (
           <Row key={vote.id} gutter={[0, 8]}>
             <Col span={5}>
-              <AddressLink address={vote.voter} />
+              <AddressLink address={vote.voter} chainId={mainnet.id} />
               {address && areAddressesEqual(vote.voter, address) && ' (you)'}
             </Col>
-            <Col span={2}>{getFormattedValue(vote.weight)}</Col>
+            <Col span={2}>{formatWeiToEth(vote.weight)}</Col>
             <Col>({VOTES_SUPPORT[vote.support]})</Col>
           </Row>
         ))}

apps/govern/components/Proposals/ProposalsList.tsx

@@ -18,11 +18,12 @@ import { ProposalDetails } from './ProposalDetails';
 import {
   VOTES_SORTED,
   VOTES_SUPPORT,
-  getFormattedValue,
+  formatWeiToEth,
   getUserVote,
   hasNotStarted,
   isOngoing,
 } from './utils';
+import { COLOR } from 'libs/ui-theme/src';
 
 const { Text } = Typography;
 
@@ -75,23 +76,23 @@ const getColumns = (
     dataIndex: 'votesFor',
     key: 'votesFor',
     width: 105,
-    render: (votesFor) => <Text>{getFormattedValue(votesFor)}</Text>,
+    render: (votesFor) => <Text>{formatWeiToEth(votesFor)}</Text>,
   },
   {
     title: 'Votes against',
     dataIndex: 'votesAgainst',
     key: 'votesAgainst',
     width: 140,
-    render: (votesAgainst) => <Text>{getFormattedValue(votesAgainst)}</Text>,
+    render: (votesAgainst) => <Text>{formatWeiToEth(votesAgainst)}</Text>,
   },
   {
     title: 'Quorum',
     key: 'quorum',
     width: 120,
     render: (_, record) => (
       <Text>
-        {getFormattedValue(record.votesFor)} / {hasNotStarted(record, block) && '~'}
-        {getFormattedValue(record.quorum)}
+        {formatWeiToEth(record.votesFor)} / {hasNotStarted(record, block) && '~'}
+        {formatWeiToEth(record.quorum)}
       </Text>
     ),
   },
@@ -196,7 +197,7 @@ export const ProposalsList = () => {
           const Icon = expanded ? DownOutlined : RightOutlined;
           return (
             <Icon
-              style={{ fontSize: '14px', color: '#606F85' }}
+              style={{ fontSize: '14px', color: COLOR.TEXT_SECONDARY }}
               onClick={(e) => onExpand(record, e)}
             />
           );

apps/govern/components/Proposals/utils.ts

@@ -24,7 +24,7 @@ export const VOTES_SORTED: VoteSupport[] = [
   VoteSupport.Abstain,
 ];
 
-export const getFormattedValue = (value: string) =>
+export const formatWeiToEth = (value: string) =>
   formatWeiNumber({
     value: ethers.formatUnits(value, 18),
     maximumFractionDigits: 3,

apps/govern/hooks/useProposals.ts

@@ -17,7 +17,7 @@ export const useProposals = () => {
   const { proposalVotes } = useAppSelector((state) => state.govern);
 
   const { data: proposals, isLoading: isProposalsLoading } = useQuery({
-    enabled: block !== undefined,
+    enabled: !!block,
     queryKey: ['getProposals'],
     queryFn: async () => {
       const proposals = await getProposals();
@@ -73,20 +73,17 @@ export const useProposals = () => {
   const data = useMemo(() => {
     if (!proposals) return [];
     if (Object.values(proposalVotes).length === 0) return proposals;
-    return proposals.map((proposal) => ({
-      ...proposal,
-      voteCasts: [
-        // insert fresh vote on top of the votes from subgraph
-        // if not there already
-        ...(proposalVotes[proposal.proposalId] &&
-        proposal.voteCasts.some((vote) =>
-          areAddressesEqual(vote.voter, proposalVotes[proposal.proposalId].voter),
-        )
-          ? []
-          : [proposalVotes[proposal.proposalId]]),
-        ...proposal.voteCasts,
-      ],
-    }));
+    return proposals.map((proposal) => {
+      const freshVote = proposalVotes[proposal.proposalId];
+      const hasFreshVote = proposal.voteCasts.some((vote) =>
+        areAddressesEqual(vote.voter, freshVote?.voter),
+      );
+
+      return {
+        ...proposal,
+        voteCasts: [...(hasFreshVote ? [] : [freshVote]), ...proposal.voteCasts],
+      };
+    });
   }, [proposals, proposalVotes]);
 
   return { data, block, isLoading: isBlockLoading || isProposalsLoading };

libs/ui-components/src/index.ts

@@ -1,3 +1,4 @@
 export * from './lib/Footer';
 export * from './lib/Caption';
 export * from './lib/TextWithTooltip';
+export * from './lib/AddressLink';

libs/ui-components/src/lib/AddressLink.tsx

@@ -0,0 +1,21 @@
+import { EXPLORER_URLS, UNICODE_SYMBOLS } from 'libs/util-constants/src';
+import { truncateAddress } from 'libs/util-functions/src';
+
+export const AddressLink = ({
+  address,
+  chainId,
+  className,
+}: {
+  address: string;
+  chainId: number;
+  className?: string;
+}) => (
+  <a
+    href={`${EXPLORER_URLS[chainId]}/address/${address}`}
+    target="_blank"
+    rel="noreferrer"
+    className={className}
+  >
+    {`${truncateAddress(address)} ${UNICODE_SYMBOLS.EXTERNAL_LINK}`}
+  </a>
+);