Compare commits
3 commits
65eda5648c
...
985c1494b5
| Author | SHA1 | Date | |
|---|---|---|---|
985c1494b5
|
|||
|
9a125e3111
|
|||
|
269dcde557
|
18 changed files with 818 additions and 176 deletions
|
|
@ -1,8 +1,12 @@
|
|||
import { wallet } from '@/wallet';
|
||||
import { StateController } from '@lit-app/state';
|
||||
import type { NDKUser } from '@nostr-dev-kit/ndk';
|
||||
import formatDateTime from '@utils/formatDateTime';
|
||||
import { LitElement, css, html } from 'lit';
|
||||
import { customElement, property } from 'lit/decorators.js';
|
||||
import { customElement, property, state } from 'lit/decorators.js';
|
||||
import { classMap } from 'lit/directives/class-map.js';
|
||||
|
||||
import { ndk } from '@/ndk';
|
||||
import '@components/MarkdownContent';
|
||||
|
||||
@customElement('arx-forum-post')
|
||||
|
|
@ -14,6 +18,16 @@ export class ForumPost extends LitElement {
|
|||
@property({ type: String }) content = '';
|
||||
@property({ type: Boolean }) isHighlighted = false;
|
||||
|
||||
@state() private zapAmountDialogOpen = false;
|
||||
@state() public authorProfile: NDKUser | undefined = undefined;
|
||||
|
||||
override connectedCallback(): void {
|
||||
super.connectedCallback();
|
||||
this.authorProfile = ndk.getUser({ pubkey: this.npub });
|
||||
new StateController(this, wallet);
|
||||
wallet.loadWallet();
|
||||
}
|
||||
|
||||
static override styles = [
|
||||
css`
|
||||
.post {
|
||||
|
|
@ -171,14 +185,24 @@ export class ForumPost extends LitElement {
|
|||
}
|
||||
|
||||
private _handleZap() {
|
||||
alert('Zapping is not yet implemented');
|
||||
this.dispatchEvent(
|
||||
new CustomEvent('zap', {
|
||||
detail: { postId: this.id, npub: this.npub },
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
}),
|
||||
);
|
||||
// setting to false and then to true forces the dialog to open, even when it wasn't closed correctly
|
||||
this.zapAmountDialogOpen = false;
|
||||
setTimeout(() => {
|
||||
this.zapAmountDialogOpen = true;
|
||||
}, 0);
|
||||
}
|
||||
|
||||
private async _doZap(e: Event) {
|
||||
if (!(e instanceof CustomEvent)) return;
|
||||
e.preventDefault();
|
||||
const zapAmount = Number.parseInt(e.detail.value);
|
||||
if (Number.isNaN(zapAmount) || zapAmount <= 10) {
|
||||
alert('Zap amount must be greater or equal to 10');
|
||||
return;
|
||||
}
|
||||
await wallet.nutZap(zapAmount, this.authorProfile!, this.id);
|
||||
|
||||
this.zapAmountDialogOpen = false;
|
||||
}
|
||||
|
||||
private _handleDownzap() {
|
||||
|
|
@ -206,6 +230,16 @@ export class ForumPost extends LitElement {
|
|||
};
|
||||
|
||||
return html`
|
||||
<arx-prompt
|
||||
promptText="Zap amount"
|
||||
placeholder="Enter zap amount"
|
||||
@save=${this._doZap}
|
||||
@cancel=${() => {
|
||||
this.zapAmountDialogOpen = false;
|
||||
}}
|
||||
showInput
|
||||
.open=${this.zapAmountDialogOpen}
|
||||
></arx-prompt>
|
||||
<div class=${classMap(postClasses)} id="post-${this.id}">
|
||||
<div class="post__sidebar">
|
||||
<arx-nostr-profile
|
||||
|
|
@ -248,7 +282,7 @@ export class ForumPost extends LitElement {
|
|||
></iconify-icon>
|
||||
</arx-button>
|
||||
|
||||
<arx-button label="Zap" @click=${this._handleZap} disabled>
|
||||
<arx-button label="Zap" @click=${this._handleZap}>
|
||||
<iconify-icon
|
||||
slot="prefix"
|
||||
icon="mdi:lightning-bolt"
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
import { StyledToggle } from '@/components/General/Toggle';
|
||||
import { ArxInputChangeEvent, type StyledInput } from '@components/General/Input';
|
||||
import { LitElement, html } from 'lit';
|
||||
import { customElement, state } from 'lit/decorators.js';
|
||||
|
||||
import '@components/General/Input';
|
||||
import '@components/General/Fieldset';
|
||||
import '@components/General/Input';
|
||||
import '@components/General/Select';
|
||||
|
||||
interface DateTimeFormatOptions {
|
||||
|
|
@ -71,10 +72,10 @@ export class DateTimeSettings extends LitElement {
|
|||
}
|
||||
|
||||
private handleChange(key: keyof DateTimeFormatOptions, e: Event) {
|
||||
const target = e.target as HTMLSelectElement | HTMLInputElement | StyledToggle;
|
||||
let value: string | boolean | undefined = target.value;
|
||||
let value = e instanceof ArxInputChangeEvent ? e.detail.value : (e.target as HTMLSelectElement).value;
|
||||
const target = e.target as StyledInput | HTMLSelectElement | HTMLInputElement | StyledToggle;
|
||||
|
||||
if (key === 'hour12' && target instanceof StyledToggle) value = target.checked;
|
||||
if (key === 'hour12' && target instanceof StyledToggle) value = target.checked.toString();
|
||||
|
||||
this.options = {
|
||||
...this.options,
|
||||
|
|
@ -126,7 +127,7 @@ export class DateTimeSettings extends LitElement {
|
|||
label="Locale"
|
||||
type="text"
|
||||
.value=${this.options.locale}
|
||||
@input=${(e: Event) => this.handleChange('locale', e)}
|
||||
@change=${(e: Event) => this.handleChange('locale', e)}
|
||||
>
|
||||
</arx-input>
|
||||
|
||||
|
|
|
|||
|
|
@ -186,8 +186,8 @@ export class StyledButton extends LitElement {
|
|||
}
|
||||
|
||||
private _handleClick(e: MouseEvent) {
|
||||
e.preventDefault();
|
||||
if (this.disabled || this.loading) {
|
||||
e.preventDefault();
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,17 +1,35 @@
|
|||
import { LitElement, css, html } from 'lit';
|
||||
import { customElement, property } from 'lit/decorators.js';
|
||||
import { LitElement, type PropertyValues, css, html } from 'lit';
|
||||
import { customElement, property, query, state } from 'lit/decorators.js';
|
||||
import { when } from 'lit/directives/when.js';
|
||||
|
||||
export class ArxInputChangeEvent extends CustomEvent<{ value: string }> {
|
||||
constructor(value: string) {
|
||||
super('change', { detail: { value } });
|
||||
}
|
||||
}
|
||||
|
||||
@customElement('arx-input')
|
||||
export class StyledInput extends LitElement {
|
||||
@property() placeholder = '';
|
||||
@property() value = '';
|
||||
@property({ type: Boolean }) disabled = false;
|
||||
@property() type = 'text';
|
||||
@property() type: 'text' | 'number' | 'password' = 'text';
|
||||
@property() name = '';
|
||||
@property({ type: Boolean }) required = false;
|
||||
@property() label = '';
|
||||
|
||||
@query('input') private _input!: HTMLInputElement;
|
||||
|
||||
@state() private _value = '';
|
||||
|
||||
protected override firstUpdated(_changedProperties: PropertyValues): void {
|
||||
this._value = this.value;
|
||||
}
|
||||
|
||||
protected override updated(changedProperties: PropertyValues): void {
|
||||
if (changedProperties.has('value')) this._value = this.value;
|
||||
}
|
||||
|
||||
static override styles = css`
|
||||
:host {
|
||||
display: inline-block;
|
||||
|
|
@ -98,7 +116,7 @@ export class StyledInput extends LitElement {
|
|||
return html`
|
||||
${when(this.label, () => html`<label for="input-${this.name}">${this.label}</label>`)}
|
||||
<input
|
||||
.value=${this.value}
|
||||
.value=${this._value}
|
||||
?disabled=${this.disabled}
|
||||
?required=${this.required}
|
||||
placeholder=${this.placeholder}
|
||||
|
|
@ -114,52 +132,24 @@ export class StyledInput extends LitElement {
|
|||
}
|
||||
|
||||
private _handleKeyDown(e: KeyboardEvent) {
|
||||
this.dispatchEvent(
|
||||
new CustomEvent('keydown', {
|
||||
detail: { key: e.key },
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
}),
|
||||
);
|
||||
this.dispatchEvent(new CustomEvent('keydown', { detail: { key: e.key }, composed: true, bubbles: true }));
|
||||
}
|
||||
|
||||
private _handleKeyUp(e: KeyboardEvent) {
|
||||
this.dispatchEvent(
|
||||
new CustomEvent('keyup', {
|
||||
detail: { key: e.key },
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
}),
|
||||
);
|
||||
this.dispatchEvent(new CustomEvent('keyup', { detail: { key: e.key }, composed: true, bubbles: true }));
|
||||
}
|
||||
|
||||
private _handleFocus() {
|
||||
this.dispatchEvent(
|
||||
new CustomEvent('focus', {
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
}),
|
||||
);
|
||||
this.dispatchEvent(new CustomEvent('focus', { composed: true, bubbles: true }));
|
||||
}
|
||||
|
||||
private _handleBlur() {
|
||||
this.dispatchEvent(
|
||||
new CustomEvent('blur', {
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
}),
|
||||
);
|
||||
this.dispatchEvent(new CustomEvent('blur', { composed: true, bubbles: true }));
|
||||
}
|
||||
|
||||
private _handleInput(e: InputEvent) {
|
||||
const input = e.target as HTMLInputElement;
|
||||
this.value = input.value;
|
||||
this.dispatchEvent(
|
||||
new CustomEvent('input', {
|
||||
detail: { value: this.value },
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
}),
|
||||
);
|
||||
this._value = this._input.value;
|
||||
this.dispatchEvent(new ArxInputChangeEvent(this._value));
|
||||
e.preventDefault();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
import type { ArxInputChangeEvent } from '@components/General/Input';
|
||||
import { LitElement, css, html } from 'lit';
|
||||
import { customElement, property, state } from 'lit/decorators.js';
|
||||
import { classMap } from 'lit/directives/class-map.js';
|
||||
|
|
@ -131,9 +132,8 @@ export class EvePrompt extends LitElement {
|
|||
if (e.key === 'Enter' && !e.shiftKey) this._handleSave();
|
||||
}
|
||||
|
||||
private _handleInputChange(e: Event) {
|
||||
const target = e.target as HTMLInputElement;
|
||||
this._inputValue = target.value;
|
||||
private _handleInputChange(e: ArxInputChangeEvent) {
|
||||
this._inputValue = e.detail.value;
|
||||
}
|
||||
|
||||
private _handleCancel() {
|
||||
|
|
@ -166,7 +166,7 @@ export class EvePrompt extends LitElement {
|
|||
type="text"
|
||||
class="input-field"
|
||||
.value=${this._inputValue}
|
||||
@input=${this._handleInputChange}
|
||||
@change=${this._handleInputChange}
|
||||
placeholder=${this.placeholder}
|
||||
></arx-input>
|
||||
`
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import { LitElement, css, html } from 'lit';
|
||||
import { customElement, property } from 'lit/decorators.js';
|
||||
import { when } from 'lit/directives/when.js';
|
||||
import { ArxInputChangeEvent } from './Input';
|
||||
|
||||
@customElement('arx-textarea')
|
||||
export class StyledTextarea extends LitElement {
|
||||
|
|
@ -201,12 +202,6 @@ export class StyledTextarea extends LitElement {
|
|||
private _handleInput(e: InputEvent) {
|
||||
const textarea = e.target as HTMLTextAreaElement;
|
||||
this.value = textarea.value;
|
||||
this.dispatchEvent(
|
||||
new CustomEvent('input', {
|
||||
detail: { value: this.value },
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
}),
|
||||
);
|
||||
this.dispatchEvent(new ArxInputChangeEvent(this.value));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import { ndk } from '@/ndk';
|
||||
import type { ArxInputChangeEvent } from '@components/General/Input';
|
||||
import type { NDKEvent } from '@nostr-dev-kit/ndk';
|
||||
import * as nip19 from '@nostr/tools/nip19';
|
||||
import { LitElement, css, html } from 'lit';
|
||||
|
|
@ -8,8 +9,8 @@ import { keyed } from 'lit/directives/keyed.js';
|
|||
import { map } from 'lit/directives/map.js';
|
||||
import { when } from 'lit/directives/when.js';
|
||||
|
||||
import '@components/HeaderSugestion';
|
||||
import '@components/General/Input';
|
||||
import '@components/HeaderSugestion';
|
||||
|
||||
@customElement('arx-header')
|
||||
export class Header extends LitElement {
|
||||
|
|
@ -49,10 +50,10 @@ export class Header extends LitElement {
|
|||
.nav-buttons {
|
||||
display: flex;
|
||||
gap: var(--space-xs, 0.5rem);
|
||||
padding-right: var(--space-xs, 0.5rem);
|
||||
padding: 0 var(--space-xs, 0.5rem);
|
||||
}
|
||||
|
||||
.nav-buttons button {
|
||||
button {
|
||||
text-decoration: none;
|
||||
color: var(--color-primary-content);
|
||||
background: oklch(from var(--color-primary-content) l c h / 0.1);
|
||||
|
|
@ -66,23 +67,21 @@ export class Header extends LitElement {
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
&:hover {
|
||||
background: oklch(from var(--color-primary-content) l c h / 0.2);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: calc(var(--depth) * 2px) calc(var(--depth) * 2px)
|
||||
calc(var(--depth) * 4px)
|
||||
oklch(from var(--color-base-content) l c h / 0.15);
|
||||
}
|
||||
&:active {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
.nav-buttons button:hover {
|
||||
background: oklch(from var(--color-primary-content) l c h / 0.2);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: calc(var(--depth) * 2px) calc(var(--depth) * 2px)
|
||||
calc(var(--depth) * 4px)
|
||||
oklch(from var(--color-base-content) l c h / 0.15);
|
||||
}
|
||||
|
||||
.nav-buttons button:active {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
.nav-buttons button.disabled {
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
&.disabled {
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.search-container {
|
||||
|
|
@ -153,7 +152,7 @@ export class Header extends LitElement {
|
|||
placeholder=${this.url}
|
||||
@keyup=${this._handleSearch}
|
||||
@focus=${this._handleFocus}
|
||||
@input=${this._handleInput}
|
||||
@change=${this._handleInput}
|
||||
></arx-input>
|
||||
${when(
|
||||
this.showSuggestions,
|
||||
|
|
@ -175,16 +174,25 @@ export class Header extends LitElement {
|
|||
`,
|
||||
)}
|
||||
</div>
|
||||
<div class="nav-buttons">
|
||||
<button @click=${this._goToWallet}>
|
||||
<iconify-icon icon="material-symbols:wallet"></iconify-icon>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
`;
|
||||
}
|
||||
|
||||
private _goToWallet() {
|
||||
window.location.hash = 'wallet';
|
||||
}
|
||||
|
||||
private _handleFocus() {
|
||||
this.showSuggestions = true;
|
||||
}
|
||||
|
||||
private _handleInput(e: InputEvent) {
|
||||
this.searchQuery = (e.target as HTMLInputElement).value;
|
||||
private _handleInput(e: ArxInputChangeEvent) {
|
||||
this.searchQuery = e.detail.value;
|
||||
if (this._debounceTimeout) {
|
||||
clearTimeout(this._debounceTimeout);
|
||||
}
|
||||
|
|
@ -245,8 +253,6 @@ export class Header extends LitElement {
|
|||
private _handleSearch(e: KeyboardEvent) {
|
||||
if (e.key !== 'Enter') return;
|
||||
|
||||
const target = e.target as HTMLInputElement;
|
||||
this.searchQuery = target.value;
|
||||
this.showSuggestions = false;
|
||||
|
||||
if (this.searchQuery.startsWith('npub1')) {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import { ndk, setSigner } from '@/ndk';
|
||||
import type { ArxInputChangeEvent } from '@components/General/Input';
|
||||
import { animate } from '@lit-labs/motion';
|
||||
import { randomBytes } from '@noble/ciphers/webcrypto';
|
||||
import { NDKEvent, NDKKind, NDKPrivateKeySigner } from '@nostr-dev-kit/ndk';
|
||||
|
|
@ -10,10 +11,10 @@ import { encodeBase64 } from '@std/encoding/base64';
|
|||
import { LitElement, css, html } from 'lit';
|
||||
import { customElement, state } from 'lit/decorators.js';
|
||||
|
||||
import '@components/LoadingView';
|
||||
import '@components/General/Button';
|
||||
import '@components/General/Input';
|
||||
import '@components/General/Fieldset';
|
||||
import '@components/General/Input';
|
||||
import '@components/LoadingView';
|
||||
|
||||
@customElement('arx-initial-setup')
|
||||
export class InitialSetup extends LitElement {
|
||||
|
|
@ -201,8 +202,8 @@ export class InitialSetup extends LitElement {
|
|||
}, 300);
|
||||
}
|
||||
|
||||
private onSeedPhraseInput(event: Event) {
|
||||
this.seedPhrase = (event.target as HTMLInputElement).value;
|
||||
private onSeedPhraseInput(event: ArxInputChangeEvent) {
|
||||
this.seedPhrase = event.detail.value;
|
||||
}
|
||||
|
||||
private generateSeedPhrase() {
|
||||
|
|
@ -300,7 +301,7 @@ export class InitialSetup extends LitElement {
|
|||
</p>
|
||||
<div class="input-group">
|
||||
<arx-input
|
||||
@input=${this.onSeedPhraseInput}
|
||||
@change=${this.onSeedPhraseInput}
|
||||
.value=${this.seedPhrase}
|
||||
id="seed-input"
|
||||
type="text"
|
||||
|
|
@ -381,16 +382,16 @@ export class InitialSetup extends LitElement {
|
|||
`;
|
||||
}
|
||||
|
||||
private onUserNameInput(e: Event) {
|
||||
this.userName = (e.target as HTMLInputElement).value;
|
||||
private onUserNameInput(e: CustomEvent<{ value: string }>) {
|
||||
this.userName = e.detail.value;
|
||||
}
|
||||
|
||||
private onProfileImageInput(e: Event) {
|
||||
this.profileImage = (e.target as HTMLInputElement).value;
|
||||
private onProfileImageInput(e: CustomEvent<{ value: string }>) {
|
||||
this.profileImage = e.detail.value;
|
||||
}
|
||||
|
||||
private onLightningAddressInput(e: Event) {
|
||||
this.lightningAddress = (e.target as HTMLInputElement).value;
|
||||
private onLightningAddressInput(e: CustomEvent<{ value: string }>) {
|
||||
this.lightningAddress = e.detail.value;
|
||||
}
|
||||
|
||||
private renderPageFour() {
|
||||
|
|
@ -409,7 +410,7 @@ export class InitialSetup extends LitElement {
|
|||
id="username"
|
||||
type="text"
|
||||
.value=${this.userName}
|
||||
@input=${this.onUserNameInput}
|
||||
@change=${this.onUserNameInput}
|
||||
placeholder="Enter your name"
|
||||
></arx-input>
|
||||
</arx-fieldset>
|
||||
|
|
@ -418,7 +419,7 @@ export class InitialSetup extends LitElement {
|
|||
id="profile-image"
|
||||
type="text"
|
||||
.value=${this.profileImage}
|
||||
@input=${this.onProfileImageInput}
|
||||
@change=${this.onProfileImageInput}
|
||||
placeholder="Enter image URL"
|
||||
></arx-input>
|
||||
<small class="note">
|
||||
|
|
@ -464,7 +465,7 @@ export class InitialSetup extends LitElement {
|
|||
id="lightning-address"
|
||||
type="text"
|
||||
.value=${this.lightningAddress}
|
||||
@input=${this.onLightningAddressInput}
|
||||
@change=${this.onLightningAddressInput}
|
||||
placeholder="your@lightning.address"
|
||||
/></arx-input>
|
||||
<small class="note">
|
||||
|
|
|
|||
100
src/components/WalletTransactionLine.ts
Normal file
100
src/components/WalletTransactionLine.ts
Normal file
|
|
@ -0,0 +1,100 @@
|
|||
import { StateController } from '@lit-app/state';
|
||||
import { LitElement, css, html } from 'lit';
|
||||
import { customElement, property } from 'lit/decorators.js';
|
||||
|
||||
import { type WalletHistory, wallet } from '@/wallet';
|
||||
|
||||
import formatDateTime from '@/utils/formatDateTime';
|
||||
import satsComma from '@/utils/satsComma';
|
||||
import '@components/General/Card';
|
||||
import '@components/General/Input';
|
||||
|
||||
@customElement('arx-wallet-transaction-line')
|
||||
export class WalletTransactionLine extends LitElement {
|
||||
@property({ type: Object }) transaction!: WalletHistory;
|
||||
|
||||
override connectedCallback(): void {
|
||||
super.connectedCallback();
|
||||
new StateController(this, wallet);
|
||||
}
|
||||
|
||||
static override styles = css`
|
||||
:host {
|
||||
display: block;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid var(--color-base-200);
|
||||
container-type: inline-size;
|
||||
}
|
||||
|
||||
.transaction {
|
||||
display: grid;
|
||||
grid-template-columns: 200px 1fr auto;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.in {
|
||||
color: var(--color-success);
|
||||
}
|
||||
|
||||
.out {
|
||||
color: var(--color-error);
|
||||
}
|
||||
|
||||
.amount {
|
||||
text-align: right;
|
||||
font-family: var(--font-mono);
|
||||
font-weight: bold;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.date {
|
||||
color: var(--color-secondary);
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.profiles {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.sender {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.recipient {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
@container (max-width: 400px) {
|
||||
.transaction {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.amount {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
override render() {
|
||||
return html`<div class="transaction ${this.transaction.direction}">
|
||||
<span class="amount">
|
||||
${this.transaction.direction === 'in' ? '+' : '-'} ${satsComma(this.transaction.amount)}
|
||||
sats
|
||||
</span>
|
||||
<span class="date">${formatDateTime(this.transaction.created_at * 1000)}</span>
|
||||
<div class="profiles">
|
||||
<arx-nostr-profile
|
||||
pubkey=${this.transaction.senderPubkey}
|
||||
class="sender"
|
||||
></arx-nostr-profile>
|
||||
<arx-nostr-profile
|
||||
pubkey=${this.transaction.recipientPubkey}
|
||||
class="recipient"
|
||||
></arx-nostr-profile>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
}
|
||||
82
src/components/Widgets/WalletWidget.ts
Normal file
82
src/components/Widgets/WalletWidget.ts
Normal file
|
|
@ -0,0 +1,82 @@
|
|||
import satsComma from '@/utils/satsComma';
|
||||
import { wallet } from '@/wallet';
|
||||
import '@components/General/Fieldset';
|
||||
import '@components/LoadingView';
|
||||
import '@components/WalletTransactionLine';
|
||||
import { StateController } from '@lit-app/state';
|
||||
import { LitElement, css, html } from 'lit';
|
||||
import { customElement, state } from 'lit/decorators.js';
|
||||
import { when } from 'lit/directives/when.js';
|
||||
|
||||
@customElement('arx-wallet-widget')
|
||||
export class WalletWidget extends LitElement {
|
||||
@state()
|
||||
public loading = false;
|
||||
|
||||
override connectedCallback(): void {
|
||||
super.connectedCallback();
|
||||
new StateController(this, wallet);
|
||||
}
|
||||
|
||||
override async firstUpdated() {
|
||||
this.loading = true;
|
||||
await wallet.loadWallet();
|
||||
this.loading = false;
|
||||
}
|
||||
|
||||
static override styles = [
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.widget-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
border-bottom: var(--border) solid var(--color-base-300);
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.widget-title {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
color: var(--color-base-content);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.bitcoin-icon {
|
||||
color: var(--color-warning);
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
override render() {
|
||||
return html`
|
||||
<div class="widget-header">
|
||||
<h3 class="widget-title">
|
||||
<span class="bitcoin-icon">₿</span> Bitcoin Wallet
|
||||
</h3>
|
||||
</div>
|
||||
<arx-fieldset .legend=${when(
|
||||
this.loading,
|
||||
() => 'Loading...',
|
||||
() => `${satsComma(wallet.balance)} sats`,
|
||||
)}>
|
||||
${when(
|
||||
wallet.sortedHistory.length > 0,
|
||||
() => html`
|
||||
Latest Transaction:
|
||||
<arx-wallet-transaction-line .transaction=${wallet.sortedHistory[0]}></arx-wallet-transaction-line>
|
||||
`,
|
||||
() => 'No transactions yet',
|
||||
)}
|
||||
</arx-fieldset>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +1,4 @@
|
|||
import type { ArxInputChangeEvent } from '@/components/General/Input';
|
||||
import { getSigner, ndk } from '@/ndk';
|
||||
import { NDKEvent } from '@nostr-dev-kit/ndk';
|
||||
import { LitElement, css, html } from 'lit';
|
||||
|
|
@ -106,8 +107,8 @@ export class ArborPostCreator extends LitElement {
|
|||
}
|
||||
}
|
||||
|
||||
private handleContentInput(e: InputEvent) {
|
||||
this.postContent = (e.target as HTMLTextAreaElement).value;
|
||||
private handleContentInput(e: ArxInputChangeEvent) {
|
||||
this.postContent = e.detail.value;
|
||||
if (this.error && this.postContent.length >= 10) {
|
||||
this.error = null;
|
||||
}
|
||||
|
|
@ -121,7 +122,7 @@ export class ArborPostCreator extends LitElement {
|
|||
<arx-textarea
|
||||
placeholder="Post. You can use Markdown here."
|
||||
.value=${this.postContent}
|
||||
@input=${this.handleContentInput}
|
||||
@change=${this.handleContentInput}
|
||||
?disabled=${this.isCreating}
|
||||
></arx-textarea>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,11 +1,12 @@
|
|||
import { getSigner, ndk } from '@/ndk';
|
||||
import type { ArxInputChangeEvent } from '@components/General/Input';
|
||||
import { NDKEvent } from '@nostr-dev-kit/ndk';
|
||||
import { LitElement, css, html } from 'lit';
|
||||
import { customElement, property, state } from 'lit/decorators.js';
|
||||
|
||||
import '@components/General/Button';
|
||||
import '@components/General/Input';
|
||||
import '@components/General/Textarea';
|
||||
import '@components/General/Button';
|
||||
|
||||
@customElement('arx-arbor-topic-creator')
|
||||
export class ArborTopicCreator extends LitElement {
|
||||
|
|
@ -86,12 +87,12 @@ export class ArborTopicCreator extends LitElement {
|
|||
}
|
||||
}
|
||||
|
||||
private handleTopicInput(e: InputEvent) {
|
||||
this.newTopic = (e.target as HTMLInputElement).value;
|
||||
private handleTopicInput(e: ArxInputChangeEvent) {
|
||||
this.newTopic = e.detail.value;
|
||||
}
|
||||
|
||||
private handleContentInput(e: InputEvent) {
|
||||
this.topicContent = (e.target as HTMLTextAreaElement).value;
|
||||
private handleContentInput(e: ArxInputChangeEvent) {
|
||||
this.topicContent = e.detail.value;
|
||||
}
|
||||
|
||||
override render() {
|
||||
|
|
@ -102,14 +103,14 @@ export class ArborTopicCreator extends LitElement {
|
|||
type="text"
|
||||
placeholder="New Topic"
|
||||
.value=${this.newTopic}
|
||||
@input=${this.handleTopicInput}
|
||||
@change=${this.handleTopicInput}
|
||||
?disabled=${this.isCreating}
|
||||
></arx-input>
|
||||
|
||||
<arx-textarea
|
||||
placeholder="Topic. You can use Markdown here."
|
||||
.value=${this.topicContent}
|
||||
@input=${this.handleContentInput}
|
||||
@change=${this.handleContentInput}
|
||||
?disabled=${this.isCreating}
|
||||
></arx-textarea>
|
||||
|
||||
|
|
|
|||
|
|
@ -5,10 +5,11 @@ import { customElement, state } from 'lit/decorators.js';
|
|||
import { map } from 'lit/directives/map.js';
|
||||
import { html, literal } from 'lit/static-html.js';
|
||||
|
||||
import '@widgets/BitcoinBlockWidget';
|
||||
import '@components/AppGrid';
|
||||
import '@components/NostrAvatar';
|
||||
import '@components/General/Card';
|
||||
import '@components/NostrAvatar';
|
||||
import '@components/Widgets/BitcoinBlockWidget';
|
||||
import '@components/Widgets/WalletWidget';
|
||||
|
||||
@customElement('arx-eve-home')
|
||||
export class Home extends LitElement {
|
||||
|
|
@ -83,6 +84,10 @@ export class Home extends LitElement {
|
|||
title: 'Bitcoin Block',
|
||||
content: literal`arx-bitcoin-block-widget`,
|
||||
},
|
||||
{
|
||||
title: 'Bitcoin Wallet',
|
||||
content: literal`arx-wallet-widget`,
|
||||
},
|
||||
];
|
||||
|
||||
async loadProperties() {
|
||||
|
|
@ -95,60 +100,71 @@ export class Home extends LitElement {
|
|||
|
||||
static override styles = [
|
||||
css`
|
||||
::-webkit-scrollbar {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--color-base-200);
|
||||
border-radius: var(--radius-field);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--color-base-300);
|
||||
border-radius: var(--radius-field);
|
||||
border: 2px solid var(--color-base-200);
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--color-neutral);
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
margin: auto;
|
||||
height: 90vh;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.home {
|
||||
min-height: calc(100vh - var(--font-2xl));
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.home-container {
|
||||
flex: 1;
|
||||
padding: 0;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.widgets-container {
|
||||
height: 75vh;
|
||||
overflow: auto;
|
||||
width: 350px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
|
||||
& > * {
|
||||
flex: 1;
|
||||
}
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.content-wrapper {
|
||||
gap: 0;
|
||||
height: auto;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.home-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.widgets-container {
|
||||
overflow: unset;
|
||||
height: auto;
|
||||
width: calc(100vw - 40px);
|
||||
flex-direction: row;
|
||||
overflow-x: auto;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.widgets-container {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.welcome-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -173,23 +189,21 @@ export class Home extends LitElement {
|
|||
|
||||
override render() {
|
||||
return html`
|
||||
<div class="home">
|
||||
<div class="content-wrapper">
|
||||
<arx-card class="home-container">
|
||||
<arx-card class="welcome-section">
|
||||
<arx-nostr-avatar
|
||||
.profile=${this.profile}
|
||||
size="huge"
|
||||
></arx-nostr-avatar>
|
||||
<div class="welcome-text">
|
||||
<h1>Welcome, ${this.username}</h1>
|
||||
</div>
|
||||
</arx-card>
|
||||
<arx-app-grid .apps=${this.apps}></arx-app-grid>
|
||||
<div class="content-wrapper">
|
||||
<arx-card class="home-container">
|
||||
<arx-card class="welcome-section">
|
||||
<arx-nostr-avatar
|
||||
.profile=${this.profile}
|
||||
size="huge"
|
||||
></arx-nostr-avatar>
|
||||
<div class="welcome-text">
|
||||
<h1>Welcome, ${this.username}</h1>
|
||||
</div>
|
||||
</arx-card>
|
||||
<div class="widgets-container">
|
||||
${map(this.widgets, (widget) => html`<arx-card><${widget.content}></${widget.content}></arx-card>`)}
|
||||
</div>
|
||||
<arx-app-grid .apps=${this.apps}></arx-app-grid>
|
||||
</arx-card>
|
||||
<div class="widgets-container">
|
||||
${map(this.widgets, (widget) => html`<arx-card><${widget.content}></${widget.content}></arx-card>`)}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -1,16 +1,17 @@
|
|||
import defaultAvatar from '@/default-avatar.png';
|
||||
import { getSigner, getUserProfile, ndk } from '@/ndk';
|
||||
import type { ArxInputChangeEvent } from '@components/General/Input';
|
||||
import { NDKEvent, type NDKUserProfile } from '@nostr-dev-kit/ndk';
|
||||
import { LitElement, css, html } from 'lit';
|
||||
import { customElement, state } from 'lit/decorators.js';
|
||||
import { when } from 'lit/directives/when.js';
|
||||
|
||||
import '@components/DateTimeSettings';
|
||||
import '@components/General/Input';
|
||||
import '@components/General/Button';
|
||||
import '@components/General/Fieldset';
|
||||
import '@components/General/Card';
|
||||
import '@components/Breadcrumbs';
|
||||
import '@components/DateTimeSettings';
|
||||
import '@components/General/Button';
|
||||
import '@components/General/Card';
|
||||
import '@components/General/Fieldset';
|
||||
import '@components/General/Input';
|
||||
|
||||
@customElement('arx-settings')
|
||||
export class EveSettings extends LitElement {
|
||||
|
|
@ -73,11 +74,10 @@ export class EveSettings extends LitElement {
|
|||
}
|
||||
}
|
||||
|
||||
private handleInputChange(e: Event) {
|
||||
const target = e.target as HTMLInputElement;
|
||||
private handleInputChange(field: string, e: ArxInputChangeEvent) {
|
||||
this.profile = {
|
||||
...this.profile,
|
||||
[target.name]: target.value,
|
||||
[field]: e.detail.value,
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -144,7 +144,7 @@ export class EveSettings extends LitElement {
|
|||
type="text"
|
||||
name="name"
|
||||
.value=${this.profile.name}
|
||||
@input=${this.handleInputChange}
|
||||
@change=${(e: ArxInputChangeEvent) => this.handleInputChange('name', e)}
|
||||
placeholder="Your display name"
|
||||
></arx-input>
|
||||
|
||||
|
|
@ -153,7 +153,7 @@ export class EveSettings extends LitElement {
|
|||
type="text"
|
||||
name="image"
|
||||
.value=${this.profile.picture}
|
||||
@input=${this.handleInputChange}
|
||||
@change=${(e: ArxInputChangeEvent) => this.handleInputChange('picture', e)}
|
||||
placeholder="https://example.com/your-image.jpg"
|
||||
></arx-input>
|
||||
|
||||
|
|
@ -162,7 +162,7 @@ export class EveSettings extends LitElement {
|
|||
type="text"
|
||||
name="banner"
|
||||
.value=${this.profile.banner}
|
||||
@input=${this.handleInputChange}
|
||||
@change=${(e: ArxInputChangeEvent) => this.handleInputChange('banner', e)}
|
||||
placeholder="https://example.com/your-image.jpg"
|
||||
></arx-input>
|
||||
</arx-fieldset>
|
||||
|
|
|
|||
78
src/routes/Wallet.ts
Normal file
78
src/routes/Wallet.ts
Normal file
|
|
@ -0,0 +1,78 @@
|
|||
import { wallet } from '@/wallet';
|
||||
import type { ArxInputChangeEvent } from '@components/General/Input';
|
||||
import { StateController } from '@lit-app/state';
|
||||
import { LitElement, css, html } from 'lit';
|
||||
import { customElement } from 'lit/decorators.js';
|
||||
|
||||
import '@components/General/Card';
|
||||
import '@components/General/Input';
|
||||
import '@components/WalletTransactionLine';
|
||||
|
||||
@customElement('arx-wallet-route')
|
||||
export class WalletRoute extends LitElement {
|
||||
static override styles = css`
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.transaction-list {
|
||||
background-color: var(--color-base-100);
|
||||
border-radius: var(--radius-card);
|
||||
padding: 20px;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.transaction-list h3 {
|
||||
color: var(--color-base-content);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
arx-wallet-transaction-line:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
`;
|
||||
|
||||
private inputToken = '';
|
||||
|
||||
override async firstUpdated() {
|
||||
await wallet.loadWallet();
|
||||
}
|
||||
|
||||
async doReceiveToken() {
|
||||
console.log('clicked', Date.now());
|
||||
await wallet.receiveToken(this.inputToken);
|
||||
this.inputToken = '';
|
||||
}
|
||||
|
||||
override connectedCallback(): void {
|
||||
super.connectedCallback();
|
||||
new StateController(this, wallet);
|
||||
}
|
||||
|
||||
override render() {
|
||||
return html`
|
||||
<arx-card>
|
||||
<h1>Wallet</h1>
|
||||
<hr />
|
||||
<h2>You have ${wallet.balance} sats</h2>
|
||||
<arx-input
|
||||
label="Token"
|
||||
.value=${this.inputToken}
|
||||
@change=${(e: ArxInputChangeEvent) => {
|
||||
if (!e.detail.value) return;
|
||||
this.inputToken = e.detail.value;
|
||||
}}
|
||||
type="text"
|
||||
id="token"
|
||||
></arx-input>
|
||||
<arx-button label="Receive" @click=${this.doReceiveToken}></arx-button>
|
||||
<div class="transaction-list">
|
||||
<h3>Transaction History</h3>
|
||||
${wallet.sortedHistory.map(
|
||||
(h) => html`<arx-wallet-transaction-line .transaction=${h}></arx-wallet-transaction-line>`,
|
||||
)}
|
||||
</div>
|
||||
</arx-card>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,12 +1,13 @@
|
|||
import '@components/InitialSetup';
|
||||
import '@routes/404Page';
|
||||
import '@routes/Arbor/Home';
|
||||
import '@routes/Arbor/NewPost';
|
||||
import '@routes/Arbor/NewTopic';
|
||||
import '@routes/Arbor/TopicView';
|
||||
import '@routes/Home';
|
||||
import '@routes/Profile';
|
||||
import '@routes/Settings';
|
||||
import '@routes/Arbor/Home';
|
||||
import '@routes/Arbor/NewTopic';
|
||||
import '@routes/Arbor/TopicView';
|
||||
import '@routes/Arbor/NewPost';
|
||||
import '@components/InitialSetup';
|
||||
import '@routes/Wallet';
|
||||
|
||||
import { spread } from '@open-wc/lit-helpers';
|
||||
import { LitElement, css } from 'lit';
|
||||
|
|
@ -65,6 +66,11 @@ export default class EveRouter extends LitElement {
|
|||
params: {},
|
||||
component: literal`arx-settings`,
|
||||
},
|
||||
{
|
||||
pattern: 'wallet',
|
||||
params: {},
|
||||
component: literal`arx-wallet-route`,
|
||||
},
|
||||
{
|
||||
pattern: '404',
|
||||
params: {},
|
||||
|
|
@ -92,6 +98,27 @@ export default class EveRouter extends LitElement {
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--color-base-200);
|
||||
border-radius: var(--radius-field);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--color-base-300);
|
||||
border-radius: var(--radius-field);
|
||||
border: 2px solid var(--color-base-200);
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--color-neutral);
|
||||
}
|
||||
|
||||
.window {
|
||||
overflow: auto;
|
||||
}
|
||||
|
|
@ -103,6 +130,10 @@ export default class EveRouter extends LitElement {
|
|||
margin: 0 auto;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.hide-overflow {
|
||||
overflow: hidden;
|
||||
}
|
||||
`;
|
||||
|
||||
constructor() {
|
||||
|
|
@ -268,7 +299,7 @@ export default class EveRouter extends LitElement {
|
|||
@go-forward=${this.goForward}
|
||||
title="Eve"
|
||||
></arx-header>
|
||||
<div class="window">
|
||||
<div class="window ${this.currentRoute.pattern === 'home' ? 'hide-overflow' : ''}">
|
||||
<div class="window-content">
|
||||
${keyed(
|
||||
this.currentRoute.params,
|
||||
|
|
|
|||
|
|
@ -43,6 +43,8 @@
|
|||
--border: 2px;
|
||||
--depth: 1;
|
||||
--noise: 1;
|
||||
|
||||
--font-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Mono', 'Droid Sans Mono', 'Source Code Pro', monospace;
|
||||
}
|
||||
|
||||
body.dark {
|
||||
|
|
|
|||
306
src/wallet.ts
Normal file
306
src/wallet.ts
Normal file
|
|
@ -0,0 +1,306 @@
|
|||
import { CashuMint, CashuWallet, type Proof, type SendOptions } from '@cashu/cashu-ts';
|
||||
import { bytesToHex } from '@noble/ciphers/utils';
|
||||
import { secp256k1 } from '@noble/curves/secp256k1';
|
||||
import { NDKEvent, type NDKEventId, NDKKind, type NDKTag, type NDKUser } from '@nostr-dev-kit/ndk';
|
||||
import { getSigner, ndk } from './ndk';
|
||||
|
||||
import { State, property } from '@lit-app/state';
|
||||
|
||||
export type WalletHistory = {
|
||||
id: string;
|
||||
amount: number;
|
||||
created_at: number;
|
||||
direction: 'in' | 'out';
|
||||
tokenEventId: NDKEventId;
|
||||
nutZapEventId?: NDKEventId;
|
||||
senderPubkey?: string;
|
||||
recipientPubkey: string;
|
||||
};
|
||||
|
||||
class Wallet extends State {
|
||||
static mintUrl = 'https://testnut.cashu.space'; // TODO: this should be user controlled
|
||||
|
||||
private walletEvent: NDKEvent | null = null;
|
||||
private cashuWallet: CashuWallet = new CashuWallet(new CashuMint(Wallet.mintUrl));
|
||||
|
||||
private proofs: Proof[] = [];
|
||||
private eventIdToProofIdMap: Map<NDKEventId, [string, string][]> = new Map();
|
||||
|
||||
private isHandlingZapEvent = false;
|
||||
private zapEventsQueue: NDKEvent[] = [];
|
||||
private latestHistoryTimestamp = 0;
|
||||
|
||||
@property() public balance = 0;
|
||||
@property() public history: WalletHistory[] = [];
|
||||
@property() public sortedHistory: WalletHistory[] = [];
|
||||
|
||||
async loadWallet() {
|
||||
if (this.walletEvent) return;
|
||||
await getSigner();
|
||||
const user = await ndk.signer!.user()!;
|
||||
const privateWalletEvent = await ndk.fetchEvent({
|
||||
kinds: [17375 as NDKKind],
|
||||
authors: [user.pubkey],
|
||||
});
|
||||
if (!privateWalletEvent) {
|
||||
const walletPrivateKey = secp256k1.utils.randomPrivateKey();
|
||||
const walletPublicKey = secp256k1.getPublicKey(walletPrivateKey);
|
||||
const newPrivateWalletEvent = new NDKEvent(ndk);
|
||||
newPrivateWalletEvent.kind = NDKKind.CashuWallet;
|
||||
newPrivateWalletEvent.content = await ndk.signer!.encrypt(
|
||||
user,
|
||||
JSON.stringify([
|
||||
['privkey', bytesToHex(walletPrivateKey)],
|
||||
['mint', Wallet.mintUrl],
|
||||
]),
|
||||
'nip44',
|
||||
);
|
||||
const publicWalletEvent = new NDKEvent(ndk);
|
||||
publicWalletEvent.kind = NDKKind.CashuMintList;
|
||||
publicWalletEvent.content = '';
|
||||
publicWalletEvent.tags = [
|
||||
['mint', Wallet.mintUrl, 'sat'],
|
||||
['pubkey', bytesToHex(walletPublicKey)],
|
||||
];
|
||||
await newPrivateWalletEvent.sign();
|
||||
await newPrivateWalletEvent.publish();
|
||||
await publicWalletEvent.sign();
|
||||
await publicWalletEvent.publish();
|
||||
this.walletEvent = newPrivateWalletEvent;
|
||||
} else this.walletEvent = privateWalletEvent;
|
||||
|
||||
const walletHistory = await ndk.fetchEvents({
|
||||
kinds: [NDKKind.CashuWalletTx],
|
||||
authors: [user.pubkey],
|
||||
since: this.walletEvent?.created_at,
|
||||
});
|
||||
|
||||
for (const event of walletHistory) {
|
||||
await this.processHistoryEvent(event);
|
||||
}
|
||||
|
||||
const proofsEvents = await ndk.fetchEvents({
|
||||
kinds: [NDKKind.CashuToken],
|
||||
authors: [user.pubkey],
|
||||
});
|
||||
|
||||
for (const proofsEvent of proofsEvents) {
|
||||
const {
|
||||
mint,
|
||||
proofs = [],
|
||||
del = [],
|
||||
} = JSON.parse(await ndk.signer!.decrypt(user, proofsEvent.content, 'nip44')) as {
|
||||
mint: string;
|
||||
proofs: Proof[];
|
||||
del?: NDKEventId[];
|
||||
};
|
||||
|
||||
if (mint !== this.cashuWallet.mint.mintUrl) continue;
|
||||
|
||||
for (const eventId of del) {
|
||||
const toDeletes = this.eventIdToProofIdMap.get(eventId);
|
||||
if (toDeletes)
|
||||
for (const proof of toDeletes)
|
||||
this.proofs = this.proofs.filter((p) => p.secret !== proof[0] || p.C !== proof[1]);
|
||||
this.eventIdToProofIdMap.delete(eventId);
|
||||
}
|
||||
|
||||
for (const proof of proofs) this.proofs.push(proof);
|
||||
|
||||
this.eventIdToProofIdMap.set(
|
||||
proofsEvent.id,
|
||||
proofs.map((p) => [p.secret, p.C]),
|
||||
);
|
||||
}
|
||||
|
||||
ndk
|
||||
.subscribe({
|
||||
kinds: [NDKKind.Nutzap],
|
||||
'#p': [user.pubkey],
|
||||
since: this.latestHistoryTimestamp,
|
||||
})
|
||||
.on('event', async (event) => {
|
||||
this.zapEventsQueue.push(event);
|
||||
this.handleZapEvent();
|
||||
});
|
||||
|
||||
ndk
|
||||
.subscribe({
|
||||
kinds: [NDKKind.CashuWalletTx],
|
||||
authors: [user.pubkey],
|
||||
since: this.latestHistoryTimestamp,
|
||||
})
|
||||
.on('event', async (event) => {
|
||||
await this.processHistoryEvent(event);
|
||||
});
|
||||
|
||||
this.recalculateBalance();
|
||||
}
|
||||
|
||||
private async processHistoryEvent(event: NDKEvent) {
|
||||
const user = await ndk.signer!.user()!;
|
||||
const parsedContent = JSON.parse(await ndk.signer!.decrypt(user, event.content, 'nip44'));
|
||||
const direction = parsedContent.find((p: [string, string]) => p[0] === 'direction')?.[1];
|
||||
const amount = parsedContent.find((p: [string, string]) => p[0] === 'amount')?.[1];
|
||||
const tokenEventId = parsedContent.find((p: [string, string]) => p[0] === 'e')?.[1];
|
||||
const nutZapEventId = event.tags.find((t: NDKTag) => t[0] === 'e')?.[1];
|
||||
const senderPubkey = event.tags.find((t: NDKTag) => t[0] === 'p')?.[1];
|
||||
if (!nutZapEventId || !senderPubkey) return;
|
||||
this.history.push({
|
||||
id: event.id,
|
||||
amount: Number.parseInt(amount),
|
||||
created_at: event.created_at ?? 0,
|
||||
direction: direction as 'in' | 'out',
|
||||
tokenEventId,
|
||||
nutZapEventId: nutZapEventId as NDKEventId,
|
||||
senderPubkey,
|
||||
recipientPubkey: event.pubkey,
|
||||
});
|
||||
this.latestHistoryTimestamp = Math.max(this.latestHistoryTimestamp, event.created_at ?? 0);
|
||||
this.sortedHistory = [...this.history.sort((a, b) => b.created_at - a.created_at)];
|
||||
}
|
||||
|
||||
private async handleZapEvent() {
|
||||
if (this.isHandlingZapEvent) return;
|
||||
const event = this.zapEventsQueue.shift();
|
||||
if (!event) return;
|
||||
this.isHandlingZapEvent = true;
|
||||
const proofs = JSON.parse(event.tags.find((t) => t[0] === 'proof')?.[1] ?? '[]') as Proof[];
|
||||
this.proofs.push(...proofs);
|
||||
|
||||
const newProofsEvent = await this.createProofsEvent();
|
||||
await this.createHistoryEvent(
|
||||
newProofsEvent,
|
||||
this.proofs.reduce((acc, curr) => acc + curr.amount, 0),
|
||||
'in',
|
||||
);
|
||||
this.recalculateBalance();
|
||||
this.isHandlingZapEvent = false;
|
||||
}
|
||||
|
||||
private async createProofsEvent(): Promise<NDKEvent> {
|
||||
const newProofsEvent = new NDKEvent(ndk);
|
||||
newProofsEvent.kind = NDKKind.CashuToken;
|
||||
newProofsEvent.content = await ndk.signer?.encrypt(
|
||||
await ndk.signer!.user()!,
|
||||
JSON.stringify({
|
||||
mint: this.cashuWallet.mint.mintUrl,
|
||||
proofs: this.proofs,
|
||||
del: Array.from(this.eventIdToProofIdMap.keys()),
|
||||
}),
|
||||
'nip44',
|
||||
)!;
|
||||
await newProofsEvent.sign();
|
||||
await newProofsEvent.publish();
|
||||
return newProofsEvent;
|
||||
}
|
||||
|
||||
recalculateBalance() {
|
||||
this.proofs = this.proofs.filter(
|
||||
(p, index, self) => index === self.findIndex((t) => t.secret === p.secret && t.C === p.C),
|
||||
);
|
||||
this.balance = this.proofs.reduce((acc, curr) => acc + curr.amount, 0);
|
||||
}
|
||||
|
||||
private async createHistoryEvent(newProofsEvent: NDKEvent, amount: number, direction: 'in' | 'out') {
|
||||
const historyEvent = new NDKEvent(ndk);
|
||||
historyEvent.kind = NDKKind.CashuWalletTx;
|
||||
historyEvent.content = await ndk.signer?.encrypt(
|
||||
await ndk.signer!.user()!,
|
||||
JSON.stringify([
|
||||
['direction', direction],
|
||||
['amount', amount.toString()],
|
||||
['e', newProofsEvent.id],
|
||||
]),
|
||||
'nip44',
|
||||
)!;
|
||||
historyEvent.tags = [
|
||||
['e', newProofsEvent.id],
|
||||
['p', newProofsEvent.pubkey],
|
||||
];
|
||||
await historyEvent.sign();
|
||||
await historyEvent.publish();
|
||||
}
|
||||
|
||||
/** @throws Error if token is invalid */
|
||||
async receiveToken(token: string) {
|
||||
const proofs = await this.cashuWallet.receive(token);
|
||||
if (proofs.length === 0) throw new Error('Invalid token');
|
||||
for (const proof of proofs) this.proofs.push(proof);
|
||||
const newProofsEvent = await this.createProofsEvent();
|
||||
const amount = proofs.reduce((acc, curr) => acc + curr.amount, 0);
|
||||
await this.createHistoryEvent(newProofsEvent, amount, 'in');
|
||||
this.recalculateBalance();
|
||||
}
|
||||
|
||||
private async createToken(amount: number, recipient?: NDKUser) {
|
||||
if (amount < 10) throw new Error('Amount must be greater than 10');
|
||||
const sendOptions: SendOptions = {
|
||||
includeFees: true,
|
||||
};
|
||||
if (recipient) {
|
||||
const mintListEvent = await ndk.fetchEvent({
|
||||
kinds: [NDKKind.CashuMintList],
|
||||
authors: [recipient.pubkey],
|
||||
});
|
||||
if (!mintListEvent) throw new Error('Recipient has no mint list');
|
||||
const pubkey = mintListEvent.tags.find((t) => t[0] === 'pubkey')?.[1];
|
||||
if (!pubkey) throw new Error('Recipient has no mint list');
|
||||
sendOptions.pubkey = pubkey;
|
||||
}
|
||||
await this.cashuWallet.getKeySets();
|
||||
const sendResult = await this.cashuWallet.send(amount, this.proofs, sendOptions);
|
||||
this.proofs = sendResult.keep;
|
||||
const proofsEvent = new NDKEvent(ndk);
|
||||
proofsEvent.kind = NDKKind.CashuToken;
|
||||
proofsEvent.content = await ndk.signer?.encrypt(
|
||||
await ndk.signer!.user()!,
|
||||
JSON.stringify({
|
||||
mint: this.cashuWallet.mint.mintUrl,
|
||||
proofs: this.proofs,
|
||||
del: Array.from(this.eventIdToProofIdMap.keys()),
|
||||
}),
|
||||
'nip44',
|
||||
)!;
|
||||
await proofsEvent.sign();
|
||||
await proofsEvent.publish();
|
||||
this.recalculateBalance();
|
||||
return sendResult.send;
|
||||
}
|
||||
|
||||
async nutZap(amount: number, recipient: NDKUser, eventId?: NDKEventId, message?: string) {
|
||||
const token = await this.createToken(amount, recipient);
|
||||
const zapEvent = new NDKEvent(ndk);
|
||||
zapEvent.kind = NDKKind.Nutzap;
|
||||
zapEvent.content = message ?? '';
|
||||
zapEvent.tags = [
|
||||
['proof', JSON.stringify(token)],
|
||||
['u', Wallet.mintUrl],
|
||||
['p', recipient.pubkey],
|
||||
];
|
||||
if (eventId) zapEvent.tags.push(['e', eventId]);
|
||||
await zapEvent.sign();
|
||||
await zapEvent.publish();
|
||||
|
||||
const spendingHistoryEvent = new NDKEvent(ndk);
|
||||
spendingHistoryEvent.kind = NDKKind.CashuWalletTx;
|
||||
const historyContent = [
|
||||
['direction', 'out'],
|
||||
['amount', amount.toString()],
|
||||
];
|
||||
if (eventId) historyContent.push(['e', eventId]);
|
||||
spendingHistoryEvent.content = await ndk.signer?.encrypt(
|
||||
await ndk.signer!.user()!,
|
||||
JSON.stringify(historyContent),
|
||||
'nip44',
|
||||
)!;
|
||||
spendingHistoryEvent.tags = [
|
||||
['e', zapEvent.id],
|
||||
['p', recipient.pubkey],
|
||||
];
|
||||
await spendingHistoryEvent.sign();
|
||||
await spendingHistoryEvent.publish();
|
||||
}
|
||||
}
|
||||
|
||||
export const wallet = new Wallet();
|
||||
Loading…
Add table
Reference in a new issue