From e9117361e40b18b65a6f6090b95451b73aab191f Mon Sep 17 00:00:00 2001
From: konoart <konoart@solana.com>
Date: Thu, 11 Nov 2021 21:11:51 +0100
Subject: [PATCH] solana: add backbone for opt in flow

---
 .../families/solana/OptInFlowModal/Body.js    | 207 ++++++++++++++++++
 .../OptInFlowModal/fields/SplTokenSelector.js |  83 +++++++
 .../families/solana/OptInFlowModal/index.js   |  49 +++++
 .../solana/OptInFlowModal/steps/StepAsset.js  |  96 ++++++++
 .../OptInFlowModal/steps/StepConfirmation.js  | 136 ++++++++++++
 .../families/solana/OptInFlowModal/types.js   |  35 +++
 src/renderer/families/solana/TokenList.js     |  34 +++
 src/renderer/modals/index.js                  |   3 +
 8 files changed, 643 insertions(+)
 create mode 100644 src/renderer/families/solana/OptInFlowModal/Body.js
 create mode 100644 src/renderer/families/solana/OptInFlowModal/fields/SplTokenSelector.js
 create mode 100644 src/renderer/families/solana/OptInFlowModal/index.js
 create mode 100644 src/renderer/families/solana/OptInFlowModal/steps/StepAsset.js
 create mode 100644 src/renderer/families/solana/OptInFlowModal/steps/StepConfirmation.js
 create mode 100644 src/renderer/families/solana/OptInFlowModal/types.js
 create mode 100644 src/renderer/families/solana/TokenList.js

