I am getting this error after using 'useContext(RobinhoodContext)' and importing useContext(that is what I think is going on). This is my code :
import { createContext } from 'vm'
import { RobinhoodContext } from '../context/RobinhoodContext'
const styles = {
inputAmount: `w-1/2 flex items-center justify-center border border-white rounded-lg p-2 bg-transparent mt-6 text-white placeholder:text-white`,
formContainer: `flex items-center`,
select: `w-1/2 flex items-center justify-center border border-white rounded-lg p-2 bg-transparent mt-6 text-white placeholder:text-white`,
options: `w-1/2 flex items-center justify-center border border-white rounded-lg p-2 bg-black mt-6 text-white placeholder:text-white`,
noticeCTA: 'font-bold text-green-500 cursor-pointer mt-5',
}
const BuyTokens = () => {
const {
isAuthenticated,
setAmount,
mint,
setCoinSelect,
coinSelect,
amount,
toCoin,
setToCoin,
} = useContext(RobinhoodContext)
return (
<form className={styles.formContainer}>
<div className='flex h-full w-full flex-col items-center'>
<select className={styles.select}
value={coinSelect}
onChange={e=> setCoinSelect(e.target.value)}
>
<option className={styles.options} value= 'BTC'>
BTC
</option>
<option className={styles.options} value= 'ETH'>
ETH
</option>
<option className={styles.options} value= 'DOGE'>
DOGE
</option>
<option className={styles.options} value= 'SOL'>
SOL
</option>
<option className={styles.options} value= 'USDC'>
USDC
</option>
</select>
<select className={styles.select}
value={coinSelect}
onChange={e=> setCoinSelect(e.target.value)}
>
<option className={styles.options} value= 'BTC'>
BTC
</option>
<option className={styles.options} value= 'DOGE'>
DOGE
</option>
<option className={styles.options} value= 'SOL'>
SOL
</option>
<option className={styles.options} value= 'USDC'>
USDC
</option>
</select>
<input placeholder='Amount...'
className={styles.inputAmount}
type='text'
value={amount}
onChange={e => setAmount(e.target.value)}
/>
<button
className={styles.noticeCTA}
type= 'button'
disabled={!isAuthenticated}
onClick={()=>mint()}
>
Send
</button>
</div>
</form>
)
}
export default BuyTokens
This is the RobinhoodContext.js file:
import { createContext, useEffect, useState } from "react";
import { useMoralis } from "react-moralis";
import {
dogeAbi,
bitcoinAbi,
solanaAbi,
usdcAbi,
dogeAddress,
bitcoinAddress,
solanaAddress,
usdcAddress,
} from '../lib/constants'
export const RobinhoodContext = createContext()
export const RobinhoodProvider = ({children}) => {
const [currentAccount, setCurrentAccount ] = useState('')
const [formattedAccount, setFormattedAccount] = useState('')
const [coinSelect, setCoinSelect] = useState('DOGE')
const [toCoin, setToCoin] = useState('')
const [balance, setBalance] = useState('')
const [amount, setAmount] = useState('')
const { isAuthenticated, authenticate, user, logout, Moralis, enableWeb3 } = useMoralis()
useEffect(async() => {
if(isAuthenticated) {
const account = user.get('ethAddress')
let formatAccount = account.slice(0,4) + '...' + account.slice(-4)
setFormattedAccount(formatAccount)
setCurrentAccount(account)
const currentBalance = await Moralis.Web3API.account.getNativeBalance({
chain: 'rinkeby',
address: currentAccount,
})
const balanceToEth = Moralis.Units.FromWei(currentBalance.balance)
const formattedBalance = parseFloat(balanceToEth).toFixed(3)
setBalance(formattedBalance)
}
}, [isAuthenticated, enableWeb3])
useEffect(() => {
if(!currentAccount) return
;(async ()=>{
const response = await fetch('/api/createUser', {
method: 'POST',
headers: {
'Content-Type' : 'application/json',
},
body: JSON.stringify({
walletAddress : currentAccount,
}),
})
const data = await response.json()
})
}, [currentAccount])
const getContractAddress = ()=> {
if(coinSelect === 'BTC') return bitcoinAddress
if(coinSelect === 'DOGE') return dogeAddress
if(coinSelect === 'SOL') return solanaAddress
if(coinSelect === 'USDC') return usdcAddress
}
const connectWallet = () => {
authenticate()
}
const signOut = () => {
logout()
}
return (
<RobinhoodContext.Provider
value={{
connectWallet,
signOut,
currentAccount,
isAuthenticated,
formattedAccount,
}}
>
{children}
</RobinhoodContext.Provider>
)
}
Also, this is the error:
Unhandled Runtime Error
TypeError: destroy is not a function
Call Stack safelyCallDestroy node_modules/react-dom/cjs/react-dom.development.js (22831:0)
commitHookEffectListUnmount node_modules/react-dom/cjs/react-dom.development.js (22999:0)
invokePassiveEffectUnmountInDEV node_modules/react-dom/cjs/react-dom.development.js (25097:0)
invokeEffectsInDev node_modules/react-dom/cjs/react-dom.development.js (27304:0)
commitDoubleInvokeEffectsInDEV node_modules/react-dom/cjs/react-dom.development.js (27277:0)
flushPassiveEffectsImpl node_modules/react-dom/cjs/react-dom.development.js (27007:0)
flushPassiveEffects node_modules/react-dom/cjs/react-dom.development.js (26935:0)
performSyncWorkOnRoot node_modules/react-dom/cjs/react-dom.development.js (26032:0)
flushSyncCallbacks node_modules/react-dom/cjs/react-dom.development.js (12009:0)
commitRootImpl node_modules/react-dom/cjs/react-dom.development.js (26910:0)
commitRoot node_modules/react-dom/cjs/react-dom.development.js (26638:0)
finishConcurrentRender node_modules/react-dom/cjs/react-dom.development.js (25937:0)
performConcurrentWorkOnRoot node_modules/react-dom/cjs/react-dom.development.js (25765:0)
workLoop node_modules/scheduler/cjs/scheduler.development.js (266:0)
flushWork node_modules/scheduler/cjs/scheduler.development.js (239:0)
performWorkUntilDeadline node_modules/scheduler/cjs/scheduler.development.js (533:0)
I have been stuck with this for a while now. Please help.
