/* global window, React, Chart */
// ============================================================
// js/minamoto/crosschain.jsx
// XOR migration tracker. Each Minamoto tx that mints XOR carries
// a "sora_v2_claim_tx_hash" pointing back to its burn on SORA v2.
// We aggregate those claims, total amount migrated, unique
// recipients, and a per-hour series. Bidirectional links open
// the v2 burn extrinsic and the recipient wallet.
// ============================================================
window.MN = window.MN || {};
(function (MN) {
// Iroha 3 / Minamoto stores XOR as Numeric ALREADY in user units (not
// 1e18-scaled raw like SORA v2). Bridge converts at mint time. So format
// straight as-is with sane decimal trimming.
function fmtXor(s) {
if (s == null || s === '') return '—';
const n = Number(s);
if (!Number.isFinite(n)) return s;
if (n === 0) return '0';
if (n < 0.001) return n.toFixed(6);
if (n < 1) return n.toFixed(4);
if (n < 1000) return n.toFixed(4).replace(/\.?0+$/, '');
return n.toLocaleString('en-US', { maximumFractionDigits: 4 });
}
function Kpi({ label, value, sub }) {
return (
{label}
{value}
{sub && {sub}}
);
}
function TimeChart({ hours = 168 }) {
const t = MN.i18n.useT();
const { data } = MN.useFetch(`/cross-chain/timeseries?hours=${hours}`, 60_000);
const ref = React.useRef(null);
const chartRef = React.useRef(null);
const series = (data && data.series) || [];
React.useEffect(() => {
if (!ref.current) return;
if (series.length === 0) {
if (chartRef.current) { chartRef.current.destroy(); chartRef.current = null; }
return;
}
const labels = series.map(s => new Date(s.bucket).toLocaleString());
const claims = series.map(s => s.claims);
const xor = series.map(s => Number(s.xor_claimed));
if (chartRef.current) chartRef.current.destroy();
chartRef.current = new Chart(ref.current.getContext('2d'), {
type: 'bar',
data: {
labels,
datasets: [
{ type: 'bar', label: 'Claims', data: claims, backgroundColor: 'rgba(160,98,176,0.55)', borderColor: '#A062B0', borderWidth: 1, yAxisID: 'y' },
{ type: 'line', label: 'XOR claimed', data: xor, borderColor: '#10B981', backgroundColor: 'rgba(16,185,129,0.10)', borderWidth: 2, tension: 0.25, pointRadius: 0, yAxisID: 'y1' },
],
},
options: {
responsive: true, maintainAspectRatio: false,
interaction: { mode: 'nearest', intersect: false },
scales: {
x: { ticks: { color: '#6b7280', maxRotation: 0, autoSkip: true, maxTicksLimit: 10 }, grid: { display: false } },
y: { ticks: { color: '#A062B0' }, grid: { color: 'rgba(255,255,255,0.04)' }, title: { display: true, text: 'Claims', color: '#A062B0' } },
y1: { position: 'right', ticks: { color: '#10B981' }, grid: { display: false }, title: { display: true, text: 'XOR', color: '#10B981' } },
},
plugins: {
legend: { labels: { color: '#9ca3af', font: { size: 11 } } },
tooltip: { titleColor: '#fafafa', bodyColor: '#e5e7eb' },
},
},
});
return () => { if (chartRef.current) { chartRef.current.destroy(); chartRef.current = null; } };
}, [JSON.stringify(series)]);
if (series.length === 0) return null;
return (
{t('cc.timeChart')}
last {hours}h
);
}
// Bidirectional claims table. Renders BOTH sides per row — the user is on
// /minamoto so we orient mn-side as primary (highlighted) and v2-side as
// counterpart (muted ember). The v2 SPA uses the same component but with
// perspective='v2' — see SORA v2's xor_migration.jsx.
function ClaimsTable({ perspective = 'minamoto' }) {
const t = MN.i18n.useT();
const [page, setPage] = React.useState(1);
const perPage = 50;
const { data, error, loading } = MN.useFetch(`/cross-chain/claims?page=${page}&per_page=${perPage}`, 30_000);
const items = data && data.items ? data.items : [];
const isMn = perspective === 'minamoto';
const cols = [
{ key: 'when', label: t('common.created'), render: r => {MN.fmt.relative(r.created_at)} },
{ key: 'amt', label: 'XOR', render: r => {fmtXor(r.claimed_amount)} },
// PRIMARY (current network) BLOCK
{ key: 'this_block', label: isMn ? t('cc.mnBlock') : t('cc.v2Block'), render: r => {
const b = isMn ? r.mn_block : r.v2_block;
if (b == null) return —;
return isMn
? #{MN.fmt.int(b)}
: #{MN.fmt.int(b)};
} },
// PRIMARY (current network) TX HASH
{ key: 'this_tx', label: isMn ? t('cc.mnTx') : t('cc.v2Tx'), render: r => {
const h = isMn ? r.mn_tx_hash : r.v2_tx_hash;
if (!h) return —;
return isMn
? {MN.shortHash(h, 6, 4)}
: {MN.shortHash(h, 8, 4)};
} },
// PRIMARY (current network) ACCOUNT
{ key: 'this_acc', label: isMn ? t('cc.mnRecipient') : t('cc.v2Signer'), render: r => {
const a = isMn ? r.mn_recipient : r.v2_signer;
if (!a) return —;
return isMn
? {MN.shortAccount(a, 8, 6)}
: {a.slice(0, 10)}…{a.slice(-6)};
} },
// OTHER NETWORK BLOCK
{ key: 'other_block', label: isMn ? t('cc.v2Block') : t('cc.mnBlock'), render: r => {
const b = isMn ? r.v2_block : r.mn_block;
if (b == null) return —;
return isMn
? #{MN.fmt.int(b)}
: #{MN.fmt.int(b)};
} },
// OTHER NETWORK TX HASH
{ key: 'other_tx', label: isMn ? t('cc.v2Tx') : t('cc.mnTx'), render: r => {
const h = isMn ? r.v2_tx_hash : r.mn_tx_hash;
if (!h) return —;
return isMn
? {MN.shortHash(h, 8, 4)}
: {MN.shortHash(h, 6, 4)};
} },
// OTHER NETWORK ACCOUNT
{ key: 'other_acc', label: isMn ? t('cc.v2Signer') : t('cc.mnRecipient'), render: r => {
const a = isMn ? r.v2_signer : r.mn_recipient;
if (!a) return —;
return isMn
? {a.slice(0, 10)}…{a.slice(-6)}
: {MN.shortAccount(a, 8, 6)};
} },
];
const rows = items.map(x => ({ ...x, __key: x.mn_tx_hash }));
return (
{error &&
{error.message}
}
{t('cc.title')}
{t('cc.subtitle')}
);
}
MN.CrossChain = CrossChain;
})(window.MN);