cleaned up contract and added fade in / out transition to frontend mi…

…nting
MattPereira · Jan 30, 2024 · e262a48 · e262a48
1 parent efb9713
commit e262a48
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 199 deletions.
diff --git a/README.md b/README.md
@@ -30,11 +30,11 @@ yarn start
 
 ### Create Chainlink Functions Subscription
 
-The deployment script is setup to automatically add any freshly deployed contract to a chainlink functions subscription, but the subscription itself must be created at functions.chain.link
+1. The deployment script is setup to automatically add any freshly deployed contract to a chainlink functions subscription, but the subscription itself must be created at functions.chain.link
 
-Make sure to change the subscriptionId for all the different networks in the `HelperConfig.s.sol`
+2. Change the subscriptionId for the corresponding network where your subscriptionw was created in the `HelperConfig.s.sol`
 
-Also need to change `SUBSCRIPTION_ID` on the frontend homepage `index.tsx`
+3. Change `SUBSCRIPTION_ID` constant on the frontend homepage `index.tsx` which is needed for kicking off request to chainlink functions node
 
 ### Deploying Contracts
 

diff --git a/packages/foundry/contracts/OnlyBuidlorsNft.sol b/packages/foundry/contracts/OnlyBuidlorsNft.sol
@@ -313,7 +313,7 @@ contract OnlyBuidlorsNft is ERC721, FunctionsClient, ConfirmedOwner {
     }
 
     /**
-     *
+     * May try to handle minting with chainlink automation listening for "Response" event from function above
      */
     function mintNft() public {
         require(
@@ -330,50 +330,6 @@ contract OnlyBuidlorsNft is ERC721, FunctionsClient, ConfirmedOwner {
         s_tokenCounter++;
     }
 
-    /**
-     * @notice only contract owner can send request on behalf of another member
-     * @param subscriptionId registered with chainlink (must have added this contract as a consumer)
-     * @param args the arguments to pass to the javascript source code
-     * @param ensName ens name resolved by frontend and passed in as an argument for updating the svg
-     */
-    function sendRequestOnBehalfOf(
-        uint64 subscriptionId,
-        string[] calldata args,
-        string memory ensName,
-        address memberAddr
-    ) external onlyOwner returns (bytes32 requestId) {
-        FunctionsRequest.Request memory req;
-        req.initializeRequestForInlineJavaScript(s_source); // Initialize the request with JS code
-        if (args.length > 0) req.setArgs(args); // Set the arguments for the request
-        // Send the request and store the request ID
-        s_lastRequestId = _sendRequest(
-            req.encodeCBOR(),
-            subscriptionId,
-            s_gasLimit,
-            s_donID
-        );
-        s_requestIdToMemberAddress[s_lastRequestId] = memberAddr;
-        s_memberToData[memberAddr].ensName = ensName;
-        return s_lastRequestId;
-    }
-
-    /**
-     * @notice only owner of contract can mint NFT on behalf of another member
-     */
-    function minNftOnBehalfOf(address memberAddr) public onlyOwner {
-        require(
-            !s_hasMinted[memberAddr],
-            "This BuidlGuidl member has already minted an NFT"
-        );
-        require(
-            s_memberToData[memberAddr].buildCount > 0,
-            "Must ship at least one build to earn NFT"
-        );
-        _safeMint(memberAddr, s_tokenCounter);
-        s_hasMinted[memberAddr] = true;
-        s_tokenCounter++;
-    }
-
     // Getters
     function getBuidlCount(address memberAddr) public view returns (uint256) {
         return s_memberToData[memberAddr].buildCount;

diff --git a/packages/foundry/script/SendRequests.s.sol b/packages/foundry/script/SendRequests.s.sol
diff --git a/packages/nextjs/contracts/deployedContracts.ts b/packages/nextjs/contracts/deployedContracts.ts
@@ -2297,7 +2297,7 @@ const deployedContracts = {
   },
   421614: {
     OnlyBuidlorsNft: {
-      address: "0x00240adFd2D3dd37C4557118261C667266F28590",
+      address: "0x19AfFb41773D7699f368Ca181E2BEAC3f42f6f99",
       abi: [
         {
           type: "constructor",
@@ -2565,19 +2565,6 @@ const deployedContracts = {
           ],
           stateMutability: "view",
         },
-        {
-          type: "function",
-          name: "minNftOnBehalfOf",
-          inputs: [
-            {
-              name: "memberAddr",
-              type: "address",
-              internalType: "address",
-            },
-          ],
-          outputs: [],
-          stateMutability: "nonpayable",
-        },
         {
           type: "function",
           name: "mintNft",
@@ -2805,40 +2792,6 @@ const deployedContracts = {
           ],
           stateMutability: "nonpayable",
         },
-        {
-          type: "function",
-          name: "sendRequestOnBehalfOf",
-          inputs: [
-            {
-              name: "subscriptionId",
-              type: "uint64",
-              internalType: "uint64",
-            },
-            {
-              name: "args",
-              type: "string[]",
-              internalType: "string[]",
-            },
-            {
-              name: "ensName",
-              type: "string",
-              internalType: "string",
-            },
-            {
-              name: "memberAddr",
-              type: "address",
-              internalType: "address",
-            },
-          ],
-          outputs: [
-            {
-              name: "requestId",
-              type: "bytes32",
-              internalType: "bytes32",
-            },
-          ],
-          stateMutability: "nonpayable",
-        },
         {
           type: "function",
           name: "setApprovalForAll",
@@ -3613,19 +3566,6 @@ const deployedContracts = {
           ],
           stateMutability: "view",
         },
-        {
-          type: "function",
-          name: "minNftOnBehalfOf",
-          inputs: [
-            {
-              name: "memberAddr",
-              type: "address",
-              internalType: "address",
-            },
-          ],
-          outputs: [],
-          stateMutability: "nonpayable",
-        },
         {
           type: "function",
           name: "mintNft",
@@ -3853,40 +3793,6 @@ const deployedContracts = {
           ],
           stateMutability: "nonpayable",
         },
-        {
-          type: "function",
-          name: "sendRequestOnBehalfOf",
-          inputs: [
-            {
-              name: "subscriptionId",
-              type: "uint64",
-              internalType: "uint64",
-            },
-            {
-              name: "args",
-              type: "string[]",
-              internalType: "string[]",
-            },
-            {
-              name: "ensName",
-              type: "string",
-              internalType: "string",
-            },
-            {
-              name: "memberAddr",
-              type: "address",
-              internalType: "address",
-            },
-          ],
-          outputs: [
-            {
-              name: "requestId",
-              type: "bytes32",
-              internalType: "bytes32",
-            },
-          ],
-          stateMutability: "nonpayable",
-        },
         {
           type: "function",
           name: "setApprovalForAll",

diff --git a/packages/nextjs/pages/index.tsx b/packages/nextjs/pages/index.tsx
@@ -59,6 +59,7 @@ const Home: NextPage = () => {
   const [imgSrc, setImgSrc] = useState<string>("/pixel-art.jpg");
   const [stepsCompleted, setStepsCompleted] = useState(0);
   const [ensName, setEnsName] = useState<string | null>(null);
+  const [opacity, setOpacity] = useState(1); // State for controlling opacity of image
   console.log("stepsCompleted", stepsCompleted);
 
   const publicClient = createPublicClient({
@@ -132,7 +133,7 @@ const Home: NextPage = () => {
     console.log("isBuilderError", isBuilderError);
   }
 
-  // Only make OBDL collection request to Alchemy API eoa and contract address are defined AND the user has minted an NFT
+  // Only make NFT collection request to Alchemy API if eoa and contract address are defined AND the user has minted an NFT
   const getNftForOwnerUrl =
     address && onlyBuildorsNftContract?.address && (hasMinted || stepsCompleted === 3)
       ? `/api/get-nft-for-owner?eoaAddress=${address}&nftContract=${onlyBuildorsNftContract?.address}`
@@ -170,25 +171,32 @@ const Home: NextPage = () => {
 
   // Controls the image/button displayed based on the state of the minting process
   useEffect(() => {
+    const updateImageWithFade = async (newSrc: string) => {
+      setOpacity(0); // Fade out current image
+      await new Promise(resolve => setTimeout(resolve, 1000)); // Wait for fade-out
+      setImgSrc(newSrc); // Set new image source
+      setOpacity(1); // Fade in new image
+    };
+
     if (hasMinted || stepsCompleted === 3) {
       setStepsCompleted(3);
       if (nftData) {
         try {
           const decodedString = Buffer.from(nftData.raw.tokenUri, "base64").toString("utf-8");
           const metadata = JSON.parse(decodedString);
-          setImgSrc(metadata.image);
+          updateImageWithFade(metadata.image);
         } catch (e) {
           console.log("error", e);
         }
       }
     } else if (buidlCount && buidlCount > 0n) {
-      setImgSrc("/step-3.jpg");
+      updateImageWithFade("/step-3.jpg");
     } else if (stepsCompleted === 1) {
-      setImgSrc("/step-2.jpg");
+      updateImageWithFade("/step-2.jpg");
     } else if (requestTxIsMining || requestTxIsLoading) {
-      setImgSrc("/step-1.jpg");
+      updateImageWithFade("/step-1.jpg");
     } else {
-      setImgSrc("/pixel-art.jpg");
+      updateImageWithFade("/pixel-art.jpg");
     }
   }, [hasMinted, buidlCount, requestTxIsMining, requestTxIsLoading, stepsCompleted, nftData]);
 
@@ -217,7 +225,8 @@ const Home: NextPage = () => {
               width={800}
               height={700}
               alt="dynamic image of minting proccess and final NFT"
-              className="rounded-xl"
+              className="rounded-xl transition-opacity duration-1000"
+              style={{ opacity }} // apply dynamic opacity based on state
             />
           </div>
         </div>