├── .gitignore
├── README.md
├── components
    ├── .DS_Store
    ├── InstructionsComponent.jsx
    └── navigation
    │   └── navbar.jsx
├── layout
    └── mainLayout.jsx
├── next.config.js
├── package-lock.json
├── package.json
├── pages
    ├── _app.js
    └── index.jsx
├── public
    ├── .DS_Store
    └── cw3d-logo.png
└── styles
    ├── Home.module.css
    ├── InstructionsComponent.module.css
    ├── Navbar.module.css
    └── globals.css


/.gitignore:
--------------------------------------------------------------------------------
  1 | # Logs
  2 | logs
  3 | *.log
  4 | npm-debug.log*
  5 | yarn-debug.log*
  6 | yarn-error.log*
  7 | lerna-debug.log*
  8 | 
  9 | # Diagnostic reports (https://nodejs.org/api/report.html)
 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
 11 | 
 12 | # Runtime data
 13 | pids
 14 | *.pid
 15 | *.seed
 16 | *.pid.lock
 17 | 
 18 | # Directory for instrumented libs generated by jscoverage/JSCover
 19 | lib-cov
 20 | 
 21 | # Coverage directory used by tools like istanbul
 22 | coverage
 23 | *.lcov
 24 | 
 25 | # nyc test coverage
 26 | .nyc_output
 27 | 
 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
 29 | .grunt
 30 | 
 31 | # Bower dependency directory (https://bower.io/)
 32 | bower_components
 33 | 
 34 | # node-waf configuration
 35 | .lock-wscript
 36 | 
 37 | # Compiled binary addons (https://nodejs.org/api/addons.html)
 38 | build/Release
 39 | 
 40 | # Dependency directories
 41 | node_modules/
 42 | jspm_packages/
 43 | 
 44 | # TypeScript v1 declaration files
 45 | typings/
 46 | 
 47 | # TypeScript cache
 48 | *.tsbuildinfo
 49 | 
 50 | # Optional npm cache directory
 51 | .npm
 52 | 
 53 | # Optional eslint cache
 54 | .eslintcache
 55 | 
 56 | # Microbundle cache
 57 | .rpt2_cache/
 58 | .rts2_cache_cjs/
 59 | .rts2_cache_es/
 60 | .rts2_cache_umd/
 61 | 
 62 | # Optional REPL history
 63 | .node_repl_history
 64 | 
 65 | # Output of 'npm pack'
 66 | *.tgz
 67 | 
 68 | # Yarn Integrity file
 69 | .yarn-integrity
 70 | 
 71 | # dotenv environment variables file
 72 | .env
 73 | .env.test
 74 | 
 75 | # parcel-bundler cache (https://parceljs.org/)
 76 | .cache
 77 | 
 78 | # Next.js build output
 79 | .next
 80 | 
 81 | # Nuxt.js build / generate output
 82 | .nuxt
 83 | dist
 84 | 
 85 | # Gatsby files
 86 | .cache/
 87 | # Comment in the public line in if your project uses Gatsby and *not* Next.js
 88 | # https://nextjs.org/blog/next-9-1#public-directory-support
 89 | # public
 90 | 
 91 | # vuepress build output
 92 | .vuepress/dist
 93 | 
 94 | # Serverless directories
 95 | .serverless/
 96 | 
 97 | # FuseBox cache
 98 | .fusebox/
 99 | 
