I'm trying to make a claim page in next.js that would allow logged in metamask address to:
I used this tutorial on how to connect to a metamask account: https://medium.com/@prodmxle/adding-metamask-authentication-in-next-js-application-using-the-thirdweb-9d23e9147496
except styling my project currently looks the same as code in the tutorial.
.json:
{
"wallets": [
{
"wallet": "YOUR_ROPSTEN WALLET1",
"tokenAmount": 44,
"hasPizza": true,
"hasCoffee": false,
"hasBurger": false,
"hasClaimed": false
},
{
"wallet": "YOUR_ROPSTEN WALLET2",
"tokenAmount": 2,
"hasPizza": false,
"hasCoffee": false,
"hasBurger": false,
"hasClaimed": true
},
{
"wallet": "YOUR_ROPSTEN WALLET3",
"tokenAmount": 4,
"hasPizza": false,
"hasCoffee": false,
"hasBurger": false,
"hasClaimed": true
}
]
}
Learn the api feature in nextJS, it's pretty straight forward, will be too much to explain here. Since you've the user's data you can send an api request with the user's ID and on the api end you can filter and return only that user's data.
OR
Since you've a pretty small database and assuming it's already being hosted or imported and you have the data within the component you want to display
const userId="YOUR_ROPSTEN WALLET1"
const user= data.filter(user=> user.wallet===userId);
Now user will look like this
[
{
"wallet": "YOUR_ROPSTEN WALLET1",
"tokenAmount": 44,
"hasPizza": true,
"hasCoffee": false,
"hasBurger": false,
"hasClaimed": false
}
]