bch_qzjqnzgjz7w9tdflpz6u/deviant
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

docs(asm): ASM DEX category taxonomy + Agora asm-panel mock

Browse source 
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
walerikus 2026-06-26 22:12:05 +02:00
parent 20f83a59bd
commit 7d0e95801e
2 changed files with 348 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
Parameters/DEX_P2P/ASM_DEX_categories.md Normal file
View file

@ -0,0 +1,30 @@
ASM · Single party swap.
Button: Orbital Swap
Native Bitcoin Cash Automated trustless Swap Mechanism.
Mathematically Backed Assets, Poseidon: protocol based unlimited liquidity system.
(Poseidon Liquidity)
Button: Multichain Swap
Cross Chain ASM that wraps/unwraps assets. locked asset/iou, trust minimized via oracle & contract.
Lock → oracle → mint a transferable IOU; no counterparty, algorithmic swaps.
Both:
Zero Counterparty Automated Swap Mechanism:
Contract-fixed rate, zero order-book, size-independent.
DEX · P2P Swap
Button: Single-Chain Swap
Single Chain P2P Swap: Native Bitcoin Cash trustless P2P Market, AMM inclusive
Button: Atomic Swap
Multichain Atomic Swaps (HTLC) trustless cross chain P2P DEX market.
Both:
Decentralized P2P Exchange.
Central Limit Order Book.

318
Parameters/dApp/Agora/asm-panel.html Normal file
View file

