Optimized for mobile view

getjake · Dec 1, 2021 · 9921851 · 9921851
1 parent 45a139d
commit 9921851
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 4 deletions.
diff --git a/fronend/nft-visualizer/src/App.js b/fronend/nft-visualizer/src/App.js
@@ -48,15 +48,16 @@ function App() {
   };
 
   const getNfts = async (address) => {
+
     const rpc = "https://rpc-mumbai.maticvigil.com/";
     const ethersProvider = new ethers.providers.JsonRpcProvider(rpc);
 
     let abi = [
       "function symbol() public view returns(string memory)",
       "function tokenCount() public view returns(uint256)",
       "function uri(uint256 _tokenId) public view returns(string memory)",
-      "function balanceOfBatch(address[], accounts, uint256[] ids) public view returns(uint256 array)"
-    ];
+      "function balanceOfBatch(address[] accounts, uint256[] ids) public view returns(uint256[])"
+    ]
 
     let nftCollection = new ethers.Contract(
       "0x052D6dbF358a21E008E60b08DeBd674f93B7654c",
@@ -66,8 +67,8 @@ function App() {
 
     let numberOfNfts = (await nftCollection.tokenCount()).toNumber();
     let collectionSymbol = (await nftCollection.symbol());
-    let accounts = Array(numberOfNfts).fill(address);
 
+    let accounts = Array(numberOfNfts).fill(address);
     let ids = Array.from({length: numberOfNfts}, (_, i) => i + 1);
     let copies = await nftCollection.balanceOfBatch(accounts, ids);
 
@@ -76,7 +77,7 @@ function App() {
     let baseUrl = "";
 
     for (let i = 1; i <= numberOfNfts; i++) {
-      if (i == 1) { // ipfs.com/cid/1.json
+      if (i === 1) { // ipfs.com/cid/1.json
         let tokenURI = await nftCollection.uri(i);
         baseUrl = tokenURI.replace(/\d+.json/, "");
         let metadata = await getMetadataFromIpfs(tokenURI);
@@ -136,6 +137,19 @@ const Grid = styled.div`
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 1fr;
   row-gap: 40px;
+  
+  @media(max-width: 1200px) {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+
+
+  @media(max-width: 900px) {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  @media(max-width: 600px) {
+    grid-template-columns: 1fr;
+  }
 `;
 
 export default App;
diff --git a/fronend/nft-visualizer/src/components/NFTModal.js b/fronend/nft-visualizer/src/components/NFTModal.js
@@ -1,5 +1,6 @@
 import styled from "styled-components";
 import { NftPhoto } from "./NFTCard";
+import { NFTProgressBar } from "./NFTProgressBar";
 
 const NFTModal = (props) => {
     let nft = props.nft;
@@ -22,6 +23,7 @@ const NFTModal = (props) => {
                         <AttributeText> {  attribute.trait_type } </AttributeText>
                         <AttributeText style={{ float: "right" }}> {  attribute.value } </AttributeText>
                       </div>
+                      <NFTProgressBar percent={attribute.value * 10} />
                     </div>
                 )
               }
@@ -62,6 +64,10 @@ const NFTModal = (props) => {
     background-color: white;
     border-radius: 20px;
     padding: 20px;
+
+    @media(max-width: 900px) {
+    width: 400px;
+  }
   `
 
   const CloseButton = styled.span`
@@ -88,6 +94,11 @@ const NFTModal = (props) => {
     display: inline-grid;
     grid-template-columns: 1fr 1fr;
     grid-gap: 40px;
+
+  @media(max-width: 900px) {
+    grid-template-columns: 1fr;
+  }
+
   `
 
   export { NFTModal };
diff --git a/fronend/nft-visualizer/src/components/NFTProgressBar.js b/fronend/nft-visualizer/src/components/NFTProgressBar.js
@@ -0,0 +1,24 @@
+import styled from "styled-components";
+
+const NFTProgressBar = (props) => {
+    return (
+        <ProgressBarOuter>
+            <ProgressBarInner style={{width: `${props.percent}`}} />
+        </ProgressBarOuter>
+    )
+}
+
+const ProgressBarOuter = styled.div`
+    background-color: lightgrey;
+    border-radius: 13px;
+    padding: 3px;
+`
+
+const ProgressBarInner = styled.div`
+    background-color: #0077ff;
+    width: 40%;
+    height: 10px;
+    border-radius: 7px;
+`
+
+export { NFTProgressBar };