-
Notifications
You must be signed in to change notification settings - Fork 20
/
index.html
151 lines (131 loc) · 3.9 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Stellar Wallets Kit dev testing</title>
<style>
* {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
}
body {
background-color: #fafafa;
}
header {
background-color: #fff;
width: 100%;
display: flex;
border-bottom: solid 1px #ccc;
padding: 0.5rem 1rem;
align-items: center;
justify-content: space-between;
}
main {
padding: 1rem;
display: flex;
flex-direction: column;
}
input, textarea, button {
padding: 0.5rem 1rem;
}
</style>
</head>
<body>
<header>
<div>
<!-- <h3 style='margin: 0; line-height: 100%;'>Dev site</h3>-->
</div>
<div id='buttonWrapper'></div>
</header>
<main>
<label for='publicKey'>Public key</label>
<br>
<input placeholder='Use the connect button to fetch the public key' id='publicKey' type='text'>
<br>
<label for='xdrTextArea'>XDR to sign</label>
<br>
<textarea rows='10' id='xdrTextArea'></textarea>
<br>
<button id='signButton'>Sign</button>
<br>
<pre id='signedXdr'></pre>
</main>
<br><br>
<button id='externalButton'>Connect with external button</button>
<br><br>
<div>
<button id='createButton'>Create a button on the header</button>
<button id='removeButton'>Remove the button from the header</button>
</div>
<br><br>
<script type='module'>
import {
StellarWalletsKit,
XBULL_ID,
WalletNetwork,
allowAllModules,
} from './build/index.js';
import { WalletConnectModule, WalletConnectAllowedMethods } from './build/modules/walletconnect.module.js'
const kit = new StellarWalletsKit({
selectedWalletId: XBULL_ID,
network: WalletNetwork.TESTNET,
modules: [
...allowAllModules(),
new WalletConnectModule({
url: 'https://stellarwalletskit.dev/',
projectId: '4e0b84f6ba6bedf7c7f041d919a9f039',
method: WalletConnectAllowedMethods.SIGN,
description: `This is a development ID, DO NOT sign transactions that come from this request if you are not a developer testing.`,
name: 'StellarWalletsKit',
icons: [],
network: WalletNetwork.TESTNET,
}),
],
});
function createDefaultButton() {
kit.createButton({
container: document.querySelector('#buttonWrapper'),
onConnect: ({ address }) => {
console.log('Address requested: ', address);
document.querySelector('#publicKey').setAttribute('value', address);
},
onDisconnect: () => console.log('Disconnected from the button'),
buttonText: 'Connect',
horizonUrl: 'https://horizon.stellar.org/'
})
}
createDefaultButton();
document.querySelector('#signButton').addEventListener('click', async function(e) {
const inputElement = document.querySelector('#xdrTextArea');
console.log('XDR to sign:', inputElement.value);
const data = await kit.signTransaction(inputElement.value, {
networkPassphrase: WalletNetwork.TESTNET,
address: document.querySelector('#publicKey').value,
});
document.querySelector('#signedXdr').textContent = JSON.stringify(data, null, 2);
})
document.querySelector('#externalButton').addEventListener('click', function(e) {
kit.openModal({
onWalletSelected: onWalletSelected => {
console.log({ onWalletSelected });
},
onClosed: onClosed => {
console.error({ onClosed });
},
modalTitle: 'This is a different tittle',
notAvailableText: 'Nope!'
});
});
document.querySelector('#createButton').addEventListener('click', function(e) {
createDefaultButton();
});
document.querySelector('#removeButton').addEventListener('click', function(e) {
kit.removeButton();
});
</script>
</body>
</html>