setup OpenSea creature demo

ProjectOpenSea · Jan 28, 2020 · 8ac0fc4 · 8ac0fc4
1 parent 0fe9ed2
commit 8ac0fc4
Show file tree

Hide file tree

Showing 15 changed files with 202 additions and 76 deletions.
diff --git a/app.json b/app.json
@@ -0,0 +1,7 @@
+{
+  "buildpacks": [
+    {
+      "url": "mars/create-react-app"
+    }
+  ]
+}
diff --git a/package.json b/package.json
@@ -1,15 +1,18 @@
 {
   "name": "opensea-whitelabel",
-  "version": "0.1.0",
-  "private": true,
+  "author": "Alex Atallah <[email protected]>",
+  "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
@@ -3,11 +3,11 @@
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Web site created using create-react-app"
+      content="White-labeled OpenSea: marketplace for crypto collectibles"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
@@ -24,7 +24,9 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/css?family=Titillium+Web:400,700" rel="stylesheet" />
+    <title>My Marketplace</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git 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
diff --git 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 (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
+const embeddedUrl = `${ASSET_URL}?embed=${CHOSEN_THEME}`
+
+class App extends React.Component {
+
+  componentDidMount() {
+    iframeResizer({ log: false }, '#opensea-iframe')
+  }
+
+  render() {
+    return (
+      <div className="App">
+        <header className="App-header">
+          <img src={logo} className="App-logo" alt="logo" />
+          <p>
+
+          </p>
+          <i className="material-icons right">menu</i>
+        </header>
+        <main className="App-main">
+          <div className="App-hero">
+            <div className="App-hero-image"></div>
+            <p>
+              My Marketplace
+            </p>
+            <small>Digital collectibles from my company</small>
+          </div>
+          <iframe id="opensea-iframe" title="Embedded OpenSea Marketplace" src={embeddedUrl} width='100%' height='100%' frameBorder='0' allowFullScreen></iframe>
+        </main>
+        <footer className="App-footer">
+          {/* Placeholder image for footer */}
+          <img style={{width: '100%'}} src={footer} className="footer" alt="footer" />
+        </footer>
+      </div>
+    );
+  }
 }
 
 export default App;
diff --git a/src/constants.ts 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
@@ -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
diff --git a/src/static/images/footer.png b/src/static/images/footer.png
diff --git a/src/static/images/hero.jpg b/src/static/images/hero.jpg
diff --git a/src/static/images/logo.png b/src/static/images/logo.png
diff --git a/src/static/styles/App.css 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;
+  }
+}
diff --git a/src/index.css → src/static/styles/index.css b/src/index.css → src/static/styles/index.css
@@ -1,10 +1,29 @@
+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',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
     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
@@ -1408,6 +1408,11 @@
     "@types/minimatch" "*"
     "@types/node" "*"
 
+"@types/[email protected]":
+  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=
 
+[email protected]:
+  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"