decred.org/dcrdex@v1.0.5/client/webserver/site/src/html/markets.tmpl (about) 1 {{define "walletIcons"}} 2 <span data-state="sleeping" class="ico-sleeping grey d-hide"></span> 3 <span data-state="locked" class="ico-locked grey d-hide"></span> 4 <span data-state="unlocked" class="ico-unlocked d-hide"></span> 5 <span data-state="syncing" class="ico-sync fs12 d-hide" data-tooltip="placeholder text"></span> 6 <span data-state="nopeers" class="ico-disconnected fs12 d-hide" data-tooltip="no peers!"></span> 7 <span data-state="nowallet"></span> {{/* not showing ico-cross */}} 8 <span data-state="disabled" class="ico-cross text-danger d-hide" data-tooltip="placeholder text"></span> 9 {{end}} 10 11 {{define "markets"}} 12 {{template "top" .}} 13 <div id="main" data-handler="markets" class="main m-0 flex-nowrap"> 14 {{- /* MARKET LIST */ -}} 15 <section id="leftMarketDock" class="section flex-column align-items-end default"> 16 <div class="h-100 flex-stretch-column"> 17 18 <div class="d-flex align-items-stretch border-bottom" id="searchBoxV1"> 19 <div class="flex-grow-1 p-1 position-relative"> 20 <input type="text" id="marketSearchV1" placeholder=" " spellcheck="false" class="my-1"> 21 <div class="ico-search fs22"></div> 22 </div> 23 <div id="leftHider" class="flex-center pointer hoverbg border-start px-2"> 24 <span class="ico-arrowleft d-inline-block fs24"> 25 </div> 26 </div> 27 28 <div class="flex-grow-1 overflow-y-hidden"> 29 <div id="marketListV1" class="stylish-overflow hoveronly overflow-x-hidden flex-stretch-column"> 30 31 <div id="marketTmplV1" class="d-flex align-items-stretch p-2 border-bottom lh1 pointer hoverbg"> 32 <div class="d-flex flex-column"> 33 <div class="d-flex align-items-start justify-content-start flex-grow-1"> 34 <img data-tmpl="baseIcon" class="mini-icon"> 35 <img data-tmpl="quoteIcon" class="mini-icon ms-1"> 36 <span class="text-danger ico-disconnected d-hide ps-1" data-tmpl="disconnectedIco"></span> 37 </div> 38 <div class="fs10 demi text-start text-nowrap dexname" data-tmpl="host"></div> 39 </div> 40 <div class="d-flex flex-column pe-4 ps-2 flex-grow-1"> 41 <span class="fs17 demi"> 42 <span data-tmpl="baseSymbol"></span>-<span data-tmpl="quoteSymbol"></span> 43 </span> 44 <span class="fs15 grey" data-tmpl="baseName"></span> 45 </div> 46 <div class="d-flex flex-column align-items-end ps-3"> 47 <span data-tmpl="price" class="fs17">-</span> 48 <span data-tmpl="change" class="fs15">-</span> 49 </div> 50 </div> 51 52 </div> 53 </div> 54 </div> 55 </section> 56 57 <div id="marketReopener" class="flex-center pointer hoverbg border-bottom border-end border-top"> 58 <span class="ico-arrowright d-inline-block fs24"> 59 </div> 60 61 {{- /* MAIN CONTENT */ -}} 62 <div class="flex-grow-1 position-relative"> 63 <div class="stylish-overflow h-100 w-100 overflow-x-hidden flex-stretch-column"> 64 65 {{- /* MARKET STATS - SMALL SCREENS */ -}} 66 <div id="marketStats" class="market-stats align-items-center justify-content-center p-2 flex-wrap border-bottom"> 67 <div class="flex-center p-2 pointer hoverbg" data-tmpl="marketSelect"> 68 <div class="flex-center"> 69 <img class="medium-icon" data-tmpl="baseIcon"> 70 <img class="medium-icon ms-1" data-tmpl="quoteIcon"> 71 </div> 72 <div class="flex-center fs24 demi ms-2"> 73 <span data-tmpl="baseSymbol"></span>-<span data-tmpl="quoteSymbol"></span> 74 </div> 75 <span class="ico-arrowdown fs18 grey ms-1"></span> 76 <span class="ico-arrowup fs18 grey ms-1"></span> 77 </div> 78 79 <div class="d-flex flex-column"> 80 <span class="fs15 grey">[[[:title:price]]]</span> 81 <div class="flex-center me-2"> 82 <span data-tmpl="price"></span> 83 <div data-tmpl="change" class="ms-2"></div> 84 </div> 85 </div> 86 87 <div class="statgrid"> 88 <span class="fs15 grey border-bottom border-start ps-2 pe-4">[[[volume_24]]]</span> 89 <span class="fs15 grey border-bottom ps-2 pe-4">[[[High]]]</span> 90 <span class="fs15 grey border-bottom ps-2">[[[Low]]]</span> 91 <div class="d-flex align-items-end border-start ps-2 pe-4"> 92 <div data-tmpl="volume">-</div> 93 <div data-tmpl="volUnit" class="fs14 grey ms-1">USD</div> 94 </div> 95 <div class="ps-2 pe-4" data-tmpl="high">-</div> 96 <div class="ps-2" data-tmpl="low">-</div> 97 </div> 98 </div> 99 100 <div class="flex-grow-1 position-relative"> 101 <div id="mainContent"> 102 103 {{- /* ORDER BOOK */ -}} 104 <section class="d-flex flex-column orderbook"> 105 <div class="stylish-overflow hoveronly overflow-x-hidden flex-grow-1 ordertable-wrap reversible"> 106 107 {{- /* SELL ORDER LIST */ -}} 108 <table class="compact row-hover lh1 fs15"> 109 <tbody id="sellRows"></tbody> 110 </table> 111 </div> 112 113 <div class="border-top border-bottom p-2 flex-center fs15"> 114 <span class="flex-grow-1">Order Book</span> 115 <span class="flex-center"> 116 <span id="obUp" class="ico-arrowup buycolor fs11"></span> 117 <span id="obDown" class="ico-arrowdown sellcolor fs11 d-hide"></span> 118 <span id="obPrice" class="buycolor ms-1"></span> 119 </span> 120 </div> 121 122 <div class="stylish-overflow hoveronly overflow-x-hidden flex-grow-1 ordertable-wrap"> 123 124 {{- /* BUY ORDER LIST */ -}} 125 <table class="compact row-hover buys lh1 fs15"> 126 <tbody id="buyRows"> 127 {{- /* This row is used by the app as a template. */ -}} 128 <tr id="orderRowTmpl" class="px-2 w-100"> 129 <td class="pe-2 w-100"> 130 <div class="d-flex justify-content-start align-items-center"> 131 <div data-tmpl="qty">-</div> 132 <small class="numorders lh1 rounded3 text-center ms-2" data-tmpl="numOrders">-</small> 133 </div> 134 </td> 135 <td class="text-end text-nowrap ps-2"> 136 <span class="text-end ico-check fs13 pe-1 d-hide" data-tmpl="epoch"></span> 137 <span data-tmpl="rate">-</span> 138 </td> 139 </tr> 140 </tbody> 141 </table> {{- /* END BUY ORDER LIST */ -}} 142 </div> 143 </section> {{- /* END ORDER BOOK */ -}} 144 145 {{- /* CHARTS */ -}} 146 <div class="d-flex flex-grow-1 position-relative w-100 w-lg-auto"> 147 <div class="fill-abs flex-stretch-column"> 148 <section class="flex-grow-1 flex-stretch-column position-relative"> 149 <div id="candlesChart" class="market-chart"> 150 <div id="durBttnBox"><button class="candle-dur-bttn border rounded3" id="durBttnTemplate"></button></div> 151 </div> 152 <div id="chartErrMsg" class="position-absolute w-100 d-inline-flex text-danger p-2 "></div> 153 <div id="candlesLegend" class="grey p-1 d-hide border-bottom border-start"> 154 <div class="flex-grow-1"> 155 <div class="d-flex align-items-center"> 156 <span class="ico-target fs11 me-1"></span> 157 <span> 158 S: <span id="candleStart"></span>, 159 E: <span id="candleEnd"></span>, 160 L: <span id="candleLow"></span>, 161 H: <span id="candleHigh"></span>, 162 V: <span id="candleVol"></span> 163 </span> 164 </div> 165 </div> 166 </div> 167 </section> 168 <section class="flex-grow-1 flex-stretch-column position-relative"> 169 <div id="depthLegend" class="d-inline-flex p-1 align-items-center grey border-bottom border-start d-hide"> 170 <span> 171 [[[price]]]: <span id="hoverPrice"></span>, 172 [[[volume]]]: <span id="hoverVolume"></span> 173 </span> 174 <span class="d-hide">[[[sells]]]: <span id="sellBookedBase"></span> <span data-base-ticker></span>, <span id="sellBookedQuote"></span> <span data-quote-ticker></span></span> 175 <span class="d-hide">|</span> 176 <span class="me-2 d-hide">[[[buys]]]: <span id="buyBookedBase"></span> <span data-base-ticker></span>, <span id="buyBookedQuote"></span> <span data-quote-ticker></span></span> 177 </div> 178 <div id="depthChart" class="market-chart"> 179 <div id="epochLine"><div class="epoch-line"></div> [[[epoch]]]</div> 180 </div> 181 </section> 182 </div> 183 </div> 184 185 {{- /* ORDER FORM */ -}} 186 <section class="order-panel pb-3 position-relative"> 187 <div id="orderScroller" class="flex-stretch-column w-100"> 188 189 {{- /* TOKEN APPROVAL */ -}} 190 <div class="fs15 pt-1 pb-3 text-center border-bottom d-hide" id="tokenApproval"> 191 <span class="p-3 flex-center fs16 grey d-hide" id="approvalRequiredBuy">[[[approval_required_buy]]]</span> 192 <span class="p-3 flex-center fs16 grey d-hide" id="approvalRequiredSell">[[[approval_required_sell]]]</span> 193 <span class="p-3 flex-center fs16 grey d-hide" id="approvalRequiredBoth">[[[approval_required_both]]]</span> 194 <button id="approveBaseBttn" type="button" class="go">[[[Approve]]] <span id="baseTokenAsset"></span></button> 195 <div id="approvalPendingBase" class="d-hide flex-center position-relative py-2"> 196 <span class="px-1" id="approvalPendingBaseSymbol"></span> [[[approval_change_pending]]] <div class="px-2 ico-spinner spinner fs15"></div> 197 </div> 198 <button id="approveQuoteBttn" type="button" class="go">[[[Approve]]] <span id="quoteTokenAsset"></span></button> 199 <div id="approvalPendingQuote" class="d-hide flex-center position-relative py-2"> 200 <span class="px-1" id="approvalPendingQuoteSymbol"></span> [[[approval_change_pending]]] <div class="px-2 ico-spinner spinner fs15"></div> 201 </div> 202 </div> 203 204 {{- /* ORDER TYPE BUTTONS */ -}} 205 <div id="orderTypeBttns" class="fs14 d-hide d-flex justify-content-start align-items-stretch d-hide min-fit"> 206 <button id="limitBttn" type="button" class="flex-center px-3 py-0 markettab border-bottom selected">[[[Limit Order]]]</button> 207 <button id="marketBttn" type="button" class="flex-center px-3 py-0 markettab border-bottom border-start border-end">[[[Market Order]]]</button> 208 </div> 209 210 <div class="fs15 pt-3 text-center d-hide" id="loaderMsg"></div> 211 212 {{- /* CREATE ACCOUNT TO TRADE */ -}} 213 <div id="notRegistered" class="d-hide"> 214 <div class="p-3 flex-center fs16 grey">[[[create_account_to_trade]]]</div> 215 <div class="border-top border-bottom flex-center p-2"> 216 <p class="text-center fs14 p-2 m-0">[[[need_to_register_msg]]]</p> 217 <button data-tmpl="registerBttn" type="button" class="text-nowrap">[[[Create Account]]]</button> 218 </div> 219 </div> 220 221 {{- /* BOND CREATION PENDING */ -}} 222 <div class="d-hide p-2 mt-2" id="bondCreationPending"> 223 <div class="p-0 w-100"> 224 <div class="d-flex flex-column justify-content-center align-items-center"> 225 <p class="title">[[[posting_bonds_shortly]]]</p> 226 <p>[[[bond_creation_pending_msg]]]</p> 227 </div> 228 </div> 229 </div> 230 231 {{- /* REGISTRATION STATUS */ -}} 232 <div class="d-hide p-2 mt-2" id="registrationStatus"> 233 <div class="p-0 w-100"> 234 <div class="d-flex flex-column justify-content-center align-items-center"> 235 <span id="regStatusTitle" class="title"></span> 236 <p id="regStatusMessage">[[[reg_status_msg]]] 237 </p> 238 <span id="regStatusConfsDisplay"></span> 239 </div> 240 </div> 241 </div> 242 243 {{- /* PENALTY COMPS REQUIRED TO TRADE */ -}} 244 <div class="d-hide p-2 mt-2" id="penaltyCompsRequired"> 245 <div class="p-3 flex-center fs16 grey">[[[action_required_to_trade]]]</div> 246 <div class="border-top border-bottom flex-center p-2"> 247 <p class="text-center fs14 p-2 m-0"> 248 [[[set_penalty_comps]]] 249 <a id="compsDexSettingsLink" class="fs15 hoverbg subtlelink">[[[update_penalty_comps]]]</a> 250 </p> 251 </div> 252 </div> 253 254 {{- /* BOND REQUIRED TO TRADE */ -}} 255 <div class="d-hide p-2 mt-2" id="bondRequired"> 256 <div class="p-3 flex-center fs16 grey">[[[action_required_to_trade]]]</div> 257 <div class="border-top border-bottom flex-center p-2"> 258 <p class="text-center fs14 p-2 m-0"> 259 [[[acct_tier_post_bond]]] 260 <a id="dexSettingsLink" class="fs15 hoverbg subtlelink">[[[enable_bond_maintenance]]]</a> 261 </p> 262 </div> 263 </div> 264 265 {{- /* MM RUNNING */ -}} 266 <div class="d-hide fs15 flex-stretch-column border-bottom" id="mmRunning"> 267 <div class="flex-center my-2"> 268 <span class="ico-robot fs35 me-2 text-buycolor"></span> 269 <span class="flex-center fs22">[[[market_making_running]]]</span> 270 </div> 271 {{template "runningBotDisplay"}} 272 <span class="fs14 grey mt-2 p-2 border-top">[[[cannot_manually_trade]]]</span> 273 </div> 274 275 {{- /* ORDER FORM */ -}} 276 <div id="orderForm" class="p-3 d-hide"> 277 <div class="p-0 w-100"> 278 279 {{- /* BUY - SELL SELECTOR */ -}} 280 <div class="d-flex justify-content-start pb-2 fs14"> 281 <button id="buyBttn" type="button" class="buygreen-bg selected"> 282 [[[Buy]]] 283 <span data-base-ticker></span> 284 </button> 285 <button id="sellBttn" type="button" class="sellred-bg ms-2"> 286 [[[Sell]]] 287 <span data-base-ticker></span> 288 </button> 289 <span></span> 290 </div> 291 292 {{- /* MARKET CONFIG */ -}} 293 <div class="d-flex justify-content-between my-2 fs14"> 294 <div> 295 [[[:title:lot_size]]]: 296 <span id="lotSize"></span> 297 <span data-base-ticker></span> 298 </div> 299 <div> 300 [[[Rate Step]]]: 301 <span id="rateStep"></span> 302 <span data-quote-ticker></span> 303 </div> 304 </div> 305 <div class="my-2 fs14 h21" id="maxBox"> 306 <div id="maxOrd" class="d-hide position-relative pointer"> 307 <span id="maxLotBox" class="d-hide"> 308 <span class="underline">[[[Max]]] <span id="maxLbl">[[[Buy]]]</span></span>: 309 <span id="maxFromLots"></span> 310 <span id="maxFromLotsLbl">[[[lot]]]</span> 311 </span> 312 <span id="maxAboveZero" class="d-hide"> 313 , 314 <span id="maxFromAmt"></span> 315 <span id="maxFromTicker"></span> 316 <!-- → 317 <span id="maxToAmt"></span> 318 <span id="maxToTicker"></span> --> 319 </span> 320 <span id="maxZeroNoFees"> 321 , [[[max_zero_no_fees]]] 322 </span> 323 <span id="maxZeroNoBal"> 324 , [[[max_zero_no_bal]]] 325 </span> 326 </div> 327 </div> 328 329 {{- /* RATE AND QUANTITY INPUTS */ -}} 330 <div class="d-flex mt-3" id="priceBox"> 331 <label for="rateField" class="col-6 d-flex align-items-center p-0">[[[:title:price]]]</label> 332 <div class="col-18 p-0 position-relative"> 333 <input type="number" id="rateField"> 334 <span class="unitbox"><span class="unit" data-quote-ticker></span>/<span class="unit" data-base-ticker></span></span> 335 </div> 336 </div> 337 <div class="d-flex mt-4" id="qtyBox"> 338 <label for="qtyField" class="col-6 d-flex align-items-center p-0">[[[Quantity]]]</label> 339 <div class="col-6 p-0 position-relative"> 340 <input type="number" id="lotField"> 341 <span class="unit unitbox">[[[:title:lots]]]</span> 342 </div> 343 <div class="col-1 p-0"></div> {{/* spacer */}} 344 <div class="col-11 p-0 position-relative"> 345 <input type="number" id="qtyField"> 346 <span class="unit unitbox" data-base-ticker></span> 347 </div> 348 </div> 349 350 {{- /* MARKET BUY ORDER QUANTITY INPUT */ -}} 351 <div id="mktBuyBox" class="d-hide"> 352 <div class="text-center mt-2 fs15"> 353 [[[min trade is about]]] <span id="minMktBuy"></span> <span data-quote-ticker></span> 354 </div> 355 <div class="d-flex justify-content-center mt-2"> 356 <!-- <label for="mktBuyField" class="flex-center col-12 p-0">Trading</label> --> 357 <div class="col-12 p-0 position-relative"> 358 <input type="number" id="mktBuyField"> 359 <span class="unit unitbox" data-quote-ticker></span> 360 </div> 361 </div> 362 <div class="p-0 fs14 flex-center mt-1"> 363 <span> 364 ~ <span id="mktBuyScore">0</span> <span data-base-ticker></span> 365 @ <span id="mktBuyLots">0</span> <span >[[[:title:lots]]]</span><br> 366 367 </span> 368 </div> 369 </div> 370 371 {{- /* ORDER PREVIEW */ -}} 372 <div class="mt-2 fs14 text-end" id="orderPreview"></div> 373 374 {{- /* TIME-IN-FORCE CHECK BOX */ -}} 375 <div class="my-1 text-start form-check" id="tifBox"> 376 <input id="tifNow" class="form-check-input" type="checkbox" value=""> 377 <label class="form-check-label" for="tifNow"> 378 [[[Immediate or cancel]]] 379 <span class="ico-info fs12" data-tooltip="[[[immediate_explanation]]]"></span> 380 </label> 381 </div> 382 383 {{- /* SUBMIT ORDER BUTTON */ -}} 384 <div class="text-end"> 385 <button id="submitBttn" type="button" class="fs14 submit text-center buygreen-bg" disabled></button> {{/* textContent set by script */}} 386 </div> 387 388 {{- /* ORDER LIMITS */ -}} 389 <div class="mt-2 p-2 text-center border fs17"> 390 [[[order_form_remaining_limit]]] 391 </div> 392 393 394 </div> 395 <div class="fs15 pt-3 text-center d-hide text-danger text-break" id="orderErr"></div> 396 </div> 397 398 {{- /* BALANCES */ -}} 399 <div id="noWallet" class="p-3 border-bottom flex-center fs16 grey d-hide"></div> 400 <div id="walletInfoTmpl" class="border-top mb-2 flex-stretch-column min-fit"> 401 <div class="d-flex align-items-center px-3 py-1 border-bottom" data-tmpl="walletIcons"> 402 <img data-tmpl="logo" class="micro-icon me-1"> 403 <span data-tmpl="symbol"></span> 404 <div class="flex-grow-1"></div> 405 <div data-tmpl="walletState" class="fs12">{{template "walletIcons"}}</div> 406 <div data-tmpl="walletAddr" class="ico-qrcode fs12 p-2 pointer hoverbg"></div> 407 <span class="ico-expired fs16 ps-1" data-tmpl="expired" data-tooltip="[[[outdated_tooltip]]]"></span> 408 </div> 409 <div data-tmpl="unsupported" class="flex-center position-relative py-2 d-hide"> 410 <div class="fs13 ico-cross"></div> 411 <span class="fs15 grey ms-1">asset not supported</span> 412 </div> 413 <div data-tmpl="connect" class="pointer d-hide" data-tooltip="[[[connect_refresh_tooltip]]]"> 414 <div class="ico-sleeping"></div> 415 </div> 416 <div data-tmpl="newWalletRow" class="flex-center p-2 d-hide"> 417 <button data-tmpl="newWalletBttn" type="button" class="pointer hoverbg text-center p-2 text-nowrap">[[[add_a_wallet]]]</button> 418 </div> 419 <div data-tmpl="spinner" class="flex-center position-relative py-2"> 420 <div class="ico-spinner spinner fs15"></div> 421 </div> 422 <div data-tmpl="balanceRows" class="flex-stretch-column border-bottom lh1 pt-2 px-3"> 423 <div class="d-flex justify-content-between align-items-center mb-2 fs15" data-tmpl="balanceRowTmpl"> 424 <span data-tmpl="title"></span> 425 <div data-tmpl="bal" class="flex-center"></div> 426 </div> 427 </div> 428 <div data-tmpl="wantProvidersBox" class="flex-stretch-column border-bottom fs16"> 429 <button data-tmpl="wantProviders" class="m-2 p-2" data-tooltip="[[[add_provider_tooltip]]]"> 430 <span class="ico-disconnected text-warning me-2"></span> 431 <span>You should specify a custom API provider</span> 432 </button> 433 </div> 434 </div> 435 436 {{- /* REPUTATION */ -}} 437 <div id="reputationAndTradingTierBox"> 438 <div id="showTradingTier" class="p-2 grey fs15 hoverbg pointer"> 439 <span class="ico-plus fs10 me-2"></span> 440 <span>[[[Show trading tier info]]]</span> 441 </div> 442 <div id="hideTradingTier" class="p-2 grey fs15 hoverbg pointer d-hide"> 443 <span class="ico-minus fs10 me-2"></span> 444 <span>[[[Hide trading tier info]]]</span> 445 </div> 446 <div id="tradingLimits" class="d-flex align-items-stretch fs15 mx-2 mb-2 border d-hide"> 447 <div class="d-flex flex-column flex-grow-1 align-items-stretch p-2"> 448 449 <div class="d-flex justify-content-between align-items-center"> 450 <span>[[[Parcel Size]]]</span> 451 <span> 452 <span id="parcelSizeLots"></span> <span>[[[lots]]]</span> 453 </span> 454 </div> 455 456 <div class="d-flex justify-content-between align-items-center"> 457 <span><!-- Parcel Size Base --></span> 458 <span> 459 <span id="marketLimitBase"></span> <span id="marketLimitBaseUnit"></span> 460 </span> 461 </div> 462 463 <div class="d-flex justify-content-between align-items-center"> 464 <span><!-- Parcel Size Quote --></span> 465 <span> 466 ~ <span id="marketLimitQuote"></span> <span id="marketLimitQuoteUnit"></span> 467 </span> 468 </div> 469 470 </div> 471 <div class="d-flex flex-column flex-grow-1 align-items-stretch p-2 border-start"> 472 473 <div class="d-flex justify-content-between align-items-center"> 474 <span>[[[Trading Tier]]]</span> 475 <span id="tradingTier"></span> 476 </div> 477 478 <div class="d-flex justify-content-between align-items-center"> 479 <span>[[[Trading Limit]]]</span> 480 <span><span id="tradingLimit"></span> lots</span> 481 </div> 482 483 <div class="d-flex justify-content-between align-items-center"> 484 <span>[[[Current Usage]]]</span> 485 <span><span id="limitUsage"></span>%</span> 486 </div> 487 488 </div> 489 </div> 490 <div id="showTradingReputation" class="p-2 grey fs15 hoverbg pointer"> 491 <span class="ico-plus fs10 me-2"></span> 492 <span>[[[Show reputation]]]</span> 493 </div> 494 <div id="hideTradingReputation" class="p-2 grey fs15 hoverbg pointer d-hide"> 495 <span class="ico-minus fs10 me-2"></span> 496 <span>[[[Hide reputation]]]</span> 497 </div> 498 <div id="reputationMeter" class="px-3 mb-3 border-bottom d-hide"> 499 {{template "reputationMeter"}} 500 </div> 501 </div> 502 503 {{- /* USER ORDERS */ -}} 504 <div class="text-center fs20 mb-2"> 505 [[[Your Orders]]] 506 </div> 507 <div id="unreadyOrdersMsg" class="d-hide px-3 py-1 flex-center fs16 text-danger">[[[unready_wallets_msg]]]</div> 508 <div id="userNoOrders" class="p-3 flex-center fs16 grey">no active orders</div> 509 <div id="userOrders" class="border-bottom"> 510 <div id="userOrderTmpl" class="user-order border-top"> 511 <div data-tmpl="header" class="user-order-header pointer"> 512 <div data-tmpl="sideLight" class="side-indicator"></div> 513 <span data-tmpl="side"></span> 514 <span data-tmpl="qty" class="ms-1"></span> 515 <span data-tmpl="baseSymbol" class="ms-1 grey"></span> 516 <span class="ms-1">@</span> 517 <span data-tmpl="rate" class="ms-1"></span> 518 <span class="flex-grow-1 d-flex align-items-center justify-content-end"> 519 <span data-tmpl="status"></span> 520 <span data-tmpl="activeLight" class="active-indicator active"></span> 521 </span> 522 <div data-tmpl="expander" class="p-1 pointer hoverbg fs11 ico-arrowdown"></div> 523 524 <!-- <span class="fs11 ico-open ms-2"></span> --> 525 </div> 526 <div data-tmpl="details" class="order-details border-top border-bottom d-hide"> 527 <div class="user-order-datum full-span d-flex flex-row justify-content-start align-items-center border-bottom fs14"> 528 <span data-tmpl="accelerateBttn" class="ico-rocket pointer hoverbg d-hide py-2 px-3 me-1" data-tooltip="[[[accelerate_order]]]"></span> 529 <span data-tmpl="cancelBttn" class="ico-cross pointer hoverbg fs11 d-hide py-2 px-3 mx-1" data-tooltip="[[[cancel_order]]]"></span> 530 <a data-tmpl="link" class="ico-open pointer hoverbg fs13 plainlink py-2 px-3 ms-1" data-tooltip="[[[order details]]]"></a> 531 </div> 532 <div class="user-order-datum"> 533 <span>[[[Type]]]</span> 534 <span data-tmpl="type"></span> 535 </div> 536 <div class="user-order-datum"> 537 <span>[[[Side]]]</span> 538 <span data-tmpl="side"></span> 539 </div> 540 <div class="user-order-datum"> 541 <span>[[[Status]]]</span> 542 <span data-tmpl="status"></span> 543 </div> 544 <div class="user-order-datum"> 545 <span>[[[Age]]]</span> 546 <span data-tmpl="age"></span> 547 </div> 548 <div class="user-order-datum"> 549 <span>[[[Quantity]]]</span> 550 <span data-tmpl="qty"></span> 551 </div> 552 <div class="user-order-datum"> 553 <span>[[[Rate]]]</span> 554 <span data-tmpl="rate"></span> 555 </div> 556 <div class="user-order-datum"> 557 <span>[[[Filled]]]</span> 558 <span data-tmpl="filled"></span> 559 </div> 560 <div class="user-order-datum"> 561 <span>[[[Settled]]]</span> 562 <span data-tmpl="settled"></span> 563 </div> 564 </div> 565 </div> 566 </div>{{- /* END USER ORDERS */ -}} 567 568 <a href="/orders" class="flex-center py-1 plainlink hoverbg">[[[view order history]]]</a> 569 570 {{- /* RECENT MATCHES */ -}} 571 <div id=recentMatchesBox class="flex-stretch-column pb-4 border-top"> 572 <div class="text-center fs20 my-3">[[[Recent Matches]]]</div> 573 <table id="recentMatchesTable" class="row-border row-hover lh1"> 574 <thead> 575 <tr class="pointer"> 576 <th data-ordercol="age" class="text-nowrap">[[[Age]]] <span class="ico-arrowdown"></span></th> 577 <th data-ordercol="rate" class="text-end pe-2 text-nowrap"><span class="ico-arrowdown"></span> [[[Rate]]]</th> 578 <th data-ordercol="qty" class="text-end text-nowrap"><span class="ico-arrowdown"></span> [[[Quantity]]]</th> 579 </tr> 580 </thead> 581 <tbody id="recentMatchesLiveList"> 582 <tr id="recentMatchesTemplate"> 583 <td data-tmpl="age"></td> 584 <td data-tmpl="rate" class="text-end pe-2"></td> 585 <td data-tmpl="qty" class="text-end"></td> 586 </tr> 587 </tbody> 588 </table> 589 </div>{{- /* END RECENT MATCHES */ -}} 590 591 </div> 592 </section> 593 </div> 594 </div> 595 </div> 596 </div>{{- /* END CONTENT */ -}} 597 598 {{- /* POP-UP FORMS */ -}} 599 <div id="forms" class="d-hide"> 600 601 {{- /* DEPOSIT ADDRESS */ -}} 602 <form class="mw-425 d-hide" id="deposit"> 603 {{template "depositAddress"}} 604 </form> 605 606 {{- /* NEW WALLET */ -}} 607 <form class="m-auto d-hide" id="newWalletForm" autocomplete="off"> 608 {{template "newWalletForm"}} 609 </form> 610 611 {{- /* TOGGLE WALLET STATUS AUTHORIZATION */ -}} 612 <form class="d-hide" id="toggleWalletStatusConfirm"> 613 {{template "toggleWalletStatusConfirm"}} 614 </form> 615 616 {{- /* VERIFY FORM */ -}} 617 <form class="position-relative d-hide" id="verifyForm" autocomplete="off"> 618 <div class="form-closer"><span class="ico-cross"></span></div> 619 <header class="fs18 buygreen-bg" id="vHeader"> 620 <span id="vBuySell" class="me-2"></span> <span data-base-ticker></span> 621 </header> 622 <div class="d-flex justify-content-between align-items-center fs14"> 623 <span id="vOrderType" class="grey"></span> 624 <span id="vOrderHost" class="grey"></span> 625 </div> 626 627 {{- /* Price, Quantity, Total Section */ -}} 628 <div id="verifyLimit"> 629 <div class="d-flex align-items-center justify-content-between"> 630 <span class="grey fs17 flex-grow-1 text-start">[[[:title:price]]]</span> 631 <span id="vRate" class="fs18 demi"></span> 632 <span class="grey fs14 ms-2"> 633 <sup data-quote-ticker></sup>/<sub data-base-ticker></sub> 634 </span> 635 </div> 636 <div class="d-flex align-items-center mt-1"> 637 <span class="grey fs17 flex-grow-1 text-start">[[[Quantity]]]</span> 638 <span id="vQty" class="fs18 demi"></span> 639 <span data-base-ticker class="grey fs14 ms-2"></span> 640 </div> 641 <div class="d-flex align-items-center mt-1"> 642 <span class="grey fs17 flex-grow-1 text-start">[[[Total]]]</span> 643 <span id="vTotal" class="fs18 demi"></span> 644 <span data-quote-ticker class="grey fs14 ms-2"></span> 645 </div> 646 <span class="d-flex d-hide justify-content-end grey fs14"> 647 ~<span id="vFiatTotal" class="mx-1"></span>USD 648 </span> 649 </div> 650 <div id="verifyMarket"> 651 <div class="d-flex align-items-center justify-content-between"> 652 <span class="grey fs17 flex-grow-1 text-start">[[[Trading]]]</span> 653 <span id="vmFromTotal" class="fs18 demi"></span> 654 <span id="vmFromAsset" class="grey fs14 ms-2"></span> 655 </div> 656 <span class="d-flex d-hide justify-content-end grey fs14"> 657 ~<span id="vmFromTotalFiat" class="mx-1"></span>USD 658 </span> 659 <div id="vMarketEstimate" class="d-flex align-items-center justify-content-between"> 660 <span class="grey fs17 flex-grow-1 text-start"> 661 [[[Receiving Approximately]]] 662 <span class="ico-info fs12" data-tooltip="[[[verify_market]]]"></span> 663 </span> 664 <span id="vmToTotal" class="fs18 demi"></span> 665 <span id="vmToAsset" class="grey fs14 ms-2"></span> 666 </div> 667 <span class="d-flex d-hide justify-content-end grey fs14"> 668 ~<span id="vmTotalFiat" class="mx-1"></span>USD 669 </span> 670 </div> 671 672 <div class="flex-stretch-column"> 673 <button id="vSubmit" class="justify-content-center fs15 go sellred-bg"> 674 <span id="vSideSubmit"></span> 675 <span data-base-ticker></span> 676 </button> 677 <div id="vLoader" class="loader flex-center d-hide"> 678 <div class="ico-spinner spinner"></div> 679 </div> 680 </div> 681 <div class="fs15 p-3 text-center d-hide text-danger text-break" id="vErr"></div>{{- /* End Auth Section */ -}} 682 683 <div id="vPreorder"> 684 <div id="vPreorderEstimates"> 685 <hr class="dashed mb-2 mt-3"> 686 687 <div class="d-flex justify-content-between align-items-center"> 688 <span class="grey fs18"> 689 [[[Fee Projection]]] 690 <span class="ico-info fs12" data-tooltip="[[[fee_projection_tooltip]]]"></span> 691 </span> 692 <span class="grey fs14 underline pointer hoverbg" id="vFeeDetails">[[[details]]]</span> 693 </div> 694 695 <div class="py-1 d-flex align-items-center justify-content-center fs18" id="vFeeSummaryPct"> 696 <span id="vFeeSummaryLow"></span> 697 <span class="fs15">%</span> 698 <span class="fs15 px-2">[[[to]]]</span> 699 <span id="vFeeSummaryHigh"></span> 700 <span class="fs15">%</span> 701 </div> 702 703 <div class="py-1 flex-column align-items-center justify-content-center fs18" id="vFeeSummary"> 704 <div class="d-flex flex-row align-items-center justify-content-center"> 705 <img class="micro-icon mx-1" data-icon="from"> 706 <span id="summarySwapFeesLow"></span> 707 <span class="px-1">–</span> 708 <span id="summarySwapFeesHigh"></span> 709 </div> 710 <div class="d-flex flex-row align-items-center justify-content-center"> 711 <img class="micro-icon mx-1" data-icon="to"> 712 <span id="summaryRedeemFeesLow"></span> 713 <span class="px-1">–</span> 714 <span id="summaryRedeemFeesHigh"></span> 715 </div> 716 </div> 717 </div> 718 719 <hr class="dashed mb-2 mt-3"> 720 721 <div class="grey fs18 d-flex justify-content-between align-items-center"> 722 [[[Options]]] 723 <span class="grey fs14 underline pointer hoverbg" id="showAdvancedOptions"> 724 [[[show advanced options]]] 725 </span> 726 <span class="grey fs14 underline pointer hoverbg d-hide" id="hideAdvancedOptions"> 727 [[[hide advanced options]]] 728 </span> 729 </div> 730 731 <div id="vDefaultOrderOpts"> 732 {{template "orderOptionTemplates"}} 733 </div> 734 <div id="vOtherOrderOpts" class="d-hide"></div> 735 </div> {{- /* END id="vPreorder" */ -}} 736 737 <div id="vPreorderErr"> 738 [[[estimate_unavailable]]] 739 <span class="ico-info text-danger fs12" id="vPreorderErrTip" data-tooltip=" "></span> 740 </div> 741 742 <div id="disclaimer" class="disclaimer fs14 pt-3 mt-3 border-top"> 743 [[[order_disclaimer]]] 744 </div> 745 <div id="disclaimerAck" class="grey text-start pointer hoverbg fs14 lh1"> 746 <span class="ico-check fs12"></span> [[[acknowledge_and_hide]]] 747 </div> 748 <div id="showDisclaimer" class="d-flex align-items-center grey text-start pointer hoverbg fs14 lh1 d-hide"> 749 <span class="fs8 ico-plus me-1 mt-1"></span> [[[show_disclaimer]]] 750 </div> 751 </form> 752 753 {{- /* FEE DETAIL BREAKDOWN */ -}} 754 <form id="vDetailPane" class="d-hide"> 755 <div id="closeDetailPane" class="form-closer-unbound"><span class="ico-cross"></span></div> 756 <header> 757 [[[Fee Details]]] 758 </header> 759 <div> 760 <div class="mb-3"> 761 [[[estimate_market_conditions]]] 762 </div> 763 764 <div class="fs18 demi">[[[Best Case Fees]]]</div> 765 <div class="ps-3 mb-3 indent"> 766 <div> 767 [[[best_case_conditions]]] 768 </div> 769 <div class="d-flex"> 770 <table class="fee-breakout cell-border my-1"> 771 <tr> 772 <td><img class="micro-icon" data-icon="from"> [[[Swap]]]</td> 773 <td><img class="micro-icon" data-icon="to"> [[[Redeem]]]</td> 774 </tr> 775 <tr> 776 <td><span id="vSwapFeesLow"></span> <span id="vSwapFeesLowPct"></span></td> 777 <td><span id="vRedeemFeesLow"></span> <span id="vRedeemFeesLowPct"></span></td> 778 </tr> 779 </table> 780 </div> 781 </div> 782 783 <div class="fs18 demi">[[[Worst Case Fees]]]</div> 784 <div class="ps-3 mb-3 indent"> 785 <div> 786 [[[worst_case_conditions]]] 787 </div> 788 <div class="d-flex"> 789 <table class="fee-breakout cell-border my-1"> 790 <tr> 791 <td><img class="micro-icon" data-icon="from"> [[[Swap]]]</td> 792 <td><img class="micro-icon" data-icon="to"> [[[Redeem]]]</td> 793 </tr> 794 <tr> 795 <td><span id="vSwapFeesHigh"></span> <span id="vSwapFeesHighPct"></span></td> 796 <td><span id="vRedeemFeesHigh"></span> <span id="vRedeemFeesHighPct"></span></td> 797 </tr> 798 </table> 799 </div> 800 </div> 801 802 <div class="fs18 demi">[[[Maximum Possible Swap Fees]]]</div> 803 <div class="ps-3 indent"> 804 <div> 805 [[[max_fee_conditions]]] 806 </div> 807 <div> 808 <img class="micro-icon me-1" data-icon="from"> 809 <span id="vSwapFeesMax"></span> <span id="vSwapFeesMaxPct"></span> 810 </div> 811 </div> 812 813 </div> 814 </form> 815 816 <form id="approveTokenForm" class="position-relative flex-center flex-column fs20 d-hide"> 817 {{template "tokenApprovalForm"}} 818 </form> 819 820 {{- /* CANCEL ORDER FORM */ -}} 821 <form class="d-hide" id="cancelForm" autocomplete="off"> 822 {{template "cancelOrderForm" .}} 823 </form> 824 <form class="d-hide" id="accelerateForm"> 825 {{template "accelerateForm" .}} 826 </form> 827 828 <form class="position-relative d-hide" id="orderReportForm" autocomplete="off"> 829 {{template "orderReportForm"}} 830 </form> 831 </div> 832 833 </div> 834 {{template "bottom"}} 835 {{end}}