slate/components/system/modules/CreateToken.js

import * as React from "react";
import * as Constants from "~/common/constants";

import { css } from "@emotion/react";
import { ButtonPrimaryFull } from "~/components/system/components/Buttons";

import Odometer from "~/vendor/odometer";

const STYLES_CREATE_TOKEN = css`
  font-family: ${Constants.font.text};
  box-sizing: border-box;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
  display: block;
  max-width: 480px;
  width: 100%;
`;

const STYLES_CREATE_TOKEN_TOP = css`
  font-family: ${Constants.font.medium};
  background: ${Constants.system.black};
  color: ${Constants.system.white};
  box-sizing: border-box;
  font-size: 12px;
  border-radius: 4px 4px 0 0;
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
`;

const STYLES_CREATE_TOKEN_BOTTOM = css`
  box-sizing: border-box;
  background: ${Constants.system.white};
  border-radius: 0 0 4px 4px;
  padding: 16px;
`;

export const CreateToken = (props) => {
  const [odometer, setOdometer] = React.useState(null);
  const odometerNode = React.useRef(null);

  if (props.token) {
    let hash = props.token.replace(/-/g, "");
    odometer.start({ to: hash });
  }

  React.useEffect(() => {
    const newOdometer = new Odometer({ node: odometerNode.current });

    setOdometer(newOdometer);
  }, []);

  return (
    <div css={STYLES_CREATE_TOKEN}>
      <div css={STYLES_CREATE_TOKEN_TOP}>
        <div ref={odometerNode} />
      </div>
      <div css={STYLES_CREATE_TOKEN_BOTTOM}>
        <ButtonPrimaryFull onClick={props.onClick}>
          Generate new Powergate token
        </ButtonPrimaryFull>
      </div>
    </div>
  );
};