Deposit address fallback

.changeset/clever-rabbits-report.md

@@ -0,0 +1,6 @@
+---
+'@reservoir0x/relay-kit-ui': minor
+'@reservoir0x/relay-kit-hooks': patch
+---
+
+Deposit Address fallback functionality

demo/pages/_app.tsx

@@ -169,10 +169,10 @@ const AppWrapper: FC<AppWrapperProps> = ({ children }) => {
             logLevel: 'INFO',
             environmentId: process.env.NEXT_PUBLIC_DYNAMIC_ENV_ID ?? '',
             walletConnectors: [
-              EthereumWalletConnectors,
-              SolanaWalletConnectors,
-              BitcoinWalletConnectors,
-              EclipseWalletConnectors
+              // EthereumWalletConnectors
+              // SolanaWalletConnectors,
+              // BitcoinWalletConnectors,
+              // EclipseWalletConnectors
             ],
             cssOverrides: `
               [data-testid="send-balance-button"] {

demo/pages/index.tsx

@@ -22,6 +22,7 @@ const Index: NextPage = () => {
         <nav style={{ display: 'flex', gap: 15 }}>
           <Link href="/ui/swap">SwapWidget</Link>
           <Link href="/ui/chain">ChainWidget</Link>
+          <Link href="/ui/depositAddresses">Deposit Addresses</Link>
         </nav>
         <h2>
           <b>SDK Write Actions</b>

demo/pages/ui/chain.tsx

@@ -128,6 +128,7 @@ const ChainWidgetPage: NextPage = () => {
         <SwapWidget
           lockChainId={8453}
           wallet={wallet}
+          supportedWalletVMs={['bvm', 'evm', 'svm']}
           tokens={[
             {
               chainId: 8453,

demo/pages/ui/depositAddresses.tsx

@@ -0,0 +1,167 @@
+import { NextPage } from 'next'
+import { Layout } from 'components/Layout'
+import { useTheme } from 'next-themes'
+import { Address, zeroAddress } from 'viem'
+import { useState } from 'react'
+import { Execute, getQuote, GetQuoteParameters } from '@reservoir0x/relay-sdk'
+
+const DepositAddressesPage: NextPage = () => {
+  const { theme } = useTheme()
+  const [amount, setAmount] = useState<number | undefined>()
+  const [refundAddress, setRefundAddress] = useState('')
+  const [currencyAddress, setCurrencyAddress] = useState<string>(zeroAddress)
+  const [recipientAddress, setRecipientAddress] = useState('')
+  const [originChainId, setOriginChainId] = useState<number | undefined>()
+  const [destinationChainId, setDestinationChainId] = useState<
+    number | undefined
+  >()
+  const [quote, setQuote] = useState<Execute>()
+  const [depositAddress, setDepositAddress] = useState<string | undefined>()
+  const [depositAmount, setDepositAmount] = useState<string | undefined>()
+  return (
+    <Layout
+      styles={{
+        minHeight: '100%',
+        height: 'auto',
+        background: theme === 'light' ? 'rgba(245, 242, 255, 1)' : '#1c172b'
+      }}
+    >
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          width: '100%',
+          paddingTop: 50,
+          flexDirection: 'column',
+          gap: 20
+        }}
+      >
+        <div>
+          <label>Amount (wei): </label>
+          <input
+            type="number"
+            placeholder="How much to deposit?"
+            value={amount}
+            onChange={(e) =>
+              setAmount(e.target.value ? Number(e.target.value) : undefined)
+            }
+          />
+        </div>
+        <div>
+          <label>Refund Address: </label>
+          <input
+            type="string"
+            placeholder="Where to send refunds to?"
+            value={refundAddress}
+            onChange={(e) => setRefundAddress(e.target.value)}
+          />
+        </div>
+        <div>
+          <label>Currency Address: </label>
+          <input
+            type="string"
+            placeholder="What currency address?"
+            value={currencyAddress}
+            onChange={(e) => setCurrencyAddress(e.target.value)}
+          />
+        </div>
+        <div>
+          <label>Origin Chain Id: </label>
+          <input
+            type="string"
+            placeholder="What origin chain id?"
+            value={originChainId}
+            onChange={(e) =>
+              setOriginChainId(
+                e.target.value ? Number(e.target.value) : undefined
+              )
+            }
+          />
+        </div>
+        <div>
+          <label>Destination Chain Id: </label>
+          <input
+            type="string"
+            placeholder="What destination chain id?"
+            value={destinationChainId}
+            onChange={(e) =>
+              setDestinationChainId(
+                e.target.value ? Number(e.target.value) : undefined
+              )
+            }
+          />
+        </div>
+        <div>
+          <label>Recipient address: </label>
+          <input
+            type="string"
+            placeholder="What is the recipient address?"
+            value={recipientAddress}
+            onChange={(e) => setRecipientAddress(e.target.value)}
+          />
+        </div>
+
+        <button
+          onClick={async () => {
+            if (
+              !destinationChainId ||
+              !originChainId ||
+              !recipientAddress ||
+              !refundAddress
+            ) {
+              throw 'Missing required data'
+            }
+
+            const quoteData: GetQuoteParameters = {
+              amount: `${amount}`,
+              recipient: recipientAddress as Address,
+              tradeType: 'EXACT_INPUT',
+              toChainId: destinationChainId,
+              toCurrency: currencyAddress,
+              chainId: originChainId,
+              currency: currencyAddress,
+              options: {
+                useDepositAddress: true,
+                refundTo: refundAddress
+              }
+            }
+            const data = await getQuote(quoteData)
+            setQuote(data)
+            const depositStepData =
+              data.steps &&
+              data.steps[0] &&
+              data.steps[0].items &&
+              data.steps[0].items[0]
+                ? data.steps[0].items[0].data
+                : undefined
+            if (depositStepData) {
+              setDepositAddress(depositStepData.to)
+              setDepositAmount(depositStepData.value)
+            }
+          }}
+        >
+          Get Quote
+        </button>
+
+        {quote ? (
+          <div>
+            <div style={{ fontSize: 22, fontWeight: 600 }}>
+              Instructions to relay:
+            </div>
+            <div>
+              Send {depositAmount} wei to this address: {depositAddress}
+            </div>
+            <br />
+            <div style={{ fontSize: 22, fontWeight: 600 }}>Quote Response:</div>
+            <div style={{ whiteSpace: 'pre-wrap', wordWrap: 'break-word' }}>
+              {JSON.stringify(quote, null, 2)}
+            </div>
+          </div>
+        ) : undefined}
+      </div>
+    </Layout>
+  )
+}
+
+export default DepositAddressesPage

demo/pages/ui/swap.tsx

@@ -137,6 +137,7 @@ const SwapWidgetPage: NextPage = () => {
           key={`swap-widget-${singleChainMode ? 'single' : 'multi'}-chain`}
           lockChainId={singleChainMode ? 8453 : undefined}
           singleChainMode={singleChainMode}
+          supportedWalletVMs={[]}
           defaultToToken={
             singleChainMode
               ? {

packages/hooks/src/hooks/useExecutionStatus.ts

@@ -0,0 +1,103 @@
+import {
+  MAINNET_RELAY_API,
+  RelayClient,
+  setParams,
+  type Execute,
+  type paths,
+  type ProgressData
+} from '@reservoir0x/relay-sdk'
+import fetcher from '../fetcher.js'
+import {
+  useQuery,
+  type DefaultError,
+  type QueryKey
+} from '@tanstack/react-query'
+import { useMemo } from 'react'
+import type { AxiosRequestConfig } from 'axios'
+
+type ExecutionStatusParams =
+  paths['/intents/status/v2']['get']['parameters']['query']
+
+export type ExecutionStatusResponse =
+  paths['/intents/status/v2']['get']['responses']['200']['content']['application/json']
+
+type QueryType = typeof useQuery<
+  ExecutionStatusResponse,
+  DefaultError,
+  ExecutionStatusResponse,
+  QueryKey
+>
+type QueryOptions = Parameters<QueryType>['0']
+
+export const queryExecutionStatus = function (
+  baseApiUrl: string = MAINNET_RELAY_API,
+  options?: ExecutionStatusParams
+): Promise<ExecutionStatusResponse> {
+  return new Promise((resolve, reject) => {
+    const url = new URL(`${baseApiUrl}/intents/status/v2`)
+    let query: ExecutionStatusParams = { ...options }
+    setParams(url, query)
+
+    fetcher(url.href)
+      .then((response) => {
+        const request: AxiosRequestConfig = {
+          url: url.href,
+          method: 'get'
+        }
+        resolve({
+          ...response,
+          request
+        })
+      })
+      .catch((e) => {
+        reject(e)
+      })
+  })
+}
+
+export type onProgress = (data: ProgressData) => void
+
+export default function (
+  client?: RelayClient,
+  options?: ExecutionStatusParams,
+  onRequest?: () => void,
+  onResponse?: (data: Execute) => void,
+  queryOptions?: Partial<QueryOptions>
+) {
+  const queryKey = ['useExecutionStatus', options]
+  const response = (useQuery as QueryType)({
+    queryKey: queryKey,
+    queryFn: () => {
+      onRequest?.()
+      const promise = queryExecutionStatus(client?.baseApiUrl, options)
+      promise.then((response: any) => {
+        onResponse?.(response)
+      })
+      return promise
+    },
+    enabled: client !== undefined && options !== undefined,
+    retry: false,
+    ...queryOptions
+  })
+
+  return useMemo(
+    () =>
+      ({
+        ...response,
+        data: response.error ? undefined : response.data,
+        queryKey
+      }) as Omit<ReturnType<QueryType>, 'data'> & {
+        data?: ExecutionStatusResponse
+        queryKey: QueryKey
+      },
+    [
+      response.data,
+      response.error,
+      response.isLoading,
+      response.isFetching,
+      response.isRefetching,
+      response.dataUpdatedAt,
+      queryKey
+    ]
+  )
+}

packages/hooks/src/hooks/useQuote.ts

@@ -64,8 +64,9 @@ export default function (
   onResponse?: (data: Execute) => void,
   queryOptions?: Partial<QueryOptions>
 ) {
+  const queryKey = ['useQuote', options]
   const response = (useQuery as QueryType)({
-    queryKey: ['useQuote', options],
+    queryKey: queryKey,
     queryFn: () => {
       onRequest?.()
       if (options && client?.source && !options.referrer) {
@@ -108,9 +109,11 @@ export default function (
       ({
         ...response,
         data: response.error ? undefined : response.data,
+        queryKey,
         executeQuote
       }) as Omit<ReturnType<QueryType>, 'data'> & {
         data?: QuoteResponse
+        queryKey: QueryKey
         executeQuote: (onProgress: onProgress) => Promise<Execute> | undefined
       },
     [
@@ -120,7 +123,8 @@ export default function (
       response.isFetching,
       response.isRefetching,
       response.dataUpdatedAt,
-      executeQuote
+      executeQuote,
+      queryKey
     ]
   )
 }

packages/hooks/src/index.ts

@@ -14,6 +14,10 @@ export {
   default as useRelayConfig,
   queryRelayConfig
 } from './hooks/useRelayConfig.js'
+export {
+  default as useExecutionStatus,
+  queryExecutionStatus
+} from './hooks/useExecutionStatus.js'
 
 //types
 export type { CurrencyList, Currency } from './hooks/useTokenList.js'

packages/sdk/src/routes/index.ts

@@ -1,5 +1,6 @@
 export const routes = [
   "/chains",
+  "/chains/health",
   "/config",
   "/config/v2",
   "/execute/bridge",
@@ -11,13 +12,13 @@ export const routes = [
   "/execute/permits",
   "/quote",
   "/price",
-  "/execute/user-op/{chainId}",
   "/lives",
   "/intents/status",
   "/intents/status/v2",
   "/intents/quote",
   "/intents/quote/v2",
   "/requests/{requestId}/signature",
+  "/requests/{requestId}/signature/v2",
   "/requests",
   "/requests/v2",
   "/transactions/index",

packages/sdk/src/types/Execute.ts

@@ -42,6 +42,7 @@ export type Execute = {
     kind: 'transaction' | 'signature'
     id: string
     requestId?: string
+    depositAddress?: string
     items?: {
       status: 'complete' | 'incomplete'
       progressState?: TransactionStepState | SignatureStepState