Progress panel

src/components/deposit/Confirming.js

@@ -4,34 +4,37 @@ import PropTypes from "prop-types"
 
 import ConfirmingBase from "../lib/Confirming"
 import { formatSatsToBtc } from "../../utils"
+import DepositPage from "./DepositPage"
 
 const Confirming = ({
   signerFee,
   error,
   requiredConfirmations,
   confirmations,
 }) => (
-  <ConfirmingBase
-    className="pay pay-confirming"
-    stepStatus="3/5"
-    error={error}
-    requiredConfirmations={requiredConfirmations}
-    confirmations={confirmations}
-  >
-    <div>
-      <p>
-        We’ll send you a browser notification when your TBTC is ready to be
-        minted.
-      </p>
-      <p>
-        <i>A watched block never boils.</i>
-      </p>
-    </div>
-    <div className="signer-fee">
-      <span className="signer-fee-label">Signer Fee: </span>
-      {signerFee} BTC*
-    </div>
-  </ConfirmingBase>
+  <DepositPage>
+    <ConfirmingBase
+      className="pay pay-confirming"
+      stepStatus="3/5"
+      error={error}
+      requiredConfirmations={requiredConfirmations}
+      confirmations={confirmations}
+    >
+      <div>
+        <p>
+          We’ll send you a browser notification when your TBTC is ready to be
+          minted.
+        </p>
+        <p>
+          <i>A watched block never boils.</i>
+        </p>
+      </div>
+      <div className="signer-fee">
+        <span className="signer-fee-label">Signer Fee: </span>
+        {signerFee} BTC*
+      </div>
+    </ConfirmingBase>
+  </DepositPage>
 )
 
 Confirming.propTypes = {

src/components/deposit/Congratulations.js

@@ -6,11 +6,12 @@ import PropTypes from "prop-types"
 import StatusIndicator from "../svgs/StatusIndicator"
 import * as tbtcLogoAnimationData from "../animation/tBTC-logo-animate.json"
 import CopyAddressField from "../lib/CopyAddressField"
-import { formatSatsToBtc, getEtherscanUrl } from "../../utils"
+import { getEtherscanUrl, getLotInTbtc } from "../../utils"
+import DepositPage from "./DepositPage"
 
 const Congratulations = ({ depositAddress, lotInTbtc, chainId }) => {
   return (
-    <div className="congratulations">
+    <DepositPage className="congratulations">
       <div className="page-top">
         <StatusIndicator donut fadeIn>
           <Lottie
@@ -48,7 +49,7 @@ const Congratulations = ({ depositAddress, lotInTbtc, chainId }) => {
           </a>
         </div>
       </div>
-    </div>
+    </DepositPage>
   )
 }
 
@@ -58,15 +59,10 @@ Congratulations.propTypes = {
   chainId: PropTypes.number,
 }
 
-const mapStateToProps = (state) => {
-  const { depositAddress, lotInSatoshis, signerFeeInSatoshis } = state.deposit
-  const mintedSatoshis = lotInSatoshis.sub(signerFeeInSatoshis)
-
-  return {
-    depositAddress,
-    lotInTbtc: formatSatsToBtc(mintedSatoshis),
-    chainId: state.tbtc.web3.chainId,
-  }
-}
+const mapStateToProps = (state) => ({
+  depositAddress: state.deposit.depositAddress,
+  lotInTbtc: getLotInTbtc(state),
+  chainId: state.tbtc.web3.chainId,
+})
 
 export default connect(mapStateToProps)(Congratulations)

src/components/deposit/DepositPage.js

@@ -0,0 +1,103 @@
+import React from "react"
+import PropTypes from "prop-types"
+import classNames from "classnames"
+import { connect } from "react-redux"
+
+import ProgressPanel, {
+  Step,
+  StepDetailSuccessOrError,
+} from "../lib/ProgressPanel"
+import { useClickToCopy } from "../hooks"
+import { formatSatsToBtc, getLotInTbtc } from "../../utils"
+
+const DepositPage = ({
+  children,
+  className,
+  completedStepIndex,
+  activeStepIndex,
+  btcAmount,
+  tbtcAmount,
+  btcAddress,
+  btcConfirmingError,
+  proveDepositError,
+}) => {
+  const { isCopied, hiddenCopyFieldRef, handleCopyClick } = useClickToCopy()
+  return (
+    <div className={classNames("page", "deposit-page", className)}>
+      <div className="page-content">{children}</div>
+      <ProgressPanel
+        className="deposit-progress"
+        completedStepIndex={completedStepIndex}
+        activeStepIndex={activeStepIndex}
+      >
+        <Step title="Start" />
+        <Step title="Deposit Size">
+          {btcAmount && tbtcAmount ? (
+            <div>{`${btcAmount} BTC > ${tbtcAmount} TBTC`}</div>
+          ) : (
+            ""
+          )}
+        </Step>
+        <Step title="Send BTC">
+          {btcAddress ? (
+            <>
+              <div className="btc-address-copy-click" onClick={handleCopyClick}>
+                <span>{btcAddress}</span>
+                <button>{isCopied ? "COPIED" : "COPY"}</button>
+              </div>
+              <textarea
+                className="hidden-copy-field"
+                ref={hiddenCopyFieldRef}
+                defaultValue={btcAddress || ""}
+              />
+            </>
+          ) : (
+            ""
+          )}
+        </Step>
+        <Step title="BTC Block Confirmation">
+          <StepDetailSuccessOrError
+            completedStepIndex={completedStepIndex}
+            minCompletedStepIndex={3}
+            error={btcConfirmingError}
+          />
+        </Step>
+        <Step title="Prove Deposit">
+          <StepDetailSuccessOrError
+            completedStepIndex={completedStepIndex}
+            minCompletedStepIndex={4}
+            error={proveDepositError}
+          />
+        </Step>
+        <Step title="Complete" />
+      </ProgressPanel>
+    </div>
+  )
+}
+
+DepositPage.propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node,
+  ]),
+  className: PropTypes.string,
+  completedStepIndex: PropTypes.number,
+  activeStepIndex: PropTypes.number,
+  btcAmount: PropTypes.string,
+  tbtcAmount: PropTypes.string,
+  btcAddress: PropTypes.string,
+  btcConfirmingError: PropTypes.string,
+  proveDepositError: PropTypes.string,
+}
+
+const mapStateToProps = (state) => ({
+  completedStepIndex: state.progressPanel.deposit.completedStepIndex,
+  activeStepIndex: state.progressPanel.deposit.activeStepIndex,
+  btcAmount: formatSatsToBtc(state.deposit.lotInSatoshis),
+  tbtcAmount: getLotInTbtc(state),
+  btcAddress: state.deposit.btcAddress,
+  btcConfirmingError: state.deposit.btcConfirmingError,
+  proveDepositError: state.deposit.proveDepositError,
+})
+
+export default connect(mapStateToProps, null)(DepositPage)

