DeroProject
/
webroot
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
DERO Web Wallet html/JS source. derowallet.io
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
5 Commits
1 Branch
1.5MB
Branch: master
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from 'master'
${ noResults }
webroot/static/wallet.html

1095 lines
72KB
Raw Permalink Blame History 

  1. <!doctype html>

  2. <html>

  3. 

  4. <head>

  5.     <!-- Required meta tags -->

  6.     <meta charset="utf-8">

  7.     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  8.     <!-- Bootstrap CSS -->

  9.     <link rel="stylesheet" href="/static/deps/bootstrap.min.css">

  10.     <link rel="stylesheet" href="/static/deps/main.css" type="text/css">

  11.     <link rel="stylesheet" href="/static/deps/style.css" type="text/css" title="blackTheme">

  12.     <link rel="alternate stylesheet" href="/static/deps/style_white.css" type="text/css" title="whiteTheme" disabled>

  13.     <title>DERO Web Wallet</title>

  14.     <script src="/static/wasm_exec.js"></script>

  15.     <link href="/static/deps/tabulator.min.css" rel="stylesheet">

  16.     <link rel="apple-touch-icon" sizes="57x57" href="/static/favicon/apple-icon-57x57.png">

  17.     <link rel="apple-touch-icon" sizes="60x60" href="/static/favicon/apple-icon-60x60.png">

  18.     <link rel="apple-touch-icon" sizes="72x72" href="/static/favicon/apple-icon-72x72.png">

  19.     <link rel="apple-touch-icon" sizes="76x76" href="/static/favicon/apple-icon-76x76.png">

  20.     <link rel="apple-touch-icon" sizes="114x114" href="/static/favicon/apple-icon-114x114.png">

  21.     <link rel="apple-touch-icon" sizes="120x120" href="/static/favicon/apple-icon-120x120.png">

  22.     <link rel="apple-touch-icon" sizes="144x144" href="/static/favicon/apple-icon-144x144.png">

  23.     <link rel="apple-touch-icon" sizes="152x152" href="/static/favicon/apple-icon-152x152.png">

  24.     <link rel="apple-touch-icon" sizes="180x180" href="/static/favicon/apple-icon-180x180.png">

  25.     <link rel="icon" type="image/png" sizes="192x192"  href="/static/favicon/android-icon-192x192.png">

  26.     <link rel="icon" type="image/png" sizes="32x32" href="/static/favicon/favicon-32x32.png">

  27.     <link rel="icon" type="image/png" sizes="96x96" href="/static/favicon/favicon-96x96.png">

  28.     <link rel="icon" type="image/png" sizes="16x16" href="/static/favicon/favicon-16x16.png">

  29.     <link rel="manifest" href="/static/favicon/manifest.json">

  30. </head>

  31. 

  32. <body>

  33.     <div id="loader-wrapper">

  34.         <div id="loader"></div>

  35.         

  36.         <div class="loader-section section-left"></div>

  37.         <div class="loader-section section-right"></div>

  38.             

  39.     </div>

  40.     <div class="col d-flex align-items-center justify-content-center pl-0 pr-5" id="header">

  41.         <div class="row ml-0">

  42.             <div class="col-lg-4 col-md-4 col-sm-12 text-center align-self-center">

  43.                 <div class="row">

  44.                     <div class="col-lg-6 col-md-12 col-sm-12 logo">

  45.                         <a href="https://dero.io" target="_blank">

  46.                             <img src="/static/logo.png" alt="Logo" height="30">

  47.                         </a>

  48.                     </div>

  49.                     <div class="pl-0 col-lg-3 col-md-12 col-sm-12 title">

  50.                         <span>DERO</span>

  51.                         <span data-i18n="tr_wallet">Wallet</span>

  52.                     </div>

  53.                 </div>

  54.             </div>

  55.             <div class="col-lg-8 col-md-8 col-sm-12">

  56.                 <div class="row">

  57.                     <div class="col-lg-10 col-md-8 col-12">

  58.                         <div class="row wallet-online">

  59.                             <div class="col-lg-2 wallet_local_name d-flex justify-content-center">

  60.                                 My_wallet

  61.                             </div>

  62.                             <div class="col-lg-7 align-self-center">

  63.                                 <p id="header_address" class="no-m o-h wallet_address clipboard" data-clipboard-action="copy" data-clipboard-target="#header_address">

  64.                                     Loremipsumdolor,sitametconsecteturadipisicingelit...

  65.                                 </p>

  66.                             </div>

  67.                             <div class="col-lg-2 d-flex justify-content-center">

  68.                                 <!--<button class="btn btn-b-2 btn-sm btn-copy" data-clipboard-action="copy" data-clipboard-target="#wallet_address_id">

  69.                               Copy

  70.                               </button>-->

  71.                                 <p class="no-m">

  72.                                     <button class="btn btn-b-3 btn-sm btn-logout" data-i18n="control_wallet_logout" onClick="promiseWorker.postMessage({cmd:'close_wallet',id:secretid});">

  73.                               LogOut

  74.                               </button>

  75.                                 </p>

  76.                             </div>

  77.                         </div>

  78.                     </div>

  79.                     <div class="d-flex align-items-center p-0 m-0" id="myBlockTheme">

  80.                         <div id="blackTheme"></div>

  81.                         <div id="whiteTheme"></div>

  82.                     </div>

  83.                     <div class="col-lg-1 col-md-3 col-12 text-center">

  84.                         <p class="no-m">

  85.                             <select class="selectpicker mr-sm-2 btn btn-b-2 btn-lang btn-sm" data-width="fit" id="language_picker">

  86.                            <option class="lang" data-content='<span class="flag-icon flag-icon-us"></span> English' data-lang="en">English</option>

  87.                         </select>

  88.                         </p>

  89.                     </div>

  90.                 </div>

  91.             </div>

  92.         </div>

  93.     </div>

  94.     <!-- show menu to create/open wallet -->

  95.     <div class="p-0 container-fluid d-flex justify-content-between" id="content">

  96.         <div class="col-lg-2 col-md-4 col-sm-12 aside pt-5">

  97.             <div class="wallet-closed">

  98.                 <div class="row no-gutters justify-content-center d-flex flex-column">

  99.                     <ul class="nav flex-column">

  100.                         <li class="active"><a data-toggle="tab" href="#recoverWallet" class="btn btn-b-2 btn-block btn-radius active" data-i18n="recover_wallet">

  101.                    Recover wallet

  102.                    </a>

  103.                         </li>

  104.                         <li><a data-toggle="tab" href="#createWallet" class="btn btn-b-2 btn-block btn-radius" data-i18n="front_create_new_wallet">

  105.                    Create new wallet

  106.                    </a>

  107.                         </li>

  108.                         <li>

  109.                             <a href="https://dero.io/" target="_blank" class="btn btn-b-2 btn-block btn-radius">DERO Project</a>

  110.                         </li>

  111.                     </ul>

  112.                 </div>

  113.             </div>

  114.             <div class="wallet-online">

  115.                 <div class="justify-content-center d-flex flex-column col-12">

  116.                     <ul class="dash">

  117.                         <li>

  118.                             <button href="#" class="btn btn-sm btn-set float-right" onclick="

  119.                       var x = function() { $('#ModalSettings').modal('show');};verify_password_action( x);"><span>&#x2699;&nbsp;</span><span data-i18n="control_wallet_settings"> Settings</span>

  120.                    </button>

  121.                         </li>

  122.                         <li>

  123.                             <br>

  124.                             <br>

  125.                         </li>

  126.                         <li class="text-white"><span data-i18n="balance_total"> Total </span> :</li>

  127.                         <li class="text-white">

  128.                             <strong><span class="total_balance"></span></strong>

  129.                         </li>

  130.                         <li class="text-s-gray"><span data-i18n="balance_locked">Locked</span> :</li>

  131.                         <li class="text-muted"><span class="locked_balance"></span></li>

  132.                         <li class="text-s-gray"><span data-i18n="balance_unlocked">Unlocked</span> :</li>

  133.                         <li class="text-muted"><span class="unlocked_balance"></span></li>

  134.                         <li class="text-s-gray"><span data-i18n="daemon_address">Daemon Address</span> :</li>

  135.                         <li class="text-muted"><span class="wallet_daemon_address"></span></li>

  136.                         <li class="text-s-gray"><span data-i18n="blockchain_height">Blockchain Height</span> :</li>

  137.                         <li class="text-muted">

  138.                             <span id="blockchain_height_stats" class="text-danger">

  139.                    <span class="wallet_topo_height"></span>/<span class="daemon_topo_height"></span>

  140.                             </span>

  141.                         </li>

  142.                     </ul>

  143.                     <br>

  144.                     <ul class="nav flex-column">

  145.                         <li class="active"><a data-toggle="tab" data-i18n="tab_send" href="#send" class="btn btn-b-2 btn-block btn-radius active">SEND</a></li>

  146.                         <li><a data-toggle="tab" data-i18n="tab_receive" href="#receive" class="btn btn-b-2 btn-block btn-radius">RECEIVE</a></li>

  147.                         <li><a data-toggle="tab" data-i18n="tab_history" href="#history" class="btn btn-b-2 btn-block btn-radius">TX HISTORY</a></li>

  148.                         <li><a data-toggle="tab" data-i18n="tab_about" href="#about" class="btn btn-b-2 btn-block btn-radius">ABOUT</a></li>

  149.                     </ul>

  150.                 </div>

  151.             </div>

  152.         </div>

  153.         <div class="col-lg-10 col-md-8 col-sm-12 row d-flex flex-row m-0">

  154.             <div class="row wallet-closed ml-0 align-items-start justify-content-center col-12">

  155.                 <div class="col-lg-10 col-md-8 col-sm-12 wrap pt-5 paside">

  156.                     <div id="id_wallet_can_run" class="text-center">

  157.                         <h3 data-i18n="no_wasm">Please restart or upgrade your browser to run DERO web wallet.</h3>

  158.                     </div>

  159.                     <div class="row">

  160.                         <div class="col-sm-12 text-center">

  161.                             <div class="tab-content">

  162.                                 <!-- Recover Wallet Tabs-->

  163.                                 <div id="recoverWallet" class="tab-pane fade in active show">

  164.                                     <h2 class="text-white">

  165.                                         <div data-i18n="tr_title">

  166.                                             Recover your wallet

  167.                                         </div>

  168.                                     </h2>

  169.                                     <div class="row justify-content-center">

  170.                                         <div class="col-sm-12 col-md-8 col-lg-6">

  171.                                             <div id="local_wallet_list_present">

  172.                                                 <hr>

  173.                                                 <div class="form-group" ida="local_wallet_list_present">

  174.                                                     <label class="text-white" for="local_wallet_list_select" data-i18n="front_available_wallet"></label>

  175.                                                     <select class="selectpicker btn btn-b-2 w100 btn-lang btn-sm" data-width="fit" id="local_wallet_list_select"></select>

  176.                                                 </div>

  177.                                                 <div class="btn-toolbar justify-content-between" role="toolbar" aria-label="Toolbar with button groups">

  178.                                                     <button class="btn btn-b-5 btn-radius btn-success" data-i18n="front_open_saved_wallet" id="open_saved_wallet_button" onClick="open_saved_wallet();">Open Selected wallet</button>

  179.                                                     <button class="btn btn-b-3 btn-radius btn-danger" data-i18n="front_delete_saved_wallet" onClick="delete_saved_wallet();">Delete Selected Wallet</button>

  180.                                                 </div>

  181.                                                 <hr>

  182.                                             </div>

  183.                                             <button class="btn btn-b-3 btn-block btn-radius" data-i18n="front_recover_seed_wallet" data-toggle="modal" data-target="#ModalRecoverSeedWords">

  184.                                    Using <strong>SEED</strong> word (25 words)

  185.                                    </button>

  186.                                             <button href="#" class="btn btn-b-3 btn-block btn-radius" data-i18n="front_recover_key_wallet" data-toggle="modal" data-target="#ModalRecoverKey">

  187.                                    Using Recovery <strong>key</strong> (64 hex char)

  188.                                    </button>

  189.                                             <button id="btn_wallet_disk_file" href="#" class="btn btn-b-3 btn-block btn-radius" data-i18n="front_upload_wallet">

  190.                                    Upload wallet <strong>from Disk</strong>

  191.                                    </button>

  192.                                             <div class="form-group my-3" style="display: none;">

  193.                                                 <input type="file" id="wallet_disk_file" name="selected_files[]" />

  194.                                             </div>

  195.                                             <br>

  196.                                             <button href="#" class="btn btn-b-2 btn-block btn-radius" data-i18n="front_recover_view_wallet" data-toggle="modal" data-target="#ModalRecoverViewKey">

  197.                                    View only

  198.                                    </button>

  199.                                         </div>

  200.                                     </div>

  201.                                     <div class="row">

  202.                                         <div class="col-md-3 col-lg-4"></div>

  203.                                         <div class="col-sm-12 col-md-6 col-lg-4">

  204.                                         </div>

  205.                                         <div class="col-md-3 col-lg-4"></div>

  206.                                     </div>

  207.                                 </div>

  208.                                 <!-- Create Wallet -->

  209.                                 <div id="createWallet" class="tab-pane fade">

  210.                                     <h2 class="text-white">

  211.                                         <div data-i18n="create_new_title">

  212.                                             Create new wallet

  213.                                         </div>

  214.                                     </h2>

  215.                                     <div class="row justify-content-center">

  216.                                         <div class="col-sm-12 col-md-8 col-lg-6">

  217.                                             <div class="form-group">

  218.                                                 <label for="i_new_wallet_name" data-i18n="wallet_name">Wallet Name</label>

  219.                                                 <input type="text" class="form-control form-b" id="i_new_wallet_name" data-i18n="[placeholder]wallet_name_quick_placeholder" required>

  220.                                             </div>

  221.                                             <div class="form-group">

  222.                                                 <label for="i_new_wallet_pwd" data-i18n="tr_password">Password:</label>

  223.                                                 <input type="password" class="form-control form-b" id="i_new_wallet_pwd" data-i18n="[placeholder]password_placeholder" required placeholder="Password" oninput="verify_same_password(i_new_wallet_pwd,i_new_wallet_cpwd);">

  224.                                             </div>

  225.                                             <div class="form-group">

  226.                                                 <label for="i_new_wallet_cpwd" data-i18n="cpassword">Confirm Password:</label>

  227.                                                 <input type="password" class="form-control form-b" data-i18n="[placeholder]cpassword_placeholder" placeholder="Confirm Password" required id="i_new_wallet_cpwd" oninput="verify_same_password(i_new_wallet_pwd,i_new_wallet_cpwd);">

  228.                                             </div>

  229.                                             <br>

  230.                                             <button class="btn btn-b-2 w-b btn-block btn-radius" data-i18n="create_new" onClick="Create_New_Wallet();">

  231.                                    Create New Wallet

  232.                                    </button>

  233.                                         </div>

  234.                                     </div>

  235.                                 </div>

  236.                             </div>

  237.                         </div>

  238.                     </div>

  239.                 </div>

  240.             </div>

  241.             <div class="row wallet-online ml-0 align-items-start justify-content-center col-12">

  242.                 <div class="col-lg-10 col-md-8 col-sm-12 wrap p-top25">

  243.                     <div class="row">

  244.                         <div class="col-sm-12">

  245.                             <div class="row online justify-content-center">

  246.                                 <div class="col-md-8 col-lg-4">

  247.                                     <button id="button_online_offline" class="btn btn-b-4 btn-block btn-radius btn-warning" onclick="toggle_online_offline();">

  248.                              WALLET IS ONLINE ˅

  249.                              </button>

  250.                                 </div>

  251.                             </div>

  252.                             <div class="tab-content">

  253.                                 <!-- Send Tabs-->

  254.                                 <div id="send" class="tab-pane fade in active show">

  255.                                     <h2 class="text-white text-center">

  256.                                         <div data-i18n="tab_send_sendto_label">

  257.                                             Send to DERO Address.

  258.                                         </div>

  259.                                     </h2>

  260.                                     <div class="row">

  261.                                         <div class="col-md-2 col-lg-3"></div>

  262.                                         <div class="col-sm-12 col-md-8 col-lg-6 text-center">

  263.                                             <p class="text-gray">

  264.                                                 Please note that sending to another address is irreversible.

  265.                                             </p>

  266.                                             <br>

  267.                                         </div>

  268.                                         <div class="col-md-2 col-lg-3"></div>

  269.                                     </div>

  270.                                     <div class="row justify-content-center">

  271.                                         <div class="col-sm-12 col-md-8 col-lg-6">

  272.                                             <div class="form-group">

  273.                                                 <label for="address" data-i18n="tab_send_sendto_label">Recipient wallet address</label> :

  274.                                                 <span class="badge badge-info pl-1" id="go" onclick="StartReadingQRCode();">

  275.                                                   <svg height="20px" width="20px"  enable-background="new 0 0 401.994 401.994" version="1.1" viewBox="0 0 401.994 401.994" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">

  276.                                                      <path d="m0 401.99h182.72v-182.73h-182.72v182.73zm36.542-146.18h109.64v109.35h-109.64v-109.35z"/>

  277.                                                      <rect x="73.089" y="292.36" width="36.544" height="36.549"/>

  278.                                                      <rect x="292.35" y="365.45" width="36.553" height="36.545"/>

  279.                                                      <rect x="365.44" y="365.45" width="36.552" height="36.545"/>

  280.                                                      <polygon points="365.45 255.81 328.9 255.81 328.9 219.26 219.26 219.26 219.26 401.99 255.81 401.99 255.81 292.36 292.35 292.36 292.35 328.9 401.99 328.9 401.99 219.26 401.99 219.26 365.45 219.26"/>

  281.                                                      <path d="M0,182.728h182.724V0H0V182.728z M36.542,36.542h109.636v109.636H36.542V36.542z"/>

  282.                                                      <rect x="73.089" y="73.089" width="36.544" height="36.547"/>

  283.                                                      <path d="m219.26 0v182.73h182.73v-182.73h-182.73zm146.18 146.18h-109.63v-109.64h109.63v109.64z"/>

  284.                                                      <rect x="292.35" y="73.089" width="36.553" height="36.547"/>

  285.                                                   </svg>

  286.                                                </span>

  287.                                                 <input id="send_to_address" type="text" class="form-control form-b" oninput="growtextarea('send_to_address');validate_dero_address();" onchange="growtextarea('send_to_address');validate_dero_address();" required data-i18n="[placeholder]tab_send_sendto_address_placeholder">

  288.                                                 <div id="qr_code_reader_div" style="display:none;">

  289.                                                     <div class="select">

  290.                                                         <label for="videoSource">Video source: </label><select id="videoSource"></select>

  291.                                                     </div>

  292. 

  293.                                                     <button onclick="stop_camera_now();">Stop QRcode</button>

  294.                                                     <div>

  295.                                                         <video style="display: inline-flex; " muted autoplay id="video" playsinline="true"></video>

  296.                                                         <canvas id="pcCanvas" width="320" height="320" style="display: none; float: bottom;"></canvas>

  297.                                                         <canvas id="mobileCanvas" width="240" height="320" style="display: none; float: bottom;"></canvas>

  298.                                                     </div>

  299.                                                 </div>

  300.                                             </div>

  301.                                             <div class="form-group">

  302.                                                 <label for="amout" data-i18n="tab_send_amount_label">Amount of DERO to send:</label>

  303.                                                 <input type="text" class="form-control form-b" oninput="validate_dero_amount();" id="send_to_amount" required data-i18n="[placeholder]tab_send_amount_placeholder">

  304.                                             </div>

  305.                                             <div class="form-group">

  306.                                                 <label for="payid" data-i18n="tab_send_paymentid_label">Payment ID (optional):</label>

  307.                                                 <input type="text" class="form-control form-b" oninput="validate_dero_paymentid();" id="send_to_paymentid" data-i18n="[placeholder]tab_send_paymentid_placeholder">

  308.                                             </div>

  309.                                             <br>

  310.                                             <button class="btn btn-b-2 w-b btn-block btn-radius" data-i18n="tab_send_send_transaction" onClick="wallet_send_transaction();">

  311.                                    SEND TRANSACTION

  312.                                    </button>

  313.                                         </div>

  314.                                     </div>

  315.                                 </div>

  316.                                 <!--Receive tabs-->

  317.                                 <div id="receive" class="tab-pane fade">

  318.                                     <h2 class="text-white text-center">

  319.                                         <div data-i18n="tab_receive_wallet_address">

  320.                                             Wallet Address

  321.                                         </div>

  322.                                     </h2>

  323.                                     <div class="row justify-content-center">

  324.                                         <div class="col-sm-12 col-md-8 col-lg-6">

  325.                                             <div class="form-group">

  326.                                                 <label data-i18n="tab_receive_wallet_address">Wallet Address</label>

  327.                                                 <span class="badge badge-light clipboard pl-1" data-clipboard-action="copy" data-clipboard-target="#wallet_address_id">                                                

  328.                                                   <svg height="20px" width="20px" enable-background="new 0 0 561 561" version="1.1" viewBox="0 0 561 561" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">

  329.                                                      <path d="m395.25 0h-306c-28.05 0-51 22.95-51 51v357h51v-357h306v-51zm76.5 102h-280.5c-28.05 0-51 22.95-51 51v357c0 28.05 22.95 51 51 51h280.5c28.05 0 51-22.95 51-51v-357c0-28.05-22.95-51-51-51zm0 408h-280.5v-357h280.5v357z"/>

  330.                                                   </svg>

  331.                                               </span>

  332.                                                 <span class="badge badge-info ml-2" onClick="$('#ModalQRCode').modal('show'); qrcode.clear(); qrcode_title.value=wallet_address;

  333.                                               qrcode.makeCode(wallet_address);qrcode_title.innerHTML=wallet_address;">

  334.                                                   <svg height="20px" width="20px"  enable-background="new 0 0 401.994 401.994" version="1.1" viewBox="0 0 401.994 401.994" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">

  335.                                                      <path d="m0 401.99h182.72v-182.73h-182.72v182.73zm36.542-146.18h109.64v109.35h-109.64v-109.35z"/>

  336.                                                      <rect x="73.089" y="292.36" width="36.544" height="36.549"/>

  337.                                                      <rect x="292.35" y="365.45" width="36.553" height="36.545"/>

  338.                                                      <rect x="365.44" y="365.45" width="36.552" height="36.545"/>

  339.                                                      <polygon points="365.45 255.81 328.9 255.81 328.9 219.26 219.26 219.26 219.26 401.99 255.81 401.99 255.81 292.36 292.35 292.36 292.35 328.9 401.99 328.9 401.99 219.26 401.99 219.26 365.45 219.26"/>

  340.                                                      <path d="M0,182.728h182.724V0H0V182.728z M36.542,36.542h109.636v109.636H36.542V36.542z"/>

  341.                                                      <rect x="73.089" y="73.089" width="36.544" height="36.547"/>

  342.                                                      <path d="m219.26 0v182.73h182.73v-182.73h-182.73zm146.18 146.18h-109.63v-109.64h109.63v109.64z"/>

  343.                                                      <rect x="292.35" y="73.089" width="36.553" height="36.547"/>

  344.                                                   </svg>

  345.                                               </span>

  346.                                                 <input id="wallet_address_id" type="text" class="form-control form-b wallet_address" readonly>

  347.                                             </div>

  348.                                             <div class="form-group">

  349.                                                 <label data-i18n="tab_receive_i32_address">Integrated 32 Address</label>

  350.                                                 <span class="badge badge-light clipboard" data-clipboard-action="copy" data-clipboard-target="#random_i32_address_id">                                                

  351.                                                   <svg height="20px" width="20px" enable-background="new 0 0 561 561" version="1.1" viewBox="0 0 561 561" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">

  352.                                                      <path d="m395.25 0h-306c-28.05 0-51 22.95-51 51v357h51v-357h306v-51zm76.5 102h-280.5c-28.05 0-51 22.95-51 51v357c0 28.05 22.95 51 51 51h280.5c28.05 0 51-22.95 51-51v-357c0-28.05-22.95-51-51-51zm0 408h-280.5v-357h280.5v357z"/>

  353.                                                   </svg>

  354.                                               </span>

  355.                                                 <span class="badge badge-info ml-2" onClick="$('#ModalQRCode').modal('show'); qrcode.clear();  qrcode.makeCode(random_i32_address);qrcode_title.innerHTML=random_i32_address;">

  356.                                                   <svg height="20px" width="20px"  enable-background="new 0 0 401.994 401.994" version="1.1" viewBox="0 0 401.994 401.994" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">

  357.                                                      <path d="m0 401.99h182.72v-182.73h-182.72v182.73zm36.542-146.18h109.64v109.35h-109.64v-109.35z"/>

  358.                                                      <rect x="73.089" y="292.36" width="36.544" height="36.549"/>

  359.                                                      <rect x="292.35" y="365.45" width="36.553" height="36.545"/>

  360.                                                      <rect x="365.44" y="365.45" width="36.552" height="36.545"/>

  361.                                                      <polygon points="365.45 255.81 328.9 255.81 328.9 219.26 219.26 219.26 219.26 401.99 255.81 401.99 255.81 292.36 292.35 292.36 292.35 328.9 401.99 328.9 401.99 219.26 401.99 219.26 365.45 219.26"/>

  362.                                                      <path d="M0,182.728h182.724V0H0V182.728z M36.542,36.542h109.636v109.636H36.542V36.542z"/>

  363.                                                      <rect x="73.089" y="73.089" width="36.544" height="36.547"/>

  364.                                                      <path d="m219.26 0v182.73h182.73v-182.73h-182.73zm146.18 146.18h-109.63v-109.64h109.63v109.64z"/>

  365.                                                      <rect x="292.35" y="73.089" width="36.553" height="36.547"/>

  366.                                                   </svg>

  367.                                               </span>

  368.                                                 <input id="random_i32_address_id" type="text" class="form-control form-b random_i32_address" readonly>

  369.                                             </div>

  370.                                             <div class="form-group">

  371.                                                 <label data-i18n="tab_receive_i32_paymentid">Integrated 32 Address  Payment ID</label>

  372.                                                 <input type="text" class="form-control form-b random_i32_address_paymentid" readonly>

  373.                                             </div>

  374.                                             <!-- Currently  these are not displayed

  375.                                       <h5> <span data-i18n="tab_receive_i8_address" >Integrated 8 Address  </span> :</h5>

  376.                                       

  377.                                       <div class="mb-2 bg-secondary text-white">

  378.                                       <div class="d-inline random_i8_address"></div>

  379.                                       </div>

  380.                                       

  381.                                       

  382.                                       <h6> <span data-i18n="tab_receive_i8_paymentid" >  Integrated 8 Address  Payment ID</span>:</h6>

  383.                                       <div class="mb-2 bg-secondary text-white">

  384.                                       <div class="d-inline random_i8_address_paymentid"></div>

  385.                                       </div>

  386.                                       -->

  387.                                             <div class="form-group">

  388.                                                 <button class="btn btn-b-2 btn-block btn-radius" data-i18n="tab_receive_generate" onClick="promiseWorker.postMessage({cmd:'generate_integrated_address',id:secretid});">Generate Integrated address</button>

  389.                                             </div>

  390.                                         </div>

  391.                                     </div>

  392.                                 </div>

  393.                                 <!-- History tabs -->

  394.                                 <div id="history" class="tab-pane fade">

  395.                                     <div class="d-flex  justify-content-center">

  396.                                         <div class="d-inline-flex justify-content-center  ">

  397.                                             <button type="button" class="btn btn-b-2 btn-radius" onClick='update_tx_history();' data-i18n="tab_history_load">Load TX history</button>

  398.                                             <button type="button" class="btn btn-b-2 btn-radius" onClick='txtable.download("csv", "data.csv", {delimiter:","});' data-i18n="tab_history_export_csv">Export to CSV</button>

  399.                                         </div>

  400.                                     </div>

  401.                                     <!-- hold transaction table -->

  402.                                     <div id="txtable" class="text-monospace"></div>

  403.                                 </div>

  404.                                 <!-- About tabs -->

  405.                                 <div id="about" class="tab-pane fade">

  406.                                     <h2 class="text-white text-center">

  407.                                         <div data-i18n="tr_DERO">

  408.                                             DERO

  409.                                         </div>

  410.                                     </h2>

  411.                                     <div class="row justify-content-center">

  412.                                         <div class="col-sm-12 col-md-8 col-lg-6">

  413.                                             <p class="text-gray">DERO is decentralized DAG (Directed Acyclic Graph) based blockchain with enhanced reliability, privacy, security and usability.DERO is industry leading and the first blockchain to have bulletproofs, TLS encrypted

  414.                                                 network.

  415.                                             </p>

  416.                                             <p class="text-gray">DERO blockchain has the following salient features :</p>

  417.                                             <ul class="text-gray">

  418.                                                 <li><span><strong>Extremely fast:</strong> 12 seconds transfer time</span></li>

  419.                                                 <li><span><strong>Fast Confirmation:</strong> 2 minutes</span></li>

  420.                                                 <li><span><strong>Bulletproofs:</strong> Zero Knowledge Range Proofs (NIZK). No one knows who spent what.</span></li>

  421.                                                 <li><span><strong>Ring Signatures:</strong>:No one know who spent when and where.</span></li>

  422.                                                 <li><span><strong>SSl/TLS P2P encrypted network</strong></span></li>

  423.                                                 <li><span><strong>CryptoNote: Fully encrypted blockchain</strong></span></li>

  424.                                                 <li><span><strong>Fully Auditable Supply</strong></span></li>

  425.                                                 <li><span><strong>DAG Based:</strong> No orphans, no soft forks</span></li>

  426.                                                 <li><span><strong>DERO blockchain is written from scratch in Golang.</strong></span></li>

  427.                                                 <li><span><strong>Developed and maintained by original developers.</strong></span></li>

  428.                                             </ul>

  429.                                             <span class="text-center text-gray" style="width: 100%">Please visit <a href="https://dero.io">https://dero.io</a> for more information.</span>

  430.                                         </div>

  431.                                     </div>

  432.                                 </div>

  433.                             </div>

  434.                         </div>

  435.                     </div>

  436.                 </div>

  437.             </div>

  438.             <!-- Footer -->

  439.             <div class="row ml-0 align-items-end  justify-content-center col-12">

  440.                 <div class="wrap text-center">

  441.                     <hr>

  442.                     <div class="text-secondary">DERO Web wallet is alpha software.</div>

  443.                     <div class="text-secondary"><span>Core Wallet Version: </span><span class="wallet_version_string"></span><span> &nbsp; UI Version: 0.0.0 </span></div>

  444.                     <div class="text-secondary">Copyright DERO project </div>

  445.                     <div class="text-secondary">This project is covered by DERO license.</div>

  446.                     <div class="text-primary"> <a href="https://dero.io">https://dero.io</a></div>

  447.                 </div>

  448.             </div>

  449.         </div>

  450.     </div>

  451.     <!-- below are all the models used for various views -->

  452.     <!-- this model is used to confirm transaction -->

  453.     <div class="modal fade" id="ModalConfirmTX">

  454.         <div class="modal-dialog modal-dialog-centered modal-lg">

  455.             <div class="modal-content">

  456.                 <!-- Modal Header -->

  457.                 <div class="modal-header">

  458.                     <h4 class="modal-title text-center" data-i18n="tx_confirmation">Transfer Confirmation</h4>

  459.                     <button type="button" class="close" data-dismiss="modal">&times;</button>

  460.                 </div>

  461.                 <!-- Modal body -->

  462.                 <div class="modal-body">

  463.                     <div class="form-group">

  464.                         <label style="display:none;" id="transfer_txhex"> </label>

  465.                         <label class="font-weight-bold">TXID:</label> <label id="transfer_txid"></label> <br/>

  466.                         <label class="font-weight-bold"><span data-i18n="tx_input_amount">Input Amount</span>:</label> <label id="transfer_inputs_sum"></label><br/>

  467.                         <label class="font-weight-bold"><span data-i18n="tx_sending_amount">Sending </span> :</label> <label id="transfer_amount"></label><br/>

  468.                         <label class="font-weight-bold"><span data-i18n="tx_change">Change </span> :</label> <label id="transfer_change"></label><br/>

  469.                         <label class="font-weight-bold"><span data-i18n="tx_fees">Fees</span>:</label> <label id="transfer_fee"></label> <br/>

  470.                         <label class="font-weight-bold"><span data-i18n="tx_size">TX Size </span> :</label> <label id="transfer_tx_size"></label><br/>

  471.                     </div>

  472.                 </div>

  473.                 <!-- Modal footer -->

  474.                 <div class="modal-footer">

  475.                     <button type="button" class="btn btn-danger" data-dismiss="modal" onclick="relay_tx();" data-i18n="tx_transfer">Transfer</button>

  476.                     <button type="button" class="btn btn-primary" data-dismiss="modal" data-i18n="tr_close">Close</button>

  477.                 </div>

  478.             </div>

  479.         </div>

  480.     </div>

  481.     <!-- The Modal to recover using seed words -->

  482.     <div class="modal fade" id="ModalRecoverSeedWords">

  483.         <div class="modal-dialog modal-dialog-centered">

  484.             <div class="modal-content">

  485.                 <!-- Modal Header -->

  486.                 <div class="modal-header">

  487.                     <h4 class="modal-title text-center" data-i18n="recover_seed_title">Wallet Recovery using Seed Words</h4>

  488.                     <button type="button" class="close" data-dismiss="modal">&times;</button>

  489.                 </div>

  490.                 <!-- Modal body -->

  491.                 <div class="modal-body">

  492.                     <div class="form-group">

  493.                         <label for="i_seed_wallet_name" data-i18n="wallet_name">Wallet Name</label>

  494.                         <input type="input" class="form-control form-b" id="i_seed_wallet_name" data-i18n="[placeholder]wallet_name_quick_placeholder" placeholder="Wallet Name for quick reference" required>

  495.                     </div>

  496.                     <div class="form-group">

  497.                         <label for="i_seed" data-i18n="25_seed_words">25 Seed Words:</label>

  498.                         <textarea class="form-control form-b" oninput="growtextarea('i_seed');" style="overflow: hidden;box-sizing: border-box;" rows="3" id="i_seed" required></textarea>

  499.                     </div>

  500.                     <div class="form-group">

  501.                         <label for="i_seed_pwd" data-i18n="tr_password">Password</label>

  502.                         <input type="password" class="form-control form-b" id="i_seed_pwd" data-i18n="[placeholder]password_placeholder" oninput="verify_same_password(i_seed_pwd,i_seed_cpwd);" required>

  503.                     </div>

  504.                     <div class="form-group">

  505.                         <label for="i_seed_cpwd" data-i18n="cpassword">Confirm Password:</label>

  506.                         <input type="password" class="form-control form-b" id="i_seed_cpwd" oninput="verify_same_password(i_seed_pwd,i_seed_cpwd);" data-i18n="[placeholder]cpassword_placeholder" required>

  507.                     </div>

  508.                     <div class="form-group">

  509.                         <label for="i_seed_topoheight" data-i18n="wallet_start_topoheight">Wallet start Topoheight: (optional)</label>

  510.                         <input type=number class="form-control form-b" id="i_seed_topoheight" value="0" type="number" min="-1" step="1" required>

  511.                     </div>

  512.                 </div>

  513.                 <!-- Modal footer -->

  514.                 <div class="modal-footer">

  515.                     <button class="btn btn-b-2 w-b btn-block btn-radius" onclick="Recover_Wallet_Using_Seed_Words();" data-i18n="recover_wallet">Recover Wallet</button>

  516.                 </div>

  517.             </div>

  518.         </div>

  519.     </div>

  520.     <!-- The Modal to recover using Recovery Key -->

  521.     <div class="modal fade" id="ModalRecoverKey">

  522.         <div class="modal-dialog modal-dialog-centered">

  523.             <div class="modal-content">

  524.                 <!-- Modal Header -->

  525.                 <div class="modal-header">

  526.                     <h4 class="modal-title text-center" data-i18n="recover_key">Wallet Recovery using Recovery Key</h4>

  527.                     <button type="button" class="close" data-dismiss="modal">&times;</button>

  528.                 </div>

  529.                 <!-- Modal body -->

  530.                 <div class="modal-body">

  531.                     <div class="form-group">

  532.                         <label for="i_key_wallet_name" data-i18n="wallet_name">Wallet Name</label>

  533.                         <input type="text" class="form-control form-b" id="i_key_wallet_name" required>

  534.                     </div>

  535.                     <div class="form-group">

  536.                         <label for="i_key" data-i18n="recover_key">Recovery Key (64 hex chars)</label>

  537.                         <textarea class="form-control form-b" oninput="growtextarea('i_key');validate_recovery_key();" style="overflow: hidden;box-sizing: border-box;" rows="1" id="i_key" required></textarea>

  538.                     </div>

  539.                     <div class="form-group">

  540.                         <label for="i_key_pwd" data-i18n="tr_password">Password:</label>

  541.                         <input type="password" class="form-control form-b" id="i_key_pwd" oninput="verify_same_password(i_key_pwd,i_key_cpwd);" required data-i18n="[placeholder]password_placeholder" placeholder="Password">

  542.                     </div>

  543.                     <div class="form-group">

  544.                         <label for="i_key_cpwd" data-i18n="cpassword">Confirm Password:</label>

  545.                         <input type="password" class="form-control form-b" id="i_key_cpwd" oninput="verify_same_password(i_key_pwd,i_key_cpwd);" data-i18n="[placeholder]cpassword_placeholder" placeholder="Confirm Password" required>

  546.                     </div>

  547.                     <div class="form-group">

  548.                         <label for="i_key_topoheight" data-i18n="wallet_start_topoheight">Wallet start height:</label>

  549.                         <input type=number class="form-control form-b" id="i_key_topoheight" value="-1" type="number" min="-1" step="1">

  550.                     </div>

  551.                 </div>

  552.                 <!-- Modal footer -->

  553.                 <div class="modal-footer">

  554.                     <button type="button" class="btn btn-b-2 w-b btn-block btn-radius" data-dismiss="modal" onclick="Recover_Wallet_Using_Recovery_Key();" data-i18n="recover_wallet">Recover Wallet</button>

  555.                 </div>

  556.             </div>

  557.         </div>

  558.     </div>

  559.     <!-- The Modal to recover using View Key -->

  560.     <div class="modal fade" id="ModalRecoverViewKey">

  561.         <div class="modal-dialog modal-dialog-centered">

  562.             <div class="modal-content">

  563.                 <!-- Modal Header -->

  564.                 <div class="modal-header">

  565.                     <h4 class="modal-title text-center" data-i18n="recover_viewkey_title">Wallet Recovery using View Key</h4>

  566.                     <button type="button" class="close" data-dismiss="modal">&times;</button>

  567.                 </div>

  568.                 <!-- Modal body -->

  569.                 <div class="modal-body">

  570.                     <div class="form-group">

  571.                         <label for="i_viewkey_wallet_name" data-i18n="wallet_name">Wallet Name</label>

  572.                         <input type="text" class="form-control form-b" data-i18n="[placeholder]wallet_name_quick_placeholder" id="i_viewkey_wallet_name" required>

  573.                     </div>

  574.                     <div class="form-group">

  575.                         <label for="i_viewkey" data-i18n="recover_viewkey">View Key (128 hex chars)</label>

  576.                         <textarea class="form-control form-b" oninput="growtextarea('i_viewkey');validate_viewkey_key();" style="overflow: hidden;box-sizing: border-box;" rows="1" id="i_viewkey" required></textarea>

  577.                     </div>

  578.                     <div class="form-group">

  579.                         <label for="i_viewkey_pwd" data-i18n="tr_password">Password:</label>

  580.                         <input type="password" class="form-control form-b" data-i18n="[placeholder]password_placeholder" required placeholder="Password" id="i_viewkey_pwd" oninput="verify_same_password(i_viewkey_pwd,i_viewkey_cpwd);">

  581.                     </div>

  582.                     <div class="form-group">

  583.                         <label for="i_viewkey_cpwd" data-i18n="cpassword">Confirm Password:</label>

  584.                         <input type="password" class="form-control form-b" required data-i18n="[placeholder]cpassword_placeholder" placeholder="Confirm Password" id="i_viewkey_cpwd" oninput="verify_same_password(i_viewkey_pwd,i_viewkey_cpwd);">

  585.                     </div>

  586.                     <div class="form-group">

  587.                         <label for="i_viewkey_topoheight" data-i18n="wallet_start_topoheight">Wallet start height:</label>

  588.                         <input type=number class="form-control form-b" id="i_viewkey_topoheight" value="0" type="number" min="-1" step="1">

  589.                     </div>

  590.                 </div>

  591.                 <!-- Modal footer -->

  592.                 <div class="modal-footer">

  593.                     <button type="button" class="btn btn-b-2 w-b btn-block btn-radius" data-dismiss="modal" onclick="Recover_Wallet_Using_View_Key();" data-i18n="recover_wallet">Recover Wallet</button>

  594.                 </div>

  595.             </div>

  596.         </div>

  597.     </div>

  598.     <!-- The Modal to create wallet tools such as change password,rescan blockchain etc -->

  599.     <div class="modal fade" id="ModalSettings">

  600.         <div class="modal-dialog modal-dialog-centered modal-lg">

  601.             <div class="modal-content">

  602.                 <!-- Modal Header -->

  603.                 <div class="modal-header">

  604.                     <h4 class="modal-title text-center" data-i18n="settings_title">Settings and Tools</h4>

  605.                     <button type="button" class="close" data-dismiss="modal">&times;</button>

  606.                 </div>

  607.                 <!-- Modal body -->

  608.                 <div class="modal-body">

  609.                     <div id="accordion">

  610.                         <div class="card">

  611.                             <div class="card-header">

  612.                                 <a class="collapsed card-link" data-toggle="collapse" href="#collapsefreq">

  613.                            Wallet Syncs every <span class="wallet_sync_time"></span> seconds

  614.                            </a>

  615.                             </div>

  616.                             <div id="collapsefreq" class="collapse" data-parent="#accordion">

  617.                                 <div class="card-body">

  618.                                     <form>

  619.                                         <div class="form-group">

  620.                                             <label for="formControlRange">Sync Every <span class="wallet_sync_time"></span> seconds</label>

  621.                                             <input type="range" class="form-control-range" id="formControlRange" min="6" value="6" max="120" oninput="promiseWorker.postMessage({cmd:'set_sync_frequency',id:secretid,syncevery:parseInt(formControlRange.value,10)});">

  622.                                             <div class="d-flex bd-highlight justify-content-between">

  623.                                                 <div class="p-2 "><span class="text-left text-gray">High Compute<br/>High Network </span></div>

  624.                                                 <div class="p-2 "><span class="text-right text-gray">Less Compute<br/>Less Network </span></div>

  625.                                             </div>

  626.                                         </div>

  627.                                     </form>

  628.                                 </div>

  629.                             </div>

  630.                         </div>

  631.                         <div class="card">

  632.                             <div class="card-header">

  633.                                 <a class="card-link" data-toggle="collapse" data-i18n="download_wallet_file" href="#collapse0">

  634.                            Download Wallet as file

  635.                            </a>

  636.                             </div>

  637.                             <div id="collapse0" class="collapse" data-parent="#accordion">

  638.                                 <div class="card-body">

  639.                                     <div class="form-group">

  640.                                         <button type="button" class="btn btn-b-2 w-b btn-block btn-radius" onclick="promiseWorker.postMessage({cmd:'download_wallet',id:secretid}).then(function (response) {

  641.                                     if (response === false) {

  642.                                     alert('Wallet Download Failed');

  643.                                     }else{

  644.                                     var blob = new Blob( [new Uint8Array(response.edb)] , {type: 'application/octet-stream'});

  645.                                     saveAs(blob,   response.name + '.bin' );

  646.                                     }

  647.                                     });

  648.                                     " data-i18n="download_wallet">Download Wallet</button>

  649.                                     </div>

  650.                                 </div>

  651.                             </div>

  652.                         </div>

  653.                         <div class="card">

  654.                             <div class="card-header">

  655.                                 <a class="card-link" data-toggle="collapse" href="#collapse1">

  656.                                     <span data-i18n="rename_wallet">Rename Open Wallet</span> <strong class="wallet_local_name"></strong>

  657.                                 </a>

  658.                             </div>

  659.                             <div id="collapse1" class="collapse" data-parent="#accordion">

  660.                                 <div class="card-body">

  661.                                     <div class="form-group">

  662.                                         <input type="text" class="form-control form-b" id="i_settings_wallet_name" data-i18n="[placeholder]rename_wallet_placeholder" placeholder="New wallet name" required>

  663.                                     </div>

  664.                                     <button type="button" class="btn btn-b-2 w-b btn-block btn-radius" data-i18n="rename_wallet" onclick="rename_wallet();">Rename Wallet</button>

  665.                                 </div>

  666.                             </div>

  667.                         </div>

  668.                         <div class="card">

  669.                             <div class="card-header">

  670.                                 <a class="collapsed card-link" data-toggle="collapse" href="#collapse2" data-i18n="change_wallet_start_topoheight">

  671.                            Change Wallet Start TopoHeight

  672.                            </a>

  673.                             </div>

  674.                             <div id="collapse2" class="collapse" data-parent="#accordion">

  675.                                 <div class="card-body">

  676.                                     <div class="form-group">

  677.                                         <label data-i18n="change_wallet_start_topoheight_rare">Change Wallet Start TopoHeight (Rare use)  Current:<span class="wallet_initial_height"></span></label>

  678.                                         <input type="number" class="form-control form-b" id="i_settings_topoheight" value="0" min="0" step="1">

  679.                                     </div>

  680.                                     <button type="button" class="btn btn-b-2 w-b btn-block btn-radius" onclick="change_wallet_start_height(parseInt(i_settings_topoheight.value,10));" data-i18n="change_wallet_start_topoheight">Change Start Height</button>

  681.                                 </div>

  682.                             </div>

  683.                         </div>

  684.                         <div class="card">

  685.                             <div class="card-header">

  686.                                 <a class="collapsed card-link" data-toggle="collapse" href="#collapse3" data-i18n="change_wallet_password">

  687.                            Change Wallet Password

  688.                            </a>

  689.                             </div>

  690.                             <div id="collapse3" class="collapse" data-parent="#accordion">

  691.                                 <div class="card-body">

  692.                                     <div class="form-group">

  693.                                         <label for="i_settings_pwd" data-i18n="new_password">New Password:</label>

  694.                                         <input type="password" class="form-control form-b" id="i_settings_pwd" oninput="verify_same_password(i_settings_pwd,i_settings_cpwd);" data-i18n="[placeholder]new_password" required placeholder=" ">

  695.                                     </div>

  696.                                     <div class="form-group">

  697.                                         <label for="i_settings_cpwd" data-i18n="new_cpassword">Confirm New Password:</label>

  698.                                         <input type="password" class="form-control form-b" data-i18n="[placeholder]new_cpassword" id="i_settings_cpwd" oninput="verify_same_password(i_settings_pwd,i_settings_cpwd);" required placeholder=" ">

  699.                                     </div>

  700.                                     <button type="button" class="btn btn-b-2 w-b btn-block btn-radius" data-i18n="change_wallet_password" onclick="change_wallet_password();">Change Wallet Password</button>

  701.                                 </div>

  702.                             </div>

  703.                         </div>

  704.                         <div class="card">

  705.                             <div class="card-header">

  706.                                 <a class="collapsed card-link" data-toggle="collapse" href="#collapse4" data-i18n="rescan_blockchain">

  707.                            Rescan Blockchain from start topoheight

  708.                            </a>

  709.                             </div>

  710.                             <div id="collapse4" class="collapse" data-parent="#accordion">

  711.                                 <div class="card-body">

  712.                                     <label data-i18n="wallet_minimum_topoheight">Wallet may be restored from Topo Height</label>:&nbsp;<label class="wallet_minimum_topo_height"> </label>

  713.                                     <label data-i18n="rescan_blockchain_rare">Never or Rarely required. Wallet gets busy for 20-30 minutes </label>

  714.                                     <button type="button" class="btn btn-b-2 w-b btn-block btn-radius" data-i18n="rescan_blockchain_trigger" onclick="promiseWorker.postMessage({cmd:'rescan_blockchain',id:secretid});alert(i18next.t('success'));;">Trigger Blockchain Rescanning <br/></button>

  715.                                 </div>

  716.                             </div>

  717.                         </div>

  718.                         <div class="card">

  719.                             <div class="card-header">

  720.                                 <a class="collapsed card-link" data-toggle="collapse" href="#collapse5" data-i18n="transfer_everything">

  721.                            Transfer Everything to Address(DERO balance)

  722.                            </a>

  723.                             </div>

  724.                             <div id="collapse5" class="collapse" data-parent="#accordion">

  725.                                 <div class="card-body">

  726.                                     <div class="form-group">

  727.                                         <label for="i_settings_send_address" data-i18n="dero_address">DERO address</label>

  728.                                         <input type="text" class="form-control form-b" id="i_settings_send_address" data-i18n="[placeholder]valid_dero_address_placeholder" required placeholder="Enter Valid DERO address">

  729.                                     </div>

  730.                                     <button type="button" class="btn btn-b-2 w-b btn-block btn-radius" onclick="wallet_send_everything_transaction();" data-i18n="send_now">Send Now</button>

  731.                                 </div>

  732.                             </div>

  733.                         </div>

  734.                         <div class="card">

  735.                             <div class="card-header">

  736.                                 <a class="collapsed card-link" data-toggle="collapse" href="#collapse6" data-i18n="control_wallet_seed">Get your seed</a>

  737.                             </div>

  738.                             <div id="collapse6" class="collapse" data-parent="#accordion">

  739.                                 <div class="card-body">

  740.                                     <div class="form-group">

  741.                                         <label class="text-danger" data-i18n="seed1">Your wallet can be recovered using the below seed.</label>

  742.                                         <label class="text-danger" data-i18n="seed2">You must save the SEED in a safe secure location.</label>

  743.                                         <label class="text-danger" data-i18n="seed3">Sharing your SEED is equal to sharing your wallet.If your SEED is lost, consider your wallet as lost.</label>

  744.                                         <div class="form-group">

  745.                                             <label for="sel1" data-i18n="seed_language">Seed Language:</label>

  746.                                             <select class="selectpicker btn btn-b-2 w100 btn-lang btn-sm" id="sseedlanguage" onChange="update_seed(this.value);">

  747.                                           <option>English</option>

  748.                                           <option>日本語</option>

  749.                                           <option>简体中文 (中国)</option>

  750.                                           <option>Nederlands</option>

  751.                                           <option>Esperanto</option>

  752.                                           <option>русский язык</option>

  753.                                           <option>Español</option>

  754.                                           <option>Português</option>

  755.                                           <option>Français</option>

  756.                                           <option>Deutsch</option>

  757.                                           <option>Italiano</option>

  758.                                        </select>

  759.                                         </div>

  760.                                         <label class="label-seed" id="seedbox">SEED</label>

  761.                                     </div>

  762.                                 </div>

  763.                             </div>

  764.                         </div>

  765.                     </div>

  766.                 </div>

  767.                 <!-- Modal footer 

  768.                <div class="modal-footer">

  769.                   <button type="button" class="btn btn-danger" data-dismiss="modal" data-i18n="tr_close">Close</button>

  770.                </div> -->

  771.             </div>

  772.         </div>

  773.     </div>

  774.     <!-- The Modal used to display seed seed words -->

  775.     <div class="modal fade" id="ModalSeedWords">

  776.         <div class="modal-dialog modal-dialog-centered">

  777.             <div class="modal-content">

  778.                 <!-- Modal Header -->

  779.                 <div class="modal-header">

  780.                     <h4 class="modal-title text-center" data-i18n="seed_title">Your DERO wallet SEED</h4>

  781.                     <button type="button" class="close" data-dismiss="modal">&times;</button>

  782.                 </div>

  783.                 <!-- Modal body -->

  784.                 <div class="modal-body">

  785.                     <div class="form-group">

  786.                         <label class="text-danger" data-i18n="seed1">Your wallet can be recovered using the below seed.</label>

  787.                         <label class="text-danger" data-i18n="seed2">You must save the SEED in a safe secure location.</label>

  788.                         <label class="text-danger" data-i18n="seed3">Sharing your SEED is equal to sharing your wallet.If your SEED is lost, consider your wallet as lost.</label>

  789.                         <div class="form-group">

  790.                             <label for="sel1" data-i18n="seed_language">Seed Language:</label>

  791.                             <select class="selectpicker btn btn-b-2 w100 btn-lang btn-sm" id="sseedlanguage" onChange="update_seed(this.value);">

  792.                            <option>English</option>

  793.                            <option>日本語</option>

  794.                            <option>简体中文 (中国)</option>

  795.                            <option>Nederlands</option>

  796.                            <option>Esperanto</option>

  797.                            <option>русский язык</option>

  798.                            <option>Español</option>

  799.                            <option>Português</option>

  800.                            <option>Français</option>

  801.                            <option>Deutsch</option>

  802.                            <option>Italiano</option>

  803.                         </select>

  804.                         </div>

  805.                         <label class="label-seed" id="seedbox">SEED</label>

  806.                     </div>

  807.                 </div>

  808.                 <!-- Modal footer -->

  809.                 <div class="modal-footer">

  810.                     <button type="button" class="btn btn-danger" data-dismiss="modal" data-i18n="tr_close">Close</button>

  811.                 </div>

  812.             </div>

  813.         </div>

  814.     </div>

  815.     <!-- The Modal used to display seed seed words -->

  816.     <div class="modal fade" id="ModalQRCode">

  817.         <div class="modal-dialog modal-dialog-centered">

  818.             <div class="modal-content">

  819.                 <!-- Modal Header -->

  820.                 <div class="modal-header">

  821.                     <h4 class="modal-title text-center" data-i18n="enter_password">Password</h4>

  822.                     <button type="button" class="close" data-dismiss="modal">&times;</button>

  823.                 </div>

  824.                 <!-- Modal body -->

  825.                 <div class="modal-body ">

  826.                     <div class="d-flex justify-content-center">

  827.                         <div id="qrcode"></div>

  828.                     </div>

  829.                 </div>

  830.                 <!-- Modal footer -->

  831.                 <div class="modal-footer">

  832.                     <button type="button" class="btn btn-danger" data-dismiss="modal" data-i18n="tr_close">Close</button>

  833.                 </div>

  834.             </div>

  835.         </div>

  836.     </div>

  837.     <div class="modal fade" id="ModalPromptPassword">

  838.         <div class="modal-dialog modal-dialog-centered">

  839.             <div class="modal-content">

  840.                 <!-- Modal Header -->

  841.                 <div class="modal-header">

  842.                     <h4 class="modal-title text-center" data-i18n="enter_password">Password</h4>

  843.                     <button type="button" class="close" data-dismiss="modal">&times;</button>

  844.                 </div>

  845.                 <!-- Modal body -->

  846.                 <div class="modal-body ">

  847.                     <div class="form-group">

  848.                         <input type="password" name="password" class="form-control form-b" required>

  849.                         <input type="hidden" name="action">

  850.                     </div>

  851.                     <div class="form-group">

  852.                         <button type="button" id="PromptPassword" class="btn btn-b-2 w-b btn-block btn-radius">Submit</button>

  853.                     </div>

  854.                 </div>

  855.             </div>

  856.         </div>

  857.     </div>

  858. </body>

  859. <!-- jQuery first, then Popper.js, then Bootstrap JS -->

  860. <!--<script type="text/javascript" src="/static/jquery-3.2.1.slim.min.js" ></script>-->

  861. <script type="text/javascript" src="/static/deps/jquery-3.2.1.js"></script>

  862. <script type="text/javascript" src="/static/deps/js.cookie-2.2.0.min.js"></script>

  863. <script type="text/javascript" src="/static/deps/popper.min.js"></script>

  864. <script type="text/javascript" src="/static/deps/bootstrap.min.js"></script>

  865. <script type="text/javascript" src="/static/deps/i18next_11.9.1.min.js"></script>

  866. <script type="text/javascript" src="/static/deps/jquery-i18next.min.js"></script>

  867. <script type="text/javascript" src="/static/deps/video.js"></script>

  868. <script type="text/javascript" src="/static/translations.js"></script>

  869. <script type="text/javascript" src="/static/deps/clipboard.min.js"></script>

  870. <script type="text/javascript" src='/static/deps/big.js'></script>

  871. <script type="text/javascript" src="/static/deps/FileSaver.js"></script>

  872. <script type="text/javascript" src="/static/deps/tabulator.min.js"></script>

  873. <script type="text/javascript" src="/static/deps/promise-worker.js"></script>

  874. <script type="text/javascript" src="/static/deps/qrcode.js"></script>

  875. <!-- these are for qr code reader from camera -->

  876. <script async src="/static/deps/zxing.js"></script>

  877. <script type="text/javascript" src="/static/wallet.js"></script>

  878. <script type="text/javascript">

  879.     // install file select handle

  880.     document.getElementById('wallet_disk_file').addEventListener('change', HandleWalletSelect, false);

  881. 

  882. 

  883. 

  884.     var customFormatter_dero = function(cell, formatterParams, onRendered) {

  885.         //cell - the cell component

  886.         //formatterParams - parameters set for the column

  887.         //onRendered - function to call when the formatter has been rendered

  888. 

  889.         // return '<div style="text-align: right;">' + cell.getValue() +'</div>';   //return the contents of the cell;

  890. 

  891.         var divisor = new Big("1000000000000");

  892.         var x = new Big(cell.getValue());

  893.         x = x.div(divisor);

  894.         return '<div style="text-align: right;">' + x.toFixed(12) + '</div>';

  895.     };

  896. 

  897. 

  898. 

  899. 

  900.     var txtable = new Tabulator("#txtable", {

  901.         columns: [{

  902.                 title: "Time",

  903.                 field: "time"

  904.             }, {

  905.                 title: "Amount",

  906.                 field: "amount",

  907.                 sorter: "number",

  908.                 formatter: customFormatter_dero

  909.             }, {

  910.                 title: "TXID",

  911.                 field: "txid",

  912.                 sortable: false

  913.             }, {

  914.                 title: "Payment ID",

  915.                 field: "paymentid",

  916.                 width: "8em"

  917.             }, {

  918.                 title: "BL Height",

  919.                 field: "height",

  920.                 sortable: false

  921.             }, {

  922.                 title: "TopoHeight",

  923.                 field: "topoheight",

  924.                 sortable: false

  925.             }, {

  926.                 title: "Status",

  927.                 field: "status"

  928.             },

  929. 

  930.         ],

  931.         // selectable:true,

  932.         layout: "fitDataFill",

  933.         responsiveLayout: "collapse", // collapse columns that no longer fit

  934.         layoutColumnsOnNewData: true,

  935.         // height : "50vh", // show only 20 tx per view, rest must be scrolled

  936.         pagination: "local",

  937.         paginationSize: 10,

  938. 

  939.         rowFormatter: function(row) {

  940.             var data = row.getData();

  941. 

  942.             if (data.status == "1") {

  943. 

  944.                 row.getElement().style.backgroundColor = "#ffcccb"; // spent color

  945.             } else {

  946.                 //row.getElement().style.backgroundColor = "#e5ffff"; // incoming color

  947. 

  948.                 //row.getElement().css({"background-color":"#A6A6DF"});

  949.                 // row.getElement().addClass("text-white"); 

  950. 

  951.             }

  952.         },

  953.     });

  954. 

  955. 

  956. 

  957. 

  958. 

  959. 

  960. 

  961. 

  962. 

  963. 

  964. 

  965.     $(document).ready(function() {

  966. 

  967.         $('.wallet-online').hide();

  968. 

  969.         $('#btn_wallet_disk_file').on('click', function() {

  970.             $('#wallet_disk_file').click();

  971.         });

  972.         

  973.         $('div#blackTheme, div#whiteTheme').on('click', function() {

  974.             var id = $(this).attr('id');

  975.             if (id == "blackTheme") {

  976.                 $('link[title="blackTheme"]').prop('disabled', false);

  977.                 $('link[title="whiteTheme"]').prop('disabled', true);

  978.             } else {

  979.                 $('link[title="whiteTheme"]').prop('disabled', false);

  980.                 $('link[title="blackTheme"]').prop('disabled', true);

  981.             }

  982.             Cookies.set('theme', id, {

  983.                 expires: 3650

  984.             });

  985.         });

  986. 

  987.         var stored_theme = Cookies.get('theme');

  988.         if (typeof(stored_theme) != undefined) {

  989.             $('div#'+stored_theme).trigger('click');

  990.         }

  991. 

  992.         i18next.init({

  993.             // debug: true,

  994.             "lng": 'en',

  995.             "resources": translations,

  996.             "fallbackLng": 'en',

  997. 

  998.             // attributes to translate

  999.             translateAttributes: ['placeholder', 'value', 'title', 'alt', 'value#input.type=button', 'value#input.type=submit'],

  1000. 

  1001.         }, function(t) {

  1002. 

  1003.             //i18next();

  1004. 

  1005.         });

  1006. 

  1007.         jqueryI18next.init(i18next, $, {

  1008.             tName: 't', // --> appends $.t = i18next.t

  1009.             i18nName: 'i18n', // --> appends $.i18n = i18next

  1010.             handleName: 'localize', // --> appends $(selector).localize(opts);

  1011.             selectorAttr: 'data-i18n', // selector for translating elements

  1012.             targetAttr: 'i18n-target', // data-() attribute to grab target element to translate (if diffrent then itself)

  1013.             optionsAttr: 'i18n-options', // data-() attribute that contains options, will load/set if useOptionsAttr = true

  1014.             useOptionsAttr: false, // see optionsAttr

  1015.             parseDefaultValueFromContent: true // parses default values from content ele.val or ele.text

  1016.         });

  1017. 

  1018. 

  1019.         var stored_lang = Cookies.get('lang')

  1020.         if (typeof(stored_lang) != undefined) {

  1021.             // make sure the language reference by cookie is still valid

  1022.             if (translations[stored_lang] != 'undefined') {

  1023.                 i18next.changeLanguage(stored_lang, (err, t) => {

  1024.                     // Select the real language

  1025.                     $('#language_picker > option[data-lang="' + stored_lang + '"]').attr('selected', 'selected');

  1026.                     if (err) return console.log('something went wrong loading', err);

  1027.                 });

  1028.             }

  1029.         } else { // we do not have cookie stored, so time to guess user language

  1030.             var first_lang = getFirstBrowserLanguage();

  1031. 

  1032.             // check language exists

  1033.             if (translations[first_lang] != undefined) {

  1034.                 $('#language_picker > option[data-lang="' + first_lang + '"]').attr('selected', 'selected');

  1035.                 i18next.changeLanguage(first_lang, (err, t) => {

  1036.                     if (err) return console.log('something went wrong loading', err);

  1037. 

  1038.                 });

  1039. 

  1040.             } else { // extract the first part of tag

  1041.                 parts = first_lang.split("-");

  1042.                 if (parts.length >= 2) {

  1043. 

  1044.                     if (translations[parts[0]] != undefined) {

  1045.                         $('#language_picker > option[data-lang="' + parts[0] + '"]').attr('selected', 'selected');

  1046.                         i18next.changeLanguage(parts[0], (err, t) => {

  1047.                             if (err) return console.log('something went wrong loading', err);

  1048.                         });

  1049.                     }

  1050.                 }

  1051.             }

  1052.         }

  1053. 

  1054.         console.log(getFirstBrowserLanguage());

  1055. 

  1056. 

  1057.         $("body").localize(); // localize first time automatically

  1058. 

  1059.         $('#language_picker').on('change', function() {

  1060.             var lang = $(this).find('option:selected').attr('data-lang');

  1061. 

  1062.             Cookies.set('lang', lang, {

  1063.                 expires: 3650

  1064.             }); // 10 years a long time

  1065.             i18next.changeLanguage(lang, (err, t) => {

  1066.                 if (err) return console.log('something went wrong loading', err);

  1067. 

  1068.             });

  1069.             $("body").localize();

  1070. 

  1071. 

  1072.         });

  1073. 

  1074.         setTimeout(function(){

  1075.             $('body').addClass('loaded');

  1076.         }, 1500);

  1077.     });

  1078. 

  1079. 

  1080.     // this is for qrcode reader

  1081.     var qrcode = new QRCode(document.getElementById("qrcode"), {

  1082.         text: "https://dero.io",

  1083.         width: 384,

  1084.         height: 384,

  1085.         colorDark: "#000000",

  1086.         colorLight: "#ffffff",

  1087.         //correctLevel : QRCode.CorrectLevel.H  // ECC highest level, Reading is tough

  1088.         correctLevel: QRCode.CorrectLevel.L // ECC lowest level

  1089.     });

  1090. 

  1091. 

  1092.     var clipboard = new ClipboardJS('.clipboard');

  1093. </script>

  1094. 

  1095. </html>