[feat] Vechain integration (#4947)

.changeset/stupid-suns-argue.md

@@ -0,0 +1,13 @@
+---
+"@ledgerhq/cryptoassets": minor
+"@ledgerhq/hw-app-vet": minor
+"@ledgerhq/crypto-icons-ui": minor
+"ledger-live-desktop": minor
+"live-mobile": minor
+"@ledgerhq/live-common": minor
+"@ledgerhq/coin-framework": minor
+"@ledgerhq/live-cli": minor
+"@ledgerhq/live-env": minor
+---
+
+vechain integration

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

@@ -80,6 +80,7 @@ setSupportedCurrencies([
   "sei_network",
   "persistence",
   "quicksilver",
+  "vechain",
   "internet_computer",
   "klaytn",
   "polygon_zk_evm",

apps/ledger-live-desktop/src/helpers/tokensWithUnsupportedGraph.ts

@@ -0,0 +1 @@
+export const tokensWithUnsupportedGraph = ["vechain/vip180/vtho"];

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

@@ -74,6 +74,7 @@ setSupportedCurrencies([
   "moonriver",
   "velas_evm",
   "syscoin",
+  "vechain",
   "internet_computer",
   "klaytn",
   "polygon_zk_evm",

apps/ledger-live-desktop/src/renderer/modals/AddAccounts/steps/StepChooseCurrency.tsx

@@ -33,6 +33,8 @@ const listSupportedTokens = () =>
   listTokens().filter(token => isCurrencySupported(token.parentCurrency));
 
 const StepChooseCurrency = ({ currency, setCurrency }: StepProps) => {
+  const mock = useEnv("MOCK");
+
   const axelar = useFeature("currencyAxelar");
   const stargaze = useFeature("currencyStargaze");
   const secretNetwork = useFeature("currencySecretNetwork");
@@ -68,8 +70,8 @@ const StepChooseCurrency = ({ currency, setCurrency }: StepProps) => {
   const base = useFeature("currencyBase");
   const baseGoerli = useFeature("currencyBaseGoerli");
   const klaytn = useFeature("currencyKlaytn");
-  const mock = useEnv("MOCK");
   const injective = useFeature("currencyInjective");
+  const vechain = useFeature("currencyVechain");
   const casper = useFeature("currencyCasper");
   const neonEvm = useFeature("currencyNeonEvm");
   const lukso = useFeature("currencyLukso");
@@ -112,6 +114,7 @@ const StepChooseCurrency = ({ currency, setCurrency }: StepProps) => {
       base_goerli: baseGoerli,
       klaytn,
       injective,
+      vechain,
       casper,
       neon_evm: neonEvm,
       lukso,
@@ -153,23 +156,29 @@ const StepChooseCurrency = ({ currency, setCurrency }: StepProps) => {
       baseGoerli,
       klaytn,
       injective,
+      vechain,
       casper,
       neonEvm,
       lukso,
     ],
   );
 
   const currencies = useMemo(() => {
-    const currencies = (listSupportedCurrencies() as CryptoOrTokenCurrency[]).concat(
-      listSupportedTokens(),
-    );
+    const supportedCurrenciesAndTokens = (
+      listSupportedCurrencies() as CryptoOrTokenCurrency[]
+    ).concat(listSupportedTokens());
 
     const deactivatedCurrencies = mock
       ? [] // mock mode: all currencies are available for playwrigth tests
       : Object.entries(featureFlaggedCurrencies)
           .filter(([, feature]) => !feature?.enabled)
-          .map(([name]) => name);
-    return currencies.filter(c => !deactivatedCurrencies.includes(c.id));
+          .map(([id]) => id);
+
+    return supportedCurrenciesAndTokens.filter(
+      c =>
+        (c.type === "CryptoCurrency" && !deactivatedCurrencies.includes(c.id)) ||
+        (c.type === "TokenCurrency" && !deactivatedCurrencies.includes(c.parentCurrency.id)),
+    );
   }, [featureFlaggedCurrencies, mock]);
 
   const url =
@@ -186,7 +195,6 @@ const StepChooseCurrency = ({ currency, setCurrency }: StepProps) => {
       ) : currency ? (
         <CurrencyDownStatusAlert currencies={[currency]} />
       ) : null}
-      {/* $FlowFixMe: onChange type is not good */}
       <SelectCurrency currencies={currencies} autoFocus onChange={setCurrency} value={currency} />
       <FullNodeStatus currency={currency} />
       {currency && currency.type === "TokenCurrency" ? (

apps/ledger-live-desktop/src/renderer/screens/account/BalanceSummary.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback } from "react";
 import { useSelector } from "react-redux";
-import { useBalanceHistoryWithCountervalue } from "~/renderer/actions/portfolio";
+import { useBalanceHistoryWithCountervalue, usePortfolio } from "~/renderer/actions/portfolio";
 import { BigNumber } from "bignumber.js";
 import { formatShort } from "@ledgerhq/live-common/currencies/index";
 import { Account, AccountLike } from "@ledgerhq/types-live";
@@ -15,6 +15,11 @@ import FormattedDate from "~/renderer/components/FormattedDate";
 import { Data, Item } from "~/renderer/components/Chart/types";
 import { getLLDCoinFamily } from "~/renderer/families";
 
+import PlaceholderChart from "~/renderer/components/PlaceholderChart";
+import Alert from "~/renderer/components/Alert";
+import { useTranslation } from "react-i18next";
+import { tokensWithUnsupportedGraph } from "~/helpers/tokensWithUnsupportedGraph";
+
 type Props = {
   chartColor: string;
   account: AccountLike;
@@ -31,6 +36,8 @@ export default function AccountBalanceSummary({
   setCountervalueFirst,
   mainAccount,
 }: Props) {
+  const { t } = useTranslation();
+  const portfolio = usePortfolio();
   const [range] = useTimeRange();
   const counterValue = useSelector(counterValueCurrencySelector);
   const { history, countervalueAvailable, countervalueChange, cryptoChange } =
@@ -105,23 +112,37 @@ export default function AccountBalanceSummary({
       </Box>
 
       <Box px={5} ff="Inter" fontSize={4} color="palette.text.shade80" pt={5}>
-        <Chart
-          magnitude={chartMagnitude}
-          color={chartColor}
-          // TODO we need to make Date non optional in live-common
-          data={history as Data}
-          height={200}
-          tickXScale={range}
-          valueKey={displayCountervalue ? "countervalue" : "value"}
-          renderTickY={
-            discreetMode
-              ? () => ""
-              : displayCountervalue
-              ? renderTickYCounterValue
-              : renderTickYCryptoValue
-          }
-          renderTooltip={renderTooltip}
-        />
+        {account.type === "TokenAccount" &&
+        tokensWithUnsupportedGraph.includes(account.token.id) ? (
+          <>
+            <Alert type="secondary" noIcon={false}>
+              <span>{t("graph.noGraphWarning")}</span>
+            </Alert>
+            <PlaceholderChart
+              magnitude={counterValue.units[0].magnitude}
+              data={portfolio.balanceHistory}
+              tickXScale={range}
+            />
+          </>
+        ) : (
+          <Chart
+            magnitude={chartMagnitude}
+            color={chartColor}
+            // TODO we need to make Date non optional in live-common
+            data={history as Data}
+            height={200}
+            tickXScale={range}
+            valueKey={displayCountervalue ? "countervalue" : "value"}
+            renderTickY={
+              discreetMode
+                ? () => ""
+                : displayCountervalue
+                ? renderTickYCounterValue
+                : renderTickYCryptoValue
+            }
+            renderTooltip={renderTooltip}
+          />
+        )}
       </Box>
       {AccountBalanceSummaryFooter && (
         <AccountBalanceSummaryFooter

apps/ledger-live-desktop/src/renderer/screens/asset/BalanceSummary.tsx

@@ -6,12 +6,16 @@ import { CryptoCurrency, Currency, TokenCurrency, Unit } from "@ledgerhq/types-c
 import Chart from "~/renderer/components/Chart";
 import Box, { Card } from "~/renderer/components/Box";
 import FormattedVal from "~/renderer/components/FormattedVal";
-import { useCurrencyPortfolio } from "~/renderer/actions/portfolio";
+import { useCurrencyPortfolio, usePortfolio } from "~/renderer/actions/portfolio";
 import AssetBalanceSummaryHeader from "./AssetBalanceSummaryHeader";
 import { discreetModeSelector } from "~/renderer/reducers/settings";
 import FormattedDate from "~/renderer/components/FormattedDate";
 import { Data } from "~/renderer/components/Chart/types";
 import { PortfolioRange } from "@ledgerhq/types-live";
+import PlaceholderChart from "~/renderer/components/PlaceholderChart";
+import Alert from "~/renderer/components/Alert";
+import { useTranslation } from "react-i18next";
+import { tokensWithUnsupportedGraph } from "~/helpers/tokensWithUnsupportedGraph";
 
 type Props = {
   counterValue: Currency;
@@ -29,6 +33,8 @@ export default function BalanceSummary({
   chartColor,
   currency,
 }: Props) {
+  const { t } = useTranslation();
+  const portfolio = usePortfolio();
   const { history, countervalueAvailable, countervalueChange, cryptoChange } = useCurrencyPortfolio(
     {
       currency,
@@ -90,23 +96,36 @@ export default function BalanceSummary({
       </Box>
 
       <Box px={5} ff="Inter" fontSize={4} color="palette.text.shade80" pt={6}>
-        <Chart
-          magnitude={chartMagnitude}
-          color={chartColor}
-          // TODO make date non optional
-          data={history as Data}
-          height={200}
-          tickXScale={range}
-          valueKey={displayCountervalue ? "countervalue" : "value"}
-          renderTickY={
-            discreetMode
-              ? () => ""
-              : displayCountervalue
-              ? renderTickYCounterValue
-              : renderTickYCryptoValue
-          }
-          renderTooltip={renderTooltip}
-        />
+        {currency.type === "TokenCurrency" && tokensWithUnsupportedGraph.includes(currency.id) ? (
+          <>
+            <Alert type="secondary" noIcon={false}>
+              <span>{t("graph.noGraphWarning")}</span>
+            </Alert>
+            <PlaceholderChart
+              magnitude={counterValue.units[0].magnitude}
+              data={portfolio.balanceHistory}
+              tickXScale={range}
+            />
+          </>
+        ) : (
+          <Chart
+            magnitude={chartMagnitude}
+            color={chartColor}
+            // TODO make date non optional
+            data={history as Data}
+            height={200}
+            tickXScale={range}
+            valueKey={displayCountervalue ? "countervalue" : "value"}
+            renderTickY={
+              discreetMode
+                ? () => ""
+                : displayCountervalue
+                ? renderTickYCounterValue
+                : renderTickYCryptoValue
+            }
+            renderTooltip={renderTooltip}
+          />
+        )}
       </Box>
     </Card>
   );

apps/ledger-live-desktop/src/sentry/install.ts

@@ -76,6 +76,7 @@ const ignoreErrors = [
   "DisconnectedDevice",
   "DisconnectedDeviceDuringOperation",
   "EthAppPleaseEnableContractData",
+  "VechainAppPleaseEnableContractDataAndMultiClause",
   "failed with status code",
   "GetAppAndVersionUnsupportedFormat",
   "Invalid channel",

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

@@ -3570,6 +3570,9 @@
       }
     }
   },
+  "graph": {
+    "noGraphWarning": "The graph is not available for this token"
+  },
   "near": {
     "account": {
       "stakedBalance": "Staked balance",
@@ -5280,6 +5283,18 @@
       "title": "Not enough EGLD to pay the transaction fees",
       "description": "Please send some EGLD to your account to pay for transactions."
     },
+    "NotEnoughVTHO": {
+      "title": "Sorry, insufficient VTHO funds",
+      "description": "Please make sure the account has enough VTHO."
+    },
+    "MustBeVechain": {
+      "title": "Not a vechain account",
+      "description": "Please make sure the coin is VTHO or VET"
+    },
+    "ImpossibleToCalculateAmountAndFees": {
+      "title": "Impossible to calculate amount and fees",
+      "description": "Impossible to calculate amount and fees"
+    },
     "NotEnoughBalance": {
       "title": "Sorry, insufficient funds",
       "description": "Please make sure the account has enough funds."
@@ -5973,4 +5988,4 @@
   "recoverRestore": {
     "title": "Connect and unlock your Ledger"
   }
-}
+}

apps/ledger-live-mobile/index.js

@@ -51,6 +51,7 @@ const excludedErrorName = [
   // bad usage of device
   "BleError",
   "EthAppPleaseEnableContractData",
+  "VechainAppPleaseEnableContractDataAndMultiClause",
   "CantOpenDevice",
   "DisconnectedDevice",
   "DisconnectedDeviceDuringOperation",

apps/ledger-live-mobile/src/components/AccountGraphCard.tsx

@@ -32,6 +32,8 @@ import { NavigatorName, ScreenName } from "../const";
 import { track } from "../analytics";
 import { StackNavigatorNavigation } from "./RootNavigator/types/helpers";
 import { BaseNavigatorStackParamList } from "./RootNavigator/types/BaseNavigator";
+import { GraphPlaceholder } from "./Graph/Placeholder";
+import { tokensWithUnsupportedGraph } from "./Graph/tokensWithUnsupportedGraph";
 
 const { width } = getWindowDimensions();
 
@@ -150,29 +152,43 @@ function AccountGraphCard({
         parentAccount={parentAccount}
         currency={currency}
       />
-
-      <Flex height={120} alignItems="center" justifyContent="center" onTouchEnd={handleGraphTouch}>
-        {!loading ? (
-          <Transitions.Fade duration={400} status="entering">
-            <Graph
-              isInteractive
-              height={120}
-              width={width}
-              color={graphColor}
-              data={history}
-              mapValue={useCounterValue ? mapCounterValue : mapCryptoValue}
-              onItemHover={setHoverItem}
-              verticalRangeRatio={10}
-              fill={colors.background.main}
+      {account.type === "TokenAccount" && tokensWithUnsupportedGraph.includes(account.token.id) ? (
+        <GraphPlaceholder />
+      ) : (
+        <>
+          <Flex
+            height={120}
+            alignItems="center"
+            justifyContent="center"
+            onTouchEnd={handleGraphTouch}
+          >
+            {!loading ? (
+              <Transitions.Fade duration={400} status="entering">
+                <Graph
+                  isInteractive
+                  height={120}
+                  width={width}
+                  color={graphColor}
+                  data={history}
+                  mapValue={useCounterValue ? mapCounterValue : mapCryptoValue}
+                  onItemHover={setHoverItem}
+                  verticalRangeRatio={10}
+                  fill={colors.background.main}
+                />
+              </Transitions.Fade>
+            ) : (
+              <InfiniteLoader size={32} />
+            )}
+          </Flex>
+          <Flex bg="background.main">
+            <GraphTabs
+              activeIndex={activeRangeIndex}
+              onChange={updateRange}
+              labels={rangesLabels}
             />
-          </Transitions.Fade>
-        ) : (
-          <InfiniteLoader size={32} />
-        )}
-      </Flex>
-      <Flex bg="background.main">
-        <GraphTabs activeIndex={activeRangeIndex} onChange={updateRange} labels={rangesLabels} />
-      </Flex>
+          </Flex>
+        </>
+      )}
       <Footer renderAccountSummary={renderAccountSummary} />
     </Flex>
   );