wraith-protocol · JafetCHVDev · Jun 1, 2026 · Jun 1, 2026
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -28,6 +28,7 @@
     "@wraith-protocol/sdk": "^1.4.5",
     "bs58": "^6.0.0",
     "buffer": "^6.0.3",
+    "esbuild": "^0.28.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-router-dom": "^7.6.0",

diff --git a/src/components/CkbReceive.tsx b/src/components/CkbReceive.tsx
@@ -1,4 +1,4 @@
-import { useState, useCallback } from 'react';
+import { useState, useEffect, useCallback, useMemo } from 'react';
 import { ccc } from '@ckb-ccc/connector-react';
 import {
   deriveStealthKeys,
@@ -11,8 +11,29 @@ import {
 } from '@wraith-protocol/sdk/chains/ckb';
 import { useStealthKeys } from '@/context/StealthKeysContext';
 import { CopyButton } from '@/components/CopyButton';
+import { useStealthLabels } from '@/hooks/useStealthLabels';
+import { useNetworkStatus } from '@/hooks/useNetworkStatus';
+import { StealthLabelEditor } from '@/components/StealthLabelEditor';
+import { StealthLabelBar } from '@/components/StealthLabelBar';
+import type { StealthLabel } from '@/lib/stealth-labels';
 
-function CkbStealthRow({ match }: { match: MatchedStealthCell }) {
+function CkbStealthRow({
+  match,
+  label,
+  onSaveLabel,
+  onSaveTags,
+  onHide,
+  onUnhide,
+  onTagFilter,
+}: {
+  match: MatchedStealthCell;
+  label: StealthLabel | undefined;
+  onSaveLabel: (text: string) => void;
+  onSaveTags: (tags: string[]) => void;
+  onHide: () => void;
+  onUnhide: () => void;
+  onTagFilter: (tag: string | null) => void;
+}) {
   const [showKey, setShowKey] = useState(false);
   const keyHex = match.stealthPrivateKey.slice(2);
   const capacityCkb = (Number(match.capacity) / 1e8).toFixed(4);
@@ -71,21 +92,66 @@ function CkbStealthRow({ match }: { match: MatchedStealthCell }) {
           </div>
         )}
       </div>
+
+      <StealthLabelEditor
+        label={label}
+        onSaveLabel={onSaveLabel}
+        onSaveTags={onSaveTags}
+        onHide={onHide}
+        onUnhide={onUnhide}
+        onTagFilter={onTagFilter}
+      />
     </div>
   );
 }
 
 export function CkbReceive() {
   const { wallet } = ccc.useCcc();
   const signer = ccc.useSigner();
+  const [walletAddress, setWalletAddress] = useState<string | undefined>();
+
+  useEffect(() => {
+    (async () => {
+      if (signer) {
+        try {
+          const addr = await (signer as any).getRecommendedAddress();
+          setWalletAddress(addr);
+        } catch {
+          setWalletAddress(undefined);
+        }
+      } else {
+        setWalletAddress(undefined);
+      }
+    })();
+  }, [signer]);
+
+  const labelOps = useStealthLabels(walletAddress);
   const { ckbKeys, ckbMetaAddress, setCkbKeys, setCkbMetaAddress } = useStealthKeys();
+  const { shouldDisable } = useNetworkStatus();
 
   const [isDerivingKeys, setIsDerivingKeys] = useState(false);
   const [isScanning, setIsScanning] = useState(false);
   const [matched, setMatched] = useState<MatchedStealthCell[]>([]);
   const [hasScanned, setHasScanned] = useState(false);
   const [error, setError] = useState('');
 
+  const displayedMatches = useMemo(() => {
+    if (!labelOps.searchQuery && !labelOps.activeTag) return matched;
+    return matched.filter((m) => {
+      const l = labelOps.getLabel(m.stealthPubKeyHash);
+      if (labelOps.activeTag) return l?.tags.includes(labelOps.activeTag);
+      if (labelOps.searchQuery) {
+        const q = labelOps.searchQuery.toLowerCase();
+        return (
+          l?.label.toLowerCase().includes(q) ||
+          l?.tags.some((t) => t.toLowerCase().includes(q)) ||
+          m.stealthPubKeyHash.toLowerCase().includes(q)
+        );
+      }
+      return true;
+    });
+  }, [matched, labelOps.searchQuery, labelOps.activeTag, labelOps]);
+
   const deriveKeys = useCallback(async () => {
     if (!signer) {
       setError('Connect your CKB wallet first');
@@ -170,7 +236,7 @@ export function CkbReceive() {
         <div className="flex flex-col gap-4">
           <button
             onClick={deriveKeys}
-            disabled={isDerivingKeys}
+            disabled={isDerivingKeys || shouldDisable}
             className="h-12 w-full bg-primary font-heading text-[13px] font-semibold uppercase tracking-widest text-surface transition-colors hover:brightness-110 disabled:opacity-30"
           >
             {isDerivingKeys ? 'Sign in wallet...' : 'Derive Stealth Keys'}
@@ -196,7 +262,7 @@ export function CkbReceive() {
           <div className="flex items-center justify-between">
             <button
               onClick={scanPayments}
-              disabled={isScanning}
+              disabled={isScanning || shouldDisable}
               className="h-12 bg-primary px-6 font-heading text-[13px] font-semibold uppercase tracking-widest text-surface transition-colors hover:brightness-110 disabled:opacity-30"
             >
               {isScanning ? 'Scanning...' : 'Scan for Cells'}
@@ -211,11 +277,36 @@ export function CkbReceive() {
           {error && <p className="text-sm text-error">{error}</p>}
 
           {matched.length > 0 && (
-            <div className="flex flex-col gap-4">
-              {matched.map((m, i) => (
-                <CkbStealthRow key={i} match={m} />
-              ))}
-            </div>
+            <>
+              <StealthLabelBar
+                searchQuery={labelOps.searchQuery}
+                onSearchChange={labelOps.setSearchQuery}
+                activeTag={labelOps.activeTag}
+                allTags={labelOps.allTags}
+                onTagSelect={labelOps.setActiveTag}
+                showHidden={labelOps.showHidden}
+                onToggleShowHidden={() => labelOps.setShowHidden(!labelOps.showHidden)}
+                showPrivacyWarning={labelOps.showPrivacyWarning}
+                onDismissPrivacyWarning={labelOps.dismissPrivacyWarning}
+                onExport={labelOps.export}
+                onImport={labelOps.import}
+              />
+
+              <div className="flex flex-col gap-4">
+                {displayedMatches.map((m, i) => (
+                  <CkbStealthRow
+                    key={i}
+                    match={m}
+                    label={labelOps.getLabel(m.stealthPubKeyHash)}
+                    onSaveLabel={(text) => labelOps.setLabel(m.stealthPubKeyHash, text)}
+                    onSaveTags={(tags) => labelOps.setTags(m.stealthPubKeyHash, tags)}
+                    onHide={() => labelOps.hide(m.stealthPubKeyHash)}
+                    onUnhide={() => labelOps.unhide(m.stealthPubKeyHash)}
+                    onTagFilter={labelOps.setActiveTag}
+                  />
+                ))}
+              </div>
+            </>
           )}
 
           {hasScanned && matched.length === 0 && (

diff --git a/src/components/CkbSend.tsx b/src/components/CkbSend.tsx
@@ -6,12 +6,14 @@ import {
   getDeployment,
 } from '@wraith-protocol/sdk/chains/ckb';
 import { CopyButton } from '@/components/CopyButton';
+import { useNetworkStatus } from '@/hooks/useNetworkStatus';
 
 const STEALTH_LOCK_CODE_HASH = getDeployment('ckb').contracts.stealthLockCodeHash;
 
 export function CkbSend() {
   const { wallet } = ccc.useCcc();
   const signer = ccc.useSigner();
+  const { shouldDisable } = useNetworkStatus();
   const [recipient, setRecipient] = useState('');
   const [amount, setAmount] = useState('');
   const [error, setError] = useState('');
@@ -189,7 +191,7 @@ export function CkbSend() {
 
           <button
             onClick={handleSend}
-            disabled={!recipient || !amount || isPending}
+            disabled={!recipient || !amount || isPending || shouldDisable}
             className="h-12 w-full bg-primary font-heading text-[13px] font-semibold uppercase tracking-widest text-surface transition-colors hover:brightness-110 disabled:opacity-30"
           >
             {isPending ? 'Confirm in wallet...' : 'Send Privately'}

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -2,6 +2,7 @@ import { useState } from 'react';
 import { Link, useLocation } from 'react-router-dom';
 import { ChainSwitcher } from './ChainSwitcher';
 import { WalletConnect } from './WalletConnect';
+import { NetworkBadge } from './NetworkBadge';
 
 const navLinks = [
   { to: '/send', label: 'Send' },
@@ -45,6 +46,7 @@ export function Header() {
 
         <div className="flex items-center gap-3">
           <ChainSwitcher />
+          <NetworkBadge />
           <WalletConnect />
           <button
             onClick={() => setMobileMenuOpen(!mobileMenuOpen)}

diff --git a/src/components/HorizenReceive.tsx b/src/components/HorizenReceive.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 import {
   useAccount,
   useSignMessage,
@@ -24,13 +24,30 @@ import { useStealthKeys } from '@/context/StealthKeysContext';
 import { CopyButton } from '@/components/CopyButton';
 import { horizenTxUrl, horizenAddrUrl } from '@/lib/explorer';
 import { horizenTestnet } from '@/config';
+import { useStealthLabels } from '@/hooks/useStealthLabels';
+import { useNetworkStatus } from '@/hooks/useNetworkStatus';
+import { StealthLabelEditor } from '@/components/StealthLabelEditor';
+import { StealthLabelBar } from '@/components/StealthLabelBar';
+import type { StealthLabel } from '@/lib/stealth-labels';
 
 function StealthRow({
   match,
   onWithdrawn,
+  label,
+  onSaveLabel,
+  onSaveTags,
+  onHide,
+  onUnhide,
+  onTagFilter,
 }: {
   match: MatchedAnnouncement;
   onWithdrawn: (hash: string) => void;
+  label: StealthLabel | undefined;
+  onSaveLabel: (text: string) => void;
+  onSaveTags: (tags: string[]) => void;
+  onHide: () => void;
+  onUnhide: () => void;
+  onTagFilter: (tag: string | null) => void;
 }) {
   const [balance, setBalance] = useState<string | null>(null);
   const [loadingBal, setLoadingBal] = useState(true);
@@ -39,6 +56,7 @@ function StealthRow({
   const [withdrawHash, setWithdrawHash] = useState<string | null>(null);
   const [error, setError] = useState('');
   const [showKey, setShowKey] = useState(false);
+  const { shouldDisable } = useNetworkStatus();
 
   useEffect(() => {
     (async () => {
@@ -143,7 +161,7 @@ function StealthRow({
             />
             <button
               onClick={handleWithdraw}
-              disabled={!dest || withdrawing}
+              disabled={!dest || withdrawing || shouldDisable}
               className="h-10 bg-primary px-4 font-heading text-[10px] font-semibold uppercase tracking-widest text-surface transition-colors hover:brightness-110 disabled:opacity-30"
             >
               {withdrawing ? '...' : 'Withdraw'}
@@ -193,6 +211,15 @@ function StealthRow({
           </div>
         )}
       </div>
+
+      <StealthLabelEditor
+        label={label}
+        onSaveLabel={onSaveLabel}
+        onSaveTags={onSaveTags}
+        onHide={onHide}
+        onUnhide={onUnhide}
+        onTagFilter={onTagFilter}
+      />
     </div>
   );
 }
@@ -202,12 +229,32 @@ export function HorizenReceive() {
   const { signMessageAsync } = useSignMessage();
   const { evmKeys, evmMetaAddress, setEvmKeys, setEvmMetaAddress } = useStealthKeys();
 
+  const labelOps = useStealthLabels(address);
+  const { shouldDisable } = useNetworkStatus();
+
   const [isDerivingKeys, setIsDerivingKeys] = useState(false);
   const [isScanning, setIsScanning] = useState(false);
   const [matched, setMatched] = useState<MatchedAnnouncement[]>([]);
   const [hasScanned, setHasScanned] = useState(false);
   const [error, setError] = useState('');
 
+  const displayedMatches = useMemo(() => {
+    if (!labelOps.searchQuery && !labelOps.activeTag) return matched;
+    return matched.filter((m) => {
+      const l = labelOps.getLabel(m.stealthAddress);
+      if (labelOps.activeTag) return l?.tags.includes(labelOps.activeTag);
+      if (labelOps.searchQuery) {
+        const q = labelOps.searchQuery.toLowerCase();
+        return (
+          l?.label.toLowerCase().includes(q) ||
+          l?.tags.some((t) => t.toLowerCase().includes(q)) ||
+          m.stealthAddress.toLowerCase().includes(q)
+        );
+      }
+      return true;
+    });
+  }, [matched, labelOps.searchQuery, labelOps.activeTag, labelOps]);
+
   const deployment = getDeployment('horizen');
 
   // Check if already registered on-chain
@@ -319,7 +366,7 @@ export function HorizenReceive() {
         <div className="flex flex-col gap-4">
           <button
             onClick={deriveKeys}
-            disabled={isDerivingKeys}
+            disabled={isDerivingKeys || shouldDisable}
             className="h-12 w-full bg-primary font-heading text-[13px] font-semibold uppercase tracking-widest text-surface transition-colors hover:brightness-110 disabled:opacity-30"
           >
             {isDerivingKeys ? 'Sign in wallet...' : 'Derive Keys'}
@@ -373,7 +420,7 @@ export function HorizenReceive() {
                 </p>
                 <button
                   onClick={registerOnChain}
-                  disabled={isRegPending || isRegConfirming}
+                  disabled={isRegPending || isRegConfirming || shouldDisable}
                   className="h-11 w-full border border-outline-variant font-heading text-[13px] font-semibold uppercase tracking-widest text-primary transition-colors hover:bg-surface-bright disabled:opacity-30"
                 >
                   {isRegPending
@@ -389,7 +436,7 @@ export function HorizenReceive() {
           <div className="flex items-center justify-between">
             <button
               onClick={scanPayments}
-              disabled={isScanning}
+              disabled={isScanning || shouldDisable}
               className="h-12 bg-primary px-6 font-heading text-[13px] font-semibold uppercase tracking-widest text-surface transition-colors hover:brightness-110 disabled:opacity-30"
             >
               {isScanning ? 'Scanning...' : 'Scan for Payments'}
@@ -404,11 +451,37 @@ export function HorizenReceive() {
           {error && <p className="text-sm text-error">{error}</p>}
 
           {matched.length > 0 && (
-            <div className="flex flex-col gap-4">
-              {matched.map((m, i) => (
-                <StealthRow key={i} match={m} onWithdrawn={() => {}} />
-              ))}
-            </div>
+            <>
+              <StealthLabelBar
+                searchQuery={labelOps.searchQuery}
+                onSearchChange={labelOps.setSearchQuery}
+                activeTag={labelOps.activeTag}
+                allTags={labelOps.allTags}
+                onTagSelect={labelOps.setActiveTag}
+                showHidden={labelOps.showHidden}
+                onToggleShowHidden={() => labelOps.setShowHidden(!labelOps.showHidden)}
+                showPrivacyWarning={labelOps.showPrivacyWarning}
+                onDismissPrivacyWarning={labelOps.dismissPrivacyWarning}
+                onExport={labelOps.export}
+                onImport={labelOps.import}
+              />
+
+              <div className="flex flex-col gap-4">
+                {displayedMatches.map((m, i) => (
+                  <StealthRow
+                    key={i}
+                    match={m}
+                    onWithdrawn={() => {}}
+                    label={labelOps.getLabel(m.stealthAddress)}
+                    onSaveLabel={(text) => labelOps.setLabel(m.stealthAddress, text)}
+                    onSaveTags={(tags) => labelOps.setTags(m.stealthAddress, tags)}
+                    onHide={() => labelOps.hide(m.stealthAddress)}
+                    onUnhide={() => labelOps.unhide(m.stealthAddress)}
+                    onTagFilter={labelOps.setActiveTag}
+                  />
+                ))}
+              </div>
+            </>
           )}
 
           {hasScanned && matched.length === 0 && (