);
}
function CompareView({ openSingle }) {
// Read-only side-by-side. Both phones render the same dataset.
const noop = () => {};
return (
A / B サイド・バイ・サイド
同じデータセット（G3 / BTC / USDT×5 / ETH×2）を 2 つの構造で見せる
?mode=a= A 単体ピュア?mode=b= B 単体ピュア
A Flat — chain-separated rows
9 行 ｜ ラベル重複あり ｜ スクロール長い
B Grouped — asset-first cards
4 カード ｜ チェーンは中で展開 ｜ スケール可能
まず見るべきところ: USDT が A では 5 行に分裂、B では 1 カードに集約されている。 ETH も同様。チェーンが増えると A は線形に長くなり、B は一定のまま。
スケール后の推奨
EVM チェーンが 2、3 と増えたとき、B（grouped） のほうが Home の長さを一定に保てる。
A の「チェーン名明示」の価値は、カード内や Send 画面の「ネットワーク」行で取り戻せる。
したがって推奨: B を Home の骨格とし、A スタイルのチェーン被覆表示は資産詳細·Send 画面に集約する。
);
}
function CompareCell({ title, a, b, highlight }) {
return (
{title}
A{a}
B{b}
);
}
// ─── Footer strip (proto annotation, hide-able) ────────────
function FooterStrip({ children }) {
return (
{children}
);
}
// ═══════════════════════════════════════════════════════════
// State machine
// ═══════════════════════════════════════════════════════════
const screenIndex = ['home', 'assetDetail', 'sendInput', 'sendConfirm', 'sent', 'receive', 'unsupported'];
function App() {
const params0 = new URLSearchParams(location.search);
const initialModeRaw = (params0.get('mode') || '').toLowerCase();
const isCompareView = !['a', 'b'].includes(initialModeRaw);
const initialMode = initialModeRaw === 'b' ? 'b' : 'a';
const [mode, setMode] = useState(initialMode);
const [view, setView] = useState(isCompareView ? 'compare' : 'single');
const [screen, setScreen] = useState(() => {
return (location.hash || '').replace('#', '').split('?')[0] || 'home';
});
const [params, setParams] = useState({});
const switchMode = (m) => {
setMode(m);
const u = new URL(location.href);
u.searchParams.set('mode', m);
history.replaceState(null, '', u.toString());
};
const go = (next, p = {}) => {
setScreen(next);
setParams(prev => ({ ...prev, ...p }));
// persist
const merged = { ...params, ...p };
const qs = Object.entries(merged)
.filter(([, v]) => v != null && v !== '')
.map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(v)}`).join('&');
history.replaceState(null, '', `#${next}${qs ? '?' + qs : ''}`);
};
useEffect(() => {
const onHash = () => {
const h = (location.hash || '').replace('#', '');
const [s, qs] = h.split('?');
if (s && screenIndex.includes(s)) {
setScreen(s);
if (qs) {
const p = {};
qs.split('&').forEach(pair => {
const [k, v] = pair.split('=');
p[decodeURIComponent(k)] = decodeURIComponent(v || '');
});
setParams(prev => ({ ...prev, ...p }));
}
}
};
window.addEventListener('hashchange', onHash);
onHash();
return () => window.removeEventListener('hashchange', onHash);
}, []);
const openSingle = (m) => {
setMode(m);
setView('single');
const u = new URL(location.href);
u.searchParams.set('mode', m);
history.pushState(null, '', u.toString());
};
if (view === 'compare') {
return ;
}
let body;
switch (screen) {
case 'home': body = ; break;
case 'assetDetail': body = ; break;
case 'sendInput': body = ; break;
case 'sendConfirm': body = ; break;
case 'sent': body = ; break;
case 'receive': body = ; break;
case 'unsupported': body = ; break;
default: body = ;
}
return (