Vlad Stan
GitHub
commit
cb1c6446aa
17 changed files with 1808 additions and 1 deletions
68
static/components/chat-dialog/chat-dialog.html
Normal file
68
static/components/chat-dialog/chat-dialog.html
Normal file
|
|
@ -0,0 +1,68 @@
|
|||
<div class="q-mr-md">
|
||||
<q-btn dense round flat icon="chat" @click="startDialog" />
|
||||
<q-dialog
|
||||
v-model="dialog"
|
||||
maximized
|
||||
transition-show="slide-up"
|
||||
transition-hide="slide-down"
|
||||
>
|
||||
<q-card>
|
||||
<q-bar>
|
||||
<q-icon name="chat" />
|
||||
<div>Chat Box</div>
|
||||
|
||||
<q-space></q-space>
|
||||
|
||||
<q-btn dense flat icon="close" @click="closeDialog">
|
||||
<q-tooltip content-class="bg-white text-primary">Close</q-tooltip>
|
||||
</q-btn>
|
||||
</q-bar>
|
||||
|
||||
<q-card-section
|
||||
style="
|
||||
height: calc(100vh - 120px);
|
||||
overflow-y: scroll;
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
"
|
||||
>
|
||||
<q-chat-message
|
||||
:key="index"
|
||||
v-for="(message, index) in sortedMessages"
|
||||
:name="message.sender"
|
||||
:text="[message.msg]"
|
||||
:sent="message.sender == 'Me'"
|
||||
:bg-color="message.sender == 'Me' ? 'white' : 'light-green-2'"
|
||||
:stamp="message.timestamp"
|
||||
size="6"
|
||||
/>
|
||||
</q-card-section>
|
||||
<q-card-actions>
|
||||
<q-form @submit="sendMessage" class="full-width chat-input">
|
||||
<q-input
|
||||
ref="newMessage"
|
||||
v-model="newMessage"
|
||||
placeholder="Message"
|
||||
class="full-width"
|
||||
dense
|
||||
outlined
|
||||
>
|
||||
<template>
|
||||
<q-btn
|
||||
round
|
||||
dense
|
||||
flat
|
||||
type="submit"
|
||||
icon="send"
|
||||
color="primary"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</q-form>
|
||||
</q-card-actions>
|
||||
<q-inner-loading :showing="loading">
|
||||
<q-spinner-cube size="50px" color="primary" />
|
||||
</q-inner-loading>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</div>
|
||||
157
static/components/chat-dialog/chat-dialog.js
Normal file
157
static/components/chat-dialog/chat-dialog.js
Normal file
|
|
@ -0,0 +1,157 @@
|
|||
async function chatDialog(path) {
|
||||
const template = await loadTemplateAsync(path)
|
||||
|
||||
Vue.component('chat-dialog', {
|
||||
name: 'chat-dialog',
|
||||
template,
|
||||
|
||||
props: ['account', 'merchant', 'relays'],
|
||||
data: function () {
|
||||
return {
|
||||
dialog: false,
|
||||
loading: false,
|
||||
pool: null,
|
||||
nostrMessages: [],
|
||||
newMessage: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
sortedMessages() {
|
||||
return this.nostrMessages.sort((a, b) => b.timestamp - a.timestamp)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async startDialog() {
|
||||
this.dialog = true
|
||||
await this.startPool()
|
||||
},
|
||||
async closeDialog() {
|
||||
this.dialog = false
|
||||
await this.pool.close(Array.from(this.relays))
|
||||
},
|
||||
async startPool() {
|
||||
this.loading = true
|
||||
this.pool = new NostrTools.SimplePool()
|
||||
let messagesMap = new Map()
|
||||
let sub = this.pool.sub(Array.from(this.relays), [
|
||||
{
|
||||
kinds: [4],
|
||||
authors: [this.account.pubkey]
|
||||
},
|
||||
{
|
||||
kinds: [4],
|
||||
'#p': [this.account.pubkey]
|
||||
}
|
||||
])
|
||||
sub.on('eose', () => {
|
||||
this.loading = false
|
||||
this.nostrMessages = Array.from(messagesMap.values())
|
||||
})
|
||||
sub.on('event', async event => {
|
||||
let mine = event.pubkey == this.account.pubkey
|
||||
let sender = mine
|
||||
? event.tags.find(([k, v]) => k === 'p' && v && v !== '')[1]
|
||||
: event.pubkey
|
||||
|
||||
try {
|
||||
let plaintext
|
||||
if (this.account.privkey) {
|
||||
plaintext = await NostrTools.nip04.decrypt(
|
||||
this.account.privkey,
|
||||
sender,
|
||||
event.content
|
||||
)
|
||||
} else if (this.account.useExtension && this.hasNip07) {
|
||||
plaintext = await window.nostr.nip04.decrypt(
|
||||
sender,
|
||||
event.content
|
||||
)
|
||||
}
|
||||
messagesMap.set(event.id, {
|
||||
msg: plaintext,
|
||||
timestamp: timeFromNow(event.created_at * 1000),
|
||||
sender: `${mine ? 'Me' : 'Merchant'}`
|
||||
})
|
||||
} catch {
|
||||
console.error('Unable to decrypt message!')
|
||||
}
|
||||
})
|
||||
setTimeout(() => {
|
||||
this.nostrMessages = Array.from(messagesMap.values())
|
||||
this.loading = false
|
||||
}, 5000)
|
||||
},
|
||||
async sendMessage() {
|
||||
if (this.newMessage && this.newMessage.length < 1) return
|
||||
let event = {
|
||||
...(await NostrTools.getBlankEvent()),
|
||||
kind: 4,
|
||||
created_at: Math.floor(Date.now() / 1000),
|
||||
tags: [['p', this.merchant]],
|
||||
pubkey: this.account.pubkey,
|
||||
content: await this.encryptMsg()
|
||||
}
|
||||
event.id = NostrTools.getEventHash(event)
|
||||
event.sig = this.signEvent(event)
|
||||
for (const url of Array.from(this.relays)) {
|
||||
try {
|
||||
let relay = NostrTools.relayInit(url)
|
||||
relay.on('connect', () => {
|
||||
console.debug(`connected to ${relay.url}`)
|
||||
})
|
||||
relay.on('error', () => {
|
||||
console.debug(`failed to connect to ${relay.url}`)
|
||||
})
|
||||
|
||||
await relay.connect()
|
||||
let pub = relay.publish(event)
|
||||
pub.on('ok', () => {
|
||||
console.debug(`${relay.url} has accepted our event`)
|
||||
})
|
||||
pub.on('failed', reason => {
|
||||
console.debug(`failed to publish to ${relay.url}: ${reason}`)
|
||||
})
|
||||
this.newMessage = ''
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
}
|
||||
}
|
||||
},
|
||||
async encryptMsg() {
|
||||
try {
|
||||
let cypher
|
||||
if (this.account.privkey) {
|
||||
cypher = await NostrTools.nip04.encrypt(
|
||||
this.account.privkey,
|
||||
this.merchant,
|
||||
this.newMessage
|
||||
)
|
||||
} else if (this.account.useExtension && this.hasNip07) {
|
||||
cypher = await window.nostr.nip04.encrypt(
|
||||
this.merchant,
|
||||
this.newMessage
|
||||
)
|
||||
}
|
||||
return cypher
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
}
|
||||
},
|
||||
async signEvent(event) {
|
||||
if (this.account.privkey) {
|
||||
event.sig = await NostrTools.signEvent(event, this.account.privkey)
|
||||
} else if (this.account.useExtension && this.hasNip07) {
|
||||
event = await window.nostr.signEvent(event)
|
||||
}
|
||||
return event
|
||||
}
|
||||
},
|
||||
created() {
|
||||
setTimeout(() => {
|
||||
if (window.nostr) {
|
||||
this.hasNip07 = true
|
||||
}
|
||||
}, 1000)
|
||||
}
|
||||
})
|
||||
}
|
||||
16
static/components/customer-market/customer-market.html
Normal file
16
static/components/customer-market/customer-market.html
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
<div>
|
||||
<q-toolbar>
|
||||
<q-breadcrumbs>
|
||||
<q-breadcrumbs-el label="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"
|
||||
>
|
||||
<product-card :product="item" @change-page="changePageM"></product-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
18
static/components/customer-market/customer-market.js
Normal file
18
static/components/customer-market/customer-market.js
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
async function customerMarket(path) {
|
||||
const template = await loadTemplateAsync(path)
|
||||
Vue.component('customer-market', {
|
||||
name: 'customer-market',
|
||||
template,
|
||||
|
||||
props: ['products', 'change-page'],
|
||||
data: function () {
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
changePageM(page, opts) {
|
||||
this.$emit('change-page', page, opts)
|
||||
}
|
||||
},
|
||||
created() {}
|
||||
})
|
||||
}
|
||||
244
static/components/customer-stall/customer-stall.html
Normal file
244
static/components/customer-stall/customer-stall.html
Normal file
|
|
@ -0,0 +1,244 @@
|
|||
<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>
|
||||
<q-toolbar-title></q-toolbar-title>
|
||||
<chat-dialog
|
||||
v-if="this.customerPrivkey || this.customerUseExtension"
|
||||
:account="account"
|
||||
:merchant="stall.pubkey"
|
||||
:relays="relays"
|
||||
/>
|
||||
<shopping-cart
|
||||
:cart="cart"
|
||||
:cart-menu="cartMenu"
|
||||
@remove-from-cart="removeFromCart"
|
||||
@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>
|
||||
<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>
|
||||
</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-card>
|
||||
<q-card-section>
|
||||
It seems you haven't logged in. You can:
|
||||
<ol>
|
||||
<li>
|
||||
enter your public and private keys bellow (to sign the order
|
||||
message)
|
||||
</li>
|
||||
<li>use a Nostr Signer Extension (NIP07)</li>
|
||||
<li>
|
||||
fill out the required fields, without keys, and download the
|
||||
order and send as a direct message to the merchant on any
|
||||
Nostr client
|
||||
</li>
|
||||
</ol>
|
||||
</q-card-section>
|
||||
<q-card-actions v-if="hasNip07" 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
|
||||
unelevated
|
||||
@click="downloadOrder"
|
||||
color="primary"
|
||||
label="Download order"
|
||||
><q-tooltip
|
||||
>Download the order and send manually</q-tooltip
|
||||
></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>
|
||||
<q-input
|
||||
filled
|
||||
dense
|
||||
:readonly="Boolean(customerPrivkey)"
|
||||
:type="isPwd ? 'password' : 'text'"
|
||||
v-if="!customerUseExtension"
|
||||
v-model.trim="checkoutDialog.data.privkey"
|
||||
hint="Enter your private key or see bellow for instructions"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<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"
|
||||
></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-option-group
|
||||
:options="stall.shipping.map(s => ({label: s.countries.toString(), value: s.id}))"
|
||||
type="radio"
|
||||
emit-value
|
||||
v-model="checkoutDialog.data.shippingzone"
|
||||
/>
|
||||
</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="!checkoutDialog.data.pubkey && !checkoutDialog.data.privkey"
|
||||
:loading="loading"
|
||||
unelevated
|
||||
color="primary"
|
||||
:disable="checkoutDialog.data.address == null
|
||||
|| checkoutDialog.data.shippingzone == null"
|
||||
@click="downloadOrder"
|
||||
>Download Order</q-btn
|
||||
>
|
||||
<q-btn
|
||||
v-else
|
||||
:loading="loading"
|
||||
unelevated
|
||||
color="primary"
|
||||
:disable="checkoutDialog.data.address == null
|
||||
|| 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-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
|
||||
<div class="text-center q-mb-lg">
|
||||
<a :href="'lightning:' + qrCodeDialog.data.payment_request">
|
||||
<q-responsive :ratio="1" class="q-mx-xl">
|
||||
<qrcode
|
||||
:value="qrCodeDialog.data.payment_request"
|
||||
:options="{width: 340}"
|
||||
class="rounded-borders"
|
||||
></qrcode>
|
||||
</q-responsive>
|
||||
</a>
|
||||
</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"
|
||||
v-close-popup
|
||||
flat
|
||||
color="grey"
|
||||
class="q-ml-auto"
|
||||
>Close</q-btn
|
||||
>
|
||||
</div>
|
||||
<q-inner-loading :showing="loading">
|
||||
<q-spinner-cube size="50px" color="primary" />
|
||||
</q-inner-loading>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</div>
|
||||
328
static/components/customer-stall/customer-stall.js
Normal file
328
static/components/customer-stall/customer-stall.js
Normal file
|
|
@ -0,0 +1,328 @@
|
|||
async function customerStall(path) {
|
||||
const template = await loadTemplateAsync(path)
|
||||
|
||||
Vue.component('customer-stall', {
|
||||
name: 'customer-stall',
|
||||
template,
|
||||
|
||||
props: [
|
||||
'account',
|
||||
'stall',
|
||||
'products',
|
||||
'product-detail',
|
||||
'change-page',
|
||||
'relays'
|
||||
],
|
||||
data: function () {
|
||||
return {
|
||||
loading: false,
|
||||
isPwd: true,
|
||||
cart: {
|
||||
total: 0,
|
||||
size: 0,
|
||||
products: new Map()
|
||||
},
|
||||
cartMenu: [],
|
||||
hasNip07: false,
|
||||
customerPubkey: null,
|
||||
customerPrivkey: null,
|
||||
customerUseExtension: null,
|
||||
activeOrder: null,
|
||||
checkoutDialog: {
|
||||
show: false,
|
||||
data: {
|
||||
pubkey: null
|
||||
}
|
||||
},
|
||||
qrCodeDialog: {
|
||||
data: {
|
||||
payment_request: null
|
||||
},
|
||||
show: false
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
product() {
|
||||
if (this.productDetail) {
|
||||
return this.products.find(p => p.id == this.productDetail)
|
||||
}
|
||||
},
|
||||
finalCost() {
|
||||
if (!this.checkoutDialog.data.shippingzone) return this.cart.total
|
||||
|
||||
let zoneCost = this.stall.shipping.find(
|
||||
z => z.id == this.checkoutDialog.data.shippingzone
|
||||
)
|
||||
return +this.cart.total + zoneCost.cost
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changePageS(page, opts) {
|
||||
this.$emit('change-page', page, opts)
|
||||
},
|
||||
getAmountFormated(amount, unit = 'USD') {
|
||||
return LNbits.utils.formatCurrency(amount, unit)
|
||||
},
|
||||
addToCart(item) {
|
||||
console.log('add to cart', item)
|
||||
let prod = this.cart.products
|
||||
if (prod.has(item.id)) {
|
||||
let qty = prod.get(item.id).quantity
|
||||
prod.set(item.id, {
|
||||
...prod.get(item.id),
|
||||
quantity: qty + 1
|
||||
})
|
||||
} else {
|
||||
prod.set(item.id, {
|
||||
name: item.name,
|
||||
quantity: 1,
|
||||
price: item.price,
|
||||
image: item?.images[0] || null
|
||||
})
|
||||
}
|
||||
this.$q.notify({
|
||||
type: 'positive',
|
||||
message: `${item.name} added to cart`,
|
||||
icon: 'thumb_up'
|
||||
})
|
||||
this.cart.products = prod
|
||||
this.updateCart(+item.price)
|
||||
},
|
||||
removeFromCart(item) {
|
||||
this.cart.products.delete(item.id)
|
||||
this.updateCart(+item.price, true)
|
||||
},
|
||||
updateCart(price, del = false) {
|
||||
console.log(this.cart, this.cartMenu)
|
||||
if (del) {
|
||||
this.cart.total -= price
|
||||
this.cart.size--
|
||||
} else {
|
||||
this.cart.total += price
|
||||
this.cart.size++
|
||||
}
|
||||
this.cartMenu = Array.from(this.cart.products, item => {
|
||||
return {id: item[0], ...item[1]}
|
||||
})
|
||||
console.log(this.cart, this.cartMenu)
|
||||
},
|
||||
resetCart() {
|
||||
this.cart = {
|
||||
total: 0,
|
||||
size: 0,
|
||||
products: new Map()
|
||||
}
|
||||
},
|
||||
async downloadOrder() {
|
||||
return
|
||||
},
|
||||
async getFromExtension() {
|
||||
this.customerPubkey = await window.nostr.getPublicKey()
|
||||
this.customerUseExtension = true
|
||||
this.checkoutDialog.data.pubkey = this.customerPubkey
|
||||
},
|
||||
openCheckout() {
|
||||
// Check if user is logged in
|
||||
if (this.customerPubkey) {
|
||||
this.checkoutDialog.data.pubkey = this.customerPubkey
|
||||
if (this.customerPrivkey && !useExtension) {
|
||||
this.checkoutDialog.data.privkey = this.customerPrivkey
|
||||
}
|
||||
}
|
||||
this.checkoutDialog.show = true
|
||||
},
|
||||
resetCheckout() {
|
||||
this.checkoutDialog = {
|
||||
show: false,
|
||||
data: {
|
||||
pubkey: null
|
||||
}
|
||||
}
|
||||
},
|
||||
closeQrCodeDialog() {
|
||||
this.qrCodeDialog.dismissMsg()
|
||||
this.qrCodeDialog.show = false
|
||||
},
|
||||
async placeOrder() {
|
||||
this.loading = true
|
||||
LNbits.utils
|
||||
.confirmDialog(
|
||||
`Send the order to the merchant? You should receive a message with the payment details.`
|
||||
)
|
||||
.onOk(async () => {
|
||||
let orderData = this.checkoutDialog.data
|
||||
let orderObj = {
|
||||
name: orderData?.username,
|
||||
address: orderData.address,
|
||||
message: orderData?.message,
|
||||
contact: {
|
||||
nostr: this.customerPubkey,
|
||||
phone: null,
|
||||
email: orderData?.email
|
||||
},
|
||||
items: Array.from(this.cart.products, p => {
|
||||
return {product_id: p[0], quantity: p[1].quantity}
|
||||
})
|
||||
}
|
||||
let created_at = Math.floor(Date.now() / 1000)
|
||||
orderObj.id = await hash(
|
||||
[this.customerPubkey, created_at, JSON.stringify(orderObj)].join(
|
||||
':'
|
||||
)
|
||||
)
|
||||
this.activeOrder = orderObj.id
|
||||
let event = {
|
||||
...(await NostrTools.getBlankEvent()),
|
||||
kind: 4,
|
||||
created_at,
|
||||
tags: [['p', this.stall.pubkey]],
|
||||
pubkey: this.customerPubkey
|
||||
}
|
||||
if (this.customerPrivkey) {
|
||||
event.content = await NostrTools.nip04.encrypt(
|
||||
this.customerPrivkey,
|
||||
this.stall.pubkey,
|
||||
JSON.stringify(orderObj)
|
||||
)
|
||||
} else if (this.customerUseExtension && this.hasNip07) {
|
||||
event.content = await window.nostr.nip04.encrypt(
|
||||
this.stall.pubkey,
|
||||
JSON.stringify(orderObj)
|
||||
)
|
||||
let userRelays = Object.keys(
|
||||
(await window.nostr?.getRelays?.()) || []
|
||||
)
|
||||
if (userRelays.length != 0) {
|
||||
userRelays.map(r => this.relays.add(r))
|
||||
}
|
||||
}
|
||||
event.id = NostrTools.getEventHash(event)
|
||||
if (this.customerPrivkey) {
|
||||
event.sig = await NostrTools.signEvent(
|
||||
event,
|
||||
this.customerPrivkey
|
||||
)
|
||||
} else if (this.customerUseExtension && this.hasNip07) {
|
||||
event = await window.nostr.signEvent(event)
|
||||
}
|
||||
|
||||
await this.sendOrder(event)
|
||||
})
|
||||
},
|
||||
async sendOrder(order) {
|
||||
for (const url of Array.from(this.relays)) {
|
||||
try {
|
||||
let relay = NostrTools.relayInit(url)
|
||||
relay.on('connect', () => {
|
||||
console.log(`connected to ${relay.url}`)
|
||||
})
|
||||
relay.on('error', () => {
|
||||
console.log(`failed to connect to ${relay.url}`)
|
||||
})
|
||||
|
||||
await relay.connect()
|
||||
let pub = relay.publish(order)
|
||||
pub.on('ok', () => {
|
||||
console.log(`${relay.url} has accepted our event`)
|
||||
relay.close()
|
||||
})
|
||||
pub.on('failed', reason => {
|
||||
console.log(`failed to publish to ${relay.url}: ${reason}`)
|
||||
relay.close()
|
||||
})
|
||||
} catch (err) {
|
||||
console.error(`Error: ${err}`)
|
||||
}
|
||||
}
|
||||
this.loading = false
|
||||
this.resetCheckout()
|
||||
this.resetCart()
|
||||
this.qrCodeDialog.show = true
|
||||
this.qrCodeDialog.dismissMsg = this.$q.notify({
|
||||
timeout: 0,
|
||||
message: 'Waiting for invoice from merchant...'
|
||||
})
|
||||
this.listenMessages()
|
||||
},
|
||||
async listenMessages() {
|
||||
console.log('LISTEN')
|
||||
try {
|
||||
const pool = new NostrTools.SimplePool()
|
||||
const filters = [
|
||||
{
|
||||
kinds: [4],
|
||||
'#p': [this.customerPubkey]
|
||||
}
|
||||
]
|
||||
let relays = Array.from(this.relays)
|
||||
let subs = pool.sub(relays, filters)
|
||||
subs.on('event', async event => {
|
||||
let mine = event.pubkey == this.customerPubkey
|
||||
let sender = mine
|
||||
? event.tags.find(([k, v]) => k === 'p' && v && v !== '')[1]
|
||||
: event.pubkey
|
||||
|
||||
try {
|
||||
let plaintext
|
||||
if (this.customerPrivkey) {
|
||||
plaintext = await NostrTools.nip04.decrypt(
|
||||
this.customerPrivkey,
|
||||
sender,
|
||||
event.content
|
||||
)
|
||||
} else if (this.customerUseExtension && this.hasNip07) {
|
||||
plaintext = await window.nostr.nip04.decrypt(
|
||||
sender,
|
||||
event.content
|
||||
)
|
||||
}
|
||||
console.log(`${mine ? 'Me' : 'Merchant'}: ${plaintext}`)
|
||||
|
||||
this.messageFilter(plaintext, cb => Promise.resolve(pool.close))
|
||||
} catch {
|
||||
console.error('Unable to decrypt message!')
|
||||
}
|
||||
})
|
||||
} catch (err) {
|
||||
console.error(`Error: ${err}`)
|
||||
}
|
||||
},
|
||||
messageFilter(text, cb = () => {}) {
|
||||
if (!isJson(text)) return
|
||||
let json = JSON.parse(text)
|
||||
if (json.id != this.activeOrder) return
|
||||
if (json?.payment_options) {
|
||||
this.qrCodeDialog.data.payment_request = json.payment_options.find(
|
||||
o => o.type == 'ln'
|
||||
).link
|
||||
this.qrCodeDialog.dismissMsg = this.$q.notify({
|
||||
timeout: 0,
|
||||
message: 'Waiting for payment...'
|
||||
})
|
||||
} else if (json?.paid) {
|
||||
this.closeQrCodeDialog()
|
||||
this.$q.notify({
|
||||
type: 'positive',
|
||||
message: 'Sats received, thanks!',
|
||||
icon: 'thumb_up'
|
||||
})
|
||||
this.activeOrder = null
|
||||
Promise.resolve(cb())
|
||||
} else {
|
||||
return
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.customerPubkey = this.account?.pubkey
|
||||
this.customerPrivkey = this.account?.privkey
|
||||
this.customerUseExtension = this.account?.useExtension
|
||||
setTimeout(() => {
|
||||
if (window.nostr) {
|
||||
this.hasNip07 = true
|
||||
}
|
||||
}, 1000)
|
||||
}
|
||||
})
|
||||
}
|
||||
90
static/components/product-card/product-card.html
Normal file
90
static/components/product-card/product-card.html
Normal file
|
|
@ -0,0 +1,90 @@
|
|||
<q-card class="card--product">
|
||||
<q-img
|
||||
:src="product.image ? product.image : '/nostrmarket/static/images/placeholder.png'"
|
||||
alt="Product Image"
|
||||
loading="lazy"
|
||||
spinner-color="white"
|
||||
fit="contain"
|
||||
height="300px"
|
||||
></q-img>
|
||||
|
||||
<q-card-section class="q-pb-xs q-pt-md">
|
||||
<q-btn
|
||||
v-if="isStall"
|
||||
round
|
||||
:disabled="product.quantity < 1"
|
||||
color="primary"
|
||||
icon="shopping_cart"
|
||||
size="lg"
|
||||
style="
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
transform: translate(-50%, -50%);
|
||||
"
|
||||
@click="$emit('add-to-cart', product)"
|
||||
><q-tooltip> Add to cart </q-tooltip></q-btn
|
||||
>
|
||||
<div class="row no-wrap items-center">
|
||||
<div class="col text-subtitle2 ellipsis-2-lines">{{ product.name }}</div>
|
||||
</div>
|
||||
|
||||
<!-- <q-rating v-model="stars" color="orange" :max="5" readonly size="17px"></q-rating> -->
|
||||
</q-card-section>
|
||||
|
||||
<q-card-section class="q-py-sm">
|
||||
<div>
|
||||
<div class="text-caption text-weight-bolder">{{ product.stallName }}</div>
|
||||
<span v-if="product.currency == 'sat'">
|
||||
<span class="text-h6">{{ product.price }} sats</span
|
||||
><span class="q-ml-sm text-grey-6"
|
||||
>BTC {{ (product.price / 1e8).toFixed(8) }}</span
|
||||
>
|
||||
</span>
|
||||
<span v-else>
|
||||
<span class="text-h6">{{ product.formatedPrice }}</span>
|
||||
</span>
|
||||
<span class="q-ml-md text-caption text-green-8 text-weight-bolder q-mt-md"
|
||||
>{{ product.quantity }} left</span
|
||||
>
|
||||
</div>
|
||||
<div v-if="product.categories" class="text-subtitle1">
|
||||
<q-chip v-for="(cat, i) in product.categories" :key="i" dense
|
||||
>{{cat}}</q-chip
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
class="text-caption text-grey ellipsis-2-lines"
|
||||
style="min-height: 40px"
|
||||
>
|
||||
<p v-if="product.description">{{ product.description }}</p>
|
||||
</div>
|
||||
</q-card-section>
|
||||
|
||||
<q-separator></q-separator>
|
||||
|
||||
<q-card-actions>
|
||||
<span>Stall: {{ product.stallName }}</span>
|
||||
<span>{{ $parent.activeStall }}</span>
|
||||
<div class="q-ml-auto">
|
||||
<q-btn
|
||||
flat
|
||||
class="text-weight-bold text-capitalize q-ml-auto"
|
||||
dense
|
||||
color="primary"
|
||||
@click="$emit('change-page', 'stall', {stall: product.stall_id, product: product.id})"
|
||||
>
|
||||
View details
|
||||
</q-btn>
|
||||
<q-btn
|
||||
flat
|
||||
class="text-weight-bold text-capitalize q-ml-auto"
|
||||
dense
|
||||
color="primary"
|
||||
@click="$emit('change-page', 'stall', {stall: product.stall_id})"
|
||||
>
|
||||
Visit Stall
|
||||
</q-btn>
|
||||
</div>
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
14
static/components/product-card/product-card.js
Normal file
14
static/components/product-card/product-card.js
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
async function productCard(path) {
|
||||
const template = await loadTemplateAsync(path)
|
||||
Vue.component('product-card', {
|
||||
name: 'product-card',
|
||||
template,
|
||||
|
||||
props: ['product', 'change-page', 'add-to-cart', 'is-stall'],
|
||||
data: function () {
|
||||
return {}
|
||||
},
|
||||
methods: {},
|
||||
created() {}
|
||||
})
|
||||
}
|
||||
74
static/components/product-detail/product-detail.html
Normal file
74
static/components/product-detail/product-detail.html
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
<div class="row q-mt-sm">
|
||||
<div class="col-lg-5 col-md-5 col-sm-12 col-xs-12">
|
||||
<div class="q-pa-md">
|
||||
<q-carousel
|
||||
v-if="product.images"
|
||||
swipeable
|
||||
animated
|
||||
v-model="slide"
|
||||
thumbnails
|
||||
infinite
|
||||
v-for="(img, i) in product.images"
|
||||
:key="i"
|
||||
>
|
||||
<q-carousel-slide
|
||||
:name="i + 1"
|
||||
:img-src="img"
|
||||
style="/*background-size: contain; background-repeat: no-repeat*/"
|
||||
></q-carousel-slide>
|
||||
</q-carousel>
|
||||
<q-img
|
||||
v-if="!product.images"
|
||||
src="/nostrmarket/static/images/placeholder.png"
|
||||
:ratio="16/9"
|
||||
></q-img>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-7 col-md-7 col-sm-12 col-xs-12">
|
||||
<div class="row">
|
||||
<div
|
||||
class="col-lg-7 col-md-7 col-sm-12 col-xs-12"
|
||||
:class="$q.platform.is.desktop ? '' : 'q-px-md'"
|
||||
>
|
||||
<div class="text-subtitle1 q-mt-sm q-pt-xs">{{ product.name }}</div>
|
||||
<div v-if="product.categories" class="text-subtitle1">
|
||||
<q-chip v-for="(cat, i) in product.categories" :key="i" dense
|
||||
>{{cat}}</q-chip
|
||||
>
|
||||
</div>
|
||||
<div class="q-mt-sm text-weight-bold">{{ product.description }}</div>
|
||||
<div>
|
||||
<span v-if="product.currency == 'sat'">
|
||||
<span class="text-h6">{{ product.price }} sats</span
|
||||
><span class="q-ml-sm text-grey-6"
|
||||
>BTC {{ (product.price / 1e8).toFixed(8) }}</span
|
||||
>
|
||||
</span>
|
||||
<span v-else>
|
||||
<span class="text-h6">{{ product.formatedPrice }}</span>
|
||||
</span>
|
||||
<span
|
||||
class="q-ml-md text-caption text-green-8 text-weight-bolder q-mt-md"
|
||||
>{{ product.quantity > 0 ? 'In stock.' : 'Out of stock.' }}</span
|
||||
>
|
||||
</div>
|
||||
<div class="q-mt-md">
|
||||
<q-btn
|
||||
class="q-mt-md"
|
||||
color="primary"
|
||||
icon="shopping_cart"
|
||||
label="Add to cart"
|
||||
@click="$emit('add-to-cart', product)"
|
||||
/>
|
||||
<q-btn
|
||||
class="q-mt-md q-ml-md"
|
||||
color="primary"
|
||||
icon="share"
|
||||
label="Share"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- RATING TO BE DONE -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
17
static/components/product-detail/product-detail.js
Normal file
17
static/components/product-detail/product-detail.js
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
async function productDetail(path) {
|
||||
const template = await loadTemplateAsync(path)
|
||||
Vue.component('product-detail', {
|
||||
name: 'product-detail',
|
||||
template,
|
||||
|
||||
props: ['product', 'add-to-cart'],
|
||||
data: function () {
|
||||
return {
|
||||
slide: 1
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
methods: {},
|
||||
created() {}
|
||||
})
|
||||
}
|
||||
51
static/components/shopping-cart/shopping-cart.html
Normal file
51
static/components/shopping-cart/shopping-cart.html
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
<q-btn dense round flat icon="shopping_cart">
|
||||
<q-badge v-if="cart.size" color="red" class="text-bold" floating>
|
||||
{{ cart.size }}
|
||||
</q-badge>
|
||||
<q-menu v-if="cart.size">
|
||||
<q-list style="min-width: 100px">
|
||||
<q-item :key="p.id" v-for="p in cartMenu">
|
||||
<q-item-section side>
|
||||
<span>{{p.quantity}} x </span>
|
||||
</q-item-section>
|
||||
<q-item-section avatar v-if="p.image">
|
||||
<q-avatar color="primary">
|
||||
<img size="sm" :src="p.image" />
|
||||
</q-avatar>
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section>
|
||||
<q-item-label>{{ p.name }}</q-item-label>
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section side>
|
||||
<span>
|
||||
{{p.currency != 'sat' ? p.formatedPrice : p.price + 'sats'}}
|
||||
<q-btn
|
||||
class="q-ml-md"
|
||||
round
|
||||
color="red"
|
||||
size="xs"
|
||||
icon="close"
|
||||
@click="$emit('remove-from-cart', p)"
|
||||
/>
|
||||
</span>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-separator />
|
||||
</q-list>
|
||||
<div class="row q-pa-md q-gutter-md">
|
||||
<q-btn
|
||||
color="primary"
|
||||
icon-right="checkout"
|
||||
label="Checkout"
|
||||
@click="$emit('open-checkout')"
|
||||
></q-btn>
|
||||
<q-btn
|
||||
class="q-ml-lg"
|
||||
flat
|
||||
color="primary"
|
||||
label="Reset"
|
||||
@click="$emit('reset-cart')"
|
||||
></q-btn></div></q-menu
|
||||
></q-btn>
|
||||
16
static/components/shopping-cart/shopping-cart.js
Normal file
16
static/components/shopping-cart/shopping-cart.js
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
async function shoppingCart(path) {
|
||||
const template = await loadTemplateAsync(path)
|
||||
|
||||
Vue.component('shopping-cart', {
|
||||
name: 'shopping-cart',
|
||||
template,
|
||||
|
||||
props: ['cart', 'cart-menu', 'remove-from-cart', 'reset-cart'],
|
||||
data: function () {
|
||||
return {}
|
||||
},
|
||||
computed: {},
|
||||
methods: {},
|
||||
created() {}
|
||||
})
|
||||
}
|
||||
BIN
static/images/blank-avatar.webp
Normal file
BIN
static/images/blank-avatar.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
341
static/js/market.js
Normal file
341
static/js/market.js
Normal file
|
|
@ -0,0 +1,341 @@
|
|||
const market = async () => {
|
||||
Vue.component(VueQrcode.name, VueQrcode)
|
||||
|
||||
const NostrTools = window.NostrTools
|
||||
|
||||
const defaultRelays = [
|
||||
'wss://relay.damus.io',
|
||||
'wss://relay.snort.social',
|
||||
'wss://nostr-pub.wellorder.net',
|
||||
'wss://nostr.zebedee.cloud'
|
||||
]
|
||||
const eventToObj = event => {
|
||||
event.content = JSON.parse(event.content)
|
||||
return {
|
||||
...event,
|
||||
...Object.values(event.tags).reduce((acc, tag) => {
|
||||
let [key, value] = tag
|
||||
return {...acc, [key]: [...(acc[key] || []), value]}
|
||||
}, {})
|
||||
}
|
||||
}
|
||||
await Promise.all([
|
||||
productCard('static/components/product-card/product-card.html'),
|
||||
customerMarket('static/components/customer-market/customer-market.html'),
|
||||
customerStall('static/components/customer-stall/customer-stall.html'),
|
||||
productDetail('static/components/product-detail/product-detail.html'),
|
||||
shoppingCart('static/components/shopping-cart/shopping-cart.html'),
|
||||
chatDialog('static/components/chat-dialog/chat-dialog.html')
|
||||
])
|
||||
|
||||
new Vue({
|
||||
el: '#vue',
|
||||
mixins: [windowMixin],
|
||||
data: function () {
|
||||
return {
|
||||
account: null,
|
||||
accountDialog: {
|
||||
show: false,
|
||||
data: {
|
||||
watchOnly: false,
|
||||
key: null
|
||||
}
|
||||
},
|
||||
drawer: false,
|
||||
pubkeys: new Set(),
|
||||
relays: new Set(),
|
||||
events: [],
|
||||
stalls: [],
|
||||
products: [],
|
||||
profiles: new Map(),
|
||||
searchText: null,
|
||||
inputPubkey: null,
|
||||
inputRelay: null,
|
||||
activePage: 'market',
|
||||
activeStall: null,
|
||||
activeProduct: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
filterProducts() {
|
||||
let products = this.products
|
||||
if (this.activeStall) {
|
||||
products = products.filter(p => p.stall_id == this.activeStall)
|
||||
}
|
||||
const searchText = this.searchText.toLowerCase()
|
||||
if (!searchText || searchText.length < 2) return products
|
||||
return products.filter(p => {
|
||||
return (
|
||||
p.name.toLowerCase().includes(searchText) ||
|
||||
p.description.toLowerCase().includes(searchText) ||
|
||||
p.categories.toLowerCase().includes(searchText)
|
||||
)
|
||||
})
|
||||
},
|
||||
stallName() {
|
||||
return this.stalls.find(s => s.id == this.activeStall)?.name || 'Stall'
|
||||
},
|
||||
productName() {
|
||||
return (
|
||||
this.products.find(p => p.id == this.activeProduct)?.name || 'Product'
|
||||
)
|
||||
},
|
||||
isLoading() {
|
||||
return this.$q.loading.isActive
|
||||
},
|
||||
hasExtension() {
|
||||
return window.nostr
|
||||
},
|
||||
isValidKey() {
|
||||
return this.accountDialog.data.key
|
||||
?.toLowerCase()
|
||||
?.match(/^[0-9a-f]{64}$/)
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
// Check for user stored
|
||||
this.account = this.$q.localStorage.getItem('diagonAlley.account') || null
|
||||
|
||||
// Check for stored merchants and relays on localStorage
|
||||
try {
|
||||
let merchants = this.$q.localStorage.getItem(`diagonAlley.merchants`)
|
||||
let relays = this.$q.localStorage.getItem(`diagonAlley.relays`)
|
||||
if (merchants && merchants.length) {
|
||||
this.pubkeys = new Set(merchants)
|
||||
}
|
||||
if (relays && relays.length) {
|
||||
this.relays = new Set([...defaultRelays, ...relays])
|
||||
} else {
|
||||
this.relays = new Set(defaultRelays)
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
}
|
||||
|
||||
let params = new URLSearchParams(window.location.search)
|
||||
let merchant_pubkey = params.get('merchant_pubkey')
|
||||
let stall_id = params.get('stall_id')
|
||||
let product_id = params.get('product_id')
|
||||
|
||||
// What component to render on start
|
||||
if (stall_id) {
|
||||
if (product_id) {
|
||||
this.activeProduct = product_id
|
||||
}
|
||||
this.activePage = 'stall'
|
||||
this.activeStall = stall_id
|
||||
}
|
||||
if (merchant_pubkey && !this.pubkeys.has(merchant_pubkey)) {
|
||||
await LNbits.utils
|
||||
.confirmDialog(
|
||||
`We found a merchant pubkey in your request. Do you want to add it to the merchants list?`
|
||||
)
|
||||
.onOk(async () => {
|
||||
await this.addPubkey(merchant_pubkey)
|
||||
})
|
||||
}
|
||||
|
||||
// Get notes from Nostr
|
||||
await this.initNostr()
|
||||
|
||||
this.$q.loading.hide()
|
||||
},
|
||||
methods: {
|
||||
naddr() {
|
||||
let naddr = NostrTools.nip19.naddrEncode({
|
||||
identifier: '1234',
|
||||
pubkey:
|
||||
'c1415f950a1e3431de2bc5ee35144639e2f514cf158279abff9ed77d50118796',
|
||||
kind: 30018,
|
||||
relays: defaultRelays
|
||||
})
|
||||
console.log(naddr)
|
||||
},
|
||||
async deleteAccount() {
|
||||
await LNbits.utils
|
||||
.confirmDialog(
|
||||
`This will delete all stored data. If you didn't backup the Key Pair (Private and Public Keys), you will lose it. Continue?`
|
||||
)
|
||||
.onOk(() => {
|
||||
window.localStorage.removeItem('diagonAlley.account')
|
||||
this.account = null
|
||||
})
|
||||
},
|
||||
async createAccount(useExtension = false) {
|
||||
let nip07
|
||||
if (useExtension) {
|
||||
await this.getFromExtension()
|
||||
nip07 = true
|
||||
}
|
||||
if (this.isValidKey) {
|
||||
let {key, watchOnly} = this.accountDialog.data
|
||||
this.$q.localStorage.set('diagonAlley.account', {
|
||||
privkey: watchOnly ? null : key,
|
||||
pubkey: watchOnly ? key : NostrTools.getPublicKey(key),
|
||||
useExtension: nip07 ?? false
|
||||
})
|
||||
this.accountDialog.data = {
|
||||
watchOnly: false,
|
||||
key: null
|
||||
}
|
||||
this.accountDialog.show = false
|
||||
this.account = this.$q.localStorage.getItem('diagonAlley.account')
|
||||
}
|
||||
},
|
||||
generateKeyPair() {
|
||||
this.accountDialog.data.key = NostrTools.generatePrivateKey()
|
||||
this.accountDialog.data.watchOnly = false
|
||||
},
|
||||
async getFromExtension() {
|
||||
this.accountDialog.data.key = await window.nostr.getPublicKey()
|
||||
this.accountDialog.data.watchOnly = true
|
||||
return
|
||||
},
|
||||
async initNostr() {
|
||||
this.$q.loading.show()
|
||||
const pool = new NostrTools.SimplePool()
|
||||
let relays = Array.from(this.relays)
|
||||
let products = new Map()
|
||||
let stalls = new Map()
|
||||
// Get metadata and market data from the pubkeys
|
||||
let sub = await pool
|
||||
.list(relays, [
|
||||
{
|
||||
kinds: [0, 30017, 30018], // for production kind is 30017
|
||||
authors: Array.from(this.pubkeys)
|
||||
}
|
||||
])
|
||||
.then(events => {
|
||||
console.log(events)
|
||||
this.events = events || []
|
||||
this.events.map(eventToObj).map(e => {
|
||||
if (e.kind == 0) {
|
||||
this.profiles.set(e.pubkey, e.content)
|
||||
return
|
||||
} else if (e.kind == 30018) {
|
||||
//it's a product `d` is the prod. id
|
||||
products.set(e.d, {...e.content, id: e.d[0], categories: e.t})
|
||||
} else if (e.kind == 30017) {
|
||||
// it's a stall `d` is the stall id
|
||||
stalls.set(e.d, {...e.content, id: e.d[0], pubkey: e.pubkey})
|
||||
return
|
||||
}
|
||||
})
|
||||
})
|
||||
await Promise.resolve(sub)
|
||||
this.stalls = await Array.from(stalls.values())
|
||||
|
||||
this.products = Array.from(products.values()).map(obj => {
|
||||
let stall = this.stalls.find(s => s.id == obj.stall_id)
|
||||
obj.stallName = stall.name
|
||||
obj.images = [obj.image]
|
||||
if (obj.currency != 'sat') {
|
||||
obj.formatedPrice = this.getAmountFormated(obj.price, obj.currency)
|
||||
}
|
||||
return obj
|
||||
})
|
||||
this.$q.loading.hide()
|
||||
pool.close(relays)
|
||||
return
|
||||
},
|
||||
navigateTo(page, opts = {stall: null, product: null, pubkey: null}) {
|
||||
let {stall, product, pubkey} = opts
|
||||
let url = new URL(window.location)
|
||||
|
||||
if (pubkey) url.searchParams.set('merchant_pubkey', pubkey)
|
||||
if (stall && !pubkey) {
|
||||
pubkey = this.stalls.find(s => s.id == stall).pubkey
|
||||
url.searchParams.set('merchant_pubkey', pubkey)
|
||||
}
|
||||
|
||||
switch (page) {
|
||||
case 'stall':
|
||||
if (stall) {
|
||||
this.activeStall = stall
|
||||
url.searchParams.set('stall_id', stall)
|
||||
if (product) {
|
||||
this.activeProduct = product
|
||||
url.searchParams.set('product_id', product)
|
||||
}
|
||||
}
|
||||
break
|
||||
default:
|
||||
this.activeStall = null
|
||||
this.activeProduct = null
|
||||
url.searchParams.delete('merchant_pubkey')
|
||||
url.searchParams.delete('stall_id')
|
||||
url.searchParams.delete('product_id')
|
||||
break
|
||||
}
|
||||
|
||||
window.history.pushState({}, '', url)
|
||||
this.activePage = page
|
||||
},
|
||||
getAmountFormated(amount, unit = 'USD') {
|
||||
return LNbits.utils.formatCurrency(amount, unit)
|
||||
},
|
||||
async addPubkey(pubkey) {
|
||||
console.log(pubkey, this.inputPubkey)
|
||||
if (!pubkey) {
|
||||
pubkey = String(this.inputPubkey).trim()
|
||||
}
|
||||
let regExp = /^#([0-9a-f]{3}){1,2}$/i
|
||||
if (pubkey.startsWith('n')) {
|
||||
try {
|
||||
let {type, data} = NostrTools.nip19.decode(pubkey)
|
||||
if (type === 'npub') pubkey = data
|
||||
else if (type === 'nprofile') {
|
||||
pubkey = data.pubkey
|
||||
givenRelays = data.relays
|
||||
}
|
||||
console.log(pubkey)
|
||||
this.pubkeys.add(pubkey)
|
||||
this.inputPubkey = null
|
||||
} catch (err) {
|
||||
console.error(err)
|
||||
}
|
||||
} else if (regExp.test(pubkey)) {
|
||||
pubkey = pubkey
|
||||
}
|
||||
this.pubkeys.add(pubkey)
|
||||
this.$q.localStorage.set(
|
||||
`diagonAlley.merchants`,
|
||||
Array.from(this.pubkeys)
|
||||
)
|
||||
await this.initNostr()
|
||||
},
|
||||
removePubkey(pubkey) {
|
||||
// Needs a hack for Vue reactivity
|
||||
let pubkeys = this.pubkeys
|
||||
pubkeys.delete(pubkey)
|
||||
this.profiles.delete(pubkey)
|
||||
this.pubkeys = new Set(Array.from(pubkeys))
|
||||
this.$q.localStorage.set(
|
||||
`diagonAlley.merchants`,
|
||||
Array.from(this.pubkeys)
|
||||
)
|
||||
Promise.resolve(this.initNostr())
|
||||
},
|
||||
async addRelay() {
|
||||
let relay = String(this.inputRelay).trim()
|
||||
if (!relay.startsWith('ws')) {
|
||||
console.debug('invalid url')
|
||||
return
|
||||
}
|
||||
this.relays.add(relay)
|
||||
this.$q.localStorage.set(`diagonAlley.relays`, Array.from(this.relays))
|
||||
this.inputRelay = null
|
||||
await this.initNostr()
|
||||
},
|
||||
removeRelay(relay) {
|
||||
// Needs a hack for Vue reactivity
|
||||
let relays = this.relays
|
||||
relays.delete(relay)
|
||||
this.relays = new Set(Array.from(relays))
|
||||
this.$q.localStorage.set(`diagonAlley.relays`, Array.from(this.relays))
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
market()
|
||||
|
|
@ -25,3 +25,79 @@ function imgSizeFit(img, maxWidth = 1024, maxHeight = 768) {
|
|||
)
|
||||
return {width: img.naturalWidth * ratio, height: img.naturalHeight * ratio}
|
||||
}
|
||||
|
||||
async function hash(string) {
|
||||
const utf8 = new TextEncoder().encode(string)
|
||||
const hashBuffer = await crypto.subtle.digest('SHA-256', utf8)
|
||||
const hashArray = Array.from(new Uint8Array(hashBuffer))
|
||||
const hashHex = hashArray
|
||||
.map(bytes => bytes.toString(16).padStart(2, '0'))
|
||||
.join('')
|
||||
return hashHex
|
||||
}
|
||||
|
||||
function isJson(str) {
|
||||
if (typeof str !== 'string') {
|
||||
return false
|
||||
}
|
||||
try {
|
||||
JSON.parse(str)
|
||||
return true
|
||||
} catch (error) {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
function timeFromNow(time) {
|
||||
// Get timestamps
|
||||
let unixTime = new Date(time).getTime()
|
||||
if (!unixTime) return
|
||||
let now = new Date().getTime()
|
||||
|
||||
// Calculate difference
|
||||
let difference = unixTime / 1000 - now / 1000
|
||||
|
||||
// Setup return object
|
||||
let tfn = {}
|
||||
|
||||
// Check if time is in the past, present, or future
|
||||
tfn.when = 'now'
|
||||
if (difference > 0) {
|
||||
tfn.when = 'future'
|
||||
} else if (difference < -1) {
|
||||
tfn.when = 'past'
|
||||
}
|
||||
|
||||
// Convert difference to absolute
|
||||
difference = Math.abs(difference)
|
||||
|
||||
// Calculate time unit
|
||||
if (difference / (60 * 60 * 24 * 365) > 1) {
|
||||
// Years
|
||||
tfn.unitOfTime = 'years'
|
||||
tfn.time = Math.floor(difference / (60 * 60 * 24 * 365))
|
||||
} else if (difference / (60 * 60 * 24 * 45) > 1) {
|
||||
// Months
|
||||
tfn.unitOfTime = 'months'
|
||||
tfn.time = Math.floor(difference / (60 * 60 * 24 * 45))
|
||||
} else if (difference / (60 * 60 * 24) > 1) {
|
||||
// Days
|
||||
tfn.unitOfTime = 'days'
|
||||
tfn.time = Math.floor(difference / (60 * 60 * 24))
|
||||
} else if (difference / (60 * 60) > 1) {
|
||||
// Hours
|
||||
tfn.unitOfTime = 'hours'
|
||||
tfn.time = Math.floor(difference / (60 * 60))
|
||||
} else if (difference / 60 > 1) {
|
||||
// Minutes
|
||||
tfn.unitOfTime = 'minutes'
|
||||
tfn.time = Math.floor(difference / 60)
|
||||
} else {
|
||||
// Seconds
|
||||
tfn.unitOfTime = 'seconds'
|
||||
tfn.time = Math.floor(difference)
|
||||
}
|
||||
|
||||
// Return time from now data
|
||||
return `${tfn.time} ${tfn.unitOfTime}`
|
||||
}
|
||||
|
|
|
|||
289
templates/nostrmarket/market.html
Normal file
289
templates/nostrmarket/market.html
Normal file
|
|
@ -0,0 +1,289 @@
|
|||
{% extends "public.html" %} {% block page %}
|
||||
<q-layout view="hHh Lpr lff">
|
||||
<q-drawer v-model="drawer" side="left">
|
||||
<q-toolbar class="bg-primary text-white shadow-2">
|
||||
<q-toolbar-title>Settings</q-toolbar-title>
|
||||
<q-btn flat round dense icon="close" @click="drawer = !drawer"></q-btn>
|
||||
</q-toolbar>
|
||||
<div>
|
||||
<div v-if="account" class="bg-transparent q-ma-md">
|
||||
<!-- <q-avatar size="56px" class="q-mb-sm">
|
||||
<img src="https://cdn.quasar.dev/img/boy-avatar.png" />
|
||||
</q-avatar>
|
||||
<div class="text-weight-bold">Razvan Stoenescu</div>
|
||||
<div>@rstoenescu</div> -->
|
||||
<q-btn
|
||||
label="Delete data"
|
||||
class="q-mt-md"
|
||||
color="primary"
|
||||
@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
|
||||
>
|
||||
</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-card>
|
||||
<q-card-section>
|
||||
<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">
|
||||
<q-item v-for="pub in Array.from(pubkeys)" :key="pub">
|
||||
{%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"
|
||||
/>
|
||||
</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-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-item-section>
|
||||
{%endraw%}
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</q-expansion-item>
|
||||
<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-btn @click="addRelay" dense flat icon="add"></q-btn>
|
||||
</q-input>
|
||||
<q-list dense class="q-mt-md">
|
||||
<q-item v-for="url in Array.from(relays)" :key="url">
|
||||
{%raw%}
|
||||
<q-item-section>
|
||||
<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-item-section>
|
||||
{%endraw%}
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</q-expansion-item>
|
||||
</q-list>
|
||||
</div>
|
||||
</q-drawer>
|
||||
<q-page-container>
|
||||
<div class="row q-mb-md">
|
||||
<div class="col-12 q-gutter-y-md">
|
||||
<q-toolbar>
|
||||
<q-btn flat round dense icon="menu" @click="drawer = !drawer"></q-btn>
|
||||
{%raw%}
|
||||
<q-toolbar-title style="text-transform: capitalize">
|
||||
{{ activePage }}
|
||||
</q-toolbar-title>
|
||||
{%endraw%}
|
||||
<q-input
|
||||
class="float-left q-ml-md"
|
||||
standout
|
||||
square
|
||||
dense
|
||||
outlined
|
||||
clearable
|
||||
v-model.trim="searchText"
|
||||
label="Search for products"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon v-if="!searchText" name="search" />
|
||||
</template>
|
||||
</q-input>
|
||||
</q-toolbar>
|
||||
</div>
|
||||
</div>
|
||||
<customer-stall
|
||||
v-if="!isLoading && activeStall"
|
||||
:stall="stalls.find(stall => stall.id == activeStall)"
|
||||
:products="filterProducts"
|
||||
:product-detail="activeProduct"
|
||||
:relays="relays"
|
||||
:account="account"
|
||||
@change-page="navigateTo"
|
||||
></customer-stall>
|
||||
<customer-market
|
||||
v-else
|
||||
:products="filterProducts"
|
||||
@change-page="navigateTo"
|
||||
></customer-market>
|
||||
</q-page-container>
|
||||
<!-- ACCOUNT DIALOG -->
|
||||
<q-dialog v-model="accountDialog.show" persistent>
|
||||
<q-card style="min-width: 350px">
|
||||
<q-card-section class="row items-center q-pb-none">
|
||||
<div class="text-h6">Account Setup</div>
|
||||
<q-space></q-space>
|
||||
<q-btn icon="close" flat round dense v-close-popup></q-btn>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<p>Type your Nostr private key or generate a new one.</p>
|
||||
<small> You can also use a Nostr-capable extension. </small>
|
||||
</q-card-section>
|
||||
|
||||
<q-card-section class="q-pt-none">
|
||||
<q-input
|
||||
dense
|
||||
label="Private key (hex)"
|
||||
v-model="accountDialog.data.key"
|
||||
autofocus
|
||||
@keyup.enter="createAccount"
|
||||
:error="!isValidKey"
|
||||
></q-input>
|
||||
|
||||
<q-item tag="label">
|
||||
<q-item-section avatar top>
|
||||
<q-checkbox v-model="accountDialog.data.watchOnly"></q-checkbox>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label>Is this a Public Key?</q-item-label>
|
||||
<q-item-label caption>
|
||||
If not using an Nostr capable extension, you'll have to sign
|
||||
events manually! Better to use a Private Key that you can delete
|
||||
later, or just generate an ephemeral key pair to use in the
|
||||
Marketplace!
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</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-else flat label="Generate" @click="generateKeyPair"></q-btn>
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</q-layout>
|
||||
{% endblock %} {% block scripts %}
|
||||
<script src="https://unpkg.com/nostr-tools/lib/nostr.bundle.js"></script>
|
||||
|
||||
<script src="{{ url_for('nostrmarket_static', path='js/utils.js') }}"></script>
|
||||
<script src="{{ url_for('nostrmarket_static', path='components/product-card/product-card.js') }}"></script>
|
||||
<script src="{{ url_for('nostrmarket_static', path='components/customer-market/customer-market.js') }}"></script>
|
||||
<script src="{{ url_for('nostrmarket_static', path='components/customer-stall/customer-stall.js') }}"></script>
|
||||
<script src="{{ url_for('nostrmarket_static', path='components/product-detail/product-detail.js') }}"></script>
|
||||
<script src="{{ url_for('nostrmarket_static', path='components/shopping-cart/shopping-cart.js') }}"></script>
|
||||
<script src="{{ url_for('nostrmarket_static', path='components/chat-dialog/chat-dialog.js') }}"></script>
|
||||
<script src="{{ url_for('nostrmarket_static', path='js/market.js') }}"></script>
|
||||
<style scoped>
|
||||
.q-field__native span {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.chat-container {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-rows: 1fr auto;
|
||||
/*height: calc(100vh - 200px);*/
|
||||
height: 70vh;
|
||||
}
|
||||
|
||||
.chat-box {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
padding: 1rem;
|
||||
overflow-y: auto;
|
||||
margin-left: auto;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.chat-messages {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.chat-other {
|
||||
}
|
||||
|
||||
.chat-input {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: end;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
10
views.py
10
views.py
|
|
@ -1,7 +1,7 @@
|
|||
import json
|
||||
from http import HTTPStatus
|
||||
|
||||
from fastapi import Depends, Request
|
||||
from fastapi import Depends, Query, Request
|
||||
from fastapi.templating import Jinja2Templates
|
||||
from loguru import logger
|
||||
from starlette.responses import HTMLResponse
|
||||
|
|
@ -20,3 +20,11 @@ async def index(request: Request, user: User = Depends(check_user_exists)):
|
|||
"nostrmarket/index.html",
|
||||
{"request": request, "user": user.dict()},
|
||||
)
|
||||
|
||||
|
||||
@nostrmarket_ext.get("/market", response_class=HTMLResponse)
|
||||
async def market(request: Request):
|
||||
return nostrmarket_renderer().TemplateResponse(
|
||||
"nostrmarket/market.html",
|
||||
{"request": request},
|
||||
)
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue