Merge pull request #837 from relayprotocol/feature/improve-sponsored-token-logic

Improve sponsored token logic

Author: pedromcunha

.changeset/long-jokes-move.md

@@ -0,0 +1,5 @@
+---
+'@relayprotocol/relay-kit-ui': patch
+---
+
+Improve sponsored tokens logic by switching to more flexible useSecureApi method

demo/pages/ui/swap.tsx

@@ -231,16 +231,41 @@ const SwapWidgetPage: NextPage = () => {
             lockChainId={singleChainMode ? 8453 : undefined}
             singleChainMode={singleChainMode}
             supportedWalletVMs={supportedWalletVMs}
-            sponsoredTokens={[
-              '792703809:EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v',
-              '130:0x078d782b760474a361dda0af3839290b0ef57ad6',
-              '103665049:0xdba34672e30cb065b1f93e3ab55318768fd6fef66c15942c9f7cb846e2f900e7::usdc::USDC',
-              '8453:0x833589fcd6edb6e08f4c7c32d4f71b54bda02913',
-              '43114:0xb97ef9ef8734c71904d8002f8b6bc66dd9c48a6e',
-              '137:0x3c499c542cef5e3811e1192ce70d8cc03d5c3359',
-              '42161:0xaf88d065e77c8cc2239327c5edb3a432268e5831',
-              '10:0x0b2c639c533813f4aa9d7837caf62653d097ff85'
-            ]}
+            useSecureBaseUrl={(parameters) => {
+              const evmChains = [137, 42161, 43114, 8453, 10]
+              const usdcSponsoredTokens = [
+                '792703809:EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v',
+                '130:0x078d782b760474a361dda0af3839290b0ef57ad6',
+                '103665049:0xdba34672e30cb065b1f93e3ab55318768fd6fef66c15942c9f7cb846e2f900e7::usdc::USDC',
+                '8453:0x833589fcd6edb6e08f4c7c32d4f71b54bda02913',
+                '43114:0xb97ef9ef8734c71904d8002f8b6bc66dd9c48a6e',
+                '137:0x3c499c542cef5e3811e1192ce70d8cc03d5c3359',
+                '42161:0xaf88d065e77c8cc2239327c5edb3a432268e5831',
+                '10:0x0b2c639c533813f4aa9d7837caf62653d097ff85'
+              ]
+              const normalizedOriginCurrency =
+                parameters?.originCurrency &&
+                parameters.originChainId &&
+                evmChains.includes(parameters.originChainId)
+                  ? `${parameters.originChainId}:${parameters.originCurrency.toLowerCase()}`
+                  : `${parameters?.originChainId ?? ''}:${parameters?.originCurrency ?? ''}`
+              const normalizedDestinationCurrency =
+                parameters?.destinationCurrency &&
+                parameters.destinationChainId &&
+                evmChains.includes(parameters.destinationChainId)
+                  ? `${parameters.destinationChainId}:${parameters.destinationCurrency.toLowerCase()}`
+                  : `${parameters?.destinationChainId ?? ''}:${parameters?.destinationCurrency ?? ''}`
+              //USDC Campaign - Only allow USDC to be sponsored
+              if (
+                normalizedDestinationCurrency &&
+                normalizedOriginCurrency &&
+                usdcSponsoredTokens.includes(normalizedDestinationCurrency) &&
+                usdcSponsoredTokens.includes(normalizedOriginCurrency)
+              ) {
+                return true
+              }
+              return false
+            }}
             // popularChainIds={[]}
             // disableInputAutoFocus={true}
             toToken={toToken}

packages/ui/src/components/widgets/SwapWidget/index.tsx

@@ -46,6 +46,7 @@ import { alreadyAcceptedToken } from '../../../utils/localStorage.js'
 import GasTopUpSection from './GasTopUpSection.js'
 import { calculateUsdValue, getSwapEventData } from '../../../utils/quote.js'
 import { PriceImpact } from './PriceImpact.js'
+import type { useQuote } from '@relayprotocol/relay-kit-hooks'
 
 type BaseSwapWidgetProps = {
   fromToken?: Token
@@ -65,7 +66,7 @@ type BaseSwapWidgetProps = {
   disableInputAutoFocus?: boolean
   popularChainIds?: number[]
   disablePasteWalletAddressOption?: boolean
-  sponsoredTokens?: string[]
+  useSecureBaseUrl?: (parameters: Parameters<typeof useQuote>['2']) => boolean
   onOpenSlippageConfig?: () => void
   onFromTokenChange?: (token?: Token) => void
   onToTokenChange?: (token?: Token) => void
@@ -116,7 +117,7 @@ const SwapWidget: FC<SwapWidgetProps> = ({
   disableInputAutoFocus = false,
   popularChainIds,
   disablePasteWalletAddressOption,
-  sponsoredTokens,
+  useSecureBaseUrl,
   onSetPrimaryWallet,
   onLinkNewWallet,
   onFromTokenChange,
@@ -192,7 +193,7 @@ const SwapWidget: FC<SwapWidgetProps> = ({
       onSwapError={onSwapError}
       onAnalyticEvent={onAnalyticEvent}
       supportedWalletVMs={supportedWalletVMs}
-      sponsoredTokens={sponsoredTokens}
+      useSecureBaseUrl={useSecureBaseUrl}
     >
       {({
         quote,

packages/ui/src/components/widgets/SwapWidgetRenderer.tsx

@@ -70,7 +70,7 @@ type SwapWidgetRendererProps = {
   onConnectWallet?: () => void
   onAnalyticEvent?: (eventName: string, data?: any) => void
   onSwapError?: (error: string, data?: Execute) => void
-  sponsoredTokens?: string[]
+  useSecureBaseUrl?: (parameters: Parameters<typeof useQuote>['2']) => boolean
 }
 
 export type ChildrenProps = {
@@ -155,7 +155,7 @@ export type ChildrenProps = {
   isLoadingFromTokenPrice: boolean
   toTokenPriceData: ReturnType<typeof useTokenPrice>['data']
   isLoadingToTokenPrice: boolean
-  sponsoredTokens?: string[]
+  useSecureBaseUrl?: (parameters: Parameters<typeof useQuote>['2']) => boolean
 }
 
 // shared query options for useTokenPrice
@@ -182,7 +182,7 @@ const SwapWidgetRenderer: FC<SwapWidgetRendererProps> = ({
   multiWalletSupportEnabled = false,
   linkedWallets,
   supportedWalletVMs,
-  sponsoredTokens,
+  useSecureBaseUrl,
   children,
   onAnalyticEvent,
   onSwapError
@@ -543,40 +543,6 @@ const SwapWidgetRenderer: FC<SwapWidgetRendererProps> = ({
     isFromNative
   )
 
-  const normalizedSponsoredTokens = useMemo(() => {
-    const chainVms = relayClient?.chains.reduce(
-      (chains, chain) => {
-        chains[chain.id] = chain.vmType as ChainVM
-        return chains
-      },
-      {} as Record<number, ChainVM>
-    )
-    return sponsoredTokens?.map((token) => {
-      const [chainId, address] = token.match(/^([^:]*):?(.*)$/)?.slice(1) ?? []
-      const chainVm = chainVms?.[Number(chainId)]
-      const normalizedAddress =
-        chainVm && chainVm === 'evm' ? address.toLowerCase() : address
-      return `${chainId}:${normalizedAddress}`
-    })
-  }, [sponsoredTokens, relayClient?.chains])
-
-  const normalizedToToken =
-    toChain?.vmType === 'evm'
-      ? `${toToken?.chainId}:${toToken?.address.toLowerCase()}`
-      : `${toToken?.chainId}:${toToken?.address}`
-  const normalizedFromToken =
-    fromChain?.vmType === 'evm'
-      ? `${fromToken?.chainId}:${fromToken?.address.toLowerCase()}`
-      : `${fromToken?.chainId}:${fromToken?.address}`
-
-  const isGasSponsorshipEnabled =
-    normalizedSponsoredTokens &&
-    normalizedSponsoredTokens.length > 0 &&
-    toToken &&
-    fromToken &&
-    normalizedSponsoredTokens.includes(normalizedToToken) &&
-    normalizedSponsoredTokens.includes(normalizedFromToken)
-
   const shouldSetQuoteParameters =
     fromToken &&
     toToken &&
@@ -724,7 +690,9 @@ const SwapWidgetRenderer: FC<SwapWidgetRendererProps> = ({
       })
     },
     undefined,
-    isGasSponsorshipEnabled ? providerOptionsContext?.secureBaseUrl : undefined
+    useSecureBaseUrl?.(quoteParameters)
+      ? providerOptionsContext?.secureBaseUrl
+      : undefined
   )
 
   const invalidateQuoteQuery = useCallback(() => {