feat: add topper and paymonade

apps/web/src/state/buyCrypto/hooks.ts

@@ -5,8 +5,8 @@ import { useRouter } from 'next/router'
 import type { ParsedUrlQuery } from 'querystring'
 import { useCallback, useEffect } from 'react'
 import { buyCryptoReducerAtom, type BuyCryptoState } from 'state/buyCrypto/reducer'
+
 import { OnRampChainId as ChainId, type OnRampCurrency as Currency } from 'views/BuyCrypto/constants'
-import { useAccount } from 'wagmi'
 import { Field, replaceBuyCryptoState, selectCurrency, switchCurrencies, typeInput } from './actions'
 
 const useEnableBtcPurchases = atomWithStorage<boolean>('pcs:enable-buy-btc-native', false)
@@ -77,13 +77,11 @@ export async function queryParametersToBuyCryptoState(
   }
 }
 
-export function useDefaultsFromURLSearch(account: string | undefined) {
+export function useDefaultsFromURLSearch() {
   const [, dispatch] = useAtom(buyCryptoReducerAtom)
   const { chainId } = useActiveChainId()
-  const { address } = useAccount()
   const { query, isReady } = useRouter()
 
-  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
   useEffect(() => {
     const fetchData = async () => {
       if (!isReady || !chainId) return
@@ -99,5 +97,5 @@ export function useDefaultsFromURLSearch(account: string | undefined) {
       )
     }
     fetchData()
-  }, [dispatch, query, isReady, account, chainId, address])
+  }, [dispatch, query, isReady, chainId])
 }

apps/web/src/views/BuyCrypto/components/ProviderCampaign/ProviderCampaign.tsx

@@ -11,6 +11,7 @@ const activeCampaigns: { [provider in keyof typeof ONRAMP_PROVIDERS]: boolean }
   [ONRAMP_PROVIDERS.Mercuryo]: false,
   [ONRAMP_PROVIDERS.MoonPay]: false,
   [ONRAMP_PROVIDERS.Transak]: false,
