I can only assume the error is something going on with moralis. I hate to say it but this is why Ive been trying to learn the web3 stack myself, Im assuming that something is going on with the fact that I am using next js development enviornment. It appears that the use context isnt recieving data so it returns error. from what Ive read context cannot be null but in the tutorial (not a moralis tutorial but thte issue is with the sdk)
Build Amazon Web 3.0 Blockchain App with Solidity | Moralis | Next.js | Ethers.js | Tailwind CSS
there isnt an issue when he makes his request.
why isnt any data bing returned? I confirmed it is connected to the db already
app.js
import '../styles/globals.css'
import { MoralisProvider } from 'react-moralis'
import { AmazonProvider } from '../context/AmazonContext'
function MyApp({ Component, pageProps }) {
return(
<MoralisProvider
serverUrl={process.env.NEXT_PUBLIC_MORALIS_SERVER}
appId={process.env.NEXT_PUBLIC_MORALIS_APP_ID}
>
<AmazonProvider>
<Component {...pageProps} />
</AmazonProvider>
</MoralisProvider>
)
}
export default MyApp
sidebar.js
import React from 'react'
import {useContext} from 'react'
import Image from 'next/image'
import Link from 'next/link'
import logo from '../assets/amazon_logo.png'
import logoFull from '../assets/amazon_logo_full.png'
import { FaBox } from 'react-icons/fa'
import { BsFillBookmarkFill } from 'react-icons/bs'
import { BsFillPersonFill } from 'react-icons/bs'
import { ConnectButton } from 'web3uikit'
import { AiOutlineHistory } from 'react-icons/ai'
import { AmazonContext } from '../context/AmazonContext'
const {
isAuthenticated,
nickname,
setNickname,
username,
handleSetUsername,
} = useContext(AmazonContext)
const Sidebar = () => {
const styles = {
container: `h-full w-[300px] flex flex-col bg-[#fff] static`,
profile: ` w-full py-16 flex flex-col justify-center items-center rounded-r-3xl bg-gradient-to-t from-[#0d141c] to-[#42667e] mt-[40px] mb-[50px] border-2 border-[#fb9701]`,
profilePicContainer: `flex rounded-xl items-center justify-center w-full h-full mb-5`,
profilePic: `rounded-3xl object-cover`,
welcome: ` text-md mb-2 font-bold text-2xl text-white`,
walletAddress: `text-xl flex w-full justify-center font-extrabold mb-4`,
menu: `flex flex-col w-full h-full px-10 gap-10`,
menuItem: `flex items-center text-lg font-bold cursor-pointer gap-2`,
amazonLogo: `mr-4 flex object-cover`,
companyName: `text-lg font-bold flex flex-1 pl-10 items-center mt-[20px]`,
usernameInput: `bg-transparent border-white border-2 rounded-lg w-[80%] py-2 px-4 text-lg mt-[20px] placeholder:text-white focus:outline-none flex justify-center items-center text-white`,
username: `flex items-center w-full justify-center`,
setNickname: `text-lg font-bold flex flex-1 items-center mt-[20px] mb-[20px] text-white`,
}
return (
<div className={styles.container}>
<div className={styles.profile}>
{ //check if user is authenticated
isAuthenticated && (
<>
<div className={styles.profilePicContainer}>
<Image src={`https://avatars.dicebear.com/api/pixel-art/${username}.svg`} alt='profile' className={styles.profilePic}
height={100}
width={100}
/>
</div>
{!username ? ( // check for username if none show the input
<>
<div className={styles.username}>
<input
type='text'
placeholder='Username...'
className={styles.usernameInput}
value ={nickname}
onchange={e => setNickname(e.target.value)}
/>
</div>
<button className={styles.setNickname}
onClick={handleSetUsername}
>
set Nickname
</button>
</>
) : (
<div>
<div className={styles.welcome}>Welcome{username}</div>
</div>
)}
</>
)}
<div className={styles.ConnectButton}>
<ConnectButton />
</div>
</div>
<div className={styles.menu}>
<Link href='/'>
<div className={styles.menuItem}>
<Image src={logo} height={30} width={30} className={styles.amazonLogo}
/>
My Amazon
<br /> Board
</div>
</Link>
<div className={styles.menuItem}>
<FaBox />
Collections
</div>
<div className={styles.menuItem}>
<BsFillBookmarkFill />
Saved
</div>
<div className={styles.menuItem}>
<BsFillPersonFill />
Profile
</div>
<Link href='/history'>
<div className={styles.menuItem}>
<AiOutlineHistory />
Transaction History
</div>
</Link>
</div>
<div className={styles.companyName}>
<Image src={logoFull} alt='amazon' height={100} width={100} />
</div>
</div>
)
}
export default Sidebar
the context file
import { createContext, useState, useEffect } from 'react'
import { useMoralis, useMoralisQuery } from 'react-moralis'
export const AmazonContext = createContext(null)
export const AmazonProvider = ({children}) => {
const [username, setUsername] = useState('')
const [nickname, setNickname] = useState('')
const {
authenticate,
isAuthenticated,
enableWeb3,
Moralis,
user,
} = useMoralis()
useEffect(() => {
;(async () => {
if(isAuthenticated) {
const currentUsername = await user?.get('nickname')
setUsername(currentUsername)
}
})()
}, [isAuthenticated, user, username]);
const handleSetUsername = () => { //this function adds the nickname column to the moralis
if (user) {
if (nickname) {
user.set('nickname', nickname)
user.save()
setNickname('')
} else {
console.log("Can't set empty nickname")
}
} else {
console.log('No user')
}
}
return (
<AmazonContext.Provider
value = {{
isAuthenticated,
nickname,
setNickname,
username,
setUsername,
}}
>
{children}
</AmazonContext.Provider>
)
}
pkgjson
{
"name": "web3_amazon",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@walletconnect/web3-provider": "^1.7.5",
"@web3auth/web3auth": "^0.6.2",
"ethers": "^5.6.1",
"magic-sdk": "^8.1.0",
"moment": "^2.29.1",
"moralis": "^1.5.5",
"next": "12.1.0",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-icons": "^4.3.1",
"react-moralis": "^1.3.4",
"react-simple-hook-modal": "^1.1.0",
"react-spinners": "^0.11.0",
"web3uikit": "^0.1.110"
},
"devDependencies": {
"autoprefixer": "^10.4.12",
"eslint": "8.24.0",
"eslint-config-next": "12.3.1",
"postcss": "^8.4.16",
"tailwindcss": "^3.1.8"
}
}