1
0
Fork 0
blog/src/features/Web3/hooks/useFetchTokens/useFetchTokens.tsx

33 lines
1008 B
TypeScript

import { useEffect, useState } from 'react'
import useSWR, { type SWRResponse } from 'swr'
import { useAccount, useChains } from 'wagmi'
import type { GetToken } from './types'
const fetcher = (url: string) => fetch(url).then((res) => res.json())
const apiUrl = import.meta.env.PUBLIC_WEB3_API_URL
//
// Wrapper for fetching user tokens with swr.
//
export function useFetchTokens(): SWRResponse<GetToken[] | undefined, Error> {
const { address } = useAccount()
const chains = useChains()
const [url, setUrl] = useState<string | undefined>()
const fetchResults = useSWR<GetToken[] | undefined>(url, fetcher)
// Set url only after we have all data loaded on client,
// preventing initial fetch.
useEffect(() => {
if (!address || !chains) {
setUrl(undefined)
return
}
const chainIds = chains.map((chain) => chain.id).join(',')
const url = `${apiUrl}/balance?address=${address}&chainIds=${chainIds}`
setUrl(url)
}, [address, chains])
return fetchResults
}