// EVERSEAL — Main VC Flow · Sub-screens // Asset Detail / Trading / Licensing / NFT Burn / Registration form + done / Verify result // Self-contained (own helpers) — load WITHOUT main-tabs.jsx to avoid name clashes. // Requires icons.js (esIcon) + ios-frame.jsx (IOSDevice) // Grounded in EVS-iOS 005/006/011/012 + To-Be 수익모델·보안 설계 const Ic = ({ n, s = 24, sw = 1.8, style }) => ( ); // one-time keyframe inject (spinner used by WalletManageScreen) if (typeof document !== 'undefined' && !document.getElementById('es-sub-kf')) { const st = document.createElement('style'); st.id = 'es-sub-kf'; st.textContent = '@keyframes esSubSpin{to{transform:rotate(360deg)}}'; document.head.appendChild(st); } const Scroll = ({ children, style }) => (
{children}
); // 지갑 주소 (진한 카드용) · 가운데 …축약 · 1줄 고정 · 복사 + 피드백 function WalletAddrLine({ addr, head = 10, tail = 6 }) { const [copied, setCopied] = React.useState(false); const short = addr.length > head + tail + 1 ? addr.slice(0, head) + '…' + addr.slice(-tail) : addr; const copy = (e) => { e.stopPropagation(); try { navigator.clipboard && navigator.clipboard.writeText(addr); } catch (_) {} setCopied(true); clearTimeout(copy._t); copy._t = setTimeout(() => setCopied(false), 1500); }; return (
{short}
); } const Canvas = ({ from, to, h = 200, r, style, children, img }) => (
{img && } {children}
); const ART = { dawn: ['#C9BBA0', '#7C6A48'], layers: ['#D8C2C0', '#7A5556'], moon: ['#E7E2D6', '#A89B7C'], abyss: ['#3A4A63', '#0E1726'], blue: ['#9FB4C9', '#3C566E'], }; // push-style nav bar (back chevron + centered title) function PushNav({ title, onBack, right, dark, hideBack }) { const c = dark ? '#fff' : 'var(--es-ink)'; return (
{!hideBack && }
{title}
{right}
); } const StickyBar = ({ children, dark }) => (
{children}
); const InfoTip = ({ text }) => { const [open, setOpen] = React.useState(false); return ( {open && ( { e.stopPropagation(); setOpen(false); }} style={{ position: 'fixed', inset: 0, zIndex: 900 }} /> {text} )} ); }; const FieldRow = ({ k, v, mono, last, strong, info }) => (
{k}{info && } {v}
); // ═════════════════════════════════════════════════════════ // ASSET DETAIL (작품 상세 · EVS-iOS 011) // ═════════════════════════════════════════════════════════ function AssetDetailScreen() { return (
{}} right={<> } /> 정품 인증 에디션 12 / 50
2025 · 캔버스에 유채 · 72.7 × 60.6 cm
새벽의 정물 No.3
박서린
인증 작가 · 소유자 본인
{/* parties · 발행자 · 원작자 · 현재 소유자 */}
작품 관계자
{[ ['발행자', '박서린', 'rN7n…fzRH', 'seal'], ['원작자', '박서린', '인증 작가', 'brush'], ['현재 소유자', '박서린', '본인 보관', 'person'], ].map(([role, name, sub, ic], i) => (
{role}
{name}
{sub}
))}
{/* 현재 거래 · XRPL 판매 제안 진행 중 */}
현재 거래
거래중
잠재 바이어
김도윤
rDoY…4fzRH
{/* ownership / provenance */}
소유 · 거래 이력
{[ ['작품 등록 · NFT 발행', '2024.03.12 · 박서린(작가)', 'seal', 'var(--es-green)'], ['1차 판매', '2024.09.02 · 2,800 XRP', 'arrow-up-right', 'var(--es-bronze)'], ['소유권 이전 (현재)', '2025.05.20 · 박서린 보관', 'person', 'var(--es-ink-2)'], ].map(([t, d, ic, col], i, arr) => (
{i < arr.length - 1 &&
}
{t}
{d}
))}
{/* manage (burn) */}
추정 시세
3,100 XRP
); } // ═════════════════════════════════════════════════════════ // TRADING (거래하기 · EVS-iOS 012) // ═════════════════════════════════════════════════════════ function TradingScreen() { const [mode, setMode] = React.useState('판매'); const [price, setPrice] = React.useState('3,200'); const [stage, setStage] = React.useState('form'); // form | processing const num = parseFloat(String(price).replace(/,/g, '')) || 0; const fee = Math.round(num * 0.025); const royalty = Math.round(num * 0.10); const net = num - fee - royalty; const krw = (n) => '₩' + Math.round(n * 1850).toLocaleString(); const fmt = (n) => n.toLocaleString(); const submit = () => { setStage('processing'); setTimeout(() => setStage('form'), 1800); // demo loop — 실제로는 완료 후 다음 스텝(판매 대상 지정)으로 push }; if (stage === 'processing') { const label = mode === '판매' ? '판매 등록' : '양도 등록'; return (
{}} />
{label}을 처리하고 있어요

