Skip to content

Commit

Permalink
add examples and universal module
Browse files Browse the repository at this point in the history
  • Loading branch information
scobru committed Oct 19, 2024
1 parent 74639f3 commit a5d46a7
Show file tree
Hide file tree
Showing 7 changed files with 1,153 additions and 2 deletions.
1 change: 1 addition & 0 deletions gun-eth.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@

2 changes: 1 addition & 1 deletion packages/gun-eth/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "gun-eth",
"version": "1.2.14",
"version": "1.3.0",
"description": "A GunDB plugin for Ethereum, and Web3",
"main": "./src/index.js",
"scripts": {
Expand Down
163 changes: 163 additions & 0 deletions packages/gun-eth/src/examples/eth2gun.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,163 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>💎 Ethereum to 🔫 Gun Key Pair Demo</title>
<!-- Include Gun -->
<script src="https://cdn.jsdelivr.net/npm/gun/gun.js"></script>
<!-- Include SEA (part of Gun) -->
<script src="https://cdn.jsdelivr.net/npm/gun/sea.js"></script>
<!-- Include Ethers.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/ethers/6.7.0/ethers.umd.min.js"></script>
<!-- Include the Gun-Eth plugin -->
<script src="https://cdn.jsdelivr.net/npm/gun-eth/src/gun-eth.js""></script>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f0f0f0;
}
.container {
max-width: 400px;
background-color: white;
border: 1px solid #000;
padding: 10px;
}
h1,
h2 {
margin: 0 0 10px 0;
font-size: 16px;
}
form, div {
margin-bottom: 15px;
}
input,
button {
display: inline-block;
margin: 2px 0;
padding: 2px;
font-size: 12px;
}
input {
width: 150px;
}
button {
width: 100px;
}
label {
display: inline-block;
width: 70px;
font-size: 12px;
}
#configStatus,
.result {
font-weight: bold;
margin-bottom: 10px;
}
.result {
color: blue;
}
</style>
</head>
<body>
<div class="container">
<h1>💎 Ethereum to 🔫 Gun Key Pair Demo</h1>

<form id="configForm">
<h2>🔧 Configuration</h2>
<label for="rpcUrl">🌐 RPC URL:</label>
<br>
<input type="text" id="rpcUrl" name="rpcUrl" required>
<br>
<label for="privateKey">🔑 Private Key:</label>
<br>
<input type="password" id="privateKey" name="privateKey" required>
<br>
<button type="submit">⚙️ Configure</button>
</form>

<div id="createPairSection">
<h2>🔒 Create and Store Encrypted Pair</h2>
<button id="createPairBtn">🔐 Create Pair</button>
</div>

<div id="retrievePairSection">
<h2>🔓 Retrieve and Decrypt Pair</h2>
<button id="retrievePairBtn">🔎 Retrieve Pair</button>
</div>

<div id="resultSection">
<h2>📊 Result</h2>
<p id="resultText"></p>
</div>
</div>

<script>
let gun;
const MESSAGE_TO_SIGN = "GunDB access with Ethereum";

document.getElementById('configForm').addEventListener('submit', function(event) {
event.preventDefault();
const rpcUrl = document.getElementById('rpcUrl').value;
const privateKey = document.getElementById('privateKey').value;

gun = Gun();
gun.setStandaloneConfig(rpcUrl, privateKey);

console.log('Standalone configuration set');
document.getElementById('resultText').innerText = '✅ Configuration set successfully';
});

document.getElementById('createPairBtn').addEventListener('click', async function() {
if (!gun) {
alert('⚠️ Please configure Gun first');
return;
}

try {
const signature = await gun.createSignature(MESSAGE_TO_SIGN);
if (!signature) {
throw new Error('Failed to create signature');
}

const signer = new ethers.Wallet(document.getElementById('privateKey').value);
const address = await signer.getAddress();

await gun.createAndStoreEncryptedPair(address, signature);

document.getElementById('resultText').innerText = '✅ Encrypted pair created and stored successfully';
} catch (error) {
document.getElementById('resultText').innerText = '❌ Error: ' + error.message;
}
});

