Skip to content

Commit f240f8c

Browse files
rtomasrtomas
authored
feat: vanilla js examples (#35)
* WIP example ether-js * add lock file to ignore * WIP * wip * add html ethers example * add html wagmi example * add html solana example WIP * Solana VanillaJS Example * WIP add bitcoin vanillaJS * add bitcoin Example * update to 1.6.5 vanillaJS examples * update to 1.6.5 * fix balance
1 parent 5a5e9f9 commit f240f8c

File tree

46 files changed

+4776
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

46 files changed

+4776
-0
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ yarn-debug.log*
1111
yarn-error.log*
1212
pnpm-debug.log*
1313
lerna-debug.log*
14+
pnpm-lock.yaml
1415

1516
node_modules
1617
dist

‎javascript/html-bitcoin/css/App.css‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
:root {
2+
--background: #ffffff;
3+
--foreground: #171717;
4+
}
5+
6+
html,
7+
body {
8+
overflow-x: hidden;
9+
max-width: 100vw;
10+
}
11+
12+
body {
13+
color: var(--foreground);
14+
background: var(--background);
15+
font-family: Arial, Helvetica, sans-serif;
16+
-webkit-font-smoothing: antialiased;
17+
-moz-osx-font-smoothing: grayscale;
18+
}
19+
20+
* {
21+
box-sizing: border-box;
22+
padding: 0;
23+
margin: 0;
24+
}
25+
26+
a {
27+
color: inherit;
28+
text-decoration: none;
29+
}
30+
31+
@media (prefers-color-scheme: dark) {
32+
html {
33+
color-scheme: dark;
34+
}
35+
}
36+
37+
section {
38+
border: 1px solid #e0e0e0;
39+
border-radius: 8px;
40+
padding: 16px;
41+
background-color: #f9f9f9;
42+
padding: 13px;
43+
margin: 10px;
44+
width: 90%;
45+
text-align: left;
46+
}
47+
48+
.pages {
49+
align-items: center;
50+
justify-items: center;
51+
text-align: center;
52+
display: grid;
53+
}
54+
55+
.state-container {
56+
align-items: center;
57+
justify-items: center;
58+
text-align: center;
59+
}
60+
61+
button {
62+
padding: 10px 15px;
63+
background-color: white;
64+
color: black;
65+
border: 2px solid black;
66+
border-radius: 6px;
67+
font-size: 16px;
68+
font-weight: 600;
69+
cursor: pointer;
70+
transition: all 0.3s ease;
71+
margin: 15px; /* Space between buttons */
72+
}
73+
74+
button:hover {
75+
background-color: black;
76+
color: white;
77+
}
78+
79+
button:active {
80+
background-color: #333; /* Dark gray on click */
81+
color: white;
82+
}
83+
84+
h1 {
85+
margin: 20px;
86+
}
87+
88+
h2 {
89+
padding-bottom: 6px;
90+
}
91+
92+
pre {
93+
white-space: pre-wrap; /* Wraps long lines inside <pre> */
94+
word-break: break-all;
95+
}
96+
97+
98+
.link-button {
99+
background-color: black;
100+
color: white;
101+
padding: 5px 10px;
102+
text-decoration: none;
103+
border-radius: 5px;
104+
}
105+
106+
.link-button:hover {
107+
background-color: #333; /* Darken the background on hover */
108+
}
109+
110+
.link-button:hover {
111+
background-color: white; /* Change background to white on hover */
112+
color: black; /* Change text color to black on hover */
113+
}
114+
115+
.advice {
116+
text-align: 'center';
117+
margin-bottom: 10px;
118+
line-height: 25px;
119+
}

‎javascript/html-bitcoin/index.html‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>HTML Bitcoin Example</title>
7+
<link rel="stylesheet" href="css/App.css" />
8+
</head>
9+
10+
<body>
11+
<div class="pages" id="app">
12+
<img src="/reown.svg" alt="Reown" style="width: 150px; height: 150px" />
13+
<h1>AppKit Bitcoin VanillaJS dApp Example</h1>
14+
15+
<!-- AppKit UI Components -->
16+
<div class="button-group">
17+
<appkit-button />
18+
</div>
19+
20+
<!-- Modal Controls -->
21+
<div class="button-group">
22+
<button id="open-connect-modal" data-connected-only>Open Connect Modal</button>
23+
<button id="disconnect" data-connected-only>Disconnect</button>
24+
<button id="sign-message" data-connected-only>Sign Message</button>
25+
<button id="get-balance" data-connected-only>Get Balance</button>
26+
</div>
27+
28+
<!-- State Displays -->
29+
<section id="balanceSection" style="display: none;">
30+
<h2>Balance</h2>
31+
<pre id="balanceState"></pre>
32+
</section>
33+
34+
<section id="txSection" style="display: none;">
35+
<h2>Tx</h2>
36+
<pre id="txState"></pre>
37+
</section>
38+
39+
<section id="signatureSection" style="display: none;">
40+
<h2>Signature</h2>
41+
<pre id="signatureState"></pre>
42+
</section>
43+
44+
<section>
45+
<h2>Account</h2>
46+
<pre id="accountState"></pre>
47+
</section>
48+
49+
<section>
50+
<h2>Network</h2>
51+
<pre id="networkState"></pre>
52+
</section>
53+
54+
<section>
55+
<h2>Modal State</h2>
56+
<pre id="appKitState"></pre>
57+
</section>
58+
59+
<section>
60+
<h2>Theme</h2>
61+
<pre id="themeState"></pre>
62+
</section>
63+
64+
<section>
65+
<h2>Events</h2>
66+
<pre id="events"></pre>
67+
</section>
68+
69+
<section>
70+
<h2>Wallet Info</h2>
71+
<pre id="walletInfo"></pre>
72+
</section>
73+
</div>
74+
<script type="module" src="/src/main.js"></script>
75+
</body>
76+
</html>

‎javascript/html-bitcoin/package.json‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"name": "vanillajs-bitcoin",
3+
"private": true,
4+
"version": "0.0.1",
5+
"scripts": {
6+
"dev": "vite --port 3011",
7+
"build": "vite build"
8+
},
9+
"dependencies": {
10+
"@reown/appkit": "1.6.5",
11+
"@reown/appkit-adapter-bitcoin": "1.6.5"
12+
},
13+
"devDependencies": {
14+
"vite": "5.2.11"
15+
}
16+
}

‎javascript/html-bitcoin/public/favicon.ico‎

14.7 KB
Binary file not shown.

‎javascript/html-bitcoin/public/reown.svg‎

Lines changed: 2 additions & 0 deletions
Loading

‎javascript/html-bitcoin/src/config/appKit.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { bitcoin } from '@reown/appkit/networks'
2+
import { createAppKit } from '@reown/appkit'
3+
import { BitcoinAdapter } from '@reown/appkit-adapter-bitcoin'
4+
5+
const projectId = import.meta.env.VITE_PROJECT_ID
6+
if (!projectId) {
7+
throw new Error('VITE_PROJECT_ID is not set')
8+
}
9+
10+
const bitcoinAdapter = new BitcoinAdapter({
11+
projectId
12+
})
13+
14+
export const appKit = createAppKit({
15+
adapters: [bitcoinAdapter],
16+
networks: [bitcoin],
17+
projectId,
18+
themeMode: 'light',
19+
themeVariables: {
20+
'--w3m-accent': '#000000',
21+
}
22+
})

‎javascript/html-bitcoin/src/main.js‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import { appKit } from './config/appKit'
2+
import { store } from './store/appkitStore'
3+
import { updateTheme, updateButtonVisibility } from './utils/dom'
4+
import { signMessage, getBalance } from './services/wallet'
5+
import { initializeSubscribers } from './utils/suscribers'
6+
7+
// Initialize subscribers
8+
initializeSubscribers(appKit)
9+
10+
// Initial check
11+
updateButtonVisibility(appKit.getIsConnectedState());
12+
13+
// Button event listeners
14+
document.getElementById('open-connect-modal')?.addEventListener(
15+
'click', () => appKit.open()
16+
)
17+
18+
document.getElementById('disconnect')?.addEventListener(
19+
'click', () => {
20+
appKit.disconnect()
21+
}
22+
)
23+
24+
document.getElementById('sign-message')?.addEventListener(
25+
'click', async () => {
26+
const signature = await signMessage(store.bip122Provider, store.accountState.address)
27+
28+
document.getElementById('signatureState').innerHTML = signature
29+
document.getElementById('signatureSection').style.display = ''
30+
}
31+
)
32+
33+
document.getElementById('send-tx')?.addEventListener(
34+
'click', async () => {
35+
console.log(store.bip122Provider, store.accountState.address)
36+
const tx = await sendTx(store.bip122Provider, store.accountState.address)
37+
console.log('Tx:', tx)
38+
39+
document.getElementById('txState').innerHTML = JSON.stringify(tx, null, 2)
40+
document.getElementById('txSection').style.display = ''
41+
}
42+
)
43+
44+
document.getElementById('get-balance')?.addEventListener(
45+
'click', async () => {
46+
const balance = await getBalance(store.bip122Provider, store.accountState.address)
47+
48+
document.getElementById('balanceState').innerHTML = balance + ' ETH'
49+
document.getElementById('balanceSection').style.display = ''
50+
}
51+
)
52+
53+
// Set initial theme
54+
updateTheme(store.themeState.themeMode)

‎javascript/html-bitcoin/src/services/wallet.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
2+
3+
export const signMessage = (provider, address) => {
4+
if (!provider) return Promise.reject('No provider available')
5+
6+
console.log("provider", provider.signMessage)
7+
return provider.signMessage({
8+
message: 'Hello from AppKit!',
9+
address: address
10+
})
11+
}
12+
13+
export const getBalance = async (provider, address) => {
14+
if (!provider) return Promise.reject('No provider available')
15+
16+
// get the utxos ... this is the list of unspent transactions that the sender has
17+
const utxos = await getUTXOs(address, false)
18+
// return the sum of the utxos ... The balance of the sender
19+
return utxos.reduce((sum, utxo) => sum + utxo.value, 0)
20+
}
21+
22+
const getUTXOs = async (address) => {
23+
const response = await fetch(
24+
`https://mempool.space/api/address/${address}/utxo`
25+
)
26+
return await response.json();
27+
}

‎javascript/html-bitcoin/src/store/appkitStore.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
export const store = {
2+
accountState: {},
3+
networkState: {},
4+
appKitState: {},
5+
themeState: { themeMode: 'light', themeVariables: {} },
6+
events: [],
7+
walletInfo: {},
8+
bip122Provider: null
9+
}
10+
11+
export const updateStore = (key, value) => {
12+
store[key] = value
13+
}

0 commit comments

Comments
 (0)