100 | # DynamoDB Local files
101 | .dynamodb/
102 | 
103 | # TernJS port file
104 | .tern-port
105 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # CW3D Dapp Boilerplate For Netlify
  2 | 
  3 | This boilerplate is set up to be deployed on Netlify and you can directly deploy this project by clicking the button below:
  4 | 
  5 | [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/alchemyplatform/netlify-alchemy-dapp-boilerplates)
  6 | 
  7 | Visit the [Live Demo here](https://alchemy-cw3d-dapp-boilerplate.netlify.app/)
  8 | 
  9 | ## Resources
 10 | Please refer to CW3D's documentation and the following useful links for an in depth explanation of how to work with projects bootstrapped with CW3D:
 11 | 
 12 | -   [Docs](https://docs.alchemy.com/docs/create-web3-dapp) - Everything you need to know when using CW3D
 13 | -   [GitHub](https://github.com/alchemyplatform/create-web3-dapp) - look at the extensive code example or start contributing
 14 | -   [Website](https://createweb3dapp.alchemy.com) - Learn more about CW3D and add components to your project
 15 | -   [Templates](https://createweb3dapp.alchemy.com/#templates) - Check out the pre-built project templates
 16 | -   [Components Library](https://createweb3dapp.alchemy.com/#components) - Add features directly to your project through components
 17 | -   [Examples](https://github.com/alchemyplatform/create-web3-dapp-examples) - See the components implemented in a real world dapp
 18 | -   [Community](https://t.me/createweb3dapp) - Meet other builders, get support, and give feedback!
 19 | 
 20 | ## Overview
 21 | 
 22 | This project serves as a boilerplate for creating decentralized applications (dApps) using [Create Web3 Dapp](https://github.com/alchemyplatform/create-web3-dapp). It is preconfigured to be deployed on [Netlify](https://www.netlify.com/), providing you with a seamless way to get your dApp up and running in no time.
 23 | 
 24 | This boilerplate is built using [CW3D (Create Web3 Dapp)](https://github.com/alchemyplatform/create-web3-dapp), a powerful tool developed by [Alchemy](https://www.alchemy.com/) that allows developers to rapidly create and deploy dApps.
 25 | 
 26 | ## What's Included?
 27 | 
 28 | This boilerplate has everything you need to start building a dapp:
 29 | 
 30 | - Next.js
 31 | - Wagmi Hooks
 32 | - Ethers.js
 33 | - Rainbowkit
 34 | - Alchemy SDK
 35 | 
 36 | ## Supported Chains
 37 | 
 38 | The project supports all the major EVM chains:
 39 | 
 40 |  - Ethereum
 41 |  - Polygon
 42 |  - Polygon zkEVM
 43 |  - Arbitrum
 44 |  - Optimism
 45 | 
 46 | ## Getting Started
 47 | 
 48 | ### Prerequisites
 49 | 
 50 | To get started with this boilerplate, you'll need to have the following software installed on your local machine:
 51 | 
 52 | - [Node.js](https://nodejs.org/)
 53 | - [Yarn](https://yarnpkg.com/)
 54 | - [Git](https://git-scm.com/)
 55 | 
 56 | ### Installation
 57 | 
 58 | 1. Clone the repository to your local machine:
 59 |    ```
 60 |    git clone https://github.com/alchemyplatform/netlify-alchemy-dapp-boilerplates.git
 61 |    ```
 62 | 2. Navigate to the project directory:
 63 |    ```
 64 |    cd netlify-alchemy-dapp-boilerplates
 65 |    ```
 66 | 3. Install the required dependencies:
 67 |    ```
 68 |    yarn install
 69 |    ```
 70 | 
 71 | ### Running the Project
 72 | 
 73 | 1. Start the local development server:
 74 |    ```
 75 |    yarn run dev
 76 |    ```
 77 | 2. Open your browser and navigate to [`http://localhost:3000/`](http://localhost:3000/) to view the dApp in action.
 78 | 
 79 | ### Deploying to Netlify
 80 | 
 81 | This boilerplate is set up to be deployed on Netlify and you can directly deploy this project by clicking the button below:
 82 | 
 83 | [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/alchemyplatform/netlify-alchemy-dapp-boilerplates)
 84 | 
 85 |  If you prefer to deploy it manually, you can follow these steps:
 86 | 
 87 | 1. Sign up for a Netlify account at [netlify.com](https://www.netlify.com/) if you don't already have one.
 88 | 2. Install the Netlify CLI:
 89 |    ```
 90 |    npm install -g netlify-cli
 91 |    ```
 92 | 3. Run the following command to deploy your dApp to Netlify:
 93 |    ```
 94 |    netlify deploy
 95 |    ```
 96 | 4. Follow the prompts and provide the required information. Your dApp will be deployed and accessible via a unique URL.
 97 | 
 98 | ## Project Structure
 99 | 
100 | The boilerplate project is a Next.js application with the following structure:
101 | 
102 | ```
103 | 📦root
104 |  ┣ 📂components
105 |  ┃ ┣ 📂navigation
106 |  ┃ ┃ ┗ 📜navbar.jsx
107 |  ┃ ┗ 📜InstructionsComponent.jsx
108 |  ┣ 📂layout
109 |  ┃ ┗ 📜mainLayout.jsx
110 |  ┣ 📂pages
111 |  ┃ ┣ 📜_app.js
112 |  ┃ ┗ 📜index.jsx
113 |  ┣ 📂public
114 |  ┃ ┗ 📜cw3d-logo.png
115 |  ┣ 📂styles
116 |  ┃ ┣ 📜Home.module.css
117 |  ┃ ┣ 📜InstructionsComponent.module.css
118 |  ┃ ┣ 📜Navbar.module.css
119 |  ┃ ┗ 📜globals.css
120 |  ┣ 📜.gitignore
121 |  ┣ 📜README.md
122 |  ┣ 📜next.config.js
123 |  ┣ 📜package-lock.json
124 |  ┗ 📜package.json
125 | ```
126 | 
127 | Start editing the `pages/index.jsx` file to customize the project according to your own needs!
128 | 


--------------------------------------------------------------------------------
/components/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alchemyplatform/netlify-alchemy-dapp-boilerplates/08094ae2490e45c49885364e8334e560bb086a33/components/.DS_Store


--------------------------------------------------------------------------------
/components/InstructionsComponent.jsx:
--------------------------------------------------------------------------------
 1 | import styles from "../styles/InstructionsComponent.module.css";
 2 | import Router, { useRouter } from "next/router";
 3 | export default function InstructionsComponent() {
 4 | 	const router = useRouter();
 5 | 	return (
 6 | 		<div className={styles.container}>
 7 | 			<header className={styles.header_container}>
 8 | 				<h1>
 9 | 					create<span>-web3-dapp</span>
10 | 				</h1>
11 | 				<p>
12 | 					Get started by editing this page in{" "}
13 | 					<span>/pages/index.js</span>
14 | 				</p>
15 | 			</header>
16 | 
17 | 			<div className={styles.buttons_container}>
18 | 				<a
19 | 					target={"_blank"}
20 | 					href={"https://createweb3dapp.alchemy.com/#components"}
21 | 				>
22 | 					<div className={styles.button}>
23 | 						{/* <img src="https://static.alchemyapi.io/images/cw3d/Icon%20Medium/lightning-square-contained-m.svg" width={"20px"} height={"20px"} /> */}
24 | 						<p>Add Components</p>
25 | 					</div>
26 | 				</a>
27 | 				<a
28 | 					target={"_blank"}
29 | 					href={"https://createweb3dapp.alchemy.com/#templates"}
30 | 				>
31 | 					<div className={styles.button}>
32 | 						{/* <img src="https://static.alchemyapi.io/images/cw3d/Icon%20Medium/lightning-square-contained-m.svg" width={"20px"} height={"20px"} /> */}
33 | 						<p>Explore Templates</p>
34 | 					</div>
35 | 				</a>
36 | 				<a
37 | 					target={"_blank"}
38 | 					href={"https://docs.alchemy.com/docs/create-web3-dapp"}
39 | 				>
40 | 					<div className={styles.button}>
41 | 						<img
42 | 							src="https://static.alchemyapi.io/images/cw3d/Icon%20Large/file-eye-01-l.svg"
43 | 							width={"20px"}
44 | 							height={"20px"}
45 | 						/>
46 | 						<p>Visit Docs</p>
47 | 					</div>
48 | 				</a>
49 | 			</div>
50 | 			<div className={styles.footer}>
51 | 				<a href="https://alchemy.com/?a=create-web3-dapp" target={"_blank"}>
52 | 					<img
53 | 						id="badge-button"
54 | 						style={{ width: "240px", height: "53px" }}
55 | 						src="https://static.alchemyapi.io/images/marketing/badgeLight.png"
56 | 						alt="Alchemy Supercharged"
57 | 					/>
58 | 				</a>
59 | 				<div className={styles.icons_container}>
60 | 					<div>
61 | 						<a
62 | 							href="https://github.com/alchemyplatform/create-web3-dapp"
63 | 							target={"_blank"}
64 | 						>
65 | 							Leave a star on Github
66 | 						</a>
67 | 					</div>
68 | 					<div>
69 | 						<a
70 | 							href="https://twitter.com/AlchemyPlatform"
71 | 							target={"_blank"}
72 | 						>
73 | 							Follow us on Twitter
74 | 						</a>
75 | 					</div>
76 | 				</div>
77 | 			</div>
78 | 		</div>
79 | 	);
80 | }
81 | 


--------------------------------------------------------------------------------
/components/navigation/navbar.jsx:
--------------------------------------------------------------------------------
 1 | import { ConnectButton } from "@rainbow-me/rainbowkit";
 2 | import styles from "../../styles/Navbar.module.css";
 3 | export default function Navbar() {
 4 | 	return (
 5 | 		<nav className={styles.navbar}>
 6 | 			<a href="https://alchemy.com/?a=create-web3-dapp" target={"_blank"}>
 7 | 				<img className={styles.alchemy_logo} src="/cw3d-logo.png"></img>
 8 | 			</a>
 9 | 			<ConnectButton></ConnectButton>
10 | 		</nav>
11 | 	);
12 | }
13 | 


--------------------------------------------------------------------------------
/layout/mainLayout.jsx:
--------------------------------------------------------------------------------
 1 | import Navbar from "../components/navigation/navbar";
 2 | 
 3 | export default function MainLayout({ children }) {
 4 | 	return (
 5 | 		<div>
 6 |             <Navbar />
 7 |             {children}
 8 | 		</div>
 9 | 	);
10 | }
11 | 


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('next').NextConfig} */
 2 | const nextConfig = {
 3 | 	reactStrictMode: true,
 4 | };
 5 | 
 6 | module.exports = {
 7 | 	env: {
 8 | 	},
 9 | };
10 | 
11 | module.exports = nextConfig;
12 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "my-create-web3-dappvercel",
 3 | 	"version": "0.1.0",
 4 | 	"private": true,
 5 | 	"scripts": {
 6 | 		"dev": "next dev",
 7 | 		"build": "next build",
 8 | 		"start": "next start",
 9 | 		"lint": "next lint",
10 | 		"marketplace": "npx create-web3-dapp marketplace"
11 | 	},
12 | 	"dependencies": {
13 | 		"next": "13.1.2",
14 | 		"react": "18.2.0",
15 | 		"react-dom": "18.2.0",
16 | 		"alchemy-sdk": "^2.6.2",
17 | 		"@rainbow-me/rainbowkit": "^0.12.4",
18 | 		"wagmi": "^0.12.6"
19 | 	},
20 | 	"devDependencies": {
21 | 		"eslint": "8.36.0",
22 | 		"eslint-config-next": "13.2.4"
23 | 	}
24 | }


--------------------------------------------------------------------------------
/pages/_app.js:
--------------------------------------------------------------------------------
 1 | import "../styles/globals.css";
 2 | import "@rainbow-me/rainbowkit/styles.css";
 3 | 
 4 | import { getDefaultWallets, RainbowKitProvider } from "@rainbow-me/rainbowkit";
 5 | import { configureChains, createClient, useAccount, WagmiConfig } from "wagmi";
 6 | import {
 7 |   mainnet,
 8 |   polygon,
 9 |   optimism,
10 |   arbitrum,
11 |   goerli,
12 |   polygonMumbai,
13 |   optimismGoerli,
14 |   arbitrumGoerli,
15 | } from "wagmi/chains";
16 | import { alchemyProvider } from "wagmi/providers/alchemy";
17 | import { publicProvider } from "wagmi/providers/public";
18 | import MainLayout from "../layout/mainLayout";
19 | import { useRouter } from "next/router";
20 | 
21 | const { chains, provider } = configureChains(
22 |   [
23 |     mainnet,
24 |     goerli,
25 |     polygon,
26 |     polygonMumbai,
27 |     optimism,
28 |     optimismGoerli,
29 |     arbitrum,
30 |     arbitrumGoerli,
31 |   ],
32 |   [alchemyProvider({ apiKey: process.env.ALCHEMY_API_KEY }), publicProvider()]
33 | );
34 | 
35 | const { connectors } = getDefaultWallets({
36 |   appName: "My Alchemy DApp",
37 |   chains,
38 | });
39 | 
40 | const wagmiClient = createClient({
41 |   autoConnect: true,
42 |   connectors,
43 |   provider,
44 | });
45 | 
46 | export { WagmiConfig, RainbowKitProvider };
47 | 
48 | function MyApp({ Component, pageProps }) {
49 |   const router = useRouter()
50 |   const account = useAccount({
51 |     onConnect({ address, connector, isReconnected }) {
52 |       if (!isReconnected) router.reload();
53 |     },
54 |   });
55 |   return (
56 |     <WagmiConfig client={wagmiClient}>
57 |       <RainbowKitProvider
58 |         modalSize="compact"
59 |         initialChain={process.env.NEXT_PUBLIC_DEFAULT_CHAIN}
60 |         chains={chains}
61 |       >
62 |         <MainLayout>
63 |           <Component {...pageProps} />
64 |         </MainLayout>
65 |       </RainbowKitProvider>
66 |     </WagmiConfig>
67 |   );
68 | }
69 | 
70 | export default MyApp;
71 | 


--------------------------------------------------------------------------------
/pages/index.jsx:
--------------------------------------------------------------------------------
 1 | import styles from "../styles/Home.module.css";
 2 | import InstructionsComponent from "../components/InstructionsComponent";
 3 | 
 4 | export default function Home() {
 5 |   return (
 6 |     <div>
 7 |       <main className={styles.main}>
 8 |         <InstructionsComponent></InstructionsComponent>
 9 |       </main>
10 |     </div>
11 |   );
12 | }
13 | 


--------------------------------------------------------------------------------
/public/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alchemyplatform/netlify-alchemy-dapp-boilerplates/08094ae2490e45c49885364e8334e560bb086a33/public/.DS_Store


--------------------------------------------------------------------------------
/public/cw3d-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alchemyplatform/netlify-alchemy-dapp-boilerplates/08094ae2490e45c49885364e8334e560bb086a33/public/cw3d-logo.png


--------------------------------------------------------------------------------
/styles/Home.module.css:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | .main {
 4 | 	padding: 2rem 0;
 5 | 	flex: 1;
 6 | 	display: flex;
 7 | 	flex-direction: column;
 8 | 	justify-content: center;
 9 | 	align-items: center;
10 | }


--------------------------------------------------------------------------------
/styles/InstructionsComponent.module.css:
--------------------------------------------------------------------------------
 1 | .container{
 2 | 	color: white;
 3 | 	display: flex;
 4 | 	flex-direction: column;
 5 | 	height: 80vh;
 6 | 	width: 100%;
 7 | 	align-items: center;
 8 | }
 9 | 
10 | .header_container{
11 | 	margin-bottom: 6rem;
12 | 	display: flex;
13 | 	flex-direction: column;
14 | 	align-items: center;
15 | }
16 | 
17 | .header_container h1{
18 | 	font-size: 64px;
19 | 
20 | }
21 | 
22 | 
23 | .header_container h1 span{
24 | 	background: linear-gradient(140deg, rgba(54,190,255,1) 0%, rgba(115,63,241,1) 100%);
25 | 	background-clip: text;
26 | 	color: transparent;
27 | }
28 | 
29 | .header_container p{
30 | 	font-size: 20px;
31 | 
32 | }
33 | 
34 | .header_container p span{
35 | 	color: #D73719;
36 | 	width: 197px;
37 | height: 36px;
38 | 
39 | 
40 | background: rgba(255, 255, 255, 0.08);
41 | border-radius: 8px;
42 | 	padding: .5rem 1rem .5rem .5rem;
43 | 	margin-left: .3rem;
44 | }
45 | 
46 | 
47 | 
48 | 
49 | .buttons_container{
50 | 	display: flex;
51 | 	flex-direction: column;
52 | 	flex-grow: 1;
53 | 	width: 100%;
54 | 	align-content: center;
55 | 	flex-wrap: wrap;
56 | 	gap: 1rem;
57 | }
58 | 
59 | .button{
60 | 	display: flex;
61 | flex-direction: row;
62 | align-items: center;
63 | justify-content: center;
64 | 
65 | padding: 24px 32px;
66 | gap: 12px;
67 | 
68 | width: 392px;
69 | height: 76px;
70 | 
71 | background: rgba(0, 0, 0, 0.8);
72 | /* Grayscale/Metal */
73 | 
74 | border: 1px solid #4E4E4E;
75 | border-radius: 12px;
76 | cursor: pointer;
77 | }
78 | 
79 | .button p {
80 | 
81 | font-style: normal;
82 | font-weight: 700;
83 | font-size: 20px;
84 | line-height: 28px;
85 | }
86 | .footer{
87 | 	display: flex;
88 | 	flex-direction: column;
89 | 	align-items: center;
90 | 	gap:1rem;
91 | }
92 | .icons_container{
93 | 	display: flex;
94 | 	gap: 2rem;
95 | 	margin-bottom: .5rem;
96 | }


--------------------------------------------------------------------------------
/styles/Navbar.module.css:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | .navbar {
 4 | 	display: flex;
 5 | 	justify-content: space-between;
 6 | 	align-items: center;
 7 | 	width: 100%;
 8 | 	padding: 2rem 4rem 0.8rem 4rem;
 9 | 	gap: 2rem;
10 | 	margin-bottom: 4rem;
11 | }
12 | 
13 | 
14 | .alchemy_logo{
15 | 	width: 6rem;
16 | 	cursor: pointer;
17 | }


--------------------------------------------------------------------------------
/styles/globals.css:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,500;1,400&display=swap');
 2 | 
 3 | html,
 4 | body {
 5 | 	background-color: black;
 6 | 	font-family: 'Rubik';
 7 | 	font-weight: normal;
 8 | }
 9 | h1{
10 | 	margin-bottom: 1rem;
11 | }
12 | h2{
13 | 	margin-bottom: .5rem;
14 | 	font-weight: normal;
15 | 
16 | }
17 | 
18 | p{
19 | 	line-height: 1.5rem;
20 | 	font-weight: lighter;
21 | 
22 | }
23 | 
24 | a {
25 | 	color: inherit;
26 | 	text-decoration: none;
27 | }
28 | 
29 | * {
30 | 	box-sizing: border-box;
31 | 	padding: 0;
32 | 	margin: 0;
33 | }
34 | 
35 | @media (prefers-color-scheme: dark) {
36 | 	html {
37 | 	}
38 | }
39 | 


--------------------------------------------------------------------------------