document.getElementById('retrievePairBtn').addEventListener('click', async function() {
if (!gun) {
alert('⚠️ Please configure Gun first');
return;
}

try {
const signature = await gun.createSignature(MESSAGE_TO_SIGN);
if (!signature) {
throw new Error('Failed to create signature');
}

const signer = new ethers.Wallet(document.getElementById('privateKey').value);
const address = await signer.getAddress();

const pair = await gun.getAndDecryptPair(address, signature);

document.getElementById('resultText').innerHTML = `
<strong>🔑 Retrieved pair:</strong>
<br>
${JSON.stringify(pair, null, 2)}
`;
} catch (error) {
document.getElementById('resultText').innerText = '❌ Error: ' + error.message;
}
});
</script>
</body>
</html>
164 changes: 164 additions & 0 deletions packages/gun-eth/src/examples/gun2eth.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,164 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Gun to Ethereum Address Demo</title>
<!-- Include Gun -->
<script src="https://cdn.jsdelivr.net/npm/gun/gun.js"></script>
<!-- Include SEA (part of Gun) -->
<script src="https://cdn.jsdelivr.net/npm/gun/sea.js"></script>
<!-- Include Ethers.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/ethers/6.7.0/ethers.umd.min.js"></script>
<!-- Include the Gun-Eth plugin -->
<script src="https://cdn.jsdelivr.net/npm/gun-eth/src/gun-eth.js""></script>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f0f0f0;
}
.container {
max-width: 400px;
background-color: white;
border: 1px solid #000;
padding: 10px;
}
h1,
h2 {
margin: 0 0 10px 0;
font-size: 16px;
}
form {
margin-bottom: 15px;
}
input,
button {
display: inline-block;
margin: 2px 0;
padding: 2px;
font-size: 12px;
}
input {
width: 150px;
}
button {
width: 100px;
}
label {
display: inline-block;
width: 70px;
font-size: 12px;
}
#configStatus,
.result {
font-weight: bold;
margin-bottom: 10px;
}
.result {
color: blue;
}
.disclaimer {
background-color: #ffffd0;
border: 1px solid #e6e600;
padding: 10px;
margin-bottom: 15px;
font-size: 14px;
}
</style>
</head>
<body>
<div class="container">
<h1>🔫 Gun to 💎 Ethereum Address Demo</h1>

<form id="gunUserForm">
<h2>👤 User Login/Registration</h2>
<label for="gunAlias">👤 Alias:</label>
<br>
<input type="text" id="gunAlias" name="gunAlias" required>
<br>
<label for="gunPassword">🔑 Password:</label>
<br>
<input type="password" id="gunPassword" name="gunPassword" required>
<br>
<button type="submit">🚀 Create/Login</button>
</form>

<div id="conversionSection" style="display:none;">
<h2>🔄 Convert Gun User to Ethereum Address</h2>
<button id="convertBtn">🔄 Convert
</div>

<div id="resultSection">
<h2>Result</h2>
<p id="resultText"></p>
</div>
</div>

<script>
let gun = Gun();
let currentUser = null;

document.getElementById('gunUserForm').addEventListener('submit', function(event) {
event.preventDefault();
const alias = document.getElementById('gunAlias').value;
const password = document.getElementById('gunPassword').value;

console.log('Attempting to create or login user:', alias);

gun.user().create(alias, password, function(ack) {
if (ack.err) {
console.log('User creation failed, trying to login:', ack.err);
gun.user().auth(alias, password, function(authAck) {
if (authAck.err) {
document.getElementById('resultText').innerText = 'Error logging in: ' + authAck.err;
} else {
currentUser = gun.user();
document.getElementById('resultText').innerText = 'User logged in successfully.';
document.getElementById('conversionSection').style.display = 'block';
}
});
} else {
console.log('User created successfully:', ack);
currentUser = gun.user();
document.getElementById('resultText').innerText = 'User created and logged in successfully.';
document.getElementById('conversionSection').style.display = 'block';
}
});
});

document.getElementById('convertBtn').addEventListener('click', function() {
if (!currentUser) {
alert('Please login first');
return;
}

console.log('Current user:', currentUser);
console.log('User pair:', currentUser._.sea);

try {
const pair = currentUser._.sea;
if (!pair || !pair.priv) {
throw new Error('Unable to retrieve Gun user private key');
}

const ethAccount = gun.gunToEthAccount(pair.priv);

document.getElementById('resultText').innerHTML = `
<strong>Gun User</strong>
<br>
${currentUser.is.alias}
<br>
<br>
<strong>Ethereum Address:</strong>
<br>
${ethAccount.publicKey}
`;
} catch (error) {
document.getElementById('resultText').innerText = 'Error: ' + error.message;
console.error('Conversion error:', error);
}
});
</script>
</body>
</html>
Loading

0 comments on commit a5d46a7

Please sign in to comment.