├── .gitattributes ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public ├── favicon.png ├── img │ ├── avax.png │ ├── image-62.png │ ├── image.jpg │ ├── images (2).jpg │ ├── images (3).jpg │ ├── images.jpg │ ├── item.jpg │ ├── like_filled.png │ ├── like_outline.png │ ├── store-front.png │ └── usdt.png ├── index.html ├── logo.png ├── logo192.png ├── logo512.png ├── logo_kadena.jpeg ├── logo_kdasea.png ├── manifest.json └── robots.txt └── src ├── App.css ├── App.js ├── App.test.js ├── abi ├── marketplace.abi.json └── nft.abi.json ├── actionType ├── auth.actionTypes.js └── walletconnect.actionTypes.js ├── actions ├── auth.actions.js └── walletconnect.actions.js ├── api ├── api.js ├── index.js └── pinata.js ├── components ├── AfterLoginFooter.jsx ├── AfterLoginHeader.jsx ├── BootstrapTooltip │ └── index.js ├── Connectors.js ├── Drop.jsx ├── Footer.js ├── Header.js ├── Item.js ├── Loading.js ├── Nft.jsx ├── PriceInput.js ├── ProfileItem.js ├── Tab │ ├── Top.jsx │ └── Trending.jsx ├── WalletProvider.js ├── admin.js ├── assets │ ├── avax.png │ ├── close.svg │ ├── error.svg │ ├── info.svg │ ├── like_filled.png │ ├── like_outline.png │ ├── nft_loading.json │ ├── plus.svg │ ├── success.svg │ ├── upload.png │ ├── usdt.png │ └── warning.svg ├── explorer │ ├── ExploreCategories.jsx │ ├── LGBTQIA.jsx │ ├── NFT101.jsx │ ├── NotableCollections.jsx │ ├── TopCollectorBuysToday.jsx │ ├── TrendingInArt.jsx │ ├── TrendingInGaming.jsx │ ├── TrendingInMemberships.jsx │ ├── TrendingInMusic.jsx │ ├── TrendingInPFPs.jsx │ └── TrendingInPhotography.jsx ├── profile.css └── toast │ ├── index.js │ └── styles.module.scss ├── constants ├── errors.js └── ipfs.constants.js ├── contract ├── abi.js ├── factory.js ├── index.js └── sales.js ├── errors.js ├── hooks └── useContract.js ├── images ├── 2Pac Greatest Hits.jpg ├── All Eyez On Me.jpg ├── Dire Straits Brothers in Arms.jpg ├── DownArrow.svg ├── DownIcon.svg ├── FaceBook.svg ├── Filter.svg ├── HIcon.PNG ├── HeaderIcon.PNG ├── Instagram.svg ├── LOGO.svg ├── Notification.svg ├── Private Investigation.jpg ├── Search.svg ├── Twitter.svg ├── UpIcon.svg ├── Upload.svg ├── apple.svg ├── back.svg ├── banner.svg ├── copyIcon.PNG ├── eckoWallet.jpg ├── front.webp ├── googleIcon.svg ├── loveIcon.svg ├── metamask.svg ├── profile.dev.jpeg ├── profile.jpg ├── store-front.png ├── storeFront.PNG └── storeFront.dev.PNG ├── index.css ├── index.js ├── logo.svg ├── pages ├── CreateAlbum.jsx ├── DetailPage.js ├── LoginPage.jsx ├── MainPage.js ├── MintPage.jsx ├── ProfilePage.js ├── ProfilePage2.jsx ├── SellPage.js ├── StoreFrontPage.jsx ├── detail.css ├── mint.css ├── mint │ ├── MintPage.jsx │ ├── index-test.jsx │ ├── index.jsx │ └── styles.module.scss ├── profile.css ├── sell.css ├── styles.module.css └── styles.module.scss ├── reducers ├── auth.reducers.js ├── connectwallet.reducers.js └── index.js ├── reportWebVitals.js ├── setupTests.js ├── stores └── reduxStore.js ├── utils.js └── utils ├── index.js ├── sc.interaction.js └── wallet.js /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | .pnpm-debug.log* 9 | 10 | # Diagnostic reports (https://nodejs.org/api/report.html) 11 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 12 | 13 | # Runtime data 14 | pids 15 | *.pid 16 | *.seed 17 | *.pid.lock 18 | 19 | # Directory for instrumented libs generated by jscoverage/JSCover 20 | lib-cov 21 | 22 | # Coverage directory used by tools like istanbul 23 | coverage 24 | *.lcov 25 | 26 | # nyc test coverage 27 | .nyc_output 28 | 29 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 30 | .grunt 31 | 32 | # Bower dependency directory (https://bower.io/) 33 | bower_components 34 | 35 | # node-waf configuration 36 | .lock-wscript 37 | 38 | # Compiled binary addons (https://nodejs.org/api/addons.html) 39 | build/Release 40 | 41 | # Dependency directories 42 | node_modules/ 43 | jspm_packages/ 44 | 45 | # Snowpack dependency directory (https://snowpack.dev/) 46 | web_modules/ 47 | 48 | # TypeScript cache 49 | *.tsbuildinfo 50 | 51 | # Optional npm cache directory 52 | .npm 53 | 54 | # Optional eslint cache 55 | .eslintcache 56 | 57 | # Optional stylelint cache 58 | .stylelintcache 59 | 60 | # Microbundle cache 61 | .rpt2_cache/ 62 | .rts2_cache_cjs/ 63 | .rts2_cache_es/ 64 | .rts2_cache_umd/ 65 | 66 | # Optional REPL history 67 | .node_repl_history 68 | 69 | # Output of 'npm pack' 70 | *.tgz 71 | 72 | # Yarn Integrity file 73 | .yarn-integrity 74 | 75 | # dotenv environment variable files 76 | .env 77 | .env.development.local 78 | .env.test.local 79 | .env.production.local 80 | .env.local 81 | 82 | # parcel-bundler cache (https://parceljs.org/) 83 | .cache 84 | .parcel-cache 85 | 86 | # Next.js build output 87 | .next 88 | out 89 | 90 | # Nuxt.js build / generate output 91 | .nuxt 92 | dist 93 | build 94 | 95 | # Gatsby files 96 | .cache/ 97 | # Comment in the public line in if your project uses Gatsby and not Next.js 98 | # https://nextjs.org/blog/next-9-1#public-directory-support 99 | # public 100 | 101 | # vuepress build output 102 | .vuepress/dist 103 | 104 | # vuepress v2.x temp and cache directory 105 | .temp 106 | .cache 107 | 108 | # Serverless directories 109 | .serverless/ 110 | 111 | # FuseBox cache 112 | .fusebox/ 113 | 114 | # DynamoDB Local files 115 | .dynamodb/ 116 | 117 | # TernJS port file 118 | .tern-port 119 | 120 | # Stores VSCode versions used for testing VSCode extensions 121 | .vscode-test 122 | 123 | # yarn v2 124 | .yarn/cache 125 | .yarn/unplugged 126 | .yarn/build-state.yml 127 | .yarn/install-state.gz 128 | .pnp.* 129 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "rightsmint.com", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@emotion/react": "^11.8.2", 7 | "@emotion/styled": "^11.8.1", 8 | "@ethersproject/bignumber": "^5.6.0", 9 | "@ethersproject/contracts": "^5.6.0", 10 | "@ethersproject/providers": "^5.6.2", 11 | "@ethersproject/units": "^5.6.0", 12 | "@iconify/icons-ant-design": "^1.1.0", 13 | "@iconify/icons-eva": "^1.1.0", 14 | "@iconify/icons-ic": "^1.1.10", 15 | "@iconify/react": "^3.0.1", 16 | "@material-ui/core": "^4.12.4", 17 | "@material-ui/icons": "^4.11.3", 18 | "@mui/core": "^5.0.0-alpha.54", 19 | "@mui/icons-material": "^5.11.16", 20 | "@mui/lab": "^5.0.0-alpha.68", 21 | "@mui/material": "^5.5.3", 22 | "@mui/styled-engine": "^5.5.2", 23 | "@mui/system": "^5.5.3", 24 | "@testing-library/jest-dom": "^5.16.3", 25 | "@testing-library/react": "^12.1.4", 26 | "@testing-library/user-event": "^13.5.0", 27 | "@web3-react/core": "^6.1.9", 28 | "@web3-react/injected-connector": "^6.0.7", 29 | "axios": "^0.26.1", 30 | "bignumber.js": "^9.0.2", 31 | "classnames": "^2.3.1", 32 | "ethers": "^5.6.2", 33 | "form-data": "^4.0.0", 34 | "lottie-react": "^2.2.1", 35 | "react": "^17.0.2", 36 | "react-dom": "^17.0.2", 37 | "react-dropdown-select": "^4.7.4", 38 | "react-dropzone": "^12.0.4", 39 | "react-hot-toast": "^2.2.0", 40 | "react-loading-skeleton": "^3.0.3", 41 | "react-redux": "^7.2.8", 42 | "react-router": "^6.3.0", 43 | "react-router-dom": "^6.2.2", 44 | "react-scripts": "5.0.0", 45 | "react-slick": "^0.29.0", 46 | "react-spinners": "^0.11.0", 47 | "recharts": "^2.1.9", 48 | "redux-logger": "^3.0.6", 49 | "redux-thunk": "^2.4.1", 50 | "sass": "^1.49.11", 51 | "sass-loader": "^12.6.0", 52 | "slick-carousel": "^1.8.1", 53 | "styled-components": "^5.3.5", 54 | "sweetalert2": "^11.4.7", 55 | "web-vitals": "^2.1.4" 56 | }, 57 | "scripts": { 58 | "start": "react-scripts start", 59 | "build": "react-scripts build", 60 | "test": "react-scripts test", 61 | "eject": "react-scripts eject" 62 | }, 63 | "eslintConfig": { 64 | "extends": [ 65 | "react-app", 66 | "react-app/jest" 67 | ] 68 | }, 69 | "browserslist": { 70 | "production": [ 71 | ">0.2%", 72 | "not dead", 73 | "not op_mini all" 74 | ], 75 | "development": [ 76 | "last 1 chrome version", 77 | "last 1 firefox version", 78 | "last 1 safari version" 79 | ] 80 | }, 81 | "engines": { 82 | "node": "16.x" 83 | } 84 | } 85 | -------------------------------------------------------------------------------- /public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cosmos-AI/KdaSea-Frontend/f1c051b0cfa86ffc2d5061700eb4eb1c99c18c28/public/favicon.png -------------------------------------------------------------------------------- /public/img/avax.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cosmos-AI/KdaSea-Frontend/f1c051b0cfa86ffc2d5061700eb4eb1c99c18c28/public/img/avax.png -------------------------------------------------------------------------------- /public/img/image-62.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cosmos-AI/KdaSea-Frontend/f1c051b0cfa86ffc2d5061700eb4eb1c99c18c28/public/img/image-62.png -------------------------------------------------------------------------------- /public/img/image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cosmos-AI/KdaSea-Frontend/f1c051b0cfa86ffc2d5061700eb4eb1c99c18c28/public/img/image.jpg -------------------------------------------------------------------------------- /public/img/images (2).jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cosmos-AI/KdaSea-Frontend/f1c051b0cfa86ffc2d5061700eb4eb1c99c18c28/public/img/images (2).jpg -------------------------------------------------------------------------------- /public/img/images (3).jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cosmos-AI/KdaSea-Frontend/f1c051b0cfa86ffc2d5061700eb4eb1c99c18c28/public/img/images (3).jpg -------------------------------------------------------------------------------- /public/img/images.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cosmos-AI/KdaSea-Frontend/f1c051b0cfa86ffc2d5061700eb4eb1c99c18c28/public/img/images.jpg -------------------------------------------------------------------------------- /public/img/item.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cosmos-AI/KdaSea-Frontend/f1c051b0cfa86ffc2d5061700eb4eb1c99c18c28/public/img/item.jpg -------------------------------------------------------------------------------- /public/img/like_filled.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cosmos-AI/KdaSea-Frontend/f1c051b0cfa86ffc2d5061700eb4eb1c99c18c28/public/img/like_filled.png -------------------------------------------------------------------------------- /public/img/like_outline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cosmos-AI/KdaSea-Frontend/f1c051b0cfa86ffc2d5061700eb4eb1c99c18c28/public/img/like_outline.png -------------------------------------------------------------------------------- /public/img/store-front.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cosmos-AI/KdaSea-Frontend/f1c051b0cfa86ffc2d5061700eb4eb1c99c18c28/public/img/store-front.png -------------------------------------------------------------------------------- /public/img/usdt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cosmos-AI/KdaSea-Frontend/f1c051b0cfa86ffc2d5061700eb4eb1c99c18c28/public/img/usdt.png -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | 28 | KdaSea 29 | 30 | 31 | 32 |
33 | 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /public/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cosmos-AI/KdaSea-Frontend/f1c051b0cfa86ffc2d5061700eb4eb1c99c18c28/public/logo.png -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cosmos-AI/KdaSea-Frontend/f1c051b0cfa86ffc2d5061700eb4eb1c99c18c28/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cosmos-AI/KdaSea-Frontend/f1c051b0cfa86ffc2d5061700eb4eb1c99c18c28/public/logo512.png -------------------------------------------------------------------------------- /public/logo_kadena.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cosmos-AI/KdaSea-Frontend/f1c051b0cfa86ffc2d5061700eb4eb1c99c18c28/public/logo_kadena.jpeg -------------------------------------------------------------------------------- /public/logo_kdasea.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cosmos-AI/KdaSea-Frontend/f1c051b0cfa86ffc2d5061700eb4eb1c99c18c28/public/logo_kdasea.png -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | .header-container { 2 | height: 10vh; 3 | background-color: aquamarine; 4 | } 5 | 6 | .nft-item { 7 | height: 25rem; 8 | border-radius: 10px; 9 | overflow: hidden; 10 | } 11 | 12 | .item-text-title { 13 | font-size: 20px; 14 | font-weight: bold; 15 | color: black; 16 | } 17 | 18 | .item-text-type { 19 | font-size: 12px; 20 | } 21 | 22 | .item-text-price { 23 | font-size: 15px; 24 | } 25 | 26 | .item-text-like { 27 | font-size: 18px; 28 | } 29 | 30 | .item-text-buy { 31 | font-size: 17px; 32 | font-weight: bold; 33 | color: rgb(32, 129, 226); 34 | cursor: pointer; 35 | } 36 | 37 | .text-button-connect { 38 | font-size: 16px; 39 | cursor: pointer; 40 | } 41 | 42 | .img-crypto { 43 | height: 14px; 44 | width: 14px; 45 | } 46 | 47 | .img-like { 48 | height: 16px; 49 | width: 16px; 50 | cursor: pointer; 51 | } 52 | 53 | .footer-container { 54 | background-color: rgb(24, 104, 183); 55 | font-size: 20px; 56 | } 57 | 58 | .button-container { 59 | height: 24px; 60 | } 61 | 62 | .button-address { 63 | cursor: pointer; 64 | } 65 | 66 | .main-container { 67 | min-height: calc(100vh - 122px); 68 | } 69 | 70 | .btn-login:hover { 71 | opacity: 0.8; 72 | transition: all 0.4s; 73 | } 74 | 75 | .dark { 76 | background-color: #282828; 77 | } 78 | 79 | 80 | 81 | /* Opensea css */ 82 | 83 | .header { 84 | --transition-curve: cubic-bezier(0.05, 0, 0.2, 1); 85 | box-shadow: rgba(229, 232, 235, 0) 0px 1px 0px 0px; 86 | max-width: 100vw; 87 | height: 72px; 88 | top: 0px; 89 | position: sticky; 90 | z-index: 150; 91 | transition: top 0.5s var(--transition-curve), 92 | background-color 0.2s var(--transition-curve), 93 | box-shadow 0.2s var(--transition-curve), 94 | color 0.2s var(--transition-curve); 95 | background-color: transparent; 96 | } 97 | 98 | .searchInput:focus { 99 | border: none; 100 | outline: none; 101 | } -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import "./App.css"; 2 | import React, { useState, useEffect } from "react"; 3 | import { 4 | BrowserRouter as Router, 5 | Routes, 6 | Route, 7 | Navigate, 8 | useNavigate, 9 | } from "react-router-dom"; 10 | import Loading from "./components/Loading"; 11 | import Header from "./components/Header"; 12 | import Footer from "./components/Footer"; 13 | import MainPage from "./pages/MainPage"; 14 | import { useWeb3React } from "@web3-react/core"; 15 | import { injected } from "./components/Connectors"; 16 | import Swal from "sweetalert2"; 17 | import DetailPage from "./pages/DetailPage"; 18 | import MintPage from "./pages/mint"; 19 | import CreateAlbum from "./pages/CreateAlbum"; 20 | import ProfilePage from "./pages/ProfilePage"; 21 | import SellPage from "./pages/SellPage"; 22 | import { login } from "./api/api"; 23 | import LoginPage from "./pages/LoginPage"; 24 | import AfterLoginHeader from "./components/AfterLoginHeader"; 25 | import StoreFrontPage from "./pages/StoreFrontPage"; 26 | import AferLoginFooter from "./components/AfterLoginFooter"; 27 | import ProfilePage2 from "./pages/ProfilePage2"; 28 | import { createTheme } from "@mui/material"; 29 | import { MuiThemeProvider } from "@material-ui/core"; 30 | import { pink } from "@mui/material/colors"; 31 | 32 | function App() { 33 | const { active, account, library, activate } = useWeb3React(); 34 | const [isLoaded, setLoaded] = useState(false); 35 | const [conn, setConn] = useState(false); 36 | 37 | useEffect(() => { 38 | const timer = setTimeout(() => { 39 | setLoaded(true); 40 | }, 5000); 41 | 42 | return () => clearTimeout(timer); 43 | }, []); 44 | 45 | useEffect(() => { 46 | if (active) setConn(true); 47 | else setConn(false); 48 | }, [active]); 49 | 50 | useEffect(() => { 51 | if (conn) { 52 | login(account).then((res) => { 53 | console.log(res); 54 | }); 55 | } 56 | }, [conn]); 57 | 58 | const [mode, setMode] = useState("light"); 59 | 60 | if (!isLoaded) return ; 61 | 62 | return ( 63 |
64 | 65 | {/* {conn?():(
)} */} 66 |
67 | 68 | } 72 | /> 73 | } /> 74 | } 78 | /> 79 | } /> 80 | 81 | {account ? ( 82 | 86 | } 87 | /> 88 | ) : ( 89 | } /> 90 | )} 91 | 92 | 98 | ) : ( 99 | 100 | ) 101 | } 102 | /> 103 | : 108 | } 109 | /> 110 | 111 | 116 | ) : ( 117 | 118 | ) 119 | } 120 | /> 121 | 122 | 123 | 128 | ) : ( 129 | 130 | ) 131 | } 132 | /> 133 | 134 | 135 |
136 | 137 |
138 | ); 139 | } 140 | 141 | export default App; 142 | -------------------------------------------------------------------------------- /src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /src/abi/marketplace.abi.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "constant": false, 4 | "inputs": [ 5 | { 6 | "name": "_tokenId", 7 | "type": "uint256" 8 | }, 9 | { 10 | "name": "_quoteToken", 11 | "type": "address" 12 | }, 13 | { 14 | "name": "_price", 15 | "type": "uint256" 16 | } 17 | ], 18 | "name": "createOrderForSale", 19 | "outputs": [], 20 | "payable": false, 21 | "stateMutability": "nonpayable", 22 | "type": "function" 23 | }, 24 | { 25 | "constant": false, 26 | "inputs": [ 27 | { 28 | "name": "_orderId", 29 | "type": "uint256" 30 | } 31 | ], 32 | "name": "buyForOrder", 33 | "outputs": [], 34 | "payable": true, 35 | "stateMutability": "payable", 36 | "type": "function" 37 | }, 38 | { 39 | "name": "OrderForSale", 40 | "inputs": [ 41 | { 42 | "name": "_seller", 43 | "type": "address" 44 | }, 45 | { 46 | "name": "_orderId", 47 | "type": "uint256", 48 | "indexed": true 49 | }, 50 | { 51 | "name": "_tokenId", 52 | "type": "uint256", 53 | "indexed": true 54 | }, 55 | { 56 | "name": "_quoteToken", 57 | "type": "address", 58 | "indexed": true 59 | }, 60 | { 61 | "name": "_price", 62 | "type": "uint256" 63 | } 64 | ], 65 | "type": "event" 66 | }, 67 | { 68 | "name": "OrderFilled", 69 | "inputs": [ 70 | { 71 | "name": "_seller", 72 | "type": "address" 73 | }, 74 | { 75 | "name": "_buyer", 76 | "type": "address", 77 | "indexed": true 78 | }, 79 | { 80 | "name": "_orderId", 81 | "type": "uint256", 82 | "indexed": true 83 | }, 84 | { 85 | "name": "_quoteToken", 86 | "type": "address", 87 | "indexed": true 88 | }, 89 | { 90 | "name": "_price", 91 | "type": "uint256" 92 | } 93 | ], 94 | "type": "event" 95 | } 96 | ] -------------------------------------------------------------------------------- /src/abi/nft.abi.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "constant": false, 4 | "inputs": [ 5 | { 6 | "name": "uri", 7 | "type": "string" 8 | } 9 | ], 10 | "name": "mint", 11 | "outputs": [ 12 | { 13 | "name": "tokenId", 14 | "type": "uint256" 15 | } 16 | ], 17 | "payable": false, 18 | "stateMutability": "nonpayable", 19 | "type": "function" 20 | }, 21 | { 22 | "constant": false, 23 | "inputs": [ 24 | { 25 | "name": "uri", 26 | "type": "string[]" 27 | } 28 | ], 29 | "name": "mintBatch", 30 | "outputs": [ 31 | { 32 | "name": "tokenIds", 33 | "type": "uint256[]" 34 | } 35 | ], 36 | "payable": false, 37 | "stateMutability": "nonpayable", 38 | "type": "function" 39 | }, 40 | { 41 | "constant": false, 42 | "inputs": [ 43 | { 44 | "name": "to", 45 | "type": "address" 46 | }, 47 | { 48 | "name": "tokenId", 49 | "type": "uint256" 50 | } 51 | ], 52 | "name": "approve", 53 | "outputs": [], 54 | "payable": false, 55 | "stateMutability": "nonpayable", 56 | "type": "function" 57 | }, 58 | { 59 | "name": "Transfer", 60 | "inputs": [ 61 | { 62 | "name": "from", 63 | "type": "address", 64 | "indexed": true 65 | }, 66 | { 67 | "name": "to", 68 | "type": "address", 69 | "indexed": true 70 | }, 71 | { 72 | "name": "tokenId", 73 | "type": "uint256", 74 | "indexed": true 75 | } 76 | ], 77 | "type": "event" 78 | }, 79 | { 80 | "name": "Approval", 81 | "inputs": [ 82 | { 83 | "name": "owner", 84 | "type": "address", 85 | "indexed": true 86 | }, 87 | { 88 | "name": "approved", 89 | "type": "address", 90 | "indexed": true 91 | }, 92 | { 93 | "name": "tokenId", 94 | "type": "uint256", 95 | "indexed": true 96 | } 97 | ], 98 | "type": "event" 99 | } 100 | ] -------------------------------------------------------------------------------- /src/actionType/auth.actionTypes.js: -------------------------------------------------------------------------------- 1 | export const AuthConstants = { 2 | PROFILE_GET_START: 'PROFILE_GET_START', 3 | PROFILE_GET_SUCCESS: 'PROFILE_GET_SUCCESS', 4 | PROFILE_GET_FAILED: 'PROFILE_GET_FAILED', 5 | SIGN_OUT: 'SIGN_OUT', 6 | }; 7 | -------------------------------------------------------------------------------- /src/actionType/walletconnect.actionTypes.js: -------------------------------------------------------------------------------- 1 | export const WalletConnectConstants = { 2 | WALLETCONNECTED: 'WALLETCONNECTED', 3 | WALLETDISCONNECTED: 'WALLETDISCONNECTED', 4 | }; 5 | -------------------------------------------------------------------------------- /src/actions/auth.actions.js: -------------------------------------------------------------------------------- 1 | import { AuthConstants } from '../actionType/auth.actionTypes'; 2 | 3 | const AuthActions = { 4 | fetchStart, 5 | fetchSuccess, 6 | fetchFailed, 7 | signOut, 8 | }; 9 | 10 | function fetchStart() { 11 | return dispatch => { 12 | dispatch(_fetchStart()); 13 | }; 14 | } 15 | 16 | const _fetchStart = () => { 17 | return { 18 | type: AuthConstants.PROFILE_GET_START, 19 | }; 20 | }; 21 | 22 | function fetchSuccess(user) { 23 | return dispatch => { 24 | dispatch(_fetchSuccess(user)); 25 | }; 26 | } 27 | 28 | const _fetchSuccess = user => { 29 | return { 30 | type: AuthConstants.PROFILE_GET_SUCCESS, 31 | payload: user, 32 | }; 33 | }; 34 | 35 | function fetchFailed() { 36 | return dispatch => { 37 | dispatch(_fetchFailed()); 38 | }; 39 | } 40 | 41 | const _fetchFailed = () => { 42 | return { 43 | type: AuthConstants.PROFILE_GET_FAILED, 44 | }; 45 | }; 46 | 47 | function signOut() { 48 | return dispatch => { 49 | dispatch(_signOut()); 50 | }; 51 | } 52 | 53 | const _signOut = () => { 54 | return { 55 | type: AuthConstants.SIGN_OUT, 56 | }; 57 | }; 58 | 59 | export default AuthActions; 60 | -------------------------------------------------------------------------------- /src/actions/walletconnect.actions.js: -------------------------------------------------------------------------------- 1 | import { WalletConnectConstants } from '../actionType/walletconnect.actionTypes'; 2 | 3 | const WalletConnectActions = { 4 | connectWallet, 5 | disconnectWallet, 6 | }; 7 | 8 | function connectWallet(authToken, isModerator) { 9 | return dispatch => { 10 | dispatch(_connectWallet(authToken, isModerator)); 11 | }; 12 | } 13 | 14 | const _connectWallet = (authToken, isModerator) => { 15 | return { 16 | type: WalletConnectConstants.WALLETCONNECTED, 17 | token: authToken, 18 | isModerator, 19 | }; 20 | }; 21 | 22 | function disconnectWallet() { 23 | return dispatch => { 24 | dispatch(_disconnectWallet()); 25 | }; 26 | } 27 | 28 | const _disconnectWallet = () => { 29 | return { 30 | type: WalletConnectConstants.WALLETDISCONNECTED, 31 | }; 32 | }; 33 | 34 | export default WalletConnectActions; 35 | -------------------------------------------------------------------------------- /src/api/api.js: -------------------------------------------------------------------------------- 1 | import Axios from 'axios'; 2 | 3 | Axios.defaults.baseURL = 'https://wow-marketplace.herokuapp.com/api/'; 4 | 5 | export async function getUserData(addr) { 6 | const result = await Axios.get('/users/current', { 7 | params: { 8 | address: addr 9 | } 10 | }).then( 11 | async function(response) { 12 | return response.data; 13 | } 14 | ).catch(err => { 15 | console.log(err); 16 | return null; 17 | }); 18 | 19 | return result; 20 | } 21 | 22 | export async function login(addr) { 23 | const result = await Axios.post('/users/login', { 24 | address: addr 25 | }).then( 26 | async function(response) { 27 | return response.data; 28 | } 29 | ).catch(err => { 30 | console.log(err); 31 | return null; 32 | }); 33 | 34 | return result; 35 | } 36 | 37 | export async function getTokenData(tokenIds) { 38 | if(tokenIds.length > 1) { 39 | const result = await Axios.post('/nfts/tokens', { 40 | tokenIds: tokenIds 41 | }).then( 42 | async function(response) { 43 | return response.data; 44 | } 45 | ).catch(err => { 46 | console.log(err); 47 | return null; 48 | }); 49 | 50 | return result; 51 | } 52 | if(tokenIds.length < 2) { 53 | const result = await Axios.post('/nfts/token', { 54 | tokenId: tokenIds[0] 55 | }).then( 56 | async function(response) { 57 | const resData = []; 58 | resData.push(response.data); 59 | return resData; 60 | } 61 | ).catch(err => { 62 | console.log(err); 63 | return null; 64 | }); 65 | 66 | return result; 67 | } 68 | } 69 | 70 | export async function createNft(tokenId, tokenUri, account) { 71 | const result = await Axios.post('/nfts/create', { 72 | tokenId: tokenId, 73 | tokenUri: tokenUri, 74 | operator: account 75 | }).then( 76 | async function(response) { 77 | return response.data; 78 | } 79 | ).catch(err => { 80 | console.log(err); 81 | return null; 82 | }); 83 | 84 | return result; 85 | } 86 | 87 | export async function createOrder(orderId, tokenId, quoteToken, price, seller) { 88 | const result = await Axios.post('/orders/create', { 89 | id: orderId, 90 | tokenId: tokenId, 91 | quoteToken: quoteToken, 92 | price: price, 93 | seller: seller 94 | }).then( 95 | async function(response) { 96 | return response.data; 97 | } 98 | ).catch(err => { 99 | console.log(err); 100 | return null; 101 | }); 102 | 103 | return result; 104 | } 105 | 106 | export async function getAllOrders() { 107 | const result = await Axios.get('/orders/allOpenOrders').then(res => { 108 | return res.data; 109 | }).catch(err => { 110 | console.log(err); 111 | return null; 112 | }); 113 | 114 | return result; 115 | } 116 | 117 | export async function getOrder(orderId) { 118 | const result = await Axios.post('/orders/order', { 119 | id: orderId 120 | }).then(res => { 121 | return res.data; 122 | }).catch(err => { 123 | console.log(err); 124 | return null; 125 | }); 126 | 127 | return result; 128 | } 129 | 130 | export async function addToLike(tokenId, operator) { 131 | const result = await Axios.post('/nfts/like', { 132 | tokenId: tokenId, 133 | operator: operator 134 | }).then( 135 | async function(response) { 136 | return response.data; 137 | } 138 | ).catch(err => { 139 | console.log(err); 140 | return null; 141 | }); 142 | 143 | return result; 144 | } 145 | 146 | export async function buyOrder(orderId, buyer) { 147 | const result = await Axios.post('/orders/buy', { 148 | id: orderId, 149 | buyer: buyer 150 | }).then( 151 | async function(response) { 152 | return response.data; 153 | } 154 | ).catch(err => { 155 | console.log(err); 156 | return null; 157 | }); 158 | 159 | return result; 160 | } 161 | -------------------------------------------------------------------------------- /src/api/pinata.js: -------------------------------------------------------------------------------- 1 | import Axios from 'axios'; 2 | import FormData from 'form-data'; 3 | 4 | const url_file = 'https://api.pinata.cloud/pinning/pinFileToIPFS'; 5 | const url_json = 'https://api.pinata.cloud/pinning/pinJSONToIPFS' 6 | const API_KEY = '4faa835f88b04bfff75c'; 7 | const API_SECRET = '83ee05be67b55a1ff93c75dd81162ef872a97b6362c4f074e00489c2ab0484cd'; 8 | 9 | export async function uploadImageToPinata(data) { 10 | const formData = new FormData(); 11 | formData.append('file', data); 12 | const result = await Axios.post(url_file, formData, { 13 | maxContentLength: 'Infinity', 14 | headers: { 15 | 'Content-Type': `multipart/form-data;boundary=${formData._boundary}`, 16 | 'pinata_api_key': API_KEY, 17 | 'pinata_secret_api_key': API_SECRET 18 | } 19 | }).then( 20 | async function(response) { 21 | return response.data; 22 | } 23 | ).catch(err => { 24 | console.log(err); 25 | return null; 26 | }); 27 | 28 | return result; 29 | } 30 | 31 | export async function uploadMetaDataToPinata(data) { 32 | const result = await Axios.post(url_json, data, { 33 | headers: { 34 | 'pinata_api_key': API_KEY, 35 | 'pinata_secret_api_key': API_SECRET 36 | } 37 | }).then( 38 | async function(response) { 39 | return response.data; 40 | } 41 | ).catch(err => { 42 | console.log(err); 43 | return null; 44 | }); 45 | 46 | return result; 47 | } 48 | -------------------------------------------------------------------------------- /src/components/AfterLoginFooter.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styled from "styled-components"; 3 | // import HeaderIcon from "../images/HeaderIcon.PNG"; 4 | import InstagramIcon from "../images/Instagram.svg"; 5 | import TwitterIcon from "../images/Twitter.svg"; 6 | import FaceBookIcon from "../images/FaceBook.svg"; 7 | 8 | function AfterLoginFooter(props) { 9 | return ( 10 | 11 |
12 |
13 |

