Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <title>Xumm Wallet Connection</title> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"> | |
| <script src="https://cdn.jsdelivr.net/npm/ws@8.11.0/lib/websocket.js"></script> | |
| <script src="../dist/browser.js"></script> | |
| <style> | |
| body { | |
| background-color: #0f172a; | |
| color: #f8fafc; | |
| font-family: 'Inter', sans-serif; | |
| padding: 20px; | |
| } | |
| pre { | |
| background: #1e293b; | |
| padding: 15px; | |
| border-radius: 5px; | |
| color: #f8fafc; | |
| } | |
| .btn { | |
| margin: 5px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1 id="accountaddress">...</h1> | |
| <button id="signinbutton" class="btn btn-primary" onclick="xumm.authorize()">Login</button> | |
| <button id="logoutbutton" class="btn btn-secondary" onclick="xumm.logout()">Logout</button> | |
| <button id="payloadbutton" class="btn btn-success">Payload</button> | |
| <a href="xumm3.html" class="btn btn-info">Wallet 3</a> | |
| <a href="xumm4.html" class="btn btn-warning">Wallet 4</a> | |
| <div class="mt-4"> | |
| <h3>Profile</h3> | |
| <pre id="profile" class="bg-light p-3 rounded"></pre> | |
| </div> | |
| <div class="mt-4"> | |
| <h3>JWT</h3> | |
| <pre id="jwt" class="bg-light p-3 rounded"></pre> | |
| </div> | |
| <div class="mt-4"> | |
| <h3>OpenID</h3> | |
| <pre id="openid" class="bg-light p-3 rounded"></pre> | |
| </div> | |
| <div class="mt-4"> | |
| <h3>Bearer</h3> | |
| <pre id="bearer" class="bg-light p-3 rounded"></pre> | |
| </div> | |
| <div class="mt-4"> | |
| <h3>Payload</h3> | |
| <pre id="payload" class="bg-light p-3 rounded"></pre> | |
| </div> | |
| </div> | |
| <script> | |
| var xumm = new Xumm('8525e32b-1bd0-4839-af2f-f794874a80b0') | |
| window.xumm = xumm | |
| xumm.on("ready", () => console.log("Ready (e.g. hide loading state of page)")) | |
| // WebSocket connection for real-time updates | |
| async function setupWebSocket() { | |
| try { | |
| const payload = await xumm.payload?.create({ | |
| TransactionType: "SignIn" | |
| }) | |
| console.log('WebSocket URL:', payload.refs.websocket_status) | |
| const ws = new WebSocket(payload.refs.websocket_status) | |
| ws.onerror = (error) => { | |
| console.log('WebSocket error:', error) | |
| } | |
| ws.onopen = () => { | |
| console.log('WebSocket connected') | |
| } | |
| ws.onmessage = (data) => { | |
| console.log('WebSocket message:', data) | |
| // Handle real-time updates here | |
| } | |
| } catch (error) { | |
| console.error('WebSocket setup failed:', error) | |
| } | |
| } | |
| xumm.on("success", async () => { | |
| await setupWebSocket() | |
| xumm.user.account.then(account => { | |
| document.getElementById('accountaddress').innerText = account | |
| }) | |
| xumm.user.profile.then(profile => { | |
| document.getElementById('profile').innerHTML = JSON.stringify(profile, null, 2) | |
| }) | |
| xumm.environment.jwt.then(data => { | |
| document.getElementById('jwt').innerHTML = JSON.stringify(data, null, 2) | |
| }) | |
| xumm.environment.openid.then(data => { | |
| document.getElementById('openid').innerHTML = JSON.stringify(data, null, 2) | |
| }) | |
| xumm.environment.bearer.then(data => { | |
| document.getElementById('bearer').innerHTML = JSON.stringify(data, null, 2) | |
| }) | |
| }) | |
| xumm.on("logout", async () => { | |
| document.getElementById('accountaddress').innerText = '...' | |
| document.getElementById('profile').innerHTML = '' | |
| document.getElementById('jwt').innerHTML = '' | |
| document.getElementById('openid').innerHTML = '' | |
| document.getElementById('bearer').innerHTML = '' | |
| }) | |
| xumm.on("error", e => { | |
| console.log('error', e.message) | |
| }) | |
| document.getElementById('payloadbutton').onclick = () => { | |
| xumm.payload.create({ | |
| TransactionType: 'Payment', | |
| Destination: 'rfHn6cB5mmqZ6fHZ4fdemCDSxqLTijgMwo', | |
| Amount: String(1_000_000) | |
| }).then(data => { | |
| document.getElementById('payload').innerHTML = JSON.stringify(data, null, 2) | |
| }) | |
| } | |
| xumm.on('payload', data => { | |
| console.log(data.reason) | |
| console.log(data.uuid) | |
| if (data?.uuid) { | |
| xumm.payload.get(data.uuid).then(payloadResult => { | |
| console.log(payloadResult) | |
| }) | |
| } | |
| }) | |
| </script> | |
| </body> | |
| </html> |