ledger backup and recovery

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

@@ -71,6 +71,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 +113,16 @@ 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
+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
+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

@@ -869,6 +869,10 @@ var ledgerInfo = {
   buyURL: undefined,
   bravery: undefined,
 
+  // wallet credentials
+  paymentId: undefined,
+  passphrase: undefined,
+
   hasBitcoinHandler: false,
 
   // geoIP/exchange information
@@ -1107,6 +1111,9 @@ 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.created = !!state.properties.wallet
   ledgerInfo.creating = !ledgerInfo.created
 
@@ -1228,7 +1235,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])) {

js/about/preferences.js

@@ -721,6 +721,7 @@ class TabsTab extends ImmutableComponent {
 class PaymentsTab extends ImmutableComponent {
   constructor () {
     super()
+    this.printKeys = this.printKeys.bind(this)
     this.createWallet = this.createWallet.bind(this)
   }
 
@@ -730,6 +731,23 @@ class PaymentsTab extends ImmutableComponent {
     }
   }
 
+  copyToClipboard (text) {
+    aboutActions.setClipboard(text)
+  }
+
+  printKeys () {
+    const paymentId = this.props.ledgerData.get('paymentId')
+    const passphrase = this.props.ledgerData.get('passphrase')
+
+    aboutActions.newFrame({
+      location: `data:text/html,Brave Wallet Recovery keys
+        Date created:
+        Recovery Key 1: ${paymentId}
+        Recovery Key 2: ${passphrase}
+        Note: These keys are not stored on Brave servers. These keys are your only method of recovering your Brave wallet. Save these keys in a safe place, separate from your brave browser.`
+    }, true)
+  }
+
   get enabled () {
     return getSetting(settings.PAYMENTS_ENABLED, this.props.settings)
   }
@@ -839,6 +857,103 @@ class PaymentsTab extends ImmutableComponent {
     </div>
   }
 
+  get advancedSettingsContent () {
+    return <div className='board'>
+      <div className='panel'>
+        <div className='settingsPanelDivider'>
+          <div data-l10n-id='minimumPageTimeSetting' />
+          <SettingsList>
+            <SettingItem>
+              <select id='fundsSelectBox'>
+                <option>5 seconds</option>
+                <option>10 seconds</option>
+                <option>1 minute</option>
+              </select>
+            </SettingItem>
+          </SettingsList>
+          <div data-l10n-id='minimumVisitsSetting' />
+          <SettingsList>
+            <SettingItem>
+              <select id='fundsSelectBox'>
+                <option>2 visits</option>
+                <option>5 visits</option>
+                <option>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, 'advancedSettings')} />
+      <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' />
+      <Button l10nId='done' className='whiteButton inlineButton' onClick={this.props.hideOverlay.bind(this, 'ledgerBackup')} />
+    </div>
+  }
+
+  get ledgerRecoveryContent () {
+    return <div className='board'>
+      <div className='panel'>
+        <span data-l10n-id='ledgerRecoveryContent' />
+      </div>
+    </div>
+  }
+
+  get ledgerRecoveryFooter () {
+    return <div className='panel advancedSettingsFooter'>
+      <Button l10nId='printKeys' className='primaryButton' />
+      <Button l10nId='saveRecoveryFile' className='primaryButton' />
+      <Button l10nId='done' className='whiteButton inlineButton' onClick={this.props.hideOverlay.bind(this, 'ledgerBackup')} />
+    </div>
+  }
+
   get nextReconcileDate () {
     const ledgerData = this.props.ledgerData
     if (!ledgerData.get('reconcileStamp')) {
@@ -947,6 +1062,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 +1087,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>
       {
@@ -1361,6 +1491,8 @@ class AboutPreferences extends React.Component {
       bitcoinOverlayVisible: false,
       qrcodeOverlayVisible: false,
       paymentHistoryOverlayVisible: false,
+      advancedSettingsOverlayVisible: false,
+      ledgerBackupOverlayVisible: false,
       addFundsOverlayVisible: false,
       preferenceTab: hash.toUpperCase() in preferenceTabs ? hash : preferenceTabs.GENERAL,
       hintNumber: this.getNextHintNumber(),
@@ -1491,6 +1623,8 @@ 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}
           addFundsOverlayVisible={this.state.addFundsOverlayVisible}
           showOverlay={this.setOverlayVisible.bind(this, true)}
           hideOverlay={this.setOverlayVisible.bind(this, false)} />

less/about/preferences.less

@@ -897,6 +897,10 @@ div.nextPaymentSubmission {
   }
 }
 
+.advancedSettingsFooter {
+  padding: 20px 100px;
+}
+
 #flashInfoIcon {
   padding: 5px 5px 5px 0;
 }

less/button.less

@@ -118,6 +118,10 @@ span.browserButton,
     padding: 3px 35px;
   }
 
+  &.inlineButton {
+    display: inline;
+  }
+
   &.secondaryButton {
     background-color: #eee;
   }