Code Cleanup and Route Params

browser/ui/webui/brave_wallet/android/android_wallet_page_ui.cc

@@ -70,10 +70,10 @@ AndroidWalletPageUI::AndroidWalletPageUI(content::WebUI* web_ui,
           kUntrustedLineChartURL + " " + kUntrustedMarketURL + ";");
   source->OverrideContentSecurityPolicy(
       network::mojom::CSPDirectiveName::ImgSrc,
-      base::JoinString(
-          {"img-src", "'self'", "chrome://resources",
-           "chrome://erc-token-images", base::StrCat({"data:", ";"})},
-          " "));
+      base::JoinString({"img-src", "'self'", "chrome://resources",
+                        "chrome://erc-token-images", "chrome://image",
+                        base::StrCat({"data:", ";"})},
+                       " "));
   source->AddString("braveWalletTrezorBridgeUrl", kUntrustedTrezorURL);
   source->AddString("braveWalletNftBridgeUrl", kUntrustedNftURL);
   source->AddString("braveWalletLineChartBridgeUrl", kUntrustedLineChartURL);

components/brave_wallet/browser/android_page_appearing_browsertest.cc

@@ -437,7 +437,9 @@ IN_PROC_BROWSER_TEST_F(AndroidPageAppearingBrowserTest, TestBuyPageAppearing) {
     GURL url = GURL(base::StrCat({scheme, "wallet/crypto/fund-wallet"}));
     const std::vector<std::string> ignore_patterns = {
         "TypeError: Cannot read properties of undefined (reading 'forEach')",
-        "ReactDOM.render is no longer supported in React 18"};
+        "ReactDOM.render is no longer supported in React 18",
+        "Error getting default country",
+        "Error: An internal error has occurred"};
     VerifyPage(url, expected_url, ignore_patterns);
   }
 }

components/brave_wallet/browser/brave_wallet_constants.h

