AugurProject/augur-ui

View on GitHub
src/modules/forking/components/forking-content/forking-content.jsx

Summary

Maintainability
B
5 hrs
Test Coverage
import React from "react";
import PropTypes from "prop-types";
import { augur } from "services/augurjs";
import classNames from "classnames";
import { formatAttoRep } from "utils/format-number";
import { convertUnixToFormattedDate, dateHasPassed } from "utils/format-date";
import TimeProgressBar from "modules/reporting/components/time-progress-bar/time-progress-bar";
import { TYPE_MIGRATE_REP } from "modules/markets/constants/link-types";
import MarketLink from "modules/market/components/market-link/market-link";
import { createBigNumber } from "utils/create-big-number";
import Styles from "modules/forking/components/forking-content/forking-content.styles";
import { CUTOFF_URL } from "modules/markets/constants/cutoff-date";

const ForkingContent = ({
  forkingMarket,
  forkEndTime,
  currentTime,
  expanded,
  doesUserHaveRep,
  forkReputationGoal,
  isForkingMarketFinalized,
  finalizeMarket,
  marginLeft,
  pastCutoff
}) => {
  const unixFormattedDate = convertUnixToFormattedDate(forkEndTime);
  const forkWindowActive = !dateHasPassed(
    currentTime * 1000,
    Number(forkEndTime)
  );
  const startTime = createBigNumber(forkEndTime)
    .minus(
      createBigNumber(augur.constants.CONTRACT_INTERVAL.FORK_DURATION_SECONDS)
    )
    .toNumber();
  const threshold = formatAttoRep(forkReputationGoal);

  return (
    <section
      className={classNames(
        Styles.ForkingContent,
        expanded ? Styles.expanded : ""
      )}
    >
      <div
        className={classNames(
          Styles.ForkingContent__container,
          expanded ? Styles.expanded : ""
        )}
        style={{ paddingLeft: marginLeft }}
      >
        <TimeProgressBar
          endTime={parseInt(forkEndTime, 10)}
          currentTime={currentTime}
          startTime={startTime}
          timePeriodLabel="Fork Window"
          forking
        />
        {pastCutoff && (
          <p>
            <span>
              Alert: If you migrate your REP to a child universe, you will never
              be able to migrate your REP to Augur V2.{" "}
              <a
                href={CUTOFF_URL}
                target="_blank"
                rel="noopener noreferrer"
                style={{ textDecoration: "underline" }}
              >
                Read more
              </a>
            </span>
            <br />
            If you want to migrate to a child universe anyway, collect any
            outstanding REP on the Portfolio: Reporting page.{" "}
            {forkWindowActive && (
              <>
                Then, migrate your REP to your chosen child universe. All REP
                migrated during the forking period will receive a 5% bonus. The
                forking period will end on{" "}
                {unixFormattedDate.formattedLocalShort} or when at least{" "}
                {threshold.formatted} REP has been migrated to a single child
                universe. Read more about the forking process{" "}
                <a
                  href="http://docs.augur.net/#fork-state"
                  target="_blank"
                  rel="noopener noreferrer"
                  style={{ textDecoration: "underline" }}
                >
                  here
                </a>
                .
              </>
            )}
            {!forkWindowActive && (
              <>
                Then, migrate to your chosen child universe. The forking period
                has ended. Read more about the forking process{" "}
                <a
                  href="http://docs.augur.net/#fork-state"
                  target="_blank"
                  rel="noopener noreferrer"
                  style={{ textDecoration: "underline" }}
                >
                  here
                </a>
                .
              </>
            )}
          </p>
        )}

        {!pastCutoff &&
          forkWindowActive && (
            <p>
              If you are a REP holder, please collect any outstanding REP on the
              Portfolio: Reporting page. Then, migrate your REP to your chosen
              child universe. All REP migrated during the forking period will
              receive a 5% bonus. The forking period will end on{" "}
              {unixFormattedDate.formattedLocalShort} or when at least{" "}
              {threshold.formatted} REP has been migrated to a single child
              universe. Read more about the forking process{" "}
              <a
                href="http://docs.augur.net/#fork-state"
                target="_blank"
                rel="noopener noreferrer"
                style={{ textDecoration: "underline" }}
              >
                here
              </a>
              .
            </p>
          )}

        {!pastCutoff &&
          !forkWindowActive && (
            <p>
              If you are a REP holder, please collect any outstanding REP on the
              Portfolio: Reporting page. Then, migrate to your chosen child
              universe. The forking period has ended. Read more about the
              forking process{" "}
              <a
                href="http://docs.augur.net/#fork-state"
                target="_blank"
                rel="noopener noreferrer"
                style={{ textDecoration: "underline" }}
              >
                here
              </a>
              .
            </p>
          )}
        <div className={Styles.ForkingContent__buttonBar}>
          {!doesUserHaveRep && (
            <button
              disabled
              className={Styles.ForkingContent__no_rep_migrate_button}
            >
              Migrate REP
            </button>
          )}
          {doesUserHaveRep && (
            <MarketLink
              className={Styles.ForkingContent__migrate_rep_button}
              id={forkingMarket}
              formattedDescription="Migrate REP"
              linkType={TYPE_MIGRATE_REP}
            >
              Migrate REP
            </MarketLink>
          )}
          {!forkWindowActive &&
            !isForkingMarketFinalized && (
              <button
                className={Styles.ForkingContent__migrate_rep_button}
                onClick={() => finalizeMarket(forkingMarket)}
              >
                Finalize
              </button>
            )}
        </div>
      </div>
    </section>
  );
};

ForkingContent.propTypes = {
  finalizeMarket: PropTypes.func.isRequired,
  forkingMarket: PropTypes.string.isRequired,
  forkEndTime: PropTypes.string.isRequired,
  currentTime: PropTypes.number.isRequired,
  expanded: PropTypes.bool.isRequired,
  doesUserHaveRep: PropTypes.bool.isRequired,
  forkReputationGoal: PropTypes.string.isRequired,
  isForkingMarketFinalized: PropTypes.bool,
  marginLeft: PropTypes.number.isRequired,
  pastCutoff: PropTypes.bool
};

ForkingContent.defaultProps = {
  isForkingMarketFinalized: false,
  pastCutoff: false
};

export default ForkingContent;