수수료를 정산하고 XRPL 원장에 기록 중…

); } return (
{}} /> {/* artwork mini */}
새벽의 정물 No.3
박서린 · 에디션 12/50 · NFT #4821
{/* mode */}
{['판매', '이전(양도)'].map(t => ( ))}
{/* price */}
{mode === '판매' ? '판매 가격' : '양도 평가액'}
setPrice(e.target.value)} inputMode="decimal" style={{ border: 'none', outline: 'none', font: 'var(--es-t-title-1)', letterSpacing: '-0.4px', width: '100%', background: 'transparent', color: 'var(--es-ink)' }} /> XRP
≈ {krw(num)}
{/* fee breakdown */}
정산 예상
2차 판매 로열티는 NFT 메타데이터 정책에 따라 자동 분배되며, 정산은 서버 검증 후 XRPL 원장에 기록됩니다.
); } // ═════════════════════════════════════════════════════════ // SELL OFFER (판매 대상 지정 · NFTokenCreateOffer + Destination) // TradeViewController 다음 단계 // ═════════════════════════════════════════════════════════ // mock 회원 DB — 이름 검색 시 서버에서 조회하는 구조를 표현 const ES_MEMBERS = [ { name: '김도윤', role: '컬렉터 · 인증회원', addr: 'rDoYn7kQm2vT8xLpZa3bXcW9uHsNq4fzRH', color: '#4B6D5A' }, { name: '이서준 갤러리', role: '갤러리 · 서울', addr: 'rGa11eryS3jNv8kQm2xLpZa3bXcW9uHsNq', color: '#7A5A3C' }, { name: '박하늘', role: '투자자', addr: 'rHaNu1x8kQm2vT8xLpZa3bXcW9uHsNq4fz', color: '#3C5A7A' }, { name: '정예린', role: '컬렉터', addr: 'rYeR1n2vT8xLpZa3bXcW9uHsNq4fzRHkQm', color: '#6B4B6D' }, { name: '최민서', role: '컬렉터 · 인증회원', addr: 'rM1nSeo8kQm2vT8xLpZa3bXcW9uHsNq4fz', color: '#5A6B3C' }, { name: '한지우 아트', role: '갤러리 · 부산', addr: 'rJiWu2vT8xLpZa3bXcW9uHsNq4fzRHkQm2', color: '#8A5A5A' }, { name: '오세훈', role: '투자자', addr: 'rSeHun8kQm2vT8xLpZa3bXcW9uHsNq4fzR', color: '#3C6D6D' }, ]; function isXrplAddr(s) { return /^r[1-9A-HJ-NP-Za-km-z]{24,34}$/.test(s.trim()); } function shortAddr(a) { return a.length > 16 ? a.slice(0, 8) + '…' + a.slice(-5) : a; } function SellOfferScreen() { const NET = 2808; // 최종 예상 수령액 (TradeVC 정산 결과) const [query, setQuery] = React.useState(''); const [picked, setPicked] = React.useState(null); // 선택된 판매 대상 const [searching, setSearching] = React.useState(false); // 검색 오버레이 열림 const [expiry, setExpiry] = React.useState('7일'); const [confirming, setConfirming] = React.useState(false); // iOS 확인 알럿 const [stage, setStage] = React.useState('form'); // form | processing | done const krw = (n) => '₩' + Math.round(n * 1850).toLocaleString(); const submit = () => { setConfirming(false); setStage('processing'); setTimeout(() => setStage('done'), 1400); }; const targetName = picked ? (picked.member ? picked.member.name : shortAddr(picked.addr)) : ''; const q = query.trim(); const rawMatch = isXrplAddr(q); const results = q.length >= 1 ? ES_MEMBERS.filter(m => m.name.includes(q) || m.addr.toLowerCase().startsWith(q.toLowerCase())) : ES_MEMBERS; const canSubmit = !!picked; const choose = (sel) => { setPicked(sel); setSearching(false); }; const Avatar = ({ m, s = 40 }) => (
{m.name[0]}
); // ── 처리 중 · 완료 화면 ── if (stage === 'processing' || stage === 'done') { const isDone = stage === 'done'; return (
{isDone ? (
판매 제안이 등록되었어요

{targetName ? {targetName} : '지정한 상대'}님에게 판매 제안을 보냈어요.
상대가 수락하면 소유권이 이전됩니다.

) : (
판매 제안을 등록하고 있어요

XRPL 원장에 안전하게 기록 중…

 )}
{isDone && (
)}
); } return (
{}} /> {/* price summary */}
새벽의 정물 No.3
박서린 · 에디션 12/50 · NFT #4821
최종 예상 수령액 {NET.toLocaleString()} XRP
≈ {krw(NET)}
{/* recipient */}
판매 대상
{picked ? (
{picked.member ? :
}
{picked.member ? picked.member.name : '직접 입력한 지갑'}
{shortAddr(picked.addr)}
) : ( )}
{/* expiration */}
제안 만료 · Expiration
{['24시간', '7일', '30일', '없음'].map(t => { const on = expiry === t; return ( ); })}
{/* offer summary */}
판매 제안 요약
지정 판매는 대상 지갑만 수락할 수 있어요. 제안 등록에는 소량의 XRPL 예약금(reserve)이 필요하며, 취소 시 되돌려받습니다.
{/* ── iOS 확인 알럿 ── */} {confirming && (
setConfirming(false)} style={{ position: 'absolute', inset: 0, zIndex: 90, background: 'rgba(0,0,0,0.34)', animation: 'esDimIn .2s ease both' }} />
판매 제안을 등록할까요?

{targetName && {targetName}}님에게 {NET.toLocaleString()} XRP 조건으로 제안을 보냅니다. 등록에는 소량의 예약금(reserve)이 필요해요.

)} {/* ── 검색 시트 (iOS 하프 시트) ── */} {searching && ( {/* scrim */}
setSearching(false)} style={{ position: 'absolute', inset: 0, zIndex: 80, background: 'rgba(18,32,23,0.42)', animation: 'esScrimIn .28s ease both' }} /> {/* sheet */}
{/* header + search */}
판매 대상 선택
setQuery(e.target.value)} placeholder="이름 또는 지갑 주소(r...)" style={{ fontSize: 15 }} />
{/* raw wallet address entry */} {rawMatch && ( )}
{q.length >= 1 ? `검색 결과 ${results.length}` : '회원 · 최근 거래 상대'}
{results.map((m) => ( ))} {q.length >= 1 && results.length === 0 && !rawMatch && (

'{q}' 검색 결과가 없어요.
정확한 이름 또는 지갑 주소(r로 시작)를 입력해 주세요.

)}
)}
); } // ═════════════════════════════════════════════════════════ // LICENSING (라이선싱 발급 · N차 라이선싱) // ═════════════════════════════════════════════════════════ function LicensingScreen() { const [type, setType] = React.useState('전시'); const [scope, setScope] = React.useState('국내'); const types = ['전시', '복제', '상업적 사용']; const scopes = ['국내', '글로벌']; const fee = type === '상업적 사용' ? 480 : type === '복제' ? 260 : 150; return (
{}} />
새벽의 정물 No.3
박서린 · NFT #4821
N차 라이선싱
{/* type */}
라이선스 유형
{types.map(t => ( setType(t)}>{t} ))}
{/* scope + period */}
사용 범위
{scopes.map(s => ( ))}
이용 기간
12개월
피라이선시
갤러리 한도
{/* revenue split */}
수익 분배 (다중서명 정산)
라이선스 참조값만 NFT 메타데이터에 기록되고, 기간·범위·분배 정책은 서버에서 관리·정산됩니다.
); } // ═════════════════════════════════════════════════════════ // NFT BURN (NFT 파기 · EVS-iOS 006) // ═════════════════════════════════════════════════════════ function BurnScreen() { const [agree, setAgree] = React.useState(false); const [state, setState] = React.useState('confirm'); // confirm | pending if (state === 'pending') { return (
setState('confirm')} />
관리자 승인 대기 중

