react-bootstrap#ModalBody JavaScript Examples

The following examples show how to use react-bootstrap#ModalBody. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: index.jsx    From nightfall_3 with Creative Commons Zero v1.0 Universal 4 votes vote down vote up 
TransferModal = ({ show, handleClose, transferValue, txType, triggerTx, setReadyTx }) => {
  return (
    <Modal contentClassName="modalFather" show={show} onHide={handleClose}>
      <Modal.Header closeButton>
        <div className="modalTitle">Confirm transaction</div>
      </Modal.Header>
      <ModalBody>
        <MyModalBody>
          <div className="tokenDetails">
            <div className="tokenDetails__img">
              <img src={matic} alt="Token" />
            </div>
            <TokenDetailsVal id="Bridge_modal_tokenAmount">
              {
                Number(transferValue)
                  .toString()
                  .match(/^-?\d+(?:\.\d{0,4})?/)[0]
              }
            </TokenDetailsVal>
          </div>

          {/* Buttons */}
          <div>
            <NetworkButtons>
              <Button1>
                <span>{txType === 'deposit' ? 'Ethereum Mainnet' : 'Polygon Nightfall L2'}</span>
              </Button1>
              <MdArrowForwardIos />
              <Button2>
                <span>{txType === 'deposit' ? 'Polygon Nightfall L2' : 'Ethereum Mainnet'}</span>
              </Button2>
            </NetworkButtons>
          </div>
          <Divider />
          <TransferMode>
            <TransferModeTitle>
              <TransferModeTitleMain>Transfer Mode</TransferModeTitleMain>
              <TransferModeTitleLight>
                {txType === 'deposit' ? 'On-Chain' : 'Direct Transfer'}
              </TransferModeTitleLight>
            </TransferModeTitle>
            <TransferModeText>
              <span>Transfer security is provided by the Ethereum miners.</span>
              <span>
                {' '}
                To minimise the risk of chain reorganisations, your transfer will wait for{' '}
              </span>
              <span className="text-primary"> 12 block confirmations</span> before being finalised.
            </TransferModeText>
          </TransferMode>
          <Divider />
          <EstimationFee>
            <EstimationFeeTitle>
              <EstimationFeeTitleMain>Estimated Nightfall Fee</EstimationFeeTitleMain>
              <EstimationFeeTitleLight>Free</EstimationFeeTitleLight>
            </EstimationFeeTitle>
            {txType === 'withdraw' ||
            (txType === 'deposit' &&
              ethereum.chainId === ChainIdMapping[process.env.REACT_APP_MODE].chainId) ? (
              <ContinueTransferButton
                type="button"
                onClick={async () => {
                  handleClose();
                  setReadyTx(await triggerTx());
                }}
              >
                Create Transaction
              </ContinueTransferButton>
            ) : (
              <ContinueTransferButton
                type="button"
                style={{ backgroundColor: 'grey' }}
                onClick={() => {
                  return ethereum.request({
                    method: 'wallet_switchEthereumChain',
                    params: [{ chainId: ChainIdMapping[process.env.REACT_APP_MODE].chainId }], // chainId must be in hexadecimal numbers
                  });
                }}
              >
                Switch to {ChainIdMapping[process.env.REACT_APP_MODE].chainName} For Deposits.
              </ContinueTransferButton>
            )}
          </EstimationFee>
        </MyModalBody>
      </ModalBody>
    </Modal>
  );
}