Merge pull request #5809 from techiast/feat/integrate-icon-network-wi…

…th-basic-functions

Feat/integrate icon network with basic functions

.changeset/light-starfishes-appear.md

@@ -0,0 +1,10 @@
+---
+"@ledgerhq/live-cli": minor
+"ledger-live-desktop": minor
+"live-mobile": minor
+"@ledgerhq/live-common": minor
+"@ledgerhq/cryptoassets": minor
+"@ledgerhq/hw-app-icon": minor
+---
+
+Integrate Sync, Send, Receive, Create Account for Icon network

apps/cli/src/live-common-setup-base.ts

@@ -55,6 +55,8 @@ setSupportedCurrencies([
   "songbird",
   "flare",
   "near",
+  "icon",
+  "icon_berlin_testnet",
   "optimism",
   "optimism_sepolia",
   "arbitrum",

apps/ledger-live-desktop/cryptoassets.md

@@ -107,7 +107,7 @@
 | Helium | HNT | NO | helium |
 | High Performance Blockchain | HPB | NO | hpb |
 | Hycon | HYC | NO | hycon |
-| ICON | ICX | NO | icon |
+| ICON | ICX | YES | icon |
 | IOTA | MIOTA | NO | iota |
 | IOV | IOV | NO | iov |
 | Kin | KIN | NO | kin |

apps/ledger-live-desktop/src/live-common-set-supported-currencies.ts

@@ -60,6 +60,8 @@ setSupportedCurrencies([
   "songbird",
   "flare",
   "near",
+  "icon",
+  "icon_berlin_testnet",
   "optimism",
   "optimism_sepolia",
   "arbitrum",

apps/ledger-live-desktop/src/renderer/families/icon/AccountBalanceSummaryFooter.tsx

@@ -0,0 +1,93 @@
+import React from "react";
+import styled from "styled-components";
+import { useSelector } from "react-redux";
+import { Trans } from "react-i18next";
+import { formatCurrencyUnit } from "@ledgerhq/live-common/currencies/index";
+import Discreet, { useDiscreetMode } from "~/renderer/components/Discreet";
+import { IconAccount } from "@ledgerhq/live-common/families/icon/types";
+
+import Box from "~/renderer/components/Box/Box";
+import Text from "~/renderer/components/Text";
+import InfoCircle from "~/renderer/icons/InfoCircle";
+import ToolTip from "~/renderer/components/Tooltip";
+import { localeSelector } from "~/renderer/reducers/settings";
+import { SubAccount } from "@ledgerhq/types-live";
+import { useAccountUnit } from "~/renderer/hooks/useAccountUnit";
+
+const Wrapper = styled(Box).attrs(() => ({
+  horizontal: true,
+  mt: 4,
+  p: 5,
+  pb: 0,
+}))`
+  border-top: 1px solid ${p => p.theme.colors.palette.text.shade10};
+`;
+
+const BalanceDetail = styled(Box).attrs(() => ({
+  flex: 1.25,
+  vertical: true,
+  alignItems: "start",
+}))`
+  &:nth-child(n + 3) {
+    flex: 0.75;
+  }
+`;
+
+const TitleWrapper = styled(Box).attrs(() => ({ horizontal: true, alignItems: "center", mb: 1 }))``;
+
+const Title = styled(Text).attrs(() => ({
+  fontSize: 4,
+  ff: "Inter|Medium",
+  color: "palette.text.shade60",
+}))`
+  line-height: ${p => p.theme.space[4]}px;
+  margin-right: ${p => p.theme.space[1]}px;
+`;
+
+const AmountValue = styled(Text).attrs(() => ({
+  fontSize: 6,
+  ff: "Inter|SemiBold",
+  color: "palette.text.shade100",
+}))``;
+
+type Props = {
+  account: IconAccount | SubAccount;
+};
+
+const AccountBalanceSummaryFooter = ({ account }: Props) => {
+  const discreet = useDiscreetMode();
+  const locale = useSelector(localeSelector);
+  const unit = useAccountUnit(account);
+
+  if (account.type !== "Account") return null;
+
+  const formatConfig = {
+    disableRounding: false,
+    alwaysShowSign: false,
+    showCode: true,
+    discreet,
+    locale,
+  };
+
+  const spendableBalance = formatCurrencyUnit(unit, account.spendableBalance, formatConfig);
+
+  return (
+    <Wrapper>
+      <BalanceDetail>
+        <ToolTip content={<Trans i18nKey="account.availableBalanceTooltip" />}>
+          <TitleWrapper>
+            <Title>
+              <Trans i18nKey="account.availableBalance" />
+            </Title>
+            <InfoCircle size={13} />
+          </TitleWrapper>
+        </ToolTip>
+        <AmountValue>
+          <Discreet>{spendableBalance} </Discreet>
+        </AmountValue>
+      </BalanceDetail>
+    </Wrapper>
+  );
+};
+
+export default AccountBalanceSummaryFooter;

apps/ledger-live-desktop/src/renderer/families/icon/AccountSubHeader.tsx

@@ -0,0 +1,6 @@
+import React from "react";
+import AccountSubHeader from "../../components/AccountSubHeader";
+
+export default function IconAccountSubHeader() {
+  return <AccountSubHeader family="Icon" team="Techiast" />;
+}

apps/ledger-live-desktop/src/renderer/families/icon/StepSummaryNetworkFeesRow.tsx

@@ -0,0 +1,64 @@
+import React from "react";
+import { Trans } from "react-i18next";
+import Box from "~/renderer/components/Box";
+import CounterValue from "~/renderer/components/CounterValue";
+import FormattedVal from "~/renderer/components/FormattedVal";
+import Text from "~/renderer/components/Text";
+import IconExclamationCircle from "~/renderer/icons/ExclamationCircle";
+import TranslatedError from "~/renderer/components/TranslatedError";
+import { SummaryNetworkFeesRowProps } from "../types";
+
+const StepSummaryNetworkFeesRow = ({
+  feeTooHigh,
+  feesUnit,
+  estimatedFees,
+  feesCurrency,
+}: SummaryNetworkFeesRowProps) => {
+  return (
+    <>
+      <Box horizontal justifyContent="space-between">
+        <Text ff="Inter|Medium" color="palette.text.shade40" fontSize={4}>
+          <Trans i18nKey="send.steps.details.fees" />{" "}
+        </Text>
+        <Box>
+          <FormattedVal
+            color={feeTooHigh ? "warning" : "palette.text.shade80"}
+            disableRounding
+            unit={feesUnit}
+            alwaysShowValue
+            val={estimatedFees}
+            fontSize={4}
+            inline
+            showCode
+          />
+          <Box textAlign="right">
+            <CounterValue
+              color={feeTooHigh ? "warning" : "palette.text.shade60"}
+              fontSize={3}
+              currency={feesCurrency}
+              value={estimatedFees}
+              alwaysShowSign={false}
+              alwaysShowValue
+            />
+          </Box>
+        </Box>
+      </Box>
+      {feeTooHigh ? (
+        <Box horizontal justifyContent="flex-end" alignItems="center" color="warning">
+          <IconExclamationCircle size={10} />
+          <Text
+            ff="Inter|Medium"
+            fontSize={2}
+            style={{
+              marginLeft: "5px",
+            }}
+          >
+            <TranslatedError error={feeTooHigh} />
+          </Text>
+        </Box>
+      ) : null}
+    </>
+  );
+};
+
+export default StepSummaryNetworkFeesRow;

apps/ledger-live-desktop/src/renderer/families/icon/TransactionConfirmFields.tsx

@@ -0,0 +1,101 @@
+import invariant from "invariant";
+import React from "react";
+import styled from "styled-components";
+import { Trans } from "react-i18next";
+import TransactionConfirmField from "~/renderer/components/TransactionConfirm/TransactionConfirmField";
+import WarnBox from "~/renderer/components/WarnBox";
+import Box from "~/renderer/components/Box";
+import FormattedVal from "~/renderer/components/FormattedVal";
+import Alert from "~/renderer/components/Alert";
+import { FieldComponentProps } from "../types";
+import { getMainAccount } from "@ledgerhq/live-common/account/index";
+import type {
+  IconAccount,
+  Transaction,
+  TransactionStatus,
+} from "@ledgerhq/live-common/families/icon/types";
+import { useAccountUnit } from "~/renderer/hooks/useAccountUnit";
+
+const Info = styled(Box).attrs(() => ({
+  ff: "Inter|SemiBold",
+  color: "palette.text.shade100",
+  mt: 6,
+  mb: 4,
+  px: 5,
+}))`
+  text-align: center;
+`;
+
+const IconFreesField = ({
+  account,
+  parentAccount,
+  transaction,
+  field,
+}: FieldComponentProps<IconAccount, Transaction, TransactionStatus>) => {
+  const mainAccount = getMainAccount(account, parentAccount);
+  invariant(transaction.family === "icon", "icon transaction");
+  const unit = useAccountUnit(mainAccount);
+
+  const { fees } = transaction;
+  return (
+    <Box horizontal justifyContent="space-between" mb={2}>
+      <TransactionConfirmField label={field.label} />
+      <FormattedVal
+        color={"palette.text.shade80"}
+        unit={unit}
+        val={fees || 0}
+        fontSize={3}
+        inline
+        showCode
+        alwaysShowValue
+        subMagnitude={5}
+      />
+    </Box>
+  );
+};
+
+const Warning = ({
+  transaction,
+  recipientWording,
+}: {
+  transaction: Transaction;
+  recipientWording: string;
+}) => {
+  invariant(transaction.family === "icon", "icon transaction");
+  return (
+    <WarnBox>
+      <Trans i18nKey="TransactionConfirm.warning" values={{ recipientWording }} />
+    </WarnBox>
+  );
+};
+
+const Title = ({ transaction }: { transaction: Transaction }) => {
+  invariant(transaction.family === "icon", "icon transaction");
+
+  return (
+    <Info>
+      <Trans i18nKey={`TransactionConfirm.titleWording.${transaction.mode}`} />
+    </Info>
+  );
+};
+
+const Footer = ({ transaction }: { transaction: Transaction }) => {
+  invariant(transaction.family === "icon", "icon transaction");
+  return (
+    <Alert type="secondary">
+      <Trans i18nKey={`icon.networkFees`} />
+    </Alert>
+  );
+};
+
+const fieldComponents = {
+  "icon.fees": IconFreesField,
+};
+
+export default {
+  fieldComponents,
+  warning: Warning,
+  title: Title,
+  footer: Footer,
+  disableFees: () => true,
+};

apps/ledger-live-desktop/src/renderer/families/icon/index.ts

@@ -0,0 +1,20 @@
+import AccountSubHeader from "./AccountSubHeader";
+import transactionConfirmFields from "./TransactionConfirmFields";
+import AccountBalanceSummaryFooter from "./AccountBalanceSummaryFooter";
+import StepSummaryNetworkFeesRow from "./StepSummaryNetworkFeesRow";
+import {
+  IconAccount,
+  Transaction,
+  TransactionStatus,
+  IconOperation,
+} from "@ledgerhq/live-common/families/icon/types";
+import { LLDCoinFamily } from "../types";
+
+const family: LLDCoinFamily<IconAccount, Transaction, TransactionStatus, IconOperation> = {
+  AccountSubHeader,
+  transactionConfirmFields,
+  StepSummaryNetworkFeesRow,
+  AccountBalanceSummaryFooter,
+};
+
+export default family;

apps/ledger-live-mobile/src/families/icon/AccountSubHeader.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+import AccountSubHeader from "../../components/AccountSubHeader";
+
+function IconAccountSubHeader() {
+  return <AccountSubHeader family="ICON" team="Techiast" />;
+}
+
+export default IconAccountSubHeader;

apps/ledger-live-mobile/src/live-common-setup.ts

@@ -93,6 +93,8 @@ setSupportedCurrencies([
   "songbird",
   "flare",
   "near",
+  "icon",
+  "icon_berlin_testnet",
   "optimism",
   "optimism_sepolia",
   "arbitrum",

libs/coin-framework/src/derivation.ts

@@ -175,6 +175,9 @@ const modes: Readonly<Partial<Record<DerivationMode, unknown>>> = Object.freeze(
     overridesDerivation: "44'/397'/0'/0'/<account>'",
     mandatoryEmptyAccountSkip: 1,
   },
+  icon: {
+    overridesDerivation: "44'/4801368'/0'/0'/<account>'",
+  },
   vechain: {
     overridesDerivation: "44'/818'/0'/0/<account>",
   },
@@ -203,6 +206,8 @@ const legacyDerivations: Partial<Record<CryptoCurrency["id"], DerivationMode[]>>
   cardano: ["cardano"],
   cardano_testnet: ["cardano"],
   near: ["nearbip44h"],
+  icon: ["icon"],
+  icon_berlin_testnet: ["icon"],
   vechain: ["vechain"],
   stacks: ["stacks_wallet"],
   ethereum: ["ethM", "ethMM"],
@@ -342,6 +347,8 @@ const disableBIP44: Record<string, boolean> = {
   cardano: true,
   cardano_testnet: true,
   near: true,
+  icon: true,
+  icon_berlin_testnet: true,
   vechain: true,
   internet_computer: true,
   casper: true,

libs/coin-modules/coin-icon/.eslintrc.js

@@ -0,0 +1,20 @@
+module.exports = {
+  env: {
+    browser: true,
+    es6: true,
+  },
+  overrides: [
+    {
+      files: ["src/**/*.test.{ts,tsx}"],
+      env: {
+        "jest/globals": true,
+      },
+      plugins: ["jest"],
+    },
+  ],
+  rules: {
+    "no-console": ["error", { allow: ["warn", "error"] }],
+    "@typescript-eslint/no-empty-function": "off",
+    "@typescript-eslint/no-explicit-any": "warn",
+  },
+};