src/components/deposit/GetAddress.js

@@ -4,6 +4,7 @@ import PropTypes from "prop-types"
 
 import Description from "../lib/Description"
 import StatusIndicator from "../svgs/StatusIndicator"
+import DepositPage from "./DepositPage"
 
 const GetAddress = ({ status, error }) => {
   const [statusText, setStatusText] = useState("Generating BTC address...")
@@ -14,7 +15,7 @@ const GetAddress = ({ status, error }) => {
   }, [status])
 
   return (
-    <div className="invoice">
+    <DepositPage className="invoice">
       <div className="page-top">
         <StatusIndicator pulse />
       </div>
@@ -26,7 +27,7 @@ const GetAddress = ({ status, error }) => {
         <hr />
         <Description error={error}>{statusText}</Description>
       </div>
-    </div>
+    </DepositPage>
   )
 }
 

src/components/deposit/Invoice.js

@@ -6,14 +6,15 @@ import PropTypes from "prop-types"
 import { requestADeposit } from "../../actions"
 import Description from "../lib/Description"
 import StatusIndicator from "../svgs/StatusIndicator"
+import DepositPage from "./DepositPage"
 
 const Invoice = ({ requestADeposit, error }) => {
   useEffect(() => {
     requestADeposit()
   }, [requestADeposit])
 
   return (
-    <div className="invoice">
+    <DepositPage className="invoice">
       <div className="page-top">
         <StatusIndicator pulse />
       </div>
@@ -25,7 +26,7 @@ const Invoice = ({ requestADeposit, error }) => {
         <hr />
         <Description error={error}>Initiating...</Description>
       </div>
-    </div>
+    </DepositPage>
   )
 }
 

src/components/deposit/Pay.js

@@ -7,6 +7,7 @@ import { useParams } from "react-router-dom"
 import StatusIndicator from "../svgs/StatusIndicator"
 import CopyAddressField from "../lib/CopyAddressField"
 import Description from "../lib/Description"
+import DepositPage from "./DepositPage"
 
 import { formatSatsToBtc } from "../../utils"
 
@@ -23,7 +24,7 @@ const PayComponent = ({ btcAddress, btcAmount, signerFee, error }) => {
   const btcURL = `bitcoin:${btcAddress}?amount=${btcAmount}&label=Single-Use+tBTC+Deposit+Wallet`
 
   return (
-    <div className="pay">
+    <DepositPage className="pay">
       <div className="page-top">
         <StatusIndicator />
       </div>
@@ -53,7 +54,7 @@ const PayComponent = ({ btcAddress, btcAmount, signerFee, error }) => {
           <CopyAddressField address={btcAddress} qrCodeUrl={btcURL} />
         </Description>
       </div>
-    </div>
+    </DepositPage>
   )
 }
 

src/components/deposit/Prove.js

@@ -5,6 +5,7 @@ import PropTypes from "prop-types"
 
 import Description from "../lib/Description"
 import StatusIndicator from "../svgs/StatusIndicator"
+import DepositPage from "./DepositPage"
 
 function Prove(props) {
   const params = useParams()
@@ -25,7 +26,7 @@ class ProveComponent extends Component {
     const { provingDeposit, error } = this.props
 
     return (
-      <div className="prove">
+      <DepositPage className="prove">
         <div className="page-top">
           <StatusIndicator pulse />
         </div>
@@ -45,7 +46,7 @@ class ProveComponent extends Component {
               : "Finally, let’s submit proof to the sidechain and get you your TBTC."}
           </Description>
         </div>
-      </div>
+      </DepositPage>
     )
   }
 }

src/components/deposit/Start.js

@@ -17,6 +17,7 @@ import BTCLogo from "../svgs/btclogo"
 import { useWeb3React } from "@web3-react/core"
 import LotSizeSelector from "./LotSizeSelector"
 import { formatSatsToBtc } from "../../utils"
+import DepositPage from "./DepositPage"
 
 const handleClickPay = (evt) => {
   evt.preventDefault()
@@ -54,7 +55,7 @@ const Start = ({
   }, [account, requestAvailableLotSizes])
 
   return (
-    <div className="deposit-start">
+    <DepositPage className="deposit-start">
       <div className="page-top">
         <StatusIndicator>
           <BTCLogo height={100} width={100} />
@@ -81,7 +82,7 @@ const Start = ({
           </button>
         </div>
       </div>
-    </div>
+    </DepositPage>
   )
 }
 

src/components/hooks/index.js

@@ -22,11 +22,19 @@ export function useClickToCopy() {
   const [isCopied, setIsCopied] = useState(false)
   const hiddenCopyFieldRef = useRef(null)
 
+  const scheduleReset = () => {
+    clearTimeout(scheduleReset)
+    setTimeout(() => {
+      setIsCopied(false)
+    }, 8000)
+  }
+
   const handleCopyClick = () => {
     hiddenCopyFieldRef.current.select()
     document.execCommand("copy")
     hiddenCopyFieldRef.current.blur()
     setIsCopied(true)
+    scheduleReset()
   }
 
   return { isCopied, setIsCopied, hiddenCopyFieldRef, handleCopyClick }