Adds waiter to rewards panel

Resolves brave/brave-browser#1502
brave · Oct 24, 2018 · 65c6ff2 · 65c6ff2
1 parent c59a4ae
commit 65c6ff2
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 5 deletions.
diff --git a/components/brave_rewards/extension/brave_rewards/_locales/en/messages.json b/components/brave_rewards/extension/brave_rewards/_locales/en/messages.json
@@ -184,5 +184,9 @@
   "grantNotification": {
     "message": "You have a grant waiting for you.",
     "description": ""
+  },
+  "braveRewardsCreatingText": {
+    "message": "Creating wallet",
+    "description": ""
   }
 }
diff --git a/components/brave_rewards/extension/brave_rewards/components/app.tsx b/components/brave_rewards/extension/brave_rewards/components/app.tsx
@@ -18,13 +18,15 @@ interface Props extends RewardsExtension.ComponentProps {
 
 interface State {
   windowId: number
+  creating: boolean
 }
 
 export class RewardsPanel extends React.Component<Props, State> {
   constructor (props: Props) {
     super(props)
     this.state = {
-      windowId: -1
+      windowId: -1,
+      creating: false
     }
   }
 
@@ -39,6 +41,16 @@ export class RewardsPanel extends React.Component<Props, State> {
     ) {
       this.getTabData()
     }
+
+    if (
+      this.state.creating &&
+      !prevProps.rewardsPanelData.walletCreateFailed &&
+      this.props.rewardsPanelData.walletCreateFailed
+    ) {
+      this.setState({
+        creating: false
+      })
+    }
   }
 
   getTabData () {
@@ -69,17 +81,30 @@ export class RewardsPanel extends React.Component<Props, State> {
     })
   }
 
+  get actions () {
+    return this.props.actions
+  }
+
+  onCreate = () => {
+    this.setState({
+      creating: true
+    })
+    this.actions.createWallet()
+  }
+
   render () {
-    const { rewardsPanelData, actions } = this.props
+    const { walletCreateFailed, walletCreated } = this.props.rewardsPanelData
 
     return (
       <>
         {
-          !rewardsPanelData.walletCreated
+          !walletCreated
           ? <PanelWelcome
+            error={walletCreateFailed}
+            creating={this.state.creating}
             variant={'two'}
-            optInAction={actions.createWallet}
-            optInErrorAction={actions.createWallet}
+            optInAction={this.onCreate}
+            optInErrorAction={this.onCreate}
             moreLink={this.openRewards}
           />
           : <Panel windowId={this.state.windowId} />