fix(component): ensure chrome browser before allowing xlm acct add to…

… lockbox
blockchain · Dec 10, 2018 · 52d3571 · 52d3571
1 parent 2c4ec05
commit 52d3571
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 21 deletions.
diff --git a/packages/blockchain-wallet-v4-frontend/src/components/Balances/Lockbox.js b/packages/blockchain-wallet-v4-frontend/src/components/Balances/Lockbox.js
@@ -1,13 +1,14 @@
 import React from 'react'
 import styled from 'styled-components'
-import { Icon, Link } from 'blockchain-info-components'
+import { FormattedMessage } from 'react-intl'
+import * as bowser from 'bowser'
+
+import { Icon, Link, Text } from 'blockchain-info-components'
 import CoinDisplay from 'components/Display/CoinDisplay'
 import FiatDisplay from 'components/Display/FiatDisplay'
-import { FormattedMessage } from 'react-intl'
 
 const Wrapper = styled.div`
   display: flex;
-  opacity: 1;
   padding: 15px;
   max-width: 200px;
   margin-right: 25px;
@@ -19,9 +20,9 @@ const Wrapper = styled.div`
   background-color: ${props => props.theme['white-blue']};
   box-shadow: ${props =>
     props.isActive ? '0px 5px 30px 0px rgba(0,0,0,0.1)' : 'none'};
-  cursor: pointer;
+  cursor: ${props => (props.disableClick ? 'not-allowed' : 'pointer')};
   * {
-    cursor: pointer;
+    cursor: ${props => (props.disableClick ? 'not-allowed' : 'pointer')};
   }
 `
 const IconBox = styled.div`
@@ -35,13 +36,15 @@ const Balance = styled.div`
     margin-bottom: 3px;
   }
 `
+const isBrowserChrome = bowser.name === 'Chrome' || bowser.name === 'Chromium'
 
 export const CurrencyItem = props => {
   return (
     <Wrapper
       onClick={props.onClick}
       isActive={props.isActive}
       isInactive={props.isInactive}
+      disableClick={props.disableClick}
     >
       <IconBox coin={props.coin}>
         <Icon size='32px' color='white' name={props.icon} />
@@ -55,14 +58,22 @@ export const CurrencyItem = props => {
             {props.balance}
           </CoinDisplay>
         </Balance>
-      ) : (
+      ) : isBrowserChrome ? (
         <Link size='12px' weight={300}>
           <FormattedMessage
             id='components.balances.savecointolockbox'
             defaultMessage='Click here to add {coin} to your Lockbox'
             values={{ coin: props.coin.toUpperCase() }}
           />
         </Link>
+      ) : (
+        <Text size='12px' weight={300}>
+          <FormattedMessage
+            id='components.balances.savecointolockboxbrowser'
+            defaultMessage='Use the Chrome browser to add {coin} to your Lockbox'
+            values={{ coin: props.coin.toUpperCase() }}
+          />
+        </Text>
       )}
     </Wrapper>
   )

diff --git a/packages/blockchain-wallet-v4-frontend/src/components/Balances/index.js b/packages/blockchain-wallet-v4-frontend/src/components/Balances/index.js
@@ -6,7 +6,7 @@ export const Wrapper = styled.div`
   cursor: pointer;
   position: relative;
   min-width: 160px;
-  padding: 15px 20px 0px 20px;
+  padding: 15px 20px 0 20px;
   > div:not(:last-child) {
     margin-bottom: 5px;
   }

diff --git a/...es/blockchain-wallet-v4-frontend/src/scenes/Lockbox/Menu/CurrencyList/template.success.js b/...es/blockchain-wallet-v4-frontend/src/scenes/Lockbox/Menu/CurrencyList/template.success.js
@@ -1,16 +1,18 @@
 import React from 'react'
 import styled from 'styled-components'
-import { CurrencyItem } from 'components/Balances'
+import * as bowser from 'bowser'
 import { any, equals, toLower, prop, isEmpty } from 'ramda'
 
+import { CurrencyItem } from 'components/Balances'
+
 const CurrencyList = styled.div`
   display: flex;
   width: 100%;
   padding: 20px 30px;
   overflow-x: scroll;
   border-bottom: 1px solid ${props => props.theme['gray-1']};
 `
-
+const isBrowserChrome = bowser.name === 'Chrome' || bowser.name === 'Chromium'
 const Success = props => {
   const { data, formValues, ...rest } = props
   const { coinContexts, handleCoinSelection, handleSaveCoinMD } = rest
@@ -53,11 +55,12 @@ const Success = props => {
         balance={data.xlmBalance}
         isActive={isActive('xlm')}
         isSaved={prop('xlm', coinContexts) > 0}
+        disableClick={!(prop('xlm', coinContexts) > 0) && !isBrowserChrome}
         isInactive={!isEmpty(formValues) && !isActive('xlm')}
         onClick={() =>
           prop('xlm', coinContexts) > 0
             ? handleCoinSelection('XLM')
-            : handleSaveCoinMD('xlm')
+            : isBrowserChrome && handleSaveCoinMD('xlm')
         }
       />
     </CurrencyList>

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Lockbox/Menu/index.js b/packages/blockchain-wallet-v4-frontend/src/scenes/Lockbox/Menu/index.js
@@ -18,9 +18,9 @@ class LockboxMenuContainer extends React.PureComponent {
           {...rest}
         />
       ),
-      Loading: () => <div>Loading</div>,
-      Failure: () => <div>Failure</div>,
-      NotAsked: () => null
+      Loading: () => <div />,
+      Failure: () => <div />,
+      NotAsked: () => <div />
     })
   }
 }

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Lockbox/Menu/template.js b/packages/blockchain-wallet-v4-frontend/src/scenes/Lockbox/Menu/template.js
@@ -75,14 +75,7 @@ const multiValueContainer = props => {
 }
 
 const Menu = props => {
-  const {
-    btcBalance,
-    bchBalance,
-    ethBalance,
-    deviceInfo,
-    deviceIndex,
-    ...rest
-  } = props
+  const { deviceInfo, deviceIndex, ...rest } = props
   const { location, formValues } = rest
   const onDashboard = location.pathname.includes('/lockbox/dashboard')