@foreverrbum/ethsign/src/lib/components/Dashboard/ArchiveContract.js

This package will allow you to electronically sign documents within your application

import React, {useEffect } from 'react';
import { FormattedMessage, useIntl } from 'react-intl';
const ArchiveContract = (props) => {
	const { close, doc, loading, handleSubmit, waiting } = props;
	const { formatMessage } = useIntl();

	useEffect(() => {
		let isSubscribed = true;
			if(loading){
				document.getElementById('submit-btn').focus();
			}
		return () => isSubscribed = false;
	}, []);

	return (
		<>
			<div className="border-t-4 border-orange-500 -m-5px p-8 text-left w-50">
				<div className="flex flex-col justify-center relative">
					<div className={`absolute my-auto w-full text-center ${!loading && 'invisible'}`}>
						{waiting ? formatMessage({id: 'WAITING_FOR_CONFIRMATIONS_FROM_NEWWORK'}) : 'Archiving Contract'}
					</div>
					
					<div className={`mb-3 sm:mb-6 ${loading && 'invisible'}`}>
						<FormattedMessage id='ARCHIVE_CONTRACT_YOU_WILL_NOT_BE_ABLE_TO_UNDO_THIS' values={{name: doc.name}}/>
					</div>
					<div className={`flex flex-col sm:flex-row justify-center ${loading && 'invisible'}`}>
						<button onClick={() => close()} type="button" className="w-full sm:w-28 flex-grow-0 font-bold bg-gray-60 focus:outline-none text-gray-40 py-2 rounded-sm  hover:bg-gray-70">
							<FormattedMessage id="CANCEL"/>
						</button>
						<button id="submit-btn" onClick={()=>{handleSubmit()}} className="w-full my-3 sm:my-0 sm:ml-3 sm:w-28 font-bold flex-grow-0 bg-orange-500 focus:outline-none text-gray-40  py-2 rounded-sm  hover:bg-orange-600">
							<FormattedMessage id="ARCHIVE"/>
						</button>
					</div>
				</div>
			</div>
		</>
	);
}

export default ArchiveContract;