[support] Update polkadot dependencies

.changeset/blue-frogs-yell.md

@@ -0,0 +1,6 @@
+---
+"ledger-live-desktop": patch
+"live-mobile": patch
+---
+
+Eliminate usage of @polkadot/react-identicons

.changeset/young-rice-boil.md

@@ -0,0 +1,5 @@
+---
+"@ledgerhq/coin-polkadot": patch
+---
+
+Upgrade @polkadot/\* dependencies

apps/cli/scripts/test.mjs

@@ -7,14 +7,13 @@ const acceptedWarnings = [
   "Patching Protobuf Long.js instance...", // https://ledgerhq.atlassian.net/browse/LIVE-5478
 ];
 
-const errors = p.stderr
-  .split("\n")
-  .filter((l) => l && !acceptedWarnings.includes(l));
+const errors = p.stderr.split("\n").filter(l => l && !acceptedWarnings.includes(l));
 
 if (errors.length > 0) {
   console.error(
     "/!\\ NOGO. Some warnings are logged by the CLI. Please fix them, this is a blocker to not ship more warnings than we already have. It costs time for all devs when we do.",
-    errors
+    errors,
   );
+
   process.exit(1);
 }

apps/ledger-live-desktop/package.json

@@ -66,7 +66,6 @@
     "@ledgerhq/types-cryptoassets": "workspace:^",
     "@ledgerhq/types-devices": "workspace:^",
     "@ledgerhq/types-live": "workspace:^",
-    "@polkadot/react-identicon": "2.11.3",
     "@sentry/electron": "^4.14.0",
     "@sentry/node": "7.74.0",
     "@sentry/tracing": "7.74.0",

apps/ledger-live-desktop/src/renderer/families/polkadot/ManageModal.tsx

@@ -22,6 +22,7 @@ import Text from "~/renderer/components/Text";
 import ElectionStatusWarning from "./ElectionStatusWarning";
 import { PolkadotAccount } from "@ledgerhq/live-common/families/polkadot/types";
 import { ModalData } from "~/renderer/modals/types";
+
 const IconWrapper = styled.div`
   width: 32px;
   height: 32px;
@@ -33,6 +34,7 @@ const IconWrapper = styled.div`
   align-items: center;
   margin-top: ${p => p.theme.space[2]}px;
 `;
+
 const ManageButton = styled.button`
   min-height: 88px;
   padding: 16px;
@@ -69,15 +71,18 @@ const ManageButton = styled.button`
       cursor: pointer;
   `};
 `;
+
 const InfoWrapper = styled(Box).attrs(() => ({
   flex: 1,
   ml: 3,
   textAlign: "start",
 }))``;
+
 const Title = styled(Text).attrs(() => ({
   ff: "Inter|SemiBold",
   fontSize: 4,
 }))``;
+
 const Description = styled(Text).attrs<{
   isPill?: boolean;
 }>(({ isPill }) => ({
@@ -94,10 +99,12 @@ const Description = styled(Text).attrs<{
   `
       : ""}
 `;
+
 type Props = {
   account: PolkadotAccount;
   source: string;
 };
+
 const ManageModal = ({ account, source, ...rest }: Props) => {
   const dispatch = useDispatch();
   const { staking } = usePolkadotPreloadData();
@@ -117,6 +124,7 @@ const ManageModal = ({ account, source, ...rest }: Props) => {
     },
     [dispatch, account, source],
   );
+
   const electionOpen = staking?.electionClosed !== undefined ? !staking?.electionClosed : false;
   const hasUnlockedBalance = unlockedBalance && unlockedBalance.gt(0);
   const hasPendingWithdrawUnbondedOperation = hasPendingOperationType(account, "WITHDRAW_UNBONDED");
@@ -126,6 +134,7 @@ const ManageModal = ({ account, source, ...rest }: Props) => {
   const unbondingEnabled = !electionOpen && canUnbond(account);
   const withdrawEnabled =
     !electionOpen && hasUnlockedBalance && !hasPendingWithdrawUnbondedOperation;
+
   return (
     <Modal
       {...rest}

apps/ledger-live-desktop/src/renderer/families/polkadot/Nomination/Row.tsx

@@ -18,19 +18,21 @@ import ClockIcon from "~/renderer/icons/Clock";
 import ExclamationCircle from "~/renderer/icons/ExclamationCircle";
 import ToolTip from "~/renderer/components/Tooltip";
 import ExternalLink from "~/renderer/icons/ExternalLink";
-import Identicon from "@polkadot/react-identicon";
+import FirstLetterIcon from "~/renderer/components/FirstLetterIcon";
 
 const Wrapper = styled.div`
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   padding: 16px 20px;
 `;
+
 const Column = styled(TableLine).attrs(() => ({
   ff: "Inter|SemiBold",
   color: "palette.text.shade80",
   fontSize: 3,
 }))``;
+
 const IconContainer = styled.div`
   display: flex;
   align-items: center;
