Add a banner header (props to JoshuaM) (#41)
* add banner header * init naddr * add type to place order content obj * add content to config * naddr working, still WIP * add banner and UI customization * add banner header * init naddr * add type to place order content obj * add content to config * naddr working, still WIP * add banner and UI customization * add market name to stall page breadcrumbs * Add usage description to readme
This commit is contained in:
Tiago Vasconcelos
GitHub
parent
80bb57c537
commit
d2ff0b8f64
7 changed files with 360 additions and 359 deletions
22
README.md
22
README.md
|
|
@ -96,6 +96,28 @@ or by visiting `https://<LNbits instance URL>/nostrmarket/market`
|
|||
Make sure to add your `merchant` public key to the list:
|
||||
|
||||
|
||||
### Styling
|
||||
In order to create a customized Marketplace, we use `naddr` as defined in [NIP-19](https://github.com/nostr-protocol/nips/blob/master/19.md#shareable-identifiers-with-extra-metadata). You must create an event (kind: `30019`) that has all the custom properties, including merchants and relays, of your marketplace. Start by going to the marketplace page:
|
||||
|
||||
|
||||
You'll need to Login, and head over to *Marketplace Info*. Optionally import some merchants and relays, that will be included in the event. Click on *Edit* and fill out your marketplace custom info:
|
||||
|
||||
|
||||
Fill in the optional fields:
|
||||
- Add a name to the Marketplace
|
||||
- Add a small description
|
||||
- Add a logo image URL
|
||||
- Add a banner image URL (max height: 250px)
|
||||
- Choose a theme
|
||||
|
||||
By clicking *Publish*, a `kind: 30019` event will be sent to the defined relays containing all the information about your custom Marketplace. On the left drawer, a button with *Copy Naddr* will show up.
|
||||
|
||||
|
||||
You can then share your Marketplace, with the merchants and relays, banner, and style by using that Nostr identifier. The URL for the marketplace will be for example: `https://legend.lnbits.com/nostrmarket/market?naddr=naddr1qqfy6ctjddjhgurvv93k....`, you need to include the URL parameter `naddr=<your naddr>`. When a user visits that URL, the client will get the `30019` event and configure the Marketplace to what you defined. In the example bellow, a couple of merchants, relays, `autumn` theme, name (*Veggies Market*) and a header banner:
|
||||
|
||||
|
||||
The nostr event is a replaceable event, so you can change it to what you like and publish a new one to replace a previous one. For example adding a new merchant, or remove, change theme, add more relays,e tc...
|
||||
|
||||
|
||||
## Troubleshoot
|
||||
### Check communication with Nostr
|
||||
|
|
|
|||
|
|
@ -22,44 +22,27 @@
|
|||
</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<q-input
|
||||
class="q-ml-md"
|
||||
standout
|
||||
square
|
||||
dense
|
||||
outlined
|
||||
clearable
|
||||
v-model.trim="search"
|
||||
label="Search products"
|
||||
@keydown.enter="searchProducts"
|
||||
hint="Enter search terms separated by spaces"
|
||||
>
|
||||
<q-input class="q-ml-md" standout square dense outlined clearable v-model.trim="search"
|
||||
label="Search products" @keydown.enter="searchProducts" hint="Enter search terms separated by spaces">
|
||||
<template v-slot:after>
|
||||
<q-btn
|
||||
dense
|
||||
flat
|
||||
icon="search"
|
||||
label="Search"
|
||||
@click="searchProducts"
|
||||
/>
|
||||
<q-btn dense flat icon="search" label="Search" @click="searchProducts" />
|
||||
</template>
|
||||
</q-input>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
<q-banner v-if="styles?.ui?.banner" class="row q-pa-none q-mb-md">
|
||||
<q-img :src="styles.ui.banner" style="width: 100%; height: 250px" cover></q-img>
|
||||
</q-banner>
|
||||
<q-toolbar>
|
||||
<q-breadcrumbs>
|
||||
<q-breadcrumbs-el label="Market" icon="home"></q-breadcrumbs-el>
|
||||
<q-breadcrumbs-el :label="styles.name ?? 'Market'" icon="home"></q-breadcrumbs-el>
|
||||
</q-breadcrumbs>
|
||||
</q-toolbar>
|
||||
<div class="row q-col-gutter-md">
|
||||
<div
|
||||
class="col-xs-12 col-sm-6 col-md-4 col-lg-3"
|
||||
v-for="(item, idx) in products"
|
||||
:key="idx"
|
||||
>
|
||||
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3" v-for="(item, idx) in products" :key="idx">
|
||||
<product-card :product="item" @change-page="changePageM"></product-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -10,7 +10,8 @@ async function customerMarket(path) {
|
|||
'search-nostr',
|
||||
'relays',
|
||||
'update-products',
|
||||
'update-stalls'
|
||||
'update-stalls',
|
||||
'styles'
|
||||
],
|
||||
data: function () {
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -1,79 +1,35 @@
|
|||
<div>
|
||||
<q-toolbar>
|
||||
<q-breadcrumbs class="cursor">
|
||||
<q-breadcrumbs-el
|
||||
label="Market"
|
||||
icon="home"
|
||||
@click="$emit('change-page', 'market')"
|
||||
style="cursor: pointer"
|
||||
></q-breadcrumbs-el>
|
||||
<q-breadcrumbs-el
|
||||
:label="stall?.name || 'Stall'"
|
||||
icon="widgets"
|
||||
></q-breadcrumbs-el>
|
||||
<q-breadcrumbs-el :label="styles.name ?? 'Market'" icon="home" @click="$emit('change-page', 'market')"
|
||||
style="cursor: pointer"></q-breadcrumbs-el>
|
||||
<q-breadcrumbs-el :label="stall?.name || 'Stall'" icon="widgets"></q-breadcrumbs-el>
|
||||
</q-breadcrumbs>
|
||||
<q-toolbar-title></q-toolbar-title>
|
||||
<chat-dialog
|
||||
v-if="this.customerPrivkey || this.customerUseExtension"
|
||||
:account="account ? account : dropIn"
|
||||
:merchant="stall.pubkey"
|
||||
:relays="relays"
|
||||
:pool="pool"
|
||||
/>
|
||||
<shopping-cart
|
||||
:cart="cart"
|
||||
:cart-menu="cartMenu"
|
||||
:products="stallProducts"
|
||||
@add-to-cart="addToCart"
|
||||
@remove-from-cart="removeFromCart"
|
||||
@update-qty="updateQty"
|
||||
@reset-cart="resetCart"
|
||||
@open-checkout="openCheckout"
|
||||
></shopping-cart>
|
||||
<chat-dialog v-if="this.customerPrivkey || this.customerUseExtension" :account="account ? account : dropIn"
|
||||
:merchant="stall.pubkey" :relays="relays" :pool="pool" />
|
||||
<shopping-cart :cart="cart" :cart-menu="cartMenu" :products="stallProducts" @add-to-cart="addToCart"
|
||||
@remove-from-cart="removeFromCart" @update-qty="updateQty" @reset-cart="resetCart"
|
||||
@open-checkout="openCheckout"></shopping-cart>
|
||||
</q-toolbar>
|
||||
<div class="row">
|
||||
<product-detail
|
||||
class="col-12"
|
||||
v-if="productDetail && product"
|
||||
:product="product"
|
||||
@add-to-cart="addToCart"
|
||||
></product-detail>
|
||||
<product-detail class="col-12" v-if="productDetail && product" :product="product"
|
||||
@add-to-cart="addToCart"></product-detail>
|
||||
<div class="col-12 q-my-lg">
|
||||
<q-separator></q-separator>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row q-col-gutter-md">
|
||||
<div
|
||||
class="col-xs-12 col-sm-6 col-md-4 col-lg-3"
|
||||
v-for="(item, idx) in products"
|
||||
:key="idx"
|
||||
>
|
||||
<product-card
|
||||
:product="item"
|
||||
@change-page="changePageS"
|
||||
@add-to-cart="addToCart"
|
||||
:is-stall="true"
|
||||
></product-card>
|
||||
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3" v-for="(item, idx) in products" :key="idx">
|
||||
<product-card :product="item" @change-page="changePageS" @add-to-cart="addToCart" :is-stall="true"></product-card>
|
||||
</div>
|
||||
</div>
|
||||
<!-- BEGIN CHECKOUT DIALOG -->
|
||||
<q-dialog v-model="checkoutDialog.show" position="top">
|
||||
<q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
|
||||
<q-form @submit="placeOrder" class="q-gutter-md">
|
||||
<q-input
|
||||
filled
|
||||
dense
|
||||
v-model.trim="checkoutDialog.data.username"
|
||||
label="Name (optional)"
|
||||
></q-input>
|
||||
<q-expansion-item
|
||||
v-if="!account"
|
||||
dense
|
||||
dense-toggle
|
||||
expand-separator
|
||||
icon="person_off"
|
||||
label="Not logged in?"
|
||||
>
|
||||
<q-input filled dense v-model.trim="checkoutDialog.data.username" label="Name (optional)"></q-input>
|
||||
<q-expansion-item v-if="!account" dense dense-toggle expand-separator icon="person_off" label="Not logged in?">
|
||||
<q-card>
|
||||
<q-card-section>
|
||||
It seems you haven't logged in. You can:
|
||||
|
|
@ -91,131 +47,53 @@
|
|||
</ol>
|
||||
</q-card-section>
|
||||
<q-card-actions align="right">
|
||||
<q-btn
|
||||
v-if="hasNip07"
|
||||
unelevated
|
||||
@click="getFromExtension"
|
||||
color="primary"
|
||||
label="Get from Extension"
|
||||
><q-tooltip>Use a Nostr browser extension</q-tooltip></q-btn
|
||||
>
|
||||
<q-btn
|
||||
v-if="!this.account && !this.customerPubkey && !this.customerPrivkey"
|
||||
unelevated
|
||||
@click="makeLogin"
|
||||
color="primary"
|
||||
label="Login"
|
||||
></q-btn>
|
||||
<q-btn v-if="hasNip07" unelevated @click="getFromExtension" color="primary"
|
||||
label="Get from Extension"><q-tooltip>Use a Nostr browser extension</q-tooltip></q-btn>
|
||||
<q-btn v-if="!this.account && !this.customerPubkey && !this.customerPrivkey" unelevated @click="makeLogin"
|
||||
color="primary" label="Login"></q-btn>
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</q-expansion-item>
|
||||
<q-input
|
||||
filled
|
||||
dense
|
||||
:readonly="Boolean(customerPubkey)"
|
||||
v-model.trim="checkoutDialog.data.pubkey"
|
||||
label="Public key"
|
||||
hint="Enter your public key"
|
||||
>
|
||||
<q-input filled dense :readonly="Boolean(customerPubkey)" v-model.trim="checkoutDialog.data.pubkey"
|
||||
label="Public key" hint="Enter your public key">
|
||||
</q-input>
|
||||
<q-input
|
||||
filled
|
||||
dense
|
||||
:readonly="Boolean(customerPrivkey)"
|
||||
:type="isPwd ? 'password' : 'text'"
|
||||
v-if="!customerUseExtension"
|
||||
v-model.trim="checkoutDialog.data.privkey"
|
||||
label="Private key (optional)"
|
||||
hint="Enter your private key"
|
||||
>
|
||||
<q-input filled dense :readonly="Boolean(customerPrivkey)" :type="isPwd ? 'password' : 'text'"
|
||||
v-if="!customerUseExtension" v-model.trim="checkoutDialog.data.privkey" label="Private key (optional)"
|
||||
hint="Enter your private key">
|
||||
<template v-slot:append>
|
||||
<q-icon
|
||||
:name="isPwd ? 'visibility_off' : 'visibility'"
|
||||
class="cursor-pointer"
|
||||
@click="isPwd = !isPwd"
|
||||
/>
|
||||
<q-icon :name="isPwd ? 'visibility_off' : 'visibility'" class="cursor-pointer" @click="isPwd = !isPwd" />
|
||||
</template>
|
||||
</q-input>
|
||||
<q-input
|
||||
filled
|
||||
dense
|
||||
v-model.trim="checkoutDialog.data.address"
|
||||
label="Address (optional)"
|
||||
hint="If ordering a physical product make sure to fill this"
|
||||
></q-input>
|
||||
<q-input
|
||||
v-model="checkoutDialog.data.email"
|
||||
filled
|
||||
dense
|
||||
type="email"
|
||||
label="Email (optional)"
|
||||
hint="Merchant may not use email"
|
||||
></q-input>
|
||||
<q-input
|
||||
v-model="checkoutDialog.data.message"
|
||||
filled
|
||||
dense
|
||||
type="text"
|
||||
label="Message (optional)"
|
||||
></q-input>
|
||||
<q-input filled dense v-model.trim="checkoutDialog.data.address" label="Address (optional)"
|
||||
hint="If ordering a physical product make sure to fill this"></q-input>
|
||||
<q-input v-model="checkoutDialog.data.email" filled dense type="email" label="Email (optional)"
|
||||
hint="Merchant may not use email"></q-input>
|
||||
<q-input v-model="checkoutDialog.data.message" filled dense type="text" label="Message (optional)"></q-input>
|
||||
<p>Select the shipping zone:</p>
|
||||
<div class="row q-mt-lg">
|
||||
<q-select
|
||||
style="min-width: 200px"
|
||||
filled
|
||||
dense
|
||||
stack-label
|
||||
v-model="checkoutDialog.data.shippingzone"
|
||||
emit-value
|
||||
map-options
|
||||
:options="stall.shipping.map(s => ({label: s.countries.toString(), value: s.id}))"
|
||||
label="Shipping Zone"
|
||||
/>
|
||||
<q-select style="min-width: 200px" filled dense stack-label v-model="checkoutDialog.data.shippingzone"
|
||||
emit-value map-options :options="stall.shipping.map(s => ({label: s.countries.toString(), value: s.id}))"
|
||||
label="Shipping Zone" />
|
||||
</div>
|
||||
<div class="row q-mt-lg">
|
||||
Total: {{ stall.currency != 'sat' ? getAmountFormated(finalCost,
|
||||
stall.currency) : finalCost + 'sats' }}
|
||||
</div>
|
||||
<div class="row q-mt-lg">
|
||||
<q-btn
|
||||
v-if="!customerUseExtension && !checkoutDialog.data.privkey"
|
||||
:loading="loading"
|
||||
unelevated
|
||||
color="primary"
|
||||
:disable="checkoutDialog.data.shippingzone == null
|
||||
|| checkoutDialog.data.pubkey == null"
|
||||
@click="downloadOrder"
|
||||
>Download Order</q-btn
|
||||
>
|
||||
<q-btn
|
||||
v-else
|
||||
:loading="loading"
|
||||
unelevated
|
||||
color="primary"
|
||||
:disable="checkoutDialog.data.shippingzone == null
|
||||
|| checkoutDialog.data.pubkey == null"
|
||||
type="submit"
|
||||
>Checkout</q-btn
|
||||
>
|
||||
<q-btn
|
||||
v-close-popup
|
||||
flat
|
||||
@click="checkoutDialog = {show: false, data: {pubkey: null}}"
|
||||
color="grey"
|
||||
class="q-ml-auto"
|
||||
>Cancel</q-btn
|
||||
>
|
||||
<q-btn v-if="!customerUseExtension && !checkoutDialog.data.privkey" :loading="loading" unelevated
|
||||
color="primary" :disable="checkoutDialog.data.shippingzone == null
|
||||
|| checkoutDialog.data.pubkey == null" @click="downloadOrder">Download Order</q-btn>
|
||||
<q-btn v-else :loading="loading" unelevated color="primary" :disable="checkoutDialog.data.shippingzone == null
|
||||
|| checkoutDialog.data.pubkey == null" type="submit">Checkout</q-btn>
|
||||
<q-btn v-close-popup flat @click="checkoutDialog = {show: false, data: {pubkey: null}}" color="grey"
|
||||
class="q-ml-auto">Cancel</q-btn>
|
||||
</div>
|
||||
</q-form>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
<!-- END CHECKOUT DIALOG -->
|
||||
<!-- INVOICE DIALOG -->
|
||||
<q-dialog
|
||||
v-model="qrCodeDialog.show"
|
||||
position="top"
|
||||
@hide="closeQrCodeDialog"
|
||||
>
|
||||
<q-dialog v-model="qrCodeDialog.show" position="top" @hide="closeQrCodeDialog">
|
||||
<q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
|
||||
<div class="text-center q-mb-lg">
|
||||
<div class="q-my-lg" v-if="qrCodeDialog.data.message">
|
||||
|
|
@ -223,12 +101,8 @@
|
|||
</div>
|
||||
<a v-else :href="'lightning:' + qrCodeDialog.data.payment_request">
|
||||
<q-responsive :ratio="1" class="q-mx-xl">
|
||||
<qrcode
|
||||
v-if="qrCodeDialog.data.payment_request"
|
||||
:value="qrCodeDialog.data.payment_request"
|
||||
:options="{width: 340}"
|
||||
class="rounded-borders"
|
||||
></qrcode>
|
||||
<qrcode v-if="qrCodeDialog.data.payment_request" :value="qrCodeDialog.data.payment_request"
|
||||
:options="{width: 340}" class="rounded-borders"></qrcode>
|
||||
</q-responsive>
|
||||
</a>
|
||||
<q-inner-loading :showing="loading">
|
||||
|
|
@ -236,15 +110,8 @@
|
|||
</q-inner-loading>
|
||||
</div>
|
||||
<div class="row q-mt-lg">
|
||||
<q-btn
|
||||
outline
|
||||
color="grey"
|
||||
@click="copyText(qrCodeDialog.data.payment_request)"
|
||||
>Copy invoice</q-btn
|
||||
>
|
||||
<q-btn @click="closeQrCodeDialog" flat color="grey" class="q-ml-auto"
|
||||
>Close</q-btn
|
||||
>
|
||||
<q-btn outline color="grey" @click="copyText(qrCodeDialog.data.payment_request)">Copy invoice</q-btn>
|
||||
<q-btn @click="closeQrCodeDialog" flat color="grey" class="q-ml-auto">Close</q-btn>
|
||||
</div>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
|
|
@ -271,18 +138,12 @@
|
|||
|
||||
<q-card-section>
|
||||
<pre
|
||||
style="font-size: 0.65rem; overflow-x: auto"
|
||||
><code>{{JSON.stringify(downloadOrderDialog.data, null, 2)}}</code></pre>
|
||||
style="font-size: 0.65rem; overflow-x: auto"><code>{{JSON.stringify(downloadOrderDialog.data, null, 2)}}</code></pre>
|
||||
</q-card-section>
|
||||
<div class="row q-mt-lg">
|
||||
<q-btn
|
||||
outline
|
||||
color="primary"
|
||||
@click="copyText(JSON.stringify(downloadOrderDialog.data))"
|
||||
>Copy order</q-btn
|
||||
>
|
||||
<q-btn outline color="primary" @click="copyText(JSON.stringify(downloadOrderDialog.data))">Copy order</q-btn>
|
||||
<q-btn v-close-popup flat color="grey" class="q-ml-auto">Close</q-btn>
|
||||
</div>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -14,7 +14,8 @@ async function customerStall(path) {
|
|||
'product-detail',
|
||||
'change-page',
|
||||
'relays',
|
||||
'pool'
|
||||
'pool',
|
||||
'styles'
|
||||
],
|
||||
data: function () {
|
||||
return {
|
||||
|
|
@ -31,6 +32,7 @@ async function customerStall(path) {
|
|||
customerPrivkey: null,
|
||||
customerUseExtension: null,
|
||||
activeOrder: null,
|
||||
banner: null,
|
||||
checkoutDialog: {
|
||||
show: false,
|
||||
data: {
|
||||
|
|
@ -269,7 +271,8 @@ async function customerStall(path) {
|
|||
items: Array.from(this.cart.products, p => {
|
||||
return {product_id: p[0], quantity: p[1].quantity}
|
||||
}),
|
||||
shipping_id: orderData.shippingzone
|
||||
shipping_id: orderData.shippingzone,
|
||||
type: 0
|
||||
}
|
||||
let created_at = Math.floor(Date.now() / 1000)
|
||||
orderObj.id = await hash(
|
||||
|
|
@ -375,9 +378,8 @@ async function customerStall(path) {
|
|||
this.qrCodeDialog.data.message = json.message
|
||||
return cb()
|
||||
}
|
||||
let payment_request = json.payment_options.find(
|
||||
o => o.type == 'ln'
|
||||
).link
|
||||
let payment_request = json.payment_options.find(o => o.type == 'ln')
|
||||
.link
|
||||
if (!payment_request) return
|
||||
this.loading = false
|
||||
this.qrCodeDialog.data.payment_request = payment_request
|
||||
|
|
|
|||
|
|
@ -61,7 +61,21 @@ const market = async () => {
|
|||
activePage: 'market',
|
||||
activeStall: null,
|
||||
activeProduct: null,
|
||||
pool: null
|
||||
pool: null,
|
||||
config: null,
|
||||
configDialog: {
|
||||
show: false,
|
||||
data: {
|
||||
name: null,
|
||||
about: null,
|
||||
ui: {
|
||||
picture: null,
|
||||
banner: null,
|
||||
theme: null
|
||||
}
|
||||
}
|
||||
},
|
||||
naddr: null,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -103,11 +117,15 @@ const market = async () => {
|
|||
key = data
|
||||
}
|
||||
return key?.toLowerCase()?.match(/^[0-9a-f]{64}$/)
|
||||
},
|
||||
canEditConfig(){
|
||||
return this.account && this.account.pubkey == this.config?.pubkey
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
// Check for user stored
|
||||
this.account = this.$q.localStorage.getItem('diagonAlley.account') || null
|
||||
//console.log("UUID", crypto.randomUUID())
|
||||
|
||||
// Check for stored merchants and relays on localStorage
|
||||
try {
|
||||
|
|
@ -132,6 +150,23 @@ const market = async () => {
|
|||
let merchant_pubkey = params.get('merchant_pubkey')
|
||||
let stall_id = params.get('stall_id')
|
||||
let product_id = params.get('product_id')
|
||||
let naddr = params.get('naddr')
|
||||
|
||||
if(naddr) {
|
||||
try {
|
||||
let {type, data} = NostrTools.nip19.decode(naddr)
|
||||
if(type == 'naddr' && data.kind == '30019') { // just double check
|
||||
this.config = {
|
||||
d: data.identifier,
|
||||
pubkey: data.pubkey,
|
||||
relays: data.relays
|
||||
}
|
||||
}
|
||||
this.naddr = naddr
|
||||
}catch (err){
|
||||
console.error(err)
|
||||
}
|
||||
}
|
||||
|
||||
// What component to render on start
|
||||
if (stall_id) {
|
||||
|
|
@ -204,6 +239,79 @@ const market = async () => {
|
|||
openAccountDialog() {
|
||||
this.accountDialog.show = true
|
||||
},
|
||||
editConfigDialog(){
|
||||
if(this.canEditConfig && this.config?.opts){
|
||||
let {name, about, ui} = this.config.opts
|
||||
this.configDialog.data = {name, about, ui}
|
||||
this.configDialog.data.identifier = this.config?.d
|
||||
}
|
||||
this.openConfigDialog()
|
||||
},
|
||||
openConfigDialog() {
|
||||
if(!this.account){
|
||||
this.$q.notify({
|
||||
message: `You need to be logged in first.`,
|
||||
color: 'negative',
|
||||
icon: 'warning'
|
||||
})
|
||||
return
|
||||
}
|
||||
this.configDialog.show = true
|
||||
},
|
||||
async sendConfig() {
|
||||
let {name, about, ui} = this.configDialog.data
|
||||
let merchants = Array.from(this.pubkeys)
|
||||
let identifier = this.configDialog.data.identifier ?? crypto.randomUUID()
|
||||
let event = {
|
||||
...(await NostrTools.getBlankEvent()),
|
||||
kind: 30019,
|
||||
content: JSON.stringify({name, about, ui, merchants}),
|
||||
created_at: Math.floor(Date.now() / 1000),
|
||||
tags: [['d', identifier]],
|
||||
pubkey: this.account.pubkey
|
||||
}
|
||||
event.id = NostrTools.getEventHash(event)
|
||||
try {
|
||||
if(this.account.useExtension){
|
||||
event = await window.nostr.signEvent(event)
|
||||
}else if (this.account.privkey) {
|
||||
event.sig = await NostrTools.signEvent(event, this.account.privkey)
|
||||
}
|
||||
let pub = this.pool.publish(Array.from(this.relays), event)
|
||||
pub.on('ok', () => console.debug(`Config event was sent`))
|
||||
pub.on('failed', error => console.error(error))
|
||||
} catch (err) {
|
||||
console.error(err)
|
||||
this.$q.notify({
|
||||
message: `Error signing event.`,
|
||||
color: 'negative',
|
||||
icon: 'warning'
|
||||
})
|
||||
return
|
||||
}
|
||||
this.naddr = NostrTools.nip19.naddrEncode({
|
||||
pubkey: event.pubkey,
|
||||
kind: 30019,
|
||||
identifier: identifier,
|
||||
relays: Array.from(this.relays)
|
||||
})
|
||||
this.config = this.configDialog.data
|
||||
this.resetConfig()
|
||||
return
|
||||
},
|
||||
resetConfig() {
|
||||
this.configDialog = {show: false,
|
||||
identifier: null,
|
||||
data: {
|
||||
name: null,
|
||||
about: null,
|
||||
ui: {
|
||||
picture: null,
|
||||
banner: null,
|
||||
theme: null
|
||||
}
|
||||
}}
|
||||
},
|
||||
async updateData(events) {
|
||||
if (events.length < 1) {
|
||||
this.$q.notify({
|
||||
|
|
@ -254,6 +362,28 @@ const market = async () => {
|
|||
async initNostr() {
|
||||
this.$q.loading.show()
|
||||
const pool = new NostrTools.SimplePool()
|
||||
|
||||
// If there is an naddr in the URL, get it and parse content
|
||||
if (this.config) {
|
||||
// add relays to the set
|
||||
this.config.relays.forEach(r => this.relays.add(r))
|
||||
await pool.get(this.config.relays, {
|
||||
kinds: [30019],
|
||||
limit: 1,
|
||||
authors: [this.config.pubkey],
|
||||
'#d': [this.config.d]
|
||||
}).then(event => {
|
||||
if(!event) return
|
||||
let content = JSON.parse(event.content)
|
||||
this.config = {... this.config, opts: content}
|
||||
// add merchants
|
||||
this.config.opts?.merchants.forEach(m => this.pubkeys.add(m))
|
||||
// change theme
|
||||
let {theme} = this.config.opts?.ui
|
||||
theme && document.body.setAttribute('data-theme', theme)
|
||||
}).catch(err => console.error(err))
|
||||
}
|
||||
|
||||
let relays = Array.from(this.relays)
|
||||
|
||||
// Get metadata and market data from the pubkeys
|
||||
|
|
@ -323,6 +453,15 @@ const market = async () => {
|
|||
window.history.pushState({}, '', url)
|
||||
this.activePage = page
|
||||
},
|
||||
copyText: function (text) {
|
||||
var notify = this.$q.notify
|
||||
Quasar.utils.copyToClipboard(text).then(function () {
|
||||
notify({
|
||||
message: 'Copied to clipboard!',
|
||||
position: 'bottom'
|
||||
})
|
||||
})
|
||||
},
|
||||
getAmountFormated(amount, unit = 'USD') {
|
||||
return LNbits.utils.formatCurrency(amount, unit)
|
||||
},
|
||||
|
|
|
|||
|
|
@ -8,9 +8,7 @@
|
|||
<div>
|
||||
<div v-if="account" class="bg-transparent q-ma-md">
|
||||
<q-avatar size="56px" class="q-mb-sm">
|
||||
<img
|
||||
:src="accountMetadata?.picture || '/nostrmarket/static/images/blank-avatar.webp'"
|
||||
/>
|
||||
<img :src="accountMetadata?.picture || '/nostrmarket/static/images/blank-avatar.webp'" />
|
||||
</q-avatar>
|
||||
{%raw%}
|
||||
<div class="text-weight-bold">
|
||||
|
|
@ -20,43 +18,22 @@
|
|||
{{ accountMetadata.name }}
|
||||
</div>
|
||||
{%endraw%}
|
||||
<q-btn
|
||||
label="Delete data"
|
||||
class="q-mt-md"
|
||||
color="primary"
|
||||
@click="deleteAccount"
|
||||
><q-tooltip>Delete account data</q-tooltip></q-btn
|
||||
>
|
||||
<q-btn label="Delete data" class="q-mt-md" color="red" @click="deleteAccount"><q-tooltip>Delete account
|
||||
data</q-tooltip></q-btn>
|
||||
</div>
|
||||
<div v-else class="q-pa-md">
|
||||
<q-btn
|
||||
label="Login"
|
||||
class="q-mt-md"
|
||||
color="primary"
|
||||
@click="accountDialog.show = true"
|
||||
><q-tooltip>Login or Create account</q-tooltip></q-btn
|
||||
>
|
||||
<q-btn label="Login" class="q-mt-md" color="primary" @click="accountDialog.show = true"><q-tooltip>Login or
|
||||
Create account</q-tooltip></q-btn>
|
||||
</div>
|
||||
<q-separator></q-separator>
|
||||
</div>
|
||||
<div class="q-pa-md">
|
||||
<q-list padding>
|
||||
<q-expansion-item
|
||||
expand-separator
|
||||
icon="perm_identity"
|
||||
label="Merchants"
|
||||
caption="Add/Remove pubkeys"
|
||||
>
|
||||
<q-expansion-item expand-separator icon="perm_identity" label="Merchants" caption="Add/Remove pubkeys">
|
||||
<q-card>
|
||||
<q-card-section>
|
||||
<q-input
|
||||
filled
|
||||
v-model="inputPubkey"
|
||||
@keydown.enter="addPubkey(null)"
|
||||
type="text"
|
||||
label="Pubkey/Npub"
|
||||
hint="Add merchants"
|
||||
>
|
||||
<q-input filled v-model="inputPubkey" @keydown.enter="addPubkey(null)" type="text" label="Pubkey/Npub"
|
||||
hint="Add merchants">
|
||||
<q-btn @click="addPubkey(null)" dense flat icon="add"></q-btn>
|
||||
</q-input>
|
||||
<q-list class="q-mt-md">
|
||||
|
|
@ -64,37 +41,19 @@
|
|||
{%raw%}
|
||||
<q-item-section avatar>
|
||||
<q-avatar>
|
||||
<img
|
||||
v-if="profiles.get(pub) && profiles.get(pub)?.picture"
|
||||
:src="profiles.get(pub).picture"
|
||||
/>
|
||||
<img
|
||||
v-else
|
||||
src="/nostrmarket/static/images/blank-avatar.webp"
|
||||
/>
|
||||
<img v-if="profiles.get(pub) && profiles.get(pub)?.picture" :src="profiles.get(pub).picture" />
|
||||
<img v-else src="/nostrmarket/static/images/blank-avatar.webp" />
|
||||
</q-avatar>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label
|
||||
v-if="profiles.get(pub) && profiles.get(pub)?.name"
|
||||
>{{ profiles.get(pub).name }}</q-item-label
|
||||
>
|
||||
<q-item-label v-else
|
||||
>{{ `${pub.slice(0, 5)}...${pub.slice(-5)}`
|
||||
}}</q-item-label
|
||||
>
|
||||
<q-item-label v-if="profiles.get(pub) && profiles.get(pub)?.name">{{ profiles.get(pub).name
|
||||
}}</q-item-label>
|
||||
<q-item-label v-else>{{ `${pub.slice(0, 5)}...${pub.slice(-5)}`
|
||||
}}</q-item-label>
|
||||
<q-tooltip>{{ pub }}</q-tooltip>
|
||||
</q-item-section>
|
||||
<q-item-section side>
|
||||
<q-btn
|
||||
class="gt-xs"
|
||||
size="12px"
|
||||
flat
|
||||
dense
|
||||
round
|
||||
icon="delete"
|
||||
@click="removePubkey(pub)"
|
||||
/>
|
||||
<q-btn class="gt-xs" size="12px" flat dense round icon="delete" @click="removePubkey(pub)" />
|
||||
</q-item-section>
|
||||
{%endraw%}
|
||||
</q-item>
|
||||
|
|
@ -102,22 +61,11 @@
|
|||
</q-card-section>
|
||||
</q-card>
|
||||
</q-expansion-item>
|
||||
<q-expansion-item
|
||||
expand-separator
|
||||
icon="perm_identity"
|
||||
label="Relays"
|
||||
caption="Add/Remove relays"
|
||||
>
|
||||
<q-expansion-item expand-separator icon="perm_identity" label="Relays" caption="Add/Remove relays">
|
||||
<q-card>
|
||||
<q-card-section>
|
||||
<q-input
|
||||
filled
|
||||
v-model="inputRelay"
|
||||
@keydown.enter="addRelay"
|
||||
type="text"
|
||||
label="Relay URL"
|
||||
hint="Add relays"
|
||||
>
|
||||
<q-input filled v-model="inputRelay" @keydown.enter="addRelay" type="text" label="Relay URL"
|
||||
hint="Add relays">
|
||||
<q-btn @click="addRelay" dense flat icon="add"></q-btn>
|
||||
</q-input>
|
||||
<q-list dense class="q-mt-md">
|
||||
|
|
@ -127,15 +75,7 @@
|
|||
<q-item-label>{{ url }}</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section side>
|
||||
<q-btn
|
||||
class="gt-xs"
|
||||
size="12px"
|
||||
flat
|
||||
dense
|
||||
round
|
||||
icon="delete"
|
||||
@click="removeRelay(url)"
|
||||
/>
|
||||
<q-btn class="gt-xs" size="12px" flat dense round icon="delete" @click="removeRelay(url)" />
|
||||
</q-item-section>
|
||||
{%endraw%}
|
||||
</q-item>
|
||||
|
|
@ -143,6 +83,65 @@
|
|||
</q-card-section>
|
||||
</q-card>
|
||||
</q-expansion-item>
|
||||
<q-expansion-item expand-separator icon="perm_identity" label="Marketplace" caption="Marketplace info">
|
||||
<q-card>
|
||||
<q-card-section>
|
||||
<q-list class="q-mt-md">
|
||||
<q-item-label header>Information</q-item-label>
|
||||
<q-item>
|
||||
{%raw%}
|
||||
<q-item-section>
|
||||
<q-item-label>Marketplace name</q-item-label>
|
||||
<q-item-label caption>{{ config?.opts?.name }}</q-item-label>
|
||||
</q-item-section>
|
||||
{%endraw%}
|
||||
</q-item>
|
||||
<q-item>
|
||||
{%raw%}
|
||||
<q-item-section>
|
||||
<q-item-label>About the marketplace</q-item-label>
|
||||
<q-item-label caption>{{ config?.opts?.about }}</q-item-label>
|
||||
</q-item-section>
|
||||
{%endraw%}
|
||||
</q-item>
|
||||
<q-item-label header>UI Config</q-item-label>
|
||||
<q-item>
|
||||
{%raw%}
|
||||
<q-item-section>
|
||||
<q-item-label>Logo</q-item-label>
|
||||
<q-item-label caption>{{ config?.opts?.ui?.picture }}</q-item-label>
|
||||
</q-item-section>
|
||||
{%endraw%}
|
||||
</q-item>
|
||||
<q-item>
|
||||
{%raw%}
|
||||
<q-item-section>
|
||||
<q-item-label>Banner URL</q-item-label>
|
||||
<q-item-label caption>{{ config?.opts?.ui?.banner }}</q-item-label>
|
||||
</q-item-section>
|
||||
{%endraw%}
|
||||
</q-item>
|
||||
<q-item>
|
||||
{%raw%}
|
||||
<q-item-section>
|
||||
<q-item-label>Theme</q-item-label>
|
||||
<q-item-label caption>{{ config?.opts?.ui?.theme }}</q-item-label>
|
||||
</q-item-section>
|
||||
{%endraw%}
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-card-section>
|
||||
<q-card-actions class="q-mx-md" align="right">
|
||||
<q-btn v-if="naddr" label="Naddr" class="q-mt-md" color="primary" @click="copyText(naddr)"><q-tooltip>Copy
|
||||
the
|
||||
naddr for this configuration</q-tooltip></q-btn>
|
||||
<q-btn v-if="naddr && canEditConfig" label="Edit" class="q-mt-md" color="primary"
|
||||
@click="editConfigDialog"><q-tooltip>Edit configuration</q-tooltip></q-btn>
|
||||
<q-btn label="New" class="q-mt-md" color="primary" @click="openConfigDialog"><q-tooltip>Create a new
|
||||
configuration</q-tooltip></q-btn>
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</q-expansion-item>
|
||||
</q-list>
|
||||
</div>
|
||||
</q-drawer>
|
||||
|
|
@ -157,24 +156,10 @@
|
|||
</q-toolbar-title>
|
||||
{%endraw%}
|
||||
<q-space></q-space>
|
||||
<q-btn
|
||||
v-if="!activeStall"
|
||||
color="primary"
|
||||
label="Search"
|
||||
icon="travel_explore"
|
||||
@click="searchNostr = !searchNostr"
|
||||
><q-tooltip>Search for products on Nostr</q-tooltip></q-btn
|
||||
>
|
||||
<q-input
|
||||
class="q-ml-md"
|
||||
standout
|
||||
square
|
||||
dense
|
||||
outlined
|
||||
clearable
|
||||
v-model.trim="searchText"
|
||||
label="Filter products"
|
||||
>
|
||||
<q-btn v-if="!activeStall" color="primary" label="Search" icon="travel_explore"
|
||||
@click="searchNostr = !searchNostr"><q-tooltip>Search for products on Nostr</q-tooltip></q-btn>
|
||||
<q-input class="q-ml-md" standout square dense outlined clearable v-model.trim="searchText"
|
||||
label="Filter products">
|
||||
<template v-slot:append>
|
||||
<q-icon v-if="!searchText" name="search" />
|
||||
</template>
|
||||
|
|
@ -182,26 +167,12 @@
|
|||
</q-toolbar>
|
||||
</div>
|
||||
</div>
|
||||
<customer-stall
|
||||
v-if="!isLoading && activeStall"
|
||||
:stall="stalls.find(stall => stall.id == activeStall)"
|
||||
:products="filterProducts"
|
||||
:stall-products="products.filter(p => p.stall_id == activeStall)"
|
||||
:product-detail="activeProduct"
|
||||
:relays="relays"
|
||||
:account="account"
|
||||
:pool="pool"
|
||||
@login-dialog="openAccountDialog"
|
||||
@change-page="navigateTo"
|
||||
></customer-stall>
|
||||
<customer-market
|
||||
v-else
|
||||
:search-nostr="searchNostr"
|
||||
:relays="relays"
|
||||
:products="filterProducts"
|
||||
@change-page="navigateTo"
|
||||
@update-data="updateData"
|
||||
></customer-market>
|
||||
<customer-stall v-if="!isLoading && activeStall" :stall="stalls.find(stall => stall.id == activeStall)"
|
||||
:products="filterProducts" :stall-products="products.filter(p => p.stall_id == activeStall)"
|
||||
:product-detail="activeProduct" :relays="relays" :account="account" :pool="pool" :styles="config?.opts ?? {}"
|
||||
@login-dialog="openAccountDialog" @change-page="navigateTo"></customer-stall>
|
||||
<customer-market v-else :search-nostr="searchNostr" :relays="relays" :products="filterProducts"
|
||||
:styles="config?.opts ?? {}" @change-page="navigateTo" @update-data="updateData"></customer-market>
|
||||
</q-page-container>
|
||||
<!-- ACCOUNT DIALOG -->
|
||||
<q-dialog v-model="accountDialog.show" persistent>
|
||||
|
|
@ -217,15 +188,9 @@
|
|||
</q-card-section>
|
||||
|
||||
<q-card-section class="q-pt-none">
|
||||
<q-input
|
||||
dense
|
||||
label="nsec/npub/hex"
|
||||
v-model="accountDialog.data.key"
|
||||
autofocus
|
||||
@keyup.enter="createAccount"
|
||||
<q-input dense label="nsec/npub/hex" v-model="accountDialog.data.key" autofocus @keyup.enter="createAccount"
|
||||
:error="accountDialog.data.key && !isValidKey"
|
||||
hint="Enter you private key (recommended) or public key"
|
||||
></q-input>
|
||||
hint="Enter you private key (recommended) or public key"></q-input>
|
||||
|
||||
<q-item tag="label">
|
||||
<q-item-section avatar top>
|
||||
|
|
@ -244,22 +209,45 @@
|
|||
</q-card-section>
|
||||
|
||||
<q-card-actions align="right" class="text-primary">
|
||||
<q-btn
|
||||
v-if="hasExtension"
|
||||
flat
|
||||
label="Use Public Key from Extension"
|
||||
@click="() => createAccount(true)"
|
||||
></q-btn>
|
||||
<q-btn
|
||||
v-if="isValidKey"
|
||||
label="Add key"
|
||||
color="primary"
|
||||
@click="() => createAccount()"
|
||||
></q-btn>
|
||||
<q-btn v-if="hasExtension" flat label="Use Public Key from Extension"
|
||||
@click="() => createAccount(true)"></q-btn>
|
||||
<q-btn v-if="isValidKey" label="Add key" color="primary" @click="() => createAccount()"></q-btn>
|
||||
<q-btn v-else flat label="Generate" @click="generateKeyPair"></q-btn>
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
<!-- Config/Naddr Dialog -->
|
||||
<q-dialog v-model="configDialog.show" position="top">
|
||||
<q-card>
|
||||
<q-card-section class="row items-center q-pb-none">
|
||||
<div class="text-h6">Customize the Marketplace</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<p>Create an Nostr event with Market info</p>
|
||||
<small> It will include all merchants on your merchants list and relays </small>
|
||||
</q-card-section>
|
||||
|
||||
<q-card-section class="q-pt-none">
|
||||
<q-form @submit="sendConfig" class="q-gutter-md">
|
||||
<q-input filled dense v-model.trim="configDialog.data.name" label="Marketplace Name"></q-input>
|
||||
<q-input filled dense v-model.trim="configDialog.data.about" label="Description"></q-input>
|
||||
<p>Customize UI</p>
|
||||
<q-input filled dense v-model.trim="configDialog.data.ui.picture" label="Marketplace Logo"
|
||||
hint="URL to a logo image"></q-input>
|
||||
<q-input filled dense v-model.trim="configDialog.data.ui.banner" label="Marketplace banner"
|
||||
hint="URL to a header/banner image (max. 250px height)"></q-input>
|
||||
<q-select filled dense v-model="configDialog.data.ui.theme" :options="g.allowedThemes" label="Theme">
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="palette" />
|
||||
</template>
|
||||
</q-select>
|
||||
<div class="row q-mt-lg">
|
||||
<q-btn unelevated color="primary" type="submit">Publish</q-btn>
|
||||
<q-btn v-close-popup flat color="grey" class="q-ml-auto">Cancel</q-btn>
|
||||
</div>
|
||||
</q-form>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</q-layout>
|
||||
{% endblock %} {% block scripts %}
|
||||
<script src="https://unpkg.com/nostr-tools/lib/nostr.bundle.js"></script>
|
||||
|
|
@ -300,8 +288,7 @@
|
|||
width: auto;
|
||||
}
|
||||
|
||||
.chat-other {
|
||||
}
|
||||
.chat-other {}
|
||||
|
||||
.chat-input {
|
||||
position: relative;
|
||||
|
|
@ -309,5 +296,11 @@
|
|||
align-items: end;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.q-item__label--caption {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
{% endblock %}
|
||||
Loading…
Add table
Add a link
Reference in a new issue