Disabled Buy/Swap UI for Unsupported Networks

brave · Sep 14, 2021 · 7902e72 · 7902e72
1 parent cb8181c
commit 7902e72
Show file tree

Hide file tree

Showing 13 changed files with 201 additions and 40 deletions.
diff --git a/components/brave_wallet_ui/components/buy-send-swap/buy-send-swap-layout/index.tsx b/components/brave_wallet_ui/components/buy-send-swap/buy-send-swap-layout/index.tsx
@@ -1,6 +1,9 @@
 import * as React from 'react'
-import { BuySendSwapTypes } from '../../../constants/types'
+import { BuySendSwapTypes, EthereumChain } from '../../../constants/types'
 import { BuySendSwapOptions } from '../../../options/buy-send-swap-options'
+import { reduceNetworkDisplayName } from '../../../utils/network-utils'
+import Tooltip from '../buy-send-swap-tooltip'
+import locale from '../../../constants/locale'
 // Styled Components
 import {
   StyledWrapper,
@@ -17,34 +20,51 @@ export interface Props {
   children?: React.ReactNode
   selectedTab: BuySendSwapTypes
   onChangeTab: (tab: BuySendSwapTypes) => () => void
+  isBuyDisabled: boolean
+  isSwapDisabled: boolean
+  selectedNetwork: EthereumChain
 }
 
 function BuySendSwapLayout (props: Props) {
-  const { children, selectedTab, onChangeTab } = props
+  const {
+    children,
+    selectedTab,
+    onChangeTab,
+    isBuyDisabled,
+    isSwapDisabled,
+    selectedNetwork
+  } = props
 
   return (
     <StyledWrapper>
       <ButtonRow>
         {BuySendSwapOptions.map((option) =>
-          <TabButton
+          <Tooltip
+            isDisabled={isBuyDisabled && option.id === 'buy' || isSwapDisabled && option.id === 'swap'}
             key={option.id}
-            isSelected={selectedTab === option.id}
-            onClick={onChangeTab(option.id)}
+            text={`${reduceNetworkDisplayName(selectedNetwork.chainName)} ${locale.bssToolTip}`}
           >
-            <RightDivider
-              tabID={option.id}
-              selectedTab={selectedTab}
-            />
-            <LeftDivider
-              tabID={option.id}
-              selectedTab={selectedTab}
-            />
-            <TabButtonText
+            <TabButton
               isSelected={selectedTab === option.id}
+              onClick={onChangeTab(option.id)}
+              isDisabled={isBuyDisabled && option.id === 'buy' || isSwapDisabled && option.id === 'swap'}
             >
-              {option.name}
-            </TabButtonText>
-          </TabButton>
+              <RightDivider
+                tabID={option.id}
+                selectedTab={selectedTab}
+              />
+              <LeftDivider
+                tabID={option.id}
+                selectedTab={selectedTab}
+              />
+              <TabButtonText
+                isSelected={selectedTab === option.id}
+                isDisabled={isBuyDisabled && option.id === 'buy' || isSwapDisabled && option.id === 'swap'}
+              >
+                {option.name}
+              </TabButtonText>
+            </TabButton>
+          </Tooltip>
         )}
       </ButtonRow>
       <MainContainerWrapper>

diff --git a/components/brave_wallet_ui/components/buy-send-swap/buy-send-swap-layout/style.ts b/components/brave_wallet_ui/components/buy-send-swap/buy-send-swap-layout/style.ts
@@ -5,6 +5,7 @@ interface StyleProps {
   isSelected: boolean
   selectedTab: BuySendSwapTypes
   tabID: BuySendSwapTypes
+  isDisabled: boolean
 }
 
 export const StyledWrapper = styled.div`
@@ -63,7 +64,7 @@ export const TabButton = styled.button<Partial<StyleProps>>`
   height: 100%;
   align-items: center;
   justify-content: center;
-  cursor: pointer;
+  cursor: ${(p) => p.isDisabled ? 'default' : 'pointer'};
   outline: none;
   background: ${(p) =>
     p.isSelected ? p.theme.color.background02 : p.theme.color.background01};
@@ -83,7 +84,7 @@ export const TabButtonText = styled.span<Partial<StyleProps>>`
   font-weight: 600;
   letter-spacing: 0.01em;
   background: ${(p) =>
-    p.isSelected ? p.theme.color.text01 : p.theme.color.text02};
+    p.isDisabled ? p.theme.color.interactive08 : p.isSelected ? p.theme.color.text01 : p.theme.color.text02};
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
 `
@@ -105,3 +106,10 @@ export const LeftDivider = styled.div<Partial<StyleProps>>`
   left: -2px;
   bottom: 4px;
 `
+
+export const ButtonWrapper = styled.div`
+  display: flex;
+  position: relative;
+  width: 100%;
+  height: 100%;
+`
diff --git a/components/brave_wallet_ui/components/buy-send-swap/buy-send-swap-tooltip/index.tsx b/components/brave_wallet_ui/components/buy-send-swap/buy-send-swap-tooltip/index.tsx
@@ -0,0 +1,45 @@
+import * as React from 'react'
+
+import {
+  StyledWrapper,
+  Tip,
+  Pointer
+} from './style'
+
+export interface Props {
+  children?: React.ReactNode
+  text: string
+  isDisabled: boolean
+}
+
+function BuySendSwapTooltip (props: Props) {
+  const { children, text, isDisabled } = props
+  const [active, setActive] = React.useState(false)
+
+  const showTip = () => {
+    setActive(true)
+  }
+
+  const hideTip = () => {
+    setActive(false)
+  }
+
+  return (
+    <StyledWrapper
+      onMouseEnter={showTip}
+      onMouseLeave={hideTip}
+    >
+      {children}
+      {active && isDisabled && (
+        <>
+          <Pointer />
+          <Tip>
+            {text}
+          </Tip>
+        </>
+      )}
+    </StyledWrapper>
+  )
+}
+
+export default BuySendSwapTooltip
diff --git a/components/brave_wallet_ui/components/buy-send-swap/buy-send-swap-tooltip/style.ts b/components/brave_wallet_ui/components/buy-send-swap/buy-send-swap-tooltip/style.ts
@@ -0,0 +1,37 @@
+import styled from 'styled-components'
+
+export const StyledWrapper = styled.div`
+  display: flex;
+  position: relative;
+  width: 100%;
+  height: 100%;
+`
+
+export const Tip = styled.div`
+  position: absolute;
+  border-radius: 4px;
+  left: 50%;
+  transform: translateX(-50%) translateY(25%);
+  padding: 6px;
+  color: ${(p) => p.theme.palette.white};
+  background: ${(p) => p.theme.palette.black};
+  z-index: 120;
+  white-space: nowrap;
+  font-family: Poppins;
+  font-size: 12px;
+  letter-spacing: 0.01em;
+  top: 40px;
+`
+
+export const Pointer = styled.div`
+  width: 0;
+  height: 0;
+  border-style: solid;
+  position: absolute;
+  left: 50%;
+  top: 40px;
+  transform: translateX(-50%) translateY(25%);
+  border-width: 0 7px 8px 7px;
+  z-index: 120;
+  border-color: transparent transparent ${(p) => p.theme.palette.black} transparent;
+`
diff --git a/components/brave_wallet_ui/components/buy-send-swap/buy/index.tsx b/components/brave_wallet_ui/components/buy-send-swap/buy/index.tsx
@@ -3,7 +3,8 @@ import {
   AccountAssetOptionType,
   BuySendSwapViewTypes,
   EthereumChain,
-  ToOrFromType
+  ToOrFromType,
+  kMainnetChainId
 } from '../../../constants/types'
 import { NavButton } from '../../extension'
 import SwapInputComponent from '../swap-input-component'
@@ -20,6 +21,7 @@ export interface Props {
   selectedAsset: AccountAssetOptionType
   selectedNetwork: EthereumChain
   buyAmount: string
+  networkList: EthereumChain[]
   onSubmit: () => void
   onInputChange: (value: string, name: string) => void
   onChangeBuyView: (view: BuySendSwapViewTypes, option?: ToOrFromType) => void
@@ -30,6 +32,7 @@ function Buy (props: Props) {
     selectedNetwork,
     selectedAsset,
     buyAmount,
+    networkList,
     onInputChange,
     onSubmit,
     onChangeBuyView
@@ -39,9 +42,13 @@ function Buy (props: Props) {
     onChangeBuyView('assets', 'from')
   }
 
+  const networkName = React.useMemo((): string => {
+    return networkList.find((network) => network.chainId === selectedNetwork.chainId)?.chainName ?? ''
+  }, [networkList, selectedNetwork])
+
   return (
     <StyledWrapper>
-      {selectedNetwork.chainId === '0x1' ? (
+      {selectedNetwork.chainId === kMainnetChainId ? (
         <SwapInputComponent
           componentType='buyAmount'
           onInputChange={onInputChange}
@@ -53,13 +60,13 @@ function Buy (props: Props) {
       ) : (
         <FaucetWrapper>
           <FaucetTitle>{locale.buyTitle}</FaucetTitle>
-          <FaucetDescription>{locale.buyDescription} {selectedNetwork.chainId}</FaucetDescription>
+          <FaucetDescription>{locale.buyDescription} {networkName}</FaucetDescription>
         </FaucetWrapper>
       )}
       <NavButton
         disabled={false}
         buttonType='primary'
-        text={selectedNetwork.chainId === '0x1' ? locale.buyWyreButton : locale.buyFaucetButton}
+        text={selectedNetwork.chainId === kMainnetChainId ? locale.buyWyreButton : locale.buyFaucetButton}
         onSubmit={onSubmit}
       />
     </StyledWrapper>

diff --git a/components/brave_wallet_ui/components/buy-send-swap/tabs/buy-tab.tsx b/components/brave_wallet_ui/components/buy-send-swap/tabs/buy-tab.tsx
@@ -91,6 +91,7 @@ function BuyTab (props: Props) {
             onChangeBuyView={onChangeBuyView}
             onInputChange={onInputChange}
             onSubmit={onSubmitBuy}
+            networkList={networkList}
           />
         </>
       }

diff --git a/components/brave_wallet_ui/components/extension/connect-with-site-panel/style.ts b/components/brave_wallet_ui/components/extension/connect-with-site-panel/style.ts
@@ -12,6 +12,7 @@ export const StyledWrapper = styled.div`
 `
 
 export const SelectAddressContainer = styled.div`
+  flex: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -31,7 +32,7 @@ export const SelectAddressScrollContainer = styled.div`
   overflow-y: scroll;
   overflow-x: hidden;
   position: relative;
-  max-height: 200px;
+  max-height: 150px;
   box-sizing: border-box;
 `
 

diff --git a/components/brave_wallet_ui/components/extension/connected-bottom-nav/index.tsx b/components/brave_wallet_ui/components/extension/connected-bottom-nav/index.tsx
@@ -17,12 +17,13 @@ import { PanelTypes, EthereumChain } from '../../../constants/types'
 
 export interface Props {
   onNavigate: (path: PanelTypes) => void
-  isDisabled: boolean
+  isSwapDisabled: boolean
+  isBuyDisabled: boolean
   selectedNetwork: EthereumChain
 }
 
 function ConnectedBottomNav (props: Props) {
-  const { onNavigate, isDisabled, selectedNetwork } = props
+  const { onNavigate, isSwapDisabled, isBuyDisabled, selectedNetwork } = props
 
   const navigate = (path: PanelTypes) => () => {
     onNavigate(path)
@@ -33,11 +34,11 @@ function ConnectedBottomNav (props: Props) {
       <NavOutline>
         <PanelTooltip
           position='right'
-          isDisabled={isDisabled}
+          isDisabled={isBuyDisabled}
           text={`${reduceNetworkDisplayName(selectedNetwork.chainName)} ${locale.bssToolTip}`}
         >
-          <NavButton disabled={isDisabled} onClick={navigate('buy')}>
-            <NavButtonText disabled={isDisabled}>{locale.buy}</NavButtonText>
+          <NavButton disabled={isBuyDisabled} onClick={navigate('buy')}>
+            <NavButtonText disabled={isBuyDisabled}>{locale.buy}</NavButtonText>
           </NavButton>
         </PanelTooltip>
         <NavDivider />
@@ -47,11 +48,11 @@ function ConnectedBottomNav (props: Props) {
         <NavDivider />
         <PanelTooltip
           position='left'
-          isDisabled={isDisabled}
+          isDisabled={isSwapDisabled}
           text={`${reduceNetworkDisplayName(selectedNetwork.chainName)} ${locale.bssToolTip}`}
         >
-          <NavButton disabled={isDisabled} onClick={navigate('swap')}>
-            <NavButtonText disabled={isDisabled}>{locale.swap}</NavButtonText>
+          <NavButton disabled={isSwapDisabled} onClick={navigate('swap')}>
+            <NavButtonText disabled={isSwapDisabled}>{locale.swap}</NavButtonText>
           </NavButton>
         </PanelTooltip>
         {/* <NavDivider /> */}

diff --git a/components/brave_wallet_ui/components/extension/connected-panel/index.tsx b/components/brave_wallet_ui/components/extension/connected-panel/index.tsx
@@ -31,7 +31,7 @@ import {
 import { reduceAddress } from '../../../utils/reduce-address'
 import { reduceNetworkDisplayName } from '../../../utils/network-utils'
 import { copyToClipboard } from '../../../utils/copy-to-clipboard'
-import { WalletAccountType, PanelTypes, EthereumChain, BuySwapSupportedChains } from '../../../constants/types'
+import { WalletAccountType, PanelTypes, EthereumChain, BuySupportedChains, SwapSupportedChains } from '../../../constants/types'
 import { create, background } from 'ethereum-blockies'
 import locale from '../../../constants/locale'
 
@@ -79,9 +79,13 @@ const ConnectedPanel = (props: Props) => {
     return create({ seed: selectedAccount.address, size: 8, scale: 16 }).toDataURL()
   }, [selectedAccount.address])
 
-  const isDisabled = React.useMemo(() => {
-    return !BuySwapSupportedChains.includes(selectedNetwork.chainId)
-  }, [BuySwapSupportedChains, selectedNetwork])
+  const isBuyDisabled = React.useMemo(() => {
+    return !BuySupportedChains.includes(selectedNetwork.chainId)
+  }, [BuySupportedChains, selectedNetwork])
+
+  const isSwapDisabled = React.useMemo(() => {
+    return !SwapSupportedChains.includes(selectedNetwork.chainId)
+  }, [SwapSupportedChains, selectedNetwork])
 
   return (
     <StyledWrapper onClick={onHideMore} panelBackground={bg}>
@@ -117,7 +121,12 @@ const ConnectedPanel = (props: Props) => {
           <FiatBalanceText>${formatPrices(Number(selectedAccount.fiatBalance))}</FiatBalanceText>
         </BalanceColumn>
       </CenterColumn>
-      <ConnectedBottomNav selectedNetwork={selectedNetwork} isDisabled={isDisabled} onNavigate={navAction} />
+      <ConnectedBottomNav
+        selectedNetwork={selectedNetwork}
+        isBuyDisabled={isBuyDisabled}
+        isSwapDisabled={isSwapDisabled}
+        onNavigate={navAction}
+      />
     </StyledWrapper>
   )
 }

diff --git a/components/brave_wallet_ui/constants/types.ts b/components/brave_wallet_ui/constants/types.ts
@@ -596,7 +596,7 @@ export const kGoerliChainId = '0x5'
 export const kKovanChainId = '0x2a'
 export const kLocalhostChainId = '0x539'
 
-export const BuySwapSupportedChains = [
+export const BuySupportedChains = [
   kMainnetChainId,
   kRinkebyChainId,
   kRopstenChainId,
@@ -605,6 +605,11 @@ export const BuySwapSupportedChains = [
   kLocalhostChainId
 ]
 
+export const SwapSupportedChains = [
+  kMainnetChainId,
+  kRopstenChainId
+]
+
 // Keep in sync with components/brave_wallet/common/brave_wallet.mojom until
 // we auto generate this type file from mojo.
 export type EthereumChain = {

diff --git a/components/brave_wallet_ui/panel/container.tsx b/components/brave_wallet_ui/panel/container.tsx
@@ -541,6 +541,7 @@ function Container (props: Props) {
                 selectedAsset={selectedWyreAsset}
                 buyAmount={buyAmount}
                 selectedNetwork={GetNetworkInfo(selectedNetwork.chainId, networkList)}
+                networkList={networkList}
               />
             </SendWrapper>
           </Panel>