[support] Minor code improvements on the Celo integration

apps/ledger-live-desktop/src/renderer/families/celo/AccountBodyHeader/AccountBodyHeader.tsx

@@ -1,7 +1,7 @@
 import { getAddressExplorer, getDefaultExplorerView } from "@ledgerhq/live-common/explorers";
 import React, { useCallback } from "react";
 import { Trans } from "react-i18next";
-import { useDispatch, useSelector } from "react-redux";
+import { useDispatch } from "react-redux";
 import { urls } from "~/config/urls";
 import { openModal } from "~/renderer/actions/modals";
 import Alert from "~/renderer/components/Alert";
@@ -12,7 +12,6 @@ import TableContainer, { TableHeader } from "~/renderer/components/TableContaine
 import Text from "~/renderer/components/Text";
 import IconChartLine from "~/renderer/icons/ChartLine";
 import { openURL } from "~/renderer/linking";
-import { accountsSelector } from "~/renderer/reducers/accounts";
 import { Header } from "./Header";
 import { Row } from "./Row";
 import {
@@ -28,11 +27,11 @@ type Props = {
   account: CeloAccount;
 };
 const AccountBodyHeaderComponent = ({ account }: Props) => {
-  const { celoResources } = account;
+  const {
+    celoResources: { votes },
+  } = account;
   const dispatch = useDispatch();
-  const accounts = useSelector(accountsSelector) as CeloAccount[]; // FIXME: how to not cast here ?
-  const isRegistrationPending = isAccountRegistrationPending(account?.id, accounts);
-  const { votes } = celoResources;
+  const isRegistrationPending = isAccountRegistrationPending(account);
   const onEarnRewards = useCallback(() => {
     dispatch(
       openModal("MODAL_CELO_REWARDS_INFO", {
@@ -116,7 +115,7 @@ const AccountBodyHeaderComponent = ({ account }: Props) => {
             {votes.map(vote => (
               <Row
                 vote={vote}
-                key={vote.validatorGroup + vote.index}
+                key={`${vote.validatorGroup}${vote.index}`}
                 account={account}
                 onManageAction={onRedirect}
                 onExternalLink={onExternalLink}

apps/ledger-live-desktop/src/renderer/families/celo/AccountBodyHeader/Row.tsx

@@ -112,17 +112,7 @@ export const Row = ({ account, vote, onManageAction, onExternalLink }: Props) =>
         {actions.length > 0 && <ManageDropDown actions={actions} onSelect={onSelect} />}
         {actions.length === 0 && (
           <S.ManageInfoIconWrapper>
-            <Tooltip
-              content={
-                <Trans
-                  i18nKey={"celo.delegation.manageMultipleVoteWarning"}
-                  count={2}
-                  values={{
-                    count: 2,
-                  }}
-                />
-              }
-            >
+            <Tooltip content={<Trans i18nKey={"celo.delegation.manageMultipleVoteWarning"} />}>
               <IconInfoCircle />
             </Tooltip>
           </S.ManageInfoIconWrapper>

apps/ledger-live-desktop/src/renderer/families/celo/AccountHeaderManageActions/AccountHeaderManageActions.tsx

@@ -3,9 +3,8 @@ import { isAccountRegistrationPending } from "@ledgerhq/live-common/families/cel
 import { CeloAccount } from "@ledgerhq/live-common/families/celo/types";
 import React, { useCallback } from "react";
 import { useTranslation } from "react-i18next";
-import { useDispatch, useSelector } from "react-redux";
+import { useDispatch } from "react-redux";
 import { openModal } from "~/renderer/actions/modals";
-import { accountsSelector } from "~/renderer/reducers/accounts";
 import { IconType } from "../../types";
 import { CeloFamily } from "../types";
 import Icon from "./Icon";
@@ -17,8 +16,7 @@ const AccountHeaderManageActions: CeloFamily["accountHeaderManageActions"] = ({
 }) => {
   const { t } = useTranslation();
   const dispatch = useDispatch();
-  const accounts = useSelector(accountsSelector) as CeloAccount[]; // FIXME: Celo Account
-  const isRegistrationPending = isAccountRegistrationPending(account.id, accounts);
+  const isRegistrationPending = isAccountRegistrationPending(account as CeloAccount);
   const onClick = useCallback(() => {
     if (isAccountEmpty(account)) {
       dispatch(

apps/ledger-live-desktop/src/renderer/families/celo/operationDetails.tsx

@@ -43,15 +43,15 @@ const OperationDetailsExtra = ({
         : null;
       return (
         <>
-          {type !== "ACTIVATE" && (
+          {type !== "ACTIVATE" && operation.extra && operation.extra.celoOperationValue && (
             <OpDetailsSection>
               <OpDetailsTitle>
                 <Trans i18nKey={`operation.type.${type}`} />
               </OpDetailsTitle>
               <OpDetailsData>
                 <Box>
                   <FormattedVal
-                    val={operation.extra.celoOperationValue}
+                    val={operation.extra.celoOperationValue.toFixed()}
                     unit={account.unit}
                     showCode
                     fontSize={4}
@@ -87,22 +87,24 @@ const OperationDetailsExtra = ({
     case "UNLOCK":
       return (
         <>
-          <OpDetailsSection>
-            <OpDetailsTitle>
-              <Trans i18nKey={`operation.type.${type}`} />
-            </OpDetailsTitle>
-            <OpDetailsData>
-              <Box>
-                <FormattedVal
-                  val={operation.extra.celoOperationValue}
-                  unit={account.unit}
-                  showCode
-                  fontSize={4}
-                  color="palette.text.shade60"
-                />
-              </Box>
-            </OpDetailsData>
-          </OpDetailsSection>
+          {operation.extra && operation.extra.celoOperationValue && (
+            <OpDetailsSection>
+              <OpDetailsTitle>
+                <Trans i18nKey={`operation.type.${type}`} />
+              </OpDetailsTitle>
+              <OpDetailsData>
+                <Box>
+                  <FormattedVal
+                    val={operation.extra.celoOperationValue.toFixed()}
+                    unit={account.unit}
+                    showCode
+                    fontSize={4}
+                    color="palette.text.shade60"
+                  />
+                </Box>
+              </OpDetailsData>
+            </OpDetailsSection>
+          )}
         </>
       );
     default:

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

@@ -0,0 +1,20 @@
+import { BigNumber } from "bignumber.js";
+
+export function fromOperationExtraRaw(extra: Record<string, any> | null | undefined) {
+  if (extra && extra.celoOperationValue) {
+    return { ...extra, celoOperationValue: new BigNumber(extra.celoOperationValue) };
+  }
+  return extra;
+}
+
+export function toOperationExtraRaw(extra: Record<string, any> | null | undefined) {
+  if (extra && extra.celoOperationValue) {
+    return { ...extra, celoOperationValue: extra.celoOperationValue.toString() };
+  }
+  return extra;
+}
+
+export default {
+  fromOperationExtraRaw,
+  toOperationExtraRaw,
+};

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

@@ -75,14 +75,10 @@ export const fallbackValidatorGroup = (address: string): CeloValidatorGroup => (
   votes: new BigNumber(0),
 });
 
-export const isAccountRegistrationPending = (
-  accountId: string,
-  accounts: CeloAccount[],
-): boolean => {
+export const isAccountRegistrationPending = (account: CeloAccount): boolean => {
   // If there's a pending "REGISTER" operation and the
   // account's registration status is false, then
   // we know that the account is truly not registered yet.
-  const account = accounts.find(currentAccount => accountId === currentAccount.id);
 
   const isAccountRegistrationPending =
     !!account &&

libs/ledger-live-common/src/generated/account.ts

@@ -1,4 +1,5 @@
 import bitcoin from "../families/bitcoin/account";
+import celo from "../families/celo/account";
 import cosmos from "../families/cosmos/account";
 import crypto_org from "../families/crypto_org/account";
 import elrond from "../families/elrond/account";
@@ -11,6 +12,7 @@ import polkadot from "@ledgerhq/coin-polkadot/account";
 
 export default {
   bitcoin,
+  celo,
   cosmos,
   crypto_org,
   elrond,