app.jsx

import React from "react";
import { InputGroup, FormControl, Form, Button, Modal } from "react-bootstrap";
import Wallet from "./modal/Wallet";

import "./modal/Modal.css";

class Swap extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      modal: false,
      modal1: false,
      val: "",
      val1: "",
      wallet: false,
    };
    this.myRef = React.createRef();
    this.myRef1 = React.createRef();
    this.handleInput = this.handleInput.bind(this);
    this.handleInput1 = this.handleInput1.bind(this);
  }

  componentDidUpdate() {
    const { modal } = this.state.modal;
    const { modal1 } = this.state.modal1;
    if (modal) {
      this.myRef.current.focus();
    }
    if (modal1) {
      this.myRef1.current.focus();
    }
  }

  handleInput = (e) => {
    this.setState({
      val: e.target.value.replace(/\D/, ""),
    });
  };
  handleInput1 = (e) => {
    this.setState({
      val1: e.target.value.replace(/\D/, ""),
    });
  };
  render() {
    return (
      <div className="swap">
        <div className="swap-wrapper">
          <div className="form">
            <div className="label">From</div>
            <div className="form1">
              <InputGroup className="from">
                <FormControl
                  size="lg"
                  value={this.state.val1}
                  onChange={this.handleInput1}
                  className="border-0 shadow-none"
                  placeholder="0.0"
                />
              </InputGroup>
              <Button
                variant="primary"
                className="shadow-none btn"
                onClick={() => this.setState({ modal: true })}
              >
                Select a token
              </Button>

              <Modal
                show={this.state.modal}
                onHide={() => this.setState({ modal: false })}
                dialogClassName="customModal"
              >
                <Modal.Header>
                  <Modal.Title>Select a token </Modal.Title>
                  <InputGroup>
                    <Form.Control
                      ref={this.myRef}
                      className="shadow-none"
                      placeholder="Search name or paste address"
                    />
                  </InputGroup>
                  <h6>Token Name</h6>
                </Modal.Header>
                <Modal.Body dialogClassName="class"></Modal.Body>
                <Modal.Footer>GGF default List</Modal.Footer>
              </Modal>
            </div>
          </div>
          <div className="form2">
            <div>
              <div className="label">To</div>
              <InputGroup className="from">
                <Form.Control
                  value={this.state.val}
                  onChange={this.handleInput}
                  name="val"
                  as="input"
                  size="lg"
                  className="shadow-none border-0"
                  placeholder="0.0"
                />
              </InputGroup>
              <Button
                variant="primary"
                className="shadow-none btn"
                onClick={() => this.setState({ modal: true })}
              >
                Select a token
              </Button>

              <Modal
                show={this.state.modal1}
                onHide={() => this.setState({ modal1: false })}
                dialogClassName="customModal"
              >
                <Modal.Header>
                  <Modal.Title>Select a token </Modal.Title>
                  <InputGroup>
                    <Form.Control
                      ref={this.myRef1}
                      className="shadow-none"
                      placeholder="Search name or paste address"
                    />
                  </InputGroup>
                  <h6>Token Name</h6>
                </Modal.Header>
                <Modal.Body dialogClassName="class"></Modal.Body>
                <Modal.Footer>GGF default List</Modal.Footer>
              </Modal>
            </div>
          </div>
          <Wallet name="Connect Wallet" />
        </div>
      </div>
    );
  }
}
export default Swap;