@@ -39,6 +41,7 @@ const IconContainer = styled.div`
   height: 24px;
   color: ${p => p.theme.colors.palette.primary.main};
 `;
+
 const ValidatorName = styled(TableLine).attrs(() => ({
   ff: "Inter|SemiBold",
   color: "palette.text.shade100",
@@ -57,23 +60,27 @@ const ValidatorName = styled(TableLine).attrs(() => ({
     opacity: 1;
   }
 `;
+
 const Ellipsis = styled.div`
   flex: 1;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 `;
+
 const StatusLabel = styled.div`
   flex: 1;
   display: block;
   margin-left: 8px;
 `;
+
 type Props = {
   account: Account;
   nomination: PolkadotNomination;
   validator?: PolkadotValidator;
   onExternalLink: (address: string) => void;
 };
+
 export function Row({
   account,
   nomination: { value, address, status },
@@ -97,6 +104,7 @@ export function Row({
         : "-",
     [status, unit, value, discreet],
   );
+
   const formattedTotal = useMemo(
     () =>
       total && total.gt(0)
@@ -109,16 +117,18 @@ export function Row({
         : "-",
     [unit, total],
   );
+
   const formattedCommission = useMemo(
     () => (commission ? `${commission.multipliedBy(100).toFixed(2)} %` : "-"),
     [commission],
   );
+
   const onExternalLinkClick = useCallback(() => onExternalLink(address), [onExternalLink, address]);
   return (
     <Wrapper>
       <ValidatorName onClick={onExternalLinkClick}>
         <Box mr={2}>
-          <Identicon value={address} size={24} theme="polkadot" />
+          <FirstLetterIcon label={validator?.identity || "-"} />
         </Box>
         <ToolTip content={validator?.identity ? address : null}>
           <Ellipsis>{name}</Ellipsis>
@@ -175,10 +185,12 @@ export function Row({
     </Wrapper>
   );
 }
+
 type UnlockingRowProps = {
   account: Account;
   unlocking: PolkadotUnlocking;
 };
+
 export function UnlockingRow({
   account,
   unlocking: { amount, completionDate },
@@ -198,6 +210,7 @@ export function UnlockingRow({
       }),
     [unit, amount],
   );
+
   return (
     <Wrapper>
       <Column>{formattedAmount}</Column>

apps/ledger-live-desktop/src/renderer/families/polkadot/NominationFlowModal/fields/ValidatorRow.tsx

@@ -10,7 +10,7 @@ import Text from "~/renderer/components/Text";
 import CheckBox from "~/renderer/components/CheckBox";
 import Tooltip from "~/renderer/components/Tooltip";
 import ExternalLink from "~/renderer/icons/ExternalLink";
-import Identicon from "@polkadot/react-identicon";
+import FirstLetterIcon from "~/renderer/components/FirstLetterIcon";
 
 const IconContainer = styled.div`
   display: flex;
@@ -20,11 +20,13 @@ const IconContainer = styled.div`
   height: 24px;
   color: ${p => p.theme.colors.palette.text.shade60};
 `;
+
 const InfoContainer = styled(Box).attrs(() => ({
   ml: 2,
   flexShrink: 0,
   mr: "auto",
 }))``;
+
 const Title = styled(Box).attrs(() => ({
   horizontal: true,
   alignItems: "center",
@@ -54,20 +56,23 @@ const Title = styled(Box).attrs(() => ({
     white-space: nowrap;
   }
 `;
+
 const SubTitle = styled(Box).attrs(() => ({
   horizontal: true,
 }))`
   font-size: 11px;
   font-weight: 500;
   color: ${p => p.theme.colors.palette.text.shade60};
 `;
+
 const Status = styled(Text)<{
   isElected?: boolean;
 }>`
   font-size: 11px;
   font-weight: 700;
   color: ${p => (p.isElected ? p.theme.colors.positiveGreen : p.theme.colors.palette.text.shade60)};
 `;
+
 const TotalStake = styled.span`
   margin-left: 4px;
   padding-left: 4px;
@@ -81,16 +86,19 @@ const NominatorsCount = styled.span<{
   color: ${p =>
     p.isOversubscribed ? p.theme.colors.warning : p.theme.colors.palette.text.shade100};
 `;
+
 const Commission = styled.span`
   font-size: 11px;
   font-weight: 500;
 `;
+
 const SideInfo = styled(Box).attrs(() => ({
   alignItems: "flex-end",
   textAlign: "right",
 }))`
   margin-right: 8px;
 `;
+
 const Row = styled(Box).attrs(() => ({
   horizontal: true,
   flex: "0 0 56px",
@@ -128,6 +136,7 @@ const Row = styled(Box).attrs(() => ({
         `
       : ""}
 `;
+
 type ValidatorRowProps = {
   validator: PolkadotValidator;
   unit: Unit;
@@ -138,6 +147,7 @@ type ValidatorRowProps = {
   onExternalLink: (address: string) => void;
   style?: React.CSSProperties;
 };
+
 const ValidatorRow = ({
   validator,
   unit,
@@ -167,13 +177,16 @@ const ValidatorRow = ({
     },
     [onExternalLink, address],
   );
+
   const onToggle = useCallback(() => {
     onUpdateVote && (!disabled || isSelected) && onUpdateVote(address, !isSelected);
   }, [onUpdateVote, address, disabled, isSelected]);
+
   const formattedCommission = useMemo(
     () => (commissionBN ? `${commissionBN.multipliedBy(100).toFixed(2)} %` : "-"),
     [commissionBN],
   );
+
   const formattedTotal = useMemo(
     () =>
       totalBN && totalBN.gt(0)
@@ -186,10 +199,11 @@ const ValidatorRow = ({
         : "",
     [unit, totalBN],
   );
+
   return (
     <Row style={style} disabled={!!disabled} active={!!isSelected}>
       <IconContainer>
-        <Identicon value={address} size={24} theme="polkadot" />
+        <FirstLetterIcon label={identity || "-"} />
       </IconContainer>
       <InfoContainer>
         <Tooltip content={identity ? address : null}>

apps/ledger-live-mobile/babel.config.js

@@ -11,6 +11,7 @@ module.exports = {
   plugins: [
     "@babel/plugin-transform-named-capturing-groups-regex",
     "@babel/plugin-proposal-export-namespace-from",
+    "@babel/plugin-transform-class-static-block",
     "react-native-reanimated/plugin", // react-native-reanimated/plugin has to be listed last.
   ],
 };

apps/ledger-live-mobile/package.json

@@ -86,7 +86,6 @@
     "@ledgerhq/types-devices": "workspace:^",
     "@ledgerhq/types-live": "workspace:^",
     "@likashefqet/react-native-image-zoom": "^1.3.0",
-    "@polkadot/reactnative-identicon": "2.11.3",
     "@react-native-async-storage/async-storage": "^1.19.2",
     "@react-native-clipboard/clipboard": "^1.11.2",
     "@react-native-community/netinfo": "^9.3.7",
@@ -202,6 +201,7 @@
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
     "@babel/plugin-proposal-optional-chaining": "^7.21.0",
     "@babel/plugin-transform-arrow-functions": "^7.22.5",
+    "@babel/plugin-transform-class-static-block": "^7.23.4",
     "@babel/plugin-transform-named-capturing-groups-regex": "^7.22.5",
     "@babel/plugin-transform-shorthand-properties": "^7.22.5",
     "@babel/plugin-transform-template-literals": "^7.22.5",

apps/ledger-live-mobile/src/families/polkadot/NominateFlow/01-Validators.tsx

@@ -54,11 +54,12 @@ import type {
 } from "../../../components/RootNavigator/types/helpers";
 import type { PolkadotNominateFlowParamList } from "./types";
 import { BaseNavigatorStackParamList } from "../../../components/RootNavigator/types/BaseNavigator";
-import Identicon from "@polkadot/reactnative-identicon";
+import FirstLetterIcon from "~/components/FirstLetterIcon";
 
 type Props = BaseComposite<
   StackNavigatorProps<PolkadotNominateFlowParamList, ScreenName.PolkadotNominateSelectValidators>
 >;
+
 function NominateSelectValidator({ navigation, route }: Props) {
   const { colors } = useTheme();
   const { t } = useTranslation();
@@ -256,11 +257,7 @@ function NominateSelectValidator({ navigation, route }: Props) {
         isOpen={drawerInfo && drawerInfo.length > 0}
         onClose={onCloseDrawer}
         account={account}
-        ValidatorImage={({ size }) =>
-          drawerValidator ? (
-            <Identicon value={drawerValidator.address} size={size} theme="polkadot" />
-          ) : null
-        }
+        ValidatorImage={() => <FirstLetterIcon label={drawerValidator?.identity || "-"} />}
         data={drawerInfo}
       />
       <View>

apps/ledger-live-mobile/src/families/polkadot/NominateFlow/ValidatorItem.tsx

@@ -6,7 +6,7 @@ import { useTheme } from "styled-components/native";
 import CheckBox from "../../../components/CheckBox";
 import LText from "../../../components/LText";
 import Touchable from "../../../components/Touchable";
-import Identicon from "@polkadot/reactnative-identicon";
+import FirstLetterIcon from "~/components/FirstLetterIcon";
 
 type Props = {
   item: PolkadotValidator;
@@ -43,7 +43,7 @@ function Item({ item, selected, disabled, onSelect, onClick }: Props) {
         onPress={() => onClick(address)}
         event="PolkadotNominateSelectValidatorsOpenExplorer"
       >
-        <Identicon theme="polkadot" value={address} size={32} />
+        <FirstLetterIcon label={identity || "-"} round size={32} />
       </Touchable>
 
       <View style={styles.nameWrapper}>
@@ -139,4 +139,5 @@ const styles = StyleSheet.create({
     fontSize: 13,
   },
 });
+
 export default memo<Props>(Item);