@ -0,0 +1,318 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Agora — ASM Panel (embeddable widget mockup)</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet" />
<style>
/* ── Self-contained design tokens (no host CSS dependency — embeddable) ──
Mirrors CosmoGenesis: dark sky, acid-lime glow, Fraunces + JetBrains Mono.
A widget that drops into any page must carry its own theme. */
.asmw {
--sky:#0a0e17; --panel:#121a2b; --panel-2:#0f1726; --raise:#16203a;
--ink:#eef2f8; --ink-soft:#aeb9cc; --muted:#6f7d96; --line:#1f2b42; --line-2:#2c3a59;
--acid:#c6ff3a; --acid-dim:#9bd11f;
--safe:#3ad6a0; --warn:#f0c040; --high:#ff5d6c;
--display:'Fraunces',Georgia,serif; --mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
font-family:var(--mono); color:var(--ink);
}
* { box-sizing:border-box; }
html,body { margin:0; min-height:100vh; background:
radial-gradient(900px 480px at 75% -8%, #15203a44, transparent),
radial-gradient(700px 420px at -8% 8%, #0f2a2033, transparent), #070a11; }
.stage { min-height:100vh; display:flex; flex-direction:column; align-items:center; padding:34px 18px 70px; font-family:'JetBrains Mono',ui-monospace,monospace; color:#aeb9cc; }
/* host framing / caption */
.cap { text-align:center; max-width:560px; margin-bottom:6px; }
.cap .kick { font-size:11px; letter-spacing:.34em; text-transform:uppercase; color:#9bd11f; }
.cap h1 { font-family:'Fraunces',serif; font-weight:800; color:#eef2f8; font-size:30px; margin:.25em 0 .15em; }
.cap p { font-size:12.5px; line-height:1.55; color:#8b97ad; margin:0; }
/* state switcher (shaping tool — not part of the widget) */
.switch { display:flex; gap:7px; flex-wrap:wrap; justify-content:center; margin:20px 0 22px; }
.switch button { cursor:pointer; font-family:inherit; font-size:11.5px; padding:7px 13px; border-radius:999px;
border:1px solid #2c3a59; background:#121a2b; color:#aeb9cc; transition:.15s; }
.switch button:hover { border-color:#9bd11f; color:#eef2f8; }
.switch button.on { background:#c6ff3a; color:#0a0e17; border-color:#c6ff3a; font-weight:600; }
/* ════════════════════ THE WIDGET ════════════════════ */
.asmw {
width:390px; max-width:100%; background:linear-gradient(180deg,var(--panel),var(--panel-2));
border:1px solid var(--line-2); border-radius:18px; padding:18px 18px 14px;
box-shadow:0 24px 60px -28px #000, 0 0 0 1px #ffffff06 inset;
}
.asmw .whead { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.asmw .wmark { width:30px; height:30px; border-radius:9px; display:grid; place-items:center;
background:radial-gradient(circle at 35% 30%, #1c2740, #0d1424); border:1px solid var(--line-2);
color:var(--acid); font-weight:800; font-family:var(--display); font-size:15px; box-shadow:0 0 14px #c6ff3a22; }
.asmw .wtitle { font-family:var(--display); font-weight:600; font-size:16px; color:var(--ink); line-height:1; }
.asmw .wsub { font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-top:3px; }
.asmw .wnet { margin-left:auto; font-size:10px; color:var(--warn); border:1px solid #f0c04044; background:#f0c0400d; padding:5px 9px; border-radius:999px; }
/* category lenses */
.asmw .lenses { display:flex; gap:7px; margin-bottom:13px; }
.asmw .lens { cursor:pointer; font-family:inherit; font-size:11px; padding:5px 12px; border-radius:999px;
border:1px solid var(--line); background:transparent; color:var(--ink-soft); transition:.14s; }
.asmw .lens:hover { border-color:var(--acid-dim); color:var(--ink); }
.asmw .lens.on { background:var(--acid); color:#0a0e17; border-color:var(--acid); font-weight:600; }
/* route banner */
.asmw .route { display:flex; align-items:center; gap:8px; font-size:11px; padding:9px 12px; border-radius:10px; margin-bottom:12px;
border:1px solid #3ad6a033; background:#3ad6a00d; color:var(--safe); }
.asmw .route .rtag { font-weight:700; letter-spacing:.08em; }
.asmw .route .rdesc { color:var(--ink-soft); font-weight:400; font-size:10.5px; }
.asmw .route.mint { border-color:#c6ff3a33; background:#c6ff3a0d; color:var(--acid-dim); }
.asmw .route.all { border-color:#f0c04033; background:#f0c0400d; color:var(--warn); }
/* legs */
.asmw .leg { background:#0c1322; border:1px solid var(--line); border-radius:13px; padding:13px 14px; }
.asmw .leg.from { margin-bottom:6px; }
.asmw .leg-top { display:flex; align-items:center; gap:10px; }
.asmw .ac { width:34px; height:34px; flex:none; border-radius:10px; display:grid; place-items:center;
background:var(--raise); border:1px solid var(--line-2); color:var(--ink); font-weight:700; font-size:12px; }
.asmw .ac.bch { background:linear-gradient(135deg,#0ac18e,#089e74); color:#04130d; border:none; }
.asmw .ac.all { color:var(--acid); }
.asmw .an { font-size:13px; color:var(--ink); display:flex; align-items:center; gap:7px; }
.asmw .as { font-size:10.5px; color:var(--muted); margin-top:3px; }
.asmw .chev { margin-left:auto; color:var(--muted); font-size:12px; }
.asmw .amt { width:100%; margin-top:11px; background:transparent; border:none; outline:none; color:var(--ink);
font-family:var(--display); font-weight:600; font-size:30px; letter-spacing:-.01em; }
.asmw .amt::placeholder { color:#3b475e; }
.asmw .amt-r { margin-top:11px; font-family:var(--display); font-weight:600; font-size:28px; color:var(--ink); }
.asmw .amt-r.dim { color:#56627a; }
.asmw .sub { font-size:10.5px; color:var(--muted); margin-top:8px; }
.asmw .sub .warn { color:var(--warn); margin-left:7px; }
.asmw .pill { font-size:9px; letter-spacing:.08em; text-transform:uppercase; padding:2px 7px; border-radius:5px;
border:1px solid #3ad6a044; color:var(--safe); }
.asmw .mid { display:flex; justify-content:center; margin:-2px 0; position:relative; z-index:2; }
.asmw .mid button { width:34px; height:34px; border-radius:10px; cursor:pointer; border:1px solid var(--line-2);
background:var(--panel); color:var(--ink-soft); font-size:14px; }
.asmw .mid button:hover { color:var(--acid); border-color:var(--acid-dim); }
/* quote block */
.asmw .rev { background:#0c1322; border:1px solid var(--line); border-radius:13px; padding:6px 14px; margin-bottom:12px; }
.asmw .rev .r { display:flex; justify-content:space-between; align-items:center; padding:9px 0; font-size:12px; border-bottom:1px solid #16203a; }
.asmw .rev .r:last-child { border-bottom:none; }
.asmw .rev .k { color:var(--ink-soft); }
.asmw .rev .v { color:var(--ink); font-weight:500; }
.asmw .rev .v.free { color:var(--safe); font-size:10px; }
.asmw .rev .r.tot { font-weight:700; }
.asmw .rev .r.tot .v { color:var(--acid); }
.asmw .warnbox { font-size:10.5px; line-height:1.5; color:var(--warn); background:#f0c0400d; border:1px solid #f0c04026;
border-radius:9px; padding:9px 11px; margin-bottom:11px; }
.asmw .note { font-size:10.5px; line-height:1.55; color:var(--muted); margin:0 2px 14px; }
.asmw .note b { color:var(--ink-soft); }
/* CTA */
.asmw .cta { width:100%; padding:14px; border:none; border-radius:12px; cursor:pointer; font-family:inherit;
font-size:13px; font-weight:700; letter-spacing:.02em; color:#0a0e17;
background:linear-gradient(180deg,#d4ff5e,#a9e024); box-shadow:0 0 22px #c6ff3a33; transition:.15s; }
.asmw .cta:hover { box-shadow:0 0 30px #c6ff3a55; }
/* result */
.asmw .result { text-align:center; padding:14px 4px 6px; }
.asmw .tick { width:54px; height:54px; margin:0 auto 14px; border-radius:50%; display:grid; place-items:center;
background:#3ad6a014; border:1px solid #3ad6a055; color:var(--safe); font-size:24px; }
.asmw .rbig { font-family:var(--display); font-weight:700; font-size:20px; color:var(--ink); line-height:1.2; }
.asmw .ratom { font-size:11px; color:var(--acid-dim); margin-top:8px; letter-spacing:.04em; }
.asmw .rtxid { font-size:10px; color:var(--muted); margin-top:18px; word-break:break-all; }
.asmw .rlink { font-size:11px; color:var(--acid); margin-top:6px; cursor:pointer; }
/* widget footer — co-brand seam */
.asmw .wfoot { display:flex; align-items:center; gap:8px; margin-top:14px; padding-top:12px; border-top:1px solid var(--line);
font-size:9.5px; color:var(--muted); letter-spacing:.04em; }
.asmw .wfoot .dot { color:var(--acid-dim); }
.asmw .wfoot .brand { color:var(--ink-soft); }
.asmw .wfoot .verify { margin-left:auto; color:var(--safe); display:flex; align-items:center; gap:4px; }
/* embed note */
.embed { max-width:430px; margin-top:26px; font-size:11px; line-height:1.6; color:#7c889e; }
.embed h3 { font-family:'Fraunces',serif; font-weight:600; color:#aeb9cc; font-size:14px; margin:0 0 8px; }
.embed code { font-family:'JetBrains Mono',monospace; background:#121a2b; border:1px solid #1f2b42; border-radius:5px;
padding:1px 6px; color:#c6ff3a; font-size:10.5px; }
.embed .snippet { background:#0c1322; border:1px solid #1f2b42; border-radius:10px; padding:12px 14px; margin-top:10px;
white-space:pre; overflow-x:auto; color:#aeb9cc; font-size:10.5px; line-height:1.6; }
.embed .tok { color:#7f8cff; } .embed .str { color:#c6ff3a; } .embed .com { color:#5b6678; }
</style>
</head>
<body>
<div class="stage">
<div class="cap">
<div class="kick">Agora · Deviant Labs</div>
<h1>ASM Panel</h1>
<p>The Automated Swap Mechanism as an embeddable widget — one engine for mint, orbital swap, and swap-all. Self-backed, atomic, counterparty-free. This is a shaping mockup; switch states to see every form before it lands in the wallet.</p>
</div>
<div class="switch" id="switch"></div>
<!-- ════════ THE WIDGET ════════ -->
<div class="asmw" id="panel"></div>
<div class="embed">
<h3>Embedding (the dApp seam)</h3>
Built so any site can host it — it carries its own theme and never holds keys. Signing is delegated to the
user's wallet over WalletConnect/CashConnect, so the host is never custodial. The verification badge
(<code>✓ canonical</code>) travels with the widget via D-1, so embedders inherit the safety check.
<div class="snippet"><span class="com">&lt;!-- web component (planned) --&gt;</span>
<span class="tok">&lt;deviant-asm</span> <span class="str">network=</span><span class="str">"chipnet"</span> <span class="str">default-target=</span><span class="str">"USDm"</span>
<span class="str">connector=</span><span class="str">"walletconnect"</span> <span class="str">theme=</span><span class="str">"cosmo"</span><span class="tok">&gt;&lt;/deviant-asm&gt;</span></div>
</div>
</div>
<script>
const STATES = [
{ id:'builder', label:'Builder (swap)' },
{ id:'quote', label:'Quote (swap)' },
{ id:'swapall', label:'Swap-all' },
{ id:'result', label:'Result' },
];
let state = 'builder';
const chrome = (bodyHtml, opts={}) => `
<div class="whead">
<div class="wmark">⇄</div>
<div>
<div class="wtitle">${opts.title ?? 'ASM Swap'}</div>
<div class="wsub">${opts.sub ?? 'Orbital · counterparty-free'}</div>
</div>
<div class="wnet">● chipnet</div>
</div>
${bodyHtml}
<div class="wfoot">
<span class="dot">◆</span><span>Powered by <span class="brand">Deviant ASM</span></span>
<span>· self-backed · non-custodial</span>
<span class="verify">✓ canonical</span>
</div>`;
const lenses = (active) => `
<div class="lenses">
${['All','Fiat','Metals'].map(l => `<button class="lens${l===active?' on':''}">${l}</button>`).join('')}
</div>`;
const fromLeg = (inner) => `<div class="leg from">${inner}</div>`;
const toLeg = (inner) => `<div class="leg">${inner}</div>`;
const mid = `<div class="mid"><button title="flip">⇅</button></div>`;
function render() {
const sw = document.getElementById('switch');
sw.innerHTML = STATES.map(s => `<button class="${s.id===state?'on':''}" data-s="${s.id}">${s.label}</button>`).join('');
sw.querySelectorAll('button').forEach(b => b.onclick = () => { state = b.dataset.s; render(); });
const panel = document.getElementById('panel');
panel.innerHTML = chrome(BODY[state](), TITLES[state]);
}
const TITLES = {
builder: { title:'ASM Swap', sub:'Orbital · counterparty-free' },
quote: { title:'Swap quote', sub:'redeem + mint · 1 tx' },
swapall: { title:'Swap-all', sub:'sweep → one asset · 2 tx' },
result: { title:'Swap complete', sub:'atomic · settled' },
};
const BODY = {
// ── Builder (orbital swap) ──
builder: () => `
${lenses('All')}
<div class="route">
<span>✓</span><span class="rtag">ASM</span>
<span class="rdesc">atomic · counterparty-free (V2.7 §6)</span>
</div>
${fromLeg(`
<div class="leg-top">
<div class="ac">AS</div>
<div>
<div class="an">ASM ▾</div>
<div class="as">rate 100 sat/unit</div>
</div>
<div class="chev">⌄</div>
</div>
<input class="amt" value="1010" />
<div class="sub">from · balance 6,044 ASM</div>
`)}
${mid}
${toLeg(`
<div class="leg-top">
<div class="ac">A2</div>
<div>
<div class="an">ASM2 ▾</div>
<div class="as">rate 1,000 sat/unit</div>
</div>
<div class="chev">⌄</div>
</div>
<div class="amt-r">≈ 100</div>
<div class="sub">to · redeem at protocol rate · est. before fees</div>
`)}
<div class="note" style="margin-top:14px">Source options: <b>Bitcoin Cash</b> (mint), any held MBA (swap), or <b>All my assets</b> (sweep).</div>
<button class="cta">Get quote →</button>`,
// ── Quote (swap) ──
quote: () => `
<div class="route"><span>✓</span><span class="rtag">ASM</span><span class="rdesc">redeem source + mint target · 1 tx</span></div>
<div class="rev">
<div class="r"><span class="k">Exchange rate</span><span class="v">1 ASM2 = 10 ASM</span></div>
<div class="r"><span class="k">You send</span><span class="v">1,010 ASM</span></div>
<div class="r"><span class="k">You receive</span><span class="v">100 ASM2</span></div>
<div class="r"><span class="k">BCH value of received</span><span class="v">0.001 BCH</span></div>
<div class="r"><span class="k">Redeem source (P2PKH)</span><span class="v free">no fee · §4.2</span></div>
<div class="r"><span class="k">Mint-side founder fee (1%)</span><span class="v">1,000 sat</span></div>
<div class="r"><span class="k">BCH network fee</span><span class="v">3,000 sat</span></div>
<div class="r tot"><span class="k">BCH change back</span><span class="v">96,000 sat</span></div>
</div>
<div class="note"><b>redeem source + mint target.</b> The redeem side has no fee (self-backed UTXO); rounding returns as BCH change, never absorbed silently.</div>
<button class="cta">Confirm &amp; broadcast →</button>`,
// ── Swap-all ──
swapall: () => `
${lenses('All')}
<div class="route all"><span>⇶</span><span class="rtag">SWAP-ALL</span><span class="rdesc">sweep all backed assets · 2 tx, not atomic</span></div>
${fromLeg(`
<div class="leg-top">
<div class="ac all">⇶</div>
<div>
<div class="an">All my assets ▾</div>
<div class="as">sweep every backed asset you hold</div>
</div>
<div class="chev">⌄</div>
</div>
<div class="sub" style="margin-top:11px">from · 4 backed assets held — all redeemed to BCH, then claimed into the target</div>
`)}
${mid}
${toLeg(`
<div class="leg-top">
<div class="ac">UD</div>
<div><div class="an">USDm ▾</div><div class="as">rate 1,000 sat/unit · $1.00</div></div>
<div class="chev">⌄</div>
</div>
<div class="amt-r dim">all → USDm</div>
<div class="sub">to · amount computed at quote (depends on freed BCH)</div>
`)}
<div class="rev" style="margin-top:12px">
<div class="r"><span class="k">Step 1 — redeem-all</span><span class="v">4 assets → BCH</span></div>
<div class="r"><span class="k">BCH freed (projected)</span><span class="v">0.0241 BCH</span></div>
<div class="r"><span class="k">Step 2 — claim</span><span class="v">23 USDm</span></div>
<div class="r tot"><span class="k">Claim cost</span><span class="v">23,690 sat</span></div>
</div>
<div class="warnbox">⚠ Two transactions, NOT atomic. If step 2 fails you keep the freed BCH and can resume the claim — nothing is stranded.</div>
<button class="cta">Confirm swap-all →</button>`,
// ── Result ──
result: () => `
<div class="result">
<div class="tick">✓</div>
<div class="rbig">1,010 ASM → 100 ASM2</div>
<div class="ratom">atomic · 1 transaction</div>
<div class="rtxid">txid e68e610f0e4f5374d6bbc8564ca80ce10f11fae7c21cf526c094bec867dd7370</div>
<div class="rlink">View on chipnet explorer ↗</div>
</div>
<button class="cta" style="margin-top:18px">Done</button>`,
};
render();
</script>
</body>
</html>