├── public
    ├── robots.txt
    ├── favicon.ico
    ├── logo192.png
    ├── logo512.png
    ├── manifest.json
    └── index.html
├── postcss.config.js
├── src
    ├── utils
    │   ├── hash.js
    │   └── wagmi-config.js
    ├── components
    │   ├── Address.jsx
    │   ├── Footer.jsx
    │   ├── NFT.jsx
    │   ├── Verify.jsx
    │   ├── Home.jsx
    │   ├── Mint.jsx
    │   ├── layout
    │   │   └── Navbar.jsx
    │   ├── Loading.jsx
    │   └── NFTs.jsx
    ├── reportWebVitals.js
    ├── index.css
    ├── index.js
    ├── App.js
    ├── App.css
    └── contracts
    │   ├── ModelNFT.sol
    │   ├── ModelNFT-hash.sol
    │   └── abi.json
├── tailwind.config.js
├── .gitignore
├── package.json
└── README.md


/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shafu0x/NFT-Pytorch-Callback-Frontend/main/public/favicon.ico


--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shafu0x/NFT-Pytorch-Callback-Frontend/main/public/logo192.png


--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shafu0x/NFT-Pytorch-Callback-Frontend/main/public/logo512.png


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/src/utils/hash.js:
--------------------------------------------------------------------------------
1 | export function add0x(hash) {
2 |   if (!hash.startsWith("0x")) {
3 |     return "0x" + hash;
4 |   } else {
5 |     return hash;
6 |   }
7 | }
8 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | module.exports = {
3 |   content: ["./src/**/*.{js,jsx,ts,tsx}"],
4 |   theme: {
5 |     extend: {},
6 |   },
7 |   plugins: [],
8 | };
9 | 


--------------------------------------------------------------------------------
/src/components/Address.jsx:
--------------------------------------------------------------------------------
 1 | import { Input } from "@chakra-ui/react";
 2 | 
 3 | export default function Address({ address, setAddress }) {
 4 |   return (
 5 |     <div class="w-full">
 6 |       <Input value={address} onChange={(e) => setAddress(e.target.value)} />
 7 |     </div>
 8 |   );
 9 | }
10 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/src/reportWebVitals.js:
--------------------------------------------------------------------------------
 1 | const reportWebVitals = onPerfEntry => {
 2 |   if (onPerfEntry && onPerfEntry instanceof Function) {
 3 |     import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
 4 |       getCLS(onPerfEntry);
 5 |       getFID(onPerfEntry);
 6 |       getFCP(onPerfEntry);
 7 |       getLCP(onPerfEntry);
 8 |       getTTFB(onPerfEntry);
 9 |     });
10 |   }
11 | };
12 | 
13 | export default reportWebVitals;
14 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   margin: 0;
 3 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
 4 |     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
 5 |     sans-serif;
 6 |   -webkit-font-smoothing: antialiased;
 7 |   -moz-osx-font-smoothing: grayscale;
 8 | }
 9 | 
10 | code {
11 |   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
12 |     monospace;
13 | }
14 | 
15 | @tailwind base;
16 | @tailwind components;
17 | @tailwind utilities;
18 | 
19 | 
20 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom/client';
 3 | import './index.css';
 4 | import App from './App';
 5 | import reportWebVitals from './reportWebVitals';
 6 | 
 7 | const root = ReactDOM.createRoot(document.getElementById('root'));
 8 | root.render(
 9 |   <React.StrictMode>
10 |     <App />
11 |   </React.StrictMode>
12 | );
13 | 
14 | // If you want to start measuring performance in your app, pass a function
15 | // to log results (for example: reportWebVitals(console.log))
16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
17 | reportWebVitals();
18 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "logo192.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "logo512.png",
17 |       "type": "image/png",
18 |       "sizes": "512x512"
19 |     }
20 |   ],
21 |   "start_url": ".",
22 |   "display": "standalone",
23 |   "theme_color": "#000000",
24 |   "background_color": "#ffffff"
25 | }
26 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import { WagmiConfig } from "wagmi";
 2 | import "./App.css";
 3 | import { client, chains } from "./utils/wagmi-config";
 4 | import { ChakraProvider } from "@chakra-ui/react";
 5 | import { RainbowKitProvider } from "@rainbow-me/rainbowkit";
 6 | import "@rainbow-me/rainbowkit/styles.css";
 7 | import Home from "./components/Home";
 8 | // import "antd/dist/antd.css"; // or 'antd/dist/antd.less'
 9 | 
10 | function App() {
11 |   return (
12 |     <ChakraProvider>
13 |       <WagmiConfig client={client}>
14 |         <RainbowKitProvider chains={chains}>
15 |           <Home />
16 |         </RainbowKitProvider>
17 |       </WagmiConfig>
18 |     </ChakraProvider>
19 |   );
20 | }
21 | 
22 | export default App;
23 | 


