Added Delete and trasnfer btn

.vscode/settings.json

@@ -0,0 +1 @@
+{}

README.md

@@ -2,7 +2,7 @@
 
 A hobby project inspired by https://andrecronje.medium.com/loot-rarity-d341faa4485c
 
-Summon your warriors and join the world of Rarity Manifested!
+Summon your warriors and join the great world of Rarity Manifested!
 
 Contributors:
 

src/App.css

@@ -993,6 +993,32 @@ select:disabled {
   align-content: center;
 }
 
+.summoner-card-top {
+  display: flex;
+  justify-content: space-between;
+}
+
+.summoner-card-buttons {
+  margin-left: 2px;
+  width: 20%;
+  height: 10%;
+  display: flex;
+  justify-content: space-between;
+}
+
+.summoner-card-delete {
+  cursor: pointer;
+}
+
+.summoner-card-title {
+  width: 80%;
+  text-overflow: ellipsis;
+}
+
+.summoner-card-transfer {
+  cursor: pointer;
+}
+
 .summoners-container {
   display: flex;
   flex-wrap: wrap;

src/Modal.css

@@ -43,6 +43,46 @@
   text-align: right;
 }
 
+.content-trasnfer {
+  padding: 10px;
+  display: flex;
+  justify-content: space-between;
+  align-content: center;
+}
+
+.content-trasnfer-info {
+  height: 80px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-around;
+}
+
+.modal-header-summoner {
+  text-align: center;
+  font-size: 25px;
+  width: auto;
+  height: auto;
+  color: white;
+}
+
+.content-transfer-info-input {
+  text-align: center;
+  width: 350px;
+  padding: 10px;
+  padding-inline: 10px;
+  margin-left: 5px;
+  text-overflow: ellipsis;
+  background: rgb(12, 12, 12);
+  color: white;
+  outline: none;
+  margin: 0 0 1rem;
+}
+
+.content-transfer-info-input:focus {
+  border: 1px solid #bf9b30;
+}
+
 .modal-header,
 .modal-footer {
   padding: 10px;
@@ -109,3 +149,61 @@
   margin: auto;
   padding: 5px;
 }
+
+.modal-header-notification {
+  text-align: center;
+  margin: 0;
+  font-size: 10px;
+}
+
+.del-button {
+  color: white;
+  background-color: #b10f0f;
+  border-top: 0.1875rem solid #b45757;
+  border-bottom: 0.1875rem solid #7e1414;
+  border-left: 0.1875rem solid #b45757;
+  border-right: 0.1875rem solid #7e1414;
+  padding: 15px 35px;
+  border-radius: 5px;
+  font-family: "cinzel", "Times", "Times New Roman", serif;
+  font-size: 16px;
+}
+
+.del-button:hover {
+  background-color: #b92727;
+}
+
+.transfer-button {
+  color: white;
+  background-color: #ce8a1d;
+  padding: 15px 35px;
+  border-top: 0.1875rem solid #f0d079;
+  border-bottom: 0.1875rem solid #9f4000;
+  border-left: 0.1875rem solid #f0d079;
+  border-right: 0.1875rem solid #9f4000;
+  border-radius: 5px;
+  font-family: "cinzel", "Times", "Times New Roman", serif;
+  font-size: 16px;
+}
+
+.transfer-button:hover {
+  background-color: #e0a546;
+}
+
+.close-button {
+  margin-left: 4.5rem;
+  color: black;
+  border-top: 0.1875rem solid #272422;
+  border-bottom: 0.1875rem solid #959595;
+  border-left: 0.1875rem solid #272422;
+  border-right: 0.1875rem solid #959595;
+  background-color: #615e5e;
+  padding: 15px 35px;
+  border-radius: 5px;
+  font-family: "cinzel", "Times", "Times New Roman", serif;
+  font-size: 16px;
+}
+
+.close-button:hover {
+  background-color: #797777;
+}

src/components/TransferModal.js

@@ -0,0 +1,112 @@
+import { toast } from "react-toastify";
+import { useState } from "react/cjs/react.development";
+
+const TrasnferModal = ({
+  setIsOpenTransferModal,
+  summonerID,
+  walletFrom,
+  summonerName,
+  context,
+}) => {
+  const [transferWallet, setTransferWallet] = useState("");
+
+  const handleCloseTransferModal = (e) => {
+    e.preventDefault();
+    setIsOpenTransferModal(false);
+  };
+
+  const handleTrasnferButton = async (e) => {
+    e.preventDefault();
+    const id = toast.loading("Transfering summoner...");
+    if (!transferWallet) {
+      toast.update(id, {
+        render: `Can't transfer to an empty name!`,
+        type: "error",
+        isLoading: false,
+        autoClose: 2000,
+      });
+      setIsOpenTransferModal(false);
+      return;
+    }
+    try {
+      await context.contract_base.methods
+        .safeTransferFrom(walletFrom, transferWallet, summonerID)
+        .send({
+          from: walletFrom,
+          to: transferWallet,
+        });
+      setIsOpenTransferModal(false);
+      toast.update(id, {
+        render: `Transfer done to ${transferWallet}}`,
+        type: "success",
+        isLoading: false,
+        autoClose: 3000,
+      });
+    } catch (ex) {
+      setIsOpenTransferModal(false);
+      toast.update(id, {
+        render: `Something went wrong! Try Again in a few seconds!`,
+        type: "error",
+        isLoading: false,
+        autoClose: 3000,
+      });
+    }
+  };
+
+  return (
+    <div className="modal">
+      <div className="modal-content">
+        <div className="modal-header">
+          <p>You are going to transfer: </p>
+          <div className="modal-header-summoner">
+            {"  " + summonerID} {" - " + summonerName}
+          </div>
+        </div>
+        <div className="modal-body">
+          <div className="content-trasnfer">
+            <div className="content-trasnfer-info">
+              <label htmlFor="from">From:</label>
+              <input
+                id="inputFrom"
+                className="content-transfer-info-input"
+                type="text"
+                name="from"
+                value={walletFrom}
+                disabled
+              />
+            </div>
+
+            <div className="content-trasnfer-info">
+              <label htmlFor="to">To:</label>
+              <input
+                data-for="test"
+                data-tip=""
+                placeholder="Wallet adress"
+                className="content-transfer-info-input"
+                type="text"
+                onChange={(e) => setTransferWallet(e.target.value)}
+                name="to"
+              />
+            </div>
+          </div>
+        </div>
+        <div style={{ textAlign: "center" }}>
+          <button
+            className="transfer-button"
+            onClick={(e) => handleTrasnferButton(e)}
+          >
+            Transfer
+          </button>
+          <button
+            className="close-button"
+            onClick={(e) => handleCloseTransferModal(e)}
+          >
+            Cancel
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TrasnferModal;