diff --git a/src/renderer/families/solana/OptInFlowModal/Body.js b/src/renderer/families/solana/OptInFlowModal/Body.js
new file mode 100644
index 0000000000..2af60e6cae
--- /dev/null
+++ b/src/renderer/families/solana/OptInFlowModal/Body.js
@@ -0,0 +1,207 @@
+// @flow
+import invariant from "invariant";
+import React, { useState, useCallback } from "react";
+import { compose } from "redux";
+import { connect, useDispatch } from "react-redux";
+import { Trans, withTranslation } from "react-i18next";
+import { createStructuredSelector } from "reselect";
+import { SyncSkipUnderPriority } from "@ledgerhq/live-common/lib/bridge/react";
+import Track from "~/renderer/analytics/Track";
+
+import { UserRefusedOnDevice } from "@ledgerhq/errors";
+
+import { getAccountBridge } from "@ledgerhq/live-common/lib/bridge";
+import useBridgeTransaction from "@ledgerhq/live-common/lib/bridge/useBridgeTransaction";
+
+import type { StepId, StepProps, St } from "./types";
+import type { Account, Operation } from "@ledgerhq/live-common/lib/types";
+import type { TFunction } from "react-i18next";
+import type { Device } from "@ledgerhq/live-common/lib/hw/actions/types";
+
+import { addPendingOperation } from "@ledgerhq/live-common/lib/account";
+import { updateAccountWithUpdater } from "~/renderer/actions/accounts";
+
+import { getCurrentDevice } from "~/renderer/reducers/devices";
+import { closeModal, openModal } from "~/renderer/actions/modals";
+
+import Stepper from "~/renderer/components/Stepper";
+import StepAsset, { StepAssetFooter } from "./steps/StepAsset";
+import GenericStepConnectDevice from "~/renderer/modals/Send/steps/GenericStepConnectDevice";
+import StepConfirmation, { StepConfirmationFooter } from "./steps/StepConfirmation";
+import logger from "~/logger/logger";
+
+type OwnProps = {|
+  stepId: StepId,
+  onClose: () => void,
+  onChangeStepId: StepId => void,
+  params: {
+    account: Account,
+    parentAccount: ?Account,
+  },
+  name: string,
+|};
+
+type StateProps = {|
+  t: TFunction,
+  device: ?Device,
+  accounts: Account[],
+  device: ?Device,
+  closeModal: string => void,
+  openModal: string => void,
+|};
+
+type Props = OwnProps & StateProps;
+
+const steps: Array<St> = [
+  {
+    id: "assets",
+    label: <Trans i18nKey="solana.optIn.flow.steps.assets.title" />,
+    component: StepAsset,
+    noScroll: true,
+    footer: StepAssetFooter,
+  },
+  {
+    id: "connectDevice",
+    label: <Trans i18nKey="solana.optIn.flow.steps.connectDevice.title" />,
+    component: GenericStepConnectDevice,
+    onBack: ({ transitionTo }: StepProps) => transitionTo("assets"),
+  },
+  {
+    id: "confirmation",
+    label: <Trans i18nKey="solana.optIn.flow.steps.confirmation.title" />,
+    component: StepConfirmation,
+    footer: StepConfirmationFooter,
+  },
+];
+
+const mapStateToProps = createStructuredSelector({
+  device: getCurrentDevice,
+});
+
+const mapDispatchToProps = {
+  closeModal,
+  openModal,
+};
+
+const Body = ({
+  t,
+  stepId,
+  device,
+  closeModal,
+  openModal,
+  onChangeStepId,
+  params,
+  name,
+}: Props) => {
+  const [optimisticOperation, setOptimisticOperation] = useState(null);
+  const [transactionError, setTransactionError] = useState(null);
+  const [signed, setSigned] = useState(false);
+  const dispatch = useDispatch();
+
+  const {
+    transaction,
+    setTransaction,
+    updateTransaction,
+    account,
+    parentAccount,
+    status,
+    bridgeError,
+    bridgePending,
+  } = useBridgeTransaction(() => {
+    const { account } = params;
+
+    invariant(account, "solana: account required");
+
+    const bridge = getAccountBridge(account, undefined);
+
+    const transaction = bridge.createTransaction(account);
+
+    return { account, parentAccount: undefined, transaction };
+  });
+
+  const handleCloseModal = useCallback(() => {
+    closeModal(name);
+  }, [closeModal, name]);
+
+  const handleStepChange = useCallback(e => onChangeStepId(e.id), [onChangeStepId]);
+
+  const handleRetry = useCallback(() => {
+    setTransactionError(null);
+    onChangeStepId("assets");
+  }, [onChangeStepId]);
+
+  const handleTransactionError = useCallback((error: Error) => {
+    if (!(error instanceof UserRefusedOnDevice)) {
+      logger.critical(error);
+    }
+    setTransactionError(error);
+  }, []);
+
+  const handleOperationBroadcasted = useCallback(
+    (optimisticOperation: Operation) => {
+      if (!account) return;
+      dispatch(
+        updateAccountWithUpdater(account.id, account =>
+          addPendingOperation(account, optimisticOperation),
+        ),
+      );
+      setOptimisticOperation(optimisticOperation);
+      setTransactionError(null);
+    },
+    [account, dispatch],
+  );
+
+  const error = transactionError || bridgeError || status.errors.amount;
+  const warning = status.warnings ? Object.values(status.warnings)[0] : null;
+
+  const errorSteps = [];
+
+  if (transactionError) {
+    errorSteps.push(2);
+  } else if (bridgeError) {
+    errorSteps.push(0);
+  }
+
+  const stepperProps = {
+    title: t("solana.optIn.flow.title"),
+    device,
+    account,
+    parentAccount,
+    transaction,
+    signed,
+    stepId,
+    steps,
+    errorSteps,
+    disabledSteps: [],
+    hideBreadcrumb: !!error || !!warning,
+    onRetry: handleRetry,
+    onStepChange: handleStepChange,
+    onClose: handleCloseModal,
+    error,
+    warning,
+    status,
+    optimisticOperation,
+    openModal,
+    setSigned,
+    onChangeTransaction: setTransaction,
+    onUpdateTransaction: updateTransaction,
+    onOperationBroadcasted: handleOperationBroadcasted,
+    onTransactionError: handleTransactionError,
+    t,
+    bridgePending,
+  };
+
+  return (
+    <Stepper {...stepperProps}>
+      <SyncSkipUnderPriority priority={100} />
+      <Track onUnmount event="CloseModalOptIn" />
+    </Stepper>
+  );
+};
+
+const C: React$ComponentType<OwnProps> = compose(
+  connect(mapStateToProps, mapDispatchToProps),
+  withTranslation(),
+)(Body);
+
+export default C;
diff --git a/src/renderer/families/solana/OptInFlowModal/fields/SplTokenSelector.js b/src/renderer/families/solana/OptInFlowModal/fields/SplTokenSelector.js
new file mode 100644
index 0000000000..918365ee70
--- /dev/null
+++ b/src/renderer/families/solana/OptInFlowModal/fields/SplTokenSelector.js
@@ -0,0 +1,83 @@
+// @flow
+import React, { useState, useMemo } from "react";
+import { Trans } from "react-i18next";
+
+import type { TokenCurrency } from "@ledgerhq/live-common/lib/types";
+
+import { listTokensForCryptoCurrency } from "@ledgerhq/live-common/lib/currencies";
+
+import Box from "~/renderer/components/Box";
+import FirstLetterIcon from "~/renderer/components/FirstLetterIcon";
+import Select from "~/renderer/components/Select";
+import Text from "~/renderer/components/Text";
+import ToolTip from "~/renderer/components/Tooltip";
+import ExclamationCircleThin from "~/renderer/icons/ExclamationCircleThin";
+
+const renderItem = ({
+  data: { id, name },
+  isDisabled,
+  data,
+}: {
+  data: TokenCurrency,
+  isDisabled: boolean,
+}) => {
+  // TODO: make a function for that in common
+  const tokenParts = id.split("/");
+  const mintAddress = tokenParts[2];
+  return (
+    <Box
+      key={id}
+      horizontal
+      alignItems="center"
+      color={isDisabled ? "palette.text.shade40" : "palette.text.shade100"}
+      justifyContent="space-between"
+    >
+      <Box horizontal alignItems="center" justifyContent="flex-start">
+        <FirstLetterIcon
+          color={isDisabled ? "palette.text.shade40" : "palette.text.shade100"}
+          label={name}
+          mr={2}
+        />
+        <Text ff="Inter|Medium">{name}</Text>
+        <Text fontSize={3} color="palette.text.shade40">
+          - Token {mintAddress}
+        </Text>
+      </Box>
+      {isDisabled && (
+        <ToolTip content={<Trans i18nKey="solana.optIn.flow.steps.assets.disabledTooltip" />}>
+          <Box color="warning">
+            <ExclamationCircleThin size={16} />
+          </Box>
+        </ToolTip>
+      )}
+    </Box>
+  );
+};
+
+export default function DelegationSelectorField({ account, transaction, t, onChange }: *) {
+  const [query, setQuery] = useState("");
+  const subAccounts = account.subAccounts;
+  const options = listTokensForCryptoCurrency(account.currency);
+  const value = useMemo(() => options.find(({ id }) => id === transaction.assetId), [
+    options,
+    transaction,
+  ]);
+
+  return (
+    <Box flow={1} mb={4}>
+      <Select
+        value={value}
+        options={options}
+        getOptionValue={({ name }) => name}
+        isOptionDisabled={({ id }) => subAccounts.some(({ token }) => token.id === id)}
+        renderValue={renderItem}
+        renderOption={renderItem}
+        onInputChange={setQuery}
+        inputValue={query}
+        placeholder={t("solana.optIn.flow.steps.assets.selectLabel")}
+        noOptionsMessage={({ inputValue }) => t("common.selectNoResults", { query: inputValue })}
+        onChange={onChange}
+      />
+    </Box>
+  );
+}
diff --git a/src/renderer/families/solana/OptInFlowModal/index.js b/src/renderer/families/solana/OptInFlowModal/index.js
new file mode 100644
index 0000000000..5fd50de903
--- /dev/null
+++ b/src/renderer/families/solana/OptInFlowModal/index.js
@@ -0,0 +1,49 @@
+// @flow
+
+import React, { PureComponent } from "react";
+import Modal from "~/renderer/components/Modal";
+import Body from "./Body";
+import type { StepId } from "./types";
+type State = {
+  stepId: StepId,
+};
+
+const INITIAL_STATE = {
+  stepId: "assets",
+};
+
+class OptInModal extends PureComponent<{ name: string }, State> {
+  state = INITIAL_STATE;
+
+  handleReset = () => this.setState({ ...INITIAL_STATE });
+
+  handleStepChange = (stepId: StepId) => this.setState({ stepId });
+
+  render() {
+    const { stepId } = this.state;
+    const { name } = this.props;
+
+    const isModalLocked = ["connectDevice", "confirmation"].includes(stepId);
+
+    return (
+      <Modal
+        name={name}
+        centered
+        refocusWhenChange={stepId}
+        onHide={this.handleReset}
+        preventBackdropClick={isModalLocked}
+        render={({ onClose, data }) => (
+          <Body
+            stepId={stepId}
+            name={name}
+            onClose={onClose}
+            onChangeStepId={this.handleStepChange}
+            params={data || {}}
+          />
+        )}
+      />
+    );
+  }
+}
+
+export default OptInModal;
diff --git a/src/renderer/families/solana/OptInFlowModal/steps/StepAsset.js b/src/renderer/families/solana/OptInFlowModal/steps/StepAsset.js
new file mode 100644
index 0000000000..f1db41dfe6
--- /dev/null
+++ b/src/renderer/families/solana/OptInFlowModal/steps/StepAsset.js
@@ -0,0 +1,96 @@
+// @flow
+import invariant from "invariant";
+import React, { useCallback } from "react";
+import { Trans } from "react-i18next";
+
+import type { StepProps } from "../types";
+
+import { getAccountBridge } from "@ledgerhq/live-common/lib/bridge";
+
+import TrackPage from "~/renderer/analytics/TrackPage";
+import Box from "~/renderer/components/Box";
+import Button from "~/renderer/components/Button";
+
+import ErrorBanner from "~/renderer/components/ErrorBanner";
+import AccountFooter from "~/renderer/modals/Send/AccountFooter";
+import Alert from "~/renderer/components/Alert";
+
+import SplTokenSelector from "../fields/SplTokenSelector";
+
+export default function StepAsset({
+  account,
+  parentAccount,
+  onUpdateTransaction,
+  transaction,
+  status,
+  bridgePending,
+  warning,
+  error,
+  t,
+}: StepProps) {
+  invariant(account && transaction, "account and transaction required");
+  const bridge = getAccountBridge(account, parentAccount);
+
+  const onUpdateToken = useCallback(
+    ({ id: tokenId }) => {
+      onUpdateTransaction(transaction =>
+        bridge.updateTransaction(transaction, {
+          state: {
+            kind: "unprepared",
+            mode: {
+              kind: "token.createAssociatedTokenAccount",
+              tokenId,
+            },
+          },
+        }),
+      );
+    },
+    [bridge, onUpdateTransaction],
+  );
+
+  return (
+    <Box flow={1}>
+      <TrackPage category="OptIn Flow" name="Step 1" />
+      {warning && !error ? <ErrorBanner error={warning} warning /> : null}
+      {error ? <ErrorBanner error={error} /> : null}
+      <SplTokenSelector
+        transaction={transaction}
+        account={account}
+        t={t}
+        onChange={onUpdateToken}
+      />
+      <Alert type="primary">
+        <Trans i18nKey="solana.optIn.flow.steps.assets.info" />
+      </Alert>
+    </Box>
+  );
+}
+
+export function StepAssetFooter({
+  transitionTo,
+  account,
+  parentAccount,
+  onClose,
+  status,
+  bridgePending,
+  transaction,
+}: StepProps) {
+  invariant(account, "account required");
+  const { errors } = status;
+  const hasErrors = Object.keys(errors).length;
+  const canNext = !bridgePending && !hasErrors;
+
+  return (
+    <>
+      <AccountFooter parentAccount={parentAccount} account={account} status={status} />
+      <Box horizontal>
+        <Button mr={1} secondary onClick={onClose}>
+          <Trans i18nKey="common.cancel" />
+        </Button>
+        <Button disabled={!canNext} primary onClick={() => transitionTo("connectDevice")}>
+          <Trans i18nKey="common.continue" />
+        </Button>
+      </Box>
+    </>
+  );
+}
diff --git a/src/renderer/families/solana/OptInFlowModal/steps/StepConfirmation.js b/src/renderer/families/solana/OptInFlowModal/steps/StepConfirmation.js
new file mode 100644
index 0000000000..2b9c433fa2
--- /dev/null
+++ b/src/renderer/families/solana/OptInFlowModal/steps/StepConfirmation.js
@@ -0,0 +1,136 @@
+// @flow
+
+import React, { useMemo } from "react";
+import { Trans } from "react-i18next";
+import styled, { withTheme } from "styled-components";
+
+import { listTokensForCryptoCurrency } from "@ledgerhq/live-common/lib/currencies";
+import { SyncOneAccountOnMount } from "@ledgerhq/live-common/lib/bridge/react";
+import TrackPage from "~/renderer/analytics/TrackPage";
+import type { ThemedComponent } from "~/renderer/styles/StyleProvider";
+import Box from "~/renderer/components/Box";
+import Button from "~/renderer/components/Button";
+import RetryButton from "~/renderer/components/RetryButton";
+import ErrorDisplay from "~/renderer/components/ErrorDisplay";
+import SuccessDisplay from "~/renderer/components/SuccessDisplay";
+import BroadcastErrorDisclaimer from "~/renderer/components/BroadcastErrorDisclaimer";
+import { OperationDetails } from "~/renderer/drawers/OperationDetails";
+import { setDrawer } from "~/renderer/drawers/Provider";
+
+import type { StepProps } from "../types";
+
+const Container: ThemedComponent<{ shouldSpace?: boolean }> = styled(Box).attrs(() => ({
+  alignItems: "center",
+  grow: true,
+  color: "palette.text.shade100",
+}))`
+  justify-content: ${p => (p.shouldSpace ? "space-between" : "center")};
+`;
+
+function StepConfirmation({
+  account,
+  t,
+  optimisticOperation,
+  error,
+  device,
+  signed,
+  transaction,
+}: StepProps) {
+  const options = account && listTokensForCryptoCurrency(account.currency);
+  const token = useMemo(
+    () => transaction && options && options.find(({ id }) => id === transaction.assetId),
+    [options, transaction],
+  );
+
+  if (optimisticOperation) {
+    return (
+      <Container>
+        <TrackPage category="ClaimRewards Algorand Flow" name="Step Confirmed" />
+        <SyncOneAccountOnMount priority={10} accountId={optimisticOperation.accountId} />
+        <SuccessDisplay
+          title={
+            <Trans
+              i18nKey={`algorand.optIn.flow.steps.confirmation.success.title`}
+              values={{ token: token?.name }}
+            />
+          }
+          description={
+            <div>
+              <Trans
+                i18nKey={`algorand.optIn.flow.steps.confirmation.success.text`}
+                values={{ token: token?.name }}
+              >
+                <b></b>
+              </Trans>
+            </div>
+          }
+        />
+      </Container>
+    );
+  }
+
+  if (error) {
+    return (
+      <Container shouldSpace={signed}>
+        <TrackPage category="ClaimRewards Algorand Flow" name="Step Confirmation Error" />
+        {signed ? (
+          <BroadcastErrorDisclaimer
+            title={<Trans i18nKey="algorand.optIn.flow.steps.confirmation.broadcastError" />}
+          />
+        ) : null}
+        <ErrorDisplay error={error} withExportLogs />
+      </Container>
+    );
+  }
+
+  return null;
+}
+
+export function StepConfirmationFooter({
+  transitionTo,
+  account,
+  parentAccount,
+  onRetry,
+  error,
+  openModal,
+  onClose,
+  optimisticOperation,
+}: StepProps) {
+  const concernedOperation = optimisticOperation
+    ? optimisticOperation.subOperations && optimisticOperation.subOperations.length > 0
+      ? optimisticOperation.subOperations[0]
+      : optimisticOperation
+    : null;
+
+  return (
+    <Box horizontal alignItems="right">
+      <Button ml={2} onClick={onClose}>
+        <Trans i18nKey="common.close" />
+      </Button>
+      {concernedOperation ? (
+        // FIXME make a standalone component!
+        <Button
+          primary
+          ml={2}
+          event="ClaimRewards Algorand Flow Step 3 View OpD Clicked"
+          onClick={() => {
+            onClose();
+            if (account && concernedOperation) {
+              setDrawer(OperationDetails, {
+                operationId: concernedOperation.id,
+                accountId: account.id,
+                parentId: parentAccount && parentAccount.id,
+              });
+            }
+          }}
+        >
+          <Trans i18nKey="algorand.optIn.flow.steps.confirmation.success.cta" />
+        </Button>
+      ) : error ? (
+        <RetryButton primary ml={2} onClick={onRetry} />
+      ) : null}
+    </Box>
+  );
+}
+
+export default withTheme(StepConfirmation);
diff --git a/src/renderer/families/solana/OptInFlowModal/types.js b/src/renderer/families/solana/OptInFlowModal/types.js
new file mode 100644
index 0000000000..485b033333
--- /dev/null
+++ b/src/renderer/families/solana/OptInFlowModal/types.js
@@ -0,0 +1,35 @@
+// @flow
+import type { TFunction } from "react-i18next";
+import type { Device } from "@ledgerhq/live-common/lib/hw/actions/types";
+import type { Step } from "~/renderer/components/Stepper";
+
+import type { Account, TransactionStatus, Operation } from "@ledgerhq/live-common/lib/types";
+
+import type { Transaction } from "@ledgerhq/live-common/lib/families/solana/types";
+
+export type StepId = "assets" | "connectDevice" | "confirmation";
+
+export type StepProps = {
+  t: TFunction,
+  transitionTo: string => void,
+  device: ?Device,
+  account: ?Account,
+  parentAccount: ?Account,
+  onRetry: void => void,
+  onClose: () => void,
+  openModal: (key: string, config?: any) => void,
+  optimisticOperation: *,
+  error: *,
+  warning: *,
+  signed: boolean,
+  transaction: ?Transaction,
+  status: TransactionStatus,
+  onChangeTransaction: Transaction => void,
+  onUpdateTransaction: ((Transaction) => Transaction) => void,
+  onTransactionError: Error => void,
+  onOperationBroadcasted: Operation => void,
+  setSigned: boolean => void,
+  bridgePending: boolean,
+};
+
+export type St = Step<StepId, StepProps>;
diff --git a/src/renderer/families/solana/TokenList.js b/src/renderer/families/solana/TokenList.js
new file mode 100644
index 0000000000..dffb4db6ef
--- /dev/null
+++ b/src/renderer/families/solana/TokenList.js
@@ -0,0 +1,34 @@
+// @flow
+import React from "react";
+import { Trans } from "react-i18next";
+import { useDispatch } from "react-redux";
+import type { Account } from "@ledgerhq/live-common/lib/types/account";
+
+import { openModal } from "~/renderer/actions/modals";
+
+import Box from "~/renderer/components/Box";
+import IconPlus from "~/renderer/icons/Plus";
+import Button from "~/renderer/components/Button";
+
+const ReceiveButton = ({ account }: { account: Account }) => {
+  const dispatch = useDispatch();
+  const onReceiveClick = () => {
+    dispatch(openModal("MODAL_SOLANA_OPT_IN", { account }));
+  };
+  return (
+    <Button small color="palette.primary.main" onClick={onReceiveClick}>
+      <Box horizontal flow={1} alignItems="center">
+        <IconPlus size={12} />
+        <Box>
+          {/* TODO: solana switch to solana */}
+          <Trans i18nKey="tokensList.solana.cta" />
+        </Box>
+      </Box>
+    </Button>
+  );
+};
+
+export default {
+  ReceiveButton,
+  hasSpecificTokenWording: true,
+};
diff --git a/src/renderer/modals/index.js b/src/renderer/modals/index.js
index 7dba6c03eb..4f49eb445d 100644
--- a/src/renderer/modals/index.js
+++ b/src/renderer/modals/index.js
@@ -57,6 +57,8 @@ import MODAL_POLKADOT_BOND from "../families/polkadot/BondFlowModal";
 import MODAL_POLKADOT_UNBOND from "../families/polkadot/UnbondFlowModal";
 import MODAL_POLKADOT_REBOND from "../families/polkadot/RebondFlowModal";
 
+import MODAL_SOLANA_OPT_IN from "../families/solana/OptInFlowModal";
+
 // Lending
 import MODAL_LEND_MANAGE from "../screens/lend/modals/ManageLend";
 import MODAL_LEND_ENABLE_INFO from "../screens/lend/modals/EnableInfoModal";
@@ -117,6 +119,7 @@ const modals: { [_: string]: React$ComponentType<any> } = {
   MODAL_POLKADOT_REBOND,
   MODAL_FULL_NODE,
   MODAL_RECOVERY_SEED_WARNING,
+  MODAL_SOLANA_OPT_IN,
   // Lending
   MODAL_LEND_MANAGE,
   MODAL_LEND_ENABLE_INFO,