--------------------------------------------------------------------------------
/src/utils/wagmi-config.js:
--------------------------------------------------------------------------------
 1 | import {
 2 |   WagmiConfig,
 3 |   createClient,
 4 |   configureChains,
 5 |   defaultChains,
 6 |   chain,
 7 | } from "wagmi";
 8 | import { publicProvider } from "wagmi/providers/public";
 9 | import { getDefaultWallets, RainbowKitProvider } from "@rainbow-me/rainbowkit";
10 | 
11 | export const { chains, provider, webSocketProvider } = configureChains(
12 |   [chain.mainnet, chain.polygon, chain.rinkeby],
13 |   [publicProvider()]
14 | );
15 | 
16 | const { connectors } = getDefaultWallets({
17 |   appName: "My RainbowKit App",
18 |   chains,
19 | });
20 | 
21 | export const client = createClient({
22 |   autoConnect: true,
23 |   connectors,
24 |   provider,
25 |   webSocketProvider,
26 | });
27 | 


--------------------------------------------------------------------------------
/src/components/Footer.jsx:
--------------------------------------------------------------------------------
 1 | import { Box, HStack, useColorModeValue } from "@chakra-ui/react";
 2 | 
 3 | export const Footer = () => {
 4 |   return (
 5 |     <Box bg={useColorModeValue("gray.100", "gray.900")} px={4}>
 6 |       <HStack h={20} alignItems={"center"} justifyContent={"space-between"}>
 7 |         <HStack>
 8 |           <Box style={{ cursor: "pointer" }}>
 9 |             <div class="flex gap-2 justify-end">
10 |               <div>Created By: </div>
11 |               <a href="https://twitter.com/elfouly_sharif">
12 |                 <div class="text-blue-400">@elfouly_sharif</div>
13 |               </a>
14 |             </div>
15 |           </Box>
16 |         </HStack>
17 |       </HStack>
18 |     </Box>
19 |   );
20 | };
21 | 


--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
 1 | .App {
 2 |   text-align: center;
 3 | }
 4 | 
 5 | .App-logo {
 6 |   height: 40vmin;
 7 |   pointer-events: none;
 8 | }
 9 | 
10 | @media (prefers-reduced-motion: no-preference) {
11 |   .App-logo {
12 |     animation: App-logo-spin infinite 20s linear;
13 |   }
14 | }
15 | 
16 | .App-header {
17 |   background-color: #282c34;
18 |   min-height: 100vh;
19 |   display: flex;
20 |   flex-direction: column;
21 |   align-items: center;
22 |   justify-content: center;
23 |   font-size: calc(10px + 2vmin);
24 |   color: white;
25 | }
26 | 
27 | .App-link {
28 |   color: #61dafb;
29 | }
30 | 
31 | @keyframes App-logo-spin {
32 |   from {
33 |     transform: rotate(0deg);
34 |   }
35 |   to {
36 |     transform: rotate(360deg);
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/src/components/NFT.jsx:
--------------------------------------------------------------------------------
 1 | import { RadarChartOutlined } from "@ant-design/icons";
 2 | 
 3 | export default function NFT({ id, name, hash }) {
 4 |   return (
 5 |     <div class="rounded-lg shadow-lg bg-white w-[10rem]">
 6 |       <div
 7 |         class="h-14 bg-gradient-to-r from-purple-500 to-pink-500 h-40 p-4
 8 |           flex flex-col content-between justify-between"
 9 |       >
10 |         <div class="flex justify-between items-center">
11 |           <div class="font-bold">{id}</div>
12 |           <RadarChartOutlined style={{ fontSize: "2rem" }} />
13 |         </div>
14 |         <div class="text-xs font-light">{hash}</div>
15 |       </div>
16 |       <div class="p-6">
17 |         <h5 class="text-gray-900 text-xl font-medium mb-2">{name}</h5>
18 |       </div>
19 |     </div>
20 |   );
21 | }
22 | 


--------------------------------------------------------------------------------
/src/components/Verify.jsx:
--------------------------------------------------------------------------------
 1 | import { UploadOutlined } from "@ant-design/icons";
 2 | import { Button, message, Upload } from "antd";
 3 | 
 4 | export default function Verify() {
 5 |   return (
 6 |     <div>
 7 |       <div className="mb-4 text-xl font-bold flex items-center justify-between">
 8 |         <div>Verify</div>
 9 |       </div>
10 |       <div>
11 |         <label
12 |           class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
13 |           for="file_input"
14 |         >
15 |           Upload file
16 |         </label>
17 |         <input
18 |           class="block w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 cursor-pointer dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400"
19 |           id="file_input"
20 |           type="file"
21 |           onChange={(e) => {
22 |             console.log(e.target.files[0]);
23 |           }}
24 |         />
25 |       </div>
26 |     </div>
27 |   );
28 | }
29 | 


--------------------------------------------------------------------------------
/src/contracts/ModelNFT.sol:
--------------------------------------------------------------------------------
 1 | // SPDX-License-Identifier: MIT
 2 | pragma solidity ^0.8.4;
 3 | 
 4 | import "@openzeppelin/contracts@4.7.3/token/ERC721/ERC721.sol";
 5 | import "@openzeppelin/contracts@4.7.3/access/Ownable.sol";
 6 | import "@openzeppelin/contracts@4.7.3/utils/Counters.sol";
 7 | 
 8 | contract ModelNFT is ERC721, Ownable {
 9 |     struct Model {
10 |         uint256 id;
11 |         string name;
12 |         string hash;
13 |     }
14 | 
15 |     using Counters for Counters.Counter;
16 | 
17 |     mapping(address => Model[]) public models;
18 | 
19 |     Counters.Counter private _tokenIdCounter;
20 | 
21 |     constructor() ERC721("ModelNFT", "MNFT") {}
22 | 
23 |     function safeMint(string memory name, string memory hash) public {
24 |         // tokenID
25 |         uint256 tokenId = _tokenIdCounter.current();
26 |         _tokenIdCounter.increment();
27 | 
28 |         // update models
29 |         Model[] storage modelList = models[msg.sender];
30 |         modelList.push(Model(tokenId, name, hash));
31 |         models[msg.sender] = modelList;
32 | 
33 |         // mint
34 |         _safeMint(msg.sender, tokenId);
35 |     }
36 | }
37 | 
38 | 


--------------------------------------------------------------------------------
/src/contracts/ModelNFT-hash.sol:
--------------------------------------------------------------------------------
 1 | // SPDX-License-Identifier: MIT
 2 | pragma solidity ^0.8.4;
 3 | 
 4 | import "@openzeppelin/contracts@4.7.3/token/ERC721/ERC721.sol";
 5 | import "@openzeppelin/contracts@4.7.3/access/Ownable.sol";
 6 | import "@openzeppelin/contracts@4.7.3/utils/Counters.sol";
 7 | 
 8 | contract ModelNFT is ERC721, Ownable {
 9 |     struct Model {
10 |         uint256 id;
11 |         string name;
12 |         string loss;
13 |         string epoch;
14 |         bytes32 hash;
15 |         uint256 timestamp;
16 |     }
17 | 
18 |     using Counters for Counters.Counter;
19 | 
20 |     mapping(address => Model[]) public models;
21 | 
22 |     Counters.Counter private _tokenIdCounter;
23 | 
24 |     constructor() ERC721("ModelNFT", "MNFT") {}
25 | 
26 |     function safeMint(string memory name, string memory loss, string memory epoch) public {
27 |         // generate hash
28 |         uint256 tokenId = _tokenIdCounter.current();
29 |         bytes32 hash = keccak256(abi.encodePacked(msg.sender, block.timestamp, tokenId, name, loss, epoch));
30 |         _tokenIdCounter.increment();
31 | 
32 |         // update models
33 |         Model[] storage modelList = models[msg.sender];
34 |         modelList.push(Model(tokenId, name, loss, epoch, hash, block.timestamp));
35 |         models[msg.sender] = modelList;
36 | 
37 |         // mint
38 |         _safeMint(msg.sender, tokenId);
39 |     }
40 | }
41 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "web3-template",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@ant-design/icons": "^4.7.0",
 7 |     "@chakra-ui/react": "^2.3.1",
 8 |     "@emotion/react": "^11.10.4",
 9 |     "@emotion/styled": "^11.10.4",
10 |     "@rainbow-me/rainbowkit": "^0.5.0",
11 |     "@testing-library/jest-dom": "^5.16.5",
12 |     "@testing-library/react": "^13.3.0",
13 |     "@testing-library/user-event": "^13.5.0",
14 |     "antd": "^4.22.8",
15 |     "ethers": "^5.7.0",
16 |     "framer-motion": "^7.2.1",
17 |     "react": "^18.2.0",
18 |     "react-dom": "^18.2.0",
19 |     "react-scripts": "5.0.1",
20 |     "wagmi": "^0.6.4",
21 |     "web-vitals": "^2.1.4"
22 |   },
23 |   "scripts": {
24 |     "start": "react-scripts start",
25 |     "build": "react-scripts build",
26 |     "test": "react-scripts test",
27 |     "eject": "react-scripts eject"
28 |   },
29 |   "eslintConfig": {
30 |     "extends": [
31 |       "react-app",
32 |       "react-app/jest"
33 |     ]
34 |   },
35 |   "browserslist": {
36 |     "production": [
37 |       ">0.2%",
38 |       "not dead",
39 |       "not op_mini all"
40 |     ],
41 |     "development": [
42 |       "last 1 chrome version",
43 |       "last 1 firefox version",
44 |       "last 1 safari version"
45 |     ]
46 |   },
47 |   "devDependencies": {
48 |     "autoprefixer": "^10.4.8",
49 |     "postcss": "^8.4.16",
50 |     "tailwindcss": "^3.1.8"
51 |   }
52 | }
53 | 