+  [ONRAMP_PROVIDERS.Topper]: false,
 }
 
 const ProviderCampaign = ({ provider }: { provider: keyof typeof ONRAMP_PROVIDERS }) => {

apps/web/src/views/BuyCrypto/components/ProviderSelector/ProviderSelector.tsx

@@ -129,7 +129,6 @@ export const ProviderSelector = ({
           className="open-currency-select-button"
           selected={!!selectedQuote}
           onClick={() => onQuoteSelect?.(true)}
-          disabled={quoteLoading}
         >
           <Flex alignItems="center" width="100%">
             <OnRampProviderLogo size={32} provider={selectedQuote?.provider} loading={quoteLoading} />

apps/web/src/views/BuyCrypto/components/TransactionFeeDetails/TransactionFeeDetails.tsx

@@ -20,21 +20,21 @@ import BuyCryptoTooltip from '../Tooltip/Tooltip'
 
 type FeeComponents = { providerFee: number; networkFee: number; price: number }
 interface TransactionFeeDetailsProps {
-  selectedQuote: OnRampProviderQuote | undefined
+  selectedQuote?: OnRampProviderQuote
   currency: Currency
   independentField: Field
-  inputError: string | undefined
-  quotesError: string | undefined
-  loading: boolean | undefined
+  inputError?: string
+  loading?: boolean
+  quotesError?: boolean
 }
 
 export const TransactionFeeDetails = ({
   selectedQuote,
   currency,
   independentField,
   inputError,
-  quotesError,
   loading,
+  quotesError,
 }: TransactionFeeDetailsProps) => {
   const [elementHeight, setElementHeight] = useState<number>(51)
   const [show, setShow] = useState<boolean>(false)
@@ -48,7 +48,6 @@ export const TransactionFeeDetails = ({
 
   const handleExpandClick = useCallback(() => setShow(!show), [show])
 
-  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
   useEffect(() => {
     const elRef = contentRef.current
     if (elRef) setElementHeight(elRef.scrollHeight)
@@ -72,15 +71,11 @@ export const TransactionFeeDetails = ({
         </StyledFeesContainer3>
       </Flex>
 
-      <StyledFeesContainer
-        width="100%"
-        onClick={handleExpandClick}
-        disabled={Boolean(loading || quotesError || inputError)}
-      >
+      <StyledFeesContainer width="100%" onClick={handleExpandClick} disabled={Boolean(loading || inputError)}>
         <StyledArrowHead />
         <Flex justifyContent="space-between" alignItems="center">
           <Flex alignItems="center">
-            {selectedQuote && !quotesError ? (
+            {selectedQuote && (
               <>
                 <Text fontWeight="600" fontSize="14px" px="2px">
                   {t('Est total fees:')}
@@ -95,11 +90,15 @@ export const TransactionFeeDetails = ({
                   })}
                 </SkeletonText>
               </>
-            ) : (
-              <Text fontWeight="600" fontSize="14px" px="2px">
-                {quotesError}
+            )}
+            {quotesError && (
+              <Text fontWeight="600" fontSize="14px" px="2px" color="textSubtle">
+                {t('No quotes available for %cryptoCurrency% right now.', {
+                  cryptoCurrency: currency?.symbol,
+                })}
               </Text>
             )}
+
             <BuyCryptoTooltip
               opacity={0.7}
               iconSize="17px"

apps/web/src/views/BuyCrypto/constants.ts

@@ -37,6 +37,7 @@ export enum ONRAMP_PROVIDERS {
   MoonPay = 'MoonPay',
   Mercuryo = 'Mercuryo',
   Transak = 'Transak',
+  Topper = 'Topper',
 }
 
 export enum FeeTypes {
@@ -62,12 +63,14 @@ export const PROVIDER_ICONS = {
   [ONRAMP_PROVIDERS.MoonPay]: `${ASSET_CDN}/web/onramp/moonpay.svg`,
   [ONRAMP_PROVIDERS.Mercuryo]: `${ASSET_CDN}/web/onramp/mercuryo.svg`,
   [ONRAMP_PROVIDERS.Transak]: `${ASSET_CDN}/web/onramp/transak.svg`,
+  [ONRAMP_PROVIDERS.Topper]: `${ASSET_CDN}/web/onramp/topper.png`,
 } satisfies Record<keyof typeof ONRAMP_PROVIDERS, string>
 
 export const providerFeeTypes: { [provider in ONRAMP_PROVIDERS]: FeeTypes[] } = {
   [ONRAMP_PROVIDERS.MoonPay]: MOONPAY_FEE_TYPES,
   [ONRAMP_PROVIDERS.Mercuryo]: MERCURYO_FEE_TYPES,
   [ONRAMP_PROVIDERS.Transak]: MOONPAY_FEE_TYPES,
+  [ONRAMP_PROVIDERS.Topper]: MOONPAY_FEE_TYPES,
 }
 
 export const getNetworkDisplay = (chainId: number | undefined): string => {
@@ -149,12 +152,19 @@ export const chainIdToTransakNetworkId: { [id: number]: string } = {
   [OnRampChainId.BTC]: 'mainnet',
 }
 
+export const chainIdToTopperNetworkId: { [id: number]: string } = {
+  [OnRampChainId.ETHEREUM]: 'ethereum',
+  [OnRampChainId.ARBITRUM_ONE]: 'arbitrum',
+  0: 'bitcoin',
+}
+
 export const combinedNetworkIdMap: {
   [provider in keyof typeof ONRAMP_PROVIDERS]: { [id: number]: string }
 } = {
   [ONRAMP_PROVIDERS.MoonPay]: chainIdToMoonPayNetworkId,
   [ONRAMP_PROVIDERS.Mercuryo]: chainIdToMercuryoNetworkId,
   [ONRAMP_PROVIDERS.Transak]: chainIdToTransakNetworkId,
+  [ONRAMP_PROVIDERS.Topper]: chainIdToTopperNetworkId,
 }
 
 export const selectCurrencyField = (unit: OnRampUnit, mode: string) => {

apps/web/src/views/BuyCrypto/containers/BuyCryptoForm.tsx

@@ -11,7 +11,6 @@ import {
   useState,
   type ChangeEvent,
   type Dispatch,
-  type RefObject,
   type SetStateAction,
 } from 'react'
 import { useBuyCryptoActionHandlers, useBuyCryptoState } from 'state/buyCrypto/hooks'
@@ -32,6 +31,7 @@ import { useIsBtc } from '../hooks/useIsBtc'
 import { useOnRampCurrencyOrder } from '../hooks/useOnRampCurrencyOrder'
 import { useLimitsAndInputError } from '../hooks/useOnRampInputError'
 import { useOnRampQuotes } from '../hooks/useOnRampQuotes'
+import type { ProviderAvailabilities } from '../hooks/useProviderAvailabilities'
 import InputExtended, { StyledVerticalLine } from '../styles'
 import { FormContainer } from './FormContainer'
 import { FormHeader } from './FormHeader'
@@ -48,7 +48,7 @@ interface OnRampCurrencySelectPopOverProps {
 }
 type InputEvent = ChangeEvent<HTMLInputElement>
 
-export function BuyCryptoForm() {
+export function BuyCryptoForm({ providerAvailabilities }: { providerAvailabilities: ProviderAvailabilities }) {
   const { typedValue, independentField } = useBuyCryptoState()
 
   const { t } = useTranslation()
@@ -86,15 +86,17 @@ export function BuyCryptoForm() {
     enabled: Boolean(!inputError),
   })
 
-  const quotes = useMemo(() => data?.quotes, [data?.quotes])
-  const quotesError = useMemo(() => data?.quotesError, [data?.quotesError])
+  const { quotes, quotesError } = useMemo(() => {
+    const filteredQuotes = data?.quotes.filter((q) => providerAvailabilities[q.provider])
+    return { quotes: filteredQuotes, quotesError: isError || data?.quotes.length === 0 }
+  }, [data?.quotes, providerAvailabilities, isError])
 
   const outputValue = useMemo((): string | undefined => {
-    if (inputError || quotesError || !selectedQuote) return undefined
+    if (inputError || !selectedQuote) return undefined
     const { amount, quote } = selectedQuote
     const output = isFiat(unit) ? quote : amount
     return formatQuoteDecimals(output, unit)
-  }, [unit, selectedQuote, inputError, quotesError])
+  }, [unit, selectedQuote, inputError])
 
   const handleTypeInput = useCallback((value: string) => onUserInput(Field.INPUT, value), [onUserInput])
   const handleAddressInput = useCallback((event: InputEvent) => setSearchQuery(event.target.value), [])
@@ -118,13 +120,12 @@ export function BuyCryptoForm() {
   }, [handleTypeInput, defaultAmt, unit, onFlip, searchQuery, onCurrencySelection])
 
   useEffect(() => {
-    if (!quotes || quotes?.length === 0) return
-    setSelectedQuote(quotes[0])
+    if (!quotes || quotesError) return
     if (bestQuoteRef.current !== quotes[0]) {
       bestQuoteRef.current = quotes[0]
       setSelectedQuote(quotes[0])
     }
-  }, [quotes])
+  }, [quotes, quotesError])
 
   useEffect(() => {
     if (!defaultAmt || !isFiat(unit)) return
@@ -140,7 +141,7 @@ export function BuyCryptoForm() {
       <OnRampCurrencySelectPopOver
         quotes={quotes}
         selectedQuote={selectedQuote}
-        isError={isError}
+        isError={quotesError}
         inputError={inputError}
         isFetching={isLoading}
         setSelectedQuote={setSelectedQuote}
@@ -166,13 +167,13 @@ export function BuyCryptoForm() {
         </Box>
         <BuyCryptoSelector
           id={isFiat(unit) ? 'onramp-crypto' : 'onramp-fiat'}
+          inputLoading={Boolean(isLoading || inputError || quotesError)}
           onCurrencySelect={onCurrencySelection}
           selectedCurrency={currencyIn}
           currencyLoading={Boolean(!currencyIn)}
-          value={outputValue ?? ''}
+          value={outputValue ?? '0.0'}
           disableInput
           unit={unit}
-          inputLoading={Boolean(isLoading || inputError || quotesError)}
         />
         <BitcoinAddressInput
           isBtc={isBtc}
@@ -193,20 +194,20 @@ export function BuyCryptoForm() {
           currency={cryptoCurrency}
           independentField={independentField}
           inputError={inputError}
-          quotesError={quotesError}
           loading={isLoading}
+          quotesError={quotesError}
         />
 
         <Box>
           <FiatOnRampModalButton
             externalTxIdRef={externalTxIdRef}
             cryptoCurrency={cryptoCurrency}
             selectedQuote={selectedQuote}
-            disabled={Boolean(isError || quotesError || inputError || btcError)}
-            loading={Boolean(quotesError || isLoading)}
+            disabled={Boolean(inputError || btcError || quotesError)}
+            loading={isLoading}
             resetBuyCryptoState={resetBuyCryptoState}
             btcAddress={debouncedQuery}
-            errorText={amountError}
+            errorText={quotesError ? t('No Quotes') : amountError}
             onRampUnit={unit}
           />
           <Flex alignItems="center" justifyContent="center">
@@ -294,7 +295,7 @@ const BitcoinAddressInput = ({
   validAddress: GetBtcAddrValidationReturnType | undefined
   handleInput: (event) => void
 }) => {
-  const inputRef = useRef<HTMLInputElement>()
+  const inputRef = useRef<HTMLInputElement>(null)
   const { isMobile } = useMatchBreakpoints()
   const { t } = useTranslation()
 
@@ -311,7 +312,7 @@ const BitcoinAddressInput = ({
         scale="lg"
         autoComplete="off"
         value={searchQuery}
-        ref={inputRef as RefObject<HTMLInputElement>}
+        ref={inputRef}
         onChange={handleInput}
         color="primary"
         isSuccess={Boolean(validAddress?.result)}

apps/web/src/views/BuyCrypto/hooks/useOnRampLimits.ts

@@ -50,10 +50,7 @@ export const useOnRampLimit = <selectData = GetOnRampLimitReturnType>(
         network,
       },
     ]),
-    queryFn: async ({ queryKey }) => {
-      // eslint-disable-next-line @typescript-eslint/no-shadow
-      const { fiatCurrency, cryptoCurrency, network } = queryKey[1]
-
+    queryFn: async () => {
       if (!fiatCurrency || !cryptoCurrency) {
         throw new Error('Invalid parameters')
       }

apps/web/src/views/BuyCrypto/hooks/useOnRampQuotes.ts

@@ -1,6 +1,5 @@
 import { useQuery, type UseQueryResult } from '@tanstack/react-query'
 import { ONRAMP_API_BASE_URL } from 'config/constants/endpoints'
-import { getNetworkDisplay, type ONRAMP_PROVIDERS } from '../constants'
 import {
   createQueryKey,
   type Evaluate,
@@ -16,7 +15,7 @@ const getOnRampQuotesQueryKey = createQueryKey<'fetch-onramp-quotes', [ExactPart
 
 type GetOnRampQuotesQueryKey = ReturnType<typeof getOnRampQuotesQueryKey>
 
-type GetOnRampQuoteReturnType = { quotes: OnRampProviderQuote[]; quotesError: string | undefined }
+type GetOnRampQuoteReturnType = { quotes: OnRampProviderQuote[] }
 
 export type UseOnRampQuotesReturnType<selectData = GetOnRampQuoteReturnType> = UseQueryResult<selectData, Error>
 
@@ -29,7 +28,6 @@ export const useOnRampQuotes = <selectData = GetOnRampQuoteReturnType>(
   parameters: UseOnRampQuotesParameters<selectData>,
 ) => {
   const { fiatAmount, enabled, cryptoCurrency, fiatCurrency, network, onRampUnit, ...query } = parameters
-
   return useQuery({
     ...query,
     queryKey: getOnRampQuotesQueryKey([
@@ -44,25 +42,19 @@ export const useOnRampQuotes = <selectData = GetOnRampQuoteReturnType>(
     refetchInterval: 40 * 1_000,
     staleTime: 40 * 1_000,
     enabled: Boolean(enabled),
-    queryFn: async ({ queryKey }) => {
-      // eslint-disable-next-line @typescript-eslint/no-shadow
-      const { cryptoCurrency, fiatAmount, fiatCurrency, network, onRampUnit } = queryKey[1]
+    queryFn: async () => {
       if (!cryptoCurrency || !fiatAmount || !fiatCurrency || !onRampUnit) {
         throw new Error('Missing buy-crypto fetch-provider-quotes params')
       }
-      const providerQuotes = await fetchProviderQuotes({
+      const quotes = await fetchProviderQuotes({
         cryptoCurrency,
         fiatAmount,
         fiatCurrency,
         network,
         onRampUnit,
       })
-      const quotes = providerQuotes.filter((q) => Boolean(q.quote !== 0)).sort((a, b) => b.quote - a.quote)
 
-      const networkDisplay = getNetworkDisplay(network)
-      const error =
-        providerQuotes.length === 0 ? `No quotes available for ${cryptoCurrency} on ${networkDisplay}` : undefined
-      return { quotes, quotesError: error }
+      return { quotes }
     },
   })
 }
@@ -83,16 +75,3 @@ async function fetchProviderQuotes(payload: OnRampQuotesPayload): Promise<OnRamp
   const result = await response.json()
   return result.result
 }
-
-export async function fetchProviderAvailabilities(): Promise<{ [provider in keyof typeof ONRAMP_PROVIDERS]: boolean }> {
-  // Fetch data from endpoint 1
-  const response = await fetch(`${ONRAMP_API_BASE_URL}/fetch-provider-availability`, {
-    headers: {
-      Accept: 'application/json',
-      'Content-Type': 'application/json',
-    },
-    method: 'POST',
-  })
-  const result = await response.json()
-  return result.result
-}