DEV Community

Dami_Crypt
Dami_Crypt

Posted on

WHAT I LEARNED DEBUGGING MY DEV CHALLENGE PROJECT AT 2AM

While working on the challenge i was stuck for 3 hours because my "Connect Wallet" button threw Cannot read properties of undefine.

I thought Solana was broken. Turns out, I was broken. Here are 3 concepts that clicked for me:

  1. async/await is just "wait for your food" JavaScript doesn't wait by default. When you call an API, you get a Promise, not data. //Wrong – I did this for days const res = fetch(url) console.log(res) // Promise {}

// Right
const res = await fetch(url) // pause until network responds
const data = await res.json() // pause until body is parsed
console.log(data)
Rule: Use await twice for fetch. Once for network, once for .json(). And your function must be async.

  1. window.solana.connect() is not JavaScript This was my biggest facepalm. I assumed connect(), publicKey, signTransaction() were built into JS like fetch().

Reality check:
new Connection()👇 @solana/web3.js npm package
window.solana.connect()👇 Phantom extension injects it

Phantom adds this script to every page:
window.solana = {
connect: async () => { /opens popup / },
signTransaction: async (tx) => { / signs locally / }
}
If you uninstall Phantom, window.solana disappears. That's why my code crashed in incognito.

Lesson: If it's not on MDN and you didn't npm install it, check if an extension injected it. Open console and type window.solana to verify.

I am opened to comments, corrections and learning more. Let's take up the next challenge 💪.

What concept clicked for you recently? Drop it below 👇

Top comments (1)

Collapse
 
gilbert_dami profile image
Dami_Crypt

What should I debug tonight 🤔