{"size": 2710, "ext": "js", "max_stars_repo_path": "src/components/musician/TransferTokenModal.js", "max_stars_repo_name": "electrone901/fundmymusician", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/musician/TransferTokenModal.js", "max_issues_repo_name": "electrone901/fundmymusician", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/musician/TransferTokenModal.js", "max_forks_repo_name": "electrone901/fundmymusician", "max_forks_repo_forks_event_min_datetime": "2021-07-16T17:24:16.000Z", "max_forks_repo_forks_event_max_datetime": "2021-07-16T17:24:16.000Z"}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": 1, "avg_line_length": 53.137254902, "max_line_length": 122, "alphanum_fraction": 0.4007380074}
import React from 'react';

const TransferTokenModal = ({ musicianAddress, walletAddress, balance, amount, setAmount, transferToken, loading }) => {
    return(
        <div className="container my-5">
            <div className="modal fade" id="transferTokenModal" tabIndex="-1" role="dialog">
                <div className="modal-dialog modal-dialog-centered" role="document">
                    <div className="modal-content">
                        <div className="modal-header">
                            <button type="button" className="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div className="modal-body">
                            <h3>Send Tokens</h3>
                            <div className="card mb-4">
                                <div className="card-body">
                                    <p className="card-text"><strong>Your wallet adresss:</strong> {walletAddress}</p>
                                    <p className="card-text"><strong>To wallet adresss:</strong> {musicianAddress}</p>
                                    <p className="card-text"><strong>Your token balance:</strong> {balance} FMM Tokens</p>
                                </div>
                            </div>
                            <div className="input-group mb-3">
                                <input
                                    name="amount"
                                    type="number"
                                    className="form-control"
                                    onChange={(e) => setAmount(e.target.value)}
                                    value={amount}/>
                                <div className="input-group-append">
                                    <span className="input-group-text" id="basic-addon2">FMM Tokens</span>
                                </div>
                            </div>
                        </div>
                        <div className="modal-footer">
                            <button type="button" className="btn btn-light" data-dismiss="modal">Cancel</button>
                            <button
                                className="btn btn-primary"
                                onClick={() => transferToken()}
                                disabled={loading}>
                                    {loading ? 'Pending' : 'Send'}
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default TransferTokenModal;