Snapshot proposal breakdown and votes fixes

src/components/Proposals/SnapshotProposalDetails/SnapshotProposalVoteItem.tsx

@@ -1,4 +1,5 @@
-import { GridItem, Text, Flex } from '@chakra-ui/react';
+import { Flex, GridItem, Text } from '@chakra-ui/react';
+import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import useDisplayName from '../../../hooks/utils/useDisplayName';
 import { useFractal } from '../../../providers/App/AppProvider';
@@ -22,6 +23,18 @@ export default function SnapshotProposalVoteItem({ proposal, vote }: ISnapshotPr
   } = useFractal();
 
   const isWeighted = proposal.type === 'weighted';
+  const voteSymbol = useMemo(() => {
+    return proposal.strategies
+      .filter(
+        (strategy, index) => !!strategy.params.symbol && vote.votingWeightByStrategy[index] > 0,
+      )
+      .map(strategy => strategy.params.symbol)
+      .join();
+  }, [proposal.strategies, vote.votingWeightByStrategy]);
+
+  const totalVoteWeightedWeight = useMemo(() => {
+    return vote.votingWeightByStrategy.reduce((prev, curr) => prev + curr, 0);
+  }, [vote.votingWeightByStrategy]);
 
   return (
     <>
@@ -68,12 +81,38 @@ export default function SnapshotProposalVoteItem({ proposal, vote }: ISnapshotPr
         )}
       </GridItem>
       <GridItem>
-        <Text
-          textStyle="body-base"
-          color="neutral-7"
-        >
-          {vote.votingWeight} {proposal.strategies[0].params.symbol}
-        </Text>
+        {isWeighted ? (
+          <Flex
+            gap={1}
+            flexWrap="wrap"
+          >
+            {proposal.strategies.map((strategy, strategyIdx) => {
+              const choiceWeight =
+                (vote.votingWeightByStrategy[strategyIdx] / totalVoteWeightedWeight) *
+                vote.votingWeight;
+              if (!choiceWeight) {
+                return null;
+              }
+              return (
+                <StatusBox key={strategyIdx}>
+                  <Text
+                    textStyle="body-base"
+                    color="neutral-7"
+                  >
+                    {choiceWeight} {strategy.params.symbol}
+                  </Text>
+                </StatusBox>
+              );
+            })}
+          </Flex>
+        ) : (
+          <Text
+            textStyle="body-base"
+            color="neutral-7"
+          >
+            {vote.votingWeight} {voteSymbol}
+          </Text>
+        )}
       </GridItem>
     </>
   );

src/components/Proposals/SnapshotProposalDetails/SnapshotProposalVotes.tsx

@@ -1,6 +1,7 @@
-import { Flex, Grid, GridItem, Text } from '@chakra-ui/react';
+import { Box, Flex, Grid, GridItem, Text } from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
 import { ExtendedSnapshotProposal, FractalProposalState } from '../../../types';
+import StatusBox from '../../ui/badges/StatusBox';
 import ContentBox from '../../ui/containers/ContentBox';
 import { ProposalCountdown } from '../../ui/proposal/ProposalCountdown';
 import Divider from '../../ui/utils/Divider';
@@ -16,7 +17,6 @@ export default function SnapshotProposalVotes({ proposal }: ISnapshotProposalVot
   const { t } = useTranslation('proposal');
   const { totalVotesCasted } = useTotalVotes({ proposal });
   const { votes, votesBreakdown, choices, strategies, privacy, state, type } = proposal;
-  const strategySymbol = strategies[0].params.symbol;
 
   return (
     <>
@@ -41,7 +41,19 @@ export default function SnapshotProposalVotes({ proposal }: ISnapshotProposalVot
               ml={1}
               textStyle="display-lg"
             >
-              {totalVotesCasted} {strategySymbol}
+              {totalVotesCasted}
+              {strategies.map((strategy, index) =>
+                strategy.params.symbol ? (
+                  <Box
+                    mx={1}
+                    key={index}
+                    display="inline-block"
+                    as="span"
+                  >
+                    <StatusBox>{strategy.params.symbol}</StatusBox>
+                  </Box>
+                ) : null,
+              )}
             </Text>
           </Flex>
         </Flex>
@@ -58,7 +70,7 @@ export default function SnapshotProposalVotes({ proposal }: ISnapshotProposalVot
                   ? votesBreakdownChoice?.total
                   : 0;
               const choicePercentageFromTotal =
-                (votesBreakdownChoiceTotal * 100) / totalVotesCasted;
+                totalVotesCasted > 0 ? (votesBreakdownChoiceTotal * 100) / totalVotesCasted : 0;
 
               return (
                 <VotesPercentage