Merge pull request #864 from MoralisWeb3/beta-create-moralis-dapp

Beta create-moralis-dapp

.changeset/soft-boats-collect.md

@@ -0,0 +1,6 @@
+---
+"create-moralis-dapp": patch
+"demo-nextjs": patch
+---
+
+Beta version of the create-moralis-dapp CLI too to quickstart a new project

demos/nextjs/pages/api/auth/[...nextauth].ts

@@ -1,8 +1,6 @@
 import NextAuth from 'next-auth';
 import { MoralisNextAuthProvider } from '@moralisweb3/next';
 
-// For more information on each option (and a full list of options) go to
-// https://next-auth.js.org/configuration/options
 export default NextAuth({
   providers: [MoralisNextAuthProvider()],
   callbacks: {

package.json

@@ -55,6 +55,7 @@
       "packages/common/*",
       "packages/client/*",
       "packages/common/*",
+      "packages/create-moralis-dapp/*",
       "demos/*",
       "demos/firebase-proxy/*",
       "demos/firebase-auth-ext/*",

packages/create-moralis-dapp/.eslintrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+  extends: ['@moralisweb3'],
+  plugins: ['jest'],
+  ignorePatterns: ['**/lib/**/*', '**/*.test.ts', '**/dist/**/*', '**/build/**/*', '**/generated/**/*'],
+};

packages/create-moralis-dapp/README.md

@@ -0,0 +1 @@
+Run `create-moralis-dapp` in directory where you want to setup dApp

packages/create-moralis-dapp/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "create-moralis-dapp",
+  "author": "Moralis",
+  "version": "2.7.4",
+  "license": "MIT",
+  "private": false,
+  "main": "./lib/index.js",
+  "types": "./lib/index.d.ts",
+  "sideEffects": false,
+  "type": "commonjs",
+  "files": [
+    "lib/*"
+  ],
+  "bin": {
+    "create-moralis-dapp": "./lib/index.js"
+  },
+  "scripts": {
+    "lint": "eslint . --ext .js,.ts,.tsx,jsx",
+    "format": "prettier --write 'src/**/*.{js,ts}'",
+    "clean": "rm -rf lib && rm -rf tsconfig.tsbuildinfo && rm -rf ./node_modules/.cache/nx",
+    "build": "tsc",
+    "postbuild": "npm run copy-files",
+    "copy-files": "copyfiles -u 1 -a src/generators/*/template/** lib",
+    "dev": "ts-node-dev src/index.ts"
+  },
+  "devDependencies": {
+    "ejs": "^3.1.8",
+    "@types/ejs": "3.1.1",
+    "ora": "^5.4.1",
+    "chalk": "^5.0.1",
+    "fs-extra": "^10.1.0",
+    "inquirer": "^8.0.0",
+    "axios": "^1.2.0",
+    "lodash": "^4.17.21",
+    "copyfiles": "2.4.1"
+  }
+}

packages/create-moralis-dapp/src/generators/next/actions/askWeb3Lib/index.ts

@@ -0,0 +1,27 @@
+import { prompt } from 'inquirer';
+import { getVersionByName } from '../../utils';
+import { Web3LibSchema, web3LibSchema } from './web3LibSchema';
+
+export const askWeb3Lib = async (_destination: string) => {
+  const { web3Lib } = await prompt<Web3LibSchema>({
+    type: 'list',
+    name: 'web3Lib',
+    message: '🧙 : Select a Web3 library ...',
+    choices: [
+      { name: 'wagmi', value: web3LibSchema.wagmi },
+      { name: 'useDapp', value: web3LibSchema.useDapp },
+      { name: 'web3-react', value: web3LibSchema.web3React },
+    ],
+  });
+
+  return {
+    web3Lib,
+    dependencies: [
+      {
+        name: web3Lib.name,
+        version: getVersionByName(web3Lib.name),
+      },
+      { name: 'ethers', version: getVersionByName('ethers') },
+    ],
+  };
+};

packages/create-moralis-dapp/src/generators/next/actions/askWeb3Lib/web3LibSchema.ts

@@ -0,0 +1,52 @@
+import { DependencyName } from '../../utils';
+
+export type Web3LibSchema = Record<
+  string,
+  { name: DependencyName; imports: string; config: string; wrappers: string[] }
+>;
+
+export const web3LibSchema: Web3LibSchema = {
+  wagmi: {
+    name: 'wagmi',
+    imports: `
+      import { createClient, configureChains, defaultChains, WagmiConfig } from 'wagmi';
+      import { publicProvider } from 'wagmi/providers/public';`,
+    config: `
+      const { provider, webSocketProvider } = configureChains(defaultChains, [publicProvider()]);
+    
+      const client = createClient({
+        provider,
+        webSocketProvider,
+        autoConnect: true,
+      });`,
+    wrappers: [`<WagmiConfig client={client}>`, `</WagmiConfig>`],
+  },
+  useDapp: {
+    name: '@usedapp/core',
+    imports: `
+      import { Mainnet, DAppProvider, Config } from '@usedapp/core';
+      import { getDefaultProvider } from 'ethers';`,
+    config: `
+      const config: Config = {
+        readOnlyChainId: Mainnet.chainId,
+        readOnlyUrls: {
+          [Mainnet.chainId]: getDefaultProvider('mainnet'),
+        },
+        autoConnect: true,
+      };`,
+    wrappers: [`<DAppProvider config={config}>`, `</DAppProvider>`],
+  },
+  web3React: {
+    name: '@web3-react/core',
+    imports: `
+      import { ethers } from 'ethers';
+      import { Web3ReactProvider } from '@web3-react/core';`,
+    config: `
+      const getLibrary = (wrappers: any) => {
+        const library = new ethers.providers.Web3Provider(provider);
+        library.pollingInterval = 8000; // frequency provider is polling
+        return library;
+      };`,
+    wrappers: [`<Web3ReactProvider getLibrary={getLibrary}>`, `</Web3ReactProvider>`],
+  },
+};

packages/create-moralis-dapp/src/generators/next/actions/index.ts

@@ -0,0 +1 @@
+export * from './askWeb3Lib';

packages/create-moralis-dapp/src/generators/next/index.ts

@@ -0,0 +1,37 @@
+import { Question, prompt } from 'inquirer';
+import { join } from 'path';
+import { addDependenciesToPackageJson, generateWithTemplate } from '../../utils';
+import { askWeb3Lib } from './actions';
+import axios from 'axios';
+
+export const nextGenerator = async (name: string, destination: string) => {
+  try {
+    const { web3Lib, dependencies } = await askWeb3Lib(destination);
+
+    const templateDir = join(__dirname, './template');
+
+    const envQuestions: Question[] = [
+      {
+        name: 'MORALIS_API_KEY',
+        message: '🧙 : Input your Moralis Api key. You can find it on https://admin.moralis.io/web3apis',
+        type: 'password',
+      },
+      {
+        name: 'NEXTAUTH_URL',
+        message:
+          '🧙 : Input your NextJS app URL. You can use "http://localhost:3000" for development. Change it before go production!',
+        default: 'http://localhost:3000',
+      },
+    ];
+
+    const envVars = await prompt(envQuestions);
+
+    const { data: NEXTAUTH_SECRET } = await axios.get<string>('https://generate-secret.now.sh/32');
+
+    await generateWithTemplate(templateDir, destination, { web3Lib, name, envVars: { ...envVars, NEXTAUTH_SECRET } });
+
+    await addDependenciesToPackageJson(destination, [...dependencies]);
+  } catch (e) {
+    throw new Error(e);
+  }
+};

packages/create-moralis-dapp/src/generators/next/template/.env.local.example

@@ -0,0 +1,8 @@
+# Your Moralis Api key, that can be found in the dashboard. Keep this secret!
+MORALIS_API_KEY = '';
+
+# Linux: `openssl rand -hex 32` or go to https://generate-secret.now.sh/32
+NEXTAUTH_SECRET = '';
+
+# Your App URL for Next-Auth
+NEXTAUTH_URL = '';

packages/create-moralis-dapp/src/generators/next/template/.env.local.tmpl

@@ -0,0 +1,8 @@
+# Your Moralis Api key, that can be found in the dashboard. Keep this secret!
+MORALIS_API_KEY = <%- envVars.MORALIS_API_KEY %>
+
+# Linux: `openssl rand -hex 32` or go to https://generate-secret.now.sh/32
+NEXTAUTH_SECRET = <%- envVars.NEXTAUTH_SECRET %>
+
+# Your App URL for Next-Auth
+NEXTAUTH_URL = <%- envVars.NEXTAUTH_URL %>

packages/create-moralis-dapp/src/generators/next/template/.eslintrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  extends: ['@moralisweb3', 'plugin:@next/next/recommended'],
+  ignorePatterns: ['**/build/**/*'],
+  env: {
+    browser: true,
+  },
+};

