diff --git a/fronend/nft-visualizer/src/App.js b/fronend/nft-visualizer/src/App.js index 72603ff..6912c7f 100644 --- a/fronend/nft-visualizer/src/App.js +++ b/fronend/nft-visualizer/src/App.js @@ -48,6 +48,7 @@ function App() { }; const getNfts = async (address) => { + const rpc = "https://rpc-mumbai.maticvigil.com/"; const ethersProvider = new ethers.providers.JsonRpcProvider(rpc); @@ -55,8 +56,8 @@ function App() { "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 index cd7c2e7..2ecaa90 100644 --- 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) => { { attribute.trait_type } { attribute.value } + ) } @@ -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 }; \ No newline at end of file diff --git a/fronend/nft-visualizer/src/components/NFTProgressBar.js b/fronend/nft-visualizer/src/components/NFTProgressBar.js new file mode 100644 index 0000000..beb5338 --- /dev/null +++ b/fronend/nft-visualizer/src/components/NFTProgressBar.js @@ -0,0 +1,24 @@ +import styled from "styled-components"; + +const NFTProgressBar = (props) => { + return ( + + + + ) +} + +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 }; \ No newline at end of file