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