arcadia/app/scripts/directives/walletDecryptDrtv.html

<article class="block decrypt-drtv clearfix" ng-controller='decryptWalletCtrl as $crtl'>

  <!-- Column 1 - Select Type of Key -->
  <section class="col-md-4 col-sm-6">
    <h4 translate="decrypt_Access"> Select the format of your private key: </h4>
    <label class="radio">
      <input aria-flowto="aria1" aria-label="Keystore JSON file" type="radio" ng-model="walletType" value="fileupload" />
      <span translate="x_Keystore2">Keystore / JSON File</span>
    </label>
    <label class="radio">
      <input aria-flowto="aria2" aria-label="private key" type="radio" ng-model="walletType" value="pasteprivkey" />
      <span translate="x_PrivKey2">Private Key</span>
    </label>
    <label class="radio">
      <input aria-flowto="aria3" aria-label="mnemonic phrase" type="radio" ng-model="walletType" value="pastemnemonic" />
      <span translate="x_Mnemonic">Mnemonic Phrase</span>
    </label>
    <label class="radio" style="display: none;" id="showMeTheMoney">
      <input aria-flowto="aria4" aria-label="parity phrase" type="radio" ng-model="walletType" value="parityBWallet" />
      <span translate="x_ParityPhrase">Parity Phrase</span>
    </label>
    <label class="radio">
      &nbsp;<span translate="x_ParityPhrase">Parity Phrase</span>: <a href="https://myetherwallet.groovehq.com/knowledge_base/topics/parity-phrases-no-longer-supported" target="_blank" rel="noopener">No longer supported</a>
    </label>
    <label class="radio" ng-hide="globalService.currentTab==globalService.tabs.signMsg.id">
      <input aria-flowto="aria5" type="radio" aria-label="Ledger Nano S hardware wallet" ng-model="walletType" value="ledger" />
      Ledger Nano S
    </label>
    <label class="radio" ng-hide="globalService.currentTab==globalService.tabs.signMsg.id">
      <input aria-flowto="aria6" type="radio" aria-label="Trezor hardware wallet" ng-model="walletType" value="trezor" />
      TREZOR
    </label>
    <label class="radio" ng-hide="globalService.currentTab!==globalService.tabs.viewWalletInfo.id">
      <input aria-label="address" type="radio" ng-model="walletType" value="addressOnly" />
      View with Address Only
    </label>
  </section>
  <!-- Column 1 - Select Type of Key -->

  <!-- Column 2 - Unlock That Key -->
  <section class="col-md-4 col-sm-6">

    <!-- if selected upload -->
    <div id="selectedUploadKey" ng-if="walletType=='fileupload'">
      <h4 translate="ADD_Radio_2_alt">Select your wallet file:</h4>
      <div class="form-group">
        <input style="display:none;" type="file" on-read-file="showContent($fileContent)" id="fselector" />
        <a class="btn-file marg-v-sm" ng-click="openFileDialog()" translate="ADD_Radio_2_short" id="aria1" tabindex="0" role="button">SELECT WALLET FILE... </a>
      </div>
      <div class="form-group" ng-if="requireFPass">
        <p translate="ADD_Label_3"> Your file is encrypted. Please enter the password: </p>
        <input class="form-control"
               ng-change="onFilePassChange()"
               ng-class="Validator.isPasswordLenValid($parent.$parent.filePassword,0) ? 'is-valid' : 'is-invalid'"
               ng-model="$parent.$parent.filePassword"
               placeholder="{{ 'x_Password' | translate }}"
               type="password"
        />
      </div>
    </div>
    <!-- /if selected upload -->

    <!-- if selected type key-->
    <div id="selectedTypeKey" ng-if="walletType=='pasteprivkey'">
      <h4 translate="ADD_Radio_3"> Paste / type your private key: </h4>
      <div class="form-group">
        <textarea id="aria2"
                  class="form-control"
                  ng-change="onPrivKeyChange()"
                  ng-class="Validator.isValidPrivKey($parent.$parent.manualprivkey.length) ? 'is-valid' : 'is-invalid'"
                  ng-keyup="$event.keyCode == 13 && decryptWallet()"
                  ng-model="$parent.$parent.manualprivkey"
                  placeholder="{{ 'x_PrivKey2' | translate }}"
                  rows="4"
        ></textarea>
      </div>
      <div class="form-group" ng-if="requirePPass">
        <p translate="ADD_Label_3"> Your file is encrypted. Please enter the password: </p>
        <input class="form-control"
               ng-change="onPrivKeyPassChange()"
               ng-class="Validator.isPasswordLenValid($parent.$parent.privPassword,0) ? 'is-valid' : 'is-invalid'"
               ng-keyup="$event.keyCode == 13 && decryptWallet()"
               ng-model="$parent.$parent.privPassword"
               placeholder="{{ 'x_Password' | translate }}"
               type="password"
        />
      </div>
    </div>
    <!-- /if selected type key-->

    <!-- if selected type mnemonic-->
    <div id="selectedTypeMnemonic" ng-if="walletType=='pastemnemonic'">
      <h4 translate="ADD_Radio_5"> Paste / type your mnemonic: </h4>
      <div class="form-group">
        <textarea id="aria3"
                  class="form-control"
                  ng-change="onMnemonicChange()"
                  ng-class="Validator.isValidMnemonic($parent.$parent.manualmnemonic) ? 'is-valid' : 'is-invalid'"
                  ng-keyup="$event.keyCode == 13 && decryptWallet()"
                  ng-model="$parent.$parent.manualmnemonic"
                  placeholder="{{ 'x_Mnemonic' | translate}}"
                  rows="4"
        ></textarea>
      </div>
      <div class="form-group">
        <p translate="ADD_Label_8">Password (optional): </p>
        <div>
          <input class="form-control"
                 ng-keyup="$event.keyCode == 13 && decryptWallet()"
                 ng-model="$parent.$parent.mnemonicPassword"
                 placeholder="{{ 'x_Password' | translate }}"
                 type="password"
          / >
        </div>
      </div>
    </div>
    <!-- /if selected type mnemonic-->

    <!-- if selected parity phrase-->
    <div id="selectedTypeMnemonic" ng-if="walletType=='parityBWallet'">
      <h4 translate="ADD_Radio_5"> Paste / type your mnemonic: </h4>
      <div class="form-group">
        <textarea rows="4"
                  class="form-control"
                  ng-change="onParityPhraseChange()"
                  ng-class="$parent.$parent.parityPhrase != '' ? 'is-valid' : 'is-invalid'"
                  ng-keyup="$event.keyCode == 13 && decryptWallet()"
                  ng-model="$parent.$parent.parityPhrase"
                  placeholder="{{ 'x_ParityPhrase' | translate}}"
        ></textarea>
      </div>
    </div>
    <!-- /if selected parity phrase-->

    <!-- if selected type ledger-->
    <div id="selectedTypeLedger" ng-if="walletType=='ledger'">
      <ol>
        <li id="aria7" tabinex="0" translate="ADD_Ledger_0a" class="text-danger" ng-hide="isSSL">
          Re-open MyEtherWallet on a secure (SSL) connection
        </li>
        <li tabinex="0">
          <span translate="ADD_Ledger_1">Connect your Ledger Nano S</span> &amp;
          <span translate="ADD_Ledger_2">Open the Ethereum application (or a contract application)</span>
        </li>
        <li tabinex="0" translate="ADD_Ledger_3">
          Verify that Browser Support is enabled in Settings
        </li>
        <li tabinex="0" translate="ADD_Ledger_4">
          If no Browser Support is found in settings, verify that you have Firmware >1.2
        </li>
      </ol>
      <div class="text-center">
        <p>Guides:<br />
          <a href="http://support.ledgerwallet.com/knowledge_base/topics/how-to-use-myetherwallet-with-ledger" target="_blank" rel="noopener">
            How to use MyEtherWallet with your Nano S
          </a><br />
          <a href="https://ledger.groovehq.com/knowledge_base/topics/how-to-secure-your-eth-tokens-augur-rep-dot-dot-dot-with-your-nano-s" target="_blank" rel="noopener">
            How to secure your tokens with your Nano S
          </a><br /><br />
          <a tabindex="0" role="button" class="btn btn-default btn-xs" href="https://www.ledgerwallet.com/r/fa4b?path=/products/" target="_blank" rel="noopener">
            Don't have a Ledger? Buy one today.
          </a>
        </p>
      </div>
    </div>
    <!-- /if selected type ledger-->

    <!-- if selected type trezor-->
    <br />
    <div id="selectedTypeTrezor" ng-if="walletType=='trezor'">
      <div class="form-group">
        <a id="aria6"
           class="btn btn-primary btn-block"
           ng-click="scanTrezor()"
           ng-show="walletType=='trezor'"
           tabindex="0" role="button"
           translate="ADD_Trezor_scan"
        > SCAN </a>
      </div>
      <p role="alert" ng-show="trezorError" class="text-center text-danger"><strong>
        {{trezorErrorString}}
      </strong></p>
      <br /><br />
      <div class="text-center">
        <p>Guide:<br />
          <a href="https://blog.trezor.io/trezor-integration-with-myetherwallet-3e217a652e08#.n5fddxmdg" target="_blank" rel="noopener">
            How to use TREZOR with MyEtherWallet
          </a><br />
          <a tabindex="0" role="button" class="btn btn-xs btn-default" href="https://trezor.io/?a=myetherwallet.com" target="_blank" rel="noopener">
            Don't have a TREZOR? Order one now.
          </a>
        </p>
      </div>
    </div>
    <!-- /if selected type ledger-->

    <!-- if selected addressOnly-->
    <div id="selectedTypeKey" ng-if="walletType=='addressOnly'">
      <h4 translate="x_Address"> Your Address </h4>
      <div class="form-group">
        <textarea rows="4"
                  class="form-control"
                  ng-change="onAddressChange()"
                  ng-class="Validator.isValidAddress($parent.$parent.addressOnly) ? 'is-valid' : 'is-invalid'"
                  ng-model="$parent.$parent.addressOnly"
                  placeholder="{{ 'x_Address' | translate }}"
        ></textarea>
      </div>
    </div>
    <!-- /if selected addressOnly-->

  </section>
  <!-- / Column 2 - Unlock That Key -->

  <!-- Column 3 - The Unlock Button -->
  <section class="col-md-4 col-sm-6" ng-show="showFDecrypt||showPDecrypt||showMDecrypt||walletType=='ledger'||walletType=='trezor'||showAOnly||showParityDecrypt">
    <h4 id="uploadbtntxt-wallet" ng-show="showFDecrypt||showPDecrypt||showMDecrypt" translate="ADD_Label_6">
      Access Your Wallet:
    </h4>
    <div class="form-group">
      <a
      tabindex="0"
      role="button"
      class="btn btn-primary btn-block"
      ng-show="showFDecrypt||showPDecrypt||showMDecrypt||showParityDecrypt"
      ng-click="decryptWallet()"
      translate="ADD_Label_6_short">UNLOCK</a>
    </div>
    <div class="form-group">
      <a class="btn btn-primary btn-block"
         ng-click="decryptAddressOnly()"
         ng-show="showAOnly"
         role="button"
         tabindex="0"
         translate="ADD_Label_6_short"
      > UNLOCK </a>
    </div>
    <div class="form-group">
      <a class="btn btn-primary btn-block"
         ng-click="scanLedger()"
         ng-show="walletType=='ledger'"
         role="button"
         tabindex="0"
         translate="ADD_Ledger_scan"
      > SCAN </a>
    </div>
  </section>

  <!-- / Column 3 -The Unlock Button -->

  <!-- MODAL -->
  <article class="modal fade" id="mnemonicModel" tabindex="-1" role="dialog" aria-labelledby="Mnemonic Phrase Modal">
    <section class="modal-dialog">
      <section class="modal-content">
        <div class="modal-body" role="document">
          <button aria-label="Close" type="button" class="close" data-dismiss="modal">&times;</button>

          <!-- Select HD Path -->
          <h3 id="modalTitle" class="modal-title" translate="ADD_Radio_5_Path">
            Select HD derivation path:
          </h3>

          <table class="small table table-striped table-mnemonic">

            <tr>
              <th> Path </th>
              <th> Used By </th>
            </tr>

            <tr>
              <td>
                <label class="radio">
                  <input aria-describedby="Path: Jaxx, Metamask, Exodus, imToken - {{HDWallet.defaultDPath}}"
                         ng-change="onHDDPathChange()"
                         ng-model="HDWallet.dPath"
                         type="radio"
                         value="{{HDWallet.defaultDPath}}"/>
                  <span ng-bind="HDWallet.defaultDPath"></span>
                </label>
              </td>
              <td> Jaxx, Metamask, Exodus, imToken &amp; TREZOR (ETH)</td>
            </tr>

            <tr>
              <td>
                <label class="radio">
                  <input aria-describedby="Path: Ledger (ETH) {{HDWallet.ledgerPath}}"
                         ng-change="onHDDPathChange()"
                         ng-model="HDWallet.dPath"
                         type="radio"
                         value="{{HDWallet.ledgerPath}}"/>
                  <span ng-bind="HDWallet.ledgerPath"></span>
                </label>
              </td>
              <td> Ledger (ETH)</td>
            </tr>

            <tr>
              <td>
                <label class="radio">
                  <input aria-describedby="Path: Ledger (ETC) {{HDWallet.ledgerClassicPath}}"
                         ng-change="onHDDPathChange()"
                         ng-model="HDWallet.dPath"
                         type="radio"
                         value="{{HDWallet.ledgerClassicPath}}"/>
                  <span ng-bind="HDWallet.ledgerClassicPath"></span>
                </label>
              </td>
              <td> Ledger (ETC) </td>
            </tr>

            <tr>
              <td>
                <label class="radio">
                  <input aria-describedby="Path: TREZOR (ETC) {{HDWallet.trezorClassicPath}}"
                         ng-change="onHDDPathChange()"
                         ng-model="HDWallet.dPath"
                         type="radio"
                         value="{{HDWallet.trezorClassicPath}}"/>
                  <span ng-bind="HDWallet.trezorClassicPath"></span>
                </label>
              </td>
              <td> TREZOR (ETC) </td>
            </tr>

            <tr>
              <td>
                <label class="radio">
                  <input aria-describedby="Path: TREZOR - TESTNET - {{HDWallet.trezorTestnetPath}}"
                         ng-change="onHDDPathChange()"
                         ng-model="HDWallet.dPath"
                         type="radio"
                         value="{{HDWallet.trezorTestnetPath}}"/>
                  <span ng-bind="HDWallet.trezorTestnetPath"></span>
                </label>
              </td>
              <td> TREZOR (TESTNET) </td>
            </tr>

            <tr class="mnemonic-custom-row">
              <td>
                <label class="radio">
                  <input aria-describedby="Path: Enter your own - {{HDWallet.customDPath}}"
                         ng-change="onHDDPathChange()"
                         ng-model="HDWallet.dPath"
                         type="radio"
                         value="{{HDWallet.customDPath}}" />
                  <input aria-describedby="Path: Enter your own - {{HDWallet.customDPath}}"
                         type="text" class="form-control"
                         ng-model="HDWallet.customDPath"
                         ng-change="onCustomHDDPathChange()" />
                </label>
              </td>
              <td> Your Custom Path </td>
            </tr>

          </table>
          <!-- END Select HD Path -->

          <!-- Select Address -->
          <hr />
          <h3 id="modalTitle2" class="modal-title" translate="MNEM_1">
            Please select the address you would like to interact with.
          </h3>
          <p class="small" translate="MNEM_2">
            Your single HD mnemonic phrase can access a number of wallets / addresses.
          </p>
          <table class="small table table-striped table-mnemonic">
            <tr>
              <th translate="x_Address">Address</th>
              <th translate="MYWAL_Bal">Balance</th>
              <th translate="sidebar_TokenBal" class="text-center" >Token<br>Balances</th>
            </tr>
            <tr ng-repeat="wallet in HDWallet.wallets track by $index">
              <td>
                <label>
                  <input aria-describedby="modalTitle2"
                         aria-label="Unlock wallet with {{wallet.getBalance()}} {{nodeType}}. Address: {{wallet.getChecksumAddressString()}}"
                         name="addressSelect"
                         ng-model="HDWallet.id"
                         type="radio"
                         value="{{$index}}"
                  />{{wallet.getChecksumAddressString()}}
                </label>
              </td>
              <td> {{wallet.getBalance()}} {{nodeType}} </td>
              <td class="text-center">
                <a href="https://ethplorer.io/address/{{wallet.getAddressString()}}" target="_blank" rel="noopener" title="https://ethplorer.io/address/{{wallet.getAddressString()}}">
                  <img src="images/icon-external-link.svg" title="https://ethplorer.io/address/{{wallet.getAddressString()}}" ng-click="removeTokenFromLocal(token.symbol)" ng-show="token.type!=='default'" />
              </td>
            </tr>
            <tr class="m-addresses">
              <td>
                <a ng-click="AddRemoveHDAddresses(false)"
                   ng-show="HDWallet.numWallets > 5"
                   role="link"
                   tabindex="0"
                   translate="MNEM_prev"
                > Previous Addresses </a>
              </td>
              <td></td>
              <td>
                <a ng-click="AddRemoveHDAddresses(true)"
                   role="link"
                   tabindex="0"
                   translate="MNEM_more"
                > More Addresses </a>
              </td>
            </tr>
          </table>

          <!-- END Select Address -->
        </div>
        <div class="modal-footer">
          <button aria-label="Cancel - Will close dialog"
                  class="btn btn-default"
                  data-dismiss="modal"
                  role="button"
                  tabindex="0"
                  translate="x_Cancel"
          > Cancel </button>
          <button aria-label="Unlock this Wallet"
                  class="btn btn-primary"
                  ng-click="setHDWallet()"
                  role="button"
                  tabindex="0"
                  translate="ADD_Label_6"
          > Access Wallet </button>
        </div>
      </section>
    </section>
  </article>

  <!-- / MODAL -->
</article>