// screens-wallet.jsx — Wallet screen with balance, transactions, and withdrawal
const { useState: useW1, useEffect: useWE } = React;

function WalletPage({ go, userId, currentProfile, demoMode, refreshWallet }) {
  const [wallet, setWallet] = useW1(null);
  const [txns, setTxns] = useW1([]);
  const [loading, setLoading] = useW1(true);
  const [showWithdraw, setShowWithdraw] = useW1(false);
  const [filter, setFilter] = useW1("all"); // all | credit | withdrawal

  const loadWallet = async () => {
    setLoading(true);
    const { wallet: w } = await Wallet.getBalance(userId);
    const { transactions } = await Wallet.getTransactions(userId);
    setWallet(w);
    setTxns(transactions || []);
    setLoading(false);
  };

  useWE(() => { loadWallet(); }, [userId]);

  const cur = wallet?.currency === "INR" ? "₹" : wallet?.currency || "₹";
  const balance = wallet ? Number(wallet.balance) : 0;
  const totalEarned = wallet ? Number(wallet.total_earned) : 0;
  const totalWithdrawn = wallet ? Number(wallet.total_withdrawn) : 0;
  const canWithdraw = wallet && Wallet.canWithdrawToday(wallet) && balance >= 100;
  const hoursLeft = wallet ? Wallet.hoursUntilWithdraw(wallet) : 0;

  const filtered = filter === "all" ? txns : txns.filter(t => t.type === filter);

  return (
    <Wrap style={{ paddingTop: 28, paddingBottom: 60, maxWidth: 680 }}>
      <button onClick={() => go("dashboard")} style={{ display: "inline-flex", alignItems: "center", gap: 7, background: "none", border: "none", cursor: "pointer", color: "var(--ink-2)", fontFamily: "var(--sans)", fontSize: 14.5, fontWeight: 600, padding: "8px 0", marginBottom: 12 }}>
        <Icon name="back" size={17} /> Back
      </button>

      <h1 style={{ fontFamily: "var(--display)", fontWeight: 600, fontSize: "clamp(28px,4vw,40px)", letterSpacing: "-0.03em", margin: "0 0 28px", color: "var(--ink)" }}>Wallet</h1>

      {loading ? (
        <div style={{ color: "var(--ink-2)", fontSize: 15, padding: "40px 0", textAlign: "center" }}>Loading wallet…</div>
      ) : (
        <>
          {/* ── Balance Card ── */}
          <div style={{
            background: "linear-gradient(135deg, var(--ink) 0%, color-mix(in srgb, var(--ink) 80%, var(--clay)) 100%)",
            borderRadius: 22, padding: "clamp(28px,4vw,36px)", color: "#fff", position: "relative", overflow: "hidden",
            marginBottom: 24, boxShadow: "0 12px 40px -16px rgba(30,20,10,.5)",
          }}>
            {/* decorative circles */}
            <div style={{ position: "absolute", top: -60, right: -40, width: 200, height: 200, borderRadius: "50%", background: "rgba(255,255,255,.04)" }} />
            <div style={{ position: "absolute", bottom: -30, right: 60, width: 120, height: 120, borderRadius: "50%", background: "rgba(255,255,255,.03)" }} />

            <div style={{ position: "relative", zIndex: 1 }}>
              <div style={{ fontSize: 13.5, fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.08em", opacity: 0.7, marginBottom: 10, display: "flex", alignItems: "center", gap: 7 }}>
                <Icon name="wallet" size={15} /> Available Balance
              </div>
              <div style={{ fontFamily: "var(--display)", fontSize: "clamp(40px,6vw,56px)", fontWeight: 700, letterSpacing: "-0.03em", lineHeight: 1 }}>
                {cur}{balance.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
              </div>

              <div style={{ display: "flex", gap: 24, marginTop: 22, flexWrap: "wrap" }}>
                <div>
                  <div style={{ fontSize: 11.5, textTransform: "uppercase", letterSpacing: "0.06em", opacity: 0.6, marginBottom: 4 }}>Total earned</div>
                  <div style={{ fontSize: 18, fontWeight: 700 }}>{cur}{totalEarned.toLocaleString()}</div>
                </div>
                <div>
                  <div style={{ fontSize: 11.5, textTransform: "uppercase", letterSpacing: "0.06em", opacity: 0.6, marginBottom: 4 }}>Withdrawn</div>
                  <div style={{ fontSize: 18, fontWeight: 700 }}>{cur}{totalWithdrawn.toLocaleString()}</div>
                </div>
              </div>

              <div style={{ marginTop: 24, display: "flex", gap: 10, flexWrap: "wrap" }}>
                <button onClick={() => setShowWithdraw(true)} disabled={!canWithdraw} style={{
                  padding: "13px 28px", borderRadius: 999, border: "none", cursor: canWithdraw ? "pointer" : "not-allowed",
                  fontFamily: "var(--sans)", fontSize: 15, fontWeight: 700,
                  background: canWithdraw ? "#fff" : "rgba(255,255,255,.2)",
                  color: canWithdraw ? "var(--ink)" : "rgba(255,255,255,.5)",
                  transition: "transform .1s", display: "inline-flex", alignItems: "center", gap: 8,
                }}>
                  <Icon name="arrow" size={16} style={{ transform: "rotate(90deg)" }} /> Withdraw to UPI
                </button>
              </div>

              {!canWithdraw && balance > 0 && balance < 100 && (
                <div style={{ marginTop: 12, fontSize: 13, opacity: 0.7 }}>
                  <Icon name="bolt" size={12} /> Minimum withdrawal is {cur}100
                </div>
              )}
              {!canWithdraw && hoursLeft > 0 && balance >= 100 && (
                <div style={{ marginTop: 12, fontSize: 13, opacity: 0.7 }}>
                  <Icon name="clock" size={12} /> Next withdrawal in {hoursLeft}h
                </div>
              )}
            </div>
          </div>

          {/* ── UPI Info ── */}
          {currentProfile?.upiId && (
            <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "14px 18px", borderRadius: 14, background: "var(--surface)", border: "1px solid var(--line)", marginBottom: 24 }}>
              <Icon name="wallet" size={18} style={{ color: "var(--clay)", flexShrink: 0 }} />
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 12.5, fontWeight: 600, color: "var(--ink-2)", textTransform: "uppercase", letterSpacing: "0.06em" }}>Withdrawal UPI</div>
                <div style={{ fontSize: 15, fontWeight: 700, color: "var(--ink)", marginTop: 2 }}>{currentProfile.upiId}</div>
              </div>
              <button onClick={() => go("verify")} style={{ background: "none", border: "none", cursor: "pointer", color: "var(--clay)", fontSize: 13, fontWeight: 600, fontFamily: "var(--sans)" }}>Change</button>
            </div>
          )}

          {/* ── Transaction History ── */}
          <div>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 18 }}>
              <h2 style={{ fontFamily: "var(--display)", fontWeight: 600, fontSize: 22, letterSpacing: "-0.02em", margin: 0, color: "var(--ink)" }}>Transactions</h2>
              <div style={{ display: "flex", gap: 6 }}>
                {[["all", "All"], ["credit", "Earned"], ["withdrawal", "Withdrawn"]].map(([k, l]) => (
                  <button key={k} onClick={() => setFilter(k)} style={{
                    padding: "6px 14px", borderRadius: 999, border: "1px solid " + (filter === k ? "var(--ink)" : "var(--line)"),
                    background: filter === k ? "var(--ink)" : "var(--surface)", color: filter === k ? "var(--paper)" : "var(--ink)",
                    fontFamily: "var(--sans)", fontSize: 13, fontWeight: 600, cursor: "pointer", transition: "all .15s",
                  }}>{l}</button>
                ))}
              </div>
            </div>

            {filtered.length === 0 ? (
              <div style={{ textAlign: "center", padding: "48px 20px" }}>
                <div style={{ width: 56, height: 56, borderRadius: "50%", background: "var(--ink-3)", display: "grid", placeItems: "center", margin: "0 auto 16px", color: "var(--ink-2)" }}>
                  <Icon name="wallet" size={26} stroke={1.6} />
                </div>
                <div style={{ fontSize: 16, fontWeight: 700, color: "var(--ink)", marginBottom: 5 }}>No transactions yet</div>
                <div style={{ fontSize: 14, color: "var(--ink-2)", lineHeight: 1.5 }}>Complete tasks to start earning money.</div>
                <div style={{ marginTop: 18 }}>
                  <Button icon="search" onClick={() => go("browse")}>Browse tasks</Button>
                </div>
              </div>
            ) : (
              <div style={{ display: "flex", flexDirection: "column", gap: 0 }}>
                {filtered.map((txn, i) => (
                  <TxnRow key={txn.id || i} txn={txn} cur={cur} last={i === filtered.length - 1} currentProfile={currentProfile} />
                ))}
              </div>
            )}
          </div>
        </>
      )}

      {showWithdraw && (
        <WithdrawModal
          wallet={wallet}
          cur={cur}
          upiId={currentProfile?.upiId || "your UPI"}
          onClose={() => setShowWithdraw(false)}
          onSuccess={(result) => {
            setShowWithdraw(false);
            loadWallet(); // refresh
            if (refreshWallet) refreshWallet();
          }}
        />
      )}
    </Wrap>
  );
}

/* ===== TRANSACTION ROW ===== */
function TxnRow({ txn, cur, last, currentProfile }) {
  const [showInvoice, setShowInvoice] = useW1(false);
  const isCredit = txn.type === "credit" || txn.type === "refund";
  const icon = isCredit ? "arrow" : "arrow";
  const iconRotation = isCredit ? "-90deg" : "90deg";
  const color = isCredit ? "var(--green)" : "var(--clay)";
  const sign = isCredit ? "+" : "−";
  const date = txn.created_at ? new Date(txn.created_at) : null;
  const dateStr = date ? date.toLocaleDateString("en-IN", { day: "numeric", month: "short", year: date.getFullYear() !== new Date().getFullYear() ? "numeric" : undefined }) : "";
  const timeStr = date ? date.toLocaleTimeString("en-IN", { hour: "2-digit", minute: "2-digit" }) : "";

  return (
    <div style={{ display: "flex", gap: 14, alignItems: "center", padding: "16px 0", borderBottom: last ? "none" : "1px solid var(--line)" }}>
      <div style={{
        width: 42, height: 42, borderRadius: 12, flexShrink: 0,
        background: isCredit ? "var(--green-3)" : "color-mix(in srgb, var(--clay) 10%, transparent)",
        color, display: "grid", placeItems: "center",
      }}>
        <Icon name={icon} size={18} style={{ transform: `rotate(${iconRotation})` }} />
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontWeight: 600, fontSize: 14.5, color: "var(--ink)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
          {txn.description || (isCredit ? "Task earning" : "Withdrawal")}
        </div>
        <div style={{ fontSize: 12.5, color: "var(--ink-2)", marginTop: 3, display: "flex", alignItems: "center", gap: 8 }}>
          <span>{dateStr} · {timeStr}</span>
          {txn.payout_status && txn.type === "withdrawal" && (
            <span style={{
              fontSize: 11, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.04em",
              padding: "2px 7px", borderRadius: 999,
              background: txn.payout_status === "completed" ? "var(--green-3)" : txn.payout_status === "failed" ? "color-mix(in srgb, var(--clay) 10%, transparent)" : "color-mix(in srgb, var(--amber) 14%, transparent)",
              color: txn.payout_status === "completed" ? "var(--green)" : txn.payout_status === "failed" ? "var(--clay)" : "var(--amber-dk)",
            }}>{txn.payout_status}</span>
          )}
        </div>
      </div>
      <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 6, flexShrink: 0 }}>
        <div style={{ fontFamily: "var(--display)", fontWeight: 700, fontSize: 16, letterSpacing: "-0.02em", color }}>
          {sign}{cur}{Number(txn.amount).toLocaleString()}
        </div>
        {txn.type === "credit" && txn.task_id && (
          <button onClick={() => setShowInvoice(true)} style={{ background: "none", border: "1px solid var(--line)", borderRadius: 999, padding: "4px 10px", fontSize: 11.5, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.04em", color: "var(--ink-2)", cursor: "pointer", display: "flex", alignItems: "center", gap: 4 }}>
            <Icon name="doc" size={12} /> Invoice
          </button>
        )}
      </div>
      {showInvoice && <InvoiceModal txn={txn} cur={cur} onClose={() => setShowInvoice(false)} currentProfile={currentProfile} />}
    </div>
  );
}

