From 53f3cf6b2680706fc4f6187c75e80a48377c0634 Mon Sep 17 00:00:00 2001
From: brave-builds <devops@brave.com>
Date: Mon, 27 Jul 2020 18:35:19 +0000
Subject: [PATCH] Uplift of #6217 (squashed) to beta

---
 .../brave_rewards/components/app.tsx          |  6 ++-
 .../brave_rewards/components/panel.tsx        |  6 ++-
 .../resources/page/components/pageWallet.tsx  |  6 ++-
 .../ui/components/walletWrapper/index.tsx     | 38 ++++++++++---------
 .../resources/ui/stories/concepts.tsx         | 12 ++++--
 .../ui/stories/settings/pageWallet.tsx        |  6 ++-
 .../resources/ui/stories/wallet.tsx           |  6 ++-
 7 files changed, 48 insertions(+), 32 deletions(-)

diff --git a/components/brave_rewards/resources/extension/brave_rewards/components/app.tsx b/components/brave_rewards/resources/extension/brave_rewards/components/app.tsx
index 7ac7e58c1f85..1162953880d9 100644
--- a/components/brave_rewards/resources/extension/brave_rewards/components/app.tsx
+++ b/components/brave_rewards/resources/extension/brave_rewards/components/app.tsx
@@ -278,14 +278,16 @@ export class RewardsPanel extends React.Component<Props, State> {
       actions.push({
         name: getMessage('addFunds'),
         action: this.openRewardsAddFunds,
-        icon: <WalletAddIcon />
+        icon: <WalletAddIcon />,
+        externalWallet: true
       })
     }
 
     return actions.concat([{
       name:  getMessage('rewardsSettings'),
       action: this.openRewards,
-      icon: <BatColorIcon />
+      icon: <BatColorIcon />,
+      externalWallet: false
     }])
   }
 
diff --git a/components/brave_rewards/resources/extension/brave_rewards/components/panel.tsx b/components/brave_rewards/resources/extension/brave_rewards/components/panel.tsx
index 60720169b0f9..082a7a3ac64a 100644
--- a/components/brave_rewards/resources/extension/brave_rewards/components/panel.tsx
+++ b/components/brave_rewards/resources/extension/brave_rewards/components/panel.tsx
@@ -649,14 +649,16 @@ export class Panel extends React.Component<Props, State> {
       actions.push({
         name: getMessage('addFunds'),
         action: this.onAddFunds,
-        icon: <WalletAddIcon />
+        icon: <WalletAddIcon />,
+        externalWallet: true
       })
     }
 
     return actions.concat([{
       name:  getMessage('rewardsSettings'),
       action: this.openRewardsPage,
-      icon: <BatColorIcon />
+      icon: <BatColorIcon />,
+      externalWallet: false
     }])
   }
 
diff --git a/components/brave_rewards/resources/page/components/pageWallet.tsx b/components/brave_rewards/resources/page/components/pageWallet.tsx
index e5d55cc22adb..fc8ed38d9e99 100644
--- a/components/brave_rewards/resources/page/components/pageWallet.tsx
+++ b/components/brave_rewards/resources/page/components/pageWallet.tsx
@@ -486,13 +486,15 @@ class PageWallet extends React.Component<Props, State> {
         name: getLocale('panelAddFunds'),
         action: this.onFundsAction.bind(this, 'add'),
         icon: <WalletAddIcon />,
-        testId: 'panel-add-funds'
+        testId: 'panel-add-funds',
+        externalWallet: true
       },
       {
         name: getLocale('panelWithdrawFunds'),
         action: this.onFundsAction.bind(this, 'withdraw'),
         icon: <WalletWithdrawIcon />,
-        testId: 'panel-withdraw-funds'
+        testId: 'panel-withdraw-funds',
+        externalWallet: true
       }
     ]
   }
diff --git a/components/brave_rewards/resources/ui/components/walletWrapper/index.tsx b/components/brave_rewards/resources/ui/components/walletWrapper/index.tsx
index 4a86227b72e1..d14dcdd26eee 100644
--- a/components/brave_rewards/resources/ui/components/walletWrapper/index.tsx
+++ b/components/brave_rewards/resources/ui/components/walletWrapper/index.tsx
@@ -97,6 +97,7 @@ export interface ActionWallet {
   name: string
   action: () => void
   testId?: string
+  externalWallet: boolean
 }
 
 export type NotificationType =
@@ -175,10 +176,11 @@ export default class WalletWrapper extends React.PureComponent<Props, State> {
     }
   }
 
