feat: add graceful support for max Celo votes

.changeset/rich-ghosts-live.md

@@ -0,0 +1,6 @@
+---
+"ledger-live-desktop": minor
+"@ledgerhq/live-common": minor
+---
+
+Gracefully handle when user reaches the maximum number of Celo validator groups they can vote for.

apps/ledger-live-desktop/src/renderer/families/celo/ManageModal/ManageModal.jsx

@@ -2,7 +2,7 @@
 
 import React, { useCallback } from "react";
 import { useDispatch } from "react-redux";
-import { Trans } from "react-i18next";
+import { Trans, useTranslation } from "react-i18next";
 import { openModal } from "~/renderer/actions/modals";
 import Box from "~/renderer/components/Box";
 import Modal, { ModalBody } from "~/renderer/components/Modal";
@@ -27,6 +27,7 @@ type Props = {
 };
 
 const ManageModal = ({ name, account, ...rest }: Props) => {
+  const { t } = useTranslation();
   const { celoResources } = account;
 
   invariant(celoResources, "celo account expected");
@@ -45,9 +46,10 @@ const ManageModal = ({ name, account, ...rest }: Props) => {
     },
     [dispatch, account],
   );
-
+  const groupsVotedFor = [...new Set(celoResources.votes.map(v => v.validatorGroup))];
+  const canVoteForNewGroup = celoResources.maxNumGroupsVotedFor.gt(groupsVotedFor.length);
   const unlockingEnabled = celoResources.nonvotingLockedBalance?.gt(0);
-  const votingEnabled = celoResources.nonvotingLockedBalance?.gt(0);
+  const votingEnabled = celoResources.nonvotingLockedBalance?.gt(0) && canVoteForNewGroup;
   const withdrawEnabled = availablePendingWithdrawals(account).length;
   const activatingEnabled = activatableVotes(account).length;
   const revokingEnabled = revokableVotes(account).length;
@@ -100,7 +102,15 @@ const ManageModal = ({ name, account, ...rest }: Props) => {
                       <Trans i18nKey="celo.manage.vote.title" />
                     </S.Title>
                     <S.Description>
-                      <Trans i18nKey="celo.manage.vote.description" />
+                      {canVoteForNewGroup ? (
+                        <Trans i18nKey="celo.manage.vote.description" />
+                      ) : (
+                        <>
+                          {t("celo.manage.vote.descriptionMaxVotes", {
+                            maxVotes: celoResources.maxNumGroupsVotedFor.toString(),
+                          })}
+                        </>
+                      )}
                     </S.Description>
                   </S.InfoWrapper>
                 </S.ManageButton>

apps/ledger-live-desktop/static/i18n/en/app.json

@@ -2180,7 +2180,8 @@
       },
       "vote": {
         "title": "Vote",
-        "description": "Vote for validator groups. Ensure you activate your votes to earn rewards."
+        "description": "Vote for validator groups. Ensure you activate your votes to earn rewards.",
+        "descriptionMaxVotes": "You may vote for up to {{maxVotes}} validator groups. Revoke a vote to vote for a new validator group"
       },
       "activate": {
         "title": "Activate vote",

libs/ledger-live-common/src/families/celo/__snapshots__/bridge.integration.test.ts.snap

@@ -8,6 +8,7 @@ Array [
       "electionAddress": "0x8D6677192144292870907E3Fa8A5527fE55A7ff6",
       "lockedBalance": "200000000000000000",
       "lockedGoldAddress": "0x6cC083Aed9e3ebe302A6336dBC7c921C9f03349E",
+      "maxNumGroupsVotedFor": "10",
       "nonvotingLockedBalance": "100000000000000000",
       "pendingWithdrawals": Array [],
       "registrationStatus": true,
@@ -60,6 +61,7 @@ Array [
       "electionAddress": "0x8D6677192144292870907E3Fa8A5527fE55A7ff6",
       "lockedBalance": "0",
       "lockedGoldAddress": "0x6cC083Aed9e3ebe302A6336dBC7c921C9f03349E",
+      "maxNumGroupsVotedFor": "10",
       "nonvotingLockedBalance": "0",
       "pendingWithdrawals": Array [],
       "registrationStatus": false,

libs/ledger-live-common/src/families/celo/api/hubble.ts

@@ -79,7 +79,7 @@ const transactionToOperation = (
     : false;
   const data = transaction.data;
   const sender = data?.Account || data?.from;
-  const recipient = data?.Group || data?.to;
+  const recipient = data?.Group || data?.to || data?.Raw?.address;
   const fee = new BigNumber(transaction.data?.gas_used || 0).times(
     new BigNumber(transaction.data?.gas_price || 0)
   );

libs/ledger-live-common/src/families/celo/js-synchronisation.ts

@@ -15,6 +15,7 @@ const getAccountShape: GetAccountShape = async (info) => {
   const { address, currency, initialAccount, derivationMode } = info;
   const oldOperations = initialAccount?.operations || [];
   const election = await kit.contracts.getElection();
+  const electionConfig = await election.getConfig();
   const lockedGold = await kit.contracts.getLockedGold();
 
   const accountId = encodeAccountId({
@@ -56,6 +57,7 @@ const getAccountShape: GetAccountShape = async (info) => {
       votes,
       electionAddress: election.address,
       lockedGoldAddress: lockedGold.address,
+      maxNumGroupsVotedFor: electionConfig.maxNumGroupsVotedFor,
     },
   };
   return { ...shape, operations };

libs/ledger-live-common/src/families/celo/serialization.ts

@@ -11,6 +11,7 @@ export function toCeloResourcesRaw(r: CeloResources): CeloResourcesRaw {
     votes,
     electionAddress,
     lockedGoldAddress,
+    maxNumGroupsVotedFor,
   } = r ?? {};
   return {
     registrationStatus,
@@ -31,6 +32,7 @@ export function toCeloResourcesRaw(r: CeloResources): CeloResourcesRaw {
     })),
     electionAddress,
     lockedGoldAddress,
+    maxNumGroupsVotedFor: maxNumGroupsVotedFor?.toString(),
   };
 }
 
@@ -54,5 +56,6 @@ export function fromCeloResourcesRaw(r: CeloResourcesRaw): CeloResources {
     })),
     electionAddress: r.electionAddress,
     lockedGoldAddress: r.lockedGoldAddress,
+    maxNumGroupsVotedFor: new BigNumber(r.maxNumGroupsVotedFor),
   };
 }

libs/ledger-live-common/src/families/celo/types.ts

@@ -39,6 +39,7 @@ export type CeloResources = {
   votes: CeloVote[] | null | undefined;
   electionAddress: string | null | undefined;
   lockedGoldAddress: string | null | undefined;
+  maxNumGroupsVotedFor: BigNumber;
 };
 export type CeloResourcesRaw = {
   registrationStatus: boolean;
@@ -48,6 +49,7 @@ export type CeloResourcesRaw = {
   votes: CeloVoteRaw[] | null | undefined;
   electionAddress: string | null | undefined;
   lockedGoldAddress: string | null | undefined;
+  maxNumGroupsVotedFor: string;
 };
 export type Transaction = TransactionCommon & {
   family: "celo";