Fixes linting and typecheck issues in Ledger Live Mobile

apps/ledger-live-mobile/src/families/mimblewimble_coin/AddAccountsAccounts.tsx

@@ -2,18 +2,18 @@ import React, { useEffect, useCallback, useState, useRef, memo, useMemo } from "
 import { StyleSheet, View, Linking, SafeAreaView } from "react-native";
 import { concat, from, Subscription } from "rxjs";
 import { ignoreElements } from "rxjs/operators";
-import { connect } from "react-redux";
+import { connect, useDispatch } from "react-redux";
 import { compose } from "redux";
 import { isAccountEmpty } from "@ledgerhq/live-common/account/index";
 import type { AddAccountSupportLink } from "@ledgerhq/live-wallet/addAccounts";
 import { addAccountsAction } from "@ledgerhq/live-wallet/addAccounts";
 import { createStructuredSelector } from "reselect";
 import uniq from "lodash/uniq";
 import { Trans, useTranslation } from "react-i18next";
+import type { Account, DerivationMode } from "@ledgerhq/types-live";
 import type { CryptoCurrency } from "@ledgerhq/types-cryptoassets";
 import { getCurrencyBridge } from "@ledgerhq/live-common/bridge/index";
 import { isTokenCurrency } from "@ledgerhq/live-common/currencies/index";
-import type { Account, DerivationMode } from "@ledgerhq/types-live";
 import { useTheme } from "@react-navigation/native";
 import { accountsSelector } from "~/reducers/accounts";
 import logger from "../../logger";
@@ -50,6 +50,7 @@ import { BaseNavigatorStackParamList } from "~/components/RootNavigator/types/Ba
 import Config from "react-native-config";
 import { groupAddAccounts } from "@ledgerhq/live-wallet/addAccounts";
 import { useMaybeAccountName } from "~/reducers/wallet";
+import { setAccountName } from "@ledgerhq/live-wallet/store";
 import { Flex } from "@ledgerhq/native-ui";
 import styled from "styled-components/native";
 import type { Device } from "@ledgerhq/live-common/hw/actions/types";
@@ -344,6 +345,7 @@ function AddAccountsAccounts(props: Props) {
     scannedAccounts,
     selectedIds,
   ]);
+
   const onCancel = useCallback(() => {
     setError(null);
     setCancelled(true);
@@ -354,15 +356,14 @@ function AddAccountsAccounts(props: Props) {
     }
   }, [cancelled, navigation]);
   const viewAllCreatedAccounts = useCallback(() => setShowAllCreatedAccounts(true), []);
+
+  const dispatch = useDispatch();
+
   const onAccountNameChange = useCallback(
     (name: string, changedAccount: Account) => {
-      setScannedAccounts(
-        scannedAccounts.map(account =>
-          account.id === changedAccount.id ? { ...account, name } : account,
-        ),
-      );
+      dispatch(setAccountName(changedAccount.id, name));
     },
-    [scannedAccounts],
+    [dispatch],
   );
   const { sections, alreadyEmptyAccount } = useMemo(
     () =>

apps/ledger-live-mobile/src/families/mimblewimble_coin/ReceiveFundsAddAccount.tsx

@@ -3,7 +3,7 @@ import { FlatList } from "react-native";
 import { concat, from } from "rxjs";
 import type { Subscription } from "rxjs";
 import { ignoreElements } from "rxjs/operators";
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { useTranslation } from "react-i18next";
 import type { Account, TokenAccount } from "@ledgerhq/types-live";
 import { Currency } from "@ledgerhq/types-cryptoassets";
@@ -29,9 +29,13 @@ import {
 } from "~/components/RootNavigator/types/helpers";
 import { RootStackParamList } from "~/components/RootNavigator/types/RootNavigator";
 import Animation from "~/components/Animation";
-import lottie from "../../screens/ReceiveFunds/assets/lottie.json";
+import lottie from "~/screens/ReceiveFunds/assets/lottie.json";
 import GradientContainer from "~/components/GradientContainer";
 import { useTheme } from "styled-components/native";
+import { walletSelector } from "~/reducers/wallet";
+import { accountNameWithDefaultSelector } from "@ledgerhq/live-wallet/store";
+import { addAccountsAction } from "@ledgerhq/live-wallet/addAccounts";
+import { accountsSelector } from "~/reducers/accounts";
 import styled from "styled-components/native";
 import type { Device } from "@ledgerhq/live-common/hw/actions/types";
 import { getDeviceAnimation } from "../../helpers/getDeviceAnimation";
@@ -40,7 +44,6 @@ import { TitleText } from "../../components/DeviceAction/rendering";
 import { DeviceModelId } from "@ledgerhq/types-devices";
 import { useTheme as useThemeNavigation } from "@react-navigation/native";
 import QueuedDrawer from "~/components/QueuedDrawer";
-import { addAccountsAction } from "@ledgerhq/live-wallet/addAccounts";
 
 const DeviceActionContainer = styled(Flex).attrs({
   flexDirection: "row",
@@ -110,6 +113,7 @@ function AddAccountsAccounts(props: Props) {
   const [rootPublicKeyRequested, setRootPublicKeyRequested] = useState(false);
   const [accountIndex, setAccountIndex] = useState(0);
 
+  const existingAccounts = useSelector(accountsSelector);
   const scanSubscription = useRef<Subscription | null>();
 
   const { currency, device } = route.params || {};
@@ -148,15 +152,15 @@ function AddAccountsAccounts(props: Props) {
         }
       }
     },
-    [dispatch, navigation, route.params, scannedAccounts, selectedAccount],
+    [dispatch, navigation, route.params, scannedAccounts, existingAccounts, selectedAccount],
   );
 
   useEffect(() => {
     if (!scanning && scannedAccounts.length === 1) {
       setAddingAccount(true);
       selectAccount(scannedAccounts[0], 4000);
     }
-  }, [scanning, scannedAccounts, selectAccount, currency]);
+  }, [scanning, scannedAccounts, selectAccount]);
 
   const startSubscription = useCallback(() => {
     const c = currency.type === "TokenCurrency" ? currency.parentCurrency : currency;
@@ -264,6 +268,8 @@ function AddAccountsAccounts(props: Props) {
     }
   }, [cancelled, navigation]);
 