packages/create-moralis-dapp/src/generators/next/template/.gitignore

@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo

packages/create-moralis-dapp/src/generators/next/template/README.md

@@ -0,0 +1,7 @@
+# Demo NextJS Wagmi Auth
+
+## Run locally
+
+1. Copy `.env.local.example` to `.env.local` and fill in the values
+2. Install all dependencies `yarn` or `npm install`
+3. Run `yarn dev` to start the Next.js application

packages/create-moralis-dapp/src/generators/next/template/app/components/elements/Meta/Meta.tsx.tmpl

@@ -0,0 +1,13 @@
+import Head from 'next/head';
+
+const Meta = () => {
+  return (
+    <Head>
+      <title><%- name %></title>
+      <meta name="description" content="<%- name %>" />
+      <link rel="icon" href="/favicon.ico" />
+    </Head>
+  );
+};
+
+export default Meta;

packages/create-moralis-dapp/src/generators/next/template/app/components/elements/Meta/index.ts

@@ -0,0 +1 @@
+export { default as Meta } from './Meta';

packages/create-moralis-dapp/src/generators/next/template/app/components/elements/Navbar/Navbar.module.css

@@ -0,0 +1,17 @@
+.nav {
+  display: flex;
+  gap: 38px;
+  margin-right: auto;
+}
+
+.tab {
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 17px;
+  text-decoration: none;
+}
+
+.tab:hover,
+.active {
+  color: #2e7daf;
+}

