diff --git a/app.json b/app.json new file mode 100644 index 00000000..afb5248b --- /dev/null +++ b/app.json @@ -0,0 +1,7 @@ +{ + "buildpacks": [ + { + "url": "mars/create-react-app" + } + ] +} diff --git a/package.json b/package.json index 7699b2cf..b7310065 100644 --- a/package.json +++ b/package.json @@ -1,15 +1,18 @@ { "name": "opensea-whitelabel", - "version": "0.1.0", - "private": true, + "author": "Alex Atallah ", + "version": "1.0.0", + "description": "An example app showing how to easily white-label OpenSea and create your own NFT marketplace", "dependencies": { "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.3.2", "@testing-library/user-event": "^7.1.2", + "@types/iframe-resizer": "3.5.8", "@types/jest": "^24.0.0", "@types/node": "^12.0.0", "@types/react": "^16.9.0", "@types/react-dom": "^16.9.0", + "iframe-resizer": "4.2.9", "react": "^16.12.0", "react-dom": "^16.12.0", "react-scripts": "3.3.0", diff --git a/public/index.html b/public/index.html index aa069f27..5b80c3b8 100644 --- a/public/index.html +++ b/public/index.html @@ -3,11 +3,11 @@ - + - React App + + + My Marketplace diff --git a/public/manifest.json b/public/manifest.json index 080d6c77..2925dcf9 100644 --- a/public/manifest.json +++ b/public/manifest.json @@ -1,6 +1,6 @@ { - "short_name": "React App", - "name": "Create React App Sample", + "short_name": "My Marketplace", + "name": "Embedded OpenSea marketplace", "icons": [ { "src": "favicon.ico", @@ -20,6 +20,6 @@ ], "start_url": ".", "display": "standalone", - "theme_color": "#000000", - "background_color": "#ffffff" + "theme_color": "#ffffff", + "background_color": "#000000" } diff --git a/src/App.css b/src/App.css deleted file mode 100644 index 74b5e053..00000000 --- a/src/App.css +++ /dev/null @@ -1,38 +0,0 @@ -.App { - text-align: center; -} - -.App-logo { - height: 40vmin; - pointer-events: none; -} - -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } -} - -.App-header { - background-color: #282c34; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; -} - -.App-link { - color: #61dafb; -} - -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} diff --git a/src/App.tsx b/src/App.tsx index 226ee631..a3426041 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,26 +1,46 @@ import React from 'react'; -import logo from './logo.svg'; -import './App.css'; +import { ASSET_URL, CHOSEN_THEME } from './constants' +import logo from './static/images/logo.png'; +import './static/styles/App.css'; +import footer from './static/images/footer.png'; +import { iframeResizer } from 'iframe-resizer' +import './static/styles/App.css'; -const App: React.FC = () => { - return ( -
-
- logo -

- Edit src/App.tsx and save to reload. -

- - Learn React - -
-
- ); +const embeddedUrl = `${ASSET_URL}?embed=${CHOSEN_THEME}` + +class App extends React.Component { + + componentDidMount() { + iframeResizer({ log: false }, '#opensea-iframe') + } + + render() { + return ( +
+
+ logo +

+ +

+ menu +
+
+
+
+

+ My Marketplace +

+ Digital collectibles from my company +
+ +
+
+ {/* Placeholder image for footer */} + footer +
+
+ ); + } } export default App; diff --git a/src/constants.ts b/src/constants.ts new file mode 100644 index 00000000..009ded59 --- /dev/null +++ b/src/constants.ts @@ -0,0 +1,10 @@ +export const ASSET_URL = 'https://opensea.io/assets/0x1301566b3cb584e550a02d09562041ddc4989b91/28' + +export enum EmbedTheme { + Default = "true", + Simple = "simple", + Night = "night", + Day = "light", +} + +export const CHOSEN_THEME = EmbedTheme.Night; diff --git a/src/index.tsx b/src/index.tsx index 87d1be55..c9a5f97c 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,6 +1,6 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import './index.css'; +import './static/styles/index.css'; import App from './App'; import * as serviceWorker from './serviceWorker'; diff --git a/src/logo.svg b/src/logo.svg deleted file mode 100644 index 6b60c104..00000000 --- a/src/logo.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/src/static/images/footer.png b/src/static/images/footer.png new file mode 100644 index 00000000..fca3261e Binary files /dev/null and b/src/static/images/footer.png differ diff --git a/src/static/images/hero.jpg b/src/static/images/hero.jpg new file mode 100644 index 00000000..8b469220 Binary files /dev/null and b/src/static/images/hero.jpg differ diff --git a/src/static/images/logo.png b/src/static/images/logo.png new file mode 100644 index 00000000..db3575ca Binary files /dev/null and b/src/static/images/logo.png differ diff --git a/src/static/styles/App.css b/src/static/styles/App.css new file mode 100644 index 00000000..8d25cd07 --- /dev/null +++ b/src/static/styles/App.css @@ -0,0 +1,100 @@ +.App { + text-align: center; +} + +.App-logo { + height: 1em; + pointer-events: none; +} + +.App-header { + height: 10vh; + padding: 0 5vmax; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + font-size: calc(10px + 2vmin); +} + +.App-main { + min-height: 100vh; + left: 0; + bottom: 0; + right: 0; +} + +.App-footer { + min-height: 10vh; + background-color: #6229ca; + text-align: left; +} + +.App-link { + color: #61dafb; +} + +.App-hero { + width: 100vw; + height: 30vmin; + min-height: 150px; + background-color: #1e7157; + position: relative; + + font-weight: 700; + font-family: 'Titillium Web', 'Roboto', 'Avenir', 'Helvetica Neue', sans-serif; + color: white; + text-shadow: 2px 2px #000; + font-size: 4rem; + line-height: 4rem; + display: flex; + flex-direction: column; + justify-content: center; +} + +.App-hero * { + position: relative; + margin: 0; +} + +.App-hero small { + color: #bbb; + line-height: 3rem; + font-size: 1.3rem; + text-shadow: none; +} + +.App-hero-image { + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + z-index: 0; + filter: blur(3px); + -webkit-filter: blur(3px); + background-image: url("../images/hero.jpg"); + background-size: cover; + background-position: center center; + background-repeat: no-repeat; + opacity: 0.6; +} + +@keyframes App-logo-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + +@media(max-width: 600px) { + .App-hero { + line-height: 2.5rem; + font-size: 2.5rem; + } + .App-hero small { + font-size: 1rem; + } +} \ No newline at end of file diff --git a/src/index.css b/src/static/styles/index.css similarity index 61% rename from src/index.css rename to src/static/styles/index.css index ec2585e8..56ba7b4c 100644 --- a/src/index.css +++ b/src/static/styles/index.css @@ -1,3 +1,16 @@ +html { + height: 100%; + width: 100%; + /* background-color: #15151E; */ + background-color: #282c33; + color: white; +} + +a { + color: #6A24D3; + text-decoration: none; +} + body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', @@ -5,6 +18,12 @@ body { sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; + height: 100%; +} + +#root { + height: 100%; + width: 100%; } code { diff --git a/yarn.lock b/yarn.lock index fe6145f8..e68736d5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1408,6 +1408,11 @@ "@types/minimatch" "*" "@types/node" "*" +"@types/iframe-resizer@3.5.8": + version "3.5.8" + resolved "https://registry.yarnpkg.com/@types/iframe-resizer/-/iframe-resizer-3.5.8.tgz#d141f3cbebca951788e3b9a7654d46317bb9345b" + integrity sha512-gkdjvjShS1aKe3giEwOlKGJzUixA5kqMlFRT4zwjC+K+BZWiwGq5/HMSDFu2oeTBJlKP0iWABabssSYjc9PVuQ== + "@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0": version "2.0.1" resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.1.tgz#42995b446db9a48a11a07ec083499a860e9138ff" @@ -5041,6 +5046,11 @@ iferr@^0.1.5: resolved "https://registry.yarnpkg.com/iferr/-/iferr-0.1.5.tgz#c60eed69e6d8fdb6b3104a1fcbca1c192dc5b501" integrity sha1-xg7taebY/bazEEofy8ocGS3FtQE= +iframe-resizer@4.2.9: + version "4.2.9" + resolved "https://registry.yarnpkg.com/iframe-resizer/-/iframe-resizer-4.2.9.tgz#52673d9ff7fbb79b65e00591491e76025fae1a9a" + integrity sha512-ka8udWq66WzyRFu6sNs+lfz+KRH9f1u5bpORcpW5eQr60HBtopSJSgci4V8VF64GyxRiEQ/KCteOpABKwC1/fw== + ignore-walk@^3.0.1: version "3.0.3" resolved "https://registry.yarnpkg.com/ignore-walk/-/ignore-walk-3.0.3.tgz#017e2447184bfeade7c238e4aefdd1e8f95b1e37"