+  const walletState = useSelector(walletSelector);
+
   const renderItem = useCallback(
     ({ item: account }: { item: Account }) => {
       const acc =
@@ -278,14 +284,16 @@ function AddAccountsAccounts(props: Props) {
             onPress={() => selectAccount(account)}
             AccountSubTitle={
               currency.type === "TokenCurrency" ? (
-                <LText color="neutral.c70">{account.name}</LText>
+                <LText color="neutral.c70">
+                  {accountNameWithDefaultSelector(walletState, account)}
+                </LText>
               ) : null
             }
           />
         </Flex>
       ) : null;
     },
-    [currency.id, currency.type, selectAccount],
+    [currency.id, currency.type, selectAccount, walletState],
   );
 
   const renderHeader = useCallback(
@@ -362,6 +370,7 @@ function ScanLoading({
   stopSubscription: () => void;
 }) {
   const { t } = useTranslation();
+  const numberOfAccountsFound = scannedAccounts?.length;
 
   return (
     <Loading
@@ -387,11 +396,11 @@ function ScanLoading({
           m={6}
           justifyContent="flex-end"
         >
-          {scannedAccounts?.length > 0 ? (
+          {numberOfAccountsFound > 0 ? (
             <>
               <LText textAlign="center" mb={6} variant="body" color="neutral.c80">
-                {t("transfer.receive.addAccount.foundAccounts", {
-                  count: scannedAccounts?.length,
+                {t("transfer.receive.addAccount.foundAccount", {
+                  count: numberOfAccountsFound,
                 })}
               </LText>
               <Button type="secondary" onPress={stopSubscription}>

apps/ledger-live-mobile/src/families/mimblewimble_coin/SendFundsConnectDevice.tsx

@@ -4,11 +4,7 @@ import { Platform, StyleSheet, View, Share } from "react-native";
 import { useSelector, useDispatch } from "react-redux";
 import { Edge, SafeAreaView } from "react-native-safe-area-context";
 import { Trans, useTranslation } from "react-i18next";
-import {
-  getMainAccount,
-  formatOperation,
-  addPendingOperation,
-} from "@ledgerhq/live-common/account/index";
+import { formatOperation, addPendingOperation } from "@ledgerhq/live-common/account/index";
 import { createAction as createTransactionAction } from "@ledgerhq/live-common/hw/actions/transaction";
 import { createAction as createOpenAction } from "@ledgerhq/live-common/hw/actions/app";
 import connectApp from "@ledgerhq/live-common/hw/connectApp";
@@ -35,6 +31,7 @@ import { useRoute, useNavigation, useTheme } from "@react-navigation/native";
 import type { Account, AccountLike, SignedOperation, Operation } from "@ledgerhq/types-live";
 import { log } from "@ledgerhq/logs";
 import { UserRefusedOnDevice } from "@ledgerhq/errors";
+import { getMainAccount } from "@ledgerhq/live-common/account/helpers";
 import { TransactionRefusedOnDevice } from "@ledgerhq/live-common/errors";
 import { StackNavigationProp } from "@react-navigation/stack";
 import type {
@@ -51,7 +48,7 @@ import TranslatedError from "../../components/TranslatedError";
 import { broadcastSignedTx } from "../../logic/screenTransactionHooks";
 import { updateAccountWithUpdater } from "../../actions/accounts";
 import logger from "../../logger";
-import { ScreenName } from "../../const";
+import { ScreenName } from "~/const";
 import { navigateToSelectDevice } from "../../screens/ConnectDevice";
 import { TrackScreen, track } from "../../analytics";
 import { renderLoading } from "../../components/DeviceAction/rendering";
@@ -60,6 +57,7 @@ import { accountScreenSelector } from "../../reducers/accounts";
 import type { SendFundsNavigatorStackParamList } from "../../components/RootNavigator/types/SendFundsNavigator";
 import getWindowDimensions from "../../logic/getWindowDimensions";
 import type { StackNavigatorProps } from "../../components/RootNavigator/types/helpers";
+
 const transactionAction = createTransactionAction(connectApp);
 
 const openAction = createOpenAction(connectApp);

apps/ledger-live-mobile/src/families/mimblewimble_coin/SendRowsFee.tsx

@@ -3,14 +3,15 @@ import { View, StyleSheet, TouchableOpacity } from "react-native";
 import type { AccountLike } from "@ledgerhq/types-live";
 import { Transaction, TransactionStatus } from "@ledgerhq/live-common/generated/types";
 import { Trans, useTranslation } from "react-i18next";
-import { getAccountUnit, getAccountCurrency } from "@ledgerhq/live-common/account/index";
+import { getAccountCurrency } from "@ledgerhq/live-common/account/index";
 import { useNavigation, useTheme } from "@react-navigation/native";
 import { StackNavigationProp } from "@react-navigation/stack";
 import SummaryRow from "../../screens/SendFunds/SummaryRow";
 import LText from "../../components/LText";
 import CurrencyUnitValue from "../../components/CurrencyUnitValue";
 import CounterValue from "../../components/CounterValue";
 import { ScreenName } from "../../const";
+import { useAccountUnit } from "~/hooks/useAccountUnit";
 
 const styles = StyleSheet.create({
   amountContainer: {
@@ -45,7 +46,7 @@ export default ({
 }) => {
   const { t } = useTranslation();
   const { colors } = useTheme();
-  const unit = getAccountUnit(account);
+  const unit = useAccountUnit(account);
   const currency = getAccountCurrency(account);
   const navigation = useNavigation();
   const onCustomizeBaseFeePress = useCallback(() => {

apps/ledger-live-mobile/src/families/mimblewimble_coin/ValidateReceiveOnDevice.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { ScrollView } from "react-native";
 import { useTranslation } from "react-i18next";
 import { Account, AccountLike } from "@ledgerhq/types-live";
-import { getMainAccount, getAccountUnit } from "@ledgerhq/live-common/account/index";
+import { getMainAccount } from "@ledgerhq/live-common/account/index";
 import { Device } from "@ledgerhq/live-common/hw/actions/types";
 import { getDeviceModel } from "@ledgerhq/devices";
 import { useTheme } from "@react-navigation/native";
@@ -14,6 +14,7 @@ import { DataRowUnitValue, TextValueField } from "../../components/ValidateOnDev
 import Animation from "../../components/Animation";
 import { getDeviceAnimation } from "../../helpers/getDeviceAnimation";
 import { TitleText } from "../../components/DeviceAction/rendering";
+import { useAccountUnit } from "~/hooks/useAccountUnit";
 
 function AmountField({
   account,
@@ -25,7 +26,7 @@ function AmountField({
   amount: string;
 }) {
   const mainAccount = getMainAccount(account, parentAccount);
-  const unit = getAccountUnit(mainAccount);
+  const unit = useAccountUnit(mainAccount);
   return <DataRowUnitValue label={"Amount"} unit={unit} value={new BigNumber(amount)} />;
 }
 
@@ -39,7 +40,7 @@ function FeesField({
   fee: string;
 }) {
   const mainAccount = getMainAccount(account, parentAccount);
-  const feesUnit = getAccountUnit(mainAccount);
+  const feesUnit = useAccountUnit(mainAccount);
   return <DataRowUnitValue label={"Fee"} unit={feesUnit} value={new BigNumber(fee)} />;
 }
 

apps/ledger-live-mobile/src/families/mimblewimble_coin/ValidateReceiveSuccess.tsx

@@ -11,6 +11,7 @@ import CopyLink from "../../components/CopyLink";
 import getWindowDimensions from "../../logic/getWindowDimensions";
 import { localeSelector } from "../../reducers/settings";
 import NavigationScrollView from "../../components/NavigationScrollView";
+import { useAccountUnit } from "~/hooks/useAccountUnit";
 
 const styles = StyleSheet.create({
   container: {
@@ -34,12 +35,16 @@ export default function ValidateReceiveSuccess({
   const { width } = getWindowDimensions();
   const qRSize = Math.round(width / 1.2 - 15);
   const locale = useSelector(localeSelector);
-  const formattedAmount = formatCurrencyUnit(mainAccount.unit, new BigNumber(operationAmount), {
-    disableRounding: true,
-    alwaysShowSign: false,
-    showCode: true,
-    locale,
-  });
+  const formattedAmount = formatCurrencyUnit(
+    useAccountUnit(mainAccount),
+    new BigNumber(operationAmount),
+    {
+      disableRounding: true,
+      alwaysShowSign: false,
+      showCode: true,
+      locale,
+    },
+  );
   return (
     <NavigationScrollView
       style={[styles.container, { flex: 1 }]}