--------------------------------------------------------------------------------
/src/components/Home.jsx:
--------------------------------------------------------------------------------
 1 | import { useEffect, useState } from "react";
 2 | import { NavBar } from "./layout/Navbar";
 3 | import Mint from "./Mint";
 4 | import { useAccount } from "wagmi";
 5 | import NFTs from "./NFTs";
 6 | 
 7 | export default function Home() {
 8 |   const { address, isConnected } = useAccount();
 9 | 
10 |   const [reload, setReload] = useState(false);
11 |   const [customAddress, setAddress] = useState(address);
12 | 
13 |   useEffect(() => {
14 |     setAddress(address);
15 |   }, [isConnected]);
16 | 
17 |   return (
18 |     <>
19 |       <NavBar />
20 |       <div className="flex flex-col items-center p-10 w-full">
21 |         <div class="w-4/6 flex flex-col gap-8">
22 |           {/* <Verify /> */}
23 |           <Mint reload={reload} setReload={setReload} />
24 |           <div>
25 |             <div className="text-xl font-bold">Models</div>
26 |             {customAddress && (
27 |               <NFTs
28 |                 reload={reload}
29 |                 address={customAddress}
30 |                 setAddress={setAddress}
31 |                 isConnected={isConnected}
32 |               />
33 |             )}
34 |             {!isConnected && (
35 |               <div class="mt-2">
36 |                 Connect your wallet to see your or other people's models!
37 |               </div>
38 |             )}
39 |           </div>
40 |         </div>
41 |       </div>
42 |       {/* <Footer /> */}
43 |     </>
44 |   );
45 | }
46 | 


--------------------------------------------------------------------------------
/src/components/Mint.jsx:
--------------------------------------------------------------------------------
 1 | import { useState } from "react";
 2 | import {
 3 |   useContractWrite,
 4 |   usePrepareContractWrite,
 5 |   useWaitForTransaction,
 6 | } from "wagmi";
 7 | import abi from "../contracts/abi.json";
 8 | import { Button, Input } from "@chakra-ui/react";
 9 | import Loading from "./Loading";
10 | 
11 | export default function Mint({ reload, setReload }) {
12 |   const [name, setName] = useState("");
13 |   const [hash, setHash] = useState("");
14 | 
15 |   const { config } = usePrepareContractWrite({
16 |     addressOrName: "0x7e51Cb0880343732D0216527900C5C0184308642",
17 |     contractInterface: abi,
18 |     functionName: "safeMint",
19 |     args: [name, hash],
20 |   });
21 | 
22 |   const { data, write } = useContractWrite(config);
23 | 
24 |   const { isLoading, isSuccess } = useWaitForTransaction({
25 |     hash: data?.hash,
26 |     onSuccess: () => {
27 |       console.log("waitForTransaction");
28 |       setReload(!reload);
29 |     },
30 |   });
31 | 
32 |   return (
33 |     <div className="flex flex-col gap-4 w-full">
34 |       <div className="mb-4 text-xl font-bold flex items-center justify-between">
35 |         <div>Upload Model Hash</div>
36 |         {isLoading && <Loading />}
37 |       </div>
38 |       <Input
39 |         placeholder="Model Name"
40 |         value={name}
41 |         onChange={(e) => setName(e.target.value)}
42 |       />
43 |       <Input
44 |         placeholder="Hash"
45 |         value={hash}
46 |         onChange={(e) => setHash(e.target.value)}
47 |       />
48 |       <Button disabled={!write} onClick={() => write?.()}>
49 |         Mint
50 |       </Button>
51 |     </div>
52 |   );
53 | }
54 | 


