Harvmaster/xo-stack
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'electrum-methods' into 'development'

Browse Source 
Functional Electrum subscriptions

See merge request GeneralProtocols/xo/stack!59
This commit is contained in:
Jim Hamill
2025-04-12 05:05:08 +00:00
parent 761ebd9fbe 426b1cc68e
commit 79021b4dc5
4 changed files with 176 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/docs/src/.vitepress/theme/components/PrimitiveTool.vue
+68 -26
View File
@@ -17,7 +17,7 @@
v-if="state.selectedFromFunction?.extendedInput"
v-model="state.selectedFromFunction.models[i]"
class="extended-input"
@input="autoGrow($event.target)"
@input="(e) => autoGrow(e.target as HTMLTextAreaElement)"
></textarea>
<input
v-else
@@ -37,11 +37,11 @@
<div v-if="state.toFunctions.length || state.primitive" class="section output-section">
<h2>{{ state.toFunctions.length ? 'Output' : 'Instance' }}</h2>
<template v-for="(toFunction, i) of toFunctions" :key="i">
<template v-for="(toFunction, i) of state.toFunctions" :key="i">
<div>
<div class="output-box-container">
<LabelledSection :label="toFunction.label" :content="getPrimitive(() => toFunction.callback(state.primitive))" />
<CopyButton :content="getPrimitive(() => toFunction.callback(state.primitive))" />
<LabelledSection :label="toFunction.label" :content="getPrimitive(() => toFunction.callback(state.primitive!))" />
<CopyButton :content="getPrimitive(() => toFunction.callback(state.primitive!))" />
</div>
</div>
</template>
@@ -51,37 +51,51 @@
<div class="form-group select-group">
<label for="functionSelect">Method</label>
<select v-model="state.selectedMethod">
<option v-for="method of props.methods" :key="method.label" :value="method">{{ method.label }}</option>
<option v-for="method of state.methods" :key="method.label" :value="method">{{ method.label }}</option>
</select>
</div>
<div class="form-group input-group" :class="{ 'extended': state.selectedMethod?.extendedInput }">
<div v-if="state.selectedMethod" class="form-group input-group" :class="{ 'extended': state.selectedMethod.extendedInput }">
<template v-for="(_input, i) of state.selectedMethod.inputs" :key="i">
<label for="field">{{ state.selectedMethod.inputs[i] }}</label>
<div>
<textarea
v-if="state.selectedMethod?.extendedInput"
v-model="state.selectedMethod.models[i]"
class="extended-input"
@input="autoGrow($event.target)"
></textarea>
<input
v-else
type="text"
v-model="state.selectedMethod.models[i]"
/>
<div v-if="state.selectedMethod.error" class="text-error">{{ state.selectedMethod.error }}</div>
<div class="input-with-remove">
<textarea
v-if="state.selectedMethod.extendedInput"
v-model="state.selectedMethod.models[i]"
class="extended-input"
@input="(e) => autoGrow(e.target as HTMLTextAreaElement)"
></textarea>
<input
v-else
type="text"
v-model="state.selectedMethod.models[i]"
/>
<button
v-if="state.selectedMethod.dynamicInputs && !state.selectedMethod.inputs[i].length"
style="background: transparent"
class="remove-input-button"
@click="() => removeMethodInput(i)"
title="Remove input"
>
×
</button>
</div>
</div>
</template>
<div v-if="state.selectedMethod.error" class="text-error">{{ state.selectedMethod.error }}</div>
<div v-if="state.selectedMethod?.dynamicInputs" class="add-input-container">
<button class="flat-rounded-button" @click="addMethodInput">Add Parameter</button>
</div>
</div>
</div>
<div>
<button type="submit" class="gradient-button" @click="() => executeMethod(state.selectedMethod?.callback(state.primitive, state.selectedMethod.models))">Execute Method</button>
<button type="submit" class="gradient-button" @click="() => executeMethod(() => state.selectedMethod?.callback(state.primitive!, state.selectedMethod.models))">Execute Method</button>
</div>
<!-- Result -->
<div>
<div v-if="state.selectedMethod">
<div class="output-box-container">
<LabelledSection label="Result" :content="state.selectedMethod.result" />
<CopyButton :content="state.selectedMethod.result" />
<LabelledSection label="Result" :content="state.selectedMethod.result || ''" />
<CopyButton :content="state.selectedMethod.result || ''" />
</div>
</div>
</template>
@@ -134,6 +148,9 @@ export interface Method<Primitive> {
// Error (if one occurred).
error?: string;
// Whether the number of inputs is dynamic.
dynamicInputs?: boolean;
// Function that takes the models and returns the primitive
callback: (primitive: Primitive, value: Array<any>) => string | Promise<string>;
@@ -191,7 +208,7 @@ async function setPrimitive(functionToExecute: () => Primitive | Promise<Primiti
state.value.error = undefined;
state.value.toFunctions.forEach(async (wrappedMethod, i) => {
state.value.toFunctions[i].result = await wrappedMethod.callback(state.value.primitive)
state.value.toFunctions[i].result = await wrappedMethod.callback(state.value.primitive!)
});
state.value.methods.forEach((method, i) => {
@@ -218,14 +235,20 @@ function getPrimitive(functionToExecute: () => string): string {
}
}
async function executeMethod(wrappedMethod: () => string | Promise<string>): Promise<void | string> {
async function executeMethod(wrappedMethod: () => string | Promise<string> | undefined): Promise<void | string> {
if(!wrappedMethod || !state.value.selectedMethod) {
return;
}
try {
if(!state.value.primitive) {
return '';
}
state.value.selectedMethod.result = await wrappedMethod;
const result = await wrappedMethod();
// Update the result directly on the selected method
state.value.selectedMethod.result = result;
state.value.selectedMethod.error = undefined;
} catch(error: any) {
state.value.selectedMethod.error = error.message;
@@ -234,10 +257,29 @@ async function executeMethod(wrappedMethod: () => string | Promise<string>): Pro
}
};
async function addMethodInput() {
if(!state.value.selectedMethod) {
return;
}
state.value.selectedMethod.models.push('');
state.value.selectedMethod.inputs.push('');
}
async function removeMethodInput(index: number) {
if(!state.value.selectedMethod) {
return;
}
state.value.selectedMethod.models.splice(index, 1);
state.value.selectedMethod.inputs.splice(index, 1);
}
// Select the first "from" function.
state.value.selectedFromFunction = state.value.fromFunctions[0];
const autoGrow = (element: HTMLTextAreaElement) => {
const autoGrow = (element: HTMLTextAreaElement | null) => {
if (!element) return;
element.style.height = 'auto'
element.style.height = `${Math.min(element.scrollHeight, 300)}px`
}
packages/docs/src/.vitepress/theme/tools.css
+39 -1
View File
@@ -49,7 +49,7 @@
.form-group select,
.form-group input,
.form-group button {
.form-group button:not(.remove-input-button) {
width: 100%; /* Makes fields responsive */
padding: 10px;
font-size: 1rem;
@@ -133,6 +133,44 @@
background: var(--primary);
}
.add-input-container >button.flat-rounded-button {
border-radius: 100px;
cursor: pointer;
text-transform: uppercase;
border: none;
padding: 10px 20px;
width: auto;
font-size: 0.85rem;
font-weight: bold;
background: transparent;
}
.add-input-container > button.flat-rounded-button:hover {
background: var(--vp-c-divider); /* Super light grey */
}
.add-input-container {
display: flex;
justify-content: center;
padding-top: 10px;
}
.input-with-remove {
position: relative;
display: flex;
align-items: center;
}
.remove-input-button {
position: absolute;
right: 8px;
font-size: 20px;
}
.remove-input-button:hover {
color: #f46666;
}
/* Mobile responsiveness */
@media (max-width: 768px) {
.select-group {
packages/docs/src/tools/stack/blockchain-functions.ts
+67 -4
View File
@@ -3,6 +3,7 @@ import {
encodeExtendedJson,
Transaction,
} from '@xocash/stack';
import { ref } from 'vue';
export const electrumClient = {
from: [
@@ -19,6 +20,7 @@ export const electrumClient = {
application: 'XO-tools',
},
});
await electrum.start();
return electrum;
},
@@ -26,10 +28,32 @@ export const electrumClient = {
],
to: [],
methods: [
{
label: 'Request',
inputs: ['Method', 'Parameters'],
dynamicInputs: true,
models: ['', ''],
callback: async (
electrum: BlockchainElectrum,
args: [string, string],
) => {
const [method, ...parameters] = args;
// If the first parameter is empty, don't include it in the request
// This parameter can not be removed in the UI so we handle a blank parameter gracefully
// Since other parameters can be removed, we assume that blank parameters are intentional and so we include them as part of the request
if (!parameters[0] && parameters.length === 1) {
parameters.shift();
}
const response = await electrum.request(method, ...parameters);
return encodeExtendedJson(response, 2);
},
},
{
label: 'Fetch Unspents',
inputs: ['Address'],
models: ['Address'],
models: [''],
callback: async (electrum: BlockchainElectrum, args: [string]) => {
const unspents = await electrum.fetchUnspents(args[0]);
return encodeExtendedJson(unspents.toArray(), 2);
@@ -38,7 +62,7 @@ export const electrumClient = {
{
label: 'Fetch Transaction',
inputs: ['Transaction Hash'],
models: ['Transaction Hash'],
models: [''],
callback: async (electrum: BlockchainElectrum, args: [string]) => {
const transaction = await electrum.fetchTransaction(args[0]);
return encodeExtendedJson(transaction, 2);
@@ -47,7 +71,7 @@ export const electrumClient = {
{
label: 'Fetch Address History',
inputs: ['Address'],
models: ['Address'],
models: [''],
callback: async (electrum: BlockchainElectrum, args: [string]) => {
const transactions = await electrum.fetchAddressHistory(args[0]);
return encodeExtendedJson(transactions.toArray(), 2);
@@ -56,11 +80,50 @@ export const electrumClient = {
{
label: 'Broadcast Transaction',
inputs: ['Transaction'],
models: ['Transaction'],
models: [''],
callback: async (electrum: BlockchainElectrum, args: [string]) => {
const tx = Transaction.from(args[0]);
return await electrum.broadcastTransaction(tx);
},
},
{
label: 'Subscribe Address',
inputs: ['Address'],
models: [''],
callback: async (electrum: BlockchainElectrum, args: [string]) => {
// Use a vue ref so we can update the UI dynamically.
const addressEvents = ref<string>('');
await electrum.subscribeAddress(args[0], (status) => {
// Don't update if its null
if (!status) {
return;
}
addressEvents.value += `${status}\n`;
});
return addressEvents;
},
},
{
label: 'Subscribe Transaction',
inputs: ['Transaction Hash'],
models: [''],
callback: async (electrum: BlockchainElectrum, args: [string]) => {
const transactionEvents = ref<string>('');
await electrum.subscribeTransaction(args[0], (transaction) => {
// Don't update if its null
if (!transaction) {
return;
}
transactionEvents.value += `${transaction}\n`;
});
return transactionEvents;
},
},
],
};
packages/docs/src/tools/stack/blockchain.md
+2 -1
View File
@@ -27,4 +27,5 @@ import {
:toFunctions="electrumClient.to"
:methods="electrumClient.methods"
/>
</div>
</div>