파기 요청이 접수되었습니다. 관리자 승인 후 NFT가 비활성화되며 거래·인증이 중단됩니다.

); } return (
{}} />
정말 파기하시겠어요?

NFT가 비활성화되어 거래·인증이 불가능한 상태로 변경됩니다.

새벽의 정물 No.3
NFT #4821 · ar://0x9f…c2a4
파기는 관리자 승인 하에 진행되며, 원장에는 파기 이력이 영구 보존됩니다. 되돌릴 수 없습니다.
); } // ═════════════════════════════════════════════════════════ // REGISTRATION FORM (작품 정보 입력 · EVS-iOS 005) // ═════════════════════════════════════════════════════════ // Toss-style one-step-per-page walkthrough — friendly, plain-language function RegisterFormScreen({ initialStep = 0 } = {}) { const TOTAL = 5; const [step, setStep] = React.useState(initialStep); const [photo, setPhoto] = React.useState(false); // Arweave upload status: 0 none · 1 uploading · 2 done const [arUp, setArUp] = React.useState(0); React.useEffect(() => { if (!photo) { setArUp(0); return; } setArUp(1); const t = setTimeout(() => setArUp(2), 1600); return () => clearTimeout(t); }, [photo]); const AR_TX = 'ar://0x9f3a7d…c2a4'; const [sizeW, setSizeW] = React.useState('72.7'); const [sizeH, setSizeH] = React.useState('60.6'); const [editionNo, setEditionNo] = React.useState('12'); const [editionTotal, setEditionTotal] = React.useState('50'); const [noEdition, setNoEdition] = React.useState(false); // XLS-20 권리 범위 — NFTokenMint 의 immutable flags + TransferFee 로열티 const [royalty, setRoyalty] = React.useState('10'); const [transferable, setTransferable] = React.useState(true); const [onlyXrp, setOnlyXrp] = React.useState(false); const [burnable, setBurnable] = React.useState(false); // 희망 판매가(KRW) → XRP 환산. 시세는 예시 고정값(1 XRP ≈ ₩3,180) const [priceKrw, setPriceKrw] = React.useState(''); const XRP_KRW = 3180; const priceKrwNum = parseFloat(String(priceKrw).replace(/[^\d.]/g, '')) || 0; const priceXrp = priceKrwNum > 0 ? priceKrwNum / XRP_KRW : 0; const royaltyNum = Math.min(50, Math.max(0, parseFloat(String(royalty).replace(/[^\d.]/g, '')) || 0)); // TransferFee 는 1/100,000 단위(0.001%) 정수 · 0~50,000 · transferable 이 아니면 설정 불가 const transferFeeLedger = transferable ? Math.round(royaltyNum * 1000) : 0; const next = () => setStep(s => Math.min(TOTAL - 1, s + 1)); const back = () => setStep(s => Math.max(0, s - 1)); const pct = ((step + 1) / TOTAL) * 100; const isLast = step === TOTAL - 1; const Q = ({ children }) =>
{children}
; const Help = ({ children }) =>

