ledger backup and recovery

app/extensions/brave/locales/en-US/preferences.properties

@@ -59,6 +59,7 @@ bitcoinVisitAccount=Transfer BTC
 bitcoinBalance=Please transfer: 
 bitcoinWalletNotAvailable=Wallet information not available. :(
 usd=$
+cancel=Cancel
 done=Done
 off=off
 on=on
@@ -71,6 +72,9 @@ add=Fund with debit/credit
 transferTime=Transfer may take up to 40 minutes
 addFundsTitle=Add funds…
 addFunds=Three ways to add funds to your Brave Wallet
+copy=Copy
+firstKey=Key 1
+secondKey=Key 2
 copyToClipboard=Copy to clipboard
 smartphoneTitle=Use your smartphone app to transfer Bitcoin
 displayQRCode=Display QR code
@@ -110,6 +114,20 @@ offerSearchSuggestions=Autocomplete search term as you type
 doNotTrackTitle=Do Not Track
 doNotTrack=Send a 'Do Not Track' header with browsing requests (requires browser restart)
 blockCanvasFingerprinting=Fingerprinting Protection (may break some websites)
+advancedSettings=Advanced Settings...
+advancedSettingsTitle=Advanced Settings for Brave Payments
+ledgerRecoveryTitle=Recover your Brave wallet
+ledgerRecoverySubtitle=Enter your recovery keys below
+ledgerRecoveryContent=The balance of the recovered wallet will be transferred to your new Brave wallet. The old wallet will still exist as an empty wallet.
+ledgerBackupTitle=Backup your Brave wallet
+ledgerBackupContent=Below, you will find the anonymized recovery keys that are required if you ever lose access to this computer. We recommend that you print or save these keys and store them in a safe place, like your local safe deposit box, or under your mattress. It's really up to you!
+minimumPageTimeSetting=Minimum page time before logging a visit
+minimumVisitsSetting=Minimum visits for publisher relevancy
+backupLedger=Backup your wallet
+recoverLedger=Recover your wallet
+recover=Recover
+printKeys=Print keys
+saveRecoveryFile=Save recovery file...
 advancedPrivacySettings=Advanced Privacy Settings:
 braveryDefaults=Bravery Defaults
 blockAttackSites=Block reported attack sites (not available yet)

app/ledger.js

@@ -133,9 +133,25 @@ const doAction = (action) => {
         case settings.PAYMENTS_ENABLED:
           initialize(action.value, 'changeSettingPaymentsEnabled')
           break
+
         case settings.PAYMENTS_CONTRIBUTION_AMOUNT:
           setPaymentInfo(action.value)
           break
+
+        case settings.MINIMUM_VISIT_TIME:
+          if (action.value <= 0) break
+
+          synopsis.options.minDuration = action.value
+          updatePublisherInfo()
+          break
+
+        case settings.MINIMUM_VISTS:
+          if (action.value <= 0) break
+
+          synopsis.options.minPublisherVisits = action.value
+          updatePublisherInfo()
+          break
+
         default:
           break
       }
@@ -569,6 +585,8 @@ var enable = (paymentsEnabled) => {
  */
 
 var publisherInfo = {
+  options: undefined,
+
   synopsis: undefined,
 
   _internal: {
@@ -599,13 +617,15 @@ var updatePublisherInfo = () => {
   syncWriter(pathName(synopsisPath), synopsis, () => {})
   publisherInfo.synopsis = synopsisNormalizer()
 
+  publisherInfo.options = synopsis.options
+
   if (publisherInfo._internal.debugP) {
     data = []
     publisherInfo.synopsis.forEach((entry) => {
       data.push(underscore.extend(underscore.omit(entry, [ 'faviconURL' ]), { faviconURL: entry.faviconURL && '...' }))
     })
 
-    console.log('\nupdatePublisherInfo: ' + JSON.stringify(data, null, 2))
+    console.log('\nupdatePublisherInfo: ' + JSON.stringify({ options: publisherInfo.options, synopsis: data }, null, 2))
   }
 
   appActions.updatePublisherInfo(underscore.omit(publisherInfo, [ '_internal' ]))
@@ -869,6 +889,14 @@ var ledgerInfo = {
   buyURL: undefined,
   bravery: undefined,
 
+  // wallet credentials
+  paymentId: undefined,
+  passphrase: undefined,
+
+  // advanced ledger settings
+  minDuration: undefined,
+  minPublisherVisits: undefined,
+
   hasBitcoinHandler: false,
 
   // geoIP/exchange information
@@ -1107,6 +1135,12 @@ var getStateInfo = (state) => {
   var info = state.paymentInfo
   var then = underscore.now() - msecs.year
 
+  ledgerInfo.paymentId = state.properties.wallet.paymentId
+  ledgerInfo.passphrase = state.properties.wallet.keychains.passphrase
+
+  ledgerInfo.minDuration = synopsis.options.minDuration / msecs.second
+  ledgerInfo.minPublisherVisits = synopsis.options.minPublisherVisits
+
   ledgerInfo.created = !!state.properties.wallet
   ledgerInfo.creating = !ledgerInfo.created
 
@@ -1228,7 +1262,6 @@ var getPaymentInfo = () => {
 
       info = underscore.extend(info, underscore.pick(body, [ 'buyURL', 'buyURLExpires', 'balance', 'unconfirmed', 'satoshis' ]))
       info.address = client.getWalletAddress()
-      info.passphrase = client.getWalletPassphrase()
       if ((amount) && (currency)) {
         info = underscore.extend(info, { amount: amount, currency: currency })
         if ((body.rates) && (body.rates[currency])) {

docs/state.md

@@ -478,8 +478,8 @@ WindowStore
       error: object              // error object returned
     }
   },
-  publisherInfo: [               // one entry for each publisher having a non-zero `score`
-    {
+  publisherInfo: {
+    synopsis: [ { // one entry for each publisher having a non-zero `score`
       rank: number,              // i.e., 1, 2, 3, ...
       verified: boolean,         // there is a verified wallet for this publisher
       site: string,              // publisher name, e.g., "wikipedia.org"
@@ -493,8 +493,12 @@ WindowStore
       percentage: number,        // i.e., 0, 1, ... 100
       publisherURL: string,      // publisher site, e.g., "https://wikipedia.org/"
       faviconURL: string         // i.e., "data:image/...;base64,..."
+    } ],
+    options: {
+      minDuration: number,       // e.g., 8000 for 8 seconds
+      minPublisherVisits: number // e.g., 0
     }
-  ],
+  }
   autofillAddressDetail: {
     name: string,
     organization: string,

js/about/aboutActions.js

@@ -75,6 +75,27 @@ const AboutActions = {
     })
   },
 
+  /**
+   * Generates a file with the users backup keys
+   */
+  generateKeyFile: function (backupAction) {
+    AboutActions.dispatchAction({
+      actionType: AppConstants.APP_BACKUP_KEYS,
+      backupAction
+    })
+  },
+
+  /**
+   * Loads a URL in a new frame in a safe way.
+   * It is important that it is not a simple anchor because it should not
+   * preserve the about preload script. See #672
+   */
+  viewKeyFile: function () {
+    AboutActions.dispatchAction({
+      actionType: WindowConstants.WINDOW_VIEW_KEY
+    })
+  },
+
   /**
    * Click through a certificate error.
    *

js/about/preferences.js

@@ -721,6 +721,8 @@ class TabsTab extends ImmutableComponent {
 class PaymentsTab extends ImmutableComponent {
   constructor () {
     super()
+    this.printKeys = this.printKeys.bind(this)
+    this.saveKeys = this.saveKeys.bind(this)
     this.createWallet = this.createWallet.bind(this)
   }
 
@@ -730,6 +732,22 @@ class PaymentsTab extends ImmutableComponent {
     }
   }
 
+  copyToClipboard (text) {
+    aboutActions.setClipboard(text)
+  }
+
+  generateKeyFile (backupAction) {
+    aboutActions.generateKeyFile(backupAction)
+  }
+
+  printKeys () {
+    this.generateKeyFile('print')
+  }
+
+  saveKeys () {
+    this.generateKeyFile('save')
+  }
+
   get enabled () {
     return getSetting(settings.PAYMENTS_ENABLED, this.props.settings)
   }
@@ -839,6 +857,120 @@ class PaymentsTab extends ImmutableComponent {
     </div>
   }
 
+  get advancedSettingsContent () {
+    const minDuration = this.props.ledgerData.get('minDuration')
+    const minPublisherVisits = this.props.ledgerData.get('minPublisherVisits')
+
+    return <div className='board'>
+      <div className='panel'>
+        <div className='settingsPanelDivider'>
+          <div data-l10n-id='minimumPageTimeSetting' />
+          <SettingsList>
+            <SettingItem>
+              <select
+                id='fundsSelectBox'
+                defaultValue={minDuration || 8}
+                onChange={changeSetting.bind(null, this.props.onChangeSetting, settings.MINIMUM_VISIT_TIME)}>>
+                <option value='5'>5 seconds</option>
+                <option value='8'>8 seconds</option>
+                <option value='60'>1 minute</option>
+              </select>
+            </SettingItem>
+          </SettingsList>
+          <div data-l10n-id='minimumVisitsSetting' />
+          <SettingsList>
+            <SettingItem>
+              <select
+                id='fundsSelectBox'
+                defaultValue={minPublisherVisits || 5}
+                onChange={changeSetting.bind(null, this.props.onChangeSetting, settings.MINIMUM_VISTS)}>>>
+                <option value='2'>2 visits</option>
+                <option value='5'>5 visits</option>
+                <option value='10'>10 visits</option>
+              </select>
+            </SettingItem>
+          </SettingsList>
+        </div>
+        {this.enabled
+          ? <SettingCheckbox
+            dataL10nId='notifications'
+            prefKey={settings.PAYMENTS_NOTIFICATIONS}
+            settings={this.props.settings}
+            onChangeSetting={this.props.onChangeSetting} />
+          : null}
+      </div>
+    </div>
+  }
+
+  get advancedSettingsFooter () {
+    return <div className='panel advancedSettingsFooter'>
+      <Button l10nId='backupLedger' className='primaryButton' onClick={this.props.showOverlay.bind(this, 'ledgerBackup')} />
+      <Button l10nId='recoverLedger' className='primaryButton' onClick={this.props.showOverlay.bind(this, 'ledgerRecovery')} />
+      <Button l10nId='done' className='whiteButton inlineButton' onClick={this.props.hideOverlay.bind(this, 'advancedSettings')} />
+    </div>
+  }
+
+  get ledgerBackupContent () {
+    const paymentId = this.props.ledgerData.get('paymentId')
+    const passphrase = this.props.ledgerData.get('passphrase')
+
+    return <div className='board'>
+      <div className='panel'>
+        <span data-l10n-id='ledgerBackupContent' />
+        <div>
+          <div className='copyContainer'>
+            <Button l10nId='copy' className='whiteButton inlineButton' onClick={this.copyToClipboard.bind(this, paymentId)} />
+          </div>
+          <div className='keyContainer'>
+            <h2 data-l10n-id='firstKey' />
+            <span>{paymentId}</span>
+          </div>
+        </div>
+        <div>
+          <div className='copyContainer'>
+            <Button l10nId='copy' className='whiteButton inlineButton' onClick={this.copyToClipboard.bind(this, passphrase)} />
+          </div>
+          <div className='keyContainer'>
+            <h2 data-l10n-id='secondKey' />
+            <span>{passphrase}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  }
+
+  get ledgerBackupFooter () {
+    return <div className='panel advancedSettingsFooter'>
+      <Button l10nId='printKeys' className='primaryButton' onClick={this.printKeys} />
+      <Button l10nId='saveRecoveryFile' className='primaryButton' onClick={this.saveKeys} />
+      <Button l10nId='done' className='whiteButton inlineButton' onClick={this.props.hideOverlay.bind(this, 'ledgerBackup')} />
+    </div>
+  }
+
+  get ledgerRecoveryContent () {
+    return <div className='board'>
+      <div className='panel'>
+        <h3 data-l10n-id='ledgerRecoverySubtitle' />
+        <span data-l10n-id='ledgerRecoveryContent' />
+        <SettingsList>
+          <SettingItem>
+            <h2 data-l10n-id='firstKey' />
+            <input type='text' />
+            <h2 data-l10n-id='secondKey' />
+            <input type='text' />
+          </SettingItem>
+        </SettingsList>
+      </div>
+    </div>
+  }
+
+  get ledgerRecoveryFooter () {
+    return <div className='panel advancedSettingsFooter'>
+      <Button l10nId='cancel' className='whiteButton inlineButton' onClick={this.props.hideOverlay.bind(this, 'ledgerBackup')} />
+      <Button l10nId='recover' className='primaryButton' />
+    </div>
+  }
+
   get nextReconcileDate () {
     const ledgerData = this.props.ledgerData
     if (!ledgerData.get('reconcileStamp')) {
@@ -947,6 +1079,21 @@ class PaymentsTab extends ImmutableComponent {
         ? <ModalOverlay title={'paymentHistoryTitle'} customTitleClasses={'paymentHistory'} content={this.paymentHistoryContent} footer={this.paymentHistoryFooter} onHide={this.props.hideOverlay.bind(this, 'paymentHistory')} />
         : null
       }
+      {
+        this.enabled && this.props.advancedSettingsOverlayVisible
+        ? <ModalOverlay title={'advancedSettingsTitle'} content={this.advancedSettingsContent} footer={this.advancedSettingsFooter} onHide={this.props.hideOverlay.bind(this, 'advancedSettings')} />
+        : null
+      }
+      {
+        this.enabled && this.props.ledgerBackupOverlayVisible
+        ? <ModalOverlay title={'ledgerBackupTitle'} content={this.ledgerBackupContent} footer={this.ledgerBackupFooter} onHide={this.props.hideOverlay.bind(this, 'ledgerBackup')} />
+        : null
+      }
+      {
+        this.enabled && this.props.ledgerRecoveryOverlayVisible
+        ? <ModalOverlay title={'ledgerRecoveryTitle'} content={this.ledgerRecoveryContent} footer={this.ledgerRecoveryFooter} onHide={this.props.hideOverlay.bind(this, 'ledgerRecovery')} />
+        : null
+      }
       <div className='titleBar'>
         <div className='sectionTitleWrapper pull-left'>
           <span className='sectionTitle'>Brave Payments</span>
@@ -957,7 +1104,7 @@ class PaymentsTab extends ImmutableComponent {
             <span data-l10n-id='off' />
             <SettingCheckbox dataL10nId='on' prefKey={settings.PAYMENTS_ENABLED} settings={this.props.settings} onChangeSetting={this.props.onChangeSetting} />
           </div>
-          {this.enabled ? <SettingCheckbox dataL10nId='notifications' prefKey={settings.PAYMENTS_NOTIFICATIONS} settings={this.props.settings} onChangeSetting={this.props.onChangeSetting} /> : null}
+          <Button l10nId='advancedSettings' className='whiteButton inlineButton' onClick={this.props.showOverlay.bind(this, 'advancedSettings')} />
         </div>
       </div>
       {
@@ -1367,6 +1514,9 @@ class AboutPreferences extends React.Component {
       bitcoinOverlayVisible: false,
       qrcodeOverlayVisible: false,
       paymentHistoryOverlayVisible: false,
+      advancedSettingsOverlayVisible: false,
+      ledgerBackupOverlayVisible: false,
+      ledgerRecoveryOverlayVisible: false,
       addFundsOverlayVisible: false,
       preferenceTab: hash.toUpperCase() in preferenceTabs ? hash : preferenceTabs.GENERAL,
       hintNumber: this.getNextHintNumber(),
@@ -1497,6 +1647,9 @@ class AboutPreferences extends React.Component {
           bitcoinOverlayVisible={this.state.bitcoinOverlayVisible}
           qrcodeOverlayVisible={this.state.qrcodeOverlayVisible}
           paymentHistoryOverlayVisible={this.state.paymentHistoryOverlayVisible}
+          advancedSettingsOverlayVisible={this.state.advancedSettingsOverlayVisible}
+          ledgerBackupOverlayVisible={this.state.ledgerBackupOverlayVisible}
+          ledgerRecoveryOverlayVisible={this.state.ledgerRecoveryOverlayVisible}
           addFundsOverlayVisible={this.state.addFundsOverlayVisible}
           showOverlay={this.setOverlayVisible.bind(this, true)}
           hideOverlay={this.setOverlayVisible.bind(this, false)} />

js/constants/appConstants.js

@@ -37,6 +37,7 @@ const AppConstants = {
   APP_CLEAR_MESSAGE_BOXES: _, /** @param {string} origin */
   APP_ADD_WORD: _, /** @param {string} word, @param {boolean} learn */
   APP_SET_DICTIONARY: _, /** @param {string} locale */
+  APP_BACKUP_KEYS: _,
   APP_ADD_AUTOFILL_ADDRESS: _,
   APP_REMOVE_AUTOFILL_ADDRESS: _,
   APP_ADD_AUTOFILL_CREDIT_CARD: _,