diff --git a/components/brave_wallet/browser/brave_wallet_constants.h b/components/brave_wallet/browser/brave_wallet_constants.h index f3f29270c130..3d8787092f70 100644 --- a/components/brave_wallet/browser/brave_wallet_constants.h +++ b/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", diff --git a/components/brave_wallet_ui/assets/svg-icons/ramp-icon.svg b/components/brave_wallet_ui/assets/svg-icons/ramp-icon.svg index c9603b68dea9..92851053a5e3 100644 --- a/components/brave_wallet_ui/assets/svg-icons/ramp-icon.svg +++ b/components/brave_wallet_ui/assets/svg-icons/ramp-icon.svg @@ -1,4 +1,4 @@ - + diff --git a/components/brave_wallet_ui/components/buy-option/buy-option-item-styles.ts b/components/brave_wallet_ui/components/buy-option/buy-option-item-styles.ts new file mode 100644 index 000000000000..0baffa0f9a15 --- /dev/null +++ b/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; +` diff --git a/components/brave_wallet_ui/components/buy-option/buy-option-item.tsx b/components/brave_wallet_ui/components/buy-option/buy-option-item.tsx new file mode 100644 index 000000000000..89c26bc916f0 --- /dev/null +++ b/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 ( + + + + {name} + {description} + + {actionText} + + + + ) +} 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 index cacd62bfcc8f..45e51603d0b7 100644 --- 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,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(false) const [buyOptions, setBuyOptions] = React.useState(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 ( - {isSelectedNetworkSupported ? ( - - ) : ( - - {getLocale('braveWalletBuyTitle')} - {getLocale('braveWalletBuyDescription').replace('$1', networkName)} - - )} - - - {selectedBuyOption === BraveWallet.OnRampProvider.kRamp ? : } - {buyWithLabel} - - - + : <> + {isSelectedNetworkSupported && + + } + + + + } ) } diff --git a/components/brave_wallet_ui/components/buy-send-swap/buy/style.ts b/components/brave_wallet_ui/components/buy-send-swap/buy/style.ts index f4e968dc65f2..334d7b81ddda 100644 --- a/components/brave_wallet_ui/components/buy-send-swap/buy/style.ts +++ b/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; +` diff --git a/components/brave_wallet_ui/components/buy-send-swap/select-buy-option/select-buy-option-styles.ts b/components/brave_wallet_ui/components/buy-send-swap/select-buy-option/select-buy-option-styles.ts new file mode 100644 index 000000000000..83501b37fbc4 --- /dev/null +++ b/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}; +` diff --git a/components/brave_wallet_ui/components/buy-send-swap/select-buy-option/select-buy-option.tsx b/components/brave_wallet_ui/components/buy-send-swap/select-buy-option/select-buy-option.tsx new file mode 100644 index 000000000000..4f580801adc2 --- /dev/null +++ b/components/brave_wallet_ui/components/buy-send-swap/select-buy-option/select-buy-option.tsx @@ -0,0 +1,44 @@ +/* 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' + +// Components +import { BuyOptionItem } from '../../buy-option/buy-option-item' +import { BackButton } from '../../shared' + +// Styled Components +import { + StyledWrapper, + SubDivider +} from './select-buy-option-styles' + +interface Props { + buyOptions: BuyOption[] + onSelect: (optionId: BraveWallet.OnRampProvider) => void + onBack: () => void +} + +export const SelectBuyOption = ({ buyOptions, onSelect, onBack }: Props) => { + return ( + + + {buyOptions.map((option, index) => ( +
+ + {index !== buyOptions.length - 1 && } +
+ ))} + + + ) +} 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 index f646f83e6201..25bbdc9d7692 100644 --- 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 @@ -1,4 +1,7 @@ import * as React from 'react' + +// Utils +import { getUniqueAssets } from '../../../utils/asset-utils' import { UserAccountType, BuySendSwapViewTypes, @@ -6,48 +9,31 @@ import { DefaultCurrencies } from '../../../constants/types' +// Hooks +import { useAssets } from '../../../common/hooks' + +// Components import { AccountsAssetsNetworks, Header, Buy } from '..' -import { getUniqueAssets } from '../../../utils/asset-utils' - export interface Props { - networkList: BraveWallet.NetworkInfo[] - selectedNetwork: BraveWallet.NetworkInfo - assetOptions: BraveWallet.BlockchainToken[] - buyAmount: string showHeader?: boolean defaultCurrencies: DefaultCurrencies - onSubmit: (asset: BraveWallet.BlockchainToken) => void onSelectAccount: (account: UserAccountType) => void - onSetBuyAmount: (value: string) => void - selectedBuyOption: BraveWallet.OnRampProvider - onSelectBuyOption: (optionId: BraveWallet.OnRampProvider) => void - wyreAssetOptions: BraveWallet.BlockchainToken[] - rampAssetOptions: BraveWallet.BlockchainToken[] } function BuyTab (props: Props) { const { - networkList, - selectedNetwork, - buyAmount, showHeader, - assetOptions, - defaultCurrencies, - onSubmit, - onSelectAccount, - onSetBuyAmount, - selectedBuyOption, - onSelectBuyOption, - wyreAssetOptions, - rampAssetOptions + onSelectAccount } = props + // Custom Hooks + const { buyAssetOptions } = useAssets() const [buyView, setBuyView] = React.useState('buy') - const [selectedAsset, setSelectedAsset] = React.useState(assetOptions[0]) + const [selectedAsset, setSelectedAsset] = React.useState(buyAssetOptions[0]) const onChangeBuyView = (view: BuySendSwapViewTypes) => { setBuyView(view) @@ -63,27 +49,20 @@ function BuyTab (props: Props) { setBuyView('buy') } - const onInputChange = (value: string, name: string) => { - onSetBuyAmount(value) - } - - const onSubmitBuy = () => { - onSubmit(selectedAsset) - } - const goBack = () => { setBuyView('buy') } + // Memos + const filteredAssetOptions = React.useMemo(() => { + return getUniqueAssets(buyAssetOptions) + }, [buyAssetOptions]) + React.useEffect(() => { - if (assetOptions.length > 0) { - setSelectedAsset(assetOptions[0]) + if (buyAssetOptions.length > 0) { + setSelectedAsset(buyAssetOptions[0]) } - }, [assetOptions]) - - const filteredAssetOptions = React.useMemo(() => { - return getUniqueAssets(assetOptions) - }, [assetOptions]) + }, [buyAssetOptions]) return ( <> @@ -95,18 +74,8 @@ function BuyTab (props: Props) { /> } } diff --git a/components/brave_wallet_ui/constants/types.ts b/components/brave_wallet_ui/constants/types.ts index 87e2fba90921..6f0c5d01c5e0 100644 --- a/components/brave_wallet_ui/constants/types.ts +++ b/components/brave_wallet_ui/constants/types.ts @@ -651,7 +651,10 @@ export enum CoinTypesMap { export type BuyOption = { id: BraveWallet.OnRampProvider - label: string + icon: string + name: string + description: string + actionText: string } export type OriginInfo = { diff --git a/components/brave_wallet_ui/options/buy-with-options.ts b/components/brave_wallet_ui/options/buy-with-options.ts index 862fe8bcf090..1711e25e2285 100644 --- a/components/brave_wallet_ui/options/buy-with-options.ts +++ b/components/brave_wallet_ui/options/buy-with-options.ts @@ -6,13 +6,22 @@ import { getLocale } from '$web-common/locale' import { BraveWallet, BuyOption } from '../constants/types' +import RampIcon from '../assets/svg-icons/ramp-icon.svg' +import WyreIcon from '../assets/svg-icons/wyre-icon.svg' + export const BuyOptions: BuyOption[] = [ { id: BraveWallet.OnRampProvider.kRamp, - label: getLocale('braveWalletBuyWithRamp') + actionText: getLocale('braveWalletBuyWithRamp'), + icon: RampIcon, + name: getLocale('braveWalletBuyRampNetworkName'), + description: getLocale('braveWalletBuyRampDescription') }, { id: BraveWallet.OnRampProvider.kWyre, - label: getLocale('braveWalletBuyWithWyre') + actionText: getLocale('braveWalletBuyWithWyre'), + icon: WyreIcon, + name: getLocale('braveWalletBuyWyreName'), + description: getLocale('braveWalletBuyWyreDescription') } ] diff --git a/components/brave_wallet_ui/page/container.tsx b/components/brave_wallet_ui/page/container.tsx index 8c24290a5b39..e286594a9491 100644 --- a/components/brave_wallet_ui/page/container.tsx +++ b/components/brave_wallet_ui/page/container.tsx @@ -35,16 +35,9 @@ import { SweepstakesBanner } from '../components/desktop/sweepstakes-banner' import { getBalance, - getBuyAssetUrl, onConnectHardwareWallet } from '../common/async/lib' -// Hooks -import { useAssets } from '../common/hooks' - -// Utils -import { getRampAssetSymbol } from '../utils/asset-utils' - type Props = { wallet: WalletState page: PageState @@ -67,7 +60,6 @@ function Container (props: Props) { networkList, transactions, selectedNetwork, - selectedAccount, hasInitialized, transactionSpotPrices, defaultWallet, @@ -90,13 +82,9 @@ function Container (props: Props) { // const [view, setView] = React.useState('crypto') const [inputValue, setInputValue] = React.useState('') - const [buyAmount, setBuyAmount] = React.useState('') const [selectedWidgetTab, setSelectedWidgetTab] = React.useState('buy') const [showVisibleAssetsModal, setShowVisibleAssetsModal] = React.useState(false) const [sessionRoute, setSessionRoute] = React.useState(undefined) - const [selectedBuyOption, setSelectedBuyOption] = React.useState(BraveWallet.OnRampProvider.kRamp) - - const { buyAssetOptions, wyreAssetOptions, rampAssetOptions } = useAssets() const onToggleShowRestore = React.useCallback(() => { if (walletLocation === WalletRoutes.Restore) { @@ -116,10 +104,6 @@ function Container (props: Props) { } }, [walletLocation]) - const onSetBuyAmount = (value: string) => { - setBuyAmount(value) - } - const onSelectAccount = (account: WalletAccountType) => { props.walletActions.selectAccount(account) } @@ -181,19 +165,6 @@ function Container (props: Props) { } } - const onSubmitBuy = React.useCallback((asset: BraveWallet.BlockchainToken) => { - const buyAsset = selectedBuyOption === BraveWallet.OnRampProvider.kRamp ? { ...asset, symbol: getRampAssetSymbol(asset) } : asset - getBuyAssetUrl({ - asset: buyAsset, - onRampProvider: selectedBuyOption, - chainId: selectedNetwork.chainId, - address: selectedAccount.address, - amount: buyAmount - }) - .then(url => window.open(url, '_blank')) - .catch(e => console.error(e)) - }, [getBuyAssetUrl, selectedBuyOption, selectedNetwork, selectedAccount, buyAmount]) - const onAddHardwareAccounts = (selected: BraveWallet.HardwareWalletAccount[]) => { props.walletPageActions.addHardwareAccounts(selected) } @@ -420,16 +391,8 @@ function Container (props: Props) { diff --git a/components/brave_wallet_ui/panel/container.tsx b/components/brave_wallet_ui/panel/container.tsx index 52f7578f8f78..41da51ef89be 100644 --- a/components/brave_wallet_ui/panel/container.tsx +++ b/components/brave_wallet_ui/panel/container.tsx @@ -66,8 +66,7 @@ import LockPanel from '../components/extension/lock-panel' import { getNetworkInfo } from '../utils/network-utils' import { isHardwareAccount } from '../utils/address-utils' import { useAssets, useSwap, useSend, useHasAccount, usePrevNetwork } from '../common/hooks' -import { getRampAssetSymbol, getUniqueAssets } from '../utils/asset-utils' -import { getBuyAssetUrl } from '../common/async/lib' +import { getUniqueAssets } from '../utils/asset-utils' type Props = { panel: PanelState @@ -132,14 +131,10 @@ function Container (props: Props) { const [selectedAccounts, setSelectedAccounts] = React.useState([]) const [filteredAppsList, setFilteredAppsList] = React.useState(AppsList) const [showSelectAsset, setShowSelectAsset] = React.useState(false) - const [buyAmount, setBuyAmount] = React.useState('') - const [selectedBuyOption, setSelectedBuyOption] = React.useState(BraveWallet.OnRampProvider.kRamp) const { sendAssetOptions, buyAssetOptions, - wyreAssetOptions, - rampAssetOptions, panelUserAssetList } = useAssets() @@ -182,31 +177,6 @@ function Container (props: Props) { } }, [hasIncorrectPassword]) - const onSetBuyAmount = (value: string) => { - setBuyAmount(value) - } - - const onSubmitBuy = () => { - const asset = selectedBuyOption === BraveWallet.OnRampProvider.kRamp - ? { ...selectedBuyAsset, symbol: getRampAssetSymbol(selectedBuyAsset) } - : selectedBuyAsset - getBuyAssetUrl({ - asset, - onRampProvider: selectedBuyOption, - chainId: selectedNetwork.chainId, - address: selectedAccount.address, - amount: buyAmount - }) - .then((url: string) => { - chrome.tabs.create({ url }, () => { - if (chrome.runtime.lastError) { - console.error('tabs.create failed: ' + chrome.runtime.lastError.message) - } - }) - }) - .catch(e => console.error(e)) - } - const onChangeSendView = (view: BuySendSwapViewTypes) => { if (view === 'assets') { setShowSelectAsset(true) @@ -821,18 +791,8 @@ function Container (props: Props) { > diff --git a/components/brave_wallet_ui/stories/locale.ts b/components/brave_wallet_ui/stories/locale.ts index 7ba1cffdee1d..9f9c88624214 100644 --- a/components/brave_wallet_ui/stories/locale.ts +++ b/components/brave_wallet_ui/stories/locale.ts @@ -283,6 +283,11 @@ provideStrings({ braveWalletBuyDescription: 'Get Ether from a faucet for $1', braveWalletBuyWyreButton: 'Continue to Wyre', braveWalletBuyFaucetButton: 'Get Ether', + braveWalletBuyContinueButton: 'Select purchase method', + braveWalletBuyRampNetworkName: 'Ramp.Network', + braveWalletBuyWyreName: 'Wyre', + braveWalletBuyRampDescription: 'Buy with CC/Debit or ACH. Competitive Rates.', + braveWalletBuyWyreDescription: 'Buy with CC/Debit or ACH. Competitive Rates.', // Sign Transaction Panel braveWalletSignTransactionTitle: 'Your signature is being requested', diff --git a/components/brave_wallet_ui/stories/screens/buy-send-swap.tsx b/components/brave_wallet_ui/stories/screens/buy-send-swap.tsx index a2ac48ae657c..928c7738bdfa 100644 --- a/components/brave_wallet_ui/stories/screens/buy-send-swap.tsx +++ b/components/brave_wallet_ui/stories/screens/buy-send-swap.tsx @@ -3,7 +3,6 @@ import { useSelector } from 'react-redux' import { BuySendSwapTypes, UserAccountType, - BraveWallet, BuySupportedChains, WalletState } from '../../constants/types' @@ -18,36 +17,19 @@ import { useSwap, useHasAccount, usePrevNetwork } from '../../common/hooks' export interface Props { selectedTab: BuySendSwapTypes - buyAmount: string - buyAssetOptions: BraveWallet.BlockchainToken[] - onSubmitBuy: (asset: BraveWallet.BlockchainToken) => void onSelectAccount: (account: UserAccountType) => void - onSetBuyAmount: (value: string) => void onSelectTab: (tab: BuySendSwapTypes) => void - selectedBuyOption: BraveWallet.OnRampProvider - onSelectBuyOption: (optionId: BraveWallet.OnRampProvider) => void - wyreAssetOptions: BraveWallet.BlockchainToken[] - rampAssetOptions: BraveWallet.BlockchainToken[] } function BuySendSwap (props: Props) { const { selectedTab, - buyAmount, - buyAssetOptions, - onSubmitBuy, onSelectAccount, - onSetBuyAmount, - onSelectTab, - selectedBuyOption, - onSelectBuyOption, - rampAssetOptions, - wyreAssetOptions + onSelectTab } = props // redux const { - networkList, selectedNetwork, defaultCurrencies } = useSelector((state: { wallet: WalletState }) => state.wallet) @@ -101,18 +83,8 @@ function BuySendSwap (props: Props) { {selectedTab === 'buy' && } diff --git a/components/brave_wallet_ui/stories/wallet-concept.tsx b/components/brave_wallet_ui/stories/wallet-concept.tsx index e9f74a04710c..9f0f17d599a2 100644 --- a/components/brave_wallet_ui/stories/wallet-concept.tsx +++ b/components/brave_wallet_ui/stories/wallet-concept.tsx @@ -37,7 +37,7 @@ import { mockPageState } from './mock-data/mock-page-state' import { createPageReducer } from '../page/reducers/page_reducer' import * as Lib from '../common/async/__mocks__/lib' import { LibContext } from '../common/context/lib.context' -import { mockAccountAssetOptions, mockNewAssetOptions } from './mock-data/mock-asset-options' +import { mockNewAssetOptions } from './mock-data/mock-asset-options' import { createSendCryptoReducer } from '../common/reducers/send_crypto_reducer' import { mockSendCryptoState } from './mock-data/send-crypto-state' import { mockOriginInfo } from './mock-data/mock-origin-info' @@ -305,12 +305,10 @@ export const _DesktopWalletConcept = (args: { onboarding: boolean, locked: boole const [selectedNetwork] = React.useState(mockNetworks[0]) const [, setSelectedAccount] = React.useState(mockUserAccounts[0]) const [showAddModal, setShowAddModal] = React.useState(false) - const [buyAmount, setBuyAmount] = React.useState('') const [isRestoring, setIsRestoring] = React.useState(false) const [importAccountError, setImportAccountError] = React.useState(false) const [selectedWidgetTab, setSelectedWidgetTab] = React.useState('buy') const [showVisibleAssetsModal, setShowVisibleAssetsModal] = React.useState(false) - const [selectedBuyOption, setSelectedBuyOption] = React.useState(BraveWallet.OnRampProvider.kRamp) const onToggleRestore = () => { setIsRestoring(!isRestoring) @@ -438,18 +436,10 @@ export const _DesktopWalletConcept = (args: { onboarding: boolean, locked: boole setShowAddModal(!showAddModal) } - const onSubmitBuy = (asset: BraveWallet.BlockchainToken) => { - alert(`Buy ${asset.symbol} asset`) - } - const onSelectAccount = (account: UserAccountType) => { setSelectedAccount(account) } - const onSetBuyAmount = (value: string) => { - setBuyAmount(value) - } - const onRemoveAccount = () => { alert('Will Remove Account') } @@ -589,16 +579,8 @@ export const _DesktopWalletConcept = (args: { onboarding: boolean, locked: boole diff --git a/components/brave_wallet_ui/stories/wallet-extension-panels.tsx b/components/brave_wallet_ui/stories/wallet-extension-panels.tsx index 6d8f2691be9d..91642e04c6dd 100644 --- a/components/brave_wallet_ui/stories/wallet-extension-panels.tsx +++ b/components/brave_wallet_ui/stories/wallet-extension-panels.tsx @@ -365,17 +365,7 @@ export const _ConnectedPanel = (args: { locked: boolean }) => { const [selectedWyreAsset, setSelectedWyreAsset] = React.useState(mockEthToken) const [, setSelectedAsset] = React.useState(mockBasicAttentionToken) const [showSelectAsset, setShowSelectAsset] = React.useState(false) - const [buyAmount, setBuyAmount] = React.useState('') const [selectedTransaction, setSelectedTransaction] = React.useState(transactionList[1][0]) - const [selectedBuyOption, setSelectedBuyOption] = React.useState(BraveWallet.OnRampProvider.kRamp) - - const onSetBuyAmount = (value: string) => { - setBuyAmount(value) - } - - const onSubmitBuy = () => { - alert(`Buy ${selectedWyreAsset.symbol} asset`) - } const onChangeSendView = (view: BuySendSwapViewTypes) => { if (view === 'assets') { @@ -608,18 +598,9 @@ export const _ConnectedPanel = (args: { locked: boolean }) => { } {selectedPanel === 'buy' && + /> } {selectedPanel === 'sitePermissions' && Price in Test faucet Get Ether from a faucet for Ropsten Network$1 - Continue + Select purchase method Your signature is being requested Note that Brave can’t verify what will happen if you sign. A signature could authorize nearly any operation in your account or on your behalf, including (but not limited to) giving total control of your account and crypto assets to the site making the request. Only sign if you’re sure you want to take this action, and trust the requesting site. Sign at your own risk @@ -449,6 +449,10 @@ Not a valid FIL address Buy with Wyre Buy with Ramp + Ramp.Network + Wyre + Buy crypto with Visa or Mastercard. + Buy crypto with Visa or Mastercard. All Networks Secondary Networks