lbry-desktop/ui/js/component/downloadingModal/view.jsx

import React from 'react'
import {
  Modal
} from 'component/modal'
import {Line} from 'rc-progress';
import Link from 'component/link'

class DownloadingModal extends React.Component {
  render() {
    const {
      downloadProgress,
      downloadComplete,
      startUpgrade,
      cancelUpgrade,
    } = this.props

    return (
      <Modal isOpen={true} contentLabel={__("Downloading Update")} type="custom">
        {__("Downloading Update")}{downloadProgress ? `: ${downloadProgress}%` : null}
        <Line percent={downloadProgress ? downloadProgress : 0} strokeWidth="4"/>
        {downloadComplete ? (
           <div>
             <br />
             <p>{__("Click \"Begin Upgrade\" to start the upgrade process.")}</p>
             <p>{__("The app will close, and you will be prompted to install the latest version of LBRY.")}</p>
             <p>{__("After the install is complete, please reopen the app.")}</p>
           </div>
         ) : null }
        <div className="modal__buttons">
          {downloadComplete
            ? <Link button="primary" label={__("Begin Upgrade")} className="modal__button" onClick={startUpgrade} />
            : null}
          <Link button="alt" label={__("Cancel")} className="modal__button" onClick={cancelUpgrade} />
        </div>
      </Modal>
    )
  }
}

export default DownloadingModal