From 72704b9c30269b3c2c8bfbb759186b759e02308d Mon Sep 17 00:00:00 2001 From: Douglas Daniel Date: Wed, 15 Jan 2025 12:09:22 -0600 Subject: [PATCH 1/2] feat(wallet): Enable Meld Buy on Android --- .../hooks/use-multi-chain-buy-assets.ts | 29 ++---------- .../components/desktop/views/market/index.tsx | 46 ++----------------- .../desktop/views/market/market_asset.tsx | 18 ++------ .../portfolio/portfolio-fungible-asset.tsx | 18 ++------ .../desktop/wallet-menus/asset-item-menu.tsx | 12 ++--- .../page/router/unlocked_wallet_routes.tsx | 9 +--- .../android-buy/android/fund-wallet.tsx | 2 +- 7 files changed, 17 insertions(+), 117 deletions(-) diff --git a/components/brave_wallet_ui/common/hooks/use-multi-chain-buy-assets.ts b/components/brave_wallet_ui/common/hooks/use-multi-chain-buy-assets.ts index bbbd443573f3..6e400a655330 100644 --- a/components/brave_wallet_ui/common/hooks/use-multi-chain-buy-assets.ts +++ b/components/brave_wallet_ui/common/hooks/use-multi-chain-buy-assets.ts @@ -3,20 +3,14 @@ // License, v. 2.0. If a copy of the MPL was not distributed with this file, // you can obtain one at https://mozilla.org/MPL/2.0/. -import { skipToken } from '@reduxjs/toolkit/query/react' - // types import { BraveWallet } from '../../constants/types' // utils import { getAssetSymbol } from '../../utils/meld_utils' -import { loadTimeData } from '../../../common/loadTimeData' // hooks -import { - useGetMeldCryptoCurrenciesQuery, - useGetOnRampAssetsQuery -} from '../slices/api.slice' +import { useGetMeldCryptoCurrenciesQuery } from '../slices/api.slice' export const useFindBuySupportedToken = ( token?: Pick< @@ -24,24 +18,8 @@ export const useFindBuySupportedToken = ( 'symbol' | 'contractAddress' | 'chainId' > ) => { - // Computed - const isAndroid = loadTimeData.getBoolean('isAndroid') || false - // queries - const { data: options } = useGetMeldCryptoCurrenciesQuery( - token && !isAndroid ? undefined : skipToken - ) - - const { data: androidOptions = undefined } = useGetOnRampAssetsQuery( - token && isAndroid ? undefined : skipToken - ) - - const canBuyOnAndroid = - token && - isAndroid && - androidOptions?.allAssetOptions.some( - (asset) => asset.symbol.toLowerCase() === token.symbol.toLowerCase() - ) + const { data: options } = useGetMeldCryptoCurrenciesQuery() // computed const foundNativeToken = @@ -72,7 +50,6 @@ export const useFindBuySupportedToken = ( // render return { foundMeldBuyToken: - foundNativeToken || foundTokenByContractAddress || foundTokenBySymbol, - foundAndroidBuyToken: canBuyOnAndroid ? token : undefined + foundNativeToken || foundTokenByContractAddress || foundTokenBySymbol } } diff --git a/components/brave_wallet_ui/components/desktop/views/market/index.tsx b/components/brave_wallet_ui/components/desktop/views/market/index.tsx index 27e787369496..ff1ecc89372f 100644 --- a/components/brave_wallet_ui/components/desktop/views/market/index.tsx +++ b/components/brave_wallet_ui/components/desktop/views/market/index.tsx @@ -5,14 +5,12 @@ import * as React from 'react' import { useHistory } from 'react-router' -import { skipToken } from '@reduxjs/toolkit/query/react' // Hooks import { useGetCoinMarketQuery, useGetDefaultFiatCurrencyQuery, - useGetMeldCryptoCurrenciesQuery, - useGetOnRampAssetsQuery + useGetMeldCryptoCurrenciesQuery } from '../../../../common/slices/api.slice' import { useGetCombinedTokensListQuery // @@ -40,13 +38,11 @@ import { UpdateIframeHeightMessage } from '../../../../market/market-ui-messages' import { - makeAndroidFundWalletRoute, makeDepositFundsRoute, makeFundWalletRoute } from '../../../../utils/routes-utils' import { getAssetIdKey } from '../../../../utils/asset-utils' import { getAssetSymbol } from '../../../../utils/meld_utils' -import { loadTimeData } from '../../../../../common/loadTimeData' const assetsRequestLimit = 250 @@ -62,25 +58,11 @@ export const MarketView = () => { // Hooks const history = useHistory() - // Computed - const isAndroid = loadTimeData.getBoolean('isAndroid') || false - // Queries const { data: defaultFiatCurrency = 'usd' } = useGetDefaultFiatCurrencyQuery() const { data: combinedTokensList } = useGetCombinedTokensListQuery() - const { data: buyAssets } = useGetMeldCryptoCurrenciesQuery( - !isAndroid ? undefined : skipToken - ) - const { androidBuyAssets } = useGetOnRampAssetsQuery( - isAndroid ? undefined : skipToken, - { - selectFromResult: (res) => ({ - isLoading: res.isLoading, - androidBuyAssets: res.data?.allAssetOptions || [] - }) - } - ) + const { data: buyAssets } = useGetMeldCryptoCurrenciesQuery() const { data: allCoins = [], isLoading: isLoadingCoinMarketData } = useGetCoinMarketQuery({ @@ -108,28 +90,6 @@ export const MarketView = () => { const foundMeldTokens = buyAssets?.filter( (t) => getAssetSymbol(t) === symbolLower ) - const foundAndroidTokens = androidBuyAssets.filter( - (t) => t.symbol.toLowerCase() === symbolLower - ) - - if (isAndroid && foundAndroidTokens.length === 1) { - history.push( - makeAndroidFundWalletRoute(getAssetIdKey(foundAndroidTokens[0]), { - searchText: symbolLower - }) - ) - return - } - - if (isAndroid && foundAndroidTokens.length > 1) { - history.push( - makeAndroidFundWalletRoute('', { - searchText: symbolLower - }) - ) - return - } - if (foundMeldTokens) { history.push(makeFundWalletRoute(foundMeldTokens[0])) } @@ -169,7 +129,7 @@ export const MarketView = () => { } } }, - [buyAssets, combinedTokensList, history, androidBuyAssets, isAndroid] + [buyAssets, combinedTokensList, history] ) const onMarketDataFrameLoad = React.useCallback(() => { diff --git a/components/brave_wallet_ui/components/desktop/views/market/market_asset.tsx b/components/brave_wallet_ui/components/desktop/views/market/market_asset.tsx index bb4a324afe65..a91c19509e4f 100644 --- a/components/brave_wallet_ui/components/desktop/views/market/market_asset.tsx +++ b/components/brave_wallet_ui/components/desktop/views/market/market_asset.tsx @@ -23,7 +23,6 @@ import { import { getAssetIdKey } from '../../../../utils/asset-utils' import { getLocale } from '../../../../../common/locale' import { - makeAndroidFundWalletRoute, makeDepositFundsRoute, makeFundWalletRoute } from '../../../../utils/routes-utils' @@ -202,7 +201,7 @@ export const MarketAsset = () => { ) // custom hooks - const { foundAndroidBuyToken, foundMeldBuyToken } = useFindBuySupportedToken( + const { foundMeldBuyToken } = useFindBuySupportedToken( selectedAssetFromParams ) @@ -303,21 +302,10 @@ export const MarketAsset = () => { }, [history, selectedAssetFromParams, updateUserAssetVisible]) const onSelectBuy = React.useCallback(() => { - if (selectedAssetFromParams && foundAndroidBuyToken) { - history.push( - makeAndroidFundWalletRoute(getAssetIdKey(selectedAssetFromParams)) - ) - return - } if (foundMeldBuyToken) { history.push(makeFundWalletRoute(foundMeldBuyToken)) } - }, [ - history, - foundMeldBuyToken, - selectedAssetFromParams, - foundAndroidBuyToken - ]) + }, [history, foundMeldBuyToken]) const onSelectDeposit = React.useCallback(() => { if (foundTokens.length === 1) { @@ -398,7 +386,7 @@ export const MarketAsset = () => { /> - {(foundMeldBuyToken || foundAndroidBuyToken) && ( + {foundMeldBuyToken && (
{getLocale('braveWalletBuy')} diff --git a/components/brave_wallet_ui/components/desktop/views/portfolio/portfolio-fungible-asset.tsx b/components/brave_wallet_ui/components/desktop/views/portfolio/portfolio-fungible-asset.tsx index f93a88ddadc3..81fd6d1bf4d9 100644 --- a/components/brave_wallet_ui/components/desktop/views/portfolio/portfolio-fungible-asset.tsx +++ b/components/brave_wallet_ui/components/desktop/views/portfolio/portfolio-fungible-asset.tsx @@ -40,7 +40,6 @@ import { getLocale } from '../../../../../common/locale' import { makeNetworkAsset } from '../../../../options/asset-options' import { isRewardsAssetId } from '../../../../utils/rewards_utils' import { - makeAndroidFundWalletRoute, makeDepositFundsRoute, makeFundWalletRoute } from '../../../../utils/routes-utils' @@ -210,7 +209,7 @@ export const PortfolioFungibleAsset = () => { ) // custom hooks - const { foundAndroidBuyToken, foundMeldBuyToken } = useFindBuySupportedToken( + const { foundMeldBuyToken } = useFindBuySupportedToken( selectedAssetFromParams ) @@ -355,21 +354,10 @@ export const PortfolioFungibleAsset = () => { ]) const onSelectBuy = React.useCallback(() => { - if (foundAndroidBuyToken && selectedAssetFromParams) { - history.push( - makeAndroidFundWalletRoute(getAssetIdKey(selectedAssetFromParams)) - ) - return - } if (foundMeldBuyToken) { history.push(makeFundWalletRoute(foundMeldBuyToken)) } - }, [ - history, - foundAndroidBuyToken, - foundMeldBuyToken, - selectedAssetFromParams - ]) + }, [history, foundMeldBuyToken]) const onSelectDeposit = React.useCallback(() => { if (selectedAssetFromParams) { @@ -438,7 +426,7 @@ export const PortfolioFungibleAsset = () => { /> - {(foundMeldBuyToken || foundAndroidBuyToken) && !isRewardsToken && ( + {foundMeldBuyToken && !isRewardsToken && (
{getLocale('braveWalletBuy')} diff --git a/components/brave_wallet_ui/components/desktop/wallet-menus/asset-item-menu.tsx b/components/brave_wallet_ui/components/desktop/wallet-menus/asset-item-menu.tsx index 725b3138cf22..2c46d0dec72b 100644 --- a/components/brave_wallet_ui/components/desktop/wallet-menus/asset-item-menu.tsx +++ b/components/brave_wallet_ui/components/desktop/wallet-menus/asset-item-menu.tsx @@ -26,7 +26,6 @@ import { import { getLocale } from '../../../../common/locale' import Amount from '../../../utils/amount' import { - makeAndroidFundWalletRoute, makeDepositFundsRoute, makeFundWalletRoute, makeSendRoute, @@ -80,8 +79,7 @@ export const AssetItemMenu = (props: Props) => { checkIsAssetSellSupported } = useMultiChainSellAssets() - const { foundAndroidBuyToken, foundMeldBuyToken } = - useFindBuySupportedToken(asset) + const { foundMeldBuyToken } = useFindBuySupportedToken(asset) // Memos const isAssetsBalanceZero = React.useMemo(() => { @@ -96,14 +94,10 @@ export const AssetItemMenu = (props: Props) => { // Methods const onClickBuy = React.useCallback(() => { - if (foundAndroidBuyToken) { - history.push(makeAndroidFundWalletRoute(getAssetIdKey(asset))) - return - } if (foundMeldBuyToken) { history.push(makeFundWalletRoute(foundMeldBuyToken, account)) } - }, [foundMeldBuyToken, history, account, foundAndroidBuyToken, asset]) + }, [foundMeldBuyToken, history, account]) const onClickSend = React.useCallback(() => { history.push(makeSendRoute(asset, account)) @@ -145,7 +139,7 @@ export const AssetItemMenu = (props: Props) => { return ( - {(foundMeldBuyToken || foundAndroidBuyToken) && ( + {foundMeldBuyToken && ( {getLocale('braveWalletBuy')} diff --git a/components/brave_wallet_ui/page/router/unlocked_wallet_routes.tsx b/components/brave_wallet_ui/page/router/unlocked_wallet_routes.tsx index 44b5821a49b2..a7c4bb2a19be 100644 --- a/components/brave_wallet_ui/page/router/unlocked_wallet_routes.tsx +++ b/components/brave_wallet_ui/page/router/unlocked_wallet_routes.tsx @@ -6,9 +6,6 @@ import * as React from 'react' import { Route, Switch } from 'react-router' -// Utils -import { loadTimeData } from '../../../common/loadTimeData' - // Types import { WalletRoutes } from '../../constants/types' @@ -23,7 +20,6 @@ import { } from '../screens/backup-wallet/backup-wallet.routes' import { DepositFundsScreen } from '../screens/fund-wallet/deposit-funds' import { FundWalletScreen } from '../screens/fund-wallet/fund_wallet_v2' -import FundWalletScreenAndroid from '../screens/fund-wallet/fund-wallet' import { SimplePageWrapper } from '../screens/page-screen.styles' import { OnboardingSuccess // @@ -34,9 +30,6 @@ export const UnlockedWalletRoutes = ({ }: { sessionRoute: WalletRoutes | undefined }) => { - // Computed - const isAndroid = loadTimeData.getBoolean('isAndroid') || false - // render return ( <> @@ -63,7 +56,7 @@ export const UnlockedWalletRoutes = ({ - {isAndroid ? : } + diff --git a/components/brave_wallet_ui/page/screens/android-buy/android/fund-wallet.tsx b/components/brave_wallet_ui/page/screens/android-buy/android/fund-wallet.tsx index 56929177e9e9..8d8b7da0037e 100644 --- a/components/brave_wallet_ui/page/screens/android-buy/android/fund-wallet.tsx +++ b/components/brave_wallet_ui/page/screens/android-buy/android/fund-wallet.tsx @@ -27,7 +27,7 @@ import { // eslint-disable-next-line import/no-named-default default as BraveCoreThemeProvider } from '../../../../../common/BraveCoreThemeProvider' -import { FundWalletScreen } from '../../fund-wallet/fund-wallet' +import { FundWalletScreen } from '../../fund-wallet/fund_wallet_v2' // Resources import { setIconBasePath } from '@brave/leo/react/icon' From 4b6f7e96cf3488ec6bb216b968bb4d6327f6a863 Mon Sep 17 00:00:00 2001 From: Simone Arpe Date: Mon, 20 Jan 2025 17:36:01 +0100 Subject: [PATCH 2/2] Fix browser tests for Android WebUI --- .../brave_wallet/browser/android_page_appearing_browsertest.cc | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/components/brave_wallet/browser/android_page_appearing_browsertest.cc b/components/brave_wallet/browser/android_page_appearing_browsertest.cc index f2e04ecfa4da..4b04cca35747 100644 --- a/components/brave_wallet/browser/android_page_appearing_browsertest.cc +++ b/components/brave_wallet/browser/android_page_appearing_browsertest.cc @@ -430,11 +430,12 @@ IN_PROC_BROWSER_TEST_F(AndroidPageAppearingBrowserTest, } } -IN_PROC_BROWSER_TEST_F(AndroidPageAppearingBrowserTest, TestBuyPageAppearing) { +IN_PROC_BROWSER_TEST_F(AndroidPageAppearingBrowserTest, TestMeldPageAppearing) { const GURL expected_url = GURL("brave://wallet/crypto/fund-wallet"); for (auto scheme : GetWebUISchemes()) { GURL url = GURL(base::StrCat({scheme, "wallet/crypto/fund-wallet"})); const std::vector ignore_patterns = { + "An internal error has occurred", "TypeError: Cannot read properties of undefined (reading 'forEach')", "ReactDOM.render is no longer supported in React 18"}; VerifyPage(url, expected_url, ignore_patterns);