cashu wallet (beta) (testnet)

src/routes/Home.ts

@@ -9,6 +9,7 @@ import '@components/AppGrid';
 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() {
@@ -184,21 +189,21 @@ export class Home extends LitElement {
 
   override render() {
     return html`
-        <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>`)}
+          <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>
     `;

src/routes/Wallet.ts

@@ -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>
+    `;
+  }
+}

src/routes/router.ts

@@ -7,6 +7,7 @@ import '@routes/Arbor/TopicView';
 import '@routes/Home';
 import '@routes/Profile';
 import '@routes/Settings';
+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: {},