LIVE-1004 Hedera integration

cryptoassets.md

@@ -18,6 +18,7 @@
 | Elrond | EGLD | YES | elrond |
 | Ethereum | ETH | YES | ethereum |
 | Ethereum Classic | ETC | YES | ethereum_classic |
+| Hedera | HBAR | YES | hedera |
 | Horizen | ZEN | YES | zencash |
 | Komodo | KMD | YES | komodo |
 | Litecoin | LTC | YES | litecoin |
@@ -60,7 +61,6 @@
 | GameCredits | GAME | NO | game_credits |
 | GoChain | GO | NO | gochain |
 | Groestlcoin | GRS | NO | groestcoin |
-| Hedera | HBAR | NO | hedera |
 | Helium | HNT | NO | helium |
 | High Performance Blockchain | HPB | NO | hpb |
 | Hycon | HYC | NO | hycon |

package.json

@@ -49,7 +49,7 @@
     "@ledgerhq/hw-transport": "6.27.1",
     "@ledgerhq/hw-transport-http": "6.27.1",
     "@ledgerhq/hw-transport-node-hid-singleton": "6.27.1",
-    "@ledgerhq/live-common": "https://github.com/LedgerHQ/ledger-live-common.git#develop",
+    "@ledgerhq/live-common": "https://github.com/LedgerHQ/ledger-live-common.git#03617053fe9c3e1f1910d94eaa95018cab4aa559",
     "@ledgerhq/logs": "6.10.0",
     "@ledgerhq/react-ui": "^0.7.5",
     "@open-wc/webpack-import-meta-loader": "^0.4.7",

scripts/sync-families-dispatch.sh

@@ -15,7 +15,9 @@ SendWarning.js \
 ReceiveWarning.js \
 AccountBalanceSummaryFooter.js \
 TokenList.js \
-AccountHeaderManageActions.js
+AccountHeaderManageActions.js \
+StepReceiveFunds.js \
+NoAssociatedAccounts.js
 "
 
 cd ../src/renderer

src/config/urls.js

@@ -215,4 +215,8 @@ export const urls = {
     recipient_info: "https://support.ledger.com",
     ledgerByFigmentTC: "https://drive.google.com/file/d/1vlIh2gTwtbMon8_bzFQGjCLhTUqS5uQc",
   },
+  hedera: {
+    supportArticleLink:
+      "https://launchbadge.com/blog/using-a-ledger-nano-to-create-your-hedera-account",
+  },
 };

src/live-common-set-supported-currencies.js

@@ -41,4 +41,5 @@ setSupportedCurrencies([
   "ethereum_ropsten",
   "ethereum_goerli",
   "cosmos_testnet",
+  "hedera",
 ]);

src/renderer/families/hedera/NoAssociatedAccounts.js

@@ -0,0 +1,25 @@
+// @flow
+import React from "react";
+import { Trans } from "react-i18next";
+
+import { openURL } from "~/renderer/linking";
+import { urls } from "~/config/urls";
+import LinkWithExternalIcon from "~/renderer/components/LinkWithExternalIcon";
+
+import type { StepProps } from "~/renderer/modals/AddAccounts/index";
+
+// "no associated accounts" text when adding/importing accounts
+const NoAssociatedAccounts = ({ t }: StepProps) => {
+  return (
+    <div>
+      <Trans i18nKey="hedera.createHederaAccountHelp.text"></Trans>{" "}
+      <LinkWithExternalIcon
+        fontSize={3}
+        onClick={() => openURL(urls.hedera.supportArticleLink)}
+        label={t("hedera.createHederaAccountHelp.link")}
+      />
+    </div>
+  );
+};
+
+export default NoAssociatedAccounts;

src/renderer/families/hedera/StepReceiveFunds.js

@@ -0,0 +1,149 @@
+// @flow
+
+import React, { useRef, useCallback, useState } from "react";
+import { Trans } from "react-i18next";
+import invariant from "invariant";
+import { getMainAccount, getAccountName } from "@ledgerhq/live-common/lib/account";
+import styled from "styled-components";
+
+import TrackPage from "~/renderer/analytics/TrackPage";
+import Box from "~/renderer/components/Box";
+import ErrorDisplay from "~/renderer/components/ErrorDisplay";
+import Text from "~/renderer/components/Text";
+import Ellipsis from "~/renderer/components/Ellipsis";
+import ReadOnlyAddressField from "~/renderer/components/ReadOnlyAddressField";
+import LinkShowQRCode from "~/renderer/components/LinkShowQRCode";
+import Modal from "~/renderer/components/Modal";
+import ModalBody from "~/renderer/components/Modal/ModalBody";
+import Alert from "~/renderer/components/Alert";
+import QRCode from "~/renderer/components/QRCode";
+import AccountTagDerivationMode from "~/renderer/components/AccountTagDerivationMode";
+
+import type { StepProps } from "~/renderer/modals/Receive/Body";
+import type { AccountLike } from "@ledgerhq/live-common/lib/types";
+
+const QRCodeWrapper = styled.div`
+  border: 24px solid white;
+  height: 208px;
+  width: 208px;
+  background: white;
+`;
+
+const Receive1ShareAddress = ({
+  account,
+  name,
+  address,
+  showQRCodeModal,
+}: {
+  account: AccountLike,
+  name: string,
+  address: string,
+  showQRCodeModal: () => void,
+}) => {
+  return (
+    <>
+      <Box horizontal alignItems="center" flow={2} mb={4}>
+        <Text style={{ flex: 1 }} ff="Inter|SemiBold" color="palette.text.shade100" fontSize={4}>
+          {name ? (
+            <Box horizontal alignItems="center" flexWrap="wrap">
+              <Ellipsis>
+                <Trans i18nKey="currentAddress.for">
+                  {"Address for "}
+                  <strong>{name}</strong>
+                </Trans>
+              </Ellipsis>
+              <AccountTagDerivationMode account={account} />
+            </Box>
+          ) : (
+            <Trans i18nKey="currentAddress.title" />
+          )}
+        </Text>
+        <LinkShowQRCode onClick={showQRCodeModal} address={address} />
+      </Box>
+      <ReadOnlyAddressField address={address} />
+    </>
+  );
+};
+
+const StepReceiveFunds = ({
+  isAddressVerified,
+  account,
+  parentAccount,
+  device,
+  onChangeAddressVerified,
+  transitionTo,
+  onResetSkip,
+  verifyAddressError,
+  token,
+  onClose,
+  eventType,
+  currencyName,
+}: StepProps) => {
+  const mainAccount = account ? getMainAccount(account, parentAccount) : null;
+  invariant(account && mainAccount, "No account given");
+  const name = token ? token.name : getAccountName(account);
+  const initialDevice = useRef(device);
+  const address = mainAccount.hederaResources?.accountId?.toString() ?? mainAccount.freshAddress;
+  const [modalVisible, setModalVisible] = useState(false);
+
+  const hideQRCodeModal = useCallback(() => setModalVisible(false), [setModalVisible]);
+  const showQRCodeModal = useCallback(() => setModalVisible(true), [setModalVisible]);
+
+  const onVerify = useCallback(() => {
+    // if device has changed since the beginning, we need to re-entry device
+    if (device !== initialDevice.current || !isAddressVerified) {
+      transitionTo("device");
+    }
+    onChangeAddressVerified(null);
+    onResetSkip();
+  });
+
+  return (
+    <>
+      <Box px={2}>
+        <TrackPage
+          category={`Receive Flow${eventType ? ` (${eventType})` : ""}`}
+          name="Step 3"
+          currencyName={currencyName}
+        />
+        {verifyAddressError ? (
+          <ErrorDisplay error={verifyAddressError} onRetry={onVerify} />
+        ) : device ? (
+          // verification with device
+          <>
+            <Receive1ShareAddress
+              account={mainAccount}
+              name={name}
+              address={address}
+              showQRCodeModal={showQRCodeModal}
+            />
+
+            {/* show warning for unverified address */}
+            <Alert type="security" mt={4}>
+              <Trans i18nKey="hedera.currentAddress.messageIfVirtual" values={{ name }} />
+            </Alert>
+          </>
+        ) : null // should not happen
+        }
+      </Box>
+
+      <Modal isOpened={modalVisible} onClose={hideQRCodeModal} centered width={460}>
+        <ModalBody
+          onClose={hideQRCodeModal}
+          render={() => (
+            <Box alignItems="center">
+              <QRCodeWrapper>
+                <QRCode size={160} data={address} />
+              </QRCodeWrapper>
+              <Box mt={6}>
+                <ReadOnlyAddressField address={address} />
+              </Box>
+            </Box>
+          )}
+        />
+      </Modal>
+    </>
+  );
+};
+
+export default StepReceiveFunds;

src/renderer/modals/AddAccounts/steps/StepImport.js

@@ -30,6 +30,7 @@ import Switch from "~/renderer/components/Switch";
 import type { StepProps } from "..";
 import InfoCircle from "~/renderer/icons/InfoCircle";
 import ToolTip from "~/renderer/components/Tooltip";
+import byFamily from "~/renderer/generated/NoAssociatedAccounts";
 
 // $FlowFixMe
 const remapTransportError = (err: mixed, appName: string): Error => {
@@ -277,24 +278,34 @@ class StepImport extends PureComponent<StepProps, { showAllCreatedAccounts: bool
         : [preferredNewAccountScheme],
     });
 
-    const emptyTexts = {
-      importable: t("addAccounts.noAccountToImport", { currencyName }),
-
-      creatable: alreadyEmptyAccount ? (
+    let creatable;
+    const NoAssociatedAccounts = byFamily[currency.family];
+    if (alreadyEmptyAccount) {
+      creatable = (
         <Trans i18nKey="addAccounts.createNewAccount.noOperationOnLastAccount" parent="div">
           {" "}
           <Text ff="Inter|SemiBold" color="palette.text.shade100">
             {alreadyEmptyAccount.name}
           </Text>{" "}
         </Trans>
-      ) : (
+      );
+    } else if (NoAssociatedAccounts) {
+      // custom family UI for "no associated accounts"
+      creatable = <NoAssociatedAccounts {...this.props} />;
+    } else {
+      creatable = (
         <Trans i18nKey="addAccounts.createNewAccount.noAccountToCreate" parent="div">
           {" "}
           <Text ff="Inter|SemiBold" color="palette.text.shade100">
             {currencyName}
           </Text>{" "}
         </Trans>
-      ),
+      );
+    }
+
+    const emptyTexts = {
+      importable: t("addAccounts.noAccountToImport", { currencyName }),
+      creatable,
     };
 
     return (

src/renderer/modals/Receive/steps/StepReceiveFunds.js

@@ -30,6 +30,7 @@ import ModalBody from "~/renderer/components/Modal/ModalBody";
 import QRCode from "~/renderer/components/QRCode";
 import { getEnv } from "@ledgerhq/live-common/lib/env";
 import AccountTagDerivationMode from "~/renderer/components/AccountTagDerivationMode";
+import byFamily from "~/renderer/generated/StepReceiveFunds";
 
 const Separator = styled.div`
   border-top: 1px solid #99999933;
@@ -123,22 +124,25 @@ const Receive2Device = ({
   );
 };
 
-const StepReceiveFunds = ({
-  isAddressVerified,
-  account,
-  parentAccount,
-  device,
-  onChangeAddressVerified,
-  transitionTo,
-  onResetSkip,
-  verifyAddressError,
-  token,
-  onClose,
-  eventType,
-  currencyName,
-}: StepProps) => {
+const StepReceiveFunds = (props: StepProps) => {
+  const {
+    isAddressVerified,
+    account,
+    parentAccount,
+    device,
+    onChangeAddressVerified,
+    transitionTo,
+    onResetSkip,
+    verifyAddressError,
+    token,
+    onClose,
+    eventType,
+    currencyName,
+  } = props;
+
   const mainAccount = account ? getMainAccount(account, parentAccount) : null;
   invariant(account && mainAccount, "No account given");
+
   const name = token ? token.name : getAccountName(account);
   const initialDevice = useRef(device);
   const address = mainAccount.freshAddress;
@@ -190,6 +194,12 @@ const StepReceiveFunds = ({
     }
   }, [isAddressVerified, confirmAddress]);
 
+  // custom family UI for StepReceiveFunds
+  const CustomStepReceiveFunds = byFamily[mainAccount.currency.family];
+  if (CustomStepReceiveFunds) {
+    return <CustomStepReceiveFunds {...props} />;
+  }
+
   return (
     <>
       <Box px={2}>

static/i18n/en/app.json

@@ -4342,5 +4342,15 @@
     "memo": "Memo",
     "memoPlaceholder": "Optional",
     "memoWarningText": "When using a memo, carefully check the information with the recipient"
+  },
+  "hedera": {
+    "name": "hedera",
+    "createHederaAccountHelp": {
+      "text": "Please refer to this support article for",
+      "link": "how to create a Hedera account"
+    },
+    "currentAddress": {
+      "messageIfVirtual": "Your {{name}} address cannot be confirmed on your Ledger device. Use at your own risk."
+    }
   }
 }