packages/create-moralis-dapp/src/generators/next/template/app/components/elements/Navbar/Navbar.tsx

@@ -0,0 +1,31 @@
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import { FC } from 'react';
+import styles from './Navbar.module.css';
+
+const pages = [
+  {
+    href: '/',
+    name: 'User',
+  },
+  {
+    href: '/private',
+    name: 'Private Page',
+  },
+];
+
+const Navbar: FC = () => {
+  const { pathname } = useRouter();
+
+  return (
+    <div className={styles.nav}>
+      {pages.map(({ href, name }) => (
+        <Link href={href} key={name}>
+          <a className={`${styles.tab} ${href === pathname ? styles.active : null}`}> {name}</a>
+        </Link>
+      ))}
+    </div>
+  );
+};
+
+export default Navbar;

packages/create-moralis-dapp/src/generators/next/template/app/components/elements/Navbar/index.ts

@@ -0,0 +1 @@
+export { default as Navbar } from './Navbar';

packages/create-moralis-dapp/src/generators/next/template/app/components/elements/buttons/Option/Option.module.css

@@ -0,0 +1,28 @@
+.option {
+  border-radius: 12px;
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  padding: 6px;
+  width: 100%;
+}
+
+.disabled {
+  opacity: 0.4;
+}
+
+.option:hover {
+  background: #ebeff9;
+}
+
+.info {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+
+.name {
+  color: #68738d;
+  font-size: 14px;
+  font-weight: 500;
+}

packages/create-moralis-dapp/src/generators/next/template/app/components/elements/buttons/Option/Option.tsx

@@ -0,0 +1,24 @@
+import Image from 'next/image';
+import { FC } from 'react';
+import styles from './Option.module.css';
+
+export interface IOption {
+  name: string;
+  logoPath: string;
+  onClick: React.MouseEventHandler<HTMLDivElement>;
+  disabled?: boolean;
+}
+
+const Option: FC<IOption> = ({ name, logoPath, onClick, disabled }) => {
+  return (
+    <div className={`${styles.option} ${disabled && styles.disabled}`} onClick={onClick}>
+      <div className={styles.info}>
+        <Image src={logoPath} alt={name} width={40} height={40} />
+        <span className={styles.name}>{name}</span>
+      </div>
+      <Image src="/assets/chevronRight.svg" alt="chevronRight" width={24} height={24} />
+    </div>
+  );
+};
+
+export default Option;

packages/create-moralis-dapp/src/generators/next/template/app/components/elements/buttons/Option/index.ts

@@ -0,0 +1 @@
+export { default as Option } from './Option';

packages/create-moralis-dapp/src/generators/next/template/app/components/elements/buttons/index.ts

@@ -0,0 +1 @@
+export * from './Option';

packages/create-moralis-dapp/src/generators/next/template/app/components/elements/index.ts

@@ -0,0 +1,3 @@
+export * from './buttons';
+export * from './Meta';
+export * from './Navbar';