mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2025-11-26 22:55:49 +00:00
Changed folder structure
This commit is contained in:
AlexanderBuzz
@@ -0,0 +1,88 @@
|
||||
const {app, BrowserWindow, ipcMain} = require('electron')
|
||||
const path = require('path')
|
||||
const xrpl = require("xrpl")
|
||||
const { prepareReserve, prepareAccountData, prepareLedgerData} = require('../library/3_helpers')
|
||||
const { prepareTxData } = require('../library/4_helpers')
|
||||
|
||||
const TESTNET_URL = "wss://s.altnet.rippletest.net:51233"
|
||||
|
||||
const createWindow = () => {
|
||||
|
||||
const appWindow = new BrowserWindow({
|
||||
width: 1024,
|
||||
height: 768,
|
||||
webPreferences: {
|
||||
preload: path.join(__dirname, 'view', '4_preload.js'),
|
||||
},
|
||||
})
|
||||
|
||||
appWindow.loadFile(path.join(__dirname, 'view', '4_tx-history.html'))
|
||||
|
||||
return appWindow
|
||||
}
|
||||
|
||||
const main = async () => {
|
||||
const appWindow = createWindow()
|
||||
|
||||
ipcMain.on('address-entered', async (event, address) => {
|
||||
|
||||
let reserve = null
|
||||
|
||||
const client = new xrpl.Client(TESTNET_URL)
|
||||
|
||||
await client.connect()
|
||||
|
||||
// Reference: https://xrpl.org/subscribe.html
|
||||
await client.request({
|
||||
"command": "subscribe",
|
||||
"streams": ["ledger"],
|
||||
"accounts": [address]
|
||||
})
|
||||
|
||||
// Reference: https://xrpl.org/subscribe.html#ledger-stream
|
||||
client.on("ledgerClosed", async (rawLedgerData) => {
|
||||
reserve = prepareReserve(rawLedgerData)
|
||||
const ledger = prepareLedgerData(rawLedgerData)
|
||||
appWindow.webContents.send('update-ledger-data', ledger)
|
||||
})
|
||||
|
||||
// Wait for transaction on subscribed account and re-request account data
|
||||
client.on("transaction", async (transaction) => {
|
||||
// Reference: https://xrpl.org/account_info.html
|
||||
const accountInfoRequest = {
|
||||
"command": "account_info",
|
||||
"account": address,
|
||||
"ledger_index": transaction.ledger_index
|
||||
}
|
||||
|
||||
const accountInfoResponse = await client.request(accountInfoRequest)
|
||||
const accountData = prepareAccountData(accountInfoResponse.result.account_data, reserve)
|
||||
appWindow.webContents.send('update-account-data', accountData)
|
||||
|
||||
const transactions = prepareTxData([{tx: transaction.transaction}])
|
||||
appWindow.webContents.send('update-transaction-data', transactions)
|
||||
})
|
||||
|
||||
// Initial Account Request -> Get account details on startup
|
||||
// Reference: https://xrpl.org/account_info.html
|
||||
const accountInfoResponse = await client.request({
|
||||
"command": "account_info",
|
||||
"account": address,
|
||||
"ledger_index": "current"
|
||||
})
|
||||
const accountData = prepareAccountData(accountInfoResponse.result.account_data)
|
||||
appWindow.webContents.send('update-account-data', accountData)
|
||||
|
||||
// Initial Transaction Request -> List account transactions on startup
|
||||
// Reference: https://xrpl.org/account_tx.html
|
||||
const txResponse = await client.request({
|
||||
"command": "account_tx",
|
||||
"account": address
|
||||
})
|
||||
const transactions = prepareTxData(txResponse.result.transactions)
|
||||
appWindow.webContents.send('update-transaction-data', transactions)
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
app.whenReady().then(main)
|
||||
@@ -0,0 +1,19 @@
|
||||
const { contextBridge, ipcRenderer } = require('electron');
|
||||
|
||||
contextBridge.exposeInMainWorld('electronAPI', {
|
||||
onUpdateLedgerData: (callback) => {
|
||||
ipcRenderer.on('update-ledger-data', callback)
|
||||
},
|
||||
onEnterAccountAddress: (address) => {
|
||||
ipcRenderer.send('address-entered', address)
|
||||
},
|
||||
onUpdateAccountData: (callback) => {
|
||||
ipcRenderer.on('update-account-data', callback)
|
||||
},
|
||||
|
||||
// Step 4 code additions - start
|
||||
onUpdateTransactionData: (callback) => {
|
||||
ipcRenderer.on('update-transaction-data', callback)
|
||||
}
|
||||
// Step 4 code additions - end
|
||||
})
|
||||
@@ -0,0 +1,59 @@
|
||||
// Step 4 code additions - start
|
||||
document.addEventListener('DOMContentLoaded', openAccountAddressDialog);
|
||||
|
||||
function openAccountAddressDialog(){
|
||||
const accountAddressDialog = document.getElementById('account-address-dialog');
|
||||
const accountAddressInput = accountAddressDialog.querySelector('input');
|
||||
const submitButton = accountAddressDialog.querySelector('button[type="submit"]');
|
||||
|
||||
submitButton.addEventListener('click', () => {
|
||||
const address = accountAddressInput.value;
|
||||
window.electronAPI.onEnterAccountAddress(address)
|
||||
accountAddressDialog.close()
|
||||
});
|
||||
|
||||
accountAddressDialog.showModal()
|
||||
}
|
||||
// Step 4 code additions - end
|
||||
|
||||
const ledgerIndexEl = document.getElementById('ledger-index')
|
||||
const ledgerHashEl = document.getElementById('ledger-hash')
|
||||
const ledgerCloseTimeEl = document.getElementById('ledger-close-time')
|
||||
|
||||
window.electronAPI.onUpdateLedgerData((_event, ledger) => {
|
||||
ledgerIndexEl.innerText = ledger.ledgerIndex
|
||||
ledgerHashEl.innerText = ledger.ledgerHash
|
||||
ledgerCloseTimeEl.innerText = ledger.ledgerCloseTime
|
||||
})
|
||||
|
||||
const accountAddressClassicEl = document.getElementById('account-address-classic')
|
||||
const accountAddressXEl = document.getElementById('account-address-x')
|
||||
const accountBalanceEl = document.getElementById('account-balance')
|
||||
const accountReserveEl = document.getElementById('account-reserve')
|
||||
|
||||
window.electronAPI.onUpdateAccountData((_event, value) => {
|
||||
accountAddressClassicEl.innerText = value.classicAddress
|
||||
accountAddressXEl.innerText = value.xAddress
|
||||
accountBalanceEl.innerText = value.xrpBalance
|
||||
accountReserveEl.innerText = value.xrpReserve
|
||||
})
|
||||
|
||||
// Step 4 code additions - start
|
||||
const txTableBodyEl = document.getElementById('tx-table').tBodies[0]
|
||||
window.testEl = txTableBodyEl
|
||||
|
||||
window.electronAPI.onUpdateTransactionData((_event, transactions) => {
|
||||
for (let transaction of transactions) {
|
||||
txTableBodyEl.insertAdjacentHTML( 'beforeend',
|
||||
"<tr>" +
|
||||
"<td>" + transaction.confirmed + "</td>" +
|
||||
"<td>" + transaction.type + "</td>" +
|
||||
"<td>" + transaction.from + "</td>" +
|
||||
"<td>" + transaction.to + "</td>" +
|
||||
"<td>" + transaction.value + "</td>" +
|
||||
"<td>" + transaction.hash + "</td>" +
|
||||
"</tr>"
|
||||
)
|
||||
}
|
||||
})
|
||||
// Step 4 code additions - end
|
||||
@@ -0,0 +1,62 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8"/>
|
||||
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'"/>
|
||||
<meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'"/>
|
||||
<title>XRPL Wallet Tutorial (JavaScript / Electron)</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h3>Build a XRPL Wallet - Part 4/8</h3>
|
||||
|
||||
<fieldset>
|
||||
<legend>Account</legend>
|
||||
Classic Address: <strong id="account-address-classic"></strong><br/>
|
||||
X-Address: <strong id="account-address-x"></strong><br/>
|
||||
XRP Balance: <strong id="account-balance"></strong><br/>
|
||||
XRP Reserved: <strong id="account-reserve"></strong><br/>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Latest validated ledger</legend>
|
||||
Ledger Index: <strong id="ledger-index"></strong><br/>
|
||||
Ledger Hash: <strong id="ledger-hash"></strong><br/>
|
||||
Close Time: <strong id="ledger-close-time"></strong><br/>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Transactions:</legend>
|
||||
<table id="tx-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Confirmed</th>
|
||||
<th>Type</th>
|
||||
<th>From</th>
|
||||
<th>To</th>
|
||||
<th>Value Delivered</th>
|
||||
<th>Hash</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
</table>
|
||||
</fieldset>
|
||||
|
||||
<dialog id="account-address-dialog">
|
||||
<form method="dialog">
|
||||
<div>
|
||||
<label for="address-input">Enter account address:</label>
|
||||
<input type="text" id="address-input" name="address-input" />
|
||||
</div>
|
||||
<div>
|
||||
<button type="submit">Submit</button>
|
||||
</div>
|
||||
</form>
|
||||
</dialog>
|
||||
|
||||
</body>
|
||||
|
||||
<script src="4_renderer.js"></script>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user