KdaSea

14 |

15 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 16 | eiusmod tempor 17 |

18 | 29 |
30 |
31 | 32 |
33 |

Linkquid

34 |
35 | Discover 36 | ArtWork 37 | Explore 38 | How it Work 39 |
40 |
41 | 42 |
43 |

Community

44 |
45 | FAQ 46 | Help Center 47 | Mint NFT 48 | Feedback 49 |
50 |
51 | 52 |
53 |

Join NewsLetter

54 |

Lorem Ipsum is simply dummy and typesetti

55 | 56 |
57 | 58 | 59 | 60 |
61 | 62 | 63 | 64 |
65 |
66 |

© 2023 Copyright ownership • All Rights Reserved

67 |
68 | 69 | ); 70 | } 71 | 72 | const Container = styled.div` 73 | display: flex; 74 | flex-direction: column; 75 | background: #282828; 76 | padding: 60px 0px 40px 0px; 77 | align-items: center; 78 | width : 100vw; 79 | 80 | .footer { 81 | display: flex; 82 | width : 70%; 83 | 84 | .social { 85 | .title { 86 | font-weight: 700; 87 | font-size: 28px; 88 | color: white; 89 | } 90 | 91 | .social_info { 92 | width: 200px; 93 | color: white; 94 | margin-top: 20px; 95 | font-size: 14px; 96 | } 97 | 98 | .icons { 99 | margin-top: 25px; 100 | display: flex; 101 | width: fit-content; 102 | 103 | .icon { 104 | display: flex; 105 | padding: 0px 8px 0px 8px; 106 | align-items: center; 107 | justify-content: center; 108 | border: 3px solid white; 109 | border-radius: 50%; 110 | margin-right: 20px; 111 | } 112 | 113 | .facebook_icon { 114 | padding: 8px 14px 8px 14px; 115 | } 116 | 117 | .instagram_icon { 118 | padding: 8px 9px 8px 9px; 119 | } 120 | } 121 | } 122 | 123 | .links_div { 124 | display: flex; 125 | padding-left: 40px; 126 | flex : 1; 127 | width : 100%; 128 | justify-content : space-between; 129 | 130 | .linkquid_div { 131 | margin-left: 20px; 132 | .title { 133 | color: #fb25bd; 134 | margin-bottom: 20px; 135 | font-weight: 600; 136 | font-size: 20px; 137 | } 138 | 139 | .links { 140 | display : flex; 141 | flex-direction: column; 142 | a{ 143 | color: white; 144 | font-weight: 500; 145 | font-size: 14px; 146 | margin-bottom : 20px; 147 | text-decoration: none; 148 | } 149 | } 150 | } 151 | } 152 | 153 | .third{ 154 | .info{ 155 | width: 200px; 156 | color: white; 157 | margin-top: 20px; 158 | font-size: 14px; 159 | } 160 | 161 | input{ 162 | border-radius : 5px; 163 | border : 0; 164 | padding : 15px 10px 15px 10px; 165 | width : 250px; 166 | margin-top : 30px; 167 | outline-width : 0; 168 | } 169 | } 170 | } 171 | 172 | .copyright{ 173 | p{ 174 | text-align : center; 175 | color : white; 176 | font-size: 14px; 177 | margin-top : 30px; 178 | margin-bottom : 15px; 179 | } 180 | } 181 | `; 182 | 183 | export default AfterLoginFooter; 184 | -------------------------------------------------------------------------------- /src/components/AfterLoginHeader.jsx: -------------------------------------------------------------------------------- 1 | import React , {useState , useEffect} from "react"; 2 | import styled from "styled-components"; 3 | import HeaderIcon from "../images/HeaderIcon.PNG"; 4 | import SearchIcon from "../images/Search.svg"; 5 | import NotificationIcon from "../images/Notification.svg"; 6 | import Profile from "../images/profile.jpg"; 7 | import Avatar from "@mui/material/Avatar"; 8 | import {useNavigate} from 'react-router-dom' 9 | 10 | 11 | function AfterLoginHeader({account}) { 12 | const navigate = useNavigate(); 13 | const[profileUrl,setProfileUrl] = useState(undefined); 14 | const[name , setName] = useState(); 15 | 16 | useEffect(() => { 17 | if(account === '0xce31E9F5503FaBdCBd99137944F6f71933831cb9'){ 18 | setName('Thomas Lang'); 19 | setProfileUrl('https://dr56wvhu2c8zo.cloudfront.net/drumuniverse/assets/33600dfd-caa5-45b5-9726-44205e9a42d2/Francesco_002.jpg') 20 | }else if(account === '0xF1FDC4eb37a8395858F20AC26F4114330DD62491'){ 21 | setName('Mel Bay'); 22 | setProfileUrl('http://www.spotlightagency.co.za/photos/2019/20190912/176341_imageorig_513615c4.jpg') 23 | }else{ 24 | setName('Craig Austin') 25 | } 26 | } ,[]) 27 | 28 | console.log("Account is" ,account); 29 | 30 | 31 | return ( 32 | 33 |
34 | 35 |
36 |
37 |
38 | 39 | 43 |
44 |
45 |
46 |

navigate('/home')}>Home

47 |

Resources

48 |

navigate('/create')}>Create

