From 670e7bff70c0e011fa37e633ce62ffe76bf09412 Mon Sep 17 00:00:00 2001
From: Connor Bryan <cchromium@gmail.com>
Date: Tue, 13 Nov 2018 17:18:16 -0600
Subject: [PATCH] [BUGSQUASH] Disallow clicking link on disabled WalletButton.

---
 .../WalletDecrypt/components/WalletButton.tsx | 48 ++++++++++++++-----
 1 file changed, 35 insertions(+), 13 deletions(-)

diff --git a/common/components/WalletDecrypt/components/WalletButton.tsx b/common/components/WalletDecrypt/components/WalletButton.tsx
index 8105f737bca..8158b0aa892 100644
--- a/common/components/WalletDecrypt/components/WalletButton.tsx
+++ b/common/components/WalletDecrypt/components/WalletButton.tsx
@@ -107,18 +107,40 @@ export class WalletButton extends React.PureComponent<Props> {
           )}
 
           <div className="WalletButton-icons">
-            {icons.map(i => (
-              <span className="WalletButton-icons-icon" key={i.icon} onClick={this.stopPropogation}>
-                {i.href ? (
-                  <NewTabLink href={i.href} onClick={this.stopPropogation} aria-label={i.arialabel}>
-                    <i className={`fa fa-${i.icon}`} />
-                  </NewTabLink>
-                ) : (
-                  <i className={`fa fa-${i.icon}`} aria-label={i.arialabel} />
-                )}
-                {!isDisabled && <Tooltip size="sm">{i.tooltip}</Tooltip>}
-              </span>
-            ))}
+            {icons.map(i => {
+              const IconWrapper = (props: any) => {
+                if (isDisabled) {
+                  return <React.Fragment>{props.children}</React.Fragment>;
+                }
+
+                if (i.href) {
+                  return (
+                    <NewTabLink
+                      href={i.href}
+                      onClick={this.stopPropagation}
+                      aria-label={i.arialabel}
+                    >
+                      {props.children}
+                    </NewTabLink>
+                  );
+                }
+
+                return props.children;
+              };
+
+              return (
+                <span
+                  className="WalletButton-icons-icon"
+                  key={i.icon}
+                  onClick={this.stopPropagation}
+                >
+                  <IconWrapper>
+                    <i className={`fa fa-${i.icon}`} aria-label={i.arialabel} />
+                  </IconWrapper>
+                  {!isDisabled && <Tooltip size="sm">{i.tooltip}</Tooltip>}
+                </span>
+              );
+            })}
           </div>
         </div>
 
@@ -135,7 +157,7 @@ export class WalletButton extends React.PureComponent<Props> {
     this.props.onClick(this.props.walletType);
   };
 
-  private stopPropogation = (ev: React.FormEvent<HTMLAnchorElement | HTMLSpanElement>) => {
+  private stopPropagation = (ev: React.FormEvent<HTMLAnchorElement | HTMLSpanElement>) => {
     ev.stopPropagation();
   };
 }