metamask-extension/ui/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.component.js

import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import Button from '../../../../components/ui/button';
import {
  INITIALIZE_END_OF_FLOW_ROUTE,
  INITIALIZE_SEED_PHRASE_ROUTE,
} from '../../../../helpers/constants/routes';
import { EVENT } from '../../../../../shared/constants/metametrics';
import { exportAsFile } from '../../../../../shared/modules/export-utils';
import DraggableSeed from './draggable-seed.component';

const EMPTY_SEEDS = Array(12).fill(null);

export default class ConfirmSeedPhrase extends PureComponent {
  static contextTypes = {
    trackEvent: PropTypes.func,
    t: PropTypes.func,
  };

  static defaultProps = {
    seedPhrase: '',
  };

  static propTypes = {
    history: PropTypes.object,
    seedPhrase: PropTypes.string,
    initializeThreeBox: PropTypes.func,
    setSeedPhraseBackedUp: PropTypes.func,
  };

  state = {
    selectedSeedIndices: [],
    sortedSeedWords: [],
    pendingSeedIndices: [],
    draggingSeedIndex: -1,
    hoveringIndex: -1,
  };

  componentDidMount() {
    const { seedPhrase = '' } = this.props;
    const sortedSeedWords = (seedPhrase.split(' ') || []).sort();
    this.setState({ sortedSeedWords });
  }

  setDraggingSeedIndex = (draggingSeedIndex) =>
    this.setState({ draggingSeedIndex });

  setHoveringIndex = (hoveringIndex) => this.setState({ hoveringIndex });

  onDrop = (targetIndex) => {
    const { selectedSeedIndices, draggingSeedIndex } = this.state;

    const indices = insert(
      selectedSeedIndices,
      draggingSeedIndex,
      targetIndex,
      true,
    );

    this.setState({
      selectedSeedIndices: indices,
      pendingSeedIndices: indices,
      draggingSeedIndex: -1,
      hoveringIndex: -1,
    });
  };

  handleExport = () => {
    exportAsFile('', this.props.seedPhrase, 'text/plain');
  };

  handleSubmit = async () => {
    const { history, setSeedPhraseBackedUp, initializeThreeBox } = this.props;

    if (!this.isValid()) {
      return;
    }

    try {
      this.context.trackEvent({
        category: EVENT.CATEGORIES.ONBOARDING,
        event: 'Verify Complete',
        properties: {
          action: 'Seed Phrase Setup',
          legacy_event: true,
        },
      });

      setSeedPhraseBackedUp(true).then(async () => {
        initializeThreeBox();
        history.replace(INITIALIZE_END_OF_FLOW_ROUTE);
      });
    } catch (error) {
      console.error(error.message);
    }
  };

  handleSelectSeedWord = (index) => {
    this.setState({
      selectedSeedIndices: [...this.state.selectedSeedIndices, index],
      pendingSeedIndices: [...this.state.pendingSeedIndices, index],
    });
  };

  handleDeselectSeedWord = (index) => {
    this.setState({
      selectedSeedIndices: this.state.selectedSeedIndices.filter(
        (i) => index !== i,
      ),
      pendingSeedIndices: this.state.pendingSeedIndices.filter(
        (i) => index !== i,
      ),
    });
  };

  isValid() {
    const { seedPhrase } = this.props;
    const { selectedSeedIndices, sortedSeedWords } = this.state;
    const selectedSeedWords = selectedSeedIndices.map(
      (i) => sortedSeedWords[i],
    );
    return seedPhrase === selectedSeedWords.join(' ');
  }

  render() {
    const { t } = this.context;
    const { history } = this.props;
    const { selectedSeedIndices, sortedSeedWords, draggingSeedIndex } =
      this.state;

    return (
      <div className="confirm-seed-phrase">
        <div className="confirm-seed-phrase__back-button">
          <a
            onClick={(e) => {
              e.preventDefault();
              history.push(INITIALIZE_SEED_PHRASE_ROUTE);
            }}
            href="#"
          >
            {`< ${t('back')}`}
          </a>
        </div>
        <div className="first-time-flow__header">
          {t('confirmSecretBackupPhrase')}
        </div>
        <div className="first-time-flow__text-block">
          {t('selectEachPhrase')}
        </div>
        <div
          className={classnames('confirm-seed-phrase__selected-seed-words', {
            'confirm-seed-phrase__selected-seed-words--dragging':
              draggingSeedIndex > -1,
          })}
        >
          {this.renderPendingSeeds()}
          {this.renderSelectedSeeds()}
        </div>
        <div
          className="confirm-seed-phrase__sorted-seed-words"
          data-testid="seed-phrase-sorted"
        >
          {sortedSeedWords.map((word, index) => {
            const isSelected = selectedSeedIndices.includes(index);

            return (
              <DraggableSeed
                key={index}
                seedIndex={index}
                index={index}
                setHoveringIndex={this.setHoveringIndex}
                onDrop={this.onDrop}
                className="confirm-seed-phrase__seed-word--sorted"
                selected={isSelected}
                onClick={() => {
                  if (isSelected) {
                    this.handleDeselectSeedWord(index);
                  } else {
                    this.handleSelectSeedWord(index);
                  }
                }}
                word={word}
              />
            );
          })}
        </div>
        <Button
          type="primary"
          className="first-time-flow__button"
          onClick={this.handleSubmit}
          disabled={!this.isValid()}
        >
          {t('confirm')}
        </Button>
      </div>
    );
  }

  renderSelectedSeeds() {
    const { sortedSeedWords, selectedSeedIndices, draggingSeedIndex } =
      this.state;
    return EMPTY_SEEDS.map((_, index) => {
      const seedIndex = selectedSeedIndices[index];
      const word = sortedSeedWords[seedIndex];

      return (
        <DraggableSeed
          key={`selected-${seedIndex}-${index}`}
          className="confirm-seed-phrase__selected-seed-words__selected-seed"
          index={index}
          seedIndex={seedIndex}
          word={word}
          draggingSeedIndex={draggingSeedIndex}
          setDraggingSeedIndex={this.setDraggingSeedIndex}
          setHoveringIndex={this.setHoveringIndex}
          onDrop={this.onDrop}
          draggable
        />
      );
    });
  }

  renderPendingSeeds() {
    const {
      pendingSeedIndices,
      sortedSeedWords,
      draggingSeedIndex,
      hoveringIndex,
    } = this.state;

    const indices = insert(
      pendingSeedIndices,
      draggingSeedIndex,
      hoveringIndex,
    );

    return EMPTY_SEEDS.map((_, index) => {
      const seedIndex = indices[index];
      const word = sortedSeedWords[seedIndex];

      return (
        <DraggableSeed
          key={`pending-${seedIndex}-${index}`}
          index={index}
          className={classnames(
            'confirm-seed-phrase__selected-seed-words__pending-seed',
            {
              'confirm-seed-phrase__seed-word--hidden':
                draggingSeedIndex === seedIndex && index !== hoveringIndex,
            },
          )}
          seedIndex={seedIndex}
          word={word}
          draggingSeedIndex={draggingSeedIndex}
          setDraggingSeedIndex={this.setDraggingSeedIndex}
          setHoveringIndex={this.setHoveringIndex}
          onDrop={this.onDrop}
          droppable={Boolean(word)}
        />
      );
    });
  }
}

function insert(list, value, target, removeOld) {
  let nextList = [...list];

  if (typeof list[target] === 'number') {
    nextList = [...list.slice(0, target), value, ...list.slice(target)];
  }

  if (removeOld) {
    nextList = nextList.filter((seed, i) => {
      return seed !== value || i === target;
    });
  }

  return nextList;
}