Added request for allowance when clicking like button

luloxi · Dec 15, 2024 · 446c9ea · 446c9ea
1 parent 7df1697
commit 446c9ea
Show file tree

Hide file tree

Showing 9 changed files with 3,198 additions and 14 deletions.
diff --git a/packages/foundry/broadcast/Deploy.s.sol/11155420/run-1734226587.json b/packages/foundry/broadcast/Deploy.s.sol/11155420/run-1734226587.json
diff --git a/packages/foundry/broadcast/Deploy.s.sol/11155420/run-latest.json b/packages/foundry/broadcast/Deploy.s.sol/11155420/run-latest.json
diff --git a/packages/foundry/deployments/11155420.json b/packages/foundry/deployments/11155420.json
@@ -0,0 +1,3 @@
+{
+  "networkName": "Optimism Sepolia"
+}
diff --git a/packages/nextjs/app/create/_components/MintingButtons.tsx b/packages/nextjs/app/create/_components/MintingButtons.tsx
@@ -134,7 +134,7 @@ export const MintingButtons: React.FC<MintingFormProps> = ({ yourJSON, resetForm
         <div className="flex items-center">
           {/* <span>{allowance?.toString()}</span> */}
           <button className="cool-button" disabled={loading} onClick={handleCreatePost}>
-            Create Post
+            Create Post ($3)
           </button>
         </div>
       </div>

diff --git a/packages/nextjs/components/Header.tsx b/packages/nextjs/components/Header.tsx
@@ -45,7 +45,7 @@ export const Header = () => {
           </div> */}
           <span className="items-center justify-center gap-1 ml-4 text-lg text-blue-600 font-bold">
             <Image src="/usdc-logo.png" alt="USDC" width={20} height={20} className="inline-block" />
-            <span>{formattedUsdcBalance}</span>
+            <span className="ml-2">{formattedUsdcBalance}</span>
           </span>
         </div>
         <div className="flex flex-row gap-3 ">
@@ -122,8 +122,8 @@ export const Header = () => {
           <span className="text-blue-600">USDC {usdcBalance}</span>
         </div> */}
 
-        <div className="flex flex-row items-center justify-center gap-3">
-          <span className="hidden lg:flex items-center justify-center gap-1 text-lg text-blue-600 font-bold">
+        <div className="flex flex-row items-center justify-center ">
+          <span className="mr-2 hidden lg:flex items-center justify-center gap-1 text-lg text-blue-600 font-bold">
             <Image src="/usdc-logo.png" alt="USDC" width={20} height={20} className="inline-block" />
             {formattedUsdcBalance}
           </span>

diff --git a/packages/nextjs/components/punk-society/LikedButton.tsx b/packages/nextjs/components/punk-society/LikedButton.tsx
@@ -1,7 +1,10 @@
 import { useEffect, useState } from "react";
+import Image from "next/image";
 // import { parseEther } from "viem";
 import { useAccount } from "wagmi";
-import { useScaffoldReadContract, useScaffoldWriteContract } from "~~/hooks/scaffold-eth";
+import Modal from "~~/components/punk-society/Modal";
+import { InputBase } from "~~/components/scaffold-eth";
+import { useDeployedContractInfo, useScaffoldReadContract, useScaffoldWriteContract } from "~~/hooks/scaffold-eth";
 import { notification } from "~~/utils/scaffold-eth";
 
 interface LikeButtonProps {
@@ -11,9 +14,30 @@ interface LikeButtonProps {
 const LikeButton: React.FC<LikeButtonProps> = ({ postId }) => {
   const [likedPost, setLikedPost] = useState(false);
   const [likeCount, setLikeCount] = useState<number>(0);
+  const [showModal, setShowModal] = useState(false);
+  const [allowanceAmount, setAllowanceAmount] = useState<number>();
 
   const { address: connectedAddress } = useAccount();
   const { writeContractAsync } = useScaffoldWriteContract("PunkSociety");
+  const { writeContractAsync: USDCwriteContractAsync } = useScaffoldWriteContract("MockUSDC");
+
+  const { data: punkSocietyContractData } = useDeployedContractInfo("PunkSociety");
+
+  const { data: allowance } = useScaffoldReadContract({
+    contractName: "MockUSDC",
+    functionName: "allowance",
+    args: [connectedAddress, punkSocietyContractData?.address],
+    watch: true,
+  });
+
+  const { data: balanceOf } = useScaffoldReadContract({
+    contractName: "MockUSDC",
+    functionName: "balanceOf",
+    args: [connectedAddress],
+    watch: true,
+  });
+
+  const formattedUsdcBalance = balanceOf ? (Number(balanceOf.toString()) / 1e6).toFixed(2) : "0.00";
 
   const { data: isLikedPost } = useScaffoldReadContract({
     contractName: "PunkSociety",
@@ -29,12 +53,44 @@ const LikeButton: React.FC<LikeButtonProps> = ({ postId }) => {
     watch: true,
   });
 
+  const handleCloseModal = () => {
+    setShowModal(false);
+  };
+
+  const handleAllowanceChange = async () => {
+    if (!connectedAddress) {
+      notification.error("Please connect your wallet");
+      return;
+    }
+
+    try {
+      const contractResponse = await USDCwriteContractAsync({
+        functionName: "approve",
+        args: [punkSocietyContractData?.address, allowanceAmount ? BigInt(allowanceAmount * 1e6) : BigInt(0)],
+      });
+
+      if (contractResponse) {
+        notification.success("Allowance increased successfully!");
+      }
+    } catch (error) {
+      console.error("Error increasing allowance:", error);
+      notification.error("Increasing allowance failed, please try again.");
+    } finally {
+      setShowModal(false);
+    }
+  };
+
   const handleLikePost = async () => {
     if (!connectedAddress) {
       notification.error("Please connect your wallet");
       return;
     }
 
+    if (allowance === undefined || parseInt(allowance.toString()) < 1 * 1e6) {
+      setShowModal(true);
+      return;
+    }
+
     setLikedPost(true); // Optimistically update the state
     setLikeCount(prevCount => prevCount + 1); // Optimistically update the like count
 
@@ -71,6 +127,12 @@ const LikeButton: React.FC<LikeButtonProps> = ({ postId }) => {
     }
   };
 
+  // useEffect(() => {
+  //   if (allowance !== undefined && parseInt(allowance.toString()) < 1 * 1e6) {
+  //     setShowModal(true);
+  //   }
+  // }, [allowance]);
+
   useEffect(() => {
     if (isLikedPost !== undefined) {
       setLikedPost(isLikedPost);
@@ -92,6 +154,28 @@ const LikeButton: React.FC<LikeButtonProps> = ({ postId }) => {
         {likedPost ? "❤️" : "🩶"}
       </button>
       <span className="like-counter">{likeCount}</span>
+
+      {showModal && (
+        <Modal isOpen={showModal} onClose={handleCloseModal}>
+          <div className="flex flex-col items-center gap-3">
+            <h2 className="mt-2 text-xl font-bold">Insufficient USDC Allowance!</h2>
+            <span className="text-red-600">Please increase your USDC allowance to like the post.</span>
+            <span className="flex flex-row items-center justify-center gap-2">
+              Current Balance:{" "}
+              <span className="flex items-center justify-center gap-1 text-lg text-blue-600 font-bold">
+                <Image src="/usdc-logo.png" alt="USDC" width={20} height={20} className="inline-block" />
+                {formattedUsdcBalance}
+              </span>
+            </span>
+            <InputBase placeholder="USDC value here (1.00)" value={allowanceAmount} onChange={setAllowanceAmount} />
+            <div className="flex items-center mb-2">
+              <button className="cool-button" onClick={handleAllowanceChange}>
+                Increase allowance
+              </button>
+            </div>
+          </div>
+        </Modal>
+      )}
       <style jsx>{`
         .like-button-container {
           display: flex;