Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Demonstration of identity loading for avvy.domains
<html>
<head>
<style>
* {
font-family: Arial;
}
body {
background: #eee;
}
.wrap {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
}
#inner {
border-radius: 15px;
background: white;
padding: 10px;
text-align: center;
display: none;
}
#avatar {
width: 100px;
height: 100px;
border-radius: 100px;
background: #eee;
background-position: center;
background-size: cover;
margin: auto;
}
#address {
margin-top: 20px;
font-weight: bold;
font-size: 18px;
}
#nickname {
font-size: 15px;
}
</style>
</head>
<body>
<div class="wrap">
<div id="inner">
<div id="avatar"></div>
<div id="address"></div>
<div id="nickname"></div>
</div>
</div>
<script src="https://unpkg.com/@avvy/client@1.0.19/dist/index.js"></script>
<script src="https://www.unpkg.com/web3@1.3.5/dist/web3.min.js"></script>
<script>
const get = (sel) => document.querySelector(sel)
async function main() {
const web3 = await new Web3(ethereum)
const avvy = new AvvyClient(web3)
const accounts = await ethereum.request({ method: 'eth_requestAccounts' })
const main = await avvy.getMain(accounts[0])
const avatar = await avvy.lookup(main.domain, avvy.TYPES.AVATAR)
const nickname = await avvy.lookup(main.domain, avvy.TYPES.NICKNAME)
get('#avatar').style.backgroundImage = `url(${avatar})`
get('#address').innerText = main.domain
get('#nickname').innerText = nickname
get('#inner').style.display = 'block'
}
main()
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment