Skip to content

Commit

Permalink
Merge branch 'main' into pedro/relay-5340-token-selector-animation-is…
Browse files Browse the repository at this point in the history
…-buggy-in-safari
  • Loading branch information
pedromcunha committed Jul 30, 2024
2 parents 470f9e6 + 5737cc6 commit 22029e3
Show file tree
Hide file tree
Showing 40 changed files with 2,611 additions and 1,012 deletions.
5 changes: 0 additions & 5 deletions .changeset/strange-chicken-battle.md

This file was deleted.

5 changes: 0 additions & 5 deletions .changeset/sweet-shoes-cross.md

This file was deleted.

13 changes: 9 additions & 4 deletions demo/pages/_app.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -33,13 +33,17 @@ const AppWrapper: FC<AppWrapperProps> = ({ children }) => {
ReturnType<typeof getDefaultConfig> | undefined
>()
const router = useRouter()
const relayApi =
router.query.api === 'testnets' ? TESTNET_RELAY_API : MAINNET_RELAY_API
const [relayApi, setRelayApi] = useState(MAINNET_RELAY_API)

useEffect(() => {
const isTestnet = router.query.api === 'testnets'
setRelayApi(isTestnet ? TESTNET_RELAY_API : MAINNET_RELAY_API)
}, [router.query.api])

const { chains, viemChains } = useRelayChains(relayApi)

useEffect(() => {
if (!wagmiConfig && chains && viemChains) {
if (chains && viemChains) {
setWagmiConfig(
getDefaultConfig({
appName: 'Relay SDK Demo',
Expand All @@ -50,7 +54,7 @@ const AppWrapper: FC<AppWrapperProps> = ({ children }) => {
})
)
}
}, [chains, relayApi])
}, [chains, relayApi, viemChains])

if (!wagmiConfig || !chains) {
return null
Expand All @@ -65,6 +69,7 @@ const AppWrapper: FC<AppWrapperProps> = ({ children }) => {
>
<RelayKitProvider
options={{
baseApiUrl: relayApi,
source: 'relay-demo',
logLevel: LogLevel.Verbose,
duneApiKey: process.env.NEXT_PUBLIC_DUNE_TOKEN,
Expand Down
193 changes: 193 additions & 0 deletions demo/pages/hooks/usePrice.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,193 @@
import { NextPage } from 'next'
import { usePrice } from '@reservoir0x/relay-kit-hooks'
import { useRelayClient } from '@reservoir0x/relay-kit-ui'
import { useState } from 'react'
import { zeroAddress } from 'viem'

const UsePrice: NextPage = () => {
const client = useRelayClient()
const [user, setUser] = useState<string | undefined>(
'0x03508bB71268BBA25ECaCC8F620e01866650532c'
)
const [originChainId, setOriginChainId] = useState<number>(1)
const [destinationChainId, setDestinationChainId] = useState<number>(10)
const [originCurrency, setOriginCurrency] = useState<string>(zeroAddress)
const [destinationCurrency, setDestinationCurrency] =
useState<string>(zeroAddress)
const [recipient, setRecipient] = useState<string | undefined>()
const [tradeType, setTradeType] = useState<'EXACT_INPUT' | 'EXACT_OUTPUT'>(
'EXACT_INPUT'
)
const [source, setSource] = useState<string | undefined>()
const [useExternalLiquidity, setUseExternalLiquidity] =
useState<boolean>(false)
const [appFees, setAppFees] = useState<{ recipient: string; fee: string }[]>()
const [amount, setAmount] = useState<string>('10000000000000000')
const [data, setData] = useState<any>(undefined)
const { data: response } = usePrice(client ?? undefined, data, () => {}, {
enabled: data !== undefined && client !== undefined
})

return (
<div
style={{
display: 'flex',
height: 50,
width: '100%',
gap: 12,
padding: 24,
flexDirection: 'column',
alignItems: 'center',
paddingTop: 150
}}
>
<div
style={{
marginTop: 20,
padding: '10px',
background: '#f0f0f0',
borderRadius: '8px',
marginLeft: '12px',
marginRight: '12p',
wordBreak: 'break-word'
}}
>
<div>
<label>User: </label>
<input
type="string"
placeholder="What user address?"
value={user}
onChange={(e) =>
setUser(e.target.value.length > 0 ? e.target.value : undefined)
}
/>
</div>
<div>
<label>OriginChainId: </label>
<input
type="number"
placeholder="Which origin chain id?"
value={originChainId}
onChange={(e) => setOriginChainId(+e.target.value)}
/>
</div>
<div>
<label>DestinationChainId: </label>
<input
type="number"
placeholder="Which destination chain id?"
value={destinationChainId}
onChange={(e) => setDestinationChainId(+e.target.value)}
/>
</div>
<div>
<label>OriginCurrency: </label>
<input
type="string"
placeholder="What is the origin currency address?"
value={originCurrency}
onChange={(e) => setOriginCurrency(e.target.value)}
/>
</div>
<div>
<label>DestinationCurrency: </label>
<input
type="string"
placeholder="What is the destination currency address?"
value={destinationCurrency}
onChange={(e) => setDestinationCurrency(e.target.value)}
/>
</div>
<div>
<label>Recipient: </label>
<input
type="string"
placeholder="Recipient?"
value={recipient}
onChange={(e) =>
setRecipient(
e.target.value.length > 0 ? e.target.value : undefined
)
}
/>
</div>
<div>
<label>TradeType: </label>
<select
onChange={(e) => {
setTradeType(e.target.value as any)
}}
>
<option value="EXACT_INPUT">EXACT_INPUT</option>
<option value="EXACT_OUTPUT">EXACT_OUTPUT</option>
</select>
</div>
<div>
<label>AppFees: </label>
<input
type="string"
placeholder="Recipient?"
value={recipient}
onBlur={(e) => {
if (e.target.value.length > 0) {
const fee = e.target.value.split(',').map((fee) => ({
recipient: fee.split(':')[0],
fee: fee.split(':')[1]
}))
setAppFees(fee)
} else {
setAppFees(undefined)
}
}}
/>
</div>
<div>
<label>Amount: </label>
<input
type="string"
placeholder="Amount?"
value={amount}
onChange={(e) => setAmount(e.target.value)}
/>
</div>
<button
style={{ margin: '20px auto', marginBottom: 0, display: 'block' }}
onClick={() => {
setData({
user: user ?? zeroAddress,
originChainId,
destinationChainId,
originCurrency,
destinationCurrency,
recipient,
tradeType,
appFees,
amount,
source,
useExternalLiquidity
})
}}
>
Get Price
</button>
</div>
<div
style={{
marginTop: 20,
padding: '10px',
background: '#f0f0f0',
borderRadius: '8px',
width: '100%',
maxWidth: 1000
}}
>
<pre style={{ wordBreak: 'break-all' }}>
{JSON.stringify(response, null, 2)}
</pre>
</div>
</div>
)
}

export default UsePrice
1 change: 1 addition & 0 deletions demo/pages/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ const Index: NextPage = () => {
<Link href="/hooks/useRelayChains">useRelayChains</Link>
<Link href="/hooks/useRequests">useRequests</Link>
<Link href="/hooks/useTokenList">useTokenList</Link>
<Link href="/hooks/usePrice">usePrice</Link>
</nav>
</div>
</Layout>
Expand Down
1 change: 1 addition & 0 deletions demo/pages/ui/chain.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { NextPage } from 'next'
import { ChainWidget } from '@reservoir0x/relay-kit-ui'
import { useConnectModal } from '@rainbow-me/rainbowkit'
import { Layout } from 'components/Layout'
import { zeroAddress } from 'viem'

const ChainWidgetPage: NextPage = () => {
const { openConnectModal } = useConnectModal()
Expand Down
38 changes: 38 additions & 0 deletions packages/hooks/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,43 @@
# @reservoir0x/relay-kit-hooks

## 1.0.18

### Patch Changes

- Updated dependencies [ec9b20f]
- @reservoir0x/relay-sdk@1.0.12

## 1.0.17

### Patch Changes

- Updated dependencies [92b9c71]
- @reservoir0x/relay-sdk@1.0.11

## 1.0.16

### Patch Changes

- fac3415: Fix chain widget testnet configuration

## 1.0.15

### Patch Changes

- Add review quote step, refactor modal renderers
- 2d22eec: Add usePrice hook
- Updated dependencies
- Updated dependencies [2d22eec]
- @reservoir0x/relay-sdk@1.0.10

## 1.0.14

### Patch Changes

- Updated dependencies [3648ec3]
- Updated dependencies [be74a6a]
- @reservoir0x/relay-sdk@1.0.9

## 1.0.13

### Patch Changes
Expand Down
2 changes: 1 addition & 1 deletion packages/hooks/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@reservoir0x/relay-kit-hooks",
"version": "1.0.13",
"version": "1.0.18",
"type": "module",
"main": "./_cjs/src/index.js",
"module": "./_esm/src/index.js",
Expand Down
80 changes: 80 additions & 0 deletions packages/hooks/src/hooks/usePrice.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
import {
MAINNET_RELAY_API,
RelayClient,
type Execute,
type paths
} from '@reservoir0x/relay-sdk'
import { axiosPostFetcher } from '../fetcher.js'
import {
useQuery,
type DefaultError,
type QueryKey
} from '@tanstack/react-query'
import type { AxiosRequestConfig } from 'axios'

type PriceRequestBody =
paths['/price']['post']['requestBody']['content']['application/json']

export type PriceResponse =
paths['/price']['post']['responses']['200']['content']['application/json']

type QueryType = typeof useQuery<
PriceResponse,
DefaultError,
PriceResponse,
QueryKey
>
type QueryOptions = Parameters<QueryType>['0']

export const queryPrice = function (
baseApiUrl: string = MAINNET_RELAY_API,
options?: PriceRequestBody
): Promise<PriceResponse> {
return new Promise((resolve, reject) => {
const url = new URL(`${baseApiUrl}/price`)
axiosPostFetcher(url.href, options)
.then((response) => {
const request: AxiosRequestConfig = {
url: url.href,
method: 'post',
data: options
}
resolve({
...response,
request
})
})
.catch((e) => {
reject(e)
})
})
}

export default function usePrice(
client?: RelayClient,
options?: PriceRequestBody,
onResponse?: (data: Execute) => void,
queryOptions?: Partial<QueryOptions>
) {
const response = (useQuery as QueryType)({
queryKey: ['usePrice', options],
queryFn: () => {
if (options && client?.source && !options.referrer) {
options.referrer = client.source
}
const promise = queryPrice(client?.baseApiUrl, options)
promise.then((response: any) => {
onResponse?.(response)
})
return promise
},
enabled: client !== undefined && options !== undefined,
retry: false,
...queryOptions
})

return {
...response,
data: response.error ? undefined : response.data
}
}
Loading

0 comments on commit 22029e3

Please sign in to comment.