Connect to XT Wallet

communication concept once the xt wallet is installed, it ramps up an internal message based communication server each new tab loads a small script provided by the extension, that acts as a client listening to the messages coming from the wallet the wallet stores the keys in an extra protected "backend" area of the extension and never provides any secret the keys are encrypted by the users secret he provided when installed the extension between a dapp and the wallet only public information like accounts public key and current selected node host is transmitted the wallet dispatches the following events connection/disconnection account selection node selection account and/or permission removal confirmation responses, i e on signing the signumjs wallets package simplifies the communication as much as possible the interaction life cycle of the wallet is like this connect to wallet add event listeners to the connection object interact according to the events disconnect detach the event listeners usage example the following code is just an excerpt from a https //github com/signum network/signumjs/tree/main/examples/web/connect xt wallet more elaborated demos for https //github com/ohager/signum xt wallet react demo and https //github com/ohager/signum xt wallet vanilla demo are available also and serve as a starting point const {ledgerclientfactory} = require('@signumjs/core') const {genericextensionwallet} = require('@signumjs/wallets') let walletlistener = null; // in vanilla js, we can abuse the global object // the wallet connection should be a singleton window\ wallet = new genericextensionwallet() window\ signumledger = null // we need to reconstruct the ledger client to use the correct node, i e the one selected by // the wallet function createledgerclient(nodehost){ window\ signumledger = ledgerclientfactory createclient({ nodehost }) } // for better encapsulation, it's not the worst idea to dispatch global events function propagatewalletevent(action, data = {}){ window\ dispatchevent(new customevent('wallet event', {detail { action, payload { data} }})) } // we need to listen to network changes function onnetworkchange(args) { propagatewalletevent('networkchanged') // check if we are still within the same network if (args networkname === 'signum testnet') { if (!window\ wallet connection) { connectwallet() } else{ createledgerclient(args nodehost) } } else { showerror("wallet changed to another network disconnect wallet") disconnectwallet() } } function onaccountchange() { propagatewalletevent('accountchanged') } function onpermissionoraccountremoval() { // it's possible that the user revokes the dapps permission // we need to disconnect the wallet then propagatewalletevent('permissionremoved' ) showerror("wallet removed this dapps permission") disconnectwallet(); } async function connectwallet() { if (window\ wallet connection) return; try { // connecting the wallet is easy const connection = await window\ wallet connect({ appnam 'signumjs xt wallet demo', networkname 'signum testnet' }) if (walletlistener) { walletlistener unlisten(); } // but we need also attach event listeners // this is where a bit more complexity comes into the game // but the xt wallet knows only four events no rocket science here walletlistener = connection listen({ onnetworkchanged onnetworkchange, onaccountchanged onaccountchange, onpermissionremoved onpermissionoraccountremoval, onaccountremoved onpermissionoraccountremoval, }); createledgerclient(connection currentnodehost) // tell everybody that we connected propagatewalletevent('connected') } catch (e) { showerror(e message) } } async function disconnectwallet() { // when disconnecting, we should make tabula rasa and reinstantiate the wallet instance window\ wallet = new genericextensionwallet(); window\ signumledger = null; // do not forget to unlisten the listeners! walletlistener unlisten(); propagatewalletevent('disconnected'); } \<script/> let walletlistener = null; // in vanilla js, we can abuse the global object // the wallet connection should be a singleton window\ wallet = new sig$wallets genericextensionwallet() window\ signumledger = null // we need to reconstruct the ledger client to use the correct node, i e the one selected by // the wallet function createledgerclient(nodehost){ window\ signumledger = sig$ ledgerclientfactory createclient({ nodehost }) } // for better encapsulation, it's not the worst idea to dispatch global events function propagatewalletevent(action, data = {}){ window\ dispatchevent(new customevent('wallet event', {detail { action, payload { data} }})) } // we need to listen to network changes function onnetworkchange(args) { propagatewalletevent('networkchanged') // check if we are still within the same network if (args networkname === 'signum testnet') { if (!window\ wallet connection) { connectwallet() } else{ createledgerclient(args nodehost) } } else { showerror("wallet changed to another network disconnect wallet") disconnectwallet() } } function onaccountchange() { propagatewalletevent('accountchanged') } function onpermissionoraccountremoval() { // it's possible that the user revokes the dapps permission // we need to disconnect the wallet then propagatewalletevent('permissionremoved' ) showerror("wallet removed this dapps permission") disconnectwallet(); } async function connectwallet() { if (window\ wallet connection) return; try { // connecting the wallet is easy const connection = await window\ wallet connect({ appnam 'signumjs xt wallet demo', networkname 'signum testnet' }) if (walletlistener) { walletlistener unlisten(); } // but we need also attach event listeners // this is where a bit more complexity comes into the game // but the xt wallet knows only four events no rocket science here walletlistener = connection listen({ onnetworkchanged onnetworkchange, onaccountchanged onaccountchange, onpermissionremoved onpermissionoraccountremoval, onaccountremoved onpermissionoraccountremoval, }); createledgerclient(connection currentnodehost) // tell everybody that we connected propagatewalletevent('connected') } catch (e) { showerror(e message) } } async function disconnectwallet() { // when disconnecting, we should make tabula rasa and reinstantiate the wallet instance window\ wallet = new sig$wallets genericextensionwallet(); window\ signumledger = null; // do not forget to unlisten the listeners! walletlistener unlisten(); propagatewalletevent('disconnected'); }