decred.org/dcrdex@v1.0.3/client/webserver/site/src/html/mm.tmpl (about)

     1  {{define "mm"}}
     2  {{template "top" .}}
     3  <div id="main" data-handler="mm" class="flex-grow-1 flex-stretch-column stylish-overflow">
     4    <div>
     5  
     6      {{- /* BOT PANELS */ -}}
     7      <div class="flex-center">
     8        <div class="d-flex col-24 col-lg-20 col-xl-16 col-xxl-12">
     9          <div id="boxZero" class=" flex-stretch-column col-24 col-md-12">
    10  
    11            {{- /* MARKET MAKING OVERVIEW */ -}}
    12            <div id="overview">
    13              <section class="flex-stretch-column py-3">
    14                <div class="d-flex justify-content-between px-3 pb-2">
    15                  <span class="fs26">Market Making</span>
    16                  <button id="newBot" class="feature lh1">
    17                    <span class="ico-robot fs20 me-1"></span>
    18                    <span>Create a New Bot</span>
    19                  </button>
    20                </div>
    21                <table class="row-border mt-2">
    22                  <tbody id="botRows">
    23                    <tr id="botRowTmpl" class="hoverbg pointer">
    24                      <td class="ps-3">
    25                        <div class="d-flex justify-content-start align-items-center">
    26                          <img class="mini-icon me-1" data-base-logo>
    27                          <img class="mini-icon me-1" data-quote-logo>
    28                          <span class="fs20" data-base-ticker></span>
    29                          <span>-</span>
    30                          <span class="fs20" data-quote-ticker></span>
    31                        </div>
    32                      </td>
    33                      <td data-tmpl="allocateBttnBox" class="d-flex align-items-center justify-content-end pe-3">
    34                        <button data-tmpl="allocateBttn" class="small demi">Allocate</button>
    35                      </td>
    36                      <td data-tmpl="profitLossBox" class="pe-3">
    37                        <div class="d-flex align-items-center justify-content-end">
    38                          <span class="fs14 grey me-2 demi">P/L</span>
    39                          <div class="d-flex align-items-end fs18">
    40                            <span data-tmpl="profitLoss"></span>
    41                            <span class="grey fs15 ms-1">USD</span>
    42                          </div>
    43                          <div class="on-indicator on ms-2"></div>
    44                        </div>
    45                      </td>
    46                    </tr>
    47                  </tbody>
    48                </table>
    49  
    50                {{- /* CEX OVERVIEW */ -}}
    51                <div class="mt-2 px-3 fs22">Exchanges</div>
    52                <table class="row-border mt-2">
    53                  <tbody id="cexRows">
    54                    <tr id="exchangeRowTmpl">
    55                      <td class="ps-3">
    56                        <div class="d-flex justify-content-start align-items-center">
    57                          <img data-tmpl="logo" class="small-icon me-2">
    58                          <span data-tmpl="name" class="fs20"></span>
    59                        </div>
    60                      </td>
    61                      <td data-tmpl="unconfigured" class="pe-3">
    62                        <div class="d-flex align-items-center justify-content-end">
    63                          <button data-tmpl="configureBttn" class="flex-center">
    64                            <span class="ico-settings fs18 me-1"></span>
    65                            <span>Configure</span>
    66                          </button>
    67                        </div>
    68                      </td>
    69                      <td data-tmpl="configured" class="pe-3">
    70                        <div class="d-flex align-items-center justify-content-end">
    71                          <div class="d-flex align-items-end fs18">
    72                            <span class="grey">~</span>
    73                            <span data-tmpl="usdBalance"></span>
    74                            <span class="grey fs15 ms-1">USD</span>
    75                          </div>
    76                          <button data-tmpl="reconfigBttn" class="ico-settings ms-2"></button>
    77                        </div>
    78                      </td>
    79                      <td data-tmpl="connectErrBox" class="d-hide pe-3">
    80                        <span data-tmpl="connectErr" class="text-warning" data-tooltip></span>
    81                        <button data-tmpl="errConfigureBttn" class="ico-settings ms-2"></button>
    82                      </td>
    83                    </tr>
    84                  </tbody>
    85                </table>
    86              </section>
    87            </div>
    88          </div>
    89          <div id="boxOne" class=" flex-stretch-column col-24 col-md-12">
    90            {{- /* NO CONFIGURED BOTS */ -}}
    91            <div id="noBots">
    92              <section class="flex-stretch-column">
    93                <div class="flex-center lh1 pt-3">
    94                  <span class="ico-robot"></span>
    95                </div>
    96                <p class="px-3 pt-2 mt-2 border-top fs18 text-justify">
    97                  [[[whats_a_market_maker]]]
    98                </p>
    99              </section>
   100            </div>
   101            {{- /* BOT PANEL TEMPLATE */ -}}
   102            <div id="botTmpl" class="flex-stretch-column mb-3">
   103              <section class="flex-stretch-column position-relative pt-3">
   104                <div data-tmpl="loadingBg" class="fill-abs z10 blurry-bg flex-center">
   105                  <div class="ico-robot fs50 grey position-relative spinner fast pb-2"></div>
   106                </div>
   107  
   108                <div class="d-flex px-3">
   109                  {{- /* MARKET NAME DISPLAY */ -}}
   110                  <div data-tmpl="marketLink" class="flex-grow-1 d-flex flex-column align-items-start hoverbg pointer">
   111                    <div class="d-flex align-items-center fs24 lh1 pb-1">
   112                      <img class="mini-icon" data-base-logo><img class="mx-1 mini-icon" data-quote-logo>
   113                      <span data-base-ticker></span>&ndash;<span data-quote-ticker></span>
   114                    </div>
   115                    <div class="fs14 grey">
   116                      <span class="me-1">@</span>
   117                      <span data-host></span>
   118                    </div>
   119                  </div>
   120                  {{- /* BOT TYPE DISPLAY */ -}}
   121                  <div class="flex-grow-1 d-flex flex-column align-items-end">
   122                    <div class="d-flex align-items-center lh1 pb-1">
   123                      <div data-tmpl="botTypeDisplay" class="fs20"></div>
   124                    </div>
   125                    <div class="d-flex align-items-center" data-cex-show>
   126                      <img class="micro-icon greyscale me-1" data-cex-logo>
   127                      <span class="grey fs15" data-cex-name></span>
   128                    </div>
   129                  </div>
   130                </div>
   131  
   132                <div class="position-relative">
   133  
   134                  {{- /* ON */ -}}
   135                  <div data-tmpl="onBox" class="flex-stretch-column mt-2 pt-2 border-top">
   136                    {{template "runningBotDisplay"}}
   137                  </div>
   138  
   139                  {{- /* OFF */ -}}
   140                  <div data-tmpl="offBox" class="flex-stretch-column">
   141                    {{- /* STATUS AND ALLOCATE BUTTON */ -}}
   142                    <div class="d-flex align-items-center mt-2 px-3 pt-2 border-top">
   143                      <div class="col-8 ico-sleeping fs26 grey"></div>
   144                      <div class="col-8 flex-center">
   145                        <button data-tmpl="allocationBttn" class="small feature">
   146                          <span class="fs16 ico-arrowright"></span>
   147                          <span class="fs18">Allocate and Run</span>
   148                        </button>
   149                      </div>
   150                      <div class="col-8 d-flex align-items-center justify-content-end">
   151                        <button data-tmpl="reconfigureBttn">
   152                          <span class="ico-settings fs17"></span>
   153                        </button>
   154                      </div>
   155                    </div>
   156                    <span data-tmpl="offError" class="fs16 px-3 text-center text-warning d-hide"></span>
   157  
   158                    {{- /* PROJECTED ALLOCATIONS */ -}}
   159                    <div class="flex-stretch-column px-3 pt-2 mt-2 border-top">
   160                      <div class="d-flex align-items-center justify-content-between">
   161                        <div class="flex-center">
   162                          <span class="ico-barchart fs18 me-2"></span>
   163                          <span class="fs20">Projected Allocation</span>
   164                        </div>
   165                        <div class="d-flex align-items-end">
   166                          <div data-tmpl="totalAllocUSD" class="fs20"></div>
   167                          <div class="fs18 grey ms-1">USD</div>
   168                        </div>
   169                      </div>
   170  
   171                      {{- /* PROJECTED BASE ASSET ALLOCATIONS */ -}}
   172                      <div class="d-flex align-items-center justify-content-between mt-2 pt-2 border-top">
   173                        <div class="flex-center">
   174                          <img class="micro-icon me-1" data-base-logo>
   175                          <span class="fs20" data-base-name></span>
   176                        </div>
   177                        <div class="d-flex align-items-end">
   178                          <div data-tmpl="baseAlloc" class="fs18"></div>
   179                          <span class="fs15 grey ms-1" data-base-ticker></span>
   180                        </div>
   181                      </div>
   182                      <div class="grey pe-2 fs16">
   183                        <div data-tmpl="baseBookingFeesAllocBox" class="d-flex align-items-center justify-content-between lh1">
   184                          <span>
   185                            <span class="fs20">├─</span>
   186                            <span>Booking Fees</span>
   187                          </span>
   188                          <span data-tmpl="baseBookingFeesAlloc" class="mono"></span>
   189                        </div>
   190                        <div data-tmpl="baseCexAllocBox" class="d-flex align-items-center justify-content-between lh1">
   191                          <span>
   192                            <span class="fs20">├─</span>
   193                            <span>CEX Inventory</span>
   194                          </span>
   195                          <span data-tmpl="baseCexAlloc" class="mono"></span>
   196                        </div>
   197                        <div class="d-flex align-items-center justify-content-between lh1">
   198                          <span>
   199                            <span class="fs20">├─</span>
   200                            <span>Order Inventory</span>
   201                          </span>
   202                          <span data-tmpl="baseBookAlloc" class="mono"></span>
   203                        </div>
   204                        <div class="d-flex align-items-center justify-content-between lh1">
   205                          <span>
   206                            <span class="fs20">└─</span>
   207                            <span>Order Reserves</span>
   208                            <span>(<span data-tmpl="baseOrderReservesPct"></span>%)</span>
   209                          </span>
   210                          <span data-tmpl="baseOrderReservesAlloc" class="mono"></span>
   211                        </div>
   212                      </div>
   213                      <div class="d-flex align-items-end justify-content-end">
   214                        <span class="grey me-1">~</span>
   215                        <span data-tmpl="baseAllocUSD" class="fs18 mono"></span>
   216                        <span class="fs15 grey ms-1">USD</span>
   217                      </div>
   218  
   219                      {{- /* PROJECTED QUOTE ASSET ALLOCATIONS */ -}}
   220                      <div class="d-flex align-items-center justify-content-between mt-2 pt-2 border-top">
   221                        <div class="flex-center">
   222                          <img class="micro-icon me-1" data-quote-logo>
   223                          <span class="fs20" data-quote-name></span>
   224                        </div>
   225                        <div class="d-flex align-items-end">
   226                          <div data-tmpl="quoteAlloc" class="fs18"></div>
   227                          <span class="fs15 grey ms-1" data-quote-ticker></span>
   228                        </div>
   229                      </div>
   230                      <div class="grey pe-2 fs16">
   231                        <div data-tmpl="quoteBookingFeesAllocBox" class="d-flex align-items-center justify-content-between lh1">
   232                          <span>
   233                            <span class="fs20">├─</span>
   234                            <span>Booking Fees</span>
   235                          </span>
   236                          <span data-tmpl="quoteBookingFeesAlloc" class="mono"></span>
   237                        </div>
   238                        <div data-tmpl="quoteCexAllocBox" class="d-flex align-items-center justify-content-between lh1">
   239                          <span>
   240                            <span class="fs20">├─</span>
   241                            <span>CEX Inventory</span>
   242                          </span>
   243                          <span data-tmpl="quoteCexAlloc" class="mono"></span>
   244                        </div>
   245                        <div class="d-flex align-items-center justify-content-between lh1">
   246                          <span>
   247                            <span class="fs20">├─</span>
   248                            <span>Order Inventory</span>
   249                          </span>
   250                          <span data-tmpl="quoteBookAlloc" class="mono"></span>
   251                        </div>
   252                        <div class="d-flex align-items-center justify-content-between lh1">
   253                          <span>
   254                            <span class="fs20">├─</span>
   255                            <span>Order Reserves</span>
   256                            <span>(<span data-tmpl="quoteOrderReservesPct"></span>%)</span>
   257                          </span>
   258                          <span data-tmpl="quoteOrderReservesAlloc" class="mono"></span>
   259                        </div>
   260                        <div data-tmpl="quoteSlippageAllocBox" class="d-flex align-items-center justify-content-between lh1">
   261                          <span>
   262                            <span class="fs20">└─</span>
   263                            <span>Slippage Buffer</span>
   264                            <span>(<span data-tmpl="slippageBufferFactor"></span>%)</span>
   265                          </span>
   266                          <span data-tmpl="quoteSlippageAlloc" class="mono"></span>
   267                        </div>
   268                      </div>
   269                      <div class="d-flex align-items-end justify-content-end">
   270                        <span class="grey me-1">~</span>
   271                          <span data-tmpl="quoteAllocUSD" class="fs18"></span>
   272                          <span class="fs15 grey ms-1">USD</span>
   273                      </div>
   274  
   275                      {{- /* PROJECTED BASE TOKEN FEE ALLOCATIONS */ -}}
   276                      <div data-tmpl="baseTokenFeesAllocBox">
   277                        <div class="d-flex align-items-center justify-content-between mt-2 pt-2 border-top">
   278                          <div class="flex-center">
   279                            <img class="micro-icon me-1" data-base-fee-logo>
   280                            <span class="fs20" data-base-fee-name></span>
   281                          </div>
   282                          <div class="d-flex align-items-end">
   283                            <div data-tmpl="baseTokenFeeAlloc" class="fs18"></div>
   284                            <span class="fs14 grey ms-1" data-base-fee-ticker></span>
   285                          </div>
   286                        </div>
   287                        <div class="grey pe-2 fs16">
   288                          <div data-tmpl="baseTokenSwapFeesBox" class="d-flex align-items-center justify-content-between lh1">
   289                            <span>
   290                              <span class="fs20">├─</span>
   291                              <span>Swap Fee Reserves</span>
   292                              <span>(<span data-tmpl="baseTokenSwapFeeN"></span>)</span>
   293                            </span>
   294                            <span data-tmpl="baseTokenSwapFees" class="mono"></span>
   295                          </div>
   296                        </div>
   297                        <div class="grey d-flex align-items-center justify-content-between lh1">
   298                          <span>
   299                            <span class="fs20">└─</span>
   300                            <span>Booking Fees</span>
   301                          </span>
   302                          <span data-tmpl="baseTokenBookingFees" class="mono"></span>
   303                        </div>
   304                        <div class="d-flex align-items-end justify-content-end">
   305                          <span class="grey me-1">~</span>
   306                          <span data-tmpl="baseTokenAllocUSD" class="fs18"></span>
   307                          <span class="fs15 grey ms-1">USD</span>
   308                        </div>
   309                      </div>
   310  
   311                      {{- /* PROJECTED QUOTE TOKEN FEE ALLOCATIONS */ -}}
   312                      <div data-tmpl="quoteTokenFeesAllocBox">
   313                        <div class="d-flex align-items-center justify-content-between mt-2 pt-2 border-top">
   314                          <div class="flex-center">
   315                            <img class="micro-icon me-1" data-quote-fee-logo>
   316                            <span class="fs20" data-quote-fee-name></span>
   317                          </div>
   318                          <div class="d-flex align-items-end">
   319                            <div data-tmpl="quoteTokenFeeAlloc" class="fs18"></div>
   320                            <span class="fs14 grey ms-1" data-quote-fee-ticker></span>
   321                          </div>
   322                        </div>
   323                        <div class="grey pe-2 fs16">
   324                          <div data-tmpl="quoteTokenSwapFeesBox" class="d-flex align-items-center justify-content-between lh1">
   325                            <span>
   326                              <span class="fs20">├─</span>
   327                              <span>Swap Fee Reserves</span>
   328                              <span>(<span data-tmpl="quoteTokenSwapFeeN" class="mono"></span>)</span>
   329                            </span>
   330                            <span data-tmpl="quoteTokenSwapFees"></span>
   331                          </div>
   332                          <div class="d-flex align-items-center justify-content-between lh1">
   333                            <span>
   334                              <span class="fs20">└─</span>
   335                              <span>Booking Fees</span>
   336                            </span>
   337                            <span data-tmpl="quoteTokenBookingFees" class="mono"></span>
   338                          </div>
   339                        </div>
   340                        <div class="d-flex align-items-end justify-content-end">
   341                          <span class="grey me-1">~</span>
   342                            <span data-tmpl="quoteTokenAllocUSD" class="fs18"></span>
   343                            <span class="fs15 grey ms-1">USD</span>
   344                        </div>
   345                      </div>
   346                    </div>
   347  
   348                    {{- /* CURRENT MARKET DATA */ -}}
   349                    <div class="d-flex align-items-stretch justify-content-start mt-2 pt-2 px-3 border-top">
   350                      {{- /* HIDDEN FOR NOW - MOVE TO SETTINGS OVERVIEW WHEN IMPLEMENTED */ -}}
   351                      <div class="flex-center flex-column p-2 d-hide">
   352                        <span class="fs14 grey">Trigger</span>
   353                        <span class="lh1">
   354                          <span data-tmpl="profitTrigger" class="fs28">5</span>
   355                          <span class="fs22 grey">%</span>
   356                        </span>
   357                      </div>
   358  
   359                      {{- /* DEX MARKET INFO */ -}}
   360                      <div data-tmpl="dexDataBox" class="flex-stretch-column flex-grow-1">
   361                        <div class="d-flex align-items-center justify-content-start pt-1">
   362                          <img class="mini-icon dex-logo me-1">
   363                          <span class="fs18">DCRDEX</span>
   364                        </div>
   365                        <div class="flex-grow-1 d-flex align-items-end lh1 pt-1">
   366                          <span data-tmpl="dexPrice" class="fs17"></span>
   367                          <span class="fs14 grey ms-1">
   368                            <span data-quote-ticker></span><span>/</span> <span data-base-ticker></span>
   369                          </span>
   370                        </div>
   371                        <div class="flex-grow-1 d-flex align-items-end lh1 pt-1 pb-2">
   372                          <span data-tmpl="dexVol" class="fs17"></span>
   373                          <span class="fs14 grey ms-1">USD 24 hr. vol.</span>
   374                        </div>
   375                      </div>
   376  
   377                      {{- /* CEX MARKET INFO */ -}}
   378                      <div data-tmpl="cexDataBox" class="d-flex flex-column align-items-end flex-grow-1">
   379                        <div class="flex-center">
   380                          <img class="mini-icon me-1" data-cex-logo>
   381                          <span class="fs20" data-cex-name></span>
   382                        </div>
   383                        <div class="flex-grow-1 d-flex align-items-end lh1 pt-1">
   384                          <span data-tmpl="cexPrice" class="fs17"></span>
   385                          <span class="fs14 grey ms-1">
   386                            <span data-quote-ticker></span><span>/</span> <span data-base-ticker></span>
   387                          </span>
   388                        </div>
   389                        <div class="flex-grow-1 d-flex align-items-end lh1 pt-1 pb-2">
   390                          <span data-tmpl="cexVol" class="fs17"></span>
   391                          <span class="fs14 grey ms-1">USD 24 hr. vol.</span>
   392                        </div>
   393                      </div>
   394                    </div>
   395  
   396                    {{- /* PLACEMENTS */ -}}
   397                    <div data-tmpl="placementsChartBox" class="d-flex align-items-stretch border-top mt-2">
   398                      <div class="flex-center flex-column px-3 py-2">
   399                        <div class="flex-center pb-1 pt-1 lh1">
   400                          <span data-tmpl="buyPlacementCount" class="demi text-buycolor fs18 me-1"></span>
   401                          <span class="fs16">buy placements</span>
   402                        </div>
   403                        <div class="flex-center pt-1">
   404                          <span data-tmpl="sellPlacementCount" class="demi text-sellcolor fs18 me-1"></span>
   405                          <span class="fs16">sell placements</span>
   406                        </div>
   407                      </div>
   408                      <div data-tmpl="placementsChart" class="flex-grow-1 border-start position-relative"></div>
   409                    </div>
   410                    <div class="py-1 px-3 d-flex justify-content-start grey border-top">
   411                      <span data-tmpl="removeBttn" class="pointer hoverbg flex-center">
   412                        <span class="ico-cross fs11 me-1"></span>
   413                        delete this bot
   414                      </span>
   415                    </div>
   416                  </div>
   417  
   418                  {{- /* NO FIAT RATES */ -}}
   419                  <div data-tmpl="noFiatDisplay" class="flex-center flex-column p-3 mt-2 border-top d-hide">
   420                    <div class="flex-center">
   421                      <span class="text-warning fs28 demi me-2">!</span>
   422                      <span class="fs22">Missing fiat exchange rates</span>
   423                    </div>
   424                    <div class="mt-25">
   425                      Enable external fiat rate sources in
   426                      <a href="/settings">settings</a>
   427                    </div>
   428                  </div>
   429  
   430                  {{- /* ALLOCATE AND START */ -}}
   431                  <div data-tmpl="allocationDialog"
   432                      class="fill-abs z10 section-bg flex-stretch-column d-hide px-3 mt-2 border-top">
   433  
   434                    {{- /* FUNDING STATUS DEPENDENT MESSAGING AND START BUTTON */ -}}
   435                    <div class="d-flex align-items-stretch border-bottom">
   436                      <div class="py-3">
   437                        <div data-tmpl="fundedAndBalancedBox" class="fs17 text-justify">
   438                          <span class="ico-rocket text-buycolor fs20"></span>
   439                          You have all the funding to run your program immediately.
   440                          <span data-tmpl="hasTransferable">
   441                            You also have some flexibility to determine where funds are sourced.
   442                          </span>
   443                        </div>
   444  
   445                        <div data-tmpl="fundedAndNotBalancedBox" class="fs17 text-justify">
   446                          You have enough funding, but it's not all in the right place.
   447                          Luckily, you have withdrawals and deposits enabled, so the problem
   448                          could resolve itself. Should we start in this unbalanced condition?
   449                        </div>
   450  
   451                        <div data-tmpl="starvedBox" class="fs17 text-justify">
   452                          You do not appear to have the funding to satisfy your program
   453                          configuration. If you'd like, we can still start in this starved
   454                          condition, but the bot will probably not perform as intended.
   455                        </div>
   456  
   457                        <div data-tmpl="existingOrdersBox" class="d-hide fs17 text-justify mt-3">
   458                          <span class="ico-info text-sellcolor fs20"></span>
   459                          You have existing orders on this market. These will be cancelled
   460                          when you start the bot.
   461                        </div>
   462                      </div>
   463  
   464                      <div class="p-3 ps-4 d-flex flex-column justify-content-between align-items-end">
   465                        <button data-tmpl="startBttn" class="ico-arrowright fs35 p-3 go"></button>
   466                        <div data-tmpl="goBackFromAllocation"
   467                        class="d-flex align-items-center justify-content-start py-2 hoverbg pointer text-nowrap">
   468                          <span class="ico-wide-headed-left-arrow me-1 mt-1"></span>
   469                          <span>go back</span>
   470                        </div>
   471                      </div>
   472                    </div>
   473  
   474                    <div data-tmpl="errMsg" class="py-2 px-3 mb-2 border-bottom flex-center text-warning d-hide"></div>
   475  
   476                    {{- /* PROPOSED ALLOCATIONS AND ADJUSTMENTS */ -}}
   477                    <div class="allocation-grid pt-2 lh1">
   478                      {{- /* CEX AND DEX LOGO COLUMN HEADERS */ -}}
   479                      <div class="flex-center pe-2 pb-2 second">
   480                        <img class="small-icon" data-cex-logo data-cex-show>
   481                      </div>
   482                      <div class="flex-center ps-2 pb-2 border-start">
   483                        <div class="d-inline-block">
   484                          <img class="logo-full small">
   485                        </div>
   486                      </div>
   487  
   488                      {{- /* PROPOSED BASE ALLOCATIONS */ -}}
   489                      <div class="flex-stretch-column py-2 border-top">
   490                        <div class="d-flex align-items-center">
   491                          <img class="mini-icon me-1" data-base-logo>
   492                          <div class="fs22" data-base-name></div>
   493                        </div>
   494                        <div class="flex-grow-1 pt-2 pe-4">
   495                          <div data-tmpl="baseAllocSlider" class="mini-slider small col-16"></div>
   496                        </div>
   497                      </div>
   498                      <div class="flex-stretch-column align-items-end pe-2 border-top py-2">
   499                        <div class="d-flex align-items-end justify-content-end" data-cex-only>
   500                          <span data-tmpl="proposedCexBaseAlloc" class="fs20"></span>
   501                          <span class="fs17 grey ms-1" data-base-ticker></span>
   502                        </div>
   503                        <div class="d-flex align-items-center justify-content-end grey pt-1" data-cex-only>
   504                          <span data-tmpl="proposedCexBaseAllocUSD" class="fs18"></span>
   505                          <span class="fs14 ms-1">USD</span>
   506                        </div>
   507                      </div>
   508                      <div class="third flex-stretch-column align-items-end ps-2 py-2 border-top border-start">
   509                        <div class="d-flex align-items-end justify-content-end">
   510                          <span data-tmpl="proposedDexBaseAlloc" class="fs20"></span>
   511                          <span class="fs17 grey ms-1" data-base-ticker></span>
   512                        </div>
   513                        <div class="d-flex align-items-center justify-content-end grey pt-1">
   514                          <span data-tmpl="proposedDexBaseAllocUSD" class="fs18"></span>
   515                          <span class="fs14 ms-1">USD</span>
   516                        </div>
   517                      </div>
   518  
   519                      {{- /* PROPOSED QUOTE ALLOCATIONS */ -}}
   520                      <div class="flex-stretch-column py-2 border-top">
   521                        <div class="d-flex align-items-center">
   522                          <img class="mini-icon me-1" data-quote-logo>
   523                          <div class="fs22" data-quote-name></div>
   524                        </div>
   525                        <div class="flex-grow-1 pt-2 pe-4">
   526                          <div data-tmpl="quoteAllocSlider" class="mini-slider small col-16"></div>
   527                        </div>
   528                      </div>
   529                      <div class="flex-stretch-column align-items-end pe-2 py-2 border-top">
   530                        <div class="d-flex align-items-end justify-content-end" data-cex-only>
   531                          <span data-tmpl="proposedCexQuoteAlloc" class="fs20"></span>
   532                          <span class="fs17 grey ms-1" data-quote-ticker></span>
   533                        </div>
   534                        <div class="d-flex align-items-center justify-content-end grey pt-1" data-cex-only>
   535                          <span data-tmpl="proposedCexQuoteAllocUSD" class="fs18"></span>
   536                          <span class="fs14 ms-1">USD</span>
   537                        </div>
   538                      </div>
   539                      <div class="third flex-stretch-column align-items-end ps-2 py-2 border-top border-start">
   540                        <div class="d-flex align-items-end justify-content-end">
   541                          <span data-tmpl="proposedDexQuoteAlloc" class="fs20"></span>
   542                          <span class="fs17 grey ms-1" data-quote-ticker></span>
   543                        </div>
   544                        <div class="d-flex align-items-center justify-content-end grey pt-1">
   545                          <span data-tmpl="proposedDexQuoteAllocUSD" class="fs18"></span>
   546                          <span class="fs14 ms-1">USD</span>
   547                        </div>
   548                      </div>
   549  
   550                      {{- /* BASE TOKEN FEE ALLOCATIONS */ -}}
   551                      <div class="d-flex flex-column align-items-start py-2 border-top" data-base-token-fees>
   552                        <div class="d-flex align-items-center justify-content-start">
   553                          <img class="mini-icon me-1" data-base-fee-logo>
   554                          <div class="fs22" data-base-fee-name></div>
   555                        </div>
   556                      </div>
   557                      <div class="border-top" data-base-token-fees></div>
   558                      <div class="third flex-stretch-column align-items-end ps-2 py-2 border-top border-start" data-base-token-fees>
   559                        <div class="d-flex align-items-end justify-content-end">
   560                          <span data-tmpl="proposedDexBaseFeeAlloc" class="fs20"></span>
   561                          <span class="fs17 grey ms-1" data-base-fee-ticker></span>
   562                        </div>
   563                        <div class="d-flex align-items-center justify-content-end grey pt-1">
   564                          <span data-tmpl="proposedDexBaseFeeAllocUSD" class="fs18"></span>
   565                          <span class="fs14 ms-1">USD</span>
   566                        </div>
   567                      </div>
   568  
   569                      {{- /* QUOTE TOKEN FEE ALLOCATIONS */ -}}
   570                      <div class="d-flex flex-column align-items-start py-2 border-top" data-quote-token-fees>
   571                        <div class="d-flex align-items-center justify-content-start">
   572                          <img class="mini-icon me-1" data-quote-fee-logo>
   573                          <div class="fs22" data-quote-fee-name></div>
   574                        </div>
   575                      </div>
   576                      <div class="border-top" data-quote-token-fees></div>
   577                      <div class="third flex-stretch-column align-items-end ps-2 py-2 border-top border-start" data-quote-token-fees>
   578                        <div class="d-flex align-items-end justify-content-end">
   579                          <span data-tmpl="proposedDexQuoteFeeAlloc" class="fs20"></span>
   580                          <span class="fs17 grey ms-1" data-quote-fee-ticker></span>
   581                        </div>
   582                        <div class="d-flex align-items-center justify-content-end grey pt-1">
   583                          <span data-tmpl="proposedDexQuoteFeeAllocUSD" class="fs18"></span>
   584                          <span class="fs14 ms-1">USD</span>
   585                        </div>
   586                      </div>
   587                    </div>
   588                    <div class="d-flex justify-content-end align-items-end py-2 border-top lh1">
   589                      <span class="grey me-1">~</span>
   590                      <span data-tmpl="allocUSD" class="fs20"></span>
   591                      <span class="fs16 grey ms-1">USD</span>
   592                      <span class="ms-1">total</span>
   593                    </div>
   594                  </div>
   595                </div>
   596              </section>
   597            </div>
   598          </div>
   599        </div>
   600      </div>
   601    </div>
   602  
   603    <div class="flex-center align-items-stretch py-3">
   604      <button type="button" class="medium px-4" id="archivedLogsBtn">[[[previous_run_logs]]]</button>
   605    </div>
   606      
   607  
   608    {{- /* FORMS */ -}}
   609    <div id="forms" class="d-hide">
   610      {{template "orderOptionTemplates"}}
   611  
   612      <form class="position-relative mw-425 d-hide" id="cexConfigForm" autocomplete="off">
   613        {{template "cexConfigForm"}}
   614      </form>
   615  
   616      <form class="position-relative d-hide" id="orderReportForm" autocomplete="off">
   617        {{template "orderReportForm"}}
   618      </form>
   619  
   620      <form class="position-relative mw-425 d-hide" id="confirmRemoveForm" autocomplete="off">
   621        <div class="form-closer"><span class="ico-cross"></span></div>
   622        <header>[[[delete_bot]]]</header>
   623        <div id="confirmRemoveCfgMsg"></div>
   624        <button id="confirmRemoveConfigBttn" type="button" class="feature mt-2 mx-2">Confirm</button>
   625        <div id="removeCfgErr" class="fs15 text-center d-hide text-danger text-break"></div>
   626      </form>
   627    </div>  {{- /* END FORMS */ -}}
   628  </div>
   629  {{template "bottom"}}
   630  {{end}}