{children}

; // read-only key/value row inside a grouped card const ReadRow = ({ k, v, mono, first, accent }) => (
{k} {v}
); // tap-to-choose field (read-as-select; not free text) const SIZE_OPTIONS = ['41.0 × 31.8 cm (F6)', '53.0 × 45.5 cm (F10)', '65.2 × 53.0 cm (F15)', '72.7 × 60.6 cm (F20)', '80.3 × 65.2 cm (F25)', '91.0 × 72.7 cm (F30)']; const Picker = ({ label, value, onChange, options }) => (
); const ToggleRow = ({ label, sub, on, set, first, disabled }) => (
{label}
{sub}
); const body = () => { if (step === 0) return (
작품 태그를 찾았어요 이 태그에 작품 정보를 연결해서 정품으로 등록할게요.
태그 번호
04:A2:9F:3C:51:80
); if (step === 3) return (
작품 사진을 올려주세요 이 사진이 정품을 확인하는 원본 기록이 돼요. 한 번 올리면 그대로 영구 보관됩니다. {/* before upload: plain-language permanence explainer */} {arUp === 0 && (
한 번 저장하면 영원히 남아요

사진은 영구 보관 저장소(아위브)에 올라가요. 누구도 수정·삭제할 수 없어 시간이 지나도 원본 그대로 정품을 증명해 줍니다.

)} {/* after upload: Arweave follow-up — read-only record the user can see */} {arUp >= 1 && (
{arUp === 2 ? '영구 저장소에 보관됐어요' : '영구 저장소에 올리는 중…'}
아위브(Arweave) 영구 보관 네트워크
{arUp === 2 ? 완료 : 업로드 중}
{/* progress while uploading */} {arUp === 1 && (
)} {/* read-only metadata */} {arUp === 2 && (
)}

이 기록은 자동으로 저장되며 수정할 수 없어요.

)}
); if (step === 1) return (
작품 정보를 입력해 주세요 구매자에게 보여지고, 정품을 증명하는 기준이 되는 정보예요.
{noEdition ? (
해당 없음
) : (
setEditionNo(e.target.value)} placeholder="12" /> / setEditionTotal(e.target.value)} placeholder="50" />
)}
setSizeW(e.target.value)} style={{ textAlign: 'center' }} /> × setSizeH(e.target.value)} style={{ textAlign: 'center' }} /> cm
); if (step === 2) return (
권리 범위를 정해주세요 XRPL 원장(XLS-20)에 새겨지는 권리예요. 발행 후에는 바꿀 수 없으니 신중히 정해주세요. {/* 희망 판매가 (KRW → XRP 자동 환산) */}
₩ { const n = e.target.value.replace(/[^\d]/g, ''); setPriceKrw(n ? Number(n).toLocaleString() : ''); }} style={{ paddingLeft: 32, fontWeight: 600 }} />
{/* live XRP conversion */}
XRP 환산 금액 {priceXrp > 0 ? priceXrp.toLocaleString(undefined, { maximumFractionDigits: 2 }) : '—'} XRP

1 XRP ≈ ₩{XRP_KRW.toLocaleString()} 시세 기준 · 실시간 환율로 자동 계산돼요. 실제 발행가는 등록 시점의 시세로 고정됩니다.

{/* TransferFee royalty */}
setRoyalty(e.target.value)} style={{ paddingRight: 44, fontWeight: 600 }} /> %
{/* presets */}
{['0', '5', '10', '15', '20'].map(p => { const on = transferable && royaltyNum === parseFloat(p); return ( ); })}
{/* ledger value explainer (official XLS-20 encoding) */}
원장 기록값 (TransferFee) {transferFeeLedger.toLocaleString()}

0~50,000 범위 · 0.001% 단위로 기록돼요. 최대 50%까지 설정할 수 있고, 2차 판매가 일어날 때마다 발행자에게 자동 정산됩니다.

{/* immutable mint flags */}
거래 권한
{ setTransferable(v); if (!v) setRoyalty('0'); }} />
로열티는 재판매가 허용된 경우에만 적용돼요. 이 권리 설정은 발행 시 한 번 새겨지면 영구히 고정됩니다.
); return ( // step 5 — confirm
이대로 등록할까요? 발행하면 정품 인증서가 만들어지고, 바로 거래할 수 있어요.
새벽의 정물 No.3
박서린 · 2025 · 캔버스에 유채
에디션 12 / 50 · {sizeW} × {sizeH} cm

사진과 정보는 아위브에 한 번 저장되면 영구히 보관돼요.

); }; return (
{step + 1}/{TOTAL}} /> {/* progress */}
{body()}
); } // ═════════════════════════════════════════════════════════ // REGISTRATION DONE (등록 완료) // ═════════════════════════════════════════════════════════ function RegisterDoneScreen() { return (
NFT 발행 완료

작품이 XRPL 원장에 등록되어 정품 인증이 가능해졌습니다.

