<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>TAP WASM Example</title>
<style>
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
line-height: 1.6;
}
h1, h2 {
color: #333;
}
pre {
background-color: #f5f5f5;
padding: 10px;
border-radius: 5px;
overflow-x: auto;
}
button {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 10px 2px;
cursor: pointer;
border-radius: 5px;
}
.output {
background-color: #f9f9f9;
border: 1px solid #ddd;
padding: 10px;
border-radius: 5px;
margin-top: 10px;
min-height: 200px;
}
</style>
</head>
<body>
<h1>TAP WASM Example</h1>
<p>This example demonstrates how to use the TAP WebAssembly package.</p>
<div class="actions">
<button id="createAgent">1. Create Agent</button>
<button id="createMessage">2. Create Transfer Message</button>
<button id="signMessage">3. Pack & Sign Message</button>
</div>
<h2>Output:</h2>
<div id="output" class="output"></div>
<script type="module">
import init, {
WasmTapAgent,
generate_uuid_v4
} from '../pkg/tap_wasm.js';
let message = null;
let agent = null;
await init();
const output = document.getElementById('output');
function log(text) {
output.innerHTML += text + '<br>';
console.log(text);
}
function prettyPrint(obj) {
return `<pre>${JSON.stringify(obj, null, 2)}</pre>`;
}
document.getElementById('createMessage').addEventListener('click', () => {
output.innerHTML = '';
try {
if (!agent) {
log('Please create an agent first.');
return;
}
message = {
id: generate_uuid_v4(),
type: 'https://tap.rsvp/schema/1.0#Transfer',
from: agent.get_did(),
to: [agent.get_did()],
body: {
asset: "eip155:1/erc20:0xdac17f958d2ee523a2206206994597c13d831ec7",
originator: {
'@id': "did:key:z6MkhaXgBZDvotDkL5257faiztiGiC2QtKLGpbnnEGta2doK"
},
beneficiary: {
'@id': "did:key:z6MkrJVSYwmQgxBBCnZWuYpKSJ4qWRhWGsc9hhsVf43yirpL"
},
amount: "100.0",
agents: [],
memo: "Test transfer"
},
created_time: Math.floor(Date.now() / 1000)
};
log('Created transfer message:');
log(prettyPrint(message));
} catch (error) {
log('Error creating message: ' + error);
}
});
document.getElementById('createAgent').addEventListener('click', () => {
output.innerHTML = '';
try {
agent = new WasmTapAgent({
nickname: "Test Agent",
debug: true
});
log('Created agent:');
log(prettyPrint({
did: agent.get_did(),
nickname: agent.nickname()
}));
} catch (error) {
log('Error creating agent: ' + error);
}
});
document.getElementById('signMessage').addEventListener('click', async () => {
output.innerHTML = '';
if (!message || !agent) {
log('Please create both a message and an agent first.');
return;
}
try {
log('Packing message...');
const packedResult = await agent.packMessage(message);
log('Message packed successfully:');
log(prettyPrint({
packedMessage: packedResult.message.substring(0, 100) + '...',
metadata: packedResult.metadata
}));
log('Unpacking message to verify...');
const unpackedResult = await agent.unpackMessage(packedResult.message);
log('Message unpacked successfully:');
log(prettyPrint({
id: unpackedResult.id,
type: unpackedResult.type,
from: unpackedResult.from,
to: unpackedResult.to
}));
} catch (error) {
log('Error packing/unpacking message: ' + error);
console.error(error);
}
});
</script>
</body>
</html>