Add support for gas sponsoring a list of tokens

.changeset/deep-toys-enter.md

@@ -0,0 +1,7 @@
+---
+'@relayprotocol/relay-kit-hooks': patch
+'@relayprotocol/relay-sdk': patch
+'@relayprotocol/relay-kit-ui': patch
+---
+
+Add gas sponsorship functionality

demo/components/providers/RelayKitProviderWrapper.tsx

@@ -46,7 +46,8 @@ export const RelayKitProviderWrapper: FC<{
         websocket: {
           enabled: websocketsEnabled,
           url: MAINNET_RELAY_WS
-        }
+        },
+        secureBaseUrl: process.env.NEXT_PUBLIC_RELAY_SECURE_API_URL
       }}
     >
       {children}

demo/pages/api/secure/[...path].ts

@@ -0,0 +1,44 @@
+import { paths } from '@relayprotocol/relay-sdk'
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+type QuoteResponse =
+  paths['/quote']['post']['responses']['200']['content']['application/json']
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<QuoteResponse>
+) {
+  const { query } = req
+
+  const url = new URL('https://api.relay.link/quote')
+
+  for (const [key, value] of Object.entries(query)) {
+    url.searchParams.set(key, value as string)
+  }
+
+  // Here you can add any checks you'd like to before fetching the gas subsidized quote
+  // You can do things like:
+  // - Check if the tokens are eligible for gas sponsorship
+  // - Check if the user is likely a bot
+
+  const body: paths['/quote']['post']['requestBody']['content']['application/json'] =
+    {
+      ...req.body,
+      subsidizeFees: true,
+      maxSubsidizationAmount: '1000000000000000000'
+    }
+  body.referrer = 'relay.link'
+
+  const response = await fetch(url.href, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      'x-api-key': process.env.NEXT_RELAY_API_KEY as string
+    },
+    body: JSON.stringify(body)
+  })
+
+  const responseData = await response.json()
+
+  res.status(response.status).json(responseData as QuoteResponse)
+}

demo/pages/ui/swap.tsx

@@ -51,14 +51,14 @@ const SwapWidgetPage: NextPage = () => {
     symbol: 'ETH',
     logoURI: 'https://assets.relay.link/icons/currencies/eth.png'
   })
-  // const [toToken, setToToken] = useState<Token | undefined>({
-  //   chainId: 10,
-  //   address: '0xbb586ed34974b15049a876fd5366a4c2d1203115',
-  //   decimals: 18,
-  //   name: 'ETH',
-  //   symbol: 'ETH',
-  //   logoURI: 'https://assets.relay.link/icons/currencies/eth.png',
-  // })
+  const [toToken, setToToken] = useState<Token | undefined>({
+    chainId: 10,
+    address: '0xbb586ed34974b15049a876fd5366a4c2d1203115',
+    decimals: 18,
+    name: 'ETH',
+    symbol: 'ETH',
+    logoURI: 'https://assets.relay.link/icons/currencies/eth.png'
+  })
   const { setWalletFilter } = useWalletFilter()
   const { setShowAuthFlow, primaryWallet } = useDynamicContext()
   const { theme } = useTheme()
@@ -219,10 +219,20 @@ const SwapWidgetPage: NextPage = () => {
             lockChainId={singleChainMode ? 8453 : undefined}
             singleChainMode={singleChainMode}
             supportedWalletVMs={supportedWalletVMs}
+            sponsoredTokens={
+              toToken?.chainId !== 1
+                ? [
+                    '8453:0x833589fcd6edb6e08f4c7c32d4f71b54bda02913',
+                    '42161:0xaf88d065e77c8cc2239327c5edb3a432268e5831',
+                    '10:0x0b2c639c533813f4aa9d7837caf62653d097ff85',
+                    '1:0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48'
+                  ]
+                : undefined
+            }
             // popularChainIds={[]}
             // disableInputAutoFocus={true}
-            // toToken={toToken}
-            // setToToken={setToToken}
+            toToken={toToken}
+            setToToken={setToToken}
             // lockToToken={true}
             // lockFromToken={true}
             fromToken={fromToken}

packages/hooks/src/hooks/useQuote.ts

@@ -65,7 +65,8 @@ export default function (
   onResponse?: (data: QuoteResponse, options?: QuoteBody) => void,
   queryOptions?: Partial<QueryOptions>,
   onError?: (e: any) => void,
-  config?: AxiosRequestConfig
+  config?: AxiosRequestConfig,
+  baseApiUrl?: string
 ) {
   const queryKey = ['useQuote', options]
   const response = (useQuery as QueryType)({
@@ -75,7 +76,7 @@ export default function (
       if (options && client?.source && !options.referrer) {
         options.referrer = client.source
       }
-      const promise = queryQuote(client?.baseApiUrl, options, {
+      const promise = queryQuote(baseApiUrl ?? client?.baseApiUrl, options, {
         ...config,
         headers: {
           'relay-sdk-version': client?.version ?? 'unknown',

packages/sdk/src/routes/index.ts

@@ -14,6 +14,7 @@ export const routes = [
   "/execute/permits",
   "/quote",
   "/price",
+  "/execute",
   "/lives",
   "/intents/status",
   "/intents/status/v2",