├── .babelrc ├── .gitignore ├── README.md ├── components ├── layout │ └── index.tsx ├── sections │ ├── footer │ │ └── index.tsx │ ├── header │ │ ├── index.tsx │ │ └── styles.tsx │ ├── index.ts │ └── layout │ │ └── index.tsx └── ui │ ├── connectButton │ ├── index.tsx │ ├── react-jazzicon.d.ts │ └── styles.tsx │ ├── errorModal │ └── index.tsx │ ├── index.ts │ ├── modal │ ├── index.tsx │ └── styles.tsx │ └── panel │ └── index.tsx ├── context └── Web3Context │ ├── index.tsx │ ├── initialState.tsx │ └── reducer.ts ├── next-env.d.ts ├── next.config.js ├── package-lock.json ├── package.json ├── pages ├── _app.tsx ├── _document.tsx └── index.tsx ├── public ├── assets │ └── icons │ │ └── close.svg ├── favicon.ico └── vercel.svg ├── theme ├── globalStyles.tsx ├── index.tsx ├── reset.tsx └── spacing.tsx ├── tsconfig.json ├── types └── index.tsx └── utils ├── index.ts ├── networks.ts └── smartTrim.ts /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "next/babel" 4 | ], 5 | "plugins": [ 6 | [ 7 | "styled-components", 8 | { 9 | "ssr": true, 10 | // "displayName": true, 11 | // "preprocess": false 12 | } 13 | ] 14 | ] 15 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | 21 | # debug 22 | npm-debug.log* 23 | yarn-debug.log* 24 | yarn-error.log* 25 | 26 | # local env files 27 | .env.* 28 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | This is a starter template for [Next.js](https://nextjs.org/learn) and [Moralis](https://docs.moralis.io/). 2 | 3 | It is written primarily in Typescript and uses [styled components](https://styled-components.com/) for styling. 4 | 5 | ## Getting started 6 | 7 | Using the [github client](https://cli.github.com/), in your command line run: 8 | ``` 9 | gh repo create --template="https://github.com/ccoyotedev/nextjs-moralis.git" 10 | cd 11 | git pull origin main 12 | yarn install 13 | ``` 14 | 15 | To run the app, in your terminal run: 16 | ``` 17 | yarn dev 18 | ``` 19 | 20 | To connect to Moralis you will need to create a new Moralis project by following the [Moralis documentation]("https://docs.moralis.io/getting-started/quick-start"). 21 | 22 | Then create a `.env.development` and `.env.production`. Inside both set the the following keys: 23 | 24 | ``` 25 | MORALIS_APPLICATION_ID='[APP_ID]' 26 | MORALIS_SERVER_ID='[SERVER_ID]' 27 | ``` 28 | 29 | -------------------------------------------------------------------------------- /components/layout/index.tsx: -------------------------------------------------------------------------------- 1 | import { styled } from 'theme'; 2 | 3 | export const Container = styled.div` 4 | margin: 0 auto; 5 | width: 100%; 6 | padding: 3.6rem 1.6rem; 7 | 8 | @media ${({ theme }) => theme.mediaQueries.phone} { 9 | max-width: ${({ theme }) => `${theme.grid.container.maxWidth.xs}px`}; 10 | } 11 | 12 | @media ${({ theme }) => theme.mediaQueries.tablet} { 13 | max-width: ${({ theme }) => `${theme.grid.container.maxWidth.sm}px`}; 14 | } 15 | 16 | @media ${({ theme }) => theme.mediaQueries.laptop} { 17 | padding: 6.4rem 3.2rem; 18 | max-width: ${({ theme }) => `${theme.grid.container.maxWidth.md}px`}; 19 | } 20 | 21 | @media ${({ theme }) => theme.mediaQueries.laptopL} { 22 | max-width: ${({ theme }) => `${theme.grid.container.maxWidth.lg}px`}; 23 | } 24 | 25 | @media ${({ theme }) => theme.mediaQueries.desktop} { 26 | max-width: ${({ theme }) => `${theme.grid.container.maxWidth.xl}px`}; 27 | } 28 | ` -------------------------------------------------------------------------------- /components/sections/footer/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export const Footer = () => { 4 | return ( 5 |
6 |
7 | ) 8 | } -------------------------------------------------------------------------------- /components/sections/header/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import * as Styled from "./styles"; 3 | import { ConnectButton } from 'components/ui'; 4 | 5 | 6 | export const Header = () => { 7 | return ( 8 | 9 | 10 | 11 | ) 12 | } -------------------------------------------------------------------------------- /components/sections/header/styles.tsx: -------------------------------------------------------------------------------- 1 | import { styled } from 'theme'; 2 | 3 | export const Wrapper = styled.header` 4 | position: relative; 5 | width: 100%; 6 | background-color: ${({theme}) => theme.colors.dark0}; 7 | z-index: 1; 8 | display: flex; 9 | flex-direction: row; 10 | justify-content: flex-end; 11 | align-items: center; 12 | padding: 2.4rem; 13 | border-bottom: 1px solid ${({theme}) => theme.colors.dark2}; 14 | 15 | @media ${({theme}) => theme.mediaQueries.laptop} { 16 | position: sticky; 17 | top:0; 18 | }; 19 | ` -------------------------------------------------------------------------------- /components/sections/index.ts: -------------------------------------------------------------------------------- 1 | export * from './footer'; 2 | export * from './header'; 3 | export * from './layout'; 4 | -------------------------------------------------------------------------------- /components/sections/layout/index.tsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from 'react' 2 | import { Footer, Header } from 'components/sections' 3 | import { Container } from 'components/layout' 4 | import { updateNetworkId, useWeb3 } from 'context/Web3Context' 5 | import { useMoralis } from 'react-moralis' 6 | import { ErrorModal } from 'components/ui' 7 | 8 | interface Props { 9 | children: React.ReactNode; 10 | } 11 | 12 | export const Layout = ({children}: Props) => { 13 | const { web3, isWeb3Enabled, web3EnableError, enableWeb3 } = useMoralis(); 14 | const { state: {error} , dispatch } = useWeb3(); 15 | 16 | const handleCloseErrorModal = () => { 17 | dispatch({ 18 | type: "SET_ERROR", 19 | error: undefined, 20 | }) 21 | } 22 | 23 | useEffect(() => { 24 | if (isWeb3Enabled) { 25 | updateNetworkId(dispatch, web3); 26 | } else { 27 | enableWeb3(); 28 | } 29 | }, [isWeb3Enabled, web3]) 30 | 31 | return ( 32 | <> 33 | {web3EnableError && } 34 | {error && } 35 |
36 | 37 | {children} 38 | 39 |