Implement buy options new design (#13708)

* Implement buy options new design

* Feedback fixes

components/brave_wallet/browser/brave_wallet_constants.h

@@ -609,6 +609,10 @@ constexpr webui::LocalizedString kLocalizedStrings[] = {
     {"braveWalletNotValidFilAddress", IDS_BRAVE_WALLET_NOT_VALID_FIL_ADDRESS},
     {"braveWalletBuyWithWyre", IDS_BRAVE_WALLET_BUY_WITH_WYRE},
     {"braveWalletBuyWithRamp", IDS_BRAVE_WALLET_BUY_WITH_RAMP},
+    {"braveWalletBuyRampNetworkName", IDS_BRAVE_WALLET_BUY_RAMP_NETWORK_NAME},
+    {"braveWalletBuyWyreName", IDS_BRAVE_WALLET_BUY_WYRE_NAME},
+    {"braveWalletBuyRampDescription", IDS_BRAVE_WALLET_BUY_RAMP_DESCRIPTION},
+    {"braveWalletBuyWyreDescription", IDS_BRAVE_WALLET_BUY_WYRE_DESCRIPTION},
     {"braveWalletNetworkFilterAll", IDS_BRAVE_WALLET_NETWORK_FILTER_ALL},
     {"braveWalletEditGasLimitError", IDS_BRAVE_WALLET_EDIT_GAS_LIMIT_ERROR},
     {"braveWalletNetworkFilterSecondary",

components/brave_wallet_ui/components/buy-option/buy-option-item-styles.ts

@@ -0,0 +1,68 @@
+/* Copyright (c) 2022 The Brave Authors. All rights reserved.
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import styled from 'styled-components'
+import { WalletButton } from '../shared/style'
+
+export const StyledWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  padding: 16px 0;
+  align-items: flex-start;
+`
+
+export const Logo = styled.img`
+  width: 46px;
+  height: auto;
+  margin-right: 20px;
+  margin-top: 16px;
+`
+
+export const Content = styled.div`
+  display: flex;
+  flex-direction: column;
+`
+
+export const Name = styled.span`
+  font-family: 'Poppins';
+  font-style: normal;
+  font-size: 18px;
+  line-height: 26px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  color: ${p => p.theme.color.text01};
+  padding-bottom: 2px;
+`
+
+export const Description = styled.span`
+  font-family: 'Poppins';
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 18px;
+  letter-spacing: 0.01em;
+  color: ${p => p.theme.color.text01};
+  margin-bottom: 12px;
+`
+
+export const StyledButton = styled(WalletButton)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  border-radius: 44px;
+  padding: 10px 20px;
+  outline: none;
+  background-color: transparent;
+  border: ${p => `1px solid ${p.theme.color.interactive08}`};
+  
+`
+
+export const ButtonText = styled.span`
+  font-family: 'Poppins';
+  font-size: 13px;
+  font-weight: 600;
+  color: ${p => p.theme.color.interactive07};
+  text-align: center;
+`

components/brave_wallet_ui/components/buy-option/buy-option-item.tsx

@@ -0,0 +1,45 @@
+/* Copyright (c) 2022 The Brave Authors. All rights reserved.
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+import * as React from 'react'
+
+// Utils
+import { BraveWallet, BuyOption } from '../../constants/types'
+
+// Styled Components
+import {
+  Logo,
+  Content,
+  StyledWrapper,
+  Name,
+  Description,
+  StyledButton,
+  ButtonText
+} from './buy-option-item-styles'
+
+interface Props {
+  option: BuyOption
+  onSelect: (option: BraveWallet.OnRampProvider) => void
+}
+export const BuyOptionItem = (props: Props) => {
+  const { option, onSelect } = props
+  const { id, icon, name, description, actionText } = option
+
+  const onClick = React.useCallback(() => {
+    onSelect(id)
+  }, [onSelect, id])
+
+  return (
+    <StyledWrapper>
+      <Logo src={icon} />
+      <Content>
+        <Name>{name}</Name>
+        <Description>{description}</Description>
+        <StyledButton onClick={onClick}>
+          <ButtonText>{actionText}</ButtonText>
+        </StyledButton>
+      </Content>
+    </StyledWrapper>
+  )
+}

components/brave_wallet_ui/components/buy-send-swap/buy/index.tsx

@@ -3,8 +3,7 @@ import {
   BraveWallet,
   BuySendSwapViewTypes,
   ToOrFromType,
-  DefaultCurrencies,
-  BuyOption
+  BuyOption, WalletState
 } from '../../../constants/types'
 import { NavButton } from '../../extension'
 import SwapInputComponent from '../swap-input-component'
@@ -13,52 +12,57 @@ import { getLocale } from '../../../../common/locale'
 // Styled Components
 import {
   StyledWrapper,
-  FaucetTitle,
-  FaucetWrapper,
-  FaucetDescription,
-  Spacer,
-  RampLogo,
-  WyreLogo
+  Spacer
 } from './style'
-import BuyWithButton from '../../buy-with-button'
 import { BuyOptions } from '../../../options/buy-with-options'
+import { useAssets, useLib } from '../../../common/hooks'
+import { useSelector } from 'react-redux'
 import { isSelectedAssetInAssetOptions } from '../../../utils/asset-utils'
+import { SelectBuyOption } from '../select-buy-option/select-buy-option'
 
 export interface Props {
   selectedAsset: BraveWallet.BlockchainToken
-  selectedNetwork: BraveWallet.NetworkInfo
-  buyAmount: string
-  networkList: BraveWallet.NetworkInfo[]
-  defaultCurrencies: DefaultCurrencies
-  onSubmit: () => void
-  onInputChange: (value: string, name: string) => void
   onChangeBuyView: (view: BuySendSwapViewTypes, option?: ToOrFromType) => void
-  selectedBuyOption: BraveWallet.OnRampProvider
-  onSelectBuyOption: (optionId: BraveWallet.OnRampProvider) => void
-  wyreAssetOptions: BraveWallet.BlockchainToken[]
-  rampAssetOptions: BraveWallet.BlockchainToken[]
 }
 
 function Buy (props: Props) {
   const {
-    selectedNetwork,
     selectedAsset,
-    buyAmount,
-    networkList,
-    defaultCurrencies,
-    onInputChange,
-    onSubmit,
-    onChangeBuyView,
-    selectedBuyOption,
-    onSelectBuyOption,
-    wyreAssetOptions,
-    rampAssetOptions
+    onChangeBuyView
   } = props
+
+  const [buyAmount, setBuyAmount] = React.useState('')
+  const [showBuyOptions, setShowBuyOptions] = React.useState<boolean>(false)
   const [buyOptions, setBuyOptions] = React.useState<BuyOption[]>(BuyOptions)
 
-  const onShowAssets = () => {
-    onChangeBuyView('assets', 'from')
-  }
+  // Redux
+  const {
+    selectedNetwork,
+    selectedAccount,
+    defaultCurrencies
+  } = useSelector(({ wallet }: { wallet: WalletState }) => wallet)
+
+  // Custom Hooks
+  const { wyreAssetOptions, rampAssetOptions } = useAssets()
+  const { getBuyAssetUrl } = useLib()
+
+  const onSubmitBuy = React.useCallback((buyOption: BraveWallet.OnRampProvider) => {
+    getBuyAssetUrl({
+      asset: selectedAsset,
+      onRampProvider: buyOption,
+      chainId: selectedNetwork.chainId,
+      address: selectedAccount.address,
+      amount: buyAmount
+    })
+      .then(url => {
+        chrome.tabs.create({ url }, () => {
+          if (chrome.runtime.lastError) {
+            console.error('tabs.create failed: ' + chrome.runtime.lastError.message)
+          }
+        })
+      })
+      .catch(e => console.error(e))
+  }, [getBuyAssetUrl, selectedNetwork, selectedAccount, buyAmount, selectedAsset])
 
   React.useEffect(() => {
     const supportingBuyOptions = BuyOptions.filter(buyOption => {
@@ -75,21 +79,17 @@ function Buy (props: Props) {
     setBuyOptions(supportingBuyOptions)
   }, [selectedAsset, wyreAssetOptions, rampAssetOptions])
 
-  React.useEffect(() => {
-    if (buyOptions.length > 0) {
-      onSelectBuyOption(buyOptions[0]?.id)
-    }
-  }, [buyOptions])
-
-  const networkName = React.useMemo((): string => {
-    return networkList.find((network) => network.chainId === selectedNetwork.chainId)?.chainName ?? ''
-  }, [networkList, selectedNetwork])
+  const onShowAssets = React.useCallback(() => {
+    onChangeBuyView('assets', 'from')
+  }, [onChangeBuyView])
 
-  const buyWithLabel = React.useMemo(() => {
-    const selected = buyOptions.find(option => option.id === selectedBuyOption)
+  const onContinue = React.useCallback(() => {
+    setShowBuyOptions(true)
+  }, [])
 
-    return selected !== undefined ? selected.label : ''
-  }, [selectedBuyOption])
+  const onBack = React.useCallback(() => {
+    setShowBuyOptions(false)
+  }, [])
 
   const isSelectedNetworkSupported = React.useMemo(() => {
     return [...rampAssetOptions, ...wyreAssetOptions]
@@ -99,41 +99,35 @@ function Buy (props: Props) {
 
   return (
     <StyledWrapper>
-      {isSelectedNetworkSupported ? (
-        <SwapInputComponent
-          defaultCurrencies={defaultCurrencies}
-          componentType='buyAmount'
-          onInputChange={onInputChange}
-          selectedAssetInputAmount={buyAmount}
-          inputName='buy'
-          selectedAsset={selectedAsset}
-          selectedNetwork={selectedNetwork}
-          onShowSelection={onShowAssets}
-          autoFocus={true}
+      {showBuyOptions
+        ? <SelectBuyOption
+          buyOptions={buyOptions}
+          onSelect={onSubmitBuy}
+          onBack={onBack}
         />
-      ) : (
-        <FaucetWrapper>
-          <FaucetTitle>{getLocale('braveWalletBuyTitle')}</FaucetTitle>
-          <FaucetDescription>{getLocale('braveWalletBuyDescription').replace('$1', networkName)}</FaucetDescription>
-        </FaucetWrapper>
-      )}
-
-      <BuyWithButton
-        options={buyOptions}
-        value={selectedBuyOption}
-        onSelect={onSelectBuyOption}
-        disabled={buyOptions?.length === 1}
-      >
-        {selectedBuyOption === BraveWallet.OnRampProvider.kRamp ? <RampLogo /> : <WyreLogo />}
-        {buyWithLabel}
-      </BuyWithButton>
-      <Spacer />
-      <NavButton
-        disabled={false}
-        buttonType='primary'
-        text={getLocale('braveWalletBuyContinueButton')}
-        onSubmit={onSubmit}
-      />
+        : <>
+          {isSelectedNetworkSupported &&
+            <SwapInputComponent
+              defaultCurrencies={defaultCurrencies}
+              componentType='buyAmount'
+              onInputChange={setBuyAmount}
+              selectedAssetInputAmount={buyAmount}
+              inputName='buy'
+              selectedAsset={selectedAsset}
+              selectedNetwork={selectedNetwork}
+              onShowSelection={onShowAssets}
+              autoFocus={true}
+            />
+          }
+          <Spacer />
+          <NavButton
+            disabled={false}
+            buttonType='primary'
+            text={getLocale('braveWalletBuyContinueButton')}
+            onSubmit={onContinue}
+          />
+        </>
+      }
     </StyledWrapper>
   )
 }

components/brave_wallet_ui/components/buy-send-swap/buy/style.ts

@@ -1,6 +1,7 @@
 import styled from 'styled-components'
 import RampIcon from '../../../assets/svg-icons/ramp-icon.svg'
 import WyreIcon from '../../../assets/svg-icons/wyre-icon.svg'
+import { WalletButton } from '../../shared/style'
 
 export const StyledWrapper = styled.div`
   display: flex;
@@ -63,3 +64,22 @@ export const RampLogo = styled(LogoBase)`
 export const Spacer = styled.div`
   margin-bottom: 30px;
 `
+
+export const ContinueButton = styled(WalletButton)`
+  display: flex;
+  align-items: center;
+  width: 100%;
+  border: none;
+  color: ${(p) => p.theme.color.text02};
+  font-family: Poppins;
+  font-weight: 400;
+  box-sizing: border-box;
+  background-color: ${(p) => p.theme.color.background02};
+  border: ${(p) => `1px solid ${p.theme.color.divider01}`};
+  padding: 9px 12px;
+  border-radius: 12px;
+  cursor: ${p => p.disabled ? 'auto' : 'pointer'};
+  font-size: 14px;
+  line-height: 20px;
+  letter-spacing: 0.01em;
+`

components/brave_wallet_ui/components/buy-send-swap/select-buy-option/select-buy-option-styles.ts

@@ -0,0 +1,18 @@
+/* Copyright (c) 2022 The Brave Authors. All rights reserved.
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import styled from 'styled-components'
+
+export const StyledWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+`
+
+export const SubDivider = styled.div`
+  width: 100%;
+  height: 1px;
+  background-color: ${(p) => p.theme.color.divider01};
+`