/* ===== WITHDRAW MODAL ===== */
function WithdrawModal({ wallet, cur, upiId, onClose, onSuccess }) {
  const balance = Number(wallet?.balance || 0);
  const [amount, setAmount] = useW1(String(Math.min(balance, Math.max(balance, 100))));
  const [busy, setBusy] = useW1(false);
  const [error, setError] = useW1("");
  const parsed = Number(amount) || 0;
  const valid = parsed >= 100 && parsed <= balance;

  const withdraw = async () => {
    if (busy || !valid) return;
    setBusy(true);
    setError("");

    const { data, error: err } = await Wallet.withdraw(parsed);
    if (err) {
      setError(err);
      setBusy(false);
      return;
    }
    onSuccess(data);
  };

  return (
    <div onClick={onClose} style={modalOverlay}>
      <div onClick={(e) => e.stopPropagation()} style={{ ...modalCard, maxWidth: 440 }}>
        <div style={{ padding: "22px 26px", borderBottom: "1px solid var(--line)", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <h2 style={{ fontFamily: "var(--display)", fontWeight: 600, fontSize: 22, letterSpacing: "-0.02em", margin: 0, color: "var(--ink)" }}>Withdraw to UPI</h2>
          <button onClick={onClose} style={closeBtn}>✕</button>
        </div>
        <div style={{ padding: "22px 26px", display: "flex", flexDirection: "column", gap: 18 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "14px 16px", borderRadius: 13, background: "var(--ink-3)" }}>
            <Icon name="wallet" size={18} style={{ color: "var(--clay)" }} />
            <div>
              <div style={{ fontSize: 12, fontWeight: 600, color: "var(--ink-2)", textTransform: "uppercase", letterSpacing: "0.05em" }}>Sending to</div>
              <div style={{ fontSize: 15.5, fontWeight: 700, color: "var(--ink)", marginTop: 2 }}>{upiId}</div>
            </div>
          </div>

          <div>
            <div style={{ fontSize: 14.5, fontWeight: 700, color: "var(--ink)", marginBottom: 8 }}>Amount</div>
            <div style={{ position: "relative", display: "flex", alignItems: "center" }}>
              <span style={{ position: "absolute", left: 16, fontWeight: 700, color: "var(--ink-2)", fontSize: 20 }}>{cur}</span>
              <input value={amount} onChange={(e) => { setAmount(e.target.value.replace(/[^\d]/g, "")); setError(""); }}
                inputMode="numeric" autoFocus
                style={{ ...inputStyle, paddingLeft: 36, fontWeight: 700, fontSize: 24, fontFamily: "var(--display)", letterSpacing: "-0.02em" }} />
            </div>
            <div style={{ display: "flex", justifyContent: "space-between", marginTop: 8 }}>
              <span style={{ fontSize: 13, color: "var(--ink-2)" }}>Min {cur}100</span>
              <button onClick={() => setAmount(String(Math.floor(balance)))} style={{ background: "none", border: "none", cursor: "pointer", color: "var(--clay)", fontWeight: 600, fontSize: 13, fontFamily: "var(--sans)" }}>
                Withdraw all ({cur}{Math.floor(balance).toLocaleString()})
              </button>
            </div>
          </div>

          {parsed > balance && (
            <div style={{ display: "flex", alignItems: "center", gap: 8, color: "var(--clay)", fontSize: 13.5, fontWeight: 600 }}>
              <Icon name="bolt" size={15} /> Amount exceeds your balance of {cur}{balance.toLocaleString()}
            </div>
          )}

          {error && (
            <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "10px 14px", borderRadius: 11, background: "color-mix(in srgb, var(--clay) 10%, transparent)", color: "var(--clay)", fontSize: 13.5, fontWeight: 600 }}>
              <Icon name="bolt" size={15} /> {error}
            </div>
          )}

          <div style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 13, color: "var(--ink-2)" }}>
            <Icon name="shield" size={14} /> Money is sent to your UPI instantly. One withdrawal per day.
          </div>
        </div>
        <div style={{ padding: "18px 26px", borderTop: "1px solid var(--line)", display: "flex", gap: 10, justifyContent: "flex-end" }}>
          <Button variant="ghost" onClick={onClose} disabled={busy}>Cancel</Button>
          <Button icon="wallet" disabled={busy || !valid} onClick={withdraw}>
            {busy ? "Processing…" : `Withdraw ${cur}${parsed.toLocaleString()}`}
          </Button>
        </div>
      </div>
    </div>
  );
}

