1import{a as A,f as D}from"../chunks/BcxqahTv.js";import{i as ut}from"../chunks/7g54ga8a.js";import{o as vt}from"../chunks/CxZJZLNp.js";import{p as xt,o as V,v as gt,w as mt,m as e,D as ft,y as a,x as g,q as c,$ as bt,O as T,z as t,A as r,u as f,B as z,f as ht}from"../chunks/DeJgGXXt.js";import{s as y,e as I}from"../chunks/BHBXpe9f.js";import{i as le,b as yt,a as kt}from"../chunks/Cf6f1lnp.js";import{e as de,i as ce}from"../chunks/D3AmQmto.js";import{h as wt}from"../chunks/Cy09rX9u.js";import{s as ze,r as Oe,c as pe}from"../chunks/BPbibTLh.js";import{a as Ue}from"../chunks/GngsdkGi.js";import{w as _t}from"../chunks/BDwIzPjc.js";import{c as At}from"../chunks/BHxfGcc6.js";import{C as Dt}from"../chunks/-vlIbCek.js";import{K as St}from"../chunks/B-9C8Nbo.js";import{E as Ct}from"../chunks/Bbf4oTlb.js";import{C as je}from"../chunks/9zpv2yId.js";import{D as qe}from"../chunks/CCzUhJwe.js";var Tt=D('<div class="error-banner svelte-kxrgr"><p> </p> <button class="svelte-kxrgr">Ã</button></div>'),It=D('<div class="loading svelte-kxrgr"><div class="spinner svelte-kxrgr"></div> <p>Loading your applications...</p></div>'),Rt=D('<div class="empty-state svelte-kxrgr"><!> <h3 class="svelte-kxrgr">No Applications Found</h3> <p class="svelte-kxrgr">You need to create a third-party application first to generate widget code.</p> <a href="/my-apps" class="create-button svelte-kxrgr">Create Your First App</a></div>'),$t=D("<option> </option>"),Et=D('<div class="app-info svelte-kxrgr"><p class="app-name svelte-kxrgr"> </p> <p class="app-desc svelte-kxrgr"> </p></div>'),Nt=D('<button><span class="framework-icon svelte-kxrgr"> </span> <span class="framework-name svelte-kxrgr"> </span></button>'),Pt=D("<option> </option>"),zt=D(`<div class="generator-layout svelte-kxrgr"><div class="config-panel svelte-kxrgr"><h2 class="svelte-kxrgr">Configuration</h2> <div class="config-section svelte-kxrgr"><h3 class="svelte-kxrgr">Application</h3> <div class="form-group svelte-kxrgr"><label for="selectedApp" class="svelte-kxrgr">Select App</label> <select id="selectedApp" class="svelte-kxrgr"></select></div> <!></div> <div class="config-section svelte-kxrgr"><h3 class="svelte-kxrgr">Framework</h3> <div class="framework-grid svelte-kxrgr"></div></div> <div class="config-section svelte-kxrgr"><h3 class="svelte-kxrgr">API Settings</h3> <div class="form-group svelte-kxrgr"><label for="baseUrl" class="svelte-kxrgr">Base URL</label> <input id="baseUrl" type="url" placeholder="https://atomix.trade" class="svelte-kxrgr"/></div></div> <div class="config-section svelte-kxrgr"><h3 class="svelte-kxrgr">Appearance</h3> <div class="form-group svelte-kxrgr"><label for="theme" class="svelte-kxrgr">Theme</label> <select id="theme" class="svelte-kxrgr"><option>Dark</option><option>Light</option></select></div> <div class="form-group svelte-kxrgr"><label for="buttonText" class="svelte-kxrgr">Button Text</label> <input id="buttonText" type="text" placeholder="Buy with Atomix" class="svelte-kxrgr"/></div> <div class="form-group svelte-kxrgr"><label for="buttonStyle" class="svelte-kxrgr">Button Style</label> <select id="buttonStyle" class="svelte-kxrgr"></select></div></div> <div class="config-section svelte-kxrgr"><h3 class="svelte-kxrgr">Preview</h3> <button><!> </button></div></div> <div class="code-panel svelte-kxrgr"><div class="code-header svelte-kxrgr"><h2 class="svelte-kxrgr">Generated Code</h2> <div class="code-actions svelte-kxrgr"><button class="action-btn svelte-kxrgr"><!> Copy Code</button> <button class="action-btn svelte-kxrgr"><!> Download</button></div></div> <div class="code-container svelte-kxrgr"><pre class="svelte-kxrgr"><code> </code></pre></div> <div class="css-section svelte-kxrgr"><div class="css-header svelte-kxrgr"><h3 class="svelte-kxrgr">Styles (CSS)</h3> <div class="css-actions svelte-kxrgr"><button class="action-btn secondary svelte-kxrgr"><!> Copy CSS</button> <button class="action-btn secondary svelte-kxrgr"><!> Download CSS</button></div></div> <div class="css-container svelte-kxrgr"><pre class="svelte-kxrgr"><code> </code></pre></div></div></div></div> <div class="instructions svelte-kxrgr"><h2 class="svelte-kxrgr">
1Integration Instructions</h2> <div class="instruction-steps svelte-kxrgr"><div class="step svelte-kxrgr"><div class="step-number svelte-kxrgr">1</div> <div class="step-content svelte-kxrgr"><h3 class="svelte-kxrgr">Get Your API Key</h3> <p class="svelte-kxrgr">Generate an API key for your selected application in the <a href="/my-apps" class="svelte-kxrgr">My Apps</a> section.</p></div></div> <div class="step svelte-kxrgr"><div class="step-number svelte-kxrgr">2</div> <div class="step-content svelte-kxrgr"><h3 class="svelte-kxrgr">Install Dependencies</h3> <p class="svelte-kxrgr">Add the Radix dApp Toolkit to your project:</p> <code class="svelte-kxrgr">npm install @radixdlt/radix-dapp-toolkit</code> <p class="svelte-kxrgr">For React/Vue/Angular projects, also install TypeScript types:</p> <code class="svelte-kxrgr">npm install -D @types/node</code></div></div> <div class="step svelte-kxrgr"><div class="step-number svelte-kxrgr">3</div> <div class="step-content svelte-kxrgr"><h3 class="svelte-kxrgr">Add Widget Code</h3> <p class="svelte-kxrgr">Copy the generated code above and integrate it into your application.</p></div></div> <div class="step svelte-kxrgr"><div class="step-number svelte-kxrgr">4</div> <div class="step-content svelte-kxrgr"><h3 class="svelte-kxrgr">Configure Asset Data</h3> <p class="svelte-kxrgr">Replace the example asset data with your actual asset information:</p> <ul class="svelte-kxrgr"><li class="svelte-kxrgr"><strong class="svelte-kxrgr">resourceAddress</strong>: The Radix resource address</li> <li class="svelte-kxrgr"><strong class="svelte-kxrgr">localId</strong>: For NFTs only (e.g., "#123#")</li> <li class="svelte-kxrgr"><strong class="svelte-kxrgr">ownerAddress</strong>: Current owner's account address</li> <li class="svelte-kxrgr"><strong class="svelte-kxrgr">assetType</strong>: "nft" or "fungible"</li></ul></div></div> <div class="step svelte-kxrgr"><div class="step-number svelte-kxrgr">5</div> <div class="step-content svelte-kxrgr"><h3 class="svelte-kxrgr">Test Integration</h3> <p class="svelte-kxrgr">Test with testnet addresses first, then deploy to production.</p></div></div></div></div>`,1),Ot=D('<div class="widget-generator svelte-kxrgr"><div class="page-header svelte-kxrgr"><div class="title-section svelte-kxrgr"><!> <div><h1 class="svelte-kxrgr">Widget Code Generator</h1> <p class="svelte-kxrgr">Generate integration code for your third-party applications</p></div></div></div> <!> <!></div>');function ea(Fe,Be){xt(Be,!1);const ue=()=>kt(_t,"$walletStore",Ge),[Ge,Xe]=yt(),R=g(),Le=At();let b=g("javascript"),x=g(""),ve="",S=g("dark"),O=g("https://atomix.trade"),$=g("Buy with Atomix"),k=g("primary"),xe=g(!1),j=g(!1),E=g(""),q=g(""),F=g(""),m=g([]);const Ke=[{id:"javascript",name:"Vanilla JavaScript",icon:"ð¨"},{id:"react",name:"React",icon:"âï¸"},{id:"vue",name:"Vue.js",icon:"ð"},{id:"angular",name:"Angular",icon:"ð´"},{id:"svelte",name:"Svelte",icon:"ð§¡"}],We=[{id:"primary",name:"Primary",class:"bg-blue-600 hover:bg-blue-700 text-white"},{id:"secondary",name:"Secondary",class:"bg-gray-600 hover:bg-gray-700 text-white"},{id:"success",name:"Success",class:"bg-green-600 hover:bg-green-700 text-white"},{id:"radix",name:"Radix Style",class:"bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white"}];async function ge(){try{if(c(j,!0),!e(R)){console.log("â [Widget Generator] No persona address available"),c(E,"Please connect your wallet to generate widget code"),c(j,!1);return}const s=await Le("/api/v1/my-apps/third-party-apps",{method:"GET",headers:{"Content-Type":"application/json","X-User-Persona":e(R)}});if(!s.ok)throw new Error(`HTTP ${s.status}: ${s.statusText}`);const n=await s.json();n.success?(c(m,n.apps||[]),e(m).length>0&&!e(x)&&c(x,e(m)[0].id)):c(E,n.error||"Failed to load applications")}catch(s){c(E,s instanceof Error?s.message:"Failed to load applications"),console.error("â [Widget Generator] Error loading apps:",s)}finally{c(j,!1)}}function Ve(s=e(b),n=e(x),p=ve,i=e($),v=e(k),u=e(O),N=e(S)){var P;const B=p||"YOUR_API_KEY_HERE",C=((P=e(m).find(G=>
1G.id===n))==null?void 0:P.name)||"Your App";switch(s){case"javascript":return Me(B,C,i,v,u);case"react":return Ye(B,C,i,v,u);case"vue":return`<!-- Vue Implementation for ${C} --> 2<!-- Button text: ${i} --> 3 4<!-- TODO: Implement complete Vue component with buyer_asset field --> 5<!-- This is a placeholder - replace with actual implementation --> 6 7<!-- Template: --> 8<!-- <button @click="handleClick" :disabled="loading">${i}</button> --> 9 10<!-- Script setup: --> 11<!-- import { ref } from 'vue'; --> 12<!-- const loading = ref(false); --> 13<!-- const handleClick = () => { console.log('Creating trade offer...'); }; --> 14 15<!-- Key points to implement: --> 16<!-- - Add buyer_asset: 'resource_rdx1tknxxxxxxxxxradxrdxxxxxxxxx009923554798xxxxxxxxxradxrd' to trade payload --> 17<!-- - Use proper API endpoints: /api/v1/third-party/buyer-manifest and /api/v1/trades --> 18<!-- - Include proper authentication headers: X-API-Key and X-User-Persona -->`;case"angular":return`// Angular Implementation for ${C} 19// Button text: ${i} 20 21// TODO: Implement complete Angular component with buyer_asset field 22// This is a placeholder - replace with actual implementation 23 24// 1. Import: import { Component } from '@angular/core'; 25// 2. Template: <button (click)="handleClick()" [disabled]="loading">${i}</button> 26// 3. Logic: handleClick function with proper trade creation including buyer_asset field 27 28// Key points to implement: 29// - Add buyer_asset: 'resource_rdx1tknxxxxxxxxxradxrdxxxxxxxxx009923554798xxxxxxxxxradxrd' to trade payload 30// - Use proper API endpoints: /api/v1/third-party/buyer-manifest and /api/v1/trades 31// - Include proper authentication headers: X-API-Key and X-User-Persona`;case"svelte":return`<!-- Svelte Implementation for ${C} --> 32<!-- Button text: ${i} --> 33 34<!-- TODO: Implement complete Svelte component with buyer_asset field --> 35<!-- This is a placeholder - replace with actual implementation --> 36 37<!-- Script section: --> 38<!-- let loading = false; --> 39<!-- function handleClick() { console.log('Creating trade offer...'); } --> 40 41<!-- Template: --> 42<!-- <button on:click={handleClick} disabled={loading}>${i}</button> --> 43 44<!-- Key points to implement: --> 45<!-- - Add buyer_asset: 'resource_rdx1tknxxxxxxxxxradxrdxxxxxxxxx009923554798xxxxxxxxxradxrd' to trade payload --> 46<!-- - Use proper API endpoints: /api/v1/third-party/buyer-manifest and /api/v1/trades --> 47<!-- - Include proper authentication headers: X-API-Key and X-User-Persona -->`;default:return`<!-- Unknown framework: ${s} -->`}}function Ye(s,n,p,i,v){const u=n.replace(/[^a-zA-Z0-9]/g,"")||"Atomix";return`/* React Implementation for ${n} */ 48import React, { useState, useEffect } from 'react'; 49 50// Types 51interface Asset { 52 resourceAddress: string; 53 localId?: string; 54 ownerAddress: string; 55 assetType: 'fungible' | 'nft'; 56 priceXrd: string; 57 name: string; 58 symbol?: string; 59 imageUrl?: string; 60} 61 62const ${u}TradingButton: React.FC<{ asset: Asset; className?: string }> = ({ 63 asset, 64 className = '' 65}) => { 66 const [loading, setLoading] = useState(false); 67 const [error, setError] = useState<string | null>(null); 68 const [rdt, setRdt] = useState<any>(null); 69 const [walletData, setWalletData] = useState<any>(null); 70 71 const config = { 72 apiKey: '${s}', 73 baseUrl: '${v}', 74 appName: '${n}', 75 networkId: 2, 76 dAppAddress: 'account_tdx_2_12xd3zntghkks9kfzzzkejcc4fd92afjl8ajqcgq735xvrzwmfzge5q' 77 }; 78 79 useEffect(() => { 80 // Initialize Radix dApp Toolkit 81 const initializeRDT = async () => { 82 try { 83 const { RadixDappToolkit } = await import('@radixdlt/radix-dapp-toolkit'); 84 const toolkit = RadixDappToolkit({ 85 networkId: config.networkId, 86 dAppDefinitionAddress: config.dAppAddress, 87 applicationName: config.appName, 88 applicationVersion: '1.0.0' 89 }); 90 91 // Subscribe to wallet changes 92 toolkit.walletApi.walletData$.subscribe(data => { 93 setWalletData(data); 94 }); 95 96 setRdt(toolkit); 97 } catch (err) { 98 console.error('Failed to initialize RDT:', err); 99 setError('Failed to initialize wallet connection'); 100 } 101 }; 102 103 initializeRDT(); 104 }, []); 105 106 const createTradeOffer = async (asset: Asset) => { 107 try {
108 setLoading(true); 109 setError(null); 110 111 if (!rdt) { 112 throw new Error('Wallet not initialized'); 113 } 114 115 // Get current wallet state or prompt connection if needed 116 let currentWalletData = walletData; 117 118 // If no wallet data, request connection 119 if (!currentWalletData?.accounts || currentWalletData.accounts.length === 0) { 120 const result = await rdt.walletApi.sendRequest(); 121 if (result.isErr()) throw new Error('Wallet connection failed'); 122 currentWalletData = result.value; 123 } 124 125 // Verify we have required data 126 if (!currentWalletData?.accounts?.[0]?.address) { 127 throw new Error('No wallet account found'); 128 } 129 if (!currentWalletData?.persona?.identityAddress) { 130 throw new Error('No persona identity found'); 131 } 132 133 // Generate manifest 134 const manifestResponse = await fetch(\`\${config.baseUrl}/api/v1/third-party/buyer-manifest\`, { 135 method: 'POST', 136 headers: { 137 'Content-Type': 'application/json', 138 'X-API-Key': config.apiKey 139 }, 140 body: JSON.stringify({ 141 buyer_account: currentWalletData.accounts[0].address, 142 seller_account: asset.ownerAddress, 143 asset_resource: asset.resourceAddress, 144 asset_id: asset.localId || '1', 145 price_xrd: asset.priceXrd, 146 asset_type: asset.assetType 147 }) 148 }); 149 150 const manifestData = await manifestResponse.json(); 151 if (!manifestData.success) throw new Error(manifestData.error); 152 153 // Sign sub-intent using proper builder 154 const { SubintentRequestBuilder } = await import('@radixdlt/radix-dapp-toolkit'); 155 const subintentRequest = SubintentRequestBuilder() 156 .manifest(manifestData.manifest) 157 .setExpiration('afterDelay', 3600) // 1 hour expiration 158 .message('Purchase sub-intent from ${n}'); 159 160 const signResult = await rdt.walletApi.sendPreAuthorizationRequest(subintentRequest); 161 if (signResult.isErr()) throw new Error('Sub-intent signing failed'); 162 163 // Create trade 164 const tradeResponse = await fetch(\`\${config.baseUrl}/api/v1/trades\`, { 165 method: 'POST', 166 headers: { 167 'Content-Type': 'application/json', 168 'X-API-Key': config.apiKey, 169 'X-User-Persona': currentWalletData.persona.identityAddress, 170 'X-Source-App': config.appName 171 }, 172 body: JSON.stringify({ 173 buyer_account: currentWalletData.accounts[0].address, 174 seller_account: asset.ownerAddress, 175 asset_resource: asset.resourceAddress, 176 asset_id: asset.localId || '1', 177 buyer_asset: 'resource_rdx1tknxxxxxxxxxradxrdxxxxxxxxx009923554798xxxxxxxxxradxrd', // XRD resource address 178 price_xrd: asset.priceXrd, 179 asset_type: asset.assetType, 180 message: \`Trade from \${config.appName}\`, 181 expires_in_hours: 24, 182 buyer_signed_subintent: { 183 transactionIntentHash: signResult.value.transactionIntentHash, 184 signedPartialTransaction: signResult.value.signedPartialTransaction 185 }, 186 asset_metadata: { 187 name: asset.name, 188 symbol: asset.symbol, 189 icon_url: asset.imageUrl, 190 type: asset.assetType 191 } 192 }) 193 }); 194 195 const result = await tradeResponse.json(); 196 if (!result.success) throw new Error(result.error); 197 198 console.log('â Trade created:', result); 199 return result; 200 } catch (err) { 201 const errorMessage = err instanceof Error ? err.message : 'Unknown error'; 202 setError(errorMessage); 203 throw err; 204 } finally { 205 setLoading(false); 206 } 207 }; 208 209 const handleClick = async () => { 210 try { 211 await createTradeOffer(asset); 212 // Success notification handled by parent 213 } catch (error) { 214 // Error already in state 215 } 216 }; 217 218 return ( 219 <div className="atomix-button-container"> 220 <button 221 onClick={handleClick} 222 disabled={loading} 223 className={\`atomix-buy-button atomix-btn-${i} \${className}\`} 224 > 225 {loading ? ( 226 <>
227 <span className="animate-spin mr-2">â³</span> 228 Processing... 229 </> 230 ) : ( 231 '${p}' 232 )} 233 </button> 234 {error && ( 235 <div className="mt-2 p-2 bg-red-100 border border-red-400 text-red-700 rounded"> 236 â {error} 237 </div> 238 )} 239 </div> 240 ); 241}; 242 243// Usage example 244const ${u}App: React.FC = () => { 245 const sampleAsset: Asset = { 246 resourceAddress: 'resource_rdx1t4dy69k6s0gv040xa64cyadyefwtett62ng6xdwf18pq4d44x9d52', 247 localId: '#123#', 248 ownerAddress: 'account_rdx168abc123...', 249 assetType: 'nft', 250 priceXrd: '10.0', 251 name: 'Your Asset Name', 252 symbol: 'SYMBOL', 253 imageUrl: 'https://example.com/asset.jpg' 254 }; 255 256 return ( 257 <div className="app"> 258 <h1>Your App with Atomix Integration</h1> 259 <${u}TradingButton asset={sampleAsset} /> 260 </div> 261 ); 262}; 263 264export default ${u}TradingButton; 265export { ${u}App };`}function Me(s,n,p,i,v){return`<!-- Vanilla JavaScript Integration - DOM-based approach --> 266<div id="atomix-widget-container"> 267<button id="atomix-buy-btn" class="atomix-buy-button atomix-btn-${i}"> 268 <span class="btn-text">${p}</span> 269 <span class="btn-spinner" style="display: none;">â³</span> 270</button> 271 <div id="atomix-status" class="status-message" style="display: none;"></div> 272</div> 273 274<script> 275// Vanilla JavaScript - Event-driven architecture 276(function() { 277 'use strict'; 278 279 // Configuration 280 const CONFIG = { 281 apiKey: '${s}', 282 baseUrl: '${v}', 283 appName: '${n}', 284 networkId: 2 // Stokenet 285 }; 286 287 // DOM elements 288 const elements = { 289 button: document.getElementById('atomix-buy-btn'), 290 status: document.getElementById('atomix-status'), 291 btnText: document.querySelector('.btn-text'), 292 btnSpinner: document.querySelector('.btn-spinner') 293 }; 294 295 // State management with custom events 296 const state = { 297 isLoading: false, 298 rdt: null, 299 walletData: null, 300 walletConnected: false 301 }; 302 303 // Custom event system 304 function emit(eventName, data) { 305 window.dispatchEvent(new CustomEvent(\`atomix-\${eventName}\`, { detail: data })); 306 } 307 308 function on(eventName, handler) { 309 window.addEventListener(\`atomix-\${eventName}\`, handler); 310 } 311 312 // UI state management 313 function setLoading(loading) { 314 state.isLoading = loading; 315 elements.button.disabled = loading; 316 elements.btnText.style.display = loading ? 'none' : 'inline'; 317 elements.btnSpinner.style.display = loading ? 'inline' : 'none'; 318 emit('loading-changed', { loading }); 319 } 320 321 function showStatus(message, type = 'info') { 322 elements.status.textContent = message; 323 elements.status.className = \`status-message \${type}\`; 324 elements.status.style.display = 'block'; 325 setTimeout(() => elements.status.style.display = 'none', 5000); 326 } 327 328 // Initialize Radix dApp Toolkit 329 function initializeRDT() { 330 state.rdt = RadixDappToolkit({ 331 networkId: CONFIG.networkId, 332 dAppDefinitionAddress: 'account_tdx_2_12xd3zntghkks9kfzzzkejcc4fd92afjl8ajqcgq735xvrzwmfzge5q', 333 applicationName: CONFIG.appName, 334 applicationVersion: '1.0.0' 335 }); 336 337 // Subscribe to wallet state changes 338 state.rdt.walletApi.walletData$.subscribe(walletData => { 339 state.walletData = walletData; 340 state.walletConnected = walletData?.accounts?.length > 0; 341 emit('wallet-changed', { connected: state.walletConnected, data: walletData }); 342 }); 343 344 emit('rdt-initialized', { rdt: state.rdt }); 345 } 346 347 // Atomix trading functions 348 async function createTradeOffer(assetData) { 349 try { 350 setLoading(true); 351 352 // Get current wallet state or prompt connection if needed 353 let walletData = state.walletData; 354 355 // If no wallet data, request connection 356 if (!walletData || !walletData.accounts || walletData.accounts.length === 0) { 357 showStatus('Connecting wallet...', 'info'); 358 const walletResult = await state.rdt.walletApi.sendRequest(); 359 if (walletResult.isErr()) throw new Error('Wallet connection failed'); 360 walletData = walletResult.value; 361 } 362 363 // Verify we have required data 364 if (!walletData?.accounts?.[0]?.address) { 365 throw new Error('No wallet account found'); 366 } 367 if (!walletData?.persona?.identityAddress) { 368 throw new Error('No persona identity found'); 369 } 370 371 showStatus('Generating trade manifest...', 'info'); 372 373 // Generate manifest 374 const manifestResponse = await fetch(\`\${CONFIG.baseUrl}/api/v1/third-party/buyer-manifest\`, { 375 method: 'POST', 376 headers: { 377 'Content-Type': 'application/json', 378 'X-API-Key': CONFIG.apiKey 379 }, 380 body: JSON.stringify({ 381 buyer_account: walletData.accounts[0].address, 382 seller_account: assetData.ownerAddress, 383 asset_resource: assetData.resourceAddress, 384 asset_id: assetData.localId || '1', 385 price_xrd: assetData.priceXrd, 386 asset_type: assetData.assetType 387 }) 388 }); 389 390 const manifestData = await manifestResponse.json(); 391 if (!manifestData.success) throw new Error(manifestData.error); 392 393 showStatus('Please sign the sub-intent...', 'info'); 394 395 // Sign sub-intent using proper builder 396 const { SubintentRequestBuilder } = RadixDappToolkit; 397 const subintentRequest = SubintentRequestBuilder() 398 .manifest(manifestData.manifest) 399 .setExpiration('afterDelay', 3600) // 1 hour expiration 400 .message('Purchase sub-intent from ' + CONFIG.appName); 401 402 const signResult = await state.rdt.walletApi.sendPreAuthorizationRequest(subintentRequest); 403 if (signResult.isErr()) throw new Error('Sub-intent signing failed'); 404 405 showStatus('Creating trade offer...', 'info'); 406 407 // Create trade 408 const tradeResponse = await fetch(\`\${CONFIG.baseUrl}/api/v1/trades\`, { 409 method: 'POST', 410 headers: { 411 'Content-Type': 'application/json', 412 'X-API-Key': CONFIG.apiKey, 413 'X-User-Persona': walletData.persona.identityAddress, 414 'X-Source-App': CONFIG.appName 415 }, 416 body: JSON.stringify({ 417 buyer_account: walletData.accounts[0].address, 418 seller_account: assetData.ownerAddress, 419 asset_resource: assetData.resourceAddress, 420 asset_id: assetData.localId || '1', 421 buyer_asset: 'resource_rdx1tknxxxxxxxxxradxrdxxxxxxxxx009923554798xxxxxxxxxradxrd', // XRD resource address 422 price_xrd: assetData.priceXrd, 423 asset_type: assetData.assetType, 424 message: \`Trade from \${CONFIG.appName}\`, 425 expires_in_hours: 24, 426 buyer_signed_subintent: { 427 transactionIntentHash: signResult.value.transactionIntentHash, 428 signedPartialTransaction: signResult.value.signedPartialTransaction 429 }, 430 asset_metadata: { 431 name: assetData.name, 432 symbol: assetData.symbol, 433 icon_url: assetData.imageUrl, 434 type: assetData.assetType 435 } 436 }) 437 }); 438 439 const result = await tradeResponse.json(); 440 if (!result.success) throw new Error(result.error); 441 442 showStatus('â Trade offer created successfully!', 'success'); 443 emit('trade-created', result); 444 return result; 445 446 } catch (error) { 447 showStatus(\`â Error: \${error.message}\`, 'error'); 448 emit('trade-error', { error }); 449 throw error; 450 } finally {
451 setLoading(false); 452 } 453 } 454 455 // Event listeners 456 elements.button.addEventListener('click', () => { 457 const asset = { 458 resourceAddress: 'resource_rdx1t4dy69k6s0gv040xa64cyadyefwtett62ng6xdwf18pq4d44x9d52', 459 localId: '#123#', 460 ownerAddress: 'account_rdx168abc123...', 461 assetType: 'nft', 462 priceXrd: '10.0', 463 name: 'Your Asset Name', 464 symbol: 'SYMBOL', 465 imageUrl: 'https://example.com/asset.jpg' 466 }; 467 createTradeOffer(asset); 468 }); 469 470 // Event listeners for custom events 471 on('trade-created', (e) => console.log('Trade created:', e.detail)); 472 on('trade-error', (e) => console.error('Trade error:', e.detail)); 473 on('wallet-changed', (e) => console.log('Wallet state:', e.detail)); 474 475 // Initialize when DOM is ready 476 if (document.readyState === 'loading') { 477 document.addEventListener('DOMContentLoaded', initializeRDT); 478 } else { 479 initializeRDT(); 480 } 481})(); 482</script> 483 484<!-- Include Radix dApp Toolkit --> 485<script src="https://cdn.radixdlt.com/radix-dapp-toolkit/1.0.0/radix-dapp-toolkit.min.js"></script> 486 487<style> 488.atomix-buy-button { 489 position: relative; 490 overflow: hidden; 491} 492.btn-spinner { 493 animation: spin 1s linear infinite; 494} 495@keyframes spin { 496 from { transform: rotate(0deg); } 497 to { transform: rotate(360deg); } 498} 499.status-message { 500 margin-top: 0.5rem; 501 padding: 0.5rem; 502 border-radius: 4px; 503 font-size: 0.9rem; 504} 505.status-message.success { background: #d1fae5; color: #065f46; } 506.status-message.error { background: #fee2e2; color: #991b1b; } 507.status-message.info { background: #dbeafe; color: #1e40af; } 508</style>`}function Je(s=e(S),n=e(k)){return`.atomix-buy-button { 509 display: inline-flex; 510 align-items: center; 511 gap: 8px; 512 padding: 12px 24px; 513 border: none; 514 border-radius: 8px; 515 font-size: 16px; 516 font-weight: 600; 517 cursor: pointer; 518 transition: all 0.2s ease; 519 text-decoration: none; 520 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; 521} 522 523.atomix-buy-button:hover { 524 transform: translateY(-1px); 525 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); 526} 527 528.atomix-buy-button:active { 529 transform: translateY(0); 530} 531 532/* Button Styles */ 533.atomix-btn-primary { 534 background: #3b82f6; 535 color: white; 536} 537 538.atomix-btn-primary:hover { 539 background: #2563eb; 540} 541 542.atomix-btn-secondary { 543 background: #6b7280; 544 color: white; 545} 546 547.atomix-btn-secondary:hover { 548 background: #4b5563; 549} 550 551.atomix-btn-success { 552 background: #10b981; 553 color: white; 554} 555 556.atomix-btn-success:hover { 557 background: #059669; 558} 559 560.atomix-btn-radix { 561 background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%); 562 color: white; 563 position: relative; 564 overflow: hidden; 565} 566 567.atomix-btn-radix:hover { 568 background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%); 569} 570 571.atomix-btn-radix::before { 572 content: ''; 573 position: absolute; 574 top: 0; 575 left: -100%; 576 width: 100%; 577 height: 100%; 578 background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); 579 transition: left 0.5s; 580} 581 582.atomix-btn-radix:hover::before { 583 left: 100%; 584}`}function me(s){navigator.clipboard.writeText(s).then(()=>{console.log("Copied to clipboard")})}function He(){var u;const n=`${(((u=e(m).find(N=>N.id===e(x)))==null?void 0:u.name)||"atomix-widget").toLowerCase().replace(/[^a-z0-9]/g,"-")}-widget-${e(b)}.${e(b)==="javascript"?"html":e(b)==="vue"?"vue":e(b)==="svelte"?"svelte":"tsx"}`,p=e(q),i=document.createElement("a"),v=new Blob([p],{type:"text/plain"});i.href=URL.createObjectURL(v),i.download=n,document.body.appendChild(i),i.click(),document.body.removeChild(i)}function Ze(){const s=document.createElement("a"),n=new Blob([e(F)],{type:"text/css"});s.href=URL.createObjectURL(n),s.download="atomix-widget-styles.css",document.body.appendChild(s),s.click(),document.body.removeChild(s)}vt(()=>{e(R)&&ge()}),V(()=>ue(),()=>{var s;c(R,(s=ue().persona)==null?void 0:s.identityAddress)}),V(()=>(e(b),e(x),e($),e(k),e(O),e(S)),()=>{c(q,Ve(e(b),e(x),ve,e($),e(k),e(O),e(S)))}),V(()=>(e(S),e(k)),()=>{c(F,Je(e(S),e(k)))}),V(()=>e(R),()=>{e(R)&&ge()}),gt(),ut();var Y=Ot();wt("kxrgr",s=>{ft(()=>{bt.title="Widget Generator - My Apps"})});var M=a(Y),fe=a(M),Qe=a(fe);Dt(Qe,{size:32,class:"text-blue-400"}),T(2),t(fe),t(M);var be=r(M,2);{var et=s=>{var n=Tt(),p=a(n),i=a(p);t(p);var v=r(p,2);t(n),z(()=>y(i,`â ${e(E)??""}`)),I("click",v,()=>c(E,"")),A(s,n)};le(be,s=>{e(E)&&s(et)})}var tt=r(be,2);{var at=s=>{var n=It();A(s,n)},st=s=>{var n=Rt(),p=a(n);St(p,{size:48,class:"text-gray-600"}),T(6),t(n),A(s,n)},rt=s=>{var n=zt(),p=ht(n),i=a(p),v=r(a(i),2),u=r(a(v),2),N=r(a(u),2);de(N,5,()=>e(m),ce,(d,o)=>{var l=$t(),w=a(l,!0);t(l);var h={};z(()=>{y(w,(e(o),f(()=>e(o).name))),h!==(h=(e(o),f(()=>e(o).id)))&&(l.value=(l.__value=(e(o),f(()=>e(o).id)))??"")}),A(d,l)}),t(N),t(u);var B=r(u,2);{var C=d=>{var o=Et(),l=a(o),w=a(l,!0);t(l);var h=r(l,2),W=a(h,!0);t(h),t(o),z((_,U)=>{y(w,_),y(W,U)},[()=>(e(m),e(x),f(()=>{var _;return(_=e(m).find(U=>U.id===e(x)))==null?void 0:_.name})),()=>(e(m),e(x),f(()=>{var _;return(_=e(m).find(U=>U.id===e(x)))==null?void 0:_.description}))]),A(d,o)};le(B,d=>{e(x)&&d(C)})}t(v);var P=r(v,2),G=r(a(P),2);de(G,5,()=>Ke,ce,(d,o)=>{var l=Nt(),w=a(l),h=a(w,!0);t(w);var W=r(w,2),_=a(W,!0);t(W),t(l),z(()=>{ze(l,1,`framework-btn ${e(b),e(o),f(()=>e(b)===e(o).id?"active":"")??""}`,"svelte-kxrgr"),y(h,(e(o),f(()=>e(o).icon))),y(_,(e(o),f(()=>e(o).name)))}),I("click",l,()=>
584c(b,e(o).id)),A(d,l)}),t(G),t(P);var J=r(P,2),he=r(a(J),2),ye=r(a(he),2);Oe(ye),t(he),t(J);var H=r(J,2),Z=r(a(H),2),Q=r(a(Z),2),ee=a(Q);ee.value=ee.__value="dark";var ke=r(ee);ke.value=ke.__value="light",t(Q),t(Z);var te=r(Z,2),we=r(a(te),2);Oe(we),t(te);var _e=r(te,2),ae=r(a(_e),2);de(ae,5,()=>We,ce,(d,o)=>{var l=Pt(),w=a(l,!0);t(l);var h={};z(()=>{y(w,(e(o),f(()=>e(o).name))),h!==(h=(e(o),f(()=>e(o).id)))&&(l.value=(l.__value=(e(o),f(()=>e(o).id)))??"")}),A(d,l)}),t(ae),t(_e),t(H);var Ae=r(H,2),X=r(a(Ae),2),De=a(X);Ct(De,{size:16});var nt=r(De);t(X),t(Ae),t(i);var Se=r(i,2),se=a(Se),Ce=r(a(se),2),L=a(Ce),ot=a(L);je(ot,{size:16}),T(),t(L);var re=r(L,2),it=a(re);qe(it,{size:16}),T(),t(re),t(Ce),t(se);var ne=r(se,2),Te=a(ne),Ie=a(Te),lt=a(Ie,!0);t(Ie),t(Te),t(ne);var Re=r(ne,2),oe=a(Re),$e=r(a(oe),2),K=a($e),dt=a(K);je(dt,{size:16}),T(),t(K);var ie=r(K,2),ct=a(ie);qe(ct,{size:16}),T(),t(ie),t($e),t(oe);var Ee=r(oe,2),Ne=a(Ee),Pe=a(Ne),pt=a(Pe,!0);t(Pe),t(Ne),t(Ee),t(Re),t(Se),t(p),T(2),z(()=>{ze(X,1,`preview-btn atomix-btn-${e(k)??""}`,"svelte-kxrgr"),y(nt,` ${e($)??""}`),y(lt,e(q)),y(pt,e(F))}),pe(N,()=>e(x),d=>c(x,d)),Ue(ye,()=>e(O),d=>c(O,d)),pe(Q,()=>e(S),d=>c(S,d)),Ue(we,()=>e($),d=>c($,d)),pe(ae,()=>e(k),d=>c(k,d)),I("click",X,()=>c(xe,!e(xe))),I("click",L,()=>me(e(q))),I("click",re,He),I("click",K,()=>me(e(F))),I("click",ie,Ze),A(s,n)};le(tt,s=>{e(j)?s(at):(e(m),f(()=>e(m).length===0)?s(st,1):s(rt,-1))})}t(Y),A(Fe,Y),mt(),Xe()}export{ea as component};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.