diff --git a/src/features/wallet/components/sidebar-wallet-card.tsx b/src/features/wallet/components/sidebar-wallet-card.tsx
index bbd3581b..305917d7 100644
--- a/src/features/wallet/components/sidebar-wallet-card.tsx
+++ b/src/features/wallet/components/sidebar-wallet-card.tsx
@@ -5,8 +5,7 @@ import { useCopyToClipboard } from 'usehooks-ts';
import { useAuth } from '@/features/auth/hooks/use-auth';
import { Card, CardContent } from '@/shared/components/ui/card';
import { cn } from '@/shared/utils';
-import { useNuwaToUsdRate } from '../hooks/use-nuwa-to-usd-rate';
-import { useWallet } from '../hooks/use-wallet';
+import { usePaymentHubRgas } from '@/shared/hooks/usePaymentHub';
interface SidebarWalletCardProps {
className?: string;
@@ -15,11 +14,10 @@ interface SidebarWalletCardProps {
export function SidebarWalletCard({ className }: SidebarWalletCardProps) {
const navigate = useNavigate();
const { did, isConnected } = useAuth();
- const { balance } = useWallet();
- const nuwaToUsdRate = useNuwaToUsdRate();
+ const { usd, loading, error } = usePaymentHubRgas();
const [_, copyToClipboard] = useCopyToClipboard();
- const usdValue = (balance / nuwaToUsdRate).toFixed(2);
+ const usdValue = loading ? '…' : error ? '-' : usd;
const handleClick = () => {
navigate('/wallet');
diff --git a/src/features/wallet/components/transaction-history.tsx b/src/features/wallet/components/transaction-history.tsx
index 4351e879..1726cc60 100644
--- a/src/features/wallet/components/transaction-history.tsx
+++ b/src/features/wallet/components/transaction-history.tsx
@@ -4,80 +4,78 @@ import {
CardHeader,
CardTitle,
} from '@/shared/components/ui/card';
-import { useNuwaToUsdRate } from '../hooks/use-nuwa-to-usd-rate';
-import { useWallet } from '../hooks/use-wallet';
-import type { Transaction } from '../types';
-
-function TransactionRow({ transaction }: { transaction: Transaction }) {
- const nuwaToUsdRate = useNuwaToUsdRate();
- const amountColor =
- transaction.type === 'deposit' ? 'text-green-600' : 'text-red-600';
- const amountPrefix = transaction.type === 'deposit' ? '+' : '-';
-
- const formatDate = (timestamp: string) => {
- return new Date(timestamp).toLocaleDateString('en-US', {
- month: 'short',
- day: 'numeric',
- year: 'numeric',
- });
- };
-
- const getStatusBadge = (status: Transaction['status']) => {
- const baseClasses =
- 'inline-flex items-center rounded-full px-2 py-1 text-xs font-medium';
-
- switch (status) {
- case 'completed':
- return `${baseClasses} bg-green-100 text-green-800`;
- case 'confirming':
- return `${baseClasses} bg-yellow-100 text-yellow-800`;
- default:
- return `${baseClasses} bg-gray-100 text-gray-800`;
- }
- };
-
- const usdValue = transaction.amount.toFixed(6).toLocaleString();
- const nuwaValue = (transaction.amount * nuwaToUsdRate).toFixed(6);
+import { useTransactions } from '@/shared/hooks/useTransactions';
+import { formatAmount } from '@nuwa-ai/payment-kit';
+function TransactionRow({
+ operation,
+ status,
+ statusCode,
+ cost,
+ costUsd,
+ paidAt,
+ stream,
+}: {
+ operation: string;
+ status: string;
+ statusCode?: number;
+ cost?: string;
+ costUsd?: string;
+ paidAt?: string;
+ stream?: boolean;
+}) {
return (
- {transaction.label}
-
- {transaction.status}
-
+ {operation}
+ {stream && stream}
-
- {formatDate(transaction.timestamp.toString())}
-
+
{paidAt ? new Date(paidAt).toLocaleString() : ''}
-
-
{`${amountPrefix}$${usdValue} USD`}
-
- {`${amountPrefix}${nuwaValue} $NUWA`}
-
+
+
{status}{statusCode ? ` (${statusCode})` : ''}
+ {cost && (
+
{costUsd ? `${cost} (${costUsd} USD)` : cost}
+ )}
);
}
export function TransactionHistory() {
- const { transactions } = useWallet();
+ const { items, loading, error, reload } = useTransactions(50);
return (
-
- Recent Transactions
+
+ Payment Transactions
+
- {transactions.length === 0 ? (
-
- No transactions found
-
+ {loading ? Loading...
: error ? (
+ {error}
+ ) : items.length === 0 ? (
+ No payment transactions
) : (
- {transactions.map((transaction) => (
-
+ {items.map((tx) => (
+ {
+ const v = tx.payment?.costUsd as unknown;
+ if (typeof v === 'bigint') return `$${formatAmount(v, 12)}`;
+ if (v !== undefined && v !== null) {
+ return `$${formatAmount(BigInt(String(v)), 12)}`;
+ }
+ return undefined;
+ })()}
+ paidAt={tx.payment?.paidAt}
+ stream={tx.stream}
+ />
))}
)}
diff --git a/src/shared/config/llm-gateway.ts b/src/shared/config/llm-gateway.ts
new file mode 100644
index 00000000..8eac61fd
--- /dev/null
+++ b/src/shared/config/llm-gateway.ts
@@ -0,0 +1,6 @@
+// Centralized LLM Gateway configuration for reuse across features
+
+// TODO: consider moving to environment-configurable source
+export const LLM_GATEWAY_BASE_URL = 'https://llm-gateway-payment-test.up.railway.app/api/v1';
+
+
diff --git a/src/shared/hooks/usePaymentHub.ts b/src/shared/hooks/usePaymentHub.ts
new file mode 100644
index 00000000..f94c6ae5
--- /dev/null
+++ b/src/shared/hooks/usePaymentHub.ts
@@ -0,0 +1,43 @@
+import { useCallback, useEffect, useState } from 'react';
+import { getPaymentHubClient } from '@/shared/services/payment-clients';
+
+function formatBigIntWithDecimals(value: bigint, decimals: number, fractionDigits: number): string {
+ const negative = value < 0n;
+ const v = negative ? -value : value;
+ const base = 10n ** BigInt(decimals);
+ const integer = v / base;
+ let fraction = (v % base).toString().padStart(decimals, '0');
+ if (fractionDigits >= 0) fraction = fraction.slice(0, Math.min(decimals, fractionDigits));
+ const fracPart = fractionDigits > 0 ? `.${fraction}` : '';
+ return `${negative ? '-' : ''}${integer.toString()}${fracPart}`;
+}
+
+export function usePaymentHubRgas(defaultAssetId = '0x3::gas_coin::RGas') {
+ const [loading, setLoading] = useState(false);
+ const [error, setError] = useState(null);
+ const [amount, setAmount] = useState('0');
+ const [usd, setUsd] = useState('0');
+
+ const refetch = useCallback(async () => {
+ setLoading(true);
+ try {
+ const hub = await getPaymentHubClient(defaultAssetId);
+ const res = await hub.getBalanceWithUsd({ assetId: defaultAssetId });
+ setAmount(formatBigIntWithDecimals(res.balance, 8, 8));
+ setUsd(formatBigIntWithDecimals(res.balancePicoUSD, 12, 2));
+ setError(null);
+ } catch (e: any) {
+ setError(e?.message || String(e));
+ } finally {
+ setLoading(false);
+ }
+ }, [defaultAssetId]);
+
+ useEffect(() => {
+ refetch();
+ }, [refetch]);
+
+ return { loading, error, amount, usd, refetch };
+}
+
+
diff --git a/src/shared/hooks/useTransactions.ts b/src/shared/hooks/useTransactions.ts
new file mode 100644
index 00000000..53e883d3
--- /dev/null
+++ b/src/shared/hooks/useTransactions.ts
@@ -0,0 +1,50 @@
+import { useCallback, useEffect, useState } from 'react';
+import { getHttpClient } from '@/shared/services/payment-clients';
+import type { TransactionRecord, TransactionStore } from '@nuwa-ai/payment-kit';
+
+export function useTransactions(limit = 50) {
+ const [loading, setLoading] = useState(false);
+ const [error, setError] = useState(null);
+ const [items, setItems] = useState([]);
+ const [store, setStore] = useState(null);
+
+ const load = useCallback(async () => {
+ setLoading(true);
+ try {
+ const client = await getHttpClient();
+ const txStore = client.getTransactionStore();
+ setStore(txStore);
+ const res = await txStore.list({}, { limit });
+ setItems(res.items);
+ setError(null);
+ } catch (e: any) {
+ setError(e?.message || String(e));
+ } finally {
+ setLoading(false);
+ }
+ }, [limit]);
+
+ useEffect(() => {
+ let unsub: (() => void) | undefined;
+ (async () => {
+ await load();
+ try {
+ if (store && store.subscribe) {
+ unsub = store.subscribe(() => {
+ // naive: just reload on any change
+ load();
+ });
+ }
+ } catch {}
+ })();
+ return () => {
+ if (unsub) {
+ try { unsub(); } catch {}
+ }
+ };
+ }, [load, store]);
+
+ return { loading, error, items, reload: load };
+}
+
+
diff --git a/src/shared/services/payment-clients.ts b/src/shared/services/payment-clients.ts
new file mode 100644
index 00000000..6cea4e56
--- /dev/null
+++ b/src/shared/services/payment-clients.ts
@@ -0,0 +1,42 @@
+import { IdentityKitWeb } from '@nuwa-ai/identity-kit-web';
+import { createHttpClient, RoochPaymentChannelContract, PaymentHubClient } from '@nuwa-ai/payment-kit';
+import type { PaymentChannelHttpClient } from '@nuwa-ai/payment-kit';
+import { LLM_GATEWAY_BASE_URL } from '@/shared/config/llm-gateway';
+
+let httpClientPromise: Promise | null = null;
+let hubClientPromise: Promise | null = null;
+
+async function getIdentityEnvAndSigner() {
+ const sdk = await IdentityKitWeb.init({ storage: 'local' });
+ const env = sdk.getIdentityEnv();
+ const signer = env.keyManager;
+ return { sdk, env, signer };
+}
+
+export async function getHttpClient(): Promise {
+ if (!httpClientPromise) {
+ httpClientPromise = (async () => {
+ const { env } = await getIdentityEnvAndSigner();
+ return createHttpClient({ baseUrl: LLM_GATEWAY_BASE_URL, env });
+ })();
+ }
+ return httpClientPromise;
+}
+
+export async function getPaymentHubClient(defaultAssetId?: string): Promise {
+ if (!hubClientPromise) {
+ hubClientPromise = (async () => {
+ const { env, signer } = await getIdentityEnvAndSigner();
+ const chain = (env as any).chainConfig || undefined;
+ const contract = new RoochPaymentChannelContract({
+ rpcUrl: chain?.rpcUrl,
+ network: chain?.network,
+ debug: !!chain?.debug,
+ });
+ return new PaymentHubClient({ contract, signer, defaultAssetId: defaultAssetId || '0x3::gas_coin::RGas' });
+ })();
+ }
+ return hubClientPromise;
+}
+
+
diff --git a/src/shared/services/payment-fetch.ts b/src/shared/services/payment-fetch.ts
new file mode 100644
index 00000000..7c3612c3
--- /dev/null
+++ b/src/shared/services/payment-fetch.ts
@@ -0,0 +1,18 @@
+import { getHttpClient } from '@/shared/services/payment-clients';
+
+/**
+ * Create a fetch-compatible function backed by Payment Kit.
+ * It automatically handles payment-channel headers and streaming settlement.
+ */
+export function createPaymentFetch(baseUrl: string, _options?: { maxAmount?: bigint }) {
+ return async function paymentFetch(input: RequestInfo | URL, init?: RequestInit): Promise {
+ const targetUrl = new URL(typeof input === 'string' ? input : (input as any).url ?? input.toString());
+ const methodFromInit = (init?.method ?? 'POST').toUpperCase() as 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH';
+
+ const client = await getHttpClient();
+ const handle = await client.requestWithPayment(methodFromInit, targetUrl.toString(), init);
+ return handle.response;
+ };
+}
+
+