49 |
50 |
51 | 52 |
10
53 |
54 |
55 | {profileUrl?( navigate(`/profile/${account}`)}/>):( navigate(`/profile/${account}`)}/>)} 56 |
57 |
58 |
59 | 60 | ); 61 | } 62 | 63 | const Container = styled.div` 64 | background: #ffffff; 65 | box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1), 0px 10px 40px rgba(0, 0, 0, 0.06); 66 | padding-left : 1vw; 67 | padding-right : 1vw; 68 | display: flex; 69 | justify-content: space-between; 70 | width : 100vw; 71 | padding-top : 1vh; 72 | padding-bottom : 2vh; 73 | height: 10vh; 74 | 75 | 76 | .headerIcon { 77 | img { 78 | width: 40px; 79 | height : 40px; 80 | margin-top : 5px; 81 | } 82 | } 83 | 84 | .headerInfo { 85 | display: flex; 86 | 87 | .search_bar { 88 | display: flex; 89 | width: 40vw; 90 | border: 1px solid lightgray; 91 | border-radius: 5px; 92 | padding: 10px; 93 | margin-right: 20px; 94 | background: #F3F3F4; 95 | 96 | input { 97 | outline-width: 0; 98 | border: 0; 99 | width: 95%; 100 | background: #F3F3F4; 101 | } 102 | 103 | img { 104 | width: 16px; 105 | object-fit: contain; 106 | margin-right: 5px; 107 | } 108 | } 109 | 110 | .header_options { 111 | display: flex; 112 | 113 | .header_tabs { 114 | display: flex; 115 | p { 116 | margin-top: auto; 117 | margin-bottom: auto; 118 | margin-left: 20px; 119 | margin-right: 20px; 120 | font-weight: 600; 121 | /* font-family: "Poppins"; */ 122 | font-style: normal; 123 | font-size: 16px; 124 | color: #858fa2; 125 | 126 | &:hover { 127 | cursor: pointer; 128 | } 129 | } 130 | } 131 | } 132 | 133 | .home { 134 | color: black !important; 135 | } 136 | 137 | .notifications_icon { 138 | margin-top: 10px; 139 | 140 | margin-left: 10px; 141 | 142 | img{ 143 | width: 29px; 144 | object-fit: contain; 145 | z-index: -1; 146 | } 147 | } 148 | 149 | .number { 150 | width: 21px; 151 | height: 21px; 152 | background: #e0335d; 153 | border: 1px solid #ffffff; 154 | box-sizing: border-box; 155 | border-radius: 50%; 156 | font-size : 13px; 157 | color : #ffffff; 158 | text-align: center; 159 | margin-top : -20px; 160 | z-index: 999; 161 | position : sticky; 162 | margin-left : 13px; 163 | } 164 | 165 | .profile{ 166 | margin-left : 30px; 167 | margin-top : auto; 168 | 169 | .avatar{ 170 | width : 50px; 171 | height : 50px; 172 | 173 | &:hover { 174 | cursor : pointer; 175 | } 176 | } 177 | } 178 | } 179 | `; 180 | 181 | export default AfterLoginHeader; 182 | -------------------------------------------------------------------------------- /src/components/BootstrapTooltip/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { makeStyles } from '@material-ui/core/styles'; 3 | import { Tooltip } from '@material-ui/core'; 4 | 5 | const useStylesBootstrap = makeStyles(theme => ({ 6 | arrow: { 7 | color: theme.palette.common.black, 8 | }, 9 | tooltip: { 10 | backgroundColor: theme.palette.common.black, 11 | padding: '8px 16px', 12 | fontSize: 14, 13 | }, 14 | })); 15 | 16 | function BootstrapTooltip(props) { 17 | const classes = useStylesBootstrap(); 18 | 19 | return ; 20 | } 21 | 22 | export default BootstrapTooltip; 23 | -------------------------------------------------------------------------------- /src/components/Connectors.js: -------------------------------------------------------------------------------- 1 | import { InjectedConnector } from '@web3-react/injected-connector'; 2 | 3 | export const injected = new InjectedConnector({ supportedChainIds: [43113, 43114] }); 4 | -------------------------------------------------------------------------------- /src/components/Drop.jsx: -------------------------------------------------------------------------------- 1 | import React , {useState , useEffect} from "react"; 2 | import styled from "styled-components"; 3 | import Avatar from "@mui/material/Avatar"; 4 | import Profile from "../images/profile.jpg"; 5 | import {useNavigate} from 'react-router-dom' 6 | import { ethers } from 'ethers'; 7 | 8 | function Drop(props) { 9 | const navigate = useNavigate(); 10 | const [imgUrl, setImgUrl] = useState(''); 11 | const [itemName, setItemName] = useState(''); 12 | 13 | // useEffect(() => { 14 | // fetch(props.data.tokenUri).then(res => { 15 | // res.json().then(result => { 16 | // setImgUrl(result.image); 17 | // const item_name = result.name + ' #' + props.data.tokenId; 18 | // setItemName(item_name); 19 | // // setFavCount(props.data.likes.length); 20 | // const idx = props.data.likes.findIndex(element => element == props.account); 21 | // // if(idx > -1) 22 | // // setFav(true); 23 | // }); 24 | // }); 25 | // }, [props.data]); 26 | 27 | const clickBuy = () => { 28 | const url = '/detail/' + props.orderId; 29 | if(props.account){ 30 | navigate(url); 31 | }else{ 32 | alert('Please login to buy') 33 | navigate('/login'); 34 | } 35 | } 36 | 37 | 38 | return ( 39 | 40 |
45 |
46 | 47 |

Anon

48 |
49 |
50 |

{itemName}

51 |
52 |

{ethers.utils.formatEther(props.price)} QUID

53 | {/*

$3,594.00

*/} 54 |
55 |
56 |
57 | 58 |
59 | 60 | ); 61 | } 62 | 63 | const Container = styled.div` 64 | height: fit-content; 65 | width: 351px; 66 | border-radius: 10px; 67 | border: 1px solid lightgray; 68 | margin-right : 20px; 69 | margin-bottom : 20px; 70 | 71 | .cover_image { 72 | height: 343px; 73 | width : 349px; 74 | /* background-image: url("https://media.npr.org/assets/img/2012/02/02/mona-lisa_custom-31a0453b88a2ebcb12c652bce5a1e9c35730a132.jpg"); */ 75 | background-position: center; 76 | background-repeat: no-repeat; 77 | background-size: cover; 78 | border-top-left-radius: 10px; 79 | border-top-right-radius: 10px; 80 | border-bottom: 1px solid lightgray; 81 | } 82 | 83 | .user_info{ 84 | width: 170px; 85 | height: 50px; 86 | background-color: white; 87 | display: flex; 88 | margin-left: auto; 89 | margin-right: auto; 90 | margin-top: -25px; 91 | box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.25); 92 | border-radius: 64px; 93 | align-items: center; 94 | 95 | .avatar { 96 | margin-left: 10px; 97 | margin-right: 8px; 98 | } 99 | 100 | p { 101 | font-weight: 600; 102 | font-size: 16px; 103 | margin-top : auto; 104 | margin-bottom : auto; 105 | } 106 | } 107 | 108 | .drop_details { 109 | margin-top: 10px; 110 | display: flex; 111 | padding: 0 15px 0 15px; 112 | width: 100%; 113 | margin-bottom : 20px; 114 | 115 | .name{ 116 | font-weight: 500; 117 | font-size: 20px; 118 | margin-right: 40px; 119 | width : 50%; 120 | 121 | } 122 | 123 | .price { 124 | .quid { 125 | font-weight: 700; 126 | font-size: 20px; 127 | color: #e0335d; 128 | } 129 | 130 | .dollar { 131 | font-weight: 400; 132 | font-size: 15px; 133 | color: #858FA2; 134 | } 135 | } 136 | } 137 | 138 | .buttons{ 139 | width: 100%; 140 | display : flex; 141 | padding: 0px 0 20px 0; 142 | justify-content: center; 143 | button{ 144 | width : 90%; 145 | /* margin-left : auto; 146 | margin-right : auto; */ 147 | background-color : #e0335d; 148 | color : white; 149 | padding : 8px 0 8px 0; 150 | border-radius : 5px; 151 | border : 0; 152 | 153 | &:hover { 154 | cursor : pointer; 155 | } 156 | 157 | } 158 | } 159 | `; 160 | export default Drop; 161 | -------------------------------------------------------------------------------- /src/components/Footer.js: -------------------------------------------------------------------------------- 1 | import { Typography } from '@mui/material'; 2 | import { Container, Stack, Box } from '@mui/system'; 3 | import React from 'react'; 4 | 5 | const Footer = () => { 6 | 7 | return ( 8 | 9 | 10 | 11 | 12 | 15 | Stay in the loop 16 | 17 | 20 | Join our mailing list to stay in the loop with our newest feature releases, NFT drops, and tips and tricks for navigating Kadena. 21 | 22 | 23 | 24 | 27 | Join the community 28 | 29 | 30 | 31 | 32 | 33 | ); 34 | } 35 | 36 | export default Footer; 37 | -------------------------------------------------------------------------------- /src/components/Item.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from 'react'; 2 | import LikeOutline from './assets/like_outline.png'; 3 | import LikeFilled from './assets/like_filled.png'; 4 | import AvaxLogo from './assets/avax.png'; 5 | import { useNavigate } from 'react-router-dom'; 6 | import { ethers } from 'ethers'; 7 | import { addToLike } from '../api/api'; 8 | import { nonames } from './admin'; 9 | 10 | 11 | const NFTItem = props => { 12 | 13 | const navigate = useNavigate(); 14 | const [imgUrl, setImgUrl] = useState(''); 15 | const [favCount, setFavCount] = useState(0); 16 | const [isFav, setFav] = useState(false); 17 | const [itemName, setItemName] = useState(''); 18 | 19 | 20 | 21 | 22 | 23 | useEffect(() => { 24 | fetch(props.data.tokenUri).then(res => { 25 | res.json().then(result => { 26 | setImgUrl(result.image); 27 | const item_name = result.name + ' #' + props.data.tokenId; 28 | setItemName(item_name); 29 | setFavCount(props.data.likes.length); 30 | const idx = props.data.likes.findIndex(element => element == props.account); 31 | if(idx > -1) 32 | setFav(true); 33 | }); 34 | }); 35 | }, [props.data]); 36 | 37 | const clickBuy = () => { 38 | const url = '/detail/' + props.orderId; 39 | navigate(url); 40 | } 41 | 42 | const clickFavorite = () => { 43 | if(!isFav && props.account) { 44 | addToLike(props.data.tokenId, props.account).then(res => { 45 | if(res != null) { 46 | setFav(true); 47 | setFavCount(favCount => favCount + 1); 48 | } 49 | }); 50 | } 51 | } 52 | 53 | return ( 54 | <> 55 | {!nonames.includes(itemName) && (
56 | {console.log("Name is " , itemName)} 57 | NFT here 58 |
59 |
60 |

{itemName}

61 |

Buy Now

62 |
63 |
64 |

Price

65 |
66 | crypto 67 |

{ethers.utils.formatEther(props.price)}

68 |
69 |
70 | like 71 |

{favCount}

72 |
73 |
74 |
75 |
)} 76 | 77 | ); 78 | } 79 | 80 | export default NFTItem; 81 | -------------------------------------------------------------------------------- /src/components/Loading.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Lottie from 'lottie-react'; 3 | import loadingJson from "./assets/nft_loading.json"; 4 | 5 | const Loading = () => { 6 | 7 | const style = { 8 | height: 300, 9 | width: 300 10 | }; 11 | 12 | return ( 13 |
14 | 15 |
16 | ); 17 | } 18 | 19 | export default Loading; 20 | -------------------------------------------------------------------------------- /src/components/Nft.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styled from "styled-components"; 3 | import loveIcon from "../images/loveIcon.svg"; 4 | import HeaderIcon from "../images/HeaderIcon.PNG"; 5 | import Avatar from "@mui/material/Avatar"; 6 | import Profile from "../images/profile.jpg"; 7 | 8 | function Nft(props) { 9 | return ( 10 | 11 |
12 |
13 | 14 |
15 |
16 |

Botto, the decentralized AI/human artwork

17 |
18 |
19 | {/* */} 20 |

200.5 KDA

21 |
22 | 23 | 24 |
25 | 26 |
27 | 28 |
29 |

Artwork by

30 |

John Harsh

31 |
32 |
33 | 34 | ); 35 | } 36 | 37 | const Container = styled.div` 38 | display: flex; 39 | width: 265px; 40 | flex-direction: column; 41 | margin-right : 20px; 42 | margin-bottom : 40px; 43 | 44 | .nft_image { 45 | height: 290px; 46 | border-radius: 10px; 47 | background-image: url("https://i.seadn.io/gcs/files/733b19e8472ceae925248c9365453e8d.jpg?auto=format&dpr=1&w=256"); 48 | background-position: center; 49 | background-repeat: no-repeat; 50 | background-size: cover; 51 | } 52 | 53 | .love_circle { 54 | width: 37px; 55 | height: 37px; 56 | border-radius: 50%; 57 | display: flex; 58 | justify-content: center; 59 | align-items: center; 60 | background-color: white; 61 | margin-left: auto; 62 | margin-right: 10px; 63 | margin-top: 10px; 64 | 65 | &:hover { 66 | cursor: pointer; 67 | background-color: #fb25bd; 68 | } 69 | } 70 | .nft_name { 71 | margin-top: 10px; 72 | font-weight: 600; 73 | font-size: 18px; 74 | margin-bottom : 0px; 75 | } 76 | .price_track { 77 | display: flex; 78 | justify-content: space-between; 79 | margin-top: 10px; 80 | 81 | .price { 82 | display: flex; 83 | 84 | img { 85 | width: 38px; 86 | object-fit: contain; 87 | } 88 | 89 | p { 90 | font-style: normal; 91 | font-weight: 600; 92 | font-size: 25px; 93 | color: #fb25bd; 94 | margin-left : 10px; 95 | } 96 | } 97 | 98 | button{ 99 | width : 62px; 100 | height : 31px; 101 | border-radius : 5px; 102 | border : 1px solid lightgray; 103 | color: #788191; 104 | background-color: white; 105 | 106 | &:hover { 107 | cursor: pointer; 108 | } 109 | } 110 | } 111 | 112 | .user_info{ 113 | display : flex; 114 | margin-top : 10px; 115 | 116 | .user{ 117 | margin-left : 10px; 118 | font-size : 14px; 119 | .by{ 120 | color: #788191; 121 | } 122 | 123 | .name{ 124 | color : black; 125 | 126 | } 127 | } 128 | } 129 | `; 130 | 131 | export default Nft; 132 | -------------------------------------------------------------------------------- /src/components/PriceInput.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect } from 'react'; 2 | 3 | export const PriceInputErrors = { 4 | MAX_INPUT_EXCEEDED: 'Max input value exceeded', 5 | }; 6 | 7 | export const PriceConstants = { 8 | UPDATE_PRICE: 'UPDATE_PRICE', 9 | MAX_PRICE: '999999999', 10 | }; 11 | 12 | const PriceInput = ({ 13 | value, 14 | decimals = 0, 15 | onChange, 16 | onInputError = err => console.log(err), 17 | max = PriceConstants.MAX_PRICE, 18 | ...rest 19 | }) => { 20 | useEffect(() => { 21 | onChange(checkDecimals(value)); 22 | }, [decimals]); 23 | 24 | useEffect(() => { 25 | if (parseInt(value) > parseInt(max)) { 26 | onInputError(PriceInputErrors.MAX_INPUT_EXCEEDED); 27 | } else { 28 | onInputError(null); 29 | } 30 | }, [value]); 31 | 32 | const handleKeyDown = e => { 33 | const key = e.keyCode; 34 | console.log("the key you have downed is ", key) 35 | if (key >= '0'.charCodeAt(0) && key <= '9'.charCodeAt(0)) { 36 | if (value === '0' && key === '0'.charCodeAt(0)) e.preventDefault(); 37 | } else if (key === 190) { 38 | if (value.length === 0 || value.includes('.') || decimals === 0) 39 | e.preventDefault(); 40 | } else if (key !== 8) { 41 | e.preventDefault(); 42 | } 43 | console.log("Inpiut Value is ", value) 44 | }; 45 | 46 | const checkDecimals = val => { 47 | if (!val) return ''; 48 | if (val.indexOf('.') > -1 && val.length - val.indexOf('.') - 1 > decimals) { 49 | const ret = Math.floor(+val * 10 ** decimals) / 10 ** decimals; 50 | return ret.toString(); 51 | } 52 | return val; 53 | }; 54 | 55 | const handleChange = e => { 56 | onChange(checkDecimals(e.target.value)); 57 | }; 58 | 59 | return ( 60 | 66 | ); 67 | }; 68 | 69 | export default PriceInput; 70 | -------------------------------------------------------------------------------- /src/components/Tab/Top.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { 3 | Avatar, 4 | Button, 5 | Card, 6 | Divider, 7 | CardHeader, 8 | Stack, 9 | Box, 10 | Table, 11 | TableBody, 12 | TableCell, 13 | TableContainer, 14 | TableHead, 15 | TableRow, 16 | Typography 17 | } from '@mui/material'; 18 | import arrowIosForwardFill from '@iconify/icons-eva/arrow-ios-forward-fill'; 19 | import { Icon } from '@iconify/react'; 20 | 21 | const TopNFTsData = [ 22 | { 23 | avatar: 'https://i.seadn.io/gcs/files/d2625a77b485bad7b6fffcd65af3c461.png?auto=format&dpr=1&h=500', 24 | collectionName: 'BoringPunks', 25 | floorPrice: '0.06', 26 | volumn: '47' 27 | }, 28 | { 29 | avatar: 'https://i.seadn.io/gcs/files/50182b51b061766036ee3912a6117873.png?auto=format&dpr=1&h=500', 30 | collectionName: 'Momoguro: Holoself', 31 | floorPrice: '0.02', 32 | volumn: '1' 33 | },{ 34 | avatar: 'https://i.seadn.io/s/production/dad50fcb-455d-42d9-af33-94b41cf21c7a.png?w=500&auto=format', 35 | collectionName: 'I Live Here Now', 36 | floorPrice: '1.75', 37 | volumn: '78' 38 | },{ 39 | avatar: 'https://i.seadn.io/s/production/dba15a19-5a3b-4c7e-b93c-3b4f21d348b6.png?w=500&auto=format', 40 | collectionName: 'Shakti Gomez Editions', 41 | floorPrice: '0.05', 42 | volumn: '0.03' 43 | },{ 44 | avatar: 'https://i.seadn.io/s/production/6693ad5c-3880-4e87-987a-ac3d62fa1e39.png?w=500&auto=format', 45 | collectionName: 'ClownVamp Editions', 46 | floorPrice: '0.05', 47 | volumn: '15' 48 | }, 49 | ] 50 | 51 | export default function Top() { 52 | return ( 53 | <> 54 | 55 | 56 | 57 | 58 | 59 | Rank 60 | Collection 61 | Floor Price 62 | Volumn 63 | 64 | 65 | 66 | {TopNFTsData.map((row, index) => ( 67 | 68 | 69 | {index+1} 70 | 71 | 72 | 73 | 74 | {row.collectionName} 75 | 76 | 77 | 78 | 79 | {row.floorPrice} ETH 80 | 81 | 82 | 83 | {row.volumn} ETH 84 | 85 | 86 | ))} 87 | 88 |
89 | 90 | 91 | 92 | 93 | 94 | 103 | 104 | 105 | 106 | ) 107 | } -------------------------------------------------------------------------------- /src/components/WalletProvider.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Web3ReactProvider } from '@web3-react/core'; 3 | import { Web3Provider } from '@ethersproject/providers'; 4 | 5 | const WalletProvider = ({ children }) => { 6 | 7 | const getLibrary = provider => { 8 | const library = new Web3Provider(provider); 9 | library.pollingInterval = 12000; 10 | return library; 11 | } 12 | 13 | return ( 14 | 15 | { children } 16 | 17 | ); 18 | } 19 | 20 | export default WalletProvider; 21 | -------------------------------------------------------------------------------- /src/components/admin.js: -------------------------------------------------------------------------------- 1 | export const nonames = [ 2 | 'asdfaasdfas #45', 3 | ]; -------------------------------------------------------------------------------- /src/components/assets/avax.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cosmos-AI/KdaSea-Frontend/f1c051b0cfa86ffc2d5061700eb4eb1c99c18c28/src/components/assets/avax.png -------------------------------------------------------------------------------- /src/components/assets/close.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/components/assets/error.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/components/assets/info.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/components/assets/like_filled.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cosmos-AI/KdaSea-Frontend/f1c051b0cfa86ffc2d5061700eb4eb1c99c18c28/src/components/assets/like_filled.png -------------------------------------------------------------------------------- /src/components/assets/like_outline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cosmos-AI/KdaSea-Frontend/f1c051b0cfa86ffc2d5061700eb4eb1c99c18c28/src/components/assets/like_outline.png -------------------------------------------------------------------------------- /src/components/assets/plus.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/components/assets/success.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/components/assets/upload.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cosmos-AI/KdaSea-Frontend/f1c051b0cfa86ffc2d5061700eb4eb1c99c18c28/src/components/assets/upload.png -------------------------------------------------------------------------------- /src/components/assets/usdt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cosmos-AI/KdaSea-Frontend/f1c051b0cfa86ffc2d5061700eb4eb1c99c18c28/src/components/assets/usdt.png -------------------------------------------------------------------------------- /src/components/assets/warning.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/components/explorer/ExploreCategories.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Slider from "react-slick"; 3 | import "slick-carousel/slick/slick.css"; 4 | import "slick-carousel/slick/slick-theme.css"; 5 | import { Box, Stack, Typography } from '@mui/material' 6 | 7 | const ExploreCategoriesData = [ 8 | { 9 | title: 'Art', 10 | avatar: 'https://opensea.io/static/images/categories/maverick-art.png', 11 | }, 12 | { 13 | title: 'Gaming', 14 | avatar: 'https://opensea.io/static/images/categories/maverick-gaming.png', 15 | }, 16 | { 17 | title: 'Memberships', 18 | avatar: 'https://opensea.io/static/images/categories/maverick-membership.png', 19 | }, 20 | { 21 | title: 'Music', 22 | avatar: 'https://opensea.io/static/images/categories/maverick-music.png', 23 | }, 24 | { 25 | title: 'PFPs', 26 | avatar: 'https://opensea.io/static/images/categories/maverick-pfps.png', 27 | }, 28 | { 29 | title: 'Photography', 30 | avatar: 'https://opensea.io/static/images/categories/maverick-photography.png', 31 | }, 32 | ] 33 | 34 | export default function ExploreCategories(){ 35 | var settings = { 36 | dots: true, 37 | infinite: false, 38 | speed: 500, 39 | slidesToShow: 5, 40 | slidesToScroll: 5, 41 | initialSlide: 0, 42 | responsive: [ 43 | { 44 | breakpoint: 1200, 45 | settings: { 46 | slidesToShow: 4, 47 | slidesToScroll: 4, 48 | infinite: true, 49 | dots: true, 50 | }, 51 | }, 52 | { 53 | breakpoint: 1024, 54 | settings: { 55 | slidesToShow: 3, 56 | slidesToScroll: 3, 57 | infinite: true, 58 | dots: true 59 | } 60 | }, 61 | { 62 | breakpoint: 600, 63 | settings: { 64 | slidesToShow: 2, 65 | slidesToScroll: 2, 66 | initialSlide: 2 67 | } 68 | }, 69 | { 70 | breakpoint: 480, 71 | settings: { 72 | slidesToShow: 1, 73 | slidesToScroll: 1 74 | } 75 | } 76 | ] 77 | }; 78 | return ( 79 | 80 | 81 | {ExploreCategoriesData.map((item, index) => ( 82 | 83 | 93 | {item.collectionName} 98 | {item.collectionName} 99 | 105 | 106 | 113 | Floor 114 | 115 | {item.floorPrice} ETH 116 | 117 | 118 | 125 | {" "} 126 | Total Volumn{" "} 127 | 128 | {item.totalVolumn} ETH 129 | 130 | 131 | 132 | 133 | ))} 134 | 135 | 136 | ); 137 | } -------------------------------------------------------------------------------- /src/components/explorer/LGBTQIA.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Slider from "react-slick"; 3 | import "slick-carousel/slick/slick.css"; 4 | import "slick-carousel/slick/slick-theme.css"; 5 | import { Box, Stack, Typography } from '@mui/material' 6 | 7 | const LGBTQIAData = [ 8 | { 9 | collectionName: 'I Live Here Now', 10 | avatar: 'https://i.seadn.io/s/production/dad50fcb-455d-42d9-af33-94b41cf21c7a.png?w=500&auto=format', 11 | floorPrice: '1.75', 12 | totalVolumn: '78' 13 | }, 14 | { 15 | collectionName: 'Shakti Gomez', 16 | avatar: 'https://i.seadn.io/s/production/dba15a19-5a3b-4c7e-b93c-3b4f21d348b6.png?w=500&auto=format', 17 | floorPrice: '0.05', 18 | totalVolumn: '0.03' 19 | }, 20 | { 21 | collectionName: 'ClownVamp', 22 | avatar: 'https://i.seadn.io/s/production/38d851cc-474f-48bd-bd5f-636a7d9ff75c.png?w=500&auto=format', 23 | floorPrice: '0.03', 24 | totalVolumn: '82' 25 | }, 26 | { 27 | collectionName: 'Emotion Check-In', 28 | avatar: 'https://i.seadn.io/s/production/34f5e483-ffc3-45cb-81b0-ba31c263e128.png?w=500&auto=format', 29 | floorPrice: '0.05', 30 | totalVolumn: '26' 31 | }, 32 | { 33 | collectionName: 'Middle Of Nowhere', 34 | avatar: 'https://i.seadn.io/s/production/8659f6e4-d1fd-4585-91f3-5940cf33db4c.png?w=500&auto=format', 35 | floorPrice: '0.05', 36 | totalVolumn: '0.27' 37 | }, 38 | { 39 | collectionName: 'Midnight Meta', 40 | avatar: 'https://i.seadn.io/s/production/8b7d00fa-2bd8-41ef-a0f5-3d32faa0e317.png?w=500&auto=format', 41 | floorPrice: '<0.01', 42 | totalVolumn: '0.11' 43 | }, 44 | { 45 | collectionName: 'Memorias Fer RAW', 46 | avatar: 'https://i.seadn.io/s/production/c0ad500e-2602-4fb4-ac65-901233c20abc.png?w=500&auto=format', 47 | floorPrice: '<0.01', 48 | totalVolumn: '0.06' 49 | }, 50 | { 51 | collectionName: 'Whatsherface Editions', 52 | avatar: 'https://i.seadn.io/s/production/17b7e0cc-af72-477f-9d33-666724e8013d.png?w=500&auto=format', 53 | floorPrice: '0.02', 54 | totalVolumn: '0.21' 55 | }, 56 | ] 57 | 58 | export default function LGBTQIA(){ 59 | var settings = { 60 | dots: true, 61 | infinite: false, 62 | speed: 500, 63 | slidesToShow: 5, 64 | slidesToScroll: 5, 65 | initialSlide: 0, 66 | responsive: [ 67 | { 68 | breakpoint: 1200, 69 | settings: { 70 | slidesToShow: 4, 71 | slidesToScroll: 4, 72 | infinite: true, 73 | dots: true, 74 | }, 75 | }, 76 | { 77 | breakpoint: 1024, 78 | settings: { 79 | slidesToShow: 3, 80 | slidesToScroll: 3, 81 | infinite: true, 82 | dots: true 83 | } 84 | }, 85 | { 86 | breakpoint: 600, 87 | settings: { 88 | slidesToShow: 2, 89 | slidesToScroll: 2, 90 | initialSlide: 2 91 | } 92 | }, 93 | { 94 | breakpoint: 480, 95 | settings: { 96 | slidesToShow: 1, 97 | slidesToScroll: 1 98 | } 99 | } 100 | ] 101 | }; 102 | return ( 103 | 104 | 105 | {LGBTQIAData.map((item, index) => ( 106 | 107 | 117 | {item.collectionName} 122 | {item.collectionName} 123 | 129 | 130 | 137 | Floor 138 | 139 | {item.floorPrice} ETH 140 | 141 | 142 | 149 | {" "} 150 | Total Volumn{" "} 151 | 152 | {item.totalVolumn} ETH 153 | 154 | 155 | 156 | 157 | ))} 158 | 159 | 160 | ); 161 | } -------------------------------------------------------------------------------- /src/components/explorer/NFT101.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Slider from "react-slick"; 3 | import "slick-carousel/slick/slick.css"; 4 | import "slick-carousel/slick/slick-theme.css"; 5 | import { Box, Stack, Typography } from '@mui/material' 6 | 7 | const NFT101Data = [ 8 | { 9 | title: 'What is an NFT?', 10 | avatar: 'https://opensea.io/static/images/learn-center//what-is-nft.png', 11 | }, 12 | { 13 | title: 'How to buy an NFT', 14 | avatar: 'https://opensea.io/static/images/learn-center//how-to-buy-nft.png', 15 | }, 16 | { 17 | title: 'What is minting?', 18 | avatar: 'https://opensea.io/static/images/learn-center//what-is-minting.png', 19 | }, 20 | { 21 | title: 'How to stay protected in web3', 22 | avatar: 'https://opensea.io/static/images/learn-center//stay-protected-web3.png', 23 | }, 24 | { 25 | title: 'How to create an NFT on Kadena', 26 | avatar: 'https://opensea.io/static/images/learn-center//how-to-create-nft.png', 27 | }, 28 | { 29 | title: 'How to sell an NFT using Kadena', 30 | avatar: 'https://opensea.io/static/images/learn-center//how-to-sell-nft.png', 31 | }, 32 | { 33 | title: 'What is a crypto wallet?', 34 | avatar: 'https://opensea.io/static/images/learn-center//what-is-crypto-wallet.png', 35 | }, 36 | { 37 | title: 'Who is Kadena', 38 | avatar: 'https://opensea.io/static/images/learn-center//who-is-opensea.png', 39 | }, 40 | ] 41 | 42 | export default function NFT101(){ 43 | var settings = { 44 | dots: true, 45 | infinite: false, 46 | speed: 500, 47 | slidesToShow: 5, 48 | slidesToScroll: 5, 49 | initialSlide: 0, 50 | responsive: [ 51 | { 52 | breakpoint: 1200, 53 | settings: { 54 | slidesToShow: 4, 55 | slidesToScroll: 4, 56 | infinite: true, 57 | dots: true, 58 | }, 59 | }, 60 | { 61 | breakpoint: 1024, 62 | settings: { 63 | slidesToShow: 3, 64 | slidesToScroll: 3, 65 | infinite: true, 66 | dots: true 67 | } 68 | }, 69 | { 70 | breakpoint: 600, 71 | settings: { 72 | slidesToShow: 2, 73 | slidesToScroll: 2, 74 | initialSlide: 2 75 | } 76 | }, 77 | { 78 | breakpoint: 480, 79 | settings: { 80 | slidesToShow: 1, 81 | slidesToScroll: 1 82 | } 83 | } 84 | ] 85 | }; 86 | return ( 87 | 88 | 89 | {NFT101Data.map((item, index) => ( 90 | 91 | 101 | {item.collectionName} 106 | {item.collectionName} 107 | 113 | 114 | 121 | Floor 122 | 123 | {item.floorPrice} ETH 124 | 125 | 126 | 133 | {" "} 134 | Total Volumn{" "} 135 | 136 | {item.totalVolumn} ETH 137 | 138 | 139 | 140 | 141 | ))} 142 | 143 | 144 | ); 145 | } -------------------------------------------------------------------------------- /src/components/explorer/TopCollectorBuysToday.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Slider from "react-slick"; 3 | import "slick-carousel/slick/slick.css"; 4 | import "slick-carousel/slick/slick-theme.css"; 5 | import { Box, Stack, Typography } from '@mui/material' 6 | 7 | const TopCollectorBuysTodayData = [ 8 | { 9 | collectionName: 'BEANZ Official', 10 | avatar: 'https://i.seadn.io/gae/WRcl2YH8E3_7884mcJ0DRN7STGqA8xZQKd-0MFmPftlxUR6i1xB9todMXRW2M6SIpXKAZ842UqKDm1UrkKG8nr7l9NjCkIw-GLQSFQ?auto=format&dpr=1&h=500', 11 | floorPrice: '1.28', 12 | totalVolumn: '1373' 13 | }, 14 | { 15 | collectionName: 'BoringPunks', 16 | avatar: 'https://i.seadn.io/gcs/files/d2625a77b485bad7b6fffcd65af3c461.png?auto=format&dpr=1&h=500', 17 | floorPrice: '0.06', 18 | totalVolumn: '47' 19 | }, 20 | { 21 | collectionName: 'Ethscriptions', 22 | avatar: 'https://i.seadn.io/gcs/files/d314228041840fda1137a562479ca0b6.png?auto=format&dpr=1&h=500', 23 | floorPrice: '-', 24 | totalVolumn: '19' 25 | }, 26 | { 27 | collectionName: 'Kubz Relic', 28 | avatar: 'https://i.seadn.io/gcs/files/db2992cf06544d02438035695ecd9de7.gif?auto=format&dpr=1&h=500', 29 | floorPrice: '<0.01', 30 | totalVolumn: '0.97' 31 | }, 32 | { 33 | collectionName: 'Momoguro: Holoself', 34 | avatar: 'https://i.seadn.io/gcs/files/50182b51b061766036ee3912a6117873.png?auto=format&dpr=1&h=500', 35 | floorPrice: '0.02', 36 | totalVolumn: '1' 37 | }, 38 | { 39 | collectionName: 'Lil Pudgys', 40 | avatar: 'https://i.seadn.io/gcs/files/ff12374123ac5e8571b01d03874e8a76.png?auto=format&dpr=1&h=500', 41 | floorPrice: '0.35', 42 | totalVolumn: '37' 43 | }, 44 | { 45 | collectionName: 'HV-MTL', 46 | avatar: 'https://i.seadn.io/gcs/files/c3e23f87e1f8cb30837ec3ac3d9db808.png?auto=format&dpr=1&h=500', 47 | floorPrice: '0.73', 48 | totalVolumn: '96' 49 | }, 50 | { 51 | collectionName: 'Doodles', 52 | avatar: 'https://i.seadn.io/gcs/files/ad1e55ac8d380714566a3ecfe2a7dbcb.png?auto=format&dpr=1&h=500', 53 | floorPrice: '1.72', 54 | totalVolumn: '68' 55 | }, 56 | { 57 | collectionName: 'Azuki', 58 | avatar: 'https://i.seadn.io/gae/O0XkiR_Z2--OPa_RA6FhXrR16yBOgIJqSLdHTGA0-LAhyzjSYcb3WEPaCYZHeh19JIUEAUazofVKXcY2qOylWCdoeBN6IfGZLJ3I4A?auto=format&dpr=1&h=500', 59 | floorPrice: '14.80', 60 | totalVolumn: '2331' 61 | }, 62 | { 63 | collectionName: 'Bored Ape', 64 | avatar: 'https://i.seadn.io/gae/RBX3jwgykdaQO3rjTcKNf5OVwdukKO46oOAV3zZeiaMb8VER6cKxPDTdGZQdfWcDou75A8KtVZWM_fEnHG4d4q6Um8MeZIlw79BpWPA?auto=format&dpr=1&h=500', 65 | floorPrice: '38.69', 66 | totalVolumn: '1354' 67 | }, 68 | ] 69 | 70 | export default function TopCollectorBuysToday(){ 71 | var settings = { 72 | dots: true, 73 | infinite: false, 74 | speed: 500, 75 | slidesToShow: 5, 76 | slidesToScroll: 5, 77 | initialSlide: 0, 78 | responsive: [ 79 | { 80 | breakpoint: 1200, 81 | settings: { 82 | slidesToShow: 4, 83 | slidesToScroll: 4, 84 | infinite: true, 85 | dots: true, 86 | }, 87 | }, 88 | { 89 | breakpoint: 1024, 90 | settings: { 91 | slidesToShow: 3, 92 | slidesToScroll: 3, 93 | infinite: true, 94 | dots: true 95 | } 96 | }, 97 | { 98 | breakpoint: 600, 99 | settings: { 100 | slidesToShow: 2, 101 | slidesToScroll: 2, 102 | initialSlide: 2 103 | } 104 | }, 105 | { 106 | breakpoint: 480, 107 | settings: { 108 | slidesToShow: 1, 109 | slidesToScroll: 1 110 | } 111 | } 112 | ], 113 | }; 114 | return ( 115 | 116 | 117 | {TopCollectorBuysTodayData.map((item, index) => ( 118 | 119 | 129 | {item.collectionName} 134 | {item.collectionName} 135 | 141 | 142 | 149 | Floor 150 | 151 | {item.floorPrice} ETH 152 | 153 | 154 | 161 | {" "} 162 | Total Volumn{" "} 163 | 164 | {item.totalVolumn} ETH 165 | 166 | 167 | 168 | 169 | ))} 170 | 171 | 172 | ); 173 | } -------------------------------------------------------------------------------- /src/components/explorer/TrendingInArt.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Slider from "react-slick"; 3 | import "slick-carousel/slick/slick.css"; 4 | import "slick-carousel/slick/slick-theme.css"; 5 | import { Box, Stack, Typography } from '@mui/material' 6 | 7 | const TrendingInArtData = [ 8 | { 9 | collectionName: 'Opepen Edition', 10 | avatar: 'https://openseauserdata.com/files/d49add1f1c59ec1f3d808e4c81ae4065.svg', 11 | floorPrice: '0.70', 12 | totalVolumn: '105' 13 | }, 14 | { 15 | collectionName: 'Ethernal Butterfly', 16 | avatar: 'https://i.seadn.io/gcs/files/eba95cbc69c5d7e18b66175ce6bec5d3.png?auto=format&dpr=1&h=500', 17 | floorPrice: '<0.01', 18 | totalVolumn: '7' 19 | }, 20 | { 21 | collectionName: 'Saved Souls', 22 | avatar: 'https://i.seadn.io/gcs/files/20b7d08ab3a1604b6548c89d16dfec95.png?auto=format&dpr=1&h=500', 23 | floorPrice: '0.05', 24 | totalVolumn: '8' 25 | }, 26 | { 27 | collectionName: 'Bitlady Maker', 28 | avatar: 'https://i.seadn.io/gcs/files/eecf5cd71f7d00ea97d59aad35876f47.gif?auto=format&dpr=1&h=500', 29 | floorPrice: '<0.01', 30 | totalVolumn: '1' 31 | }, 32 | { 33 | collectionName: 'AIORBIT', 34 | avatar: 'https://i.seadn.io/gcs/files/af77635f88a552e0257f562fb820d17c.gif?auto=format&dpr=1&h=500', 35 | floorPrice: '<0.01', 36 | totalVolumn: '2' 37 | }, 38 | { 39 | collectionName: 'Checks-VV Originals', 40 | avatar: 'https://openseauserdata.com/files/017514265b66647dad5f58ab55cc0ab1.svg', 41 | floorPrice: '0.54', 42 | totalVolumn: '40' 43 | }, 44 | { 45 | collectionName: 'The Broken Keys', 46 | avatar: 'https://i.seadn.io/gcs/files/2a920ef8fff5a3a2ac191d68fd647ac8.png?auto=format&dpr=1&h=500', 47 | floorPrice: '38.89', 48 | totalVolumn: '27' 49 | }, 50 | ] 51 | 52 | export default function TrendingInArt(){ 53 | var settings = { 54 | dots: true, 55 | infinite: false, 56 | speed: 500, 57 | slidesToShow: 5, 58 | slidesToScroll: 5, 59 | initialSlide: 0, 60 | responsive: [ 61 | { 62 | breakpoint: 1200, 63 | settings: { 64 | slidesToShow: 4, 65 | slidesToScroll: 4, 66 | infinite: true, 67 | dots: true, 68 | }, 69 | }, 70 | { 71 | breakpoint: 1024, 72 | settings: { 73 | slidesToShow: 3, 74 | slidesToScroll: 3, 75 | infinite: true, 76 | dots: true 77 | } 78 | }, 79 | { 80 | breakpoint: 600, 81 | settings: { 82 | slidesToShow: 2, 83 | slidesToScroll: 2, 84 | initialSlide: 2 85 | } 86 | }, 87 | { 88 | breakpoint: 480, 89 | settings: { 90 | slidesToShow: 1, 91 | slidesToScroll: 1 92 | } 93 | } 94 | ] 95 | }; 96 | return ( 97 | 98 | 99 | {TrendingInArtData.map((item, index) => ( 100 | 101 | 111 | {item.collectionName} 116 | {item.collectionName} 117 | 123 | 124 | 131 | Floor 132 | 133 | {item.floorPrice} ETH 134 | 135 | 136 | 143 | {" "} 144 | Total Volumn{" "} 145 | 146 | {item.totalVolumn} ETH 147 | 148 | 149 | 150 | 151 | ))} 152 | 153 | 154 | ); 155 | } -------------------------------------------------------------------------------- /src/components/explorer/TrendingInGaming.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Slider from "react-slick"; 3 | import "slick-carousel/slick/slick.css"; 4 | import "slick-carousel/slick/slick-theme.css"; 5 | import { Box, Stack, Typography } from '@mui/material' 6 | 7 | const TrendingInGamingData = [ 8 | { 9 | collectionName: 'HV-MTL', 10 | avatar: 'https://i.seadn.io/gcs/files/c3e23f87e1f8cb30837ec3ac3d9db808.png?auto=format&dpr=1&h=500', 11 | floorPrice: '0.73', 12 | totalVolumn: '96' 13 | }, 14 | { 15 | collectionName: 'AQUA FARM NFTs: Aree', 16 | avatar: 'https://i.seadn.io/gae/aIE-KdRyQXVZAI3QDsiXTIp4wC-QzwOg8XV4BnDN2sUmmwXd9HqYWsHeYbUYCx0JWd8iSqZAnbjjjsiavSFe-QjkACCfhVibza__Ng?auto=format&dpr=1&h=500', 17 | floorPrice: '0.33', 18 | totalVolumn: '0.40' 19 | }, 20 | { 21 | collectionName: 'League of Kingdoms', 22 | avatar: 'https://i.seadn.io/gcs/files/4965e5bc08af5969d2a5b711e277e70a.png?auto=format&dpr=1&h=500', 23 | floorPrice: '58.99', 24 | totalVolumn: '4' 25 | }, 26 | { 27 | collectionName: 'The Beacon', 28 | avatar: 'https://i.seadn.io/gcs/files/acc49678ae67e78a18f868dc23e5c6dc.png?auto=format&dpr=1&h=500', 29 | floorPrice: '0.01', 30 | totalVolumn: '2' 31 | }, 32 | { 33 | collectionName: 'Otherside Koda', 34 | avatar: 'https://i.seadn.io/gcs/files/90319cbe55a88e2051b09e5d4058ce43.png?auto=format&dpr=1&h=500', 35 | floorPrice: '5.69', 36 | totalVolumn: '34' 37 | }, 38 | { 39 | collectionName: 'Otherdeed Expanded', 40 | avatar: 'https://i.seadn.io/gcs/files/993fb5fc51ba0ad55f15e2856bc32f83.png?auto=format&dpr=1&h=500&fr=1', 41 | floorPrice: '0.59', 42 | totalVolumn: '33' 43 | }, 44 | { 45 | collectionName: 'Pixelmon', 46 | avatar: 'https://i.seadn.io/gcs/files/15253f057fda61d8498f3e8264c2be23.png?auto=format&dpr=1&h=500', 47 | floorPrice: '0.54', 48 | totalVolumn: '30' 49 | }, 50 | ] 51 | 52 | export default function TrendingInGaming(){ 53 | var settings = { 54 | dots: true, 55 | infinite: false, 56 | speed: 500, 57 | slidesToShow: 5, 58 | slidesToScroll: 5, 59 | initialSlide: 0, 60 | responsive: [ 61 | { 62 | breakpoint: 1200, 63 | settings: { 64 | slidesToShow: 4, 65 | slidesToScroll: 4, 66 | infinite: true, 67 | dots: true, 68 | }, 69 | }, 70 | { 71 | breakpoint: 1024, 72 | settings: { 73 | slidesToShow: 3, 74 | slidesToScroll: 3, 75 | infinite: true, 76 | dots: true 77 | } 78 | }, 79 | { 80 | breakpoint: 600, 81 | settings: { 82 | slidesToShow: 2, 83 | slidesToScroll: 2, 84 | initialSlide: 2 85 | } 86 | }, 87 | { 88 | breakpoint: 480, 89 | settings: { 90 | slidesToShow: 1, 91 | slidesToScroll: 1 92 | } 93 | } 94 | ] 95 | }; 96 | return ( 97 | 98 | 99 | {TrendingInGamingData.map((item, index) => ( 100 | 101 | 111 | {item.collectionName} 116 | {item.collectionName} 117 | 123 | 124 | 131 | Floor 132 | 133 | {item.floorPrice} ETH 134 | 135 | 136 | 143 | {" "} 144 | Total Volumn{" "} 145 | 146 | {item.totalVolumn} ETH 147 | 148 | 149 | 150 | 151 | ))} 152 | 153 | 154 | ); 155 | } -------------------------------------------------------------------------------- /src/components/explorer/TrendingInMemberships.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Slider from "react-slick"; 3 | import "slick-carousel/slick/slick.css"; 4 | import "slick-carousel/slick/slick-theme.css"; 5 | import { Box, Stack, Typography } from '@mui/material' 6 | 7 | const TrendingInMembershipsData = [ 8 | { 9 | collectionName: 'Utility Wen', 10 | avatar: 'https://i.seadn.io/gcs/files/8b7f62949fdf907b557995dcb36eb7d9.jpg?auto=format&dpr=1&h=500', 11 | floorPrice: '0.13', 12 | totalVolumn: '144' 13 | }, 14 | { 15 | collectionName: 'FF6000', 16 | avatar: 'https://i.seadn.io/gcs/files/fd06ceb05c6939fcd7ba0efac8600a56.png?auto=format&dpr=1&h=500', 17 | floorPrice: '0.06', 18 | totalVolumn: '15' 19 | }, 20 | { 21 | collectionName: 'BlackRock', 22 | avatar: 'https://i.seadn.io/gcs/files/11b45cbdd42ba340294d208d44b863c6.png?auto=format&dpr=1&h=500', 23 | floorPrice: '0.18', 24 | totalVolumn: '14' 25 | }, 26 | { 27 | collectionName: 'Steady Stack', 28 | avatar: 'https://i.seadn.io/gcs/files/d34ed1514aa22989df91aec0feda0aba.gif?auto=format&dpr=1&h=500', 29 | floorPrice: '0.30', 30 | totalVolumn: '6' 31 | }, 32 | { 33 | collectionName: 'AlfaDAO Access Cards', 34 | avatar: 'https://i.seadn.io/gae/PwFTjdcKHO7r-z5MZKDUfvMe6bidJOcox5pvm-iFOwcnNMZwnKxffLjFRtApDSTLt_1rz0fwaQiFfApmSps3NsVPRTlyydVkVW7l4Q?auto=format&dpr=1&h=500', 35 | floorPrice: '2.60', 36 | totalVolumn: '5' 37 | }, 38 | { 39 | collectionName: 'Social Bear', 40 | avatar: 'https://i.seadn.io/gcs/files/39247760241721deff6ad36870e59bf7.png?auto=format&dpr=1&h=500', 41 | floorPrice: '0.25', 42 | totalVolumn: '4' 43 | }, 44 | { 45 | collectionName: 'Consortium Key', 46 | avatar: 'https://i.seadn.io/gcs/files/8bc879f0a6c5f92993686103285ce454.jpg?auto=format&dpr=1&h=500', 47 | floorPrice: '2.11', 48 | totalVolumn: '4' 49 | }, 50 | ] 51 | 52 | export default function TrendingInMemberships(){ 53 | var settings = { 54 | dots: true, 55 | infinite: false, 56 | speed: 500, 57 | slidesToShow: 5, 58 | slidesToScroll: 5, 59 | initialSlide: 0, 60 | responsive: [ 61 | { 62 | breakpoint: 1200, 63 | settings: { 64 | slidesToShow: 4, 65 | slidesToScroll: 4, 66 | infinite: true, 67 | dots: true, 68 | }, 69 | }, 70 | { 71 | breakpoint: 1024, 72 | settings: { 73 | slidesToShow: 3, 74 | slidesToScroll: 3, 75 | infinite: true, 76 | dots: true 77 | } 78 | }, 79 | { 80 | breakpoint: 600, 81 | settings: { 82 | slidesToShow: 2, 83 | slidesToScroll: 2, 84 | initialSlide: 2 85 | } 86 | }, 87 | { 88 | breakpoint: 480, 89 | settings: { 90 | slidesToShow: 1, 91 | slidesToScroll: 1 92 | } 93 | } 94 | ] 95 | }; 96 | return ( 97 | 98 | 99 | {TrendingInMembershipsData.map((item, index) => ( 100 | 101 | 111 | {item.collectionName} 116 | {item.collectionName} 117 | 123 | 124 | 131 | Floor 132 | 133 | {item.floorPrice} ETH 134 | 135 | 136 | 143 | {" "} 144 | Total Volumn{" "} 145 | 146 | {item.totalVolumn} ETH 147 | 148 | 149 | 150 | 151 | ))} 152 | 153 | 154 | ); 155 | } -------------------------------------------------------------------------------- /src/components/explorer/TrendingInMusic.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Slider from "react-slick"; 3 | import "slick-carousel/slick/slick.css"; 4 | import "slick-carousel/slick/slick-theme.css"; 5 | import { Box, Stack, Typography } from '@mui/material' 6 | 7 | const TrendingInMusicData = [ 8 | { 9 | collectionName: 'PIXELATED', 10 | avatar: 'https://i.seadn.io/gcs/files/697002d708a060a18d490c3213627ecd.jpg?auto=format&dpr=1&h=500', 11 | floorPrice: '0.10', 12 | totalVolumn: '2' 13 | }, 14 | { 15 | collectionName: 'A0K1VERSE Passport', 16 | avatar: 'https://i.seadn.io/gcs/files/03812601d31dc45ac91e69a6afc0a93f.png?auto=format&dpr=1&h=500', 17 | floorPrice: '0.04', 18 | totalVolumn: '2' 19 | }, 20 | { 21 | collectionName: 'Stickmen Toys', 22 | avatar: 'https://i.seadn.io/gcs/files/2d21367a0bdef1d9db4505e86dba8fdd.gif?auto=format&dpr=1&h=500', 23 | floorPrice: '0.02', 24 | totalVolumn: '1' 25 | }, 26 | { 27 | collectionName: 'WVRPS by WarpSound', 28 | avatar: 'https://i.seadn.io/gcs/files/696760b3a50f8f59bcccadd190e3abe0.jpg?auto=format&dpr=1&h=500', 29 | floorPrice: '0.04', 30 | totalVolumn: '0.87' 31 | }, 32 | { 33 | collectionName: 'SAN Origin', 34 | avatar: 'https://i.seadn.io/gcs/files/5afb86d58153fdaa435143f57d7c62b5.png?auto=format&dpr=1&h=500', 35 | floorPrice: '0.03', 36 | totalVolumn: '0.59' 37 | }, 38 | { 39 | collectionName: 'Another Life by Violetta', 40 | avatar: 'https://i.seadn.io/gcs/files/5672ef507be9e77938bd467ce0eabe22.png?auto=format&dpr=1&h=500', 41 | floorPrice: '0.02', 42 | totalVolumn: '0.42' 43 | }, 44 | ] 45 | 46 | export default function TrendingInMusic(){ 47 | var settings = { 48 | dots: true, 49 | infinite: false, 50 | speed: 500, 51 | slidesToShow: 5, 52 | slidesToScroll: 5, 53 | initialSlide: 0, 54 | responsive: [ 55 | { 56 | breakpoint: 1200, 57 | settings: { 58 | slidesToShow: 4, 59 | slidesToScroll: 4, 60 | infinite: true, 61 | dots: true, 62 | }, 63 | }, 64 | { 65 | breakpoint: 1024, 66 | settings: { 67 | slidesToShow: 3, 68 | slidesToScroll: 3, 69 | infinite: true, 70 | dots: true 71 | } 72 | }, 73 | { 74 | breakpoint: 600, 75 | settings: { 76 | slidesToShow: 2, 77 | slidesToScroll: 2, 78 | initialSlide: 2 79 | } 80 | }, 81 | { 82 | breakpoint: 480, 83 | settings: { 84 | slidesToShow: 1, 85 | slidesToScroll: 1 86 | } 87 | } 88 | ] 89 | }; 90 | return ( 91 | 92 | 93 | {TrendingInMusicData.map((item, index) => ( 94 | 95 | 105 | {item.collectionName} 110 | {item.collectionName} 111 | 117 | 118 | 125 | Floor 126 | 127 | {item.floorPrice} ETH 128 | 129 | 130 | 137 | {" "} 138 | Total Volumn{" "} 139 | 140 | {item.totalVolumn} ETH 141 | 142 | 143 | 144 | 145 | ))} 146 | 147 | 148 | ); 149 | } -------------------------------------------------------------------------------- /src/components/explorer/TrendingInPFPs.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Slider from "react-slick"; 3 | import "slick-carousel/slick/slick.css"; 4 | import "slick-carousel/slick/slick-theme.css"; 5 | import { Box, Stack, Typography } from '@mui/material' 6 | 7 | const TrendingInPFPsData = [ 8 | { 9 | collectionName: 'Azuki', 10 | avatar: 'https://i.seadn.io/gae/O0XkiR_Z2--OPa_RA6FhXrR16yBOgIJqSLdHTGA0-LAhyzjSYcb3WEPaCYZHeh19JIUEAUazofVKXcY2qOylWCdoeBN6IfGZLJ3I4A?auto=format&dpr=1&h=500', 11 | floorPrice: '14.80', 12 | totalVolumn: '2331' 13 | }, 14 | { 15 | collectionName: 'BEANZ Official', 16 | avatar: 'https://i.seadn.io/gae/WRcl2YH8E3_7884mcJ0DRN7STGqA8xZQKd-0MFmPftlxUR6i1xB9todMXRW2M6SIpXKAZ842UqKDm1UrkKG8nr7l9NjCkIw-GLQSFQ?auto=format&dpr=1&h=500', 17 | floorPrice: '1.28', 18 | totalVolumn: '1373' 19 | }, 20 | { 21 | collectionName: 'Lil Pudgys', 22 | avatar: 'https://i.seadn.io/gcs/files/ff12374123ac5e8571b01d03874e8a76.png?auto=format&dpr=1&h=500', 23 | floorPrice: '0.35', 24 | totalVolumn: '37' 25 | }, 26 | { 27 | collectionName: 'internet swag', 28 | avatar: 'https://i.seadn.io/gcs/files/0531e051c6c5193ba067e54e9a7a5dd4.jpg?auto=format&dpr=1&h=500', 29 | floorPrice: '<0.01', 30 | totalVolumn: '19' 31 | }, 32 | { 33 | collectionName: 'Nakamigos', 34 | avatar: 'https://i.seadn.io/gcs/files/4582367dff6ee62dcc023a2339a5fdea.png?auto=format&dpr=1&h=500', 35 | floorPrice: '0.25', 36 | totalVolumn: '45' 37 | }, 38 | { 39 | collectionName: 'reepz', 40 | avatar: 'https://i.seadn.io/gcs/files/bfd85085ffeca0147b22808813630075.png?auto=format&dpr=1&h=500', 41 | floorPrice: '0.07', 42 | totalVolumn: '13' 43 | }, 44 | { 45 | collectionName: 'Fumo Maker', 46 | avatar: 'https://i.seadn.io/gcs/files/0ed12fe92220f123944fc69a0cf5861b.png?auto=format&dpr=1&h=500', 47 | floorPrice: '<0.01', 48 | totalVolumn: '2' 49 | }, 50 | ] 51 | 52 | export default function TrendingInPFPs(){ 53 | var settings = { 54 | dots: true, 55 | infinite: false, 56 | speed: 500, 57 | slidesToShow: 5, 58 | slidesToScroll: 5, 59 | initialSlide: 0, 60 | responsive: [ 61 | { 62 | breakpoint: 1200, 63 | settings: { 64 | slidesToShow: 4, 65 | slidesToScroll: 4, 66 | infinite: true, 67 | dots: true, 68 | }, 69 | }, 70 | { 71 | breakpoint: 1024, 72 | settings: { 73 | slidesToShow: 3, 74 | slidesToScroll: 3, 75 | infinite: true, 76 | dots: true 77 | } 78 | }, 79 | { 80 | breakpoint: 600, 81 | settings: { 82 | slidesToShow: 2, 83 | slidesToScroll: 2, 84 | initialSlide: 2 85 | } 86 | }, 87 | { 88 | breakpoint: 480, 89 | settings: { 90 | slidesToShow: 1, 91 | slidesToScroll: 1 92 | } 93 | } 94 | ] 95 | }; 96 | return ( 97 | 98 | 99 | {TrendingInPFPsData.map((item, index) => ( 100 | 101 | 111 | {item.collectionName} 116 | {item.collectionName} 117 | 123 | 124 | 131 | Floor 132 | 133 | {item.floorPrice} ETH 134 | 135 | 136 | 143 | {" "} 144 | Total Volumn{" "} 145 | 146 | {item.totalVolumn} ETH 147 | 148 | 149 | 150 | 151 | ))} 152 | 153 | 154 | ); 155 | } -------------------------------------------------------------------------------- /src/components/explorer/TrendingInPhotography.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Slider from "react-slick"; 3 | import "slick-carousel/slick/slick.css"; 4 | import "slick-carousel/slick/slick-theme.css"; 5 | import { Box, Stack, Typography } from '@mui/material' 6 | 7 | const TrendingInPhotographyData = [ 8 | { 9 | collectionName: 'Justin Aversano', 10 | avatar: 'https://i.seadn.io/gae/9nZWLd8XGK7afpwcSiv8T6KGFXqumlWMmPH0HfeqAY9ly6w1D_qP3b3-4F3pTdE8gXn-6AReXWHr1gvtBoWDYTCo80oPxz_KIFDSNnQ?auto=format&dpr=1&h=500', 11 | floorPrice: '16.90', 12 | totalVolumn: '4' 13 | }, 14 | { 15 | collectionName: 'Every Day is a Gift', 16 | avatar: 'https://i.seadn.io/gcs/files/4bb654a5699142a3cef14e0a3a98058a.jpg?auto=format&dpr=1&h=500', 17 | floorPrice: '0.44', 18 | totalVolumn: '2' 19 | }, 20 | { 21 | collectionName: 'Rad by Barry Sutton', 22 | avatar: 'https://i.seadn.io/gcs/files/617b6dcd87c841be305d0df7b7c6af30.png?auto=format&dpr=1&h=500', 23 | floorPrice: '0.11', 24 | totalVolumn: '0.73' 25 | }, 26 | { 27 | collectionName: 'Auf Reisen', 28 | avatar: 'https://i.seadn.io/gcs/files/b7a53535f01ce4722583b9ded87a4bcd.jpg?auto=format&dpr=1&h=500', 29 | floorPrice: '<0.01', 30 | totalVolumn: '0.62' 31 | }, 32 | { 33 | collectionName: 'Women Unite', 34 | avatar: 'https://i.seadn.io/gae/DLA-sw1dn7YIpH-OCaY1Ci9GAO7Vc6tMlKV-46PqvdS7quNvRXfZB214rbFAv1qG7eKx8rqqS5qgNAATHQcy-tej1BPWrqeMDWPs?auto=format&dpr=1&h=500', 35 | floorPrice: '0.09', 36 | totalVolumn: '0.43' 37 | }, 38 | { 39 | collectionName: 'Fellowship Print Deeds', 40 | avatar: 'https://i.seadn.io/gcs/files/469bc1fe6c954a2c65ad8379bb871af0.png?auto=format&dpr=1&h=500', 41 | floorPrice: '0.30', 42 | totalVolumn: '0.30' 43 | }, 44 | ] 45 | 46 | export default function TrendingInPhotography(){ 47 | var settings = { 48 | dots: true, 49 | infinite: false, 50 | speed: 500, 51 | slidesToShow: 5, 52 | slidesToScroll: 5, 53 | initialSlide: 0, 54 | responsive: [ 55 | { 56 | breakpoint: 1200, 57 | settings: { 58 | slidesToShow: 4, 59 | slidesToScroll: 4, 60 | infinite: true, 61 | dots: true, 62 | }, 63 | }, 64 | { 65 | breakpoint: 1024, 66 | settings: { 67 | slidesToShow: 3, 68 | slidesToScroll: 3, 69 | infinite: true, 70 | dots: true 71 | } 72 | }, 73 | { 74 | breakpoint: 600, 75 | settings: { 76 | slidesToShow: 2, 77 | slidesToScroll: 2, 78 | initialSlide: 2 79 | } 80 | }, 81 | { 82 | breakpoint: 480, 83 | settings: { 84 | slidesToShow: 1, 85 | slidesToScroll: 1 86 | } 87 | } 88 | ] 89 | }; 90 | return ( 91 | 92 | 93 | {TrendingInPhotographyData.map((item, index) => ( 94 | 95 | 105 | {item.collectionName} 110 | {item.collectionName} 111 | 117 | 118 | 125 | Floor 126 | 127 | {item.floorPrice} ETH 128 | 129 | 130 | 137 | {" "} 138 | Total Volumn{" "} 139 | 140 | {item.totalVolumn} ETH 141 | 142 | 143 | 144 | 145 | ))} 146 | 147 | 148 | ); 149 | } -------------------------------------------------------------------------------- /src/components/profile.css: -------------------------------------------------------------------------------- 1 | .profile-item { 2 | display: flex; 3 | flex-direction: column; 4 | background-color: rgb(255, 255, 255); 5 | border: 1px solid rgb(229, 232, 235); 6 | border-radius: 10px; 7 | position: relative; 8 | z-index: 2; 9 | } 10 | .profile-item:hover { 11 | transform: translateY(-2px); 12 | box-shadow: rgb(4 17 29 / 25%) 0px 0px 8px 0px; 13 | transition: all 0.1s ease 0s; 14 | } 15 | .profile-item img { 16 | width: 100%; 17 | } 18 | .profile-item .title-div { 19 | padding: 12px; 20 | } 21 | .profile-item .collection-title { 22 | color: #707a83; 23 | font-size: 12px; 24 | } 25 | 26 | .profile-item .item-title { 27 | color: rgb(53, 56, 64); 28 | font-size: 12px; 29 | letter-spacing: 0.1px; 30 | font-weight: 600; 31 | text-align: left; 32 | } 33 | .profile-item .bottom-div { 34 | align-items: center; 35 | display: flex; 36 | font-weight: 500; 37 | padding: 12px; 38 | height: 42px; 39 | width: 100%; 40 | border-bottom-left-radius: 10px; 41 | border-bottom-right-radius: 10px; 42 | background: linear-gradient(rgba(229, 232, 235, 0.392) 0%, rgb(255, 255, 255) 20%); 43 | } 44 | .profile-item .icon-favorite:hover { 45 | color: rgb(235, 87, 87); 46 | transition: all 0.1s ease 0s; 47 | } 48 | .icon-favorite-select { 49 | color: rgb(235, 87, 87); 50 | } 51 | .profile-item .dropdown-menu { 52 | max-width: 350px; 53 | transition-duration: 300ms; 54 | overflow-y: auto; 55 | box-shadow: rgb(0 0 0 / 16%) 0px 4px 16px; 56 | background-color: rgb(255, 255, 255); 57 | color: rgb(4, 17, 29); 58 | max-width: initial; 59 | min-width: 220px; 60 | border-top-left-radius: 10px; 61 | border-top-right-radius: 10px; 62 | padding: 0 !important; 63 | } 64 | .dropdown-menu ul { 65 | padding-left: 0 !important; 66 | margin: 0; 67 | } 68 | .dropdown-menu li { 69 | border-bottom: 1px solid rgb(229, 232, 235); 70 | text-decoration: none; 71 | list-style-type: none; 72 | } 73 | .dropdown-menu li:hover { 74 | transition: all 0.2s ease 0s; 75 | box-shadow: rgb(4 17 29 / 25%) 0px 0px 8px 0px; 76 | background-color: rgb(251, 253, 255); 77 | } 78 | .dropdown-menu li span { 79 | font-weight: 600; 80 | font-size: 14px; 81 | color: rgb(4, 17, 29); 82 | } 83 | .sell-caption:hover { 84 | color: rgba(4, 17, 29, 0.7); 85 | transition: all 0.1s ease 0s; 86 | } 87 | 88 | .preview-item { 89 | width: 280px; 90 | } -------------------------------------------------------------------------------- /src/components/toast/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import toast from 'react-hot-toast'; 3 | 4 | import iconInfo from '../assets/info.svg'; 5 | import iconSuccess from '../assets/success.svg'; 6 | import iconError from '../assets/error.svg'; 7 | import iconWarning from '../assets/warning.svg'; 8 | 9 | import styles from './styles.module.scss'; 10 | 11 | const icons = { 12 | info: iconInfo, 13 | success: iconSuccess, 14 | error: iconError, 15 | warning: iconWarning, 16 | }; 17 | 18 | export default (type, title, body, onClick = () => {}) => { 19 | console.log('Toast type is ', type); 20 | console.log('Toast title is ', title); 21 | console.log('Toast body is ', body); 22 | return toast( 23 | () => ( 24 |
25 | {console.log('here is okay')} 26 |
27 | {type} 28 | {title} 29 |
30 | {body.length > 0 &&
{body}
} 31 |
32 | ), 33 | { 34 | duration: 5000, 35 | className: styles.toast, 36 | } 37 | ); 38 | }; 39 | -------------------------------------------------------------------------------- /src/components/toast/styles.module.scss: -------------------------------------------------------------------------------- 1 | .toast { 2 | cursor: pointer; 3 | padding: 0; 4 | border-radius: 10px; 5 | background-color: #FFF; 6 | box-shadow: 0 4px 40px rgba(0, 0, 0, .1); 7 | } 8 | 9 | .toastInner { 10 | margin: -4px -10px; 11 | padding: 24px; 12 | } 13 | 14 | .header { 15 | display: flex; 16 | align-items: center; 17 | 18 | .icon { 19 | width: 24px; 20 | height: 24px; 21 | object-fit: contain; 22 | margin-right: 14px; 23 | } 24 | 25 | span { 26 | font-weight: 700; 27 | font-size: 20px; 28 | line-height: 24.36px; 29 | color: #3D3D3D; 30 | white-space: pre-line; 31 | } 32 | } 33 | 34 | .body { 35 | margin-top: 12px; 36 | font-weight: 400; 37 | font-size: 16px; 38 | line-height: 25.6px; 39 | color: #3D3D3D; 40 | white-space: pre-line; 41 | } -------------------------------------------------------------------------------- /src/constants/errors.js: -------------------------------------------------------------------------------- 1 | export default { 2 | '-32700': 3 | 'Invalid JSON was received by the server. An error occurred on the server while parsing the JSON text!', 4 | '-32600': 'The JSON sent is not a valid Request object!', 5 | '-32601': 'The method does not exist / is not available!', 6 | '-32602': 'Invalid method parameter(s)!', 7 | '-32603': 'Internal JSON-RPC error!', 8 | '-32000': 'Invalid input', 9 | '-32001': 'Resource not found!', 10 | '-32002': 'Resource unavailable!', 11 | '-32003': 'Transaction rejected!', 12 | '-32004': 'Method not supported!', 13 | '-32005': 'Request limit exceeded!', 14 | '4001': 'User rejected the request!', 15 | '4100': 16 | 'The requested account and/or method has not been authorized by the user!', 17 | '4200': 'The requested method is not supported by this Ethereum provider!', 18 | '4900': 'The provider is disconnected from all chains!', 19 | '4901': 'The provider is disconnected from the specified chain!', 20 | }; 21 | -------------------------------------------------------------------------------- /src/constants/ipfs.constants.js: -------------------------------------------------------------------------------- 1 | export const IPFSConstants = { 2 | HashURI: 'https://cloudflare-ipfs.com/ipfs/', 3 | }; 4 | 5 | export const IPFSUris = [ 6 | 'https://artion.mypinata.cloud/ipfs/', 7 | 'https://artion1.mypinata.cloud/ipfs/', 8 | 'https://artion2.mypinata.cloud/ipfs/', 9 | 'https://artion3.mypinata.cloud/ipfs/', 10 | 'https://artion4.mypinata.cloud/ipfs/', 11 | 'https://artion5.mypinata.cloud/ipfs/', 12 | 'https://artion6.mypinata.cloud/ipfs/', 13 | 'https://artion7.mypinata.cloud/ipfs/', 14 | 'https://artion8.mypinata.cloud/ipfs/', 15 | 'https://artion9.mypinata.cloud/ipfs/', 16 | 'https://artion10.mypinata.cloud/ipfs/', 17 | 'https://artion11.mypinata.cloud/ipfs/', 18 | 'https://artion12.mypinata.cloud/ipfs/', 19 | 'https://artion13.mypinata.cloud/ipfs/', 20 | ]; 21 | -------------------------------------------------------------------------------- /src/contract/factory.js: -------------------------------------------------------------------------------- 1 | import { calculateGasMargin, getHigherGWEI } from '../utils'; 2 | import useContract from '../hooks/useContract'; 3 | import { ethers } from 'ethers'; 4 | 5 | export const getSigner = async () => { 6 | await window.ethereum.enable(); 7 | const provider = new ethers.providers.Web3Provider(window.ethereum); 8 | const signer = provider.getSigner(); 9 | return signer; 10 | }; 11 | 12 | export const useFactoryContract = () => { 13 | const { getContract } = useContract(); 14 | 15 | const Contracts = { 16 | songAlbumSingle: "0x0cf7A427Ad8b5472cAdFCaC6898Df9E921Cbe119", //ERC721 NFT factory address : 1song = 1NFT 17 | songAlbum: "0xD88dA5Eb6474FeaFC29c47E52F102eA23947e3E3" // ERC1155 NFT factory address : 1song=1000NFT 18 | }; 19 | 20 | const FACTORY_ABI = [ 21 | { 22 | inputs: [ 23 | { internalType: 'string', name: '_name', type: 'string' }, 24 | { internalType: 'string', name: '_symbol', type: 'string' }, 25 | ], 26 | name: 'createNFTContract', 27 | outputs: [{ internalType: 'address', name: '', type: 'address' }], 28 | stateMutability: 'payable', 29 | type: 'function', 30 | }, 31 | { 32 | inputs: [], 33 | name: 'platformFee', 34 | outputs: [{ internalType: 'uint256', name: '', type: 'uint256' }], 35 | stateMutability: 'view', 36 | type: 'function', 37 | }, 38 | { 39 | inputs: [], 40 | name: "getValue", 41 | outputs: [ 42 | { 43 | internalType: "uint256", 44 | name: "value", 45 | type: "uint256" 46 | } 47 | ], 48 | stateMutability: "payable", 49 | type: "function" 50 | }, 51 | ]; 52 | 53 | const getSongAlbumSingleFactoryContract = async () => 54 | await getContract(Contracts.songAlbumSingle, FACTORY_ABI); 55 | 56 | const getSongAlbumFactoryContract = async () => 57 | await getContract(Contracts.songAlbum, FACTORY_ABI); 58 | 59 | 60 | const createNFTContract = async (contract, name, symbol, value, from) => { 61 | const args = [name, symbol]; 62 | 63 | const options = { 64 | value, 65 | from, 66 | gasPrice: await getHigherGWEI(), 67 | }; 68 | const platformFee = await contract.platformFee() 69 | console.log({platformFee: platformFee.toString(), value:value, gasPrice:options.gasPrice}) 70 | 71 | const gasEstimate = await contract.estimateGas.createNFTContract( 72 | ...args, 73 | options 74 | ); 75 | console.log('Gas Estimat is ', gasEstimate); 76 | options.gasLimit = calculateGasMargin(gasEstimate); 77 | console.log('Gas Limit is ', options.gasLimit.toString()); 78 | return await contract.createNFTContract(...args, options); 79 | }; 80 | 81 | return { 82 | getSongAlbumSingleFactoryContract, 83 | getSongAlbumFactoryContract, 84 | createNFTContract, 85 | }; 86 | }; 87 | -------------------------------------------------------------------------------- /src/contract/index.js: -------------------------------------------------------------------------------- 1 | import { ethers } from 'ethers'; 2 | 3 | export * from './abi'; 4 | export * from './sales'; 5 | export * from './factory'; 6 | 7 | export const getSigner = async () => { 8 | await window.ethereum.enable(); 9 | const provider = new ethers.providers.Web3Provider(window.ethereum); 10 | const signer = provider.getSigner(); 11 | return signer; 12 | }; 13 | -------------------------------------------------------------------------------- /src/contract/sales.js: -------------------------------------------------------------------------------- 1 | import { calculateGasMargin, getHigherGWEI } from '../utils/index'; 2 | 3 | import useContract from '../hooks/useContract'; 4 | import { ethers } from 'ethers'; 5 | 6 | import { SALES_CONTRACT_ABI } from './abi'; 7 | 8 | export const useSalesContract = () => { 9 | const { getContract } = useContract(); 10 | const Contracts = { 11 | songAlbumMarketplace: "0x0cf7A427Ad8b5472cAdFCaC6898Df9E921Cbe119", //ERC721 NFT factory address : 1song = 1NFT 12 | }; 13 | 14 | const getSalesContract = async () => 15 | await getContract(Contracts.songAlbumMarketplace, SALES_CONTRACT_ABI); 16 | 17 | const buyItemETH = async (nftAddress, tokenId, owner, value, from) => { 18 | const contract = await getSalesContract(); 19 | const args = [nftAddress, tokenId, owner]; 20 | 21 | const options = { 22 | value, 23 | from, 24 | gasPrice: await getHigherGWEI(), 25 | }; 26 | 27 | const gasEstimate = await contract.estimateGas[ 28 | 'buyItem(address,uint256,address)' 29 | ](...args, options); 30 | options.gasLimit = calculateGasMargin(gasEstimate); 31 | return await contract['buyItem(address,uint256,address)'](...args, options); 32 | }; 33 | 34 | const buyItemERC20 = async (nftAddress, tokenId, payToken, owner) => { 35 | const contract = await getSalesContract(); 36 | const options = { 37 | gasPrice: await getHigherGWEI(), 38 | }; 39 | 40 | return await contract['buyItem(address,uint256,address,address)']( 41 | nftAddress, 42 | tokenId, 43 | payToken, 44 | owner, 45 | options 46 | ); 47 | }; 48 | 49 | const cancelListing = async (nftAddress, tokenId) => { 50 | const contract = await getSalesContract(); 51 | const options = { 52 | gasPrice: await getHigherGWEI(), 53 | }; 54 | 55 | const tx = await contract.cancelListing(nftAddress, tokenId, options); 56 | await tx.wait(); 57 | }; 58 | 59 | const listItem = async ( 60 | nftAddress, 61 | tokenId, 62 | quantity, 63 | payToken, 64 | pricePerItem, 65 | startingTime 66 | ) => { 67 | const contract = await getSalesContract(); 68 | 69 | const options = { 70 | gasPrice: await getHigherGWEI(), 71 | }; 72 | 73 | return await contract.listItem( 74 | nftAddress, 75 | tokenId, 76 | quantity, 77 | payToken, 78 | pricePerItem, 79 | startingTime, 80 | options 81 | ); 82 | }; 83 | 84 | const updateListing = async ( 85 | nftAddress, 86 | tokenId, 87 | payToken, 88 | newPrice 89 | // quantity 90 | ) => { 91 | const contract = await getSalesContract(); 92 | 93 | const options = { 94 | gasPrice: await getHigherGWEI(), 95 | }; 96 | 97 | return await contract.updateListing( 98 | nftAddress, 99 | tokenId, 100 | payToken, 101 | newPrice, 102 | options 103 | ); 104 | }; 105 | 106 | const createOffer = async ( 107 | nftAddress, 108 | tokenId, 109 | payToken, 110 | quantity, 111 | pricePerItem, 112 | deadline 113 | ) => { 114 | const contract = await getSalesContract(); 115 | 116 | const options = { 117 | gasPrice: await getHigherGWEI(), 118 | }; 119 | 120 | return await contract.createOffer( 121 | nftAddress, 122 | tokenId, 123 | payToken, 124 | quantity, 125 | pricePerItem, 126 | deadline, 127 | options 128 | ); 129 | }; 130 | 131 | const cancelOffer = async (nftAddress, tokenId) => { 132 | const contract = await getSalesContract(); 133 | const options = { 134 | gasPrice: await getHigherGWEI(), 135 | }; 136 | 137 | return await contract.cancelOffer(nftAddress, tokenId, options); 138 | }; 139 | 140 | const acceptOffer = async (nftAddress, tokenId, creator) => { 141 | const contract = await getSalesContract(); 142 | const options = { 143 | gasPrice: await getHigherGWEI(), 144 | }; 145 | 146 | return await contract.acceptOffer(nftAddress, tokenId, creator, options); 147 | }; 148 | 149 | const registerRoyalty = async (nftAddress, tokenId, royalty) => { 150 | const contract = await getSalesContract(); 151 | const options = { 152 | gasPrice: await getHigherGWEI(), 153 | gasLimit: ethers.BigNumber.from(360000), 154 | }; 155 | console.log('Royalty is ', royalty, ' and Gas Price is ', options.gasPrice,' and NFT address is ', nftAddress, ' and TokenID is ', tokenId, ' and Gas Limit is ', options.gasLimit); 156 | console.log('SalesContract is ', contract); 157 | return await contract.registerRoyalty( 158 | nftAddress, 159 | tokenId, 160 | royalty, 161 | options 162 | ); 163 | }; 164 | 165 | const getCollectionRoyalty = async nftAddress => { 166 | const contract = await getSalesContract(); 167 | return await contract.collectionRoyalties(nftAddress); 168 | }; 169 | 170 | return { 171 | getSalesContract, 172 | buyItemETH, 173 | buyItemERC20, 174 | cancelListing, 175 | listItem, 176 | updateListing, 177 | createOffer, 178 | cancelOffer, 179 | acceptOffer, 180 | registerRoyalty, 181 | getCollectionRoyalty, 182 | }; 183 | }; 184 | -------------------------------------------------------------------------------- /src/errors.js: -------------------------------------------------------------------------------- 1 | export default { 2 | '-32700': 3 | 'Invalid JSON was received by the server. An error occurred on the server while parsing the JSON text!', 4 | '-32600': 'The JSON sent is not a valid Request object!', 5 | '-32601': 'The method does not exist / is not available!', 6 | '-32602': 'Invalid method parameter(s)!', 7 | '-32603': 'Internal JSON-RPC error!', 8 | '-32000': 'Invalid input', 9 | '-32001': 'Resource not found!', 10 | '-32002': 'Resource unavailable!', 11 | '-32003': 'Transaction rejected!', 12 | '-32004': 'Method not supported!', 13 | '-32005': 'Request limit exceeded!', 14 | '4001': 'User rejected the request!', 15 | '4100': 16 | 'The requested account and/or method has not been authorized by the user!', 17 | '4200': 'The requested method is not supported by this Ethereum provider!', 18 | '4900': 'The provider is disconnected from all chains!', 19 | '4901': 'The provider is disconnected from the specified chain!', 20 | }; 21 | -------------------------------------------------------------------------------- /src/hooks/useContract.js: -------------------------------------------------------------------------------- 1 | import { useCallback } from 'react'; 2 | import { ethers } from 'ethers'; 3 | import { useWeb3React } from '@web3-react/core'; 4 | 5 | // eslint-disable-next-line no-undef 6 | const RPCurl = "https://api.avax.network/ext/bc/C/rpc"; 7 | const RPCurlTest = "https://api.avax-test.network/ext/bc/C/rpc"; 8 | // const ChainID = 43113; 9 | // const ChainIDTest = 43114; 10 | 11 | export default () => { 12 | const { chainId } = useWeb3React(); 13 | 14 | const getContract = useCallback( 15 | async (address, abi) => { 16 | if (chainId) { 17 | await window.ethereum.enable(); 18 | const provider = new ethers.providers.Web3Provider(window.ethereum); 19 | const signer = provider.getSigner(); 20 | return new ethers.Contract(address, abi, signer); 21 | } else { 22 | const provider = new ethers.providers.JsonRpcProvider( 23 | RPCurlTest, 24 | chainId 25 | ); 26 | 27 | return new ethers.Contract(address, abi, provider); 28 | } 29 | }, 30 | [chainId] 31 | ); 32 | 33 | return { getContract }; 34 | }; 35 | -------------------------------------------------------------------------------- /src/images/2Pac Greatest Hits.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cosmos-AI/KdaSea-Frontend/f1c051b0cfa86ffc2d5061700eb4eb1c99c18c28/src/images/2Pac Greatest Hits.jpg -------------------------------------------------------------------------------- /src/images/All Eyez On Me.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cosmos-AI/KdaSea-Frontend/f1c051b0cfa86ffc2d5061700eb4eb1c99c18c28/src/images/All Eyez On Me.jpg -------------------------------------------------------------------------------- /src/images/Dire Straits Brothers in Arms.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cosmos-AI/KdaSea-Frontend/f1c051b0cfa86ffc2d5061700eb4eb1c99c18c28/src/images/Dire Straits Brothers in Arms.jpg -------------------------------------------------------------------------------- /src/images/DownArrow.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/images/DownIcon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/images/FaceBook.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/images/Filter.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/images/HIcon.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cosmos-AI/KdaSea-Frontend/f1c051b0cfa86ffc2d5061700eb4eb1c99c18c28/src/images/HIcon.PNG -------------------------------------------------------------------------------- /src/images/HeaderIcon.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cosmos-AI/KdaSea-Frontend/f1c051b0cfa86ffc2d5061700eb4eb1c99c18c28/src/images/HeaderIcon.PNG -------------------------------------------------------------------------------- /src/images/Instagram.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/images/Notification.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/images/Private Investigation.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cosmos-AI/KdaSea-Frontend/f1c051b0cfa86ffc2d5061700eb4eb1c99c18c28/src/images/Private Investigation.jpg -------------------------------------------------------------------------------- /src/images/Search.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/images/Twitter.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/images/UpIcon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/images/Upload.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/images/apple.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/images/back.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/images/copyIcon.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cosmos-AI/KdaSea-Frontend/f1c051b0cfa86ffc2d5061700eb4eb1c99c18c28/src/images/copyIcon.PNG -------------------------------------------------------------------------------- /src/images/eckoWallet.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cosmos-AI/KdaSea-Frontend/f1c051b0cfa86ffc2d5061700eb4eb1c99c18c28/src/images/eckoWallet.jpg -------------------------------------------------------------------------------- /src/images/front.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cosmos-AI/KdaSea-Frontend/f1c051b0cfa86ffc2d5061700eb4eb1c99c18c28/src/images/front.webp -------------------------------------------------------------------------------- /src/images/loveIcon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/images/profile.dev.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cosmos-AI/KdaSea-Frontend/f1c051b0cfa86ffc2d5061700eb4eb1c99c18c28/src/images/profile.dev.jpeg -------------------------------------------------------------------------------- /src/images/profile.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cosmos-AI/KdaSea-Frontend/f1c051b0cfa86ffc2d5061700eb4eb1c99c18c28/src/images/profile.jpg -------------------------------------------------------------------------------- /src/images/store-front.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cosmos-AI/KdaSea-Frontend/f1c051b0cfa86ffc2d5061700eb4eb1c99c18c28/src/images/store-front.png -------------------------------------------------------------------------------- /src/images/storeFront.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cosmos-AI/KdaSea-Frontend/f1c051b0cfa86ffc2d5061700eb4eb1c99c18c28/src/images/storeFront.PNG -------------------------------------------------------------------------------- /src/images/storeFront.dev.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cosmos-AI/KdaSea-Frontend/f1c051b0cfa86ffc2d5061700eb4eb1c99c18c28/src/images/storeFront.dev.PNG -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import { Provider } from "react-redux"; 4 | import { store } from "../src/stores/reduxStore"; 5 | import "./index.css"; 6 | import App from "./App"; 7 | import reportWebVitals from "./reportWebVitals"; 8 | import WalletProvider from "./components/WalletProvider"; 9 | import { createTheme, MuiThemeProvider } from "@material-ui/core"; 10 | 11 | const theme = createTheme({ 12 | palette: { 13 | primary: { 14 | main: "#E33E7F", 15 | }, 16 | }, 17 | }); 18 | 19 | ReactDOM.render( 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | , 29 | document.getElementById("root") 30 | ); 31 | 32 | // If you want to start measuring performance in your app, pass a function 33 | // to log results (for example: reportWebVitals(console.log)) 34 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 35 | reportWebVitals(); 36 | -------------------------------------------------------------------------------- /src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/pages/MainPage.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from 'react'; 2 | import NFTItem from '../components/Item'; 3 | import { getAllOrders, getTokenData } from '../api/api'; 4 | import Loading from '../components/Loading'; 5 | 6 | const MainPage = props => { 7 | 8 | const [orderData, setOrderData] = useState([]); 9 | const [tokenData, setTokenData] = useState([]); 10 | const [loading, setLoading] = useState(false); 11 | useEffect(() => { 12 | setLoading(true); 13 | getAllOrders().then(res => { 14 | setOrderData(res); 15 | const tokenIds = []; 16 | res.forEach(order => { 17 | tokenIds.push(order.tokenId); 18 | }); 19 | getTokenData(tokenIds).then(result => { 20 | setTokenData(result); 21 | setLoading(false) 22 | }); 23 | }) 24 | }, []); 25 | 26 | return ( 27 | 28 | {!loading &&
29 | { 30 | tokenData.map((item, index) => { 31 | return ( 32 |
33 | 34 |
35 | ); 36 | }) 37 | } 38 |
} 39 | {loading && } 40 | 41 | ); 42 | } 43 | 44 | export default MainPage; 45 | -------------------------------------------------------------------------------- /src/pages/ProfilePage.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect } from 'react'; 2 | import './profile.css' 3 | import { useState, useRef } from "react"; 4 | import ProfileItem from '../components/ProfileItem'; 5 | import { useNavigate } from 'react-router-dom'; 6 | import { login, getTokenData } from '../api/api'; 7 | import Loading from '../components/Loading'; 8 | 9 | const ProfilePage = props => { 10 | 11 | const navigate = useNavigate(); 12 | //const [userInfo, setUserInfo] = useState({}); 13 | const [collectedData, setCollectedData] = useState([]); 14 | const [createdData, setCreatedData] = useState([]); 15 | const [navIndex, setNavIndex] = useState(0) 16 | const [loading, setLoading] = useState(true) 17 | const navCollected = useRef(); 18 | const navCreated = useRef(); 19 | 20 | useEffect(() => { 21 | login(props.account).then(res => { 22 | if (res != null) { 23 | //setUserInfo(res); 24 | (async () => { 25 | if (res.owned.length > 0) { 26 | const collected = await getTokenData(res.owned); 27 | setCollectedData(collected); 28 | setLoading(false); 29 | } else setLoading(false); 30 | if (res.created.length > 0) { 31 | const created = await getTokenData(res.created); 32 | setCreatedData(created); 33 | } 34 | })(); 35 | } 36 | }); 37 | }, []); 38 | 39 | useEffect(() => { 40 | if (navIndex == 0 && !loading) { 41 | navCollected.current.classList.add('active') 42 | navCreated.current.classList.remove('active') 43 | } else if (navIndex == 1 && !loading) { 44 | navCollected.current.classList.remove('active') 45 | navCreated.current.classList.add('active') 46 | } 47 | return true 48 | }, ([navIndex])); 49 | 50 | const clickCreate = () => { 51 | navigate('/create'); 52 | } 53 | 54 | return ( 55 | 56 | {loading && } 57 | {!loading && 58 |
59 | 78 | {navIndex == 0 ? 79 |
80 |
81 | { 82 | collectedData.map((item, index) => { 83 | return ( 84 |
85 | 86 |
87 | ); 88 | }) 89 | } 90 |
91 |
: 92 |
93 |
94 | { 95 | createdData.map((item, index) => { 96 | return ( 97 |
98 | 99 |
100 | ); 101 | }) 102 | } 103 |
104 |
105 | } 106 | 107 |
} 108 | ); 109 | } 110 | 111 | 112 | export default ProfilePage; 113 | -------------------------------------------------------------------------------- /src/pages/SellPage.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from 'react'; 2 | import './sell.css'; 3 | import { useLocation, useNavigate } from 'react-router-dom'; 4 | import ProfileItem from '../components/ProfileItem'; 5 | import { getTokenData, createOrder } from '../api/api'; 6 | import { Contract } from '@ethersproject/contracts'; 7 | import { parseEther } from '@ethersproject/units'; 8 | import marketplaceABI from '../abi/marketplace.abi.json'; 9 | import nftABI from '../abi/nft.abi.json'; 10 | import Swal from 'sweetalert2'; 11 | import Loading from '../components/Loading'; 12 | 13 | const AVAX_ICON = '/img/avax.png' 14 | const SellPage = props => { 15 | 16 | const [price, setPrice] = useState(0); 17 | const [data, setData] = useState({}); 18 | const [tokenId, setTokenId] = useState(0); 19 | const { pathname } = useLocation(); 20 | const [selling, setSelling] = useState(false); 21 | const navigate = useNavigate(); 22 | 23 | const contractAddress = '0x6be1203c494601d1EBEb59e66c31BFFeC0231f97'; 24 | const contractNftAddress = '0xdC16363e321fa962A85D5455c71572F35d7aB576'; 25 | 26 | useEffect(() => { 27 | const path_parts = pathname.split('/'); 28 | const tokenId = parseInt(path_parts[2]); 29 | setTokenId(tokenId); 30 | const token_array = []; 31 | token_array.push(tokenId); 32 | getTokenData(token_array).then(res => { 33 | if (res != null) 34 | setData(res[0]); 35 | }); 36 | }, []); 37 | 38 | const clickCreateOrder = (e) => { 39 | e.preventDefault(); 40 | const contract = new Contract(contractAddress, marketplaceABI, props.library).connect(props.library.getSigner(props.account)); 41 | const contractNft = new Contract(contractNftAddress, nftABI, props.library).connect(props.library.getSigner(props.account)); 42 | 43 | if (price == 0) { 44 | Swal.fire({ 45 | title: 'Creating Order', 46 | text: 'Price is invalid', 47 | icon: 'error', 48 | confirmButtonText: 'OK' 49 | }); 50 | return; 51 | } 52 | if (tokenId > 0 && props.library && price > 0) { 53 | setSelling(true); 54 | contractNft.approve(contractAddress, tokenId).then(txRes => { 55 | txRes.wait().then(() => { 56 | contract.createOrderForSale(tokenId, '0x0000000000000000000000000000000000000000', parseEther('' + price)).then(res => { 57 | res.wait().then(result => { 58 | const orderId = result.events[3].args[1].toNumber(); 59 | 60 | createOrder(orderId, tokenId, '0x0000000000000000000000000000000000000000', parseEther(price).toString(), props.account).then(res => { 61 | if (res != null) { 62 | Swal.fire({ 63 | title: 'Order Report', 64 | text: 'The NFT is ready for sale', 65 | icon: 'success', 66 | confirmButtonText: 'OK' 67 | }); 68 | setSelling(false); 69 | navigate('/marketplace'); 70 | } 71 | }) 72 | 73 | }).catch(err => { 74 | setSelling(false); 75 | console.log(err) 76 | }); 77 | }).catch(err => { 78 | console.log(err) 79 | setSelling(false); 80 | }); 81 | }); 82 | }); 83 | } 84 | } 85 | 86 | return ( 87 | 88 | {!selling && 89 |
90 |
91 |
92 |

List item for sale

93 |
94 |
95 | Price 96 |
97 |
98 | alt 99 | AVAX 100 |
101 |
102 |
103 | setPrice(e.target.value)} required /> 104 |
105 |
106 | Fees 107 |
108 | Service Fee 109 | 2.5% 110 |
111 | 114 |
115 | 116 |
117 |
118 | Preview 119 | 120 |
121 |
122 |
} 123 | {selling && } 124 | 125 | ); 126 | } 127 | 128 | 129 | export default SellPage; 130 | -------------------------------------------------------------------------------- /src/pages/detail.css: -------------------------------------------------------------------------------- 1 | .detail-container { 2 | min-height: calc(100vh - 77px - 46px); 3 | } 4 | 5 | .btn-favorite { 6 | color: #707a83; 7 | } 8 | .btn-favorite:hover { 9 | color: black; 10 | transition: all 0.4s; 11 | } 12 | .accordion-button:not(.collapsed) { 13 | color: black !important; 14 | background-color: transparent !important; 15 | } 16 | .accordion-button:focus { 17 | box-shadow: none !important; 18 | } 19 | .font-weight-700 { 20 | font-weight: 700; 21 | } 22 | .float-right { 23 | float: right; 24 | } 25 | .btn-buy-now { 26 | background-color: #2081e2; 27 | box-shadow: rgba(4, 17, 29, 0.25) 0px 0px 8px 0px; 28 | border-radius: 10px; 29 | text-align: center; 30 | color: white; 31 | cursor: pointer; 32 | width: 200px; 33 | height: 50px; 34 | padding: 12px 20px; 35 | font-weight: 600; 36 | } 37 | .btn-buy-now:hover { 38 | background-color: rgb(24, 104, 183); 39 | transition: all 0.4s; 40 | } 41 | .current-price-div { 42 | padding: 20px; 43 | border-radius: 10px; 44 | border: 1px solid rgba(0,0,0,.125); 45 | } -------------------------------------------------------------------------------- /src/pages/mint.css: -------------------------------------------------------------------------------- 1 | .dropzone-placeholder { 2 | position: relative; 3 | padding: 4px; 4 | cursor: pointer; 5 | border: 3px dashed rgb(204, 204, 204); 6 | border-radius: 10px; 7 | height: 257px; 8 | width: 350px; 9 | padding: 4px; 10 | } 11 | .dropzone-placeholder-mask { 12 | width: 100%; 13 | height: 100%; 14 | display: flex; 15 | align-items: center; 16 | flex-direction: column; 17 | justify-content: center; 18 | border-radius: 10px; 19 | } 20 | 21 | .dropzone-placeholder-mask:hover { 22 | background-color: rgb(204, 204, 204); 23 | transition: all 0.2s; 24 | } 25 | .create-container { 26 | width: 60%; 27 | min-height: calc(100vh - 77px - 46px); 28 | } 29 | .create-container .form-label { 30 | font-size: 1.5rem; 31 | font-weight: 500; 32 | } 33 | .amount-input{ 34 | height: 50px; 35 | background-color: rgb(255, 255, 255); 36 | border-radius: 10px; 37 | border: 1px solid rgb(229, 232, 235); 38 | width: 100%; 39 | padding: 12px; 40 | } 41 | .amount-input:active { 42 | border-color: rgb(112, 122, 131) !important; 43 | box-shadow: rgb(4 17 29 / 25%) 0px 0px 8px 0px !important; 44 | } 45 | -------------------------------------------------------------------------------- /src/pages/mint/index-test.jsx: -------------------------------------------------------------------------------- 1 | import React, {useEffect, useRef, useState, useCallback} from 'react' 2 | 3 | import Select from 'react-dropdown-select' 4 | 5 | import styles from './styles.module.scss' 6 | 7 | 8 | 9 | const PaintBoard = () => { 10 | const [collectionName, setCollectionName] = useState(); 11 | const [albums, setAlbums] = useState([ 12 | { 13 | album: "GREATEST HITS LIVE", 14 | artist: " CHIC", 15 | }, 16 | { 17 | album: " ALEX LOVES", 18 | artist: "ALEXANDER O’NEAL", 19 | }, 20 | { 21 | album: " LIVE MY LIFE", 22 | artist: "2 PAC", 23 | }, 24 | { 25 | album: "USHER & FRIENDS VOL.2 ", 26 | artist: "USHER AND FRIENDS ", 27 | }, 28 | { 29 | album: "USHER & FRIENDS VOL.1 ", 30 | artist: "USHER AND FRIENDS ", 31 | }, 32 | { 33 | album: "EXIT WOUNDS - SOUNDTRACK for FILM", 34 | artist: "VARIOUS", 35 | }, 36 | ]); 37 | 38 | useEffect(()=>{ 39 | setAlbums([ 40 | { 41 | album: "GREATEST HITS LIVE", 42 | artist: " CHIC", 43 | }, 44 | { 45 | album: " ALEX LOVES", 46 | artist: "ALEXANDER O’NEAL", 47 | }, 48 | { 49 | album: " LIVE MY LIFE", 50 | artist: "2 PAC", 51 | }, 52 | { 53 | album: "USHER & FRIENDS VOL.2 ", 54 | artist: "USHER AND FRIENDS ", 55 | }, 56 | { 57 | album: "USHER & FRIENDS VOL.1 ", 58 | artist: "USHER AND FRIENDS ", 59 | }, 60 | { 61 | album: "EXIT WOUNDS - SOUNDTRACK for FILM", 62 | artist: "VARIOUS", 63 | }, 64 | ]) 65 | },[]) 66 | 67 | return ( 68 |
69 |
70 | 71 |
72 |
73 |
74 |
75 |

Albums

76 |