diff --git a/js/packages/common/package.json b/js/packages/common/package.json index b4d84a9..0e93b75 100644 --- a/js/packages/common/package.json +++ b/js/packages/common/package.json @@ -5,7 +5,8 @@ "main": "dist/lib/index.js", "types": "dist/lib/index.d.ts", "exports": { - ".": "./dist/lib/" + ".": "./dist/lib", + "./styles.css": "./dist/lib/styles.css" }, "license": "Apache-2.0", "publishConfig": { diff --git a/js/packages/web/.gitignore b/js/packages/web/.gitignore index eb5a316..933aec5 100644 --- a/js/packages/web/.gitignore +++ b/js/packages/web/.gitignore @@ -1 +1,2 @@ target +.next diff --git a/js/packages/web/craco.config.js b/js/packages/web/craco.config.js deleted file mode 100644 index 948e0a2..0000000 --- a/js/packages/web/craco.config.js +++ /dev/null @@ -1,57 +0,0 @@ -const CracoLessPlugin = require('craco-less'); -const CracoAlias = require('craco-alias'); -const CracoBabelLoader = require('craco-babel-loader'); -const path = require('path'); -const fs = require('fs'); -//console.log('qualified', pnp.resolveRequest('@babel/preset-typescript'), path.resolve(__dirname, '/') + 'src/'); - -// Handle relative paths to sibling packages -const appDirectory = fs.realpathSync(process.cwd()); -const resolvePackage = relativePath => path.resolve(appDirectory, relativePath); - -module.exports = { - webpack: { - configure: (webpackConfig, { env, paths }) => { - paths.appBuild = webpackConfig.output.path = path.resolve( - './../../build/web', - ); - return webpackConfig; - }, - }, - plugins: [ - /*{ - plugin: CracoBabelLoader, - options: { - includes: [ - // No "unexpected token" error importing components from these lerna siblings: - resolvePackage('../packages'), - ], - }, - },*/ - /*{ - plugin: CracoAlias, - options: { - source: 'tsconfig', - // baseUrl SHOULD be specified - // plugin does not take it from tsconfig - baseUrl: '../../', - // tsConfigPath should point to the file where "baseUrl" and "paths" are specified - tsConfigPath: '../../tsconfig.json', - }, - },*/ - { - plugin: CracoLessPlugin, - options: { - lessLoaderOptions: { - lessOptions: { - modifyVars: { - '@primary-color': '#768BF9', - '@text-color': 'rgba(255, 255, 255)' - }, - javascriptEnabled: true, - }, - }, - }, - }, - ], -}; diff --git a/js/packages/web/next-env.d.ts b/js/packages/web/next-env.d.ts new file mode 100644 index 0000000..c6643fd --- /dev/null +++ b/js/packages/web/next-env.d.ts @@ -0,0 +1,3 @@ +/// +/// +/// diff --git a/js/packages/web/next.config.js b/js/packages/web/next.config.js new file mode 100644 index 0000000..28044dc --- /dev/null +++ b/js/packages/web/next.config.js @@ -0,0 +1,21 @@ +const withLess = require('next-with-less'); + +module.exports = withLess({ + async rewrites() { + return [ + { + source: '/:any*', + destination: '/', + }, + ]; + }, + lessLoaderOptions: { + lessOptions: { + modifyVars: { + '@primary-color': '#768BF9', + '@text-color': 'rgba(255, 255, 255)', + }, + javascriptEnabled: true, + }, + }, +}); diff --git a/js/packages/web/package.json b/js/packages/web/package.json index 6cb1439..6a8d403 100644 --- a/js/packages/web/package.json +++ b/js/packages/web/package.json @@ -5,7 +5,6 @@ "@ant-design/icons": "^4.4.0", "@babel/preset-typescript": "^7.12.13", "@cloudflare/stream-react": "^1.1.0", - "@craco/craco": "^5.7.0", "@oyster/common": "0.0.1", "@project-serum/serum": "^0.13.34", "@project-serum/sol-wallet-adapter": "^0.2.0", @@ -26,24 +25,26 @@ "buffer-layout": "^1.2.0", "canvas-confetti": "^1.4.0", "eventemitter3": "^4.0.7", + "less": "^4.1.1", + "less-loader": "^10.0.1", "lodash": "^4.17.20", + "next": "^11.0.1", + "next-with-less": "^1.0.0", "react": "16.13.1", "react-content-loader": "^6.0.3", "react-dom": "16.13.1", "react-intersection-observer": "^8.32.0", "react-masonry-css": "^1.0.16", "react-router-dom": "^5.2.0", - "react-scripts": "3.4.3", "react-virtualized": "^9.22.3", "three": "^0.128.0", "use-wallet": "^0.8.1" }, "scripts": { "prestart": "npm-link-shared ../common/node_modules/ . react", - "start": "craco start --verbose", - "build": "craco build", - "test": "craco test", - "eject": "react-scripts eject", + "start": "next dev", + "build": "next build", + "test": "jest", "deploy:ar": "arweave deploy-dir ../../build/web --key-file ", "deploy": "gh-pages -d ../../build/web --repo https://github.com/metaplex-foundation/metaplex", "format:fix": "prettier --write \"**/*.+(js|jsx|ts|tsx|json|css|md)\"" @@ -82,9 +83,6 @@ "@types/testing-library__react": "^10.2.0", "@types/three": "^0.128.0", "arweave-deploy": "^1.9.1", - "craco-alias": "^2.1.1", - "craco-babel-loader": "^0.1.4", - "craco-less": "^1.17.0", "gh-pages": "^3.1.0", "npm-link-shared": "0.5.6", "prettier": "^2.1.2", diff --git a/js/packages/web/public/index.html b/js/packages/web/public/index.html deleted file mode 100644 index 5d957fa..0000000 --- a/js/packages/web/public/index.html +++ /dev/null @@ -1,101 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - Metaplex NFT Marketplace - - - - - - -
- - - - - - - diff --git a/js/packages/web/_colors.less b/js/packages/web/src/_colors.less similarity index 100% rename from js/packages/web/_colors.less rename to js/packages/web/src/_colors.less diff --git a/js/packages/web/src/components/AppBar/index.less b/js/packages/web/src/components/AppBar/index.less index 27b23c3..274458d 100644 --- a/js/packages/web/src/components/AppBar/index.less +++ b/js/packages/web/src/components/AppBar/index.less @@ -1,4 +1,4 @@ -@import "_colors"; +@import '../../_colors.less'; .App-Bar { padding: 0px; @@ -29,7 +29,7 @@ align-items: center; text-align: center; - color: #FFFFFF; + color: #ffffff; padding: 10px 14px 10px 6px; margin-bottom: 0px; @@ -69,5 +69,3 @@ } } } - - diff --git a/js/packages/web/src/index.tsx b/js/packages/web/src/index.tsx deleted file mode 100644 index 52aeef4..0000000 --- a/js/packages/web/src/index.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import './wdyr'; - -import './styles.less'; -import React from 'react'; -import ReactDOM from 'react-dom'; -import App from './App'; -import * as serviceWorker from './serviceWorker'; -ReactDOM.render( - - - , - document.getElementById('root'), -); - -// If you want your app to work offline and load faster, you can change -// unregister() to register() below. Note this comes with some pitfalls. -// Learn more about service workers: https://bit.ly/CRA-PWA -serviceWorker.unregister(); diff --git a/js/packages/web/src/pages/_app.tsx b/js/packages/web/src/pages/_app.tsx new file mode 100644 index 0000000..4a3fa96 --- /dev/null +++ b/js/packages/web/src/pages/_app.tsx @@ -0,0 +1,16 @@ +import type { AppProps } from 'next/app'; +import Head from 'next/head'; + +import '../styles.less'; + +export default function App({ Component, pageProps }: AppProps) { + return ( + <> + + + Metaplex NFT Marketplace + + {typeof window === 'undefined' ? null : } + + ); +} diff --git a/js/packages/web/src/pages/_document.tsx b/js/packages/web/src/pages/_document.tsx new file mode 100644 index 0000000..7b37df5 --- /dev/null +++ b/js/packages/web/src/pages/_document.tsx @@ -0,0 +1,76 @@ +import Document, { + Html, + Head, + Main, + NextScript, + DocumentContext, +} from 'next/document'; + +export default class MetaplexDocument extends Document { + static async getInitialProps(ctx: DocumentContext) { + const initialProps = await Document.getInitialProps(ctx); + return { ...initialProps }; + } + + render() { + return ( + + + + + + + + + + + + + +
+ +