@@ -1054,6 +1054,28 @@ inline constexpr webui::LocalizedString kLocalizedStrings[] = {
     {"braveWalletBuyWithRamp", IDS_BRAVE_WALLET_BUY_WITH_RAMP},
     {"braveWalletSellWithProvider", IDS_BRAVE_WALLET_SELL_WITH_PROVIDER},
     {"braveWalletBuyDisclaimer", IDS_BRAVE_WALLET_BUY_DISCLAIMER},
+    {"braveWalletTransactionsPartner", IDS_BRAVE_WALLET_TRANSACTIONS_PARTNER},
+    {"braveWalletTransactionPartnerConsent",
+     IDS_BRAVE_WALLET_TRANSACTION_PARTNER_CONSENT},
+    {"braveWalletMeldTermsOfUse", IDS_BRAVE_WALLET_MELD_TERMS_OF_USE},
+    {"braveWalletBestOption", IDS_BRAVE_WALLET_BEST_OPTION},
+    {"braveWalletExchangeRateWithFees",
+     IDS_BRAVE_WALLET_EXCHANGE_RATE_WITH_FEES},
+    {"braveWalletFees", IDS_BRAVE_WALLET_FEES},
+    {"braveWalletPriceCurrency", IDS_BRAVE_WALLET_PRICE_CURRENCY},
+    {"braveWalletBuyWithProvider", IDS_BRAVE_WALLET_BUY_WITH_PROVIDER},
+    {"braveWalletAsset", IDS_BRAVE_WALLET_ASSETS},
+    {"braveWalletSelected", IDS_BRAVE_WALLET_SELECTED},
+    {"braveWalletNoAvailableCurrencies",
+     IDS_BRAVE_WALLET_NO_AVAILABLE_CURRENCIES},
+    {"braveWalletGettingBestPrices", IDS_BRAVE_WALLET_GETTING_BEST_PRICES},
+    {"braveWalletBuyAsset", IDS_BRAVE_WALLET_BUY_ASSET},
+    {"braveWalletNoProviderFound", IDS_BRAVE_WALLET_NO_PROVIDER_FOUND},
+    {"braveWalletTrySearchingForDifferentAsset",
+     IDS_BRAVE_WALLET_TRY_SEARCHING_FOR_DIFFERENT_ASSET},
+    {"braveWalletNoResultsFound", IDS_BRAVE_WALLET_NO_RESULTS_FOUND},
+    {"braveWalletTryDifferentKeywords",
+     IDS_BRAVE_WALLET_TRY_DIFFERENT_KEYWORDS},
     {"braveWalletBuyWithSardine", IDS_BRAVE_WALLET_BUY_WITH_SARDINE},
     {"braveWalletBuyWithTransak", IDS_BRAVE_WALLET_BUY_WITH_TRANSAK},
     {"braveWalletBuyWithStripe", IDS_BRAVE_WALLET_BUY_WITH_STRIPE},

components/brave_wallet_ui/common/hooks/use-multi-chain-buy-assets.ts

@@ -8,24 +8,49 @@ import { skipToken } from '@reduxjs/toolkit/query/react'
 // types
 import { BraveWallet } from '../../constants/types'
 
+// utils
+import { getAssetSymbol } from '../../utils/meld_utils'
+
 // hooks
-import { useGetOnRampAssetsQuery } from '../slices/api.slice'
+import { useGetMeldCryptoCurrenciesQuery } from '../slices/api.slice'
 
-export const useIsBuySupported = (
-  token?: Pick<BraveWallet.BlockchainToken, 'symbol'>
+export const useFindBuySupportedToken = (
+  token?: Pick<
+    BraveWallet.BlockchainToken,
+    'symbol' | 'contractAddress' | 'chainId'
+  >
 ) => {
   // queries
-  const { data: options = undefined } = useGetOnRampAssetsQuery(
+  const { data: options } = useGetMeldCryptoCurrenciesQuery(
     token ? undefined : skipToken
   )
 
   // computed
-  const isBuySupported =
+  const foundNativeToken =
+    token &&
+    token.contractAddress === '' &&
+    options?.find(
+      (asset) =>
+        asset.chainId?.toLowerCase() === token.chainId.toLowerCase() &&
+        getAssetSymbol(asset).toLowerCase() === token.symbol.toLowerCase()
+    )
+
+  const foundTokenByContractAddress =
+    token &&
+    options?.find(
+      (asset) =>
+        asset.contractAddress?.toLowerCase() ===
+          token.contractAddress.toLowerCase() &&
+        asset.chainId?.toLowerCase() === token.chainId.toLowerCase()
+    )
+
+  const foundTokenBySymbol =
     token &&
-    options?.allAssetOptions.some(
-      (asset) => asset.symbol.toLowerCase() === token.symbol.toLowerCase()
+    options?.find(
+      (asset) =>
+        getAssetSymbol(asset).toLowerCase() === token.symbol.toLowerCase()
     )
 
   // render
-  return isBuySupported
+  return foundNativeToken || foundTokenByContractAddress || foundTokenBySymbol
 }

components/brave_wallet_ui/common/slices/endpoints/meld_integration.endpoints.ts

@@ -3,36 +3,60 @@
 // 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/.
 
+// Types
 import {
   MeldCountry,
   MeldCryptoCurrency,
   MeldFiatCurrency,
   MeldFilter,
   MeldCryptoQuote,
   MeldServiceProvider,
-  SupportedOnRampNetworks,
   MeldPaymentMethod,
   CryptoWidgetCustomerData,
   CryptoBuySessionData,
   MeldCryptoWidget
 } from '../../../constants/types'
+
+// Utils
 import { handleEndpointError } from '../../../utils/api-utils'
+import { getMeldTokensChainId } from '../../../utils/meld_utils'
 import { WalletApiEndpointBuilderParams } from '../api-base.slice'
 
 type GetCryptoQuotesArgs = {
   country: string
   sourceCurrencyCode: string
-  destionationCurrencyCode: string
+  destinationCurrencyCode: string
   amount: number
   account: string | null
-  paymentMethods: MeldPaymentMethod[]
+  paymentMethod: MeldPaymentMethod
+}
+
+type GetPaymentMethodsArg = {
+  country: string
+  sourceCurrencyCode: string
 }
 
 type CreateMeldBuyWidgetArgs = {
   sessionData: CryptoBuySessionData
   customerData: CryptoWidgetCustomerData
 }
 
+const supportedChains = [
+  'BTC',
+  'FIL',
+  'ZEC',
+  'ETH',
+  'SOLANA',
+  'FTM',
+  'BSC',
+  'POLYGON',
+  'OPTIMISM',
+  'AURORA',
+  'CELO',
+  'ARBITRUM',
+  'AVAXC'
+]
+
 export const meldIntegrationEndpoints = ({
   query,
   mutation
@@ -90,16 +114,17 @@ export const meldIntegrationEndpoints = ({
             serviceProviders: undefined,
             paymentMethodTypes: undefined,
             statuses: undefined,
-            cryptoChains: undefined
+            cryptoChains: supportedChains.join(',')
           }
           const { fiatCurrencies: cryptoCurrencies, error } =
             await meldIntegrationService.getCryptoCurrencies(filter)
 
-          const supportedAssets = cryptoCurrencies?.filter((asset) =>
-            SupportedOnRampNetworks.includes(
-              '0x' + parseInt(asset?.chainId ?? '').toString(16)
-            )
-          )
+          const tokenList = cryptoCurrencies?.map((token) => {
+            return {
+              ...token,
+              chainId: getMeldTokensChainId(token)
+            }
+          })
 
           if (error) {
             return handleEndpointError(
@@ -110,7 +135,7 @@ export const meldIntegrationEndpoints = ({
           }
 
           return {
-            data: supportedAssets || []
+            data: tokenList || []
           }
         } catch (error) {
           return handleEndpointError(
@@ -126,8 +151,6 @@ export const meldIntegrationEndpoints = ({
       queryFn: async (_arg, { endpoint }, _extraOptions, baseQuery) => {
         try {
           const defaultCountry: string = await new Promise((resolve) => {
-            // TODO(william): implement this for wallet
-            // to avoid using braveRewards api
             chrome.braveRewards.getDefaultCountry((defaultCountry) => {
               resolve(defaultCountry)
             })
@@ -237,18 +260,19 @@ export const meldIntegrationEndpoints = ({
           const {
             country,
             sourceCurrencyCode,
-            destionationCurrencyCode,
+            destinationCurrencyCode,
             amount,
-            account
+            account,
+            paymentMethod
           } = params
 
           const result = await meldIntegrationService.getCryptoQuotes(
             country,
             sourceCurrencyCode,
-            destionationCurrencyCode,
+            destinationCurrencyCode,
             amount,
             account,
-            null
+            paymentMethod.paymentMethod
           )
 
           return {
@@ -264,14 +288,14 @@ export const meldIntegrationEndpoints = ({
       },
       invalidatesTags: ['MeldCryptoQuotes']
     }),
-    getMeldPaymentMethods: query<MeldPaymentMethod[], void>({
-      queryFn: async (_arg, { endpoint }, _extraOptions, baseQuery) => {
+    getMeldPaymentMethods: query<MeldPaymentMethod[], GetPaymentMethodsArg>({
+      queryFn: async (params, { endpoint }, _extraOptions, baseQuery) => {
         try {
           const { meldIntegrationService } = baseQuery(undefined).data
-
+          const { country, sourceCurrencyCode } = params
           const filter: MeldFilter = {
-            countries: undefined,
-            fiatCurrencies: undefined,
+            countries: country,
+            fiatCurrencies: sourceCurrencyCode,
             cryptoCurrencies: undefined,
             serviceProviders: undefined,
             paymentMethodTypes: undefined,

components/brave_wallet_ui/components/desktop/popup-modals/partners_consent_modal/partners_consent_modal.stories.tsx

@@ -4,8 +4,12 @@
 // You can obtain one at https://mozilla.org/MPL/2.0/.
 
 import * as React from 'react'
+
+// Components
 import { PartnersConsentModal } from './partners_consent_modal'
-import WalletPageStory from '../../../../stories/wrappers/wallet-page-story-wrapper'
+import {
+  WalletPageStory //
+} from '../../../../stories/wrappers/wallet-page-story-wrapper'
 
 export const _PartnersConsentModal = () => {
   const [isOpen, setIsOpen] = React.useState(true)

components/brave_wallet_ui/components/desktop/popup-modals/partners_consent_modal/partners_consent_modal.style.ts

@@ -7,6 +7,9 @@ import styled from 'styled-components'
 import Dialog from '@brave/leo/react/dialog'
 import { font, spacing, color } from '@brave/leo/tokens/css/variables'
 
+// Shared Styles
+import { WalletButton } from '../../../shared/style'
+
 export const TermsDialog = styled(Dialog)`
   --leo-dialog-backdrop-background: rgba(17, 18, 23, 0.35);
   --leo-dialog-backdrop-filter: blur(8px);
@@ -29,10 +32,17 @@ export const TermsLabel = styled.span`
   font: ${font.default.regular};
   margin: 0;
   padding: 0;
+`
 
-  & a {
-    color: ${color.text.interactive};
-    text-decoration: none;
-    font: ${font.default.semibold};
-  }
+export const TermsButton = styled(WalletButton)`
+  font-family: Poppins;
+  color: ${color.text.interactive};
+  text-decoration: none;
+  font: ${font.default.semibold};
+  background: none;
+  cursor: pointer;
+  outline: none;
+  border: none;
+  margin: 0px;
+  padding: 0px;
 `