-  generateActions (actions: { icon: React.ReactNode, name: string, testId?: string, action: () => void }[], id?: string) {
+  generateActions (actions: ActionWallet[], id?: string) {
     return actions && actions.map((action, i: number) => {
+      let clickAction = action.externalWallet ? this.onActionClick.bind(this, action.action) : action.action
       return (
-        <StyledAction key={`${id}-${i}`} onClick={action.action} data-test-id={action.testId}>
+        <StyledAction key={`${id}-${i}`} onClick={clickAction} data-test-id={action.testId}>
           <StyledActionIcon>{action.icon}</StyledActionIcon>
           <StyledActionText>{action.name}</StyledActionText>
         </StyledAction>
@@ -186,6 +188,21 @@ export default class WalletWrapper extends React.PureComponent<Props, State> {
     })
   }
 
+  onActionClick = (action: () => void) => {
+    if (!action) {
+      return
+    }
+
+    if (!this.props.showLoginMessage) {
+      action()
+      return
+    }
+
+    this.setState({
+      showLoginMessage: true
+    })
+  }
+
   onNotificationClick = () => {
     if (this.props.onNotificationClick) {
       this.props.onNotificationClick()
@@ -323,27 +340,12 @@ export default class WalletWrapper extends React.PureComponent<Props, State> {
     )
   }
 
-  walletButtonClicked = () => {
-    if (!this.props.onVerifyClick) {
-      return
-    }
-
-    if (!this.props.showLoginMessage) {
-      this.props.onVerifyClick()
-      return
-    }
-
-    this.setState({
-      showLoginMessage: true
-    })
-  }
-
   generateWalletButton = (walletState: WalletState) => {
     const buttonProps: Partial<ButtonProps> = {
       size: 'small',
       level: 'primary',
       brand: 'rewards',
-      onClick: this.walletButtonClicked
+      onClick: this.onActionClick.bind(this, this.props.onVerifyClick)
     }
 
     switch (walletState) {
diff --git a/components/brave_rewards/resources/ui/stories/concepts.tsx b/components/brave_rewards/resources/ui/stories/concepts.tsx
index 276b725bb288..1a6077cd639d 100644
--- a/components/brave_rewards/resources/ui/stories/concepts.tsx
+++ b/components/brave_rewards/resources/ui/stories/concepts.tsx
@@ -315,12 +315,14 @@ storiesOf('Rewards/Concepts/Desktop', module)
             {
               name: 'Add funds',
               action: doNothing,
-              icon: <WalletAddIcon />
+              icon: <WalletAddIcon />,
+              externalWallet: true
             },
             {
               name: 'Settings',
               action: doNothing,
-              icon: <BatColorIcon />
+              icon: <BatColorIcon />,
+              externalWallet: false
             }
           ]}
           showSecActions={false}
@@ -451,12 +453,14 @@ storiesOf('Rewards/Concepts/Desktop', module)
             {
               name: 'Add funds',
               action: doNothing,
-              icon: <WalletAddIcon />
+              icon: <WalletAddIcon />,
+              externalWallet: true
             },
             {
               name: 'Settings',
               action: doNothing,
-              icon: <BatColorIcon />
+              icon: <BatColorIcon />,
+              externalWallet: false
             }
           ]}
           showCopy={boolean('Show Uphold', false)}
diff --git a/components/brave_rewards/resources/ui/stories/settings/pageWallet.tsx b/components/brave_rewards/resources/ui/stories/settings/pageWallet.tsx
index c248f832be2a..33cb2e320179 100644
--- a/components/brave_rewards/resources/ui/stories/settings/pageWallet.tsx
+++ b/components/brave_rewards/resources/ui/stories/settings/pageWallet.tsx
@@ -231,12 +231,14 @@ class PageWallet extends React.Component<Props, State> {
               name: 'Add funds',
               action: doNothing,
               icon: <WalletAddIcon />,
-              testId: 'panel-add-funds'
+              testId: 'panel-add-funds',
+              externalWallet: true
             },
             {
               name: 'Withdraw Funds',
               action: doNothing,
-              icon: <WalletWithdrawIcon />
+              icon: <WalletWithdrawIcon />,
+              externalWallet: true
             }
           ]}
           compact={false}
diff --git a/components/brave_rewards/resources/ui/stories/wallet.tsx b/components/brave_rewards/resources/ui/stories/wallet.tsx
index a8c329aadae8..c8ae2578bec8 100644
--- a/components/brave_rewards/resources/ui/stories/wallet.tsx
+++ b/components/brave_rewards/resources/ui/stories/wallet.tsx
@@ -62,12 +62,14 @@ storiesOf('Rewards/Wallet/Desktop', module)
           {
             name: 'Add funds',
             action: doNothing,
-            icon: <WalletAddIcon />
+            icon: <WalletAddIcon />,
+            externalWallet: true
           },
           {
             name: 'Withdraw Funds',
             action: doNothing,
-            icon: <WalletImportIcon />
+            icon: <WalletImportIcon />,
+            externalWallet: true
           }
         ]}
         grants={showGrant ? [