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

     1  {{define "wallets"}}
     2  {{template "top" .}}
     3  <div id="main" data-handler="wallets" class="walletspage flex-grow-1 position-relative">
     4    <span class="me-2 connection ico-connection d-hide peers-table-icon" id="connectedIconTmpl"></span>
     5    <span class="me-2 text-danger ico-disconnected d-hide peers-table-icon" id="disconnectedIconTmpl"></span>
     6    <span class="me-2 text-danger ico-cross d-hide pointer peers-table-icon" id="removeIconTmpl"></span>
     7    <div id="content" class="fill-abs d-flex">
     8      {{- /* ASSET SELECT */ -}}
     9      <section id="assetSelect" class="w-auto d-flex align-items-stretch overflow-y-hidden hidden-overflow invisible">
    10        <div id="iconSelectTmpl" class="icon-select d-flex align-items-stretch p-2 border-bottom">
    11          <div class="flex-center">
    12            <div class="position-relative overflow-visible">
    13              <img data-tmpl="img">
    14              <img data-tmpl="parentImg" class="d-hide">
    15            </div>
    16          </div>
    17          <div class="d-none d-md-flex flex-column justify-content-around ps-3 lh1">
    18            <span class="fs17 demi text-nowrap" data-tmpl="name"></span>
    19            <span data-tmpl="balanceBox" class="d-flex align-items-end d-hide">
    20              <span data-tmpl="balance"></span>
    21              <span class="fs14 grey ms-1" data-tmpl="unit"></span>
    22            </span>
    23            <span data-tmpl="fiatBox" class="fs14 grey d-hide">
    24              <span data-tmpl="fiat"></span>
    25              <span>USD</span>
    26            </span>
    27            <span class="fs15 lh1" data-tmpl="noWallet">[[[Create a Wallet]]]</span>
    28          </div>
    29        </div>
    30      </section>
    31  
    32      <div class="flex-grow-1 position-relative">
    33        <div class="scrollsmall fill-abs d-flex flex-wrap align-items-stretch">
    34          {{- /* WALLET DETAILS */ -}}
    35          <div class="position-relative col-24 col-xl-12 col-xxl-9 flex-stretch-column invisible" id="walletDetailsBox">
    36            <div class="column flex-stretch-column">
    37            <section> <!-- TODO: Indent this section when there's no other UI work going on -->
    38              <div class="d-flex justify-content-between align-items-center p-3">
    39                <div class="flex-center lh1">
    40                  <img id="assetLogo" class="large-icon">
    41                  <div class="ms-2 demi lh1" id="assetName" data-asset-name="1"></div>
    42                </div>
    43                <div id="balanceBox" class="d-flex flex-column align-items-end lh1">
    44                  <div>
    45                    <span id="balance" class="fs28"></span>
    46                    <span id="balanceUnit" class="fs20 grey pb-1"></span>
    47                  </div>
    48                  <div id="fiatBalanceBox" class="mt-1 grey fs15 d-flex justify-content-end align-items-center">
    49                    ~ <span id="fiatBalance" class="me-1"></span> USD
    50                  </div>
    51                </div>
    52                <button id="createWallet" class="large feature">[[[create_a_x_wallet]]]</button>
    53              </div>
    54              <div id="tokenInfoBox" class="d-hide d-flex flex-column align-items-center border-top border-bottom mb-3 p-3 fs18">
    55                <div class="flex-center">
    56                  <span>[[[Token on]]]</span>
    57                  <img id="tokenParentLogo" class="ms-1">
    58                  <span id="tokenParentName"></span>
    59                </div>
    60                <div id="contractAddress" class="fs14 mt-2"></div>
    61              </div>
    62  
    63              <div class="flex-stretch-column flex-md-row" id="walletDetails">
    64                <div class="flex-stretch-column col-sm-24 col-md-12 pt-3" id="balanceBreakdownBox">
    65                  <div class="px-2">
    66                    <table id="balanceTable" class="nopadding w-100">
    67                      <tbody id="balanceDetailBox">
    68                        <tr id="balanceDetailRow">
    69                          <td data-tmpl="category" class="grey lh-1">
    70                          <span data-tmpl="name"></span>
    71                          <small data-tmpl="tooltipMsg" data-tooltip="" class="ico-info ms-1 d-hide"></small>
    72                          </td>
    73                          <td data-tmpl="balance" class="mono text-end lh-1"></td>
    74                        </tr>
    75                      </tbody>
    76                    </table>
    77                  </div>
    78                  <div id="sendReceive" class="flex-grow-1 d-flex flex-column justify-content-end align-items-stretch fs22 mt-2">
    79                    <div class="d-flex d-grid justify-content-stretch gap-2 p-2">
    80                      <button id="receive" class="flex-grow-1 me-1" type="button">
    81                        <small class="ico-qrcode me-1"></small>
    82                        [[[Receive]]]
    83                      </button>
    84                      <button id="send" class="feature flex-grow-1 ms-1" type="button">
    85                        <small class="ico-send me-1"></small>
    86                        [[[Send]]]
    87                      </button>
    88                    </div>
    89                  </div>
    90                </div>
    91  
    92                <div class="d-flex justify-content-start align-items-stretch flex-column border-start col-sm-24 col-md-12 p-2" id="walletInfo">
    93                  <table id="walletInfoTable" class="w-100">
    94                    <tbody>
    95                      <tr id="statusLocked">
    96                        <td class="grey">[[[Status]]]</td>
    97                        <td><span class="ico-locked fs14 me-2"></span class="demi">[[[:title:locked]]]</td>
    98                      </tr>
    99                      <tr id="statusReady">
   100                        <td class="grey">[[[Status]]]</td>
   101                        <td class="demi"><span class="ico-unlocked fs14 me-2"></span>[[[:title:ready]]]</td>
   102                      </tr>
   103                      <tr id="statusOff">
   104                        <td class="grey">[[[Status]]]</td>
   105                        <td><span class="ico-sleeping fs14 me-2"></span class="demi">[[[:title:off]]]</td>
   106                      </tr>
   107                      <tr id="statusDisabled">
   108                        <td class="grey">[[[Status]]]</td>
   109                        <td><span class="ico-cross text-danger fs14 me-2"></span class="demi">[[[Disabled]]]</td>
   110                      </tr>
   111                      <tr id="unlockBttnBox">
   112                        <td colspan="2" class="pb-2">
   113                          <button id="unlockBttn" class="small">[[[Unlock]]]</button>
   114                        </td>
   115                      </tr>
   116                      <tr id="lockBttnBox">
   117                        <td colspan="2" class="pb-2">
   118                          <button id="lockBttn" class="small">[[[Lock]]]</button>
   119                        </td>
   120                      </tr>
   121                      <tr id="connectBttnBox">
   122                        <td colspan="2" class="pb-2">
   123                          <button id="connectBttn" class="fs14 p-1 hoverbg">[[[Connect]]]</button>
   124                        </td>
   125                      </tr>
   126                      <tr>
   127                        <td class="grey text-nowrap">[[[Wallet Type]]]</td>
   128                        <td id="walletType" class="demi"></td>
   129                      </tr>
   130                      <tr id="peerCountBox">
   131                        <td class="grey text-nowrap">[[[Peer Count]]]</td>
   132                        <td id="peerCount" class="demi"></td>
   133                      </tr>
   134                      <tr id="syncProgressBox">
   135                        <td class="grey text-nowrap">[[[Block Sync]]]</td>
   136                        <td id="syncProgress" class="demi"></td>
   137                      </tr>
   138                      <tr id="txSyncBox">
   139                        <td class="grey text-nowrap">[[[Balance Discovery]]]</td>
   140                        <td id="txProgress" class="demi text-end"></td>
   141                        <td id="txFindingAddrs" class="demi">
   142                          <div class="d-flex align-items-center justify-content-end">
   143                            <div class="fs10 ico-spinner spinner me-1"></div>
   144                            <span>[[[Finding Addresses]]]</span>
   145                          </div>
   146                        </td>
   147                      </tr>
   148                    </tbody>
   149                  </table>
   150                  <div class="flex-grow-1 d-flex flex-column justify-content-end align-items-end">
   151                    <button id="reconfigureBttn" class="mt-2">
   152                      <span class="ico-settings"></span>
   153                      [[[Settings]]]
   154                    </button>
   155                  </div>
   156                  <div id="needsProviderBox" class="flex-stretch-column border-top mt-2">
   157                    <div class="mt-2 text-justify">[[[add_provider_tooltip]]]</div>
   158                    <button id="needsProviderBttn" class="flex-center mt-2 lh1 fs17">
   159                      <span class="ico-disconnected text-warning demi me-2"></span>
   160                      <span>[[[add_custom_rpc_provider]]]</span>
   161                    </button>
   162                  </div>
   163                </div>
   164              </div>
   165            </section>
   166  
   167              {{- /* FEE INFO */ -}}
   168              <section id="feeStateBox" class="flex-stretch-column d-hide">
   169                <div class="d-flex align-items-stretch justify-content-around">
   170                  <div class="d-flex flex-column align-items-center py-3">
   171                    <span class="grey demi">Network Fee Rate</span>
   172                    <span id="feeStateNetRate" data-conversion-value>
   173                      <span class="fs20" data-value></span>
   174                      <span class="fs17 grey">
   175                        <span data-unit-box><span data-unit></span></span>
   176                        /
   177                        <span data-denom></span>
   178                      </span>
   179                    </span>
   180                  </div>
   181                  <div class="d-flex flex-column align-items-center py-3">
   182                    <span class="grey demi">Exchange Rate</span>
   183                    <span>
   184                      <span id="feeStateXcRate" class="fs20"></span>
   185                      <span class="fs17 grey">USD/<span data-ticker></span></span>
   186                    </span>
   187                  </div>
   188                </div>
   189                <div class="d-flex align-items-stretch justify-content-around border-top">
   190                  <div class="d-flex flex-column align-items-center py-3">
   191                    <span class="grey demi">Send Fees</span>
   192                    <span id="feeStateSendFees" data-conversion-value>
   193                      <span class="fs20" data-value></span>
   194                      <span class="grey fs17">
   195                        <span data-unit-box><span data-unit></span></span>
   196                        and up
   197                      </span>
   198                    </span>
   199                    <span class="grey fs15">
   200                      ~ <span id="feeStateSendFiat"></span>
   201                      <span>USD</span>
   202                    </span>
   203                  </div>
   204                  <div class="d-flex flex-column align-items-center py-3">
   205                    <span class="grey demi">Sell Fees</span>
   206                    <span id="feeStateSwapFees" data-conversion-value>
   207                      <span class="fs20" data-value></span>
   208                      <span class="grey fs17">
   209                        <span data-unit-box><span data-unit></span></span>
   210                        and up
   211                      </span>
   212                    </span>
   213                    <span class="fs15 grey">
   214                      ~ <span id="feeStateSwapFiat"></span>
   215                      <span>USD</span>
   216                    </span>
   217                  </div>
   218                  <div class="d-flex flex-column align-items-center py-3">
   219                    <span class="grey demi">Buy Fees</span>
   220                    <span id="feeStateRedeemFees" data-conversion-value>
   221                      <span class="fs20" data-value></span>
   222                      <span class="grey fs17">
   223                        <span data-unit-box><span data-unit></span></span>
   224                        and up
   225                      </span>
   226                    </span>
   227                    <span class="fs15 grey">
   228                      ~ <span id="feeStateRedeemFiat"></span>
   229                      <span>USD</span>
   230                    </span>
   231                  </div>
   232                </div>
   233              </section>
   234  
   235              {{- /* STAKING */ -}}
   236              <section id="stakingBox" class="position-relative d-flex align-items-stretch border">
   237                <div class="flex-stretch-column flex-grow-1">
   238                  <div class="d-flex align-items-center justify-content-start border-bottom px-3 py-2">
   239                    <span class="ico-ticket me-2 fs20"></span>
   240                    <span class="fs24">[[[Staking]]]</span>
   241                  </div>
   242                  <div id="stakingSummary" class="d-flex align-items-stretch flex-grow-1">
   243                    <div class="flex-stretch-column justify-content-center fs14 flex-grow-1 p-2">
   244                      <div class="d-flex justify-content-between align-items-stretch">
   245                        <div class="flex-center grey">[[[Active tickets]]]</div>
   246                        <div id="stakingTicketCount" class="flex-center demi"></div>
   247                      </div>
   248                      <div id="immatureTicketCountBox" class="d-flex justify-content-between align-items-stretch">
   249                        <div class="flex-center grey">[[[Immature tickets]]]</div>
   250                        <div id="immatureTicketCount" class="flex-center demi"></div>
   251                      </div>
   252                      <div id="queuedTicketCountBox" class="d-flex justify-content-between align-items-stretch">
   253                        <div class="flex-center grey">[[[Queued tickets]]]</div>
   254                        <div id="queuedTicketCount" class="flex-center demi"></div>
   255                      </div>
   256                      <div class="d-flex justify-content-between align-items-stretch">
   257                        <div class="flex-center grey">[[[Tickets bought]]]</div>
   258                        <div id="totalTicketCount" class="flex-center demi"></div>
   259                      </div>
   260                      <div class="d-flex justify-content-between align-items-stretch">
   261                        <div class="flex-center grey">[[[Total rewards]]]</div>
   262                        <div id="totalTicketRewards" class="flex-center demi"></div>
   263                      </div>
   264                      <div class="d-flex justify-content-between align-items-stretch">
   265                        <div class="flex-center grey">[[[Votes cast]]]</div>
   266                        <div id="totalTicketVotes" class="flex-center demi"></div>
   267                      </div>
   268                      <div id="vspDisplayBox" class="d-flex justify-content-between align-items-stretch">
   269                        <div class="flex-center grey">[[[VSP]]]</div>
   270                        <div id="vspDisplay" class="flex-center demi pointer hoverbg">
   271                          <span id="vspEditIcon" class="ico-edit me-2"></span>
   272                          <span id="vspURL"></span>
   273                        </div>
   274                      </div>
   275                      <div id="pickVSP" class="mt-3 flex-stretch-column justify-content-end">
   276                        <button id="showVSPs">[[[select_vsp_from_list]]]</button>
   277                      </div>
   278                    </div>
   279                    <div id="setVotes" class="flex-center p-3 flex-column border-start hoverbg pointer">
   280                      <div class="flex-center fs18">
   281                        <span class="fs22 ico-check"></span>
   282                        <span class="ms-2 fs18">[[[Set Votes]]]</span>
   283                      </div>
   284                      <hr class="dashed my-1 w-75">
   285                      <div class="flex-center flex-column fs14">
   286                        <span><span id="stakingAgendaCount"></span> [[[agendas]]]</span>
   287                        <span><span id="stakingTspendCount"></span> [[[treasury spends]]]</span>
   288                      </div>
   289                    </div>
   290                  </div>
   291                  <div id="stakingErr" class="text-center p-2 text-danger"></div>
   292                  <div id="stakingRpcSpvMsg" class="flex-center py-1 px-2">
   293                    <small class="ico-info me-2"></small>[[[staking_unavailable_for_rpc]]]
   294                  </div>
   295                  {{- /* PURCHASE TICKETS */ -}}
   296                  <div id="purchaseTicketsBox" class="w-100 d-flex align-items-stretch justify-content-stretch border-top p-2">
   297                    <button id="purchaseTicketsBttn" class="feature flex-grow-1 me-2">
   298                      <span><span class="ico-ticket me-1"></span> [[[Purchase Tickets]]]</span>
   299                    </button>
   300                    <button id="ticketHistory" class="flex-grow-1 ">
   301                      <span><span class="ico-textfile me-1"></span> [[[Tickets]]]</span>
   302                    </button>
   303                  </div>
   304                </div>
   305                <div id="ticketPriceBox" class="flex-stretch-column border-start">
   306                  <div class="flex-grow-1 flex-center flex-column p-3 border-bottom">
   307                    <span class="fs14 demi lh1 pb-1">[[[Ticket Price]]]</span>
   308                    <span class="d-flex align-items-end">
   309                      <span class="fs18" id="ticketPrice"></span>
   310                    </span>
   311                  </div>
   312                  <div class="flex-grow-1 flex-center flex-column p-3">
   313                    <span class="fs14 demi lh1 pb-1">[[[Vote Reward]]]</span>
   314                    <span class="d-flex align-items-end">
   315                      <span class="fs18" id="votingSubsidy"></span>
   316                    </span>
   317                  </div>
   318                </div>
   319                <div id="purchaseTicketsErrBox" class="fill-abs flex-stretch-column d-hide pb-3">
   320                  <div id="purchaseTicketsErrCloser" class="p-2 hoverbg pointer"><span class="ico-cross fs20"></span></div>
   321                  <div id="purchaseTicketsErr" class="p-2 flex-grow-1 flex-center text-danger"></div>
   322                </div>
   323              </section>
   324              <section id="ticketsDisabled" class="w-100 p-2 flex-center fs14 grey border-bottom">
   325                <span>[[[staking_disabled]]]</span>
   326              </section>
   327              {{- /* END STAKING */ -}}
   328  
   329              {{- /* MIXING */ -}}
   330              <section id="mixingBox" class="position-relative d-flex align-items-stretch flex-column border">
   331                <div class="w-100 d-flex align-items-stretch">
   332                  <div class="p-2 flex-center fs35 ico-secretagent border-end"></div>
   333                  <div class="flex-center flex-grow-1">
   334                    <div id="mixerOn" class="flex-center fs20 d-hide">
   335                      <span id="onIndicator" class="on-indicator on me-2"></span>
   336                      <span class="">[[[Privacy active]]]</span>
   337                    </div>
   338                    <div id="mixerOff" class="flex-center fs20">
   339                      <span id="onIndicator" class="on-indicator off me-2"></span>
   340                      <span class="">[[[Privacy off]]]</span>
   341                    </div>
   342                  </div>
   343                  <div id="privacyInfoBttn" class="flex-center p-3 fs24 ico-info border-start hoverbg pointer"></div>
   344                  <div class="p-2 border-start flex-center">
   345                    <div id="toggleMixer" class="anitoggle big"></div>
   346                  </div>
   347                </div>
   348                <div id="mixerLoading" class="fill-abs flex-center bodybg">
   349                  <span>
   350                    <span class="ico-spinner spinner me-2"></span>
   351                    <span>[[[loading privacy status]]]</span>
   352                  </span>
   353                </div>
   354                <div id="mixingErr" class="flex-center p-2 text-danger border-top d-hide"></div>
   355              </section>{{- /* END MIXING */ -}}
   356            </div>
   357          </div>{{/* END WALLET DETAILS */}}
   358  
   359          {{- /* SECOND COLUMN */ -}}
   360          <div id="secondColumn" class="position-relative col-24 col-xl-12 col-xxl-15 flex-stretch-column stylish-overflow-lg">
   361            <div class="column flex-stretch-column">
   362              {{- /* TRANSACTION HISTORY */ -}}
   363              <section id="txHistoryBox" class="flex-stretch-column">
   364                <h4 class="m-3">[[[asset_name tx_history]]]</h4>
   365                <span class="mx-3" id="hideMixTxs">
   366                  <input type="checkbox" id="hideMixTxsCheckbox" class="form-check-input">
   367                  <label for="hideMixTxsCheckbox" class="form-check-label">[[[Hide Mixing Transactions]]]</label>
   368                </span>
   369                <div id="txHistoryTableContainer" class="flex-stretch-column pb-3">
   370                  <table id="txHistoryTable" class="row-border border-top">
   371                    <thead>
   372                      <tr>
   373                        <th>[[[Type]]]</th>
   374                        <th class="d-none d-sm-table-cell">[[[ID]]]</th>
   375                        <th>[[[Age]]]</th>
   376                        <th class="d-none d-md-table-cell d-xl-none d-xxl-table-cell">[[[Fees]]]</th>
   377                        <th class="text-end">[[[Amount]]]</th>
   378                      </tr>
   379                    </thead>
   380                    <tbody id="txHistoryTableBody" class="fs15">
   381                      <tr id="txHistoryRowTmpl" class="pointer">
   382                        <td>
   383                          <span data-tmpl="type"></span>
   384                        </td>
   385                        <td class="d-none d-sm-table-cell">
   386                          <span data-tmpl="id"></span>
   387                        </td>
   388                        <td>
   389                          <span data-tmpl="age"></span>
   390                          <div data-tmpl="pending" class="d-hide"><span>[[[Mempool]]]</span><div class="px-2 ico-spinner spinner fs-14 d-inline-block"></div></div>
   391                        </td>
   392                        <td class="d-none d-md-table-cell d-xl-none d-xxl-table-cell">
   393                          <span data-tmpl="fees"></span>
   394                        </td>
   395                        <td class="text-end">
   396                          <span data-tmpl="amount"></span>
   397                        </td>
   398                      </tr>
   399                      <tr id="txHistoryDateRowTmpl">
   400                        <td colspan="5" class="text-center grey">
   401                          <span class="fs15 demi" data-tmpl="date"></span>
   402                        </td>
   403                      </tr>
   404                    </tbody>
   405                  </table>
   406                  <span id="earlierTxs" class="mx-2">[[[load_earlier_transactions]]]</span>
   407                </div>
   408                <div class="flex-center p-2 mb-3 mx-3 fs18 border rounded3 d-hide" id="noTxHistory">
   409                  [[[no_tx_history]]]
   410                </div>
   411              </section>
   412  
   413              {{/* MARKETS */}}
   414              <section id="marketsOverviewBox">
   415                <h4 class="m-3">[[[asset_name Markets]]]</h4>
   416                <div>
   417                  <table class="row-border row-hover border-top">
   418                    <thead>
   419                      <tr>
   420                        <th>[[[Market]]]</th>
   421                        <th class="d-none d-md-table-cell d-lg-none d-xxl-table-cell">[[[Host]]]</th>
   422                        <th>[[[:title:price]]]</th>
   423                        <th class="text-end">[[[:title:volume]]]</th>
   424                      </tr>
   425                    </thead>
   426                    <tbody id="availableMarkets">
   427                      <tr id="marketRow" class="pointer">
   428                        <td>
   429                          <img data-tmpl="baseLogo" class="micro-icon me-1">
   430                          <img data-tmpl="quoteLogo" class="micro-icon me-1">
   431                          <span class="demi">
   432                            <span data-tmpl="baseSymbol"></span>-<span data-tmpl="quoteSymbol"></span>
   433                          </span>
   434                        </td>
   435                        <td class="d-none d-md-table-cell d-lg-none d-xxl-table-cell"><div data-tmpl="host" class="short-host text-nowrap overflow-hidden"></div></td>
   436                        <td data-tmpl="priceBox">
   437                          <span data-tmpl="price"></span>
   438                          <span class="fs13 grey">
   439                            <sup data-tmpl="priceQuoteUnit" class></sup>/<sub data-tmpl="priceBaseUnit"></sub>
   440                          </span>
   441                        </td>
   442                        <td data-tmpl="volumeBox" class="text-end">
   443                          <span data-tmpl="volume"></span>
   444                          <span data-tmpl="volumeUnit" class="fs15 grey"></span>
   445                        </td>
   446                      </tr>
   447                    </tbody>
   448                  </table>
   449                </div>
   450              </section>{{/* END MARKETS */}}
   451  
   452              {{- /* RECENT ORDERS */ -}}
   453              <section id="orderActivityBox" class="d-flex flex-column invisible pb-3 border-bottom">
   454                <h4 class="m-3">[[[Recent asset_name Activity]]]</h4>
   455                <div id="orderActivity" class="flex-stretch-column">
   456                  <table id="ordersTable" class="row-border border-top">
   457                    <thead>
   458                      <tr>
   459                        <th>[[[Trade]]]</th>
   460                        <th>[[[Status]]]</th>
   461                        <th class="d-none d-md-table-cell">[[[Filled]]]</th>
   462                        <th>[[[Age]]]</th>
   463                        <th></th> {{/* Link */}}
   464                      </tr>
   465                    </thead>
   466                    <tbody id="recentOrders">
   467                      <tr id="recentOrderTmpl">
   468                        <td data-tmpl="trade" class="text-nowrap">
   469                          <span data-tmpl="fromQty"></span>
   470                          <img data-tmpl="fromLogo" class="micro-icon mx-1">
   471                          <span data-tmpl="fromSymbol" class="d-none d-md-inline"></span>
   472                          <span>&rarr;</span>
   473                          <span data-tmpl="toQty"></span>
   474                          <img data-tmpl="toLogo" class="micro-icon mx-1">
   475                          <span data-tmpl="toSymbol" class="d-none d-md-inline"></span>
   476                        </td>
   477                        <td data-tmpl="status"></td>
   478                        <td data-tmpl="filled" class="d-none d-md-table-cell"></td>
   479                        <td data-tmpl="age" class="text-nowrap"></td>
   480                        <td><a class="ico-open fs14 pointer plainlink" data-tmpl="link"></a></td>
   481                      </tr>
   482                    </tbody>
   483                  </table>
   484                </div>
   485                <div class="flex-center p-2 mb-3 mx-3 b-3 fs18 border rounded3 d-hide" id="noActivity">
   486                  [[[No Recent Activity]]]
   487                </div>
   488              </section>
   489  
   490              <div id="txHistoryNotAvailable" class="grey p-3 text-center">
   491                Transaction history not available for this wallet
   492              </div>
   493            </div>
   494          </div>{{/* END RECENT ORDERS */}}
   495        </div>
   496      </div>
   497    </div>{{/* END MAIN CONTENT */}}
   498  
   499    {{- /* POP-UP FORMS */ -}}
   500    <div id="forms" class="d-hide">
   501  
   502      <form id="checkmarkForm" class="plain">
   503        <div id="checkmarkBox" class="flex-center">
   504          <span class="ico-check" id="checkmark"></span>
   505        </div>
   506        <div id="successMessage" class="fs22"></div>
   507      </form>
   508  
   509      {{- /* NEW WALLET */ -}}
   510      <form class="position-relative d-hide" id="newWalletForm" autocomplete="off">
   511        {{template "newWalletForm"}}
   512      </form>
   513  
   514      {{- /* SEND */ -}}
   515      <form class="d-hide" id="sendForm" autocomplete="off">
   516        <div class="form-closer"><span class="ico-cross"></span></div>
   517        <header>
   518          [[[Send]]]
   519          <img id="sendLogo" class="mini-icon mx-2">
   520          <span id="sendName"></span>
   521        </header>
   522        <div class="flex-center d-hide fs18 sans" id="sendTokenMsgBox">
   523          <span>[[[Token on]]]</span>
   524          <img id="sendTokenParentLogo" class="ms-1 micro-icon">
   525          <span id="sendTokenParentName"></span>
   526        </div>
   527        <div>
   528          <label for="sendAddr">[[[Address]]]</label>
   529            <input type="text" id="sendAddr" spellcheck="false">
   530        </div>
   531        <div class="d-flex align-items-stretch">
   532          <div class="flex-grow-1 pe-3">
   533            <label for="sendAmt">[[[Amount]]]</label>
   534            <input type="text" id="sendAmt">
   535          </div>
   536          <div class="flex-grow-1 d-flex align-items-center justify-content-end fs15 text-nowrap">
   537            <span class="grey me-1">[[[Balance]]]:</span>
   538            <span class="pointer" id="walletBal"></span>
   539          </div>
   540        </div>
   541        <div class="d-hide grey pt-1">~<span id="sendValue" class="mx-1"></span>USD</div>
   542        <div id="toggleSubtract">
   543            <input type="checkbox" id="subtractCheckBox" class="form-check-input me-2">
   544            <label for="subtractCheckBox" class="form-check-label">[[[subtract_fees_from_amount]]]</label>
   545        </div>
   546        <div id="maxSendDisplay" class="mt-3 border-top">
   547          <div class="d-flex justify-content-between mb-3">
   548            <span data-tooltip="[[[max_estimated_send_tooltip]]]">
   549            [[[max_estimated_send]]]:
   550            <small class="ico-info"></small>
   551            </span>
   552            <span id="maxSend"></span>
   553          </div>
   554          <span class="d-flex d-hide justify-content-end grey fs14">
   555            ~<span id="maxSendFiat" class="mx-1"></span>USD
   556          </span>
   557          <div class="d-flex align-items-center justify-content-between">[[[max_estimated_send_fee]]]: 
   558            <span id="maxSendFee"></span>
   559          </div>
   560          <span class="d-flex d-hide justify-content-end grey fs14">
   561            ~<span id="maxSendFeeFiat" class="mx-1"></span>USD
   562          </span>
   563        </div>
   564        <div class="flex-stretch-column">
   565            <button id="submitSendForm" type="button" class="feature">[[[Send]]]</button>
   566        </div>
   567        <div class="fs15 text-center text-danger text-break" id="sendErr"></div>
   568      </form>
   569  
   570      {{- /* Verify Send */ -}}
   571      <form class="pb-3 d-hide" id="vSendForm">
   572        <div class="form-closer hoverbg"><span class="ico-cross"></span></div>
   573        <header>
   574          [[[confirm]]]
   575          <img id="vSendLogo" class="mini-icon mx-1">
   576          [[[transfer]]]
   577        </header>
   578        <div class="pb-3 border-bottom">
   579          <div class="grey fs18 text-center">[[[sending]]]</div>
   580          <div class="text-center">
   581            <span class="d-hide" id="approxSign">&cong;</span>
   582            <span class="fs22 font-weight-bold" id="vSendDestinationAmt"></span>
   583            <span id="vSendSymbol"></span>
   584          </div>
   585          <div class="text-center">[[[to]]]</div>
   586          <div id="vSendAddr" class="text-center"></div>
   587        </div>
   588        <div id="vSendEstimates" class="d-hide">
   589          <div class="d-flex align-items-center justify-content-between">[[[estimated_fee]]]: 
   590           <span id="vSendFee"></span>
   591          </div>
   592          <span class="d-flex d-hide justify-content-end grey fs14">
   593           ~<span id="vSendFeeFiat" class="mx-1"></span>USD
   594          </span>
   595          <hr class="dashed mt-2">
   596          <div class="d-flex align-items-center justify-content-between">[[[estimated_total_spend]]]: 
   597           <span id="vTotalSend"></span>
   598          </div>
   599          <span class="d-flex d-hide justify-content-end grey fs14">
   600           ~<span id="vTotalSendFiat" class="mx-1"></span>USD
   601          </span>
   602          <div class="d-flex align-items-center justify-content-between">[[[estimated_balance]]]: 
   603           <span id="balanceAfterSend"></span>
   604          </div>
   605          <span class="d-flex d-hide justify-content-end grey fs14">
   606           ~<span id="balanceAfterSendFiat" class="mx-1"></span>USD
   607          </span>
   608        </div>
   609        <div id="txFeeNotAvailable" class="d-hide" data-tooltip="[[[Fee unavailable]]]">[[[txfee_not_available]]]
   610          <span class="ico-info text-danger"></span>
   611        </div>
   612        <div class="flex-center">[[[Authorize the transfer with your app password.]]]</div>
   613        <div class="d-flex align-items-end">
   614          <div class="flex-grow-1">
   615            <label for="vSendPw">[[[Password]]]: </label>
   616            <input type="password" id="vSendPw" autocomplete="off" autofocus>
   617          </div>
   618          <button id="vSend" type="button" class="flex-grow-1 ms-3 feature">[[[confirm]]]</button>
   619        </div>
   620        <div class="fs15 text-center text-danger text-break" id="vSendErr"></div>
   621      </form>
   622  
   623      {{- /* DEPOSIT ADDRESS */ -}}
   624      <form class="mw-425 d-hide" id="deposit">
   625        {{template "depositAddress"}}
   626      </form>
   627  
   628      {{- /* RECONFIGURE WALLET */ -}}
   629      <form class="d-hide" id="reconfigForm" autocomplete="off">
   630        <div class="form-closer"><span class="ico-cross"></span></div>
   631        <header>
   632          [[[Reconfigure]]]
   633          <img id="recfgAssetLogo" class="micro-icon mx-2">
   634          <span id="recfgAssetName"></span>
   635          <span class="ms-2">[[[Wallet]]]</span>
   636        </header>
   637        <div id="reconfigInputs">
   638          {{template "walletConfigTemplates"}}
   639        </div>
   640        {{template "walletCfgGuideTemplate"}}
   641        <div id="showChangePW" class="pointer d-flex align-items-center justify-content-start">
   642          <span id="showIcon" class="ico-plus fs8 ps-1"></span>
   643          <span id="hideIcon" class="ico-minus fs8 ps-1"></span>
   644          <span id="switchPWMsg" class="d-inline-block ps-1 pb-1"></span>
   645        </div>
   646        <div id="changePW">
   647          <div class="fs14 grey">
   648            [[[pw_change_instructions]]]
   649          </div>
   650          <div class="pt-3">
   651            <label for="newPW">[[[New Wallet Password]]]</label>
   652            <input type="password" id="newPW" autocomplete="off">
   653          </div>
   654        </div>
   655  
   656        <div id="showChangeType" class="pointer d-flex align-items-center justify-content-start">
   657          <span id="changeTypeShowIcon" class="ico-plus fs8 ps-1"></span>
   658          <span id="changeTypeHideIcon" class="ico-minus fs8 ps-1 d-hide"></span>
   659          <span id="changeTypeMsg" class="d-inline-block ps-1 pb-1">[[[change the wallet type]]]</span>
   660        </div>
   661        <div id="changeWalletType" class="d-hide">
   662          <select id="changeWalletTypeSelect" class="form-select w-50"></select>
   663          <div class="fs14 grey mb-3">
   664            [[[pw_change_warn]]]
   665          </div>
   666          <hr class="dashed">
   667        </div>
   668        <div class="flex-stretch-column">
   669          <button id="submitReconfig" type="button" class="feature">[[[Submit]]]</button>
   670        </div>
   671        <div class="fs15 text-center d-hide text-danger text-break" id="reconfigErr"></div>
   672        <div class="fs15 d-hide text-danger text-break" id="reconfigSupportMsg"></div>
   673        <div class="fs18 mt-3 border-top" id="otherActionsLabel">[[[other_actions]]]</div>
   674        <div class="d-flex flex-row fs15 pt-1 flex-wrap">
   675          <button id="unapproveTokenAllowance" type="button" class="small mt-2 me-2 ">[[[disallow_token]]]</button>
   676          <button id="managePeers" type="button" class="small mt-2 me-2">[[[manage_peers]]]</button>
   677          <button id="downloadLogs" type="button" class="small mt-2 me-2">[[[wallet_logs]]]</button>
   678          <button id="exportWallet" type="button" class="small mt-2 me-2">[[[export_wallet]]]</button>
   679          <button id="recoverWallet" type="button" class="danger mt-2 small me-2">[[[recover]]]</button>
   680          <button id="rescanWallet" type="button" class="danger mt-2 small  me-2">[[[Rescan]]]</button>
   681          <button id="disableWallet" type="button" class="danger mt-2 small me-2">[[[disable_wallet]]]</button>
   682          <button id="enableWallet" type="button" class="small mt-2 me-2">[[[enable_wallet]]]</button>
   683        </div>
   684      </form>
   685  
   686      {{- /* TOGGLE WALLET STATUS AUTHORIZATION */ -}}
   687      <form class="d-hide" id="toggleWalletStatusConfirm">
   688        {{template "toggleWalletStatusConfirm"}}
   689      </form>
   690  
   691      {{- /* MANAGE PEERS */ -}}
   692      <form id="managePeersForm" class="flex-stretch-column d-hide">
   693        <div class="form-closer hoverbg"><span class="ico-cross"></span></div>
   694        <header>
   695          [[[manage_peers]]]
   696        </header>
   697        <div>
   698          <table id="peersTable" class="row-border">
   699            <thead>
   700              <tr>
   701                <th class="text-nowrap">[[[address]]]</th>
   702                <th class="text-nowrap">[[[source]]]</th>
   703                <th class="text-nowrap">[[[connected]]]</th>
   704                <th class="text-nowrap">[[[Remove]]]</th>
   705              </tr>
   706            </thead>
   707            <tbody id="peersTableBody">
   708              <tr id="peerTableRow">
   709                <td data-tmpl="addr"></td>
   710                <td data-tmpl="source"></td>
   711                <td data-tmpl="connected"></td>
   712                <td data-tmpl="remove"></td>
   713              </tr>
   714            </tbody>
   715          </table>
   716        </div>
   717  
   718        <div class="d-flex justify-content-end">
   719          <input id="addPeerInput" type="text" placeholder="[[[enter_peer_address]]]">
   720          <button id="addPeerSubmit" type="button" class="feature ms-2">[[[add_peer]]]</button>
   721        </div>
   722        <div id="peerSpinner" class="flex-center position-relative d-hide">
   723          <div class="ico-spinner spinner fs15"></div>
   724        </div>
   725        <div class="fs15 text-center d-hide text-danger" id="managePeersErr"></div>
   726      </form>
   727  
   728      {{- /* UNAPPROVE TOKEN VERSIONS TABLE FORM */ -}}
   729      <form class="d-hide" id="unapproveTokenTableForm">
   730        <div class="form-closer hoverbg"><span class="ico-cross"></span></div>
   731        <div class="text-center position-relative fs18 px-5">
   732          [[[unapprove_token_for]]]
   733        </div>
   734        <div id="tokenVersionNone">
   735          [[[no_token_allowances]]]
   736        </div>
   737        <div id="tokenVersionTable" class="px-0">
   738          <table class="row-border">
   739            <thead>
   740              <tr>
   741                <th class="text-nowrap ps-3">[[[version]]]</th>
   742                <th class="text-nowrap">[[[used_by_dex]]]</th>
   743                <th class="text-nowrap pe-3">[[[Remove]]]</th>
   744              </tr>
   745            </thead>
   746            <tbody id="tokenVersionBody">
   747              <tr id="tokenVersionRow">
   748                <td data-tmpl="version" class="ps-3"></td>
   749                <td data-tmpl="usedBy"></td>
   750                <td data-tmpl="remove" class="pe-3"></td>
   751              </tr>
   752            </tbody>
   753          </table>
   754        </div>
   755      </form>
   756  
   757      {{- /* UNAPPROVE SPECIFIC TOKEN VERSION FORM */ -}}
   758      <form class="flex-stretch-column d-hide" id="unapproveTokenForm">
   759        <div class="form-closer hoverbg"><span class="ico-cross"></span></div>
   760        <div class="text-center position-relative">
   761          [[[unapprove_token_version]]]
   762        </div>
   763        <div id="unapproveTokenSubmissionElements">
   764          <div class="fs15 text-start mt-2">
   765            [[[unapprove_token_text]]]
   766          </div>
   767          <div class="flex-stretch-column pt-2">
   768            <button id="unapproveTokenSubmit" type="button" class="feature">[[[Submit]]]</button>
   769          </div>
   770        </div>
   771        <div>
   772          <span id="unapproveTokenTxMsg" class="text-center word-break-all d-hide">[[[token_unapproval_tx_msg]]]</span>
   773          <a target="_blank" class="subtlelink word-break-all" id="unapproveTokenTxID"></a>
   774        </div>
   775        <div class="fs15 text-center d-hide text-danger" id="unapproveTokenErr"></div>
   776      </form>
   777  
   778      {{- /* CONFIRM FORCE FORM */ -}}
   779      <form class="d-hide" id="confirmForce">
   780        <div class="form-closer hoverbg"><span class="ico-cross"></span></div>
   781        <div class="text-center position-relative fs24">
   782          [[[wallet_actively_used]]]
   783        </div>
   784        <div class="fs15 text-left">
   785          [[[confirm_force_message]]]
   786        </div>
   787        <div class="d-flex justify-content-end">
   788          <button id="cancelForce" type="button" class="justify-content-center fs15 danger mx-1">[[[cancel]]]</button>
   789          <button id="confirmForceSubmit" type="button" class="justify-content-center fs15 go mx-2">[[[confirm]]]</button>
   790        </div>
   791        <div class="fs15 text-center d-hide text-danger" id="confirmForceErr"></div>
   792      </form>
   793  
   794      {{- /* RECOVER WALLET AUTHORIZATION */ -}}
   795      <form class="d-hide" id="recoverWalletConfirm">
   796        <div class="form-closer"><span class="ico-cross"></span></div>
   797        <header>
   798          [[[recover_wallet]]]
   799        </header>
   800        <div>
   801          [[[recover_warning]]]
   802        </div>
   803        <div class="flex-stretch-column">
   804          <button id="recoverWalletSubmit" type="button" class="feature">[[[Submit]]]</button>
   805        </div>
   806        <div class="text-center d-hide text-danger" id="recoverWalletErr"></div>
   807      </form>
   808  
   809      {{- /* EXPORT WALLET AUTHORIZATION */ -}}
   810      <form class="d-hide" id="exportWalletAuth">
   811        <div class="form-closer"><span class="ico-cross"></span></div>
   812        <header>
   813          [[[export_wallet]]]
   814        </header>
   815        <div>
   816          [[[pw_for_wallet_seed]]]
   817        </div>
   818        <div id="exportDisclaimer">
   819          [[[export_wallet_disclaimer]]]
   820        </div>
   821        <input type="text" name="username" autocomplete="username" class="d-hide"> <!-- to suppress console warning -->
   822        <div class="text-start">
   823          <label for="exportWalletPW">[[[Password]]]</label>
   824          <input type="password" id="exportWalletPW" autocomplete="current-password">
   825        </div>
   826        <div class="flex-stretch-column">
   827          <button id="exportWalletAuthSubmit" type="button" class="feature">[[[Show Me]]]</button>
   828        </div>
   829        <div class="fs15 text-center d-hide text-danger text-break" id="exportWalletErr"></div>
   830      </form>
   831  
   832      {{- /* RESTORE WALLET INFO */ -}}
   833      <form class="d-hide" id="restoreWalletInfo">
   834        <div class="form-closer hoverbg"><span class="ico-cross"></span></div>
   835        <header>
   836          [[[export_wallet]]]
   837        </header>
   838        <div class="fs15 text-start">
   839          [[[export_wallet_msg]]]
   840        </div>
   841        <div class="fs15 text-start text-danger ">
   842          <strong><u>[[[clipboard_warning]]]</u></strong>
   843        </div>
   844        <div id="restoreInfoCardsList" class="mt-3 border-top">
   845          <div id="restoreInfoCard">
   846            <span data-tmpl="name" class="text-left position-relative fs20 demi underline"></span>
   847            <br />
   848            <span data-tmpl="seedName"></span>
   849            <br />
   850            <div>
   851              <span data-tmpl="seed" class="mono fs14"></span>
   852            </div>
   853            <span>[[[Instructions:]]]</span>
   854            <br />
   855            <span data-tmpl="instructions" class="text-break preline"></span>
   856            <hr />
   857          </div>
   858        </div>
   859      </form>
   860  
   861      {{- /* Error Modal */ -}}
   862      <form id="errorModal" class="d-hide mw-425">
   863        <div class="form-closer"><span class="ico-cross"></span></div>
   864        <header>[[[Error]]]</header>
   865        <div id="errorModalMsg" class="text-danger text-center"></div>
   866      </form>
   867  
   868      {{- /* PICK A VOTING SERVICE PROVIDER */ -}}
   869      <form id="vspPicker" class="flex-center flex-column m-4">
   870        <div class="form-closer hoverbg"><span class="ico-cross"></span></div>
   871        <div>
   872          <div class="flex-center">[[[select_vsp_from_list]]]</div>
   873          <table id="vspPickerTable" class="row-border row-hover rounded3 mt-2">
   874            <thead>
   875              <tr>
   876                <th>[[[URL]]]</th>
   877                <th>[[[fee_rate_percent]]]</th>
   878                <th>[[[Live Tickets]]]</th>
   879              </tr>
   880            </thead>
   881            <tbody id="vspPickerList">
   882              <tr id="vspRowTmpl" class="pointer">
   883                <td data-tmpl="url"></td>
   884                <td data-tmpl="feeRate" class="text-end"></td>
   885                <td data-tmpl="voting" class="text-end"></td>
   886              </tr>
   887            </tbody>
   888          </table>
   889          <div class="pt-2">
   890            <label for="customVspUrl">[[[Or add custom VSP URL:]]]</label>
   891            <div class="d-flex align-items-stretch w-100">
   892              <input
   893                id="customVspUrl"
   894                type="url"
   895                class="flex-grow-1"
   896                placeholder="https://"
   897                aria-label="[[[Custom VSP URL]]]"
   898              >
   899              <button id="customVspSubmit" class="go ms-2 px-3" type="button">[[[Add]]]</button>
   900            </div>
   901          </div>
   902        </div>
   903      </form>
   904  
   905      {{- /* PURCHASE TICKETS */ -}}
   906      <form id="purchaseTicketsForm" class="flex-stretch-column mw-425">
   907        <div class="form-closer hoverbg"><span class="ico-cross"></span></div>
   908        <header>
   909          <span class="ico-ticket fs22 me-2 grey"></span>
   910          <span>[[[Purchase Tickets]]]</span>
   911        </header>
   912        <div class="d-flex flex-wrap py-0">
   913          <div class="flex-center flex-column col-12 px-3 py-3 text-nowrap">
   914            <span>[[[Current Price]]]</span>
   915            <hr class="dotted my-1 w-100">
   916            <h5 id="purchaserCurrentPrice">a</h5>
   917          </div>
   918          <div class="flex-center flex-column col-12 px-3 py-3 text-nowrap">
   919            <span>[[[Available Balance]]]</span>
   920            <hr class="dotted my-1 w-100">
   921            <h5 id="purchaserBal">a</h5>
   922          </div>
   923          <div id="formQueueTixBox" class="flex-center flex-column col-12 px-3 py-1 text-nowrap">
   924            <span>[[[Currently Queued]]]</span>
   925            <hr class="dotted my-1 w-100">
   926            <h5 id="formQueuedTix">a</h5>
   927          </div>
   928        </div>
   929        <div class="flex-center flex-column pb-3 px-0 border-top border-bottom">
   930          <label for="purchaserInput">[[[ticket_qty_label]]]</label>
   931          <input type="number" id="purchaserInput" min="1" placeholder="0" class="text-center thin">
   932        </div>
   933        <div class="flex-stretch-column">
   934          <button id="purchaserSubmit" class="feature">[[[Buy]]]</button>
   935        </div>
   936        <div id="purchaserErr" class="text-danger d-hide d-hide"></div>
   937      </form>
   938  
   939      {{- /* TICKET HISTORY */ -}}
   940      <form id="ticketHistoryForm" class="flex-center flex-column align-items-stretch">
   941        <div class="form-closer hoverbg"><span class="ico-cross"></span></div>
   942        <header class="px-5">
   943          <span class="ico-ticket fs22 me-2 grey"></span>
   944          <span>[[[Ticket History]]]</span>
   945        </header>
   946        <div id="ticketHistoryTable">
   947          <table class="row-border rounded3">
   948            <thead>
   949              <tr>
   950                <th>[[[Age]]]</th>
   951                <th>[[[Price]]]</th>
   952                <th>[[[Status]]]</th>
   953                <th>[[[Ticket]]]</th>
   954              </tr>
   955            </thead>
   956            <tbody id="ticketHistoryRows">
   957              <tr id="ticketHistoryRowTmpl">
   958                <td data-tmpl="age"></td>
   959                <td data-tmpl="price" class="text-end"></td>
   960                <td data-tmpl="status" class="text-end"></td>
   961                <td data-tmpl="detailsLink" class="pointer hoverbg text-end">
   962                  <span class="mono">
   963                    <a href="" data-tmpl="detailsLinkUrl" target="_blank"><span data-tmpl="hashStart"></span>…<span data-tmpl="hashEnd"></span></a>
   964                  </span>
   965                  <small class="ico-open ms-1"></small>
   966                </td>
   967              </tr>
   968            </tbody>
   969          </table>
   970        </div>
   971        <div id="ticketHistoryPagination" class="d-flex justify-content-end align-items-center fs18">
   972          <span id="ticketHistoryPrevPage" class="ico-arrowleft me-1 p-1 hoverbg pointer"></span>
   973          <span id="ticketHistoryPage" class="me-1"></span>
   974          <span id="ticketHistoryNextPage" class="ico-arrowright p-1 hoverbg pointer"></span>
   975        </div>
   976        <div id="noTicketsMessage" class="text-center">[[[No tickets to show]]]</div>
   977      </form>
   978  
   979      {{- /* SET VOTES */ -}}
   980      <form id="votingForm">
   981        <div class="form-closer"><span class="ico-cross"></span></div>
   982        <header>
   983          <span class="ico-check fs22 me-2 grey"></span>
   984          <span>[[[Agendas]]]</span>
   985        </header>
   986        {{- /* AGENDAS */ -}}
   987        <div id="votingAgendas" class="flex-stretch-column">
   988          <div id="votingAgendaTmpl" class="d-flex justify-content-between py-2 border-bottom">
   989            <div class="d-flex flex-grow-1 align-items-end pe-3">
   990              <div data-tmpl="description" class="w-100"></div>
   991            </div>
   992            <div data-tmpl="choices" class="d-flex align-items-stretch">
   993              <div id="votingChoiceTmpl" class="flex-center flex-column pe-2">
   994                <span data-tmpl="id"></span>
   995                <input data-tmpl="radio" type="radio" class="form-check-input">
   996              </div>
   997            </div>
   998          </div>
   999        </div>
  1000  
  1001        {{- /* TREASURY SPENDS */ -}}
  1002        <div class="flex-center fs26">[[[Treasury Spends]]]</div>
  1003        <div id="votingTspends" class="flex-stretch-column py-0">
  1004          <div id="tspendTmpl" class="d-flex align-items-stretch py-3 border-bottom">
  1005            <div class="d-flex flex-column flex-grow-1 pe-3">
  1006              <div class="d-flex align-items-center justify-content-between">
  1007                <div data-tmpl="value" class="flex-center pe-2"></div>
  1008                <a href="" target="_blank" data-tmpl="explorerLink" class="p-2 hoverbg pointer ico-open"></a>
  1009              </div>
  1010              <div data-tmpl="hash" class="word-break-all user-select-all fs14 p-1"></div>
  1011            </div>
  1012            <div class="d-flex align-items-stretch">
  1013              <div class="flex-center flex-column pe-2">
  1014                <span>[[[No]]]</span>
  1015                <input data-tmpl="no" type="radio" value="no" class="form-check-input">
  1016              </div>
  1017              <div class="flex-center flex-column pe-2">
  1018                <span>[[[Yes]]]</span>
  1019                <input data-tmpl="yes" type="radio" value="yes" class="form-check-input">
  1020              </div>
  1021            </div>
  1022          </div>
  1023        </div>
  1024  
  1025        {{- /* TREASURY KEYS */ -}}
  1026        <div class="flex-center fs26">[[[Treasury Keys]]]</div>
  1027        <div id="votingTKeys" class="flex-stretch-column">
  1028          <div id="tkeyTmpl" class="d-flex justify-content-between align-items-stretch py-2 border-bottom">
  1029            <div class="flex-center flex-grow-1 justify-content-start pe-3">
  1030              <div data-tmpl="key" class="word-break-all user-select-all fs14 p-1"></div>
  1031            </div>
  1032            <div class="d-flex align-items-stretch">
  1033              <div class="flex-center flex-column pe-2">
  1034                <span>[[[No]]]</span>
  1035                <input data-tmpl="no" type="radio" value="no" class="form-check-input">
  1036              </div>
  1037              <div class="flex-center flex-column pe-2">
  1038                <span>[[[Yes]]]</span>
  1039                <input data-tmpl="yes" type="radio" value="yes" class="form-check-input">
  1040              </div>
  1041            </div>
  1042          </div>
  1043        </div>
  1044        <div id="votingFormErr" class="fs14 text-danger d-hide"></div>
  1045      </form>
  1046  
  1047      {{- /* TX DETAILS */ -}}
  1048      <form id="txDetails" class="position-relative flex-stretch-column d-hide">
  1049        <div class="form-closer hoverbg"><span class="ico-cross"></span></div>
  1050        <header>[[[tx_details]]]</header>
  1051        <div class="flex-center">
  1052          <small><a target="_blank" id="txViewBlockExplorer"><span>View in block explorer</span><span class="mx-2 ico-open"></span></a></small>
  1053        </div>
  1054        <div>
  1055          <table class="compact">
  1056            <tr>
  1057              <td class="grey">[[[Type]]]</td>
  1058              <td><span><span id="txDetailsType"></span><span id="txTypeTooltip" data-tooltip="" class="ico-info ms-1"></span></span></td>
  1059            </tr>
  1060            <tr id="txDetailsAmtSection">
  1061              <td class="grey">[[[Amount]]]</td>
  1062              <td><span id="txDetailsAmount"></span></td>
  1063            </tr>
  1064            <tr>
  1065              <td class="grey">[[[fee]]]</td>
  1066              <td><span id="txDetailsFee"></span></td>
  1067            </tr>
  1068            <tr>
  1069              <td class="grey">[[[block]]]</td>
  1070              <td><span id="txDetailsBlockNumber"></span><div class="ico-spinner spinner d-hide fs-14 px-2 d-inline-block" id="blockNumberPending"></div></td>
  1071            </tr>
  1072            <tr>
  1073              <td class="grey">[[[timestamp]]]</td>
  1074              <td><span id="txDetailsTimestamp"></span><div class="ico-spinner spinner d-hide fs-14 px-2 d-inline-block" id="timestampPending"></div></td>
  1075            </tr>
  1076            <tr>
  1077              <td class="grey">[[[tx_id]]]</td>
  1078              <td><span id="txDetailsID" class="ease-color"></span><span id="copyTxIDBtn" class="ease-color ico-copy pt-0"></span></td>
  1079            </tr>
  1080            <tr id="txDetailsRecipientSection" class="border-top">
  1081              <td class="grey">[[[recipient]]]</td>
  1082              <td><span id="txDetailsRecipient" class="ease-color"></span><span id="copyRecipientBtn" class="ease-color ico-copy pt-0"></span></td>
  1083            </tr>
  1084            <tr id="txDetailsBondIDSection" class="border-top">
  1085              <td class="grey">[[[bond_id]]]</td>
  1086              <td><span id="txDetailsBondID" class="ease-color"></span><span id="copyBondIDBtn" class="ease-color ico-copy pt-0"></span></td>
  1087            </tr>
  1088            <tr id="txDetailsBondLocktimeSection">
  1089              <td class="grey">[[[locktime]]]</td>
  1090              <td><span id="txDetailsBondLocktime" class="ease-color"></span></td>
  1091            </tr>
  1092            <tr id="txDetailsBondAccountIDSection">
  1093              <td class="grey">[[[Account ID]]]</td>
  1094              <td><span id="txDetailsBondAccountID" class="ease-color"></span><span id="copyBondAccountIDBtn" class="ease-color ico-copy pt-0"></span></td>
  1095            </tr>
  1096            <tr id="txDetailsNonceSection" class="border-top">
  1097              <td class="grey">[[[nonce]]]</td>
  1098              <td><span id="txDetailsNonce"></span></td>
  1099            </tr>
  1100          </table>
  1101        </div>
  1102      </form>
  1103  
  1104      {{- /* CSPP INFO */ -}}
  1105      <form id="mixingInfo" class="mw-425 p-3 pt-4">
  1106        <div class="form-closer"><span class="ico-cross"></span></div>
  1107        <ul class="px-3 mb-0">
  1108          <li>
  1109            [[[privacy_intro]]]
  1110          </li>
  1111          <li>
  1112            [[[cspp_how]]]
  1113          </li>
  1114          <li>
  1115            [[[decred_privacy]]]
  1116          </li>
  1117          <li>
  1118            [[[privacy_optional]]]
  1119          </li>
  1120          <li>
  1121            [[[privacy_unlocked]]]
  1122          </li>
  1123        </ul>
  1124      </form>
  1125    </div>
  1126  </div>
  1127  {{template "bottom"}}
  1128  {{end}}