feat(ui): Ark wallet tab, balances, history badge + demo mocks

Ark tab in Wallet Settings (status, balances, receive address,
board/offboard, server config via wallet.ark-*), teal Ark badge in the
transactions modal, Ark row on the home wallet card (hidden until barkd
reports a balance), official bark icon, and wallet.ark-* mocks so the
public demo renders the tab.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

neode-ui/mock-backend.js

@@ -132,6 +132,11 @@ const SEED_WALLET = {
   channel_sats: 8_250_000,
   ecash_sats: 250_000,
   ecash_tokens: 12,
+  // Ark (barkd sidecar) demo balances — signet defaults
+  ark_sats: 75_000,
+  ark_pending_sats: 0,
+  ark_onchain_sats: 20_000,
+  ark_config: { network: 'signet', ark_server: 'https://ark.signet.2nd.dev', esplora: 'https://esplora.signet.2nd.dev' },
   block_height: 892451,
   transactions: [
     { tx_hash: 'ab12cd34ef5678901234567890abcdef12345678', amount_sats: 2_000_000, direction: 'incoming', num_confirmations: 142, block_height: 892310, time_stamp: Math.floor(Date.now()/1000) - 86400, label: 'Channel funding', total_fees: 0, dest_addresses: [] },
@@ -2209,6 +2214,63 @@ app.post('/rpc/v1', (req, res) => {
         const total = (mockState.federations || []).reduce((s, f) => s + (f.balance_sats || 0), 0)
         return res.json({ result: { balance_sats: total } })
       }
+      case 'wallet.ark-status': {
+        return res.json({
+          result: {
+            available: true,
+            wallet_ready: true,
+            wallet: { network: walletState.ark_config.network },
+            ark_info: { server: walletState.ark_config.ark_server },
+            config: walletState.ark_config,
+          },
+        })
+      }
+      case 'wallet.ark-balance': {
+        return res.json({
+          result: {
+            balance_sats: walletState.ark_sats,
+            spendable_sats: walletState.ark_sats,
+            pending_sats: walletState.ark_pending_sats,
+            onchain_sats: walletState.ark_onchain_sats,
+          },
+        })
+      }
+      case 'wallet.ark-address': {
+        const onchain = params?.onchain === true
+        const address = onchain ? 'tb1q' + randomHex(16) : 'tark1' + randomHex(28)
+        return res.json({ result: { address, onchain } })
+      }
+      case 'wallet.ark-board': {
+        const amt = params?.amount_sats ?? walletState.ark_onchain_sats
+        walletState.ark_onchain_sats = Math.max(0, walletState.ark_onchain_sats - amt)
+        walletState.ark_sats += amt
+        return res.json({ result: { boarded_sats: amt } })
+      }
+      case 'wallet.ark-offboard': {
+        const amt = walletState.ark_sats
+        walletState.ark_sats = 0
+        walletState.ark_onchain_sats += amt
+        return res.json({ result: { offboarded_sats: amt } })
+      }
+      case 'wallet.ark-send': {
+        const amt = params?.amount_sats || 1000
+        walletState.ark_sats = Math.max(0, walletState.ark_sats - amt)
+        return res.json({ result: { sent: true, movement: { id: 1, effective_balance_sat: -amt } } })
+      }
+      case 'wallet.ark-invoice': {
+        return res.json({ result: { invoice: 'lntbs' + randomHex(64) } })
+      }
+      case 'wallet.ark-history': {
+        return res.json({ result: { transactions: [] } })
+      }
+      case 'wallet.ark-configure': {
+        const cfg = { ...walletState.ark_config }
+        for (const key of ['network', 'ark_server', 'esplora']) {
+          if (typeof params?.[key] === 'string' && params[key].trim()) cfg[key] = params[key].trim()
+        }
+        walletState.ark_config = cfg
+        return res.json({ result: { config: cfg } })
+      }
       case 'content.request-onchain': {
         const price = params?.price_sats || 500
         return res.json({
@@ -3225,6 +3287,8 @@ app.post('/rpc/v1', (req, res) => {
               { type: 'receive', amount_sats: 50000, timestamp: new Date(Date.now() - 86400000).toISOString(), note: 'Minted from Lightning' },
               { type: 'send', amount_sats: 5000, timestamp: new Date(Date.now() - 43200000).toISOString(), note: 'Sent ecash token' },
               { type: 'receive', amount_sats: 10000, timestamp: new Date(Date.now() - 3600000).toISOString(), note: 'Redeemed token' },
+              // Ark movement in the unified history shape (see wallet.ark-history / load_ark_txs)
+              { id: 'ark-1', tx_type: 'receive', type: 'receive', amount_sats: 75000, timestamp: new Date(Date.now() - 7200000).toISOString(), description: 'Received via Ark', note: 'Received via Ark', mint_url: '', peer: '', kind: 'ark' },
             ],
           },
         })

neode-ui/public/catalog.json

@@ -298,6 +298,25 @@
         ]
       }
     },
+    {
+      "id": "barkd",
+      "title": "Ark Wallet",
+      "version": "0.3.0",
+      "description": "Ark protocol wallet daemon (barkd). Lets the node hold self-custodial off-chain bitcoin via an Ark server; the wallet talks to it over a local REST API. Signet by default while Ark matures.",
+      "icon": "/assets/img/app-icons/bark.png",
+      "author": "Second",
+      "category": "money",
+      "dockerImage": "146.59.87.168:3000/lfg2025/barkd:0.3.0",
+      "repoUrl": "https://gitlab.com/ark-bitcoin/bark",
+      "containerConfig": {
+        "ports": [
+          "3535:3535"
+        ],
+        "volumes": [
+          "/var/lib/archipelago/barkd:/data"
+        ]
+      }
+    },
     {
       "id": "jellyfin",
       "title": "Jellyfin",

neode-ui/scripts/download-app-icons.js

@@ -45,6 +45,10 @@ const customIconUrls = {
   'fedimint': [
     'https://raw.githubusercontent.com/fedibtc/fedimint-ui/master/apps/router/public/favicon.svg',
   ],
+  // Official bark project avatar (Ark protocol wallet daemon)
+  'bark': [
+    'https://gitlab.com/uploads/-/system/project/avatar/75519706/bark-smiling-square-white-2.jpg',
+  ],
 }
 
 const iconDir = path.join(__dirname, '../public/assets/img/app-icons')

neode-ui/src/components/TransactionsModal.vue

@@ -52,7 +52,7 @@
                   <span
                     v-else
                     class="text-[10px] px-1.5 py-0.5 rounded-full font-medium"
-                    :class="tx.kind === 'lightning' ? 'bg-yellow-500/15 text-yellow-400' : tx.kind === 'cashu' ? 'bg-purple-500/15 text-purple-400' : 'bg-blue-500/15 text-blue-400'"
+                    :class="tx.kind === 'lightning' ? 'bg-yellow-500/15 text-yellow-400' : tx.kind === 'cashu' ? 'bg-purple-500/15 text-purple-400' : tx.kind === 'ark' ? 'bg-teal-500/15 text-teal-400' : 'bg-blue-500/15 text-blue-400'"
                   >
                     {{ kindLabel(tx) }}
                   </span>
@@ -90,7 +90,7 @@ interface WalletTransaction {
   label: string
   block_height: number
   // Which rail the transaction happened on; absent = onchain (older backends)
-  kind?: 'onchain' | 'lightning' | 'cashu' | 'fedimint'
+  kind?: 'onchain' | 'lightning' | 'cashu' | 'fedimint' | 'ark'
 }
 
 defineProps<{
@@ -114,6 +114,7 @@ function kindLabel(tx: WalletTransaction): string {
   if (tx.kind === 'lightning') return '⚡ Lightning'
   if (tx.kind === 'cashu') return 'Cashu'
   if (tx.kind === 'fedimint') return 'Fedimint'
+  if (tx.kind === 'ark') return 'Ark'
   return ''
 }
 

neode-ui/src/components/WalletSettingsModal.vue

@@ -148,11 +148,107 @@
         Joining federations lands with the Fedimint client backend.
       </p>
     </div>
+
+    <!-- ===================== Ark ===================== -->
+    <div v-show="activeTab === 'ark'">
+      <div class="flex items-start gap-2 mb-4">
+        <p class="text-white/60 text-sm flex-1">
+          Ark holds self-custodial off-chain bitcoin via an Ark server. Funds stay recoverable on-chain even if the server disappears.
+        </p>
+        <span v-if="arkStatus && !arkStatus.available" class="shrink-0 text-[10px] px-2 py-0.5 rounded-full font-medium bg-orange-500/15 text-orange-400">Not installed</span>
+        <span v-else-if="arkStatus?.config?.network && arkStatus.config.network !== 'mainnet'" class="shrink-0 text-[10px] px-2 py-0.5 rounded-full font-medium bg-teal-500/15 text-teal-400">{{ arkStatus.config.network }}</span>
+      </div>
+
+      <div v-if="loadingArk" class="py-6 text-center text-white/50 text-sm">Checking Ark wallet…</div>
+
+      <template v-else>
+        <p v-if="arkStatus && !arkStatus.available" class="text-white/40 text-sm text-center py-2 mb-4">
+          Install the <span class="text-white/70">Ark Wallet</span> app from the app store to enable Ark payments.
+        </p>
+
+        <!-- Balances -->
+        <div v-if="arkStatus?.available" class="grid grid-cols-3 gap-2 mb-4">
+          <div class="p-3 bg-white/5 rounded-lg text-center">
+            <p class="text-[11px] text-white/40 mb-1">Spendable</p>
+            <p class="text-sm text-teal-400 font-medium">{{ (arkBalance?.spendable_sats ?? 0).toLocaleString() }} sats</p>
+          </div>
+          <div class="p-3 bg-white/5 rounded-lg text-center">
+            <p class="text-[11px] text-white/40 mb-1">Pending</p>
+            <p class="text-sm text-white/70 font-medium">{{ (arkBalance?.pending_sats ?? 0).toLocaleString() }} sats</p>
+          </div>
+          <div class="p-3 bg-white/5 rounded-lg text-center">
+            <p class="text-[11px] text-white/40 mb-1">On-chain</p>
+            <p class="text-sm text-white/70 font-medium">{{ (arkBalance?.onchain_sats ?? 0).toLocaleString() }} sats</p>
+          </div>
+        </div>
+
+        <!-- Receive address -->
+        <div v-if="arkStatus?.available" class="mb-4">
+          <div class="flex gap-2">
+            <button @click="fetchArkAddress(false)" :disabled="arkBusy" class="flex-1 glass-button px-3 py-2 rounded-lg text-xs font-medium disabled:opacity-50">Ark address</button>
+            <button @click="fetchArkAddress(true)" :disabled="arkBusy" class="flex-1 glass-button px-3 py-2 rounded-lg text-xs font-medium disabled:opacity-50">On-chain (boarding) address</button>
+          </div>
+          <div v-if="arkAddress" class="mt-2 flex items-center gap-2 p-3 bg-white/5 rounded-lg">
+            <span class="text-xs font-mono text-white/90 break-all flex-1">{{ arkAddress }}</span>
+            <button @click="copyArkAddress" class="p-2 rounded-lg hover:bg-white/10 text-white/50 hover:text-white shrink-0" :title="arkCopied ? 'Copied' : 'Copy'">
+              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+              </svg>
+            </button>
+          </div>
+        </div>
+
+        <!-- Board / offboard -->
+        <div v-if="arkStatus?.available" class="flex gap-2 mb-4">
+          <button
+            @click="boardArk"
+            :disabled="arkBusy || (arkBalance?.onchain_sats ?? 0) === 0"
+            class="flex-1 glass-button px-3 py-2 rounded-lg text-xs font-medium disabled:opacity-50"
+            title="Lift on-chain funds into Ark"
+          >{{ arkBoarding ? 'Boarding…' : 'Board on-chain funds' }}</button>
+          <button
+            @click="offboardArk"
+            :disabled="arkBusy || (arkBalance?.spendable_sats ?? 0) === 0"
+            class="flex-1 glass-button px-3 py-2 rounded-lg text-xs font-medium disabled:opacity-50"
+            title="Move all Ark funds back on-chain"
+          >{{ arkOffboarding ? 'Offboarding…' : 'Offboard to on-chain' }}</button>
+        </div>
+
+        <!-- Server configuration -->
+        <div class="mb-3 space-y-2">
+          <label class="text-white/60 text-sm block">Ark server</label>
+          <input v-model="arkConfig.ark_server" type="text" placeholder="https://ark.signet.2nd.dev" class="w-full input-glass font-mono" />
+          <label class="text-white/60 text-sm block">Esplora (chain source)</label>
+          <input v-model="arkConfig.esplora" type="text" placeholder="https://esplora.signet.2nd.dev" class="w-full input-glass font-mono" />
+          <label class="text-white/60 text-sm block">Network</label>
+          <select v-model="arkConfig.network" class="w-full input-glass">
+            <option value="signet">signet</option>
+            <option value="mainnet">mainnet</option>
+            <option value="regtest">regtest</option>
+          </select>
+          <p class="text-[11px] text-white/40">
+            Applied when the Ark wallet is created — an existing wallet stays bound to its server.
+          </p>
+        </div>
+
+        <div v-if="arkError" class="mb-3 alert-error">{{ arkError }}</div>
+        <div v-if="arkOk" class="mb-3 text-xs text-green-400">{{ arkOk }}</div>
+
+        <div class="flex gap-3 mt-4">
+          <button @click="close" class="flex-1 glass-button px-4 py-2 rounded-lg text-sm">{{ t('common.close') }}</button>
+          <button
+            @click="saveArkConfig"
+            :disabled="arkBusy || !arkConfig.ark_server.trim() || !arkConfig.esplora.trim()"
+            class="flex-1 glass-button glass-button-success px-4 py-2 rounded-lg text-sm font-medium disabled:opacity-50"
+          >{{ savingArk ? 'Saving…' : 'Save' }}</button>
+        </div>
+      </template>
+    </div>
   </BaseModal>
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { rpcClient } from '@/api/rpc-client'
 import BaseModal from '@/components/BaseModal.vue'
@@ -167,8 +263,9 @@ const tabs = [
   { key: 'channels' as const, label: 'Channels' },
   { key: 'cashu' as const, label: 'Cashu Mints' },
   { key: 'fedimint' as const, label: 'Fedimint Federations' },
+  { key: 'ark' as const, label: 'Ark' },
 ]
-const activeTab = ref<'channels' | 'cashu' | 'fedimint'>('channels')
+const activeTab = ref<'channels' | 'cashu' | 'fedimint' | 'ark'>('channels')
 
 // Backed by wallet.fedimint-list / -join / -leave (fedimint-clientd HTTP bridge).
 // Join degrades gracefully with a clear error if the Fedimint client app isn't installed.
@@ -194,12 +291,37 @@ const joiningFed = ref(false)
 const fedError = ref('')
 const fedJoinedOk = ref(false)
 
+// ---- Ark (barkd sidecar, wallet.ark-* RPCs) ----
+interface ArkStatus {
+  available: boolean
+  wallet_ready: boolean
+  config?: { network: string; ark_server: string; esplora: string }
+}
+interface ArkBalance {
+  spendable_sats: number
+  pending_sats: number
+  onchain_sats: number
+}
+const arkStatus = ref<ArkStatus | null>(null)
+const arkBalance = ref<ArkBalance | null>(null)
+const arkConfig = ref({ network: 'signet', ark_server: '', esplora: '' })
+const arkAddress = ref('')
+const arkCopied = ref(false)
+const loadingArk = ref(false)
+const savingArk = ref(false)
+const arkBoarding = ref(false)
+const arkOffboarding = ref(false)
+const arkError = ref('')
+const arkOk = ref('')
+const arkBusy = computed(() => savingArk.value || arkBoarding.value || arkOffboarding.value)
+
 watch(
   () => props.show,
   (open) => {
     if (open) {
       loadMints()
       if (fedimintBackendReady) loadFederations()
+      loadArk()
     }
   },
 )
@@ -309,10 +431,111 @@ async function joinFederation() {
   }
 }
 
+async function loadArk() {
+  loadingArk.value = true
+  arkError.value = ''
+  arkOk.value = ''
+  arkAddress.value = ''
+  try {
+    const status = await rpcClient.call<ArkStatus>({ method: 'wallet.ark-status' })
+    arkStatus.value = status
+    if (status.config) arkConfig.value = { ...status.config }
+    if (status.available) {
+      arkBalance.value = await rpcClient.call<ArkBalance>({ method: 'wallet.ark-balance' })
+    } else {
+      arkBalance.value = null
+    }
+  } catch {
+    arkStatus.value = { available: false, wallet_ready: false }
+    arkBalance.value = null
+  } finally {
+    loadingArk.value = false
+  }
+}
+
+async function fetchArkAddress(onchain: boolean) {
+  arkError.value = ''
+  arkOk.value = ''
+  try {
+    const res = await rpcClient.call<{ address: string }>({
+      method: 'wallet.ark-address',
+      params: { onchain },
+    })
+    arkAddress.value = res.address
+    arkCopied.value = false
+  } catch (err: unknown) {
+    arkError.value = err instanceof Error ? err.message : 'Failed to get address'
+  }
+}
+
+async function copyArkAddress() {
+  if (!arkAddress.value) return
+  try {
+    await navigator.clipboard.writeText(arkAddress.value)
+    arkCopied.value = true
+  } catch {
+    /* clipboard unavailable (http) — the address is selectable */
+  }
+}
+
+async function boardArk() {
+  arkBoarding.value = true
+  arkError.value = ''
+  arkOk.value = ''
+  try {
+    // Boards everything; waits on Ark round participation, so give it room.
+    await rpcClient.call({ method: 'wallet.ark-board', timeout: 130000 })
+    arkOk.value = 'Boarding started — funds appear as spendable once the round confirms.'
+    arkBalance.value = await rpcClient.call<ArkBalance>({ method: 'wallet.ark-balance' })
+    emit('changed')
+  } catch (err: unknown) {
+    arkError.value = err instanceof Error ? err.message : 'Failed to board funds'
+  } finally {
+    arkBoarding.value = false
+  }
+}
+
+async function offboardArk() {
+  arkOffboarding.value = true
+  arkError.value = ''
+  arkOk.value = ''
+  try {
+    await rpcClient.call({ method: 'wallet.ark-offboard', timeout: 130000 })
+    arkOk.value = 'Offboard requested — funds return on-chain with the next round.'
+    arkBalance.value = await rpcClient.call<ArkBalance>({ method: 'wallet.ark-balance' })
+    emit('changed')
+  } catch (err: unknown) {
+    arkError.value = err instanceof Error ? err.message : 'Failed to offboard funds'
+  } finally {
+    arkOffboarding.value = false
+  }
+}
+
+async function saveArkConfig() {
+  savingArk.value = true
+  arkError.value = ''
+  arkOk.value = ''
+  try {
+    const res = await rpcClient.call<{ config: ArkStatus['config'] }>({
+      method: 'wallet.ark-configure',
+      params: { ...arkConfig.value },
+    })
+    if (res.config) arkConfig.value = { ...res.config }
+    arkOk.value = 'Ark configuration saved.'
+    emit('changed')
+  } catch (err: unknown) {
+    arkError.value = err instanceof Error ? err.message : 'Failed to save Ark configuration'
+  } finally {
+    savingArk.value = false
+  }
+}
+
 function close() {
   mintError.value = ''
   mintsSavedOk.value = false
   fedError.value = ''
+  arkError.value = ''
+  arkOk.value = ''
   emit('close')
 }
 </script>

neode-ui/src/views/Home.vue

@@ -133,6 +133,7 @@
           :wallet-lightning="walletLightning"
           :wallet-ecash="walletEcash"
           :wallet-fedimint="walletFedimint"
+          :wallet-ark="walletArk"
           :wallet-transactions="walletTransactions"
           :is-dev="isDev"
           @show-send="showSendModal = true"
@@ -515,6 +516,7 @@ const showSendModal = ref(false); const showReceiveModal = ref(false); const sho
 async function devFaucet() { try { await rpcClient.call({ method: 'dev.faucet', params: { amount_sats: 1_000_000 } }); await loadWeb5Status() } catch { /* ignore */ } }
 
 const walletConnected = ref(false); const walletOnchain = ref(0); const walletLightning = ref(0); const walletEcash = ref(0); const walletFedimint = ref(0)
+const walletArk = ref(0)
 const walletTransactions = ref<WalletTransaction[]>([])
 
 // Overlay the explorer above the current page — never navigate away.
@@ -532,7 +534,7 @@ interface EcashTransaction {
   description: string
   mint_url: string
   peer: string
-  kind: 'cashu' | 'fedimint'
+  kind: 'cashu' | 'fedimint' | 'ark'
 }
 
 function ecashToWalletTransaction(tx: EcashTransaction): WalletTransaction {
@@ -557,6 +559,7 @@ async function loadWeb5Status() {
   try { const res = await rpcClient.call<{ balance_sats: number; channel_balance_sats: number }>({ method: 'lnd.getinfo', timeout: 5000 }); walletOnchain.value = res.balance_sats || 0; walletLightning.value = res.channel_balance_sats || 0; walletConnected.value = true } catch { walletConnected.value = false }
   try { const res = await rpcClient.call<{ balance_sats: number }>({ method: 'wallet.ecash-balance', timeout: 5000 }); walletEcash.value = res.balance_sats ?? 0 } catch { /* keep last-known balance */ }
   try { const res = await rpcClient.call<{ balance_sats: number }>({ method: 'wallet.fedimint-balance', timeout: 5000 }); walletFedimint.value = res.balance_sats ?? 0 } catch { /* keep last-known balance */ }
+  try { const res = await rpcClient.call<{ spendable_sats: number }>({ method: 'wallet.ark-balance', timeout: 5000 }); walletArk.value = res.spendable_sats ?? 0 } catch { /* keep last-known balance */ }
   // Merge LND transactions with ecash/Fedimint history (wallet.ecash-history
   // already unifies both) — previously only LND transactions were fetched
   // here, so any Cashu or Fedimint receive (e.g. a TollGate payment) never

neode-ui/src/views/home/HomeWalletCard.vue

@@ -136,6 +136,14 @@
             </div>
             <span class="text-blue-400 text-sm font-medium">{{ walletFedimint.toLocaleString() }} sats</span>
           </div>
+          <!-- Only rendered once barkd reports a balance — most nodes don't run the Ark sidecar -->
+          <div v-if="(walletArk ?? 0) > 0" class="flex items-center justify-between p-3 bg-white/5 rounded-lg">
+            <div class="flex items-center gap-3">
+              <span class="w-5 h-5 text-base leading-none flex items-center justify-center" role="img" aria-label="Ark">⚓</span>
+              <span class="text-sm text-white/80">Ark</span>
+            </div>
+            <span class="text-teal-400 text-sm font-medium">{{ (walletArk ?? 0).toLocaleString() }} sats</span>
+          </div>
         </div>
         <div class="home-card-buttons grid gap-2 mt-auto pt-4 shrink-0" :class="isDev ? 'grid-cols-4' : 'grid-cols-3'">
           <button @click="$emit('showSend')" class="home-card-btn px-3 py-2 glass-button rounded-lg text-sm font-medium text-center transition-colors">
@@ -173,7 +181,7 @@ export interface WalletTransaction {
   label: string
   block_height: number
   // Which rail the transaction happened on; absent = onchain (older backends)
-  kind?: 'onchain' | 'lightning' | 'cashu' | 'fedimint'
+  kind?: 'onchain' | 'lightning' | 'cashu' | 'fedimint' | 'ark'
 }
 
 const props = defineProps<{
@@ -183,6 +191,7 @@ const props = defineProps<{
   walletLightning: number
   walletEcash: number
   walletFedimint: number
+  walletArk?: number
   walletTransactions: WalletTransaction[]
   isDev: boolean
 }>()