--------------------------------------------------------------------------------
/src/components/layout/Navbar.jsx:
--------------------------------------------------------------------------------
 1 | import { Box, HStack, useColorModeValue } from "@chakra-ui/react";
 2 | import { ConnectButton } from "@rainbow-me/rainbowkit";
 3 | import { useAccount, useDisconnect } from "wagmi";
 4 | // import { ToggleColorMode } from './ToggleColorMode'
 5 | // import { NavLink } from "./NavLink";
 6 | import { useBalance } from "wagmi";
 7 | 
 8 | export const NavBar = () => {
 9 |   const { address } = useAccount();
10 |   const { disconnect } = useDisconnect();
11 |   const { data, isError, isLoading } = useBalance({
12 |     addressOrName: address,
13 |   });
14 | 
15 |   return (
16 |     <Box bg={useColorModeValue("gray.100", "gray.900")} px={4}>
17 |       <HStack h={20} alignItems={"center"} justifyContent={"space-between"}>
18 |         <div class="flex gap-2 items-end">
19 |           <Box style={{ fontWeight: "800", cursor: "pointer" }}>
20 |             <div class="text-2xl">Model NFTs</div>
21 |           </Box>
22 |           <div class="flex gap-1 text-xs">
23 |             <div>by</div>
24 |             <a href="https://twitter.com/elfouly_sharif">
25 |               <div class="text-blue-400">@elfouly_sharif</div>
26 |             </a>
27 |           </div>
28 |         </div>
29 |         <HStack>
30 |           <Box mr={6} style={{ fontWeight: "800", cursor: "pointer" }}>
31 |             {/* <NavLink route={"/bets"}>Bets</NavLink> */}
32 |           </Box>
33 |           <Box mr={6}>
34 |             {address ? (
35 |               <Box cursor="pointer">
36 |                 <a onClick={() => disconnect()}>Disconnect</a>
37 |               </Box>
38 |             ) : (
39 |               <ConnectButton />
40 |             )}
41 |           </Box>
42 |           {/* <ToggleColorMode /> */}
43 |         </HStack>
44 |       </HStack>
45 |     </Box>
46 |   );
47 | };
48 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="description"
10 |       content="Web site created using create-react-app"
11 |     />
12 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13 |     <!--
14 |       manifest.json provides metadata used when your web app is installed on a
15 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16 |     -->
17 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18 |     <!--
19 |       Notice the use of %PUBLIC_URL% in the tags above.
20 |       It will be replaced with the URL of the `public` folder during the build.
21 |       Only files inside the `public` folder can be referenced from the HTML.
22 | 
23 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24 |       work correctly both with client-side routing and a non-root public URL.
25 |       Learn how to configure a non-root public URL by running `npm run build`.
26 |     -->
27 |     <title>React App</title>
28 |   </head>
29 |   <body>
30 |     <noscript>You need to enable JavaScript to run this app.</noscript>
31 |     <div id="root"></div>
32 |     <!--
33 |       This HTML file is a template.
34 |       If you open it directly in the browser, you will see an empty page.
35 | 
36 |       You can add webfonts, meta tags, or analytics to this file.
37 |       The build step will place the bundled scripts into the <body> tag.
38 | 
39 |       To begin the development, run `npm start` or `yarn start`.
40 |       To create a production bundle, use `npm run build` or `yarn build`.
41 |     -->
42 |   </body>
43 | </html>
44 | 


--------------------------------------------------------------------------------
/src/components/Loading.jsx:
--------------------------------------------------------------------------------
 1 | export default function Loading() {
 2 |   return (
 3 |     <button
 4 |       disabled
 5 |       type="button"
 6 |       class="py-2.5 px-5 mr-2 text-sm font-medium text-gray-900 bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 inline-flex items-center"
 7 |     >
 8 |       <svg
 9 |         role="status"
10 |         class="inline mr-2 w-4 h-4 text-gray-200 animate-spin dark:text-gray-600"
11 |         viewBox="0 0 100 101"
12 |         fill="none"
13 |         xmlns="http://www.w3.org/2000/svg"
14 |       >
15 |         <path
16 |           d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
17 |           fill="currentColor"
18 |         />
19 |         <path
20 |           d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
21 |           fill="#1C64F2"
22 |         />
23 |       </svg>
24 |       Loading...
25 |     </button>
26 |   );
27 | }
28 | 


--------------------------------------------------------------------------------
/src/components/NFTs.jsx:
--------------------------------------------------------------------------------
 1 | import abi from "../contracts/abi.json";
 2 | import { useContractInfiniteReads, paginatedIndexesConfig } from "wagmi";
 3 | import NFT from "./NFT";
 4 | import { Button } from "@chakra-ui/react";
 5 | import { add0x } from "../utils/hash";
 6 | import Loading from "./Loading";
 7 | import Address from "./Address";
 8 | import { useEffect } from "react";
 9 | 
10 | const contractConfig = {
11 |   addressOrName: "0x7e51Cb0880343732D0216527900C5C0184308642",
12 |   contractInterface: abi,
13 | };
14 | 
15 | const ITEMS_PER_PAGE = 100;
16 | 
17 | export default function NFTs({ address, setAddress, isConnected, reload }) {
18 |   const { data, refetch, isFetching } = useContractInfiniteReads({
19 |     cacheKey: "nfts",
20 |     ...paginatedIndexesConfig(
21 |       (index) => ({
22 |         ...contractConfig,
23 |         functionName: "models",
24 |         args: [address, index],
25 |         onSuccess(data) {
26 |           console.log("Success", data);
27 |         },
28 |       }),
29 |       { start: 0, perPage: ITEMS_PER_PAGE, direction: "increment" }
30 |     ),
31 |   });
32 | 
33 |   useEffect(() => {
34 |     refetch();
35 |   }, [reload]);
36 | 
37 |   return (
38 |     <div>
39 |       {isConnected && (
40 |         <div class="flex flex-col gap-4 mt-2">
41 |           <div class="flex justify-between gap-4">
42 |             <Address address={address} setAddress={setAddress} />
43 |             <Button onClick={refetch}>Search</Button>
44 |           </div>
45 |           <div class="flex justify-center">{isFetching && <Loading />}</div>
46 |           <div className="flex gap-4 flex-wrap">
47 |             {data &&
48 |               !isFetching &&
49 |               data.pages[0].map((d) => {
50 |                 if (d) {
51 |                   return <NFT id={d[0]._hex} name={d[1]} hash={add0x(d[2])} />;
52 |                 }
53 |               })}
54 |             {data && !isFetching && data.pages[0][0] == null && (
55 |               <div class="font-light text-sm">No models found!</div>
56 |             )}
57 |           </div>
58 |         </div>
59 |       )}
60 |     </div>
61 |   );
62 | }
63 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Getting Started with Create React App
 2 | 
 3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
 4 | 
 5 | ## Available Scripts
 6 | 
 7 | In the project directory, you can run:
 8 | 
 9 | ### `npm start`
10 | 
11 | Runs the app in the development mode.\
12 | Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
13 | 
14 | The page will reload when you make changes.\
15 | You may also see any lint errors in the console.
16 | 
17 | ### `npm test`
18 | 
19 | Launches the test runner in the interactive watch mode.\
20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
21 | 
22 | ### `npm run build`
23 | 
24 | Builds the app for production to the `build` folder.\
25 | It correctly bundles React in production mode and optimizes the build for the best performance.
26 | 
27 | The build is minified and the filenames include the hashes.\
28 | Your app is ready to be deployed!
29 | 
30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
31 | 
32 | ### `npm run eject`
33 | 
34 | **Note: this is a one-way operation. Once you `eject`, you can't go back!**
35 | 
36 | If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
37 | 
38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
39 | 
40 | You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
41 | 
42 | ## Learn More
43 | 
44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
45 | 
46 | To learn React, check out the [React documentation](https://reactjs.org/).
47 | 
48 | ### Code Splitting
49 | 
50 | This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
51 | 
52 | ### Analyzing the Bundle Size
53 | 
54 | This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
55 | 
56 | ### Making a Progressive Web App
57 | 
58 | This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
59 | 
60 | ### Advanced Configuration
61 | 
62 | This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
63 | 
64 | ### Deployment
65 | 
66 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
67 | 
68 | ### `npm run build` fails to minify
69 | 
70 | This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
71 | 


--------------------------------------------------------------------------------
/src/contracts/abi.json:
--------------------------------------------------------------------------------
  1 | [
  2 | 	{
  3 | 		"inputs": [],
  4 | 		"stateMutability": "nonpayable",
  5 | 		"type": "constructor"
  6 | 	},
  7 | 	{
  8 | 		"anonymous": false,
  9 | 		"inputs": [
 10 | 			{
 11 | 				"indexed": true,
 12 | 				"internalType": "address",
 13 | 				"name": "owner",
 14 | 				"type": "address"
 15 | 			},
 16 | 			{
 17 | 				"indexed": true,
 18 | 				"internalType": "address",
 19 | 				"name": "approved",
 20 | 				"type": "address"
 21 | 			},
 22 | 			{
 23 | 				"indexed": true,
 24 | 				"internalType": "uint256",
 25 | 				"name": "tokenId",
 26 | 				"type": "uint256"
 27 | 			}
 28 | 		],
 29 | 		"name": "Approval",
 30 | 		"type": "event"
 31 | 	},
 32 | 	{
 33 | 		"anonymous": false,
 34 | 		"inputs": [
 35 | 			{
 36 | 				"indexed": true,
 37 | 				"internalType": "address",
 38 | 				"name": "owner",
 39 | 				"type": "address"
 40 | 			},
 41 | 			{
 42 | 				"indexed": true,
 43 | 				"internalType": "address",
 44 | 				"name": "operator",
 45 | 				"type": "address"
 46 | 			},
 47 | 			{
 48 | 				"indexed": false,
 49 | 				"internalType": "bool",
 50 | 				"name": "approved",
 51 | 				"type": "bool"
 52 | 			}
 53 | 		],
 54 | 		"name": "ApprovalForAll",
 55 | 		"type": "event"
 56 | 	},
 57 | 	{
 58 | 		"anonymous": false,
 59 | 		"inputs": [
 60 | 			{
 61 | 				"indexed": true,
 62 | 				"internalType": "address",
 63 | 				"name": "previousOwner",
 64 | 				"type": "address"
 65 | 			},
 66 | 			{
 67 | 				"indexed": true,
 68 | 				"internalType": "address",
 69 | 				"name": "newOwner",
 70 | 				"type": "address"
 71 | 			}
 72 | 		],
 73 | 		"name": "OwnershipTransferred",
 74 | 		"type": "event"
 75 | 	},
 76 | 	{
 77 | 		"anonymous": false,
 78 | 		"inputs": [
 79 | 			{
 80 | 				"indexed": true,
 81 | 				"internalType": "address",
 82 | 				"name": "from",
 83 | 				"type": "address"
 84 | 			},
 85 | 			{
 86 | 				"indexed": true,
 87 | 				"internalType": "address",
 88 | 				"name": "to",
 89 | 				"type": "address"
 90 | 			},
 91 | 			{
 92 | 				"indexed": true,
 93 | 				"internalType": "uint256",
 94 | 				"name": "tokenId",
 95 | 				"type": "uint256"
 96 | 			}
 97 | 		],
 98 | 		"name": "Transfer",
 99 | 		"type": "event"
100 | 	},
101 | 	{
102 | 		"inputs": [
103 | 			{
104 | 				"internalType": "address",
105 | 				"name": "to",
106 | 				"type": "address"
107 | 			},
108 | 			{
109 | 				"internalType": "uint256",
110 | 				"name": "tokenId",
111 | 				"type": "uint256"
112 | 			}
113 | 		],
114 | 		"name": "approve",
115 | 		"outputs": [],
116 | 		"stateMutability": "nonpayable",
117 | 		"type": "function"
118 | 	},
119 | 	{
120 | 		"inputs": [
121 | 			{
122 | 				"internalType": "address",
123 | 				"name": "owner",
124 | 				"type": "address"
125 | 			}
126 | 		],
127 | 		"name": "balanceOf",
128 | 		"outputs": [
129 | 			{
130 | 				"internalType": "uint256",
131 | 				"name": "",
132 | 				"type": "uint256"
133 | 			}
134 | 		],
135 | 		"stateMutability": "view",
136 | 		"type": "function"
137 | 	},
138 | 	{
139 | 		"inputs": [
140 | 			{
141 | 				"internalType": "uint256",
142 | 				"name": "tokenId",
143 | 				"type": "uint256"
144 | 			}
145 | 		],
146 | 		"name": "getApproved",
147 | 		"outputs": [
148 | 			{
149 | 				"internalType": "address",
150 | 				"name": "",
151 | 				"type": "address"
152 | 			}
153 | 		],
154 | 		"stateMutability": "view",
155 | 		"type": "function"
156 | 	},
157 | 	{
158 | 		"inputs": [
159 | 			{
160 | 				"internalType": "address",
161 | 				"name": "owner",
162 | 				"type": "address"
163 | 			},
164 | 			{
165 | 				"internalType": "address",
166 | 				"name": "operator",
167 | 				"type": "address"
168 | 			}
169 | 		],
170 | 		"name": "isApprovedForAll",
171 | 		"outputs": [
172 | 			{
173 | 				"internalType": "bool",
174 | 				"name": "",
175 | 				"type": "bool"
176 | 			}
177 | 		],
178 | 		"stateMutability": "view",
179 | 		"type": "function"
180 | 	},
181 | 	{
182 | 		"inputs": [
183 | 			{
184 | 				"internalType": "address",
185 | 				"name": "",
186 | 				"type": "address"
187 | 			},
188 | 			{
189 | 				"internalType": "uint256",
190 | 				"name": "",
191 | 				"type": "uint256"
192 | 			}
193 | 		],
194 | 		"name": "models",
195 | 		"outputs": [
196 | 			{
197 | 				"internalType": "uint256",
198 | 				"name": "id",
199 | 				"type": "uint256"
200 | 			},
201 | 			{
202 | 				"internalType": "string",
203 | 				"name": "name",
204 | 				"type": "string"
205 | 			},
206 | 			{
207 | 				"internalType": "string",
208 | 				"name": "hash",
209 | 				"type": "string"
210 | 			}
211 | 		],
212 | 		"stateMutability": "view",
213 | 		"type": "function"
214 | 	},
215 | 	{
216 | 		"inputs": [],
217 | 		"name": "name",
218 | 		"outputs": [
219 | 			{
220 | 				"internalType": "string",
221 | 				"name": "",
222 | 				"type": "string"
223 | 			}
224 | 		],
225 | 		"stateMutability": "view",
226 | 		"type": "function"
227 | 	},
228 | 	{
229 | 		"inputs": [],
230 | 		"name": "owner",
231 | 		"outputs": [
232 | 			{
233 | 				"internalType": "address",
234 | 				"name": "",
235 | 				"type": "address"
236 | 			}
237 | 		],
238 | 		"stateMutability": "view",
239 | 		"type": "function"
240 | 	},
241 | 	{
242 | 		"inputs": [
243 | 			{
244 | 				"internalType": "uint256",
245 | 				"name": "tokenId",
246 | 				"type": "uint256"
247 | 			}
248 | 		],
249 | 		"name": "ownerOf",
250 | 		"outputs": [
251 | 			{
252 | 				"internalType": "address",
253 | 				"name": "",
254 | 				"type": "address"
255 | 			}
256 | 		],
257 | 		"stateMutability": "view",
258 | 		"type": "function"
259 | 	},
260 | 	{
261 | 		"inputs": [],
262 | 		"name": "renounceOwnership",
263 | 		"outputs": [],
264 | 		"stateMutability": "nonpayable",
265 | 		"type": "function"
266 | 	},
267 | 	{
268 | 		"inputs": [
269 | 			{
270 | 				"internalType": "string",
271 | 				"name": "name",
272 | 				"type": "string"
273 | 			},
274 | 			{
275 | 				"internalType": "string",
276 | 				"name": "hash",
277 | 				"type": "string"
278 | 			}
279 | 		],
280 | 		"name": "safeMint",
281 | 		"outputs": [],
282 | 		"stateMutability": "nonpayable",
283 | 		"type": "function"
284 | 	},
285 | 	{
286 | 		"inputs": [
287 | 			{
288 | 				"internalType": "address",
289 | 				"name": "from",
290 | 				"type": "address"
291 | 			},
292 | 			{
293 | 				"internalType": "address",
294 | 				"name": "to",
295 | 				"type": "address"
296 | 			},
297 | 			{
298 | 				"internalType": "uint256",
299 | 				"name": "tokenId",
300 | 				"type": "uint256"
301 | 			}
302 | 		],
303 | 		"name": "safeTransferFrom",
304 | 		"outputs": [],
305 | 		"stateMutability": "nonpayable",
306 | 		"type": "function"
307 | 	},
308 | 	{
309 | 		"inputs": [
310 | 			{
311 | 				"internalType": "address",
312 | 				"name": "from",
313 | 				"type": "address"
314 | 			},
315 | 			{
316 | 				"internalType": "address",
317 | 				"name": "to",
318 | 				"type": "address"
319 | 			},
320 | 			{
321 | 				"internalType": "uint256",
322 | 				"name": "tokenId",
323 | 				"type": "uint256"
324 | 			},
325 | 			{
326 | 				"internalType": "bytes",
327 | 				"name": "data",
328 | 				"type": "bytes"
329 | 			}
330 | 		],
331 | 		"name": "safeTransferFrom",
332 | 		"outputs": [],
333 | 		"stateMutability": "nonpayable",
334 | 		"type": "function"
335 | 	},
336 | 	{
337 | 		"inputs": [
338 | 			{
339 | 				"internalType": "address",
340 | 				"name": "operator",
341 | 				"type": "address"
342 | 			},
343 | 			{
344 | 				"internalType": "bool",
345 | 				"name": "approved",
346 | 				"type": "bool"
347 | 			}
348 | 		],
349 | 		"name": "setApprovalForAll",
350 | 		"outputs": [],
351 | 		"stateMutability": "nonpayable",
352 | 		"type": "function"
353 | 	},
354 | 	{
355 | 		"inputs": [
356 | 			{
357 | 				"internalType": "bytes4",
358 | 				"name": "interfaceId",
359 | 				"type": "bytes4"
360 | 			}
361 | 		],
362 | 		"name": "supportsInterface",
363 | 		"outputs": [
364 | 			{
365 | 				"internalType": "bool",
366 | 				"name": "",
367 | 				"type": "bool"
368 | 			}
369 | 		],
370 | 		"stateMutability": "view",
371 | 		"type": "function"
372 | 	},
373 | 	{
374 | 		"inputs": [],
375 | 		"name": "symbol",
376 | 		"outputs": [
377 | 			{
378 | 				"internalType": "string",
379 | 				"name": "",
380 | 				"type": "string"
381 | 			}
382 | 		],
383 | 		"stateMutability": "view",
384 | 		"type": "function"
385 | 	},
386 | 	{
387 | 		"inputs": [
388 | 			{
389 | 				"internalType": "uint256",
390 | 				"name": "tokenId",
391 | 				"type": "uint256"
392 | 			}
393 | 		],
394 | 		"name": "tokenURI",
395 | 		"outputs": [
396 | 			{
397 | 				"internalType": "string",
398 | 				"name": "",
399 | 				"type": "string"
400 | 			}
401 | 		],
402 | 		"stateMutability": "view",
403 | 		"type": "function"
404 | 	},
405 | 	{
406 | 		"inputs": [
407 | 			{
408 | 				"internalType": "address",
409 | 				"name": "from",
410 | 				"type": "address"
411 | 			},
412 | 			{
413 | 				"internalType": "address",
414 | 				"name": "to",
415 | 				"type": "address"
416 | 			},
417 | 			{
418 | 				"internalType": "uint256",
419 | 				"name": "tokenId",
420 | 				"type": "uint256"
421 | 			}
422 | 		],
423 | 		"name": "transferFrom",
424 | 		"outputs": [],
425 | 		"stateMutability": "nonpayable",
426 | 		"type": "function"
427 | 	},
428 | 	{
429 | 		"inputs": [
430 | 			{
431 | 				"internalType": "address",
432 | 				"name": "newOwner",
433 | 				"type": "address"
434 | 			}
435 | 		],
436 | 		"name": "transferOwnership",
437 | 		"outputs": [],
438 | 		"stateMutability": "nonpayable",
439 | 		"type": "function"
440 | 	}
441 | ]
442 | 


--------------------------------------------------------------------------------