새벽의 정물 No.3
박서린 · 에디션 12/50
{[['NFT 토큰', '#4821'], ['Arweave', 'ar://0x9f…c2a4'], ['발행일', '2026.06.06']].map(([k, v], i) => (
{k} {v}
))}
); } // ═════════════════════════════════════════════════════════ // VERIFY RESULT (인증 결과 · 정품 / 위·변조) // ═════════════════════════════════════════════════════════ function VerifyResultScreen({ result = 'pass' }) { const pass = result === 'pass'; return ( // sheet presentation: dimmed parent behind + card rising from bottom
{/* dimmed parent (the live scan screen) peeking above the sheet */}
{/* the sheet */}
{/* grabber */}
{pass ? '정품이 확인되었습니다' : '정품을 확인할 수 없습니다'}
{!pass && (

태그를 다시 스캔해 주세요.

)}
{pass ? (
새벽의 정물 No.3
박서린 · 에디션 12/50
{[['NFC 태그', '정상 · CMAC 검증됨'], ['XRPL NFT', '#4821'], ['토큰 표준', 'XLS-20'], ['발행자', '에버씰'], ['발행일', '2025.03.14'], ['소유자', '박서린'], ['검증 시각', '방금 전']].map(([k, v], i) => (
{k} {v}
))}
) : (
{[['NFC 인증', '확인되지 않음'], ['NFT 원장 등록', '기록 없음'], ['소유권 대조', '확인 불가']].map(([k, v], i) => (
{k} {v}
))}
)}
{pass ? : }
); } // ═════════════════════════════════════════════════════════ // WALLET — 지갑 (마이페이지 · 계정 > 지갑) // EverSeal 플랫폼이 만들어 주는 XRPL 지갑. 최초 생성 → 지갑 정보. // 최소 구성: ① 지갑 생성 컴포넌트 ② 지갑 정보 ③ 기타 필수 // ═════════════════════════════════════════════════════════ function WalletManageScreen({ initial = 'connected' }) { // empty(지갑 없음) | creating | connected(지갑 정보) const [state, setState] = React.useState(initial); const [addr, setAddr] = React.useState(initial === 'connected' ? 'rN7n7otQDd6FczFgLdSqtcsAUxDkw6fzRH' : ''); const shortAddr = addr ? addr.slice(0, 9) + '…' + addr.slice(-5) : ''; const create = () => { setState('creating'); setTimeout(() => { setAddr('rPv8s2KqWmEx7Yd4LhTnZc9bF6jRnUa3E'); setState('connected'); }, 1600); }; // ── 지갑 생성 컴포넌트 (지갑 없음 / 생성 중) ────────────── if (state === 'empty' || state === 'creating') { const busy = state === 'creating'; return (
{}} />
{busy ? : }
{busy ? '지갑을 만들고 있어요' : 'XRPL 지갑 만들기'}

{busy ? 'XRPL 원장에 안전하게 생성 중…' : 'EverSeal가 XRPL 지갑을 만들어 드려요. 작품 등록과 거래에 사용됩니다.'}

{!busy && (
{[ ['plus', '간편 생성', '복잡한 설정 없이 앱에서 바로'], ['lock', '안전한 키 보관', '개인키는 서버에 암호화되어 보관돼요'], ].map(([ic, t, s], i) => (
{t}
{s}
))}
)}
); } // ── 지갑 정보 (지갑 있음) ────────────────────────────── return (
{}} /> {/* wallet card */}
EverSeal 지갑 XRPL
앱에서 생성 · 서버에 암호화 보관
지갑 주소
{/* 지갑 정보 */}
지갑 정보
{/* 기타 필수 */}
XRPL 탐색기에서 보기
); } const SUB_SCREENS = { detail: AssetDetailScreen, trading: TradingScreen, licensing: LicensingScreen, burn: BurnScreen, regform: RegisterFormScreen, regdone: RegisterDoneScreen, verifypass: () => , verifyfail: () => , wallet: WalletManageScreen, walletnew: () => , }; Object.assign(window, { AssetDetailScreen, TradingScreen, SellOfferScreen, LicensingScreen, BurnScreen, RegisterFormScreen, RegisterDoneScreen, VerifyResultScreen, WalletManageScreen, SUB_SCREENS, });