/* ===== INVOICE MODAL ===== */
function InvoiceModal({ txn, cur, onClose, currentProfile }) {
  const date = txn.created_at ? new Date(txn.created_at) : new Date();
  const dateStr = date.toLocaleDateString("en-IN", { day: "numeric", month: "short", year: "numeric" });
  const timeStr = date.toLocaleTimeString("en-IN", { hour: "2-digit", minute: "2-digit" });
  const invoiceId = `INV-${date.getFullYear()}${(date.getMonth()+1).toString().padStart(2,"0")}-${txn.id.substring(txn.id.length - 6).toUpperCase()}`;

  const amount = Number(txn.amount);
  const platformFeePercentage = 10;
  const originalAmount = Math.round(amount / (1 - platformFeePercentage/100));
  const feeAmount = originalAmount - amount;

  return (
    <div onClick={onClose} style={{ ...modalOverlay, padding: 20 }}>
      <div onClick={(e) => e.stopPropagation()} style={{ ...modalCard, maxWidth: 500, padding: 0, overflow: "hidden", position: "relative" }}>
        
        {/* Print Header */}
        <div style={{ padding: "30px 32px 24px", background: "var(--surface)", borderBottom: "1px dashed var(--line-dk)" }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 24 }}>
            <div>
              <div style={{ display: "flex", alignItems: "center", gap: 6, marginBottom: 12 }}>
                <div style={{ width: 28, height: 28, borderRadius: 8, background: "var(--ink)", color: "var(--paper)", display: "grid", placeItems: "center" }}>
                  <Icon name="box" size={16} stroke={2.4} />
                </div>
                <span style={{ fontFamily: "var(--display)", fontWeight: 700, fontSize: 18, letterSpacing: "-0.03em", color: "var(--ink)" }}>TaskPe</span>
              </div>
              <div style={{ fontSize: 13, color: "var(--ink-2)", lineHeight: 1.5 }}>
                123 Innovation Drive<br/>Tech Park, Bangalore 560001<br/>GSTIN: 29ABCDE1234F1Z5
              </div>
            </div>
            <div style={{ textAlign: "right" }}>
              <div style={{ fontFamily: "var(--display)", fontWeight: 600, fontSize: 24, letterSpacing: "-0.02em", color: "var(--ink)", marginBottom: 4 }}>TAX INVOICE</div>
              <div style={{ fontSize: 13, color: "var(--ink-2)", fontWeight: 600 }}>{invoiceId}</div>
              <div style={{ fontSize: 13, color: "var(--ink-2)", marginTop: 4 }}>{dateStr} · {timeStr}</div>
            </div>
          </div>

          <div style={{ display: "flex", gap: 40 }}>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 11, fontWeight: 700, color: "var(--ink-2)", textTransform: "uppercase", letterSpacing: "0.06em", marginBottom: 6 }}>Billed To (Task Doer)</div>
              <div style={{ fontSize: 14, fontWeight: 600, color: "var(--ink)" }}>{currentProfile?.handle || "User"}</div>
              {currentProfile?.upiId && <div style={{ fontSize: 13, color: "var(--ink-2)", marginTop: 2 }}>UPI: {currentProfile.upiId}</div>}
            </div>
          </div>
        </div>

        {/* Invoice Body */}
        <div style={{ padding: "24px 32px", background: "var(--paper)" }}>
          <div style={{ fontSize: 15, fontWeight: 600, color: "var(--ink)", marginBottom: 16 }}>Service Details</div>
          
          <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 14 }}>
            <thead>
              <tr style={{ borderBottom: "1px solid var(--line)" }}>
                <th style={{ textAlign: "left", paddingBottom: 10, color: "var(--ink-2)", fontWeight: 600 }}>Description</th>
                <th style={{ textAlign: "right", paddingBottom: 10, color: "var(--ink-2)", fontWeight: 600 }}>Amount</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td style={{ paddingTop: 16, paddingBottom: 8, color: "var(--ink)", fontWeight: 500 }}>
                  <div style={{ marginBottom: 4 }}>{txn.description}</div>
                  <div style={{ fontSize: 12, color: "var(--ink-2)" }}>Task ID: {txn.task_id}</div>
                </td>
                <td style={{ paddingTop: 16, paddingBottom: 8, color: "var(--ink)", fontWeight: 600, textAlign: "right" }}>
                  {cur}{originalAmount.toLocaleString(undefined, {minimumFractionDigits: 2})}
                </td>
              </tr>
              <tr>
                <td style={{ paddingBottom: 16, borderBottom: "1px solid var(--line)" }}>
                  <div style={{ fontSize: 13, color: "var(--clay)", display: "flex", alignItems: "center", gap: 5 }}>
                    <Icon name="bolt" size={12} /> Platform Fee (10%)
                  </div>
                </td>
                <td style={{ paddingBottom: 16, borderBottom: "1px solid var(--line)", color: "var(--clay)", textAlign: "right", fontWeight: 600 }}>
                  -{cur}{feeAmount.toLocaleString(undefined, {minimumFractionDigits: 2})}
                </td>
              </tr>
            </tbody>
          </table>

          <div style={{ display: "flex", justifyContent: "flex-end", marginTop: 16 }}>
            <div style={{ width: 220 }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 8, fontSize: 14 }}>
                <span style={{ color: "var(--ink-2)" }}>Subtotal</span>
                <span style={{ fontWeight: 600 }}>{cur}{amount.toLocaleString(undefined, {minimumFractionDigits: 2})}</span>
              </div>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 12, fontSize: 14 }}>
                <span style={{ color: "var(--ink-2)" }}>Tax (0% GST)</span>
                <span style={{ fontWeight: 600 }}>{cur}0.00</span>
              </div>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", paddingTop: 12, borderTop: "2px solid var(--ink)" }}>
                <span style={{ fontWeight: 700, fontSize: 16, color: "var(--ink)" }}>Net Credit</span>
                <span style={{ fontFamily: "var(--display)", fontWeight: 700, fontSize: 20, color: "var(--green)" }}>{cur}{amount.toLocaleString(undefined, {minimumFractionDigits: 2})}</span>
              </div>
            </div>
          </div>
        </div>

        {/* Footer Actions */}
        <div style={{ padding: "16px 32px", background: "var(--surface)", borderTop: "1px solid var(--line)", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <div style={{ fontSize: 12, color: "var(--ink-2)" }}>Computer generated invoice. No signature required.</div>
          <div style={{ display: "flex", gap: 10 }}>
            <Button variant="ghost" size="sm" onClick={onClose}>Close</Button>
            <Button size="sm" icon="doc" onClick={() => window.print()}>Print / PDF</Button>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { WalletPage });