feat: add predefined relay list

plus code format
This commit is contained in:
Vlad Stan 2023-06-22 17:26:47 +03:00
parent defb9b8963
commit 64426d187c

View file

@ -6,18 +6,18 @@
<q-form @submit="addRelay">
<div class="row q-pa-md">
<div class="col-9">
<q-input
outlined
v-model="relayToAdd"
dense
filled
label="Relay URL"
></q-input>
<q-input outlined v-model="relayToAdd" dense filled label="Relay URL"></q-input>
</div>
<div class="col-3">
<q-btn unelevated color="primary" class="float-right" type="submit"
>Add relay
</q-btn>
<q-btn-dropdown unelevated split color="primary" class="float-right" type="submit" label="Add Relay">
<q-item v-for="relay in predefinedRelays" :key="relay" @click="addCustomRelay(relay)" clickable
v-close-popup>
<q-item-section>
<q-item-label><span v-text="relay"></span></q-item-label>
</q-item-section>
</q-item>
</q-btn-dropdown>
</div>
</div>
</q-form>
@ -29,36 +29,18 @@
<h5 class="text-subtitle1 q-my-none">Nostrclient</h5>
</div>
<div class="col-auto">
<q-input
borderless
dense
debounce="300"
v-model="filter"
placeholder="Search"
>
<q-input borderless dense debounce="300" v-model="filter" placeholder="Search">
<template v-slot:append>
<q-icon name="search"></q-icon>
</template>
</q-input>
</div>
</div>
<q-table
flat
dense
:data="nostrrelayLinks"
row-key="id"
:columns="relayTable.columns"
:pagination.sync="relayTable.pagination"
:filter="filter"
>
<q-table flat dense :data="nostrrelayLinks" row-key="id" :columns="relayTable.columns"
:pagination.sync="relayTable.pagination" :filter="filter">
<template v-slot:header="props">
<q-tr :props="props">
<q-th
v-for="col in props.cols"
:key="col.name"
:props="props"
auto-width
>
<q-th v-for="col in props.cols" :key="col.name" :props="props" auto-width>
<div v-if="col.name == 'id'"></div>
<div v-else>{{ col.label }}</div>
</q-th>
@ -67,12 +49,7 @@
<template v-slot:body="props">
<q-tr :props="props">
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
auto-width
>
<q-td v-for="col in props.cols" :key="col.name" :props="props" auto-width>
<div v-if="col.name == 'id'"></div>
<div v-else>
<div v-if="col.value == true" style="background-color: green">
@ -82,14 +59,7 @@
</div>
</q-td>
<q-td auto-width>
<q-btn
flat
dense
size="xs"
@click="deleteRelay(props.row.url)"
icon="cancel"
color="pink"
></q-btn>
<q-btn flat dense size="xs" @click="deleteRelay(props.row.url)" icon="cancel" color="pink"></q-btn>
</q-td>
</q-tr>
</template>
@ -101,32 +71,15 @@
<div class="row">
<div class="col">
<div class="text-weight-bold">
<q-btn
flat
dense
size="0.6rem"
class="q-px-none q-mx-none"
color="grey"
icon="content_copy"
@click="copyText(`wss://${host}/nostrclient/api/v1/relay`)"
><q-tooltip>Copy address</q-tooltip></q-btn
>
<q-btn flat dense size="0.6rem" class="q-px-none q-mx-none" color="grey" icon="content_copy"
@click="copyText(`wss://${host}/nostrclient/api/v1/relay`)"><q-tooltip>Copy address</q-tooltip></q-btn>
Your endpoint:
<q-badge
outline
class="q-ml-sm text-subtitle2"
:label="`wss://${host}/nostrclient/api/v1/relay`"
/>
<q-badge outline class="q-ml-sm text-subtitle2" :label="`wss://${host}/nostrclient/api/v1/relay`" />
</div>
</div>
</div>
</q-card-section>
<q-expansion-item
group="advanced"
icon="settings"
label="Test this endpoint"
@click="toggleTestPanel"
>
<q-expansion-item group="advanced" icon="settings" label="Test this endpoint" @click="toggleTestPanel">
<q-separator></q-separator>
<q-card-section>
<div class="row">
@ -134,13 +87,8 @@
<span>Sender Private Key:</span>
</div>
<div class="col-9">
<q-input
outlined
v-model="testData.senderPrivateKey"
dense
filled
label="Private Key (optional)"
></q-input>
<q-input outlined v-model="testData.senderPrivateKey" dense filled
label="Private Key (optional)"></q-input>
</div>
</div>
<div class="row q-mt-sm q-mb-lg">
@ -149,8 +97,7 @@
<q-badge color="yellow" text-color="black">
<span>
No not use your real private key! Leave empty for a randomly
generated key.</span
>
generated key.</span>
</q-badge>
</div>
</div>
@ -159,13 +106,7 @@
<span>Sender Public Key:</span>
</div>
<div class="col-9">
<q-input
outlined
v-model="testData.senderPublicKey"
dense
readonly
filled
></q-input>
<q-input outlined v-model="testData.senderPublicKey" dense readonly filled></q-input>
</div>
</div>
<div class="row q-mt-md">
@ -173,15 +114,8 @@
<span>Test Message:</span>
</div>
<div class="col-9">
<q-input
outlined
v-model="testData.message"
dense
filled
rows="3"
type="textarea"
label="Test Message *"
></q-input>
<q-input outlined v-model="testData.message" dense filled rows="3" type="textarea"
label="Test Message *"></q-input>
</div>
</div>
<div class="row q-mt-md">
@ -189,35 +123,22 @@
<span>Receiver Public Key:</span>
</div>
<div class="col-9">
<q-input
outlined
v-model="testData.recieverPublicKey"
dense
filled
label="Public Key (hex or npub) *"
></q-input>
<q-input outlined v-model="testData.recieverPublicKey" dense filled
label="Public Key (hex or npub) *"></q-input>
</div>
</div>
<div class="row q-mt-sm q-mb-lg">
<div class="col-3"></div>
<div class="col-9">
<q-badge color="yellow" text-color="black">
<span
>This is the recipient of the message. Field required.</span
>
<span>This is the recipient of the message. Field required.</span>
</q-badge>
</div>
</div>
<div class="row">
<div class="col-12">
<q-btn
:disabled="!testData.recieverPublicKey || !testData.message"
@click="sendTestMessage"
unelevated
color="primary"
class="float-right"
>Send Message</q-btn
>
<q-btn :disabled="!testData.recieverPublicKey || !testData.message" @click="sendTestMessage" unelevated
color="primary" class="float-right">Send Message</q-btn>
</div>
</div>
</q-card-section>
@ -229,14 +150,7 @@
<span>Sent Data:</span>
</div>
<div class="col-9">
<q-input
outlined
v-model="testData.sentData"
dense
filled
rows="5"
type="textarea"
></q-input>
<q-input outlined v-model="testData.sentData" dense filled rows="5" type="textarea"></q-input>
</div>
</div>
<div class="row q-mt-md">
@ -244,14 +158,7 @@
<span>Received Data:</span>
</div>
<div class="col-9">
<q-input
outlined
v-model="testData.receivedData"
dense
filled
rows="5"
type="textarea"
></q-input>
<q-input outlined v-model="testData.receivedData" dense filled rows="5" type="textarea"></q-input>
</div>
</div>
</q-card-section>
@ -270,12 +177,8 @@
</p>
<p>
<q-badge
outline
class="q-ml-sm text-subtitle2"
color="primary"
:label="`wss://${host}/nostrclient/api/v1/relay`"
/>
<q-badge outline class="q-ml-sm text-subtitle2" color="primary"
:label="`wss://${host}/nostrclient/api/v1/relay`" />
</p>
Only Admin users can manage this extension.
<q-card-section></q-card-section>
@ -356,7 +259,15 @@
pagination: {
rowsPerPage: 10
}
}
},
predefinedRelays: [
"wss://relay.damus.io",
"wss://nostr-pub.wellorder.net",
"wss://nostr.zebedee.cloud",
"wss://nodestr.fmt.wiz.biz",
"wss://nostr.oxtr.dev",
"wss://nostr.wine"
],
}
},
methods: {
@ -399,7 +310,7 @@
'POST',
'/nostrclient/api/v1/relay?usr=' + this.g.user.id,
this.g.user.wallets[0].adminkey,
{url: this.relayToAdd}
{ url: this.relayToAdd }
)
.then(function (response) {
console.log('response:', response)
@ -414,6 +325,10 @@
})
return false
},
async addCustomRelay(relayUrl) {
this.relayToAdd = relayUrl
await this.addRelay()
},
deleteRelay(url) {
console.log('DELETE RELAY ' + url)
LNbits.api
@ -421,7 +336,7 @@
'DELETE',
'/nostrclient/api/v1/relay?usr=' + this.g.user.id,
this.g.user.wallets[0].adminkey,
{url: url}
{ url: url }
)
.then(function (response) {
if (response.data) {
@ -469,7 +384,7 @@
},
sendTestMessage: async function () {
try {
const {data} = await LNbits.api.request(
const { data } = await LNbits.api.request(
'PUT',
'/nostrclient/api/v1/relay/test?usr=' + this.g.user.id,
this.g.user.wallets[0].adminkey,
@ -490,7 +405,7 @@
const subscription = JSON.stringify([
'REQ',
'test-dms',
{kinds: [4], '#p': [event.pubkey]}
{ kinds: [4], '#p': [event.pubkey] }
])
this.testData.wsConnection.send(subscription)
} catch (error) {
@ -555,4 +470,4 @@
}
})
</script>
{% endblock %}
{% endblock %}