epixkit/example.html at main · EpixZone/epixkit · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>EpixKit Example</title>
 <style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
   background: #0d1117; color: #e0e0e0; padding: 40px 20px;
  }
  .container { max-width: 500px; margin: 0 auto; }
  h1 { font-size: 1.5em; margin-bottom: 8px; }
  p.subtitle { color: #8b949e; font-size: 0.9em; margin-bottom: 24px; }
  .card {
   background: #161b22; border: 1px solid #21262d; border-radius: 10px; padding: 20px;
  }
  button {
   padding: 10px 20px; border: none; border-radius: 6px; font-size: 0.9em;
   cursor: pointer; font-weight: 600;
  }
  .btn-connect { background: #6e40c9; color: #fff; }
  .btn-connect:hover { background: #8957e5; }
  .btn-disconnect { background: #da3633; color: #fff; margin-left: 8px; }
  .btn-disconnect:hover { background: #f85149; }
  #status { margin-top: 16px; font-size: 0.85em; color: #8b949e; }
  #address { color: #58a6ff; font-family: monospace; word-break: break-all; }
  #error { color: #f85149; margin-top: 8px; font-size: 0.85em; }
 </style>
</head>
<body>

<div class="container">
 <h1>EpixKit Example</h1>
 <p class="subtitle">Minimal wallet connection demo</p>

 <div class="card">
  <div id="disconnected">
   <button class="btn-connect" onclick="doConnect()">Connect Wallet</button>
   <div id="error"></div>
  </div>
  <div id="connected" style="display:none;">
   <div>Connected: <span id="wallet-name"></span></div>
   <div id="address" style="margin-top:6px;"></div>
   <div style="margin-top:12px;">
    <button class="btn-connect" onclick="doSend()">Send 0.001 EPIX to self</button>
    <button class="btn-disconnect" onclick="doDisconnect()">Disconnect</button>
   </div>
  </div>
  <div id="status"></div>
 </div>

 <div class="card" style="margin-top:16px;">
  <div>Installed wallets (Epix Wallet first):</div>
  <ul id="wallets" style="margin:8px 0 0 18px;color:#8b949e;font-size:0.9em;"></ul>
 </div>
</div>

<script src="epixkit.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ethers/6.13.4/ethers.umd.min.js"></script>
<script>

EpixKit.init({
 chainId: "0x77D",
 chainName: "Epix Testnet",
 nativeCurrency: { name: "EPIX", symbol: "EPIX", decimals: 18 },
 rpcUrls: ["https://evmrpc.testnet.epix.zone"],
 blockExplorerUrls: ["https://testscan.epix.zone"],
})

async function listWallets() {
 var wallets = await EpixKit.getWallets()
 var ul = document.getElementById("wallets")
 ul.innerHTML = ""
 if (!wallets.length) {
  var li = document.createElement("li")
  li.textContent = "none detected"
  ul.appendChild(li)
 }
 wallets.forEach(function(w) {
  var li = document.createElement("li")
  li.textContent = w.name + (w.rdns ? " (" + w.rdns + ")" : "")
  ul.appendChild(li)
 })
}
listWallets()

async function doConnect() {
 document.getElementById("error").textContent = ""
 try {
  var result = await EpixKit.connect()

  document.getElementById("wallet-name").textContent = result.walletName
  document.getElementById("address").textContent = result.address
  document.getElementById("disconnected").style.display = "none"
  document.getElementById("connected").style.display = "block"
 } catch (err) {
  document.getElementById("error").textContent = err.message
 }
}

function doDisconnect() {
 EpixKit.disconnect()
 document.getElementById("disconnected").style.display = "block"
 document.getElementById("connected").style.display = "none"
 document.getElementById("status").textContent = ""
}

async function doSend() {
 var status = document.getElementById("status")
 status.textContent = "Sending..."
 try {
  var provider = new ethers.BrowserProvider(EpixKit.getProvider())
  var signer = await provider.getSigner()
  var tx = await signer.sendTransaction({
   to: EpixKit.getAddress(),
   value: ethers.parseEther("0.001")
  })
  status.textContent = "Tx sent: " + tx.hash
  await tx.wait()
  status.textContent = "Confirmed: " + tx.hash
 } catch (err) {
  status.textContent = "Error: " + err.message
 }
}

</script>
</body>
</html>