LIVE-1940 Rework of staking flow for ATOM

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#525116f8c4779ebbac0b5f99d6e24649d5c21e20",
     "@ledgerhq/logs": "6.10.0",
     "@ledgerhq/react-ui": "^0.7.5",
     "@open-wc/webpack-import-meta-loader": "^0.4.7",

src/config/urls.js

@@ -134,7 +134,7 @@ export const urls = {
     "https://support.ledger.com/hc/en-us/articles/360016289919?utm_source=ledger_live_desktop&utm_medium=self_referral&utm_content=polkadot",
   xpubLearnMore:
     "https://support.ledger.com/hc/en-us/articles/360011069619?utm_source=ledger_live_desktop&utm_medium=self_referral&utm_content=edit_account",
-
+  ledgerValidator: "https://www.ledger.com/staking",
   // Banners
   banners: {
     blackfriday:

src/renderer/families/cosmos/ClaimRewardsFlowModal/fields/DelegationSelectorField.js

@@ -3,10 +3,10 @@ import React from "react";
 import { useCosmosDelegationsQuerySelector } from "@ledgerhq/live-common/lib/families/cosmos/react";
 import type { CosmosMappedDelegation } from "@ledgerhq/live-common/lib/families/cosmos/types";
 import Box from "~/renderer/components/Box";
-import FirstLetterIcon from "~/renderer/components/FirstLetterIcon";
 import Label from "~/renderer/components/Label";
 import Select from "~/renderer/components/Select";
 import Text from "~/renderer/components/Text";
+import CosmosLedgerValidatorIcon from "~/renderer/families/cosmos/shared/components/CosmosLedgerValidatorIcon";
 
 const renderItem = ({
   data: { validatorAddress, validator, formattedPendingRewards, status },
@@ -17,8 +17,10 @@ const renderItem = ({
   return (
     <Box key={validatorAddress} horizontal alignItems="center" justifyContent="space-between">
       <Box horizontal alignItems="center">
-        <FirstLetterIcon label={name} mr={2} />
-        <Text ff="Inter|Medium">{name}</Text>
+        <CosmosLedgerValidatorIcon validator={validator} />
+        <Text ml={2} ff="Inter|Medium">
+          {name}
+        </Text>
       </Box>
       <Text ff="Inter|Regular">{formattedPendingRewards}</Text>
     </Box>

src/renderer/families/cosmos/Delegation/Row.js

@@ -25,7 +25,7 @@ import ChevronRight from "~/renderer/icons/ChevronRight";
 import CheckCircle from "~/renderer/icons/CheckCircle";
 import ExclamationCircleThin from "~/renderer/icons/ExclamationCircleThin";
 import ToolTip from "~/renderer/components/Tooltip";
-import FirstLetterIcon from "~/renderer/components/FirstLetterIcon";
+import CosmosLedgerValidatorIcon from "~/renderer/families/cosmos/shared/components/CosmosLedgerValidatorIcon";
 import Text from "~/renderer/components/Text";
 
 const Wrapper: ThemedComponent<*> = styled.div`
@@ -178,7 +178,9 @@ export function Row({
     <Wrapper>
       <Column strong clickable onClick={onExternalLinkClick}>
         <Box mr={2}>
-          <FirstLetterIcon label={name} />
+          <CosmosLedgerValidatorIcon
+            validator={validator ?? { validatorAddress, name: validatorAddress }}
+          />
         </Box>
         <Ellipsis>{name}</Ellipsis>
       </Column>
@@ -233,11 +235,14 @@ export function UnbondingRow({
     onExternalLink,
     validatorAddress,
   ]);
+
   return (
     <Wrapper>
       <Column strong clickable onClick={onExternalLinkClick}>
         <Box mr={2}>
-          <FirstLetterIcon label={name} />
+          <CosmosLedgerValidatorIcon
+            validator={validator ?? { validatorAddress, name: validatorAddress }}
+          />
         </Box>
         <Ellipsis>{name}</Ellipsis>
       </Column>

src/renderer/families/cosmos/Delegation/index.js

@@ -24,6 +24,7 @@ import IconChartLine from "~/renderer/icons/ChartLine";
 import { Header, UnbondingHeader } from "./Header";
 import { Row, UnbondingRow } from "./Row";
 
+import { LEDGER_VALIDATOR_ADDRESS } from "@ledgerhq/live-common/lib/families/cosmos/utils";
 import ToolTip from "~/renderer/components/Tooltip";
 import ClaimRewards from "~/renderer/icons/ClaimReward";
 import DelegateIcon from "~/renderer/icons/Delegate";
@@ -102,9 +103,13 @@ const Delegation = ({ account }: Props) => {
 
   const onExternalLink = useCallback(
     (address: string) => {
-      const URL = explorerView && getAddressExplorer(explorerView, address);
+      if (address === LEDGER_VALIDATOR_ADDRESS) {
+        openURL(urls.ledgerValidator);
+      } else {
+        const srURL = explorerView && getAddressExplorer(explorerView, address);
 
-      if (URL) openURL(URL);
+        if (srURL) openURL(srURL);
+      }
     },
     [explorerView],
   );

src/renderer/families/cosmos/DelegationFlowModal/Body.js

@@ -23,6 +23,9 @@ import { updateAccountWithUpdater } from "~/renderer/actions/accounts";
 
 import { getCurrentDevice } from "~/renderer/reducers/devices";
 import { closeModal, openModal } from "~/renderer/actions/modals";
+import StepAmount, { StepAmountFooter } from "./steps/StepAmount";
+import { LEDGER_VALIDATOR_ADDRESS } from "@ledgerhq/live-common/lib/families/cosmos/utils";
+import { BigNumber } from "bignumber.js";
 
 import Stepper from "~/renderer/components/Stepper";
 import StepDelegation, { StepDelegationFooter } from "./steps/StepDelegation";
@@ -54,17 +57,25 @@ type Props = OwnProps & StateProps;
 
 const steps: Array<St> = [
   {
-    id: "castDelegations",
+    id: "validator",
     label: <Trans i18nKey="cosmos.delegation.flow.steps.validator.title" />,
     component: StepDelegation,
     noScroll: true,
     footer: StepDelegationFooter,
   },
+  {
+    id: "amount",
+    label: <Trans i18nKey="cosmos.delegation.flow.steps.amount.title" />,
+    component: StepAmount,
+    onBack: ({ transitionTo }: StepProps) => transitionTo("validator"),
+    noScroll: true,
+    footer: StepAmountFooter,
+  },
   {
     id: "connectDevice",
     label: <Trans i18nKey="cosmos.delegation.flow.steps.connectDevice.title" />,
     component: GenericStepConnectDevice,
-    onBack: ({ transitionTo }: StepProps) => transitionTo("castDelegations"),
+    onBack: ({ transitionTo }: StepProps) => transitionTo("amount"),
   },
   {
     id: "confirmation",
@@ -118,7 +129,7 @@ const Body = ({
 
     const transaction = bridge.updateTransaction(t, {
       mode: "delegate",
-      validators: [],
+      validators: [{ address: LEDGER_VALIDATOR_ADDRESS, amount: BigNumber(0) }],
       recipient: account.freshAddress,
     });
 
@@ -133,7 +144,7 @@ const Body = ({
 
   const handleRetry = useCallback(() => {
     setTransactionError(null);
-    onChangeStepId("castDelegations");
+    onChangeStepId("validator");
   }, [onChangeStepId]);
 
   const handleTransactionError = useCallback((error: Error) => {
@@ -178,7 +189,7 @@ const Body = ({
     steps,
     errorSteps,
     disabledSteps: [],
-    hideBreadcrumb: !!error && ["castDelegations"].includes(stepId),
+    hideBreadcrumb: !!error && ["validator"].includes(stepId),
     onRetry: handleRetry,
     onStepChange: handleStepChange,
     onClose: handleCloseModal,

src/renderer/families/cosmos/DelegationFlowModal/fields/ValidatorField.js

@@ -0,0 +1,104 @@
+// @flow
+import React, { useState } from "react";
+import type { TFunction } from "react-i18next";
+
+import { getAccountUnit } from "@ledgerhq/live-common/lib/account";
+import { useLedgerFirstShuffledValidatorsCosmos } from "@ledgerhq/live-common/lib/families/cosmos/react";
+
+import styled from "styled-components";
+import Box from "~/renderer/components/Box";
+import Text from "~/renderer/components/Text";
+import ScrollLoadingList from "~/renderer/components/ScrollLoadingList";
+import { Trans } from "react-i18next";
+import IconAngleDown from "~/renderer/icons/AngleDown";
+import ValidatorRow from "~/renderer/families/cosmos/shared/components/ValidatorRow";
+import type { ThemedComponent } from "~/renderer/styles/StyleProvider";
+import type { Account, TransactionStatus } from "@ledgerhq/live-common/lib/types";
+import type {
+  CosmosDelegation,
+  CosmosValidatorItem,
+} from "@ledgerhq/live-common/lib/families/cosmos/types";
+
+type Props = {
+  t: TFunction,
+  account: Account,
+  status: TransactionStatus,
+  delegations: CosmosDelegation[],
+  onChangeValidator: ({ address: string }) => void,
+  chosenVoteAccAddr: string,
+};
+
+const ValidatorField = ({
+  account,
+  status,
+  t,
+  delegations,
+  onChangeValidator,
+  chosenVoteAccAddr,
+}: Props) => {
+  const [showAll, setShowAll] = useState(false);
+  const unit = getAccountUnit(account);
+  const validators = useLedgerFirstShuffledValidatorsCosmos();
+
+  const renderItem = (validator: CosmosValidatorItem, validatorIdx: number) => {
+    return (
+      <ValidatorRow
+        currency={account.currency}
+        key={validator.validatorAddress}
+        validator={validator}
+        unit={unit}
+        active={chosenVoteAccAddr === validator.validatorAddress}
+        onClick={onChangeValidator}
+      ></ValidatorRow>
+    );
+  };
+
+  return (
+    <ValidatorsFieldContainer>
+      <Box p={1}>
+        <ScrollLoadingList
+          data={
+            showAll
+              ? validators
+              : [validators.find(v => v.validatorAddress === chosenVoteAccAddr) || validators[0]]
+          }
+          style={{ flex: showAll ? "1 0 256px" : "1 0 64px", marginBottom: 0, paddingLeft: 0 }}
+          renderItem={renderItem}
+          noResultPlaceholder={null}
+        />
+      </Box>
+      <SeeAllButton expanded={showAll} onClick={() => setShowAll(shown => !shown)}>
+        <Text color="wallet" ff="Inter|SemiBold" fontSize={4}>
+          <Trans i18nKey={showAll ? "distribution.showLess" : "distribution.showAll"} />
+        </Text>
+        <IconAngleDown size={16} />
+      </SeeAllButton>
+    </ValidatorsFieldContainer>
+  );
+};
+
+const ValidatorsFieldContainer: ThemedComponent<{}> = styled(Box)`
+  border: 1px solid ${p => p.theme.colors.palette.divider};
+  border-radius: 4px;
+`;
+
+const SeeAllButton: ThemedComponent<{ expanded: boolean }> = styled.div`
+  display: flex;
+  color: ${p => p.theme.colors.wallet};
+  align-items: center;
+  justify-content: center;
+  border-top: 1px solid ${p => p.theme.colors.palette.divider};
+  height: 40px;
+  cursor: pointer;
+
+  &:hover ${Text} {
+    text-decoration: underline;
+  }
+
+  > :nth-child(2) {
+    margin-left: 8px;
+    transform: rotate(${p => (p.expanded ? "180deg" : "0deg")});
+  }
+`;
+
+export default ValidatorField;