Fixed linter warnings and bug with player.

dappuniversity · Mar 16, 2022 · 59779cf · 59779cf
1 parent 83387a0
commit 59779cf
Show file tree

Hide file tree

Showing 6 changed files with 157 additions and 176 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "starter_kit",
-  "version": "0.2.0",
+  "name": "music_nfts",
+  "version": "0.1.0",
   "private": false,
   "dependencies": {
     "@babel/preset-react": "^7.16.7",
@@ -19,7 +19,6 @@
     "react": "^17.0.2",
     "react-bootstrap": "^2.1.2",
     "react-dom": "^17.0.2",
-    "react-identicons": "^1.2.5",
     "react-router-dom": "^6.2.2",
     "react-scripts": "5.0.0",
     "web-vitals": "^2.1.4"
@@ -52,4 +51,4 @@
   "devDependencies": {
     "@babel/preset-env": "^7.16.11"
   }
-}
+}
diff --git a/src/backend/contracts/MusicNFTMarketplace.sol b/src/backend/contracts/MusicNFTMarketplace.sol
@@ -11,7 +11,8 @@ contract MusicNFTMarketplace is ERC721, Ownable {
 
     uint256 public immutable maxSupply;
 
-    string public baseURI;
+    string public baseURI =
+        "https://bafybeidhjjbjonyqcahuzlpt7sznmh4xrlbspa3gstop5o47l6gsiaffee.ipfs.nftstorage.link/";
     string public baseExtension = ".json";
 
     address public artist;
@@ -37,100 +38,92 @@ contract MusicNFTMarketplace is ERC721, Ownable {
         uint256 price
     );
 
+    /* In constructor we initalize royalty fee, artist address and prices of music nfts*/
+    /* All the nfts are minted for the marketplace and we create a market item for each, */
+    /* setting the deployer as the seller and price as the price in the current index in the prices array */
     constructor(
         uint256 _royaltyFee,
         address _artist,
         uint256[] memory _prices
-    ) ERC721("DAppFi", "DAPP") payable {
-      require(_prices.length*_royaltyFee <= msg.value, "Deployer must pay royalty fee for each token listed on the marketplace");
-      baseURI = "https://bafybeidhjjbjonyqcahuzlpt7sznmh4xrlbspa3gstop5o47l6gsiaffee.ipfs.nftstorage.link/";
-      royaltyFee = _royaltyFee;
-      artist = _artist;
-      maxSupply = _prices.length;
-      for (uint8 i = 0; i < _prices.length; i++) {
-        require(_prices[i] > 0, "Price must be greater than 0");
-        _mint(address(this), i);
-        marketItems.push(
-            MarketItem(
-              i,
-              payable(msg.sender),
-              _prices[i]
-          )
+    ) payable ERC721("DAppFi", "DAPP") {
+        require(
+            _prices.length * _royaltyFee <= msg.value,
+            "Deployer must pay royalty fee for each token listed on the marketplace"
         );
-      }
+        royaltyFee = _royaltyFee;
+        artist = _artist;
+        maxSupply = _prices.length;
+        for (uint8 i = 0; i < _prices.length; i++) {
+            require(_prices[i] > 0, "Price must be greater than 0");
+            _mint(address(this), i);
+            marketItems.push(MarketItem(i, payable(msg.sender), _prices[i]));
+        }
     }
 
     /* Updates the listing price of the contract */
     function updateRoyaltyFee(uint256 _royaltyFee) public payable onlyOwner {
         royaltyFee = _royaltyFee;
     }
 
-    /* Creates the sale of a marketplace item */
-    /* Transfers ownership of the item, as well as funds between parties */
+    /* Creates the sale of a music nft listed on the marketplace */
+    /* Transfers ownership of the nft, as well as funds between parties */
     function buyToken(uint256 _tokenId) public payable {
-      uint256 price = marketItems[_tokenId].price;
-      address seller = marketItems[_tokenId].seller;
-      require(
-        msg.value == price,
-        "Please send the asking price in order to complete the purchase"
-      );
-      marketItems[_tokenId].seller = payable(address(0));
-      _transfer(address(this), msg.sender, _tokenId);
-      payable(artist).transfer(royaltyFee);
-      payable(seller).transfer(msg.value);
-      emit MarketItemBought(
-        _tokenId,
-        seller,
-        msg.sender,
-        price
-      );
+        uint256 price = marketItems[_tokenId].price;
+        address seller = marketItems[_tokenId].seller;
+        require(
+            msg.value == price,
+            "Please send the asking price in order to complete the purchase"
+        );
+        marketItems[_tokenId].seller = payable(address(0));
+        _transfer(address(this), msg.sender, _tokenId);
+        payable(artist).transfer(royaltyFee);
+        payable(seller).transfer(msg.value);
+        emit MarketItemBought(_tokenId, seller, msg.sender, price);
     }
 
-    /* Allows someone to resell a token they have purchased */
+    /* Allows someone to resell their music nft */
     function resellToken(uint256 _tokenId, uint256 price) public payable {
         require(
-          msg.value == royaltyFee,
-          "Price must be equal to listing price"
-        );
-        require(
-          price > 0,
-          "Price must be greater than zero"
+            msg.value == royaltyFee,
+            "Price must be equal to listing price"
         );
+        require(price > 0, "Price must be greater than zero");
         marketItems[_tokenId].price = price;
         marketItems[_tokenId].seller = payable(msg.sender);
 
         _transfer(msg.sender, address(this), _tokenId);
-        emit MarketItemRelisted(
-          _tokenId,
-          msg.sender,
-          price
-      );
+        emit MarketItemRelisted(_tokenId, msg.sender, price);
     }
 
-    function getAllUnsoldTokens() external view returns(MarketItem[] memory){
-      uint unsoldCount = balanceOf(address(this));
-      MarketItem[] memory tokens = new MarketItem[] (unsoldCount);
-      uint currentIndex;
-      for(uint i = 0; i < marketItems.length; i++) {
-        if(marketItems[i].seller != address(0)) {
-          tokens[currentIndex] = marketItems[i];
-          currentIndex++;
+    /* Fetches all the tokens currently listed for sale */
+    function getAllUnsoldTokens() external view returns (MarketItem[] memory) {
+        uint256 unsoldCount = balanceOf(address(this));
+        MarketItem[] memory tokens = new MarketItem[](unsoldCount);
+        uint256 currentIndex;
+        for (uint256 i = 0; i < marketItems.length; i++) {
+            if (marketItems[i].seller != address(0)) {
+                tokens[currentIndex] = marketItems[i];
+                currentIndex++;
+            }
         }
-      }
-      return(tokens);
+        return (tokens);
     }
-    function getMyTokens() external view returns(MarketItem[] memory){
-      uint myTokenCount = balanceOf(msg.sender);
-      MarketItem[] memory tokens = new MarketItem[](myTokenCount);
-      uint currentIndex;
-      for(uint i = 0; i < marketItems.length; i++) {
-        if(ownerOf(i) == msg.sender) {
-          tokens[currentIndex] = marketItems[i];
-          currentIndex++;
+
+    /* Fetches all the tokens owned by the user */
+    function getMyTokens() external view returns (MarketItem[] memory) {
+        uint256 myTokenCount = balanceOf(msg.sender);
+        MarketItem[] memory tokens = new MarketItem[](myTokenCount);
+        uint256 currentIndex;
+        for (uint256 i = 0; i < marketItems.length; i++) {
+            if (ownerOf(i) == msg.sender) {
+                tokens[currentIndex] = marketItems[i];
+                currentIndex++;
+            }
         }
-      }
-      return(tokens);
+        return (tokens);
     }
+
+    /* Internal function that gets the baseURI initialized in the constructor */
     function _baseURI() internal view virtual override returns (string memory) {
         return baseURI;
     }

diff --git a/src/frontend/components/Home.js b/src/frontend/components/Home.js
@@ -4,7 +4,7 @@ import Identicon from 'identicon.js';
 import { Card, Button, ButtonGroup } from 'react-bootstrap'
 
 const Home = ({ nftMarketplace }) => {
-  const audioEl = useRef(null);
+  const audioRef = useRef(null);
   const [loading, setLoading] = useState(true)
   const [isPlaying, setIsPlaying] = useState(null)
   const [currentItemIndex, setCurrentItemIndex] = useState(0)
@@ -58,17 +58,15 @@ const Home = ({ nftMarketplace }) => {
     }
   }
   useEffect(() => {
-    {
-      if (isPlaying) {
-        audioEl.current.play()
-      } else if (isPlaying !== null) {
-        audioEl.current.pause()
-      }
+    if (isPlaying) {
+      audioRef.current.play()
+    } else if (isPlaying !== null) {
+      audioRef.current.pause()
     }
   })
   useEffect(() => {
-    loadMarketplaceItems()
-  }, [])
+    !marketItems && loadMarketplaceItems()
+  })
 
   if (loading) return (
     <main style={{ padding: "1rem 0" }}>
@@ -78,49 +76,53 @@ const Home = ({ nftMarketplace }) => {
   return (
 
     <div className="container-fluid mt-5">
+
       {marketItems.length > 0 ?
         <div className="row">
           <main role="main" className="col-lg-12 mx-auto" style={{ maxWidth: '500px' }}>
             <div className="content mx-auto">
-              <audio src={marketItems[currentItemIndex].audio} ref={audioEl}></audio>
+              <audio src={marketItems[currentItemIndex].audio} ref={audioRef}></audio>
               <Card>
+                <Card.Header>{currentItemIndex + 1} of {marketItems.length}</Card.Header>
                 <Card.Img variant="top" src={marketItems[currentItemIndex].identicon} />
                 <Card.Body color="secondary">
-                  <Card.Title>{marketItems[currentItemIndex].name}</Card.Title>
-                  <ButtonGroup aria-label="Basic example">
-                    <Button variant="secondary" onClick={() => skipSong(false)}>
-                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-skip-backward" viewBox="0 0 16 16">
-                        <path d="M.5 3.5A.5.5 0 0 1 1 4v3.248l6.267-3.636c.52-.302 1.233.043 1.233.696v2.94l6.267-3.636c.52-.302 1.233.043 1.233.696v7.384c0 .653-.713.998-1.233.696L8.5 8.752v2.94c0 .653-.713.998-1.233.696L1 8.752V12a.5.5 0 0 1-1 0V4a.5.5 0 0 1 .5-.5zm7 1.133L1.696 8 7.5 11.367V4.633zm7.5 0L9.196 8 15 11.367V4.633z" />
-                      </svg>
-                    </Button>
-                    <Button variant="secondary" onClick={() => setIsPlaying(!isPlaying)}>
-                      {isPlaying ? (
-                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-pause" viewBox="0 0 16 16">
-                          <path d="M6 3.5a.5.5 0 0 1 .5.5v8a.5.5 0 0 1-1 0V4a.5.5 0 0 1 .5-.5zm4 0a.5.5 0 0 1 .5.5v8a.5.5 0 0 1-1 0V4a.5.5 0 0 1 .5-.5z" />
+                  <Card.Title as="h2" > {marketItems[currentItemIndex].name}</Card.Title>
+                  <div className="d-grid px-4">
+                    <ButtonGroup size="lg" aria-label="Basic example">
+                      <Button variant="secondary" onClick={() => skipSong(false)}>
+                        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" className="bi bi-skip-backward" viewBox="0 0 16 16">
+                          <path d="M.5 3.5A.5.5 0 0 1 1 4v3.248l6.267-3.636c.52-.302 1.233.043 1.233.696v2.94l6.267-3.636c.52-.302 1.233.043 1.233.696v7.384c0 .653-.713.998-1.233.696L8.5 8.752v2.94c0 .653-.713.998-1.233.696L1 8.752V12a.5.5 0 0 1-1 0V4a.5.5 0 0 1 .5-.5zm7 1.133L1.696 8 7.5 11.367V4.633zm7.5 0L9.196 8 15 11.367V4.633z" />
                         </svg>
-                      ) : (
-                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-play" viewBox="0 0 16 16">
-                          <path d="M10.804 8 5 4.633v6.734L10.804 8zm.792-.696a.802.802 0 0 1 0 1.392l-6.363 3.692C4.713 12.69 4 12.345 4 11.692V4.308c0-.653.713-.998 1.233-.696l6.363 3.692z" />
+                      </Button>
+                      <Button variant="secondary" onClick={() => setIsPlaying(!isPlaying)}>
+                        {isPlaying ? (
+                          <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" className="bi bi-pause" viewBox="0 0 16 16">
+                            <path d="M6 3.5a.5.5 0 0 1 .5.5v8a.5.5 0 0 1-1 0V4a.5.5 0 0 1 .5-.5zm4 0a.5.5 0 0 1 .5.5v8a.5.5 0 0 1-1 0V4a.5.5 0 0 1 .5-.5z" />
+                          </svg>
+                        ) : (
+                          <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" className="bi bi-play" viewBox="0 0 16 16">
+                            <path d="M10.804 8 5 4.633v6.734L10.804 8zm.792-.696a.802.802 0 0 1 0 1.392l-6.363 3.692C4.713 12.69 4 12.345 4 11.692V4.308c0-.653.713-.998 1.233-.696l6.363 3.692z" />
+                          </svg>
+                        )}
+                      </Button>
+                      <Button variant="secondary" onClick={() => skipSong(true)}>
+                        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" className="bi bi-skip-forward" viewBox="0 0 16 16">
+                          <path d="M15.5 3.5a.5.5 0 0 1 .5.5v8a.5.5 0 0 1-1 0V8.752l-6.267 3.636c-.52.302-1.233-.043-1.233-.696v-2.94l-6.267 3.636C.713 12.69 0 12.345 0 11.692V4.308c0-.653.713-.998 1.233-.696L7.5 7.248v-2.94c0-.653.713-.998 1.233-.696L15 7.248V4a.5.5 0 0 1 .5-.5zM1 4.633v6.734L6.804 8 1 4.633zm7.5 0v6.734L14.304 8 8.5 4.633z" />
                         </svg>
-                      )}
-                    </Button>
-                    <Button variant="secondary" onClick={() => skipSong(true)}>
-                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-skip-forward" viewBox="0 0 16 16">
-                        <path d="M15.5 3.5a.5.5 0 0 1 .5.5v8a.5.5 0 0 1-1 0V8.752l-6.267 3.636c-.52.302-1.233-.043-1.233-.696v-2.94l-6.267 3.636C.713 12.69 0 12.345 0 11.692V4.308c0-.653.713-.998 1.233-.696L7.5 7.248v-2.94c0-.653.713-.998 1.233-.696L15 7.248V4a.5.5 0 0 1 .5-.5zM1 4.633v6.734L6.804 8 1 4.633zm7.5 0v6.734L14.304 8 8.5 4.633z" />
-                      </svg>
-                    </Button>
-                  </ButtonGroup>
+                      </Button>
+                    </ButtonGroup>
+                  </div>
                 </Card.Body>
                 <Card.Footer>
                   <div className='d-grid my-1'>
-                    <Button onClick={() => buyMarketItem(marketItems[currentItemIndex])}variant="primary" size="lg">
+                    <Button onClick={() => buyMarketItem(marketItems[currentItemIndex])} variant="primary" size="lg">
                       {`Buy for ${ethers.utils.formatEther(marketItems[currentItemIndex].price)} ETH`}
                     </Button>
                   </div>
                 </Card.Footer>
               </Card>
             </div>
-          </main>
+          </main >
         </div >
         : (
           <main style={{ padding: "1rem 0" }}>