Creating a Profile UI
Here’s how to create a simple profile page. We’ll use GET profile, GET followers, and GET following to display information about a user and their social connections.
To get their username, we can pass their id
or username
to GET profile
await fetch(
'https://api.usetapestry.dev/v1/profile/__ID_OR_USERNAME__?apiKey=YOUR_API_KEY',
)
And let’s imagine our UI has a field for users to update their bio and profile picture. We can add these to their profile on the protocol using PUT profile/update
await fetch('https://api.usetapestry.dev/v1/profile/update?apiKey=YOUR_API_KEY', {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
properties: [
{
key: '',
value: '',
},
],
blockchain: 'Solana',
namespace: 'Primitives',
}),
})
Now, we will get all of this information back when we call GET profile again:
- username
- bio
- profile image
- following count
- followers count
To enable users to click inside the following & followers counts and get information on each user, we can GET following and GET followers.
await fetch(
'https://api.usetapestry.dev/v1/profile/followers/__STARTID__?apiKey=YOUR_API_KEY',
)
await fetch(
'https://api.usetapestry.dev/v1/profile/following/__STARTID__?apiKey=YOUR_API_KEY',
)
These calls will return data in the following structure:
[
{
"properties": {
"ownerWallet": "2qrWc9p5vatLH3kp4CiVXrdQ4V293d8qzmg4ziez6T4k",
"id": "magiceden",
"username": "magiceden"
}
},
{
"properties": {
"ownerWallet": "DPpSMtNnvwNeYhECNv125pfXqYbB2BKbFXaBnpwUc8Js",
"id": "idetssx",
"username": "idetssx"
}
},
{
"properties": {
"ownerWallet": "H2rVxNEiis9zkhxmjAsHrur3apwABxgKMAtj42P4YDDF",
"id": "pumptothemoon",
"username": "pumptothemoon"
}
}
]
From here, we can use the id
or username
to hyperlink to each additional user profile, enhancing discoverability inside our app.