copay/public/views/walletHome.html

<div class="topbar-container"
  ng-include="'views/includes/topbar.html'"
  ng-init="showPreferences = true">
</div>

<div ng-controller="walletHomeController as home">
  <div class="row columns m20tp" ng-show="index.noFocusedWallet">
    <div class="text-center text-warning m20b">
      <i class="fi-alert"></i> <span translate>You do not have a wallet</span>
    </div>
    <button class="button black round expand" ng-click="$root.go('add')" translate>Create</button>

    <div class="text-center text-gray p20v" ng-click="$root.go('preferencesGlobal')">
      <button class=" outline round dark-gray tiny" translate>Settings</button>
    </div>
  </div>

  <div class="onGoingProcess" ng-show="index.isOffline">
    <div class="onGoingProcess-content" ng-style="{'background-color':'#222'}">
      <div class="spinner">
        <div class="rect1"></div>
        <div class="rect2"></div>
        <div class="rect3"></div>
        <div class="rect4"></div>
        <div class="rect5"></div>
      </div>
      <span translate>Reconnecting to Wallet Service...</span>
    </div>
  </div>

  <div class="onGoingProcess" ng-show="index.anyOnGoingProcess && !index.isOffline">
    <div class="onGoingProcess-content" ng-style="{'background-color':index.backgroundColor}">
      <div class="spinner">
        <div class="rect1"></div>
        <div class="rect2"></div>
        <div class="rect3"></div>
        <div class="rect4"></div>
        <div class="rect5"></div>
      </div>
      <span translate ng-show="
        index.onGoingProcessName == 'openingWallet'
        || index.onGoingProcessName == 'updatingStatus'
        || index.onGoingProcessName == 'updatingBalance'
        || index.onGoingProcessName == 'updatingPendingTxps'
        "> Updating Wallet... </span>
      <span translate ng-show="index.onGoingProcessName == 'scanning'">Scanning Wallet funds...</span>
      <span translate ng-show="index.onGoingProcessName == 'recreating'">Recreating Wallet...</span>
      <span translate ng-show="index.onGoingProcessName == 'generatingCSV'">Generating .csv file...</span>
    </div>
  </div>

  <div class="onGoingProcess" ng-show="home.onGoingProcess && !index.anyOnGoingProces && !index.isOffline">
    <div class="onGoingProcess-content" ng-style="{'background-color':index.backgroundColor}">
      <div class="spinner">
        <div class="rect1"></div>
        <div class="rect2"></div>
        <div class="rect3"></div>
        <div class="rect4"></div>
        <div class="rect5"></div>
      </div>
      {{home.onGoingProcess}}...
    </div>
  </div>

  <div class="oh" ng-show="!index.noFocusedWallet">

    <!--

    WalletHome

    -->

    <div id="walletHome" class="walletHome tab-view tab-in">
      <div class="oh pr" ng-show="!index.isSearching">
        <div class="amount" ng-style="{'background-color':index.backgroundColor}">
          <div ng-if="!index.anyOnGoingProcess && !index.notAuthorized">
            <div class="m15t" ng-show="index.updateError" ng-click='index.updateAll({triggerTxUpdate: true})'>
              <span class="size-12 db m10b">{{index.updateError|translate}}</span>
              <button class="outline white tiny round" translate>Tap to retry</button>
            </div>

            <div ng-show="index.walletScanStatus == 'error'" ng-click='index.retryScan()'>
              <span translate>Scan status finished with error</span>
              <br><span translate>Tap to retry</span>
            </div>

            <div ng-click='index.updateAll({triggerTxUpdate: true})'  ng-show="!index.updateError && index.walletScanStatus != 'error'">
              <strong class="size-36">{{index.totalBalanceStr}}</strong>
              <div class="size-14"
                ng-if="index.totalBalanceAlternative">
                {{index.totalBalanceAlternative}} {{index.alternativeIsoCode}}
              </div>
              <div class="size-14"
                ng-if="index.pendingAmount">
                <span translate>Pending Confirmation</span>:
                {{index.pendingAmountStr}}
              </div>

            </div>
          </div>

          <div ng-if="index.anyOnGoingProcess">
            <div class="size-36">
              <strong>...</strong>
            </div>
          </div>
        </div> <!-- amount -->

        <div class="wallet-info">
          <span ng-include="'views/includes/walletInfo.html'"></span>
        </div>
        <div class="camera-icon" ng-show="index.isComplete">
          <qr-scanner on-scan="home.onQrCodeScanned(data)"></qr-scanner>
        </div>
      </div> <!-- oh -->


      <div class="oh pr m20t" ng-show="index.notAuthorized && ! index.anyOnGoingProcess">
        <div class="text-center text-warning">
          <i class="fi-alert"></i>
          <span translate>
            WARNING: Wallet not registered
          </span>
        </div>
        <div class="text-center text-gray m15r m15l" translate>
          This wallet is not registered at the given Bitcore Wallet Service (BWS). You can recreate it from the local information.
        </div>
        <div class="text-center m10t ">
          <span class="button outline round dark-gray tiny"
            ng-click="index.recreate()">
            <span translate>Recreate</span>
          </span>
        </div>
      </div>

      <div class="release size-12" ng-show="newRelease && !index.isSearching" ng-click="$root.openExternalLink('https://github.com/bitpay/copay/releases/latest')">
        <span>{{newRelease}}</span><i class="icon-arrow-right3 right size-18"></i>
      </div>

      <div class="oh pr" ng-if="index.txps[0]" ng-show="!index.isSearching">
        <h4 ng-show="index.requiresMultipleSignatures" class="title m0" translate>Payment Proposals</h4>
        <h4 ng-show="!index.requiresMultipleSignatures" class="title m0" translate>Unsent transactions</h4>
        <div class="last-transactions pr" ng-repeat="tx in index.txps">
          <div ng-include="index.txTemplateUrl"></div>
        </div>

        <div class="text-gray text-center size-12 p10t"
          ng-show="index.lockedBalanceSat">
          <span translate>Total Locked Balance</span>:
          <b>{{index.lockedBalanceStr}} </b>
          <span> {{index.lockedBalanceAlternative}}
            {{index.alternativeIsoCode}} </span>
        </div>
      </div>

      <!-- Activity -->

      <div
          class="oh pr m20t text-gray size-12 text-center"
          ng-show="!index.loadingWallet && !index.txHistory[0] && !index.updatingTxHistory && !index.txHistoryError && !index.updateError" translate>
        No transactions yet
      </div>

      <div class="oh pr" ng-show="index.txHistory[0] || index.txProgress > 5">
        <h4 class="title" ng-click="index.startSearch(); search=''" ng-show="!index.isSearching">
          <span translate>Activity</span>
          <i class="dib m5l size-16 pointer fi-magnifying-glass"></i>
        </h4>

        <div ng-show="index.updatingTxHistory && index.txProgress > 5">
          <div  class="row p20 text-center">
            <div class="columns large-12 medium-12 small-12 m10b">
              <div class="spinner">
                <div class="rect1"></div>
                <div class="rect2"></div>
                <div class="rect3"></div>
                <div class="rect4"></div>
                <div class="rect5"></div>
              </div>
            </div>
            <div class="size-12 text-gray m20t">
              <div translate>{{index.txProgress}} transactions downloaded</div>
              <div translate>Updating transaction history. Please stand by.</div>
            </div>
          </div>
        </div>

        <div ng-if="index.txHistory[0] &&  index.updatingTxHistory && index.newTx" class="row collapse last-transactions-content animated fadeInDown">
          <div class="large-6 medium-6 small-6 columns size-14">
            <div class="m10r left">
              <img src="img/icon-new.svg" width="40">
            </div>
            <div class="m10t" style="background:#eee; width: 8em; margin-left: 52px; line-height:0.6em">
              <span>&nbsp;</span>
            </div>
            <div style="margin-top:5px; background:#eee; width: 6em; margin-left: 52px; line-height:0.6em">
              <span>&nbsp;</span>
            </div>
          </div>
        </div>

        <div ng-show="index.isSearching" class="row searchBar">
          <div class="small-11 columns">
            <div class="searchLabel">
              <i class="fi-magnifying-glass size-14"></i>
              <form>
                <input name="search"
                  type="search"
                  ng-change="index.updateSearchInput(search)"
                  placeholder="{{'Search transactions' | translate}}"
                  ng-model="search">
                </input>
              </form>
            </div>
          </div>
          <div class="small-1 columns">
            <a ng-click="index.cancelSearch()" translate>Cancel</a>
          </div>
        </div>
        <div ng-repeat="btx in index.txHistorySearchResults track by btx.txid"
          fast-click callback-fn="home.openTxModal(btx)"
          class="row collapse last-transactions-content">
          <div class="large-6 medium-6 small-6 columns size-14">
            <div class="m10r left">
              <img src="img/icon-receive-history.svg" alt="sync" width="40" ng-show="btx.action == 'received'">
              <img src="img/icon-sent-history.svg" alt="sync" width="40" ng-show="btx.action == 'sent'">
              <img src="img/icon-moved.svg" alt="sync" width="40" ng-show="btx.action == 'moved'">
            </div>
            <div class="m10t">
              <span ng-show="btx.action == 'received'" translate>Received</span>
              <span ng-show="btx.action == 'sent'">
                {{index.addressbook[btx.addressTo]}}
                <span ng-show="!index.addressbook[btx.addressTo] && btx.message">
                  <span class="ellipsis">{{btx.message}}</span>
                </span>
                <span ng-show="!index.addressbook[btx.addressTo] && !btx.message">
                  <span translate> Sent</span>
                </span>
              </span>
              <span ng-show="btx.action == 'moved'" translate>Moved</span>
              <span class="label tu warning radius" ng-show="btx.action == 'invalid'" translate>Invalid</span>
            </div>
          </div>

          <div class="large-5 medium-5 small-5 columns text-right" >
            <span class="size-16"  ng-class="{'text-bold': btx.recent}">
              <span ng-if="btx.action == 'received'">+</span>
              <span ng-if="btx.action == 'sent'">-</span>
              <span  class="size-12" ng-if="btx.action == 'invalid'" translate>
              (possible double spend)
              </span>
              <span  ng-if="btx.action != 'invalid'">
              {{btx.amountStr}}
              </span>
            </span>
            <div class="size-12 text-gray">
              <time ng-if="btx.time">{{btx.time * 1000 | amTimeAgo}}</time>
              <span translate class="text-warning"
                ng-show="!btx.time && (!btx.confirmations || btx.confirmations == 0)">
                Unconfirmed
              </span>
            </div>
          </div>
          <div class="large-1 medium-1 small-1 columns text-right m10t">
            <i class="icon-arrow-right3 size-18"></i>
          </div>
        </div>

        <div class="row m20t text-center" ng-show="index.historyRendering && !index.isSearching">
          <div class="columns large-12 medium-12 small-12">
            <div class="spinner">
              <div class="rect1"></div>
              <div class="rect2"></div>
              <div class="rect3"></div>
              <div class="rect4"></div>
              <div class="rect5"></div>
            </div>
          </div>
        </div>

        <div class="m20t text-center">
          <a class="text-gray size-12"
             ng-show="index.historyShowMore"
             ng-click="index.showMore()">
            <span translate>Show more</span>
            <span ng-if="!index.isSearching">
              ({{index.completeHistory.length - index.txHistory.length}})
            </span>
            <span ng-if="index.isSearching">
              ({{index.result.length - index.txHistorySearchResults.length}})
            </span>
            <i class="icon-arrow-down4"></i>
          </a>
        </div>
      </div>


      <div class="extra-margin-bottom"></div>
    </div> <!-- END WalletHome -->

    <!--

    receive

    -->
    <div id="receive" class="receive tab-view">

      <div ng-show="index.needsBackup" class="p60t columns text-center">
        <div class="circle-icon">
          <i class="fi-alert size-48"></i>
        </div>
        <h5 translate>Backup Needed</h5>
        <p class="text-gray m20b columns" translate>
          Before receiving funds, it is necessary backup your wallet. If you lose this device, it is impossible to access your funds without a backup.
        </p>
        <button class="m20t button black expand round"
          ng-click="$root.go('backup')" ng-style="{'background-color':index.backgroundColor}" >
          <span translate>Backup now</span>
        </button>
      </div>
      <div ng-show="!index.needsBackup">
        <div class="box-notification m20t" ng-show="home.addrError">
          <span class="text-warning">
            {{home.addrError|translate}}
          </span>
        </div>
        <div class="row">
          <!-- Address-->
          <div class="large-12 columns">
            <h2 class="text-center m10t" translate>My Bitcoin address</h2>
            <div class="text-center" ng-click="home.copyToClipboard(home.addr)" ng-show="home.addr || home.generatingAddress">
              <qrcode size="220" data="bitcoin:{{home.addr}}"></qrcode>
              <div ng-show="home.generatingAddress" style="position:relative; top:-226px; height:0px">
                <div style="height:220px; width:220px; margin:auto; background: white">
                  <div class="spinner" style="margin-top:85px">
                    <div class="rect1"></div>
                    <div class="rect2"></div>
                    <div class="rect3"></div>
                    <div class="rect4"></div>
                    <div class="rect5"></div>
                  </div>
                </div>
              </div>
              <div class="m10t" >
                <h4 ng-class="{'enable_text_select': !index.isCordova}" class="size-12">
                  {{home.generatingAddress ? '...' : home.addr}}
                </h4>
              </div>
            </div>
          </div>
        </div>
        <div class="row m20t">
          <div class="small-12 columns" ng-show="index.isCordova && home.addr">
            <button class="button outline light-gray small round expand"
              ng-click="home.shareAddress(home.addr)"
              ng-disabled="home.generatingAddress">
              <span translate>Share address</span>
            </button>
          </div>
          <div class="small-12 columns" ng-show="home.addr">
            <button class="button expand small round m10b" ng-click="home.openCustomizedAmountModal(home.addr)"
            ng-style="{'background-color':index.backgroundColor}"
            ng-disabled="home.generatingAddress">
              <span translate>Request a specific amount</span>
            </button>
          </div>
        </div>
        <div class="row m10t" ng-show="home.addr" >
          <div class="large-12 columns">
            <div class="line-t size-10 text-gray m10b p10t">
              <span translate> Share this wallet address to receive payments. To protect your privacy, new addresses are generated automatically once you use them.</span>
                <a ng-show="!home.blockUx && !home.generatingAddress" ng-click="home.setAddress(true)" translate>Generate new address</a>
            </div>
          </div>
        </div>
      </div>
      <div class="extra-margin-bottom"></div>
    </div> <!-- END Receive -->


    <!--

    send

    -->
    <div id="send" class="send tab-view">
      <div class="pr p25b">
        <h4 class="title m0">
          <available-balance></available-balance>
          <span
            ng-show="home.lockedCurrentFeePerKb || home.blockUx || home.lockAmount"
            class="text-gray" translate>Send All</span>
          <a
            ng-show="index.availableBalanceSat > 0 && !home.lockedCurrentFeePerKb && !home.blockUx && !home.lockAmount"
            ng-click="home.sendAll(index.totalBytesToSendMax, index.availableBalanceSat)"
             translate> Send All
          </a>
          <div ng-show="!home.paymentExpired && home._paypro">
            <span translate>Payment expires</span>
            <time> {{home.remainingTimeStr}}</time>
          </div>
        </h4>
        <div class="camera-icon" ng-show="index.isComplete">
          <qr-scanner on-scan="home.onQrCodeScanned(data)"></qr-scanner>
        </div>
      </div>
      <div class="box-notification m20t" ng-show="home.error" ng-click="home.resetError()">
        <span class="text-warning">
          {{home.error|translate}}
        </span>
      </div>
      <div class="row m20t">
        <div class="large-12 large-centered columns">
          <form name="sendForm" ng-disabled="home.blockUx || home.onGoingProcess" novalidate>

            <div ng-hide="home._paypro || home.hideAddress">
              <div class="row collapse">
                <label for="address" class="left" >
                  <span translate>To</span>
                </label>
                <span ng-hide="sendForm.address.$pristine">
                  <span class="has-error right size-12" ng-show="sendForm.address.$invalid && _address">
                    <i class="icon-close-circle size-14"></i>
                    <span class="vm" translate>Not valid</span>
                  </span>
                  <small class="right text-primary" ng-show="!sendForm.address.$invalid">
                    <i class="icon-checkmark-circle size-14"></i>
                  </small>
                </span>
              </div>

              <div class="input">
                <input ng-show="sendForm.address.$invalid" class="m0" type="text" id="address" name="address" ng-disabled="home.blockUx || home.lockAddress" ng-attr-placeholder="{{'Bitcoin address'|translate}}" ng-model="_address" valid-address required ng-focus="home.formFocus('address')" ng-blur="home.formFocus(false)">
                <div class="addressbook-input" ng-show="!sendForm.address.$invalid && _address">
                  {{index.addressbook[_address] || _address}}
                </div>
                <a class="postfix size-12 m0 text-gray"
                ng-style="{'color':index.backgroundColor}"
                fast-click callback-fn="home.openDestinationAddressModal(index.otherWallets, _address)">
                  <i class="icon-wallet text-bold size-18"></i>
                </a>
              </div>
            </div>
            <div ng-show="home._paypro && !home.hideAddress">
              <div class="row collapse" ng-click="home.openPPModal(home._paypro)">

                <label for="domain">
                  <span translate>Payment to</span>
                </label>

                <div class="input block">
                  <input class="p45li" type="text" id="domain" name="domain" ng-model="home._paypro.domain" ng-disabled="1">
                  <i ng-show="home._paypro.verified && home._paypro.caTrusted" class="fi-lock color-greeni"></i>
                  <i ng-show="!home._paypro.caTrusted" class="fi-unlock color-yellowi"></i>
                </div>
              </div>
            </div>

            <div class="row" ng-init="home.hideAlternative()" ng-hide="home.hideAmount">
              <div class="large-12 medium-12 columns">
                <div class="right" ng-hide="sendForm.amount.$pristine && !sendForm.amount.$modelValue ">
                  <span class="has-error right size-12" ng-if="sendForm.amount.$invalid">
                    <i class="icon-close-circle size-14"></i>
                    <span clas="vm" translate>Not valid</span>
                  </span>
                  <small class="text-primary right" ng-if="!sendForm.amount.$invalid && !sendForm.alternative.$invalid">
                    <i class="icon-checkmark-circle size-14"></i>
                  </small>
                </div>
                <div ng-if="!home.canShowAlternative()">
                  <label for="amount">
                    <span translate>Amount</span>
                  </label>
                  <div class="input">
                    <input type="number" id="amount" ng-disabled="home.blockUx || home.lockAmount" name="amount" ng-attr-placeholder="{{'Amount in'|translate}} {{home.unitName}}" ng-minlength="0.00000001" ng-maxlength="10000000000" ng-model="_amount" valid-amount required autocomplete="off" ng-focus="home.formFocus('amount')" ng-blur="home.formFocus(false)">
                    <input type="number" id="alternative"  name="alternative"  ng-model="_alternative" style="display:none">
                    <a class="postfix button" ng-style="{'background-color':index.backgroundColor}" ng-click="home.showAlternative()">{{home.unitName}}</a>
                  </div>
                </div>
                <div ng-if="home.canShowAlternative()">
                  <label for="alternative"><span translate>Amount</span> [{{ home.alternativeIsoCode }}]
                  </label>
                  <div class="input">
                    <input type="number" id="alternative" ng-disabled="home.blockUx || !home.isRateAvailable || home.lockAmount" name="alternative" ng-attr-placeholder="{{'Amount in'|translate}} {{ home.alternativeName }}" ng-model="_alternative" required autocomplete="off" ng-focus="home.formFocus('amount')" ng-blur="home.formFocus(false)">
                    <input type="number" id="amount" name="amount" ng-model="_amount" style="display:none">
                    <a class="postfix button black" ng-click="home.hideAlternative()"> {{ home.alternativeIsoCode }}</a>
                  </div>
                </div>
              </div>
            </div>
            <div class="row" ng-hide="home.hideNote">
              <div class="large-12 columns">
                <label for="comment"><span translate>Note</span>
                  <small translate ng-hide="!sendForm.comment.$pristine">optional</small>
                  <small translate class="has-error" ng-show="sendForm.comment.$invalid && !sendForm.comment.$pristine">too long!</small>
                </label>
                <div class="input">
                  <textarea id="comment" ng-disabled="home.blockUx" name="comment"
                    ng-maxlength="500" ng-model="_comment" ng-focus="home.formFocus('msg')"
                    ng-blur="home.formFocus(false)"></textarea>
                </div>
              </div>
            </div>

            <div class="row" ng-show="!home.onGoingProcess">
              <div class="large-6 medium-6 small-6 columns" ng-show="!home.blockUx && (home._paypro || home.lockAddress || home.lockAmount)">
                <a fast-click callback-fn="home.resetForm(sendForm)" class="button expand outline dark-gray round" translate>Cancel</a>
              </div>
              <div class="columns" ng-class="{'small-6 medium-6 large-6':(home._paypro || home.lockAddress || home.lockAmount)}">
                <button class="button black round expand" ng-disabled="sendForm.$invalid || home.blockUx || index.isOffline || home.paymentExpired"
                  ng-style="{'background-color':index.backgroundColor}" fast-click callback-fn="home.submitForm()" translate>
                  Send
                </button>
              </div>

            </div>
          </form>
        </div>
      </div>
      <div class="extra-margin-bottom"></div>
    </div> <!-- END Send -->

    <div id="{{view.id}}" class="{{view.class}} tab-view" ng-repeat="view in index.addonViews" ng-include="view.template">
    </div>

  </div>
</div>
<div class="extra-margin-bottom"></div>
<div ng-include="'views/includes/menu.html'" ng-show="!index.noFocusedWallet && !$root.shouldHideMenuBar"></div>