dappworks

Payout.jsx

import React from "react";
import { useGlobalState, setGlobalState } from "../store";
import { MdAttachMoney } from "react-icons/md";
import { toast } from "react-toastify";
import { payout } from "../services/blockchain";

const Payout = () => {
  const [payoutModal] = useGlobalState("payoutModal");
  const [jobListing] = useGlobalState("jobListing");

  const closeModal = () => {
    setGlobalState("payoutModal", "scale-0");
    setGlobalState("jobListing", null);
  };

  const handlePayout = async () => {
    await toast.promise(
      new Promise(async (resolve, reject) => {
        await payout(jobListing.id)
          .then(async () => {
            closeModal();
            resolve();
          })
          .catch(() => reject());
      }),
      {
        pending: "Approve transaction...",
        success: "payment successfully 👌",
        error: "Encountered error 🤯",
      }
    );
  };

  return (
    <div
      className={`fixed top-0 left-0 w-screen h-screen flex items-center justify-center
    bg-black bg-opacity-50 transform z-50 transition-transform duration-300 ${payoutModal}`}
    >
      <div className="bg-white text-black rounded-xl w-11/12 md:w-2/5 h-7/12 px-6 py-3">
        <div className="relative">
          <div>
            <div className="text-center flex justify-center items-center p-2 my-3">
              <MdAttachMoney className="text-3xl text-blue-600" />
            </div>
            <p className="text-center my-1">
              Are you sure, you want to initiate this payment?
            </p>
            <div className="flex justify-between items-center mt-5">
              <button
                onClick={closeModal}
                className="py-1 px-4 bg-green-600 text-white rounded-md"
              >
                Cancel
              </button>
              <button
                onClick={handlePayout}
                className="py-1 px-4 bg-blue-600 text-white rounded-md"
              >
                Proceed
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Payout;