Thanks to visit codestin.com
Credit goes to github.com

Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions docs/pages/docs/hooks/meta.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
"useEnsAvatar": "useEnsAvatar",
"useEnsLookup": "useEnsLookup",
"useEnsResolver": "useEnsResolver",
"useEnsResolveName": "useEnsResolveName",
"useFeeData": "useFeeData",
"useNetwork": "useNetwork",
"useProvider": "useProvider",
Expand Down
77 changes: 77 additions & 0 deletions docs/pages/docs/hooks/useEnsResolveName.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
# useEnsResolveName

Hook for looking up address for ENS name.

```tsx
import { useEnsResolveName } from 'wagmi'
```

## Usage

```tsx
import { useEnsResolveName } from 'wagmi'

const App = () => {
const [{ data, error, loading }, resolveName] = useEnsResolveName({
name: 'meagher.eth',
})

if (loading) return <div>Fetching address…</div>
if (error || !data) return <div>Error fetching address</div>
return <div>{data}</div>
}
```

## Return Values

### result

```ts
{
data?: string
error?: Error
loading?: boolean
}
```

### resolveName

```ts
(config?: {
name: string
}) => Promise<{ data?: string; error?: Error }>
```

## Configuration

### name (optional)

Name to look up.

```tsx highlight='5'
import { useEnsResolveName } from 'wagmi'

const App = () => {
const [{ data, error, loading }, lookupAddress] = useEnsResolveName({
name: 'meagher.eth',
})

return ...
}
```

### skip (optional)

Skips automatically fetching data on mount. Defaults to `false`. Useful if you want to call `resolveName` manually at some other point.

```tsx highlight='5'
import { useEnsResolveName } from 'wagmi'

const App = () => {
const [{ data, error, loading }, resolveName] = useEnsResolveName({
skip: true,
})

return ...
}
```
10 changes: 2 additions & 8 deletions packages/react/src/hooks/accounts/useBalance.ts
Original file line number Diff line number Diff line change
Expand Up @@ -126,15 +126,9 @@ export const useBalance = ({
/* eslint-disable react-hooks/exhaustive-deps */
React.useEffect(() => {
if (skip || !addressOrName) return

let didCancel = false
if (didCancel) return
getBalance({ addressOrName, formatUnits, token })

return () => {
didCancel = true
}
}, [addressOrName, cacheBuster, skip, token])
return cancelQuery
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Some carryover from #135

}, [addressOrName, cacheBuster, cancelQuery, skip, token])
/* eslint-enable react-hooks/exhaustive-deps */

/* eslint-disable react-hooks/exhaustive-deps */
Expand Down
4 changes: 3 additions & 1 deletion packages/react/src/hooks/accounts/useSigner.ts
Original file line number Diff line number Diff line change
Expand Up @@ -50,11 +50,13 @@ export const useSigner = ({ skip }: Config = {}) => {
}
}, [cancelQuery, connector])

/* eslint-disable react-hooks/exhaustive-deps */
React.useEffect(() => {
if (skip) return
getSigner()
return cancelQuery
}, [cacheBuster, cancelQuery, getSigner, skip])
}, [cacheBuster, connector, cancelQuery, skip])
/* eslint-enable react-hooks/exhaustive-deps */

return [state, getSigner] as const
}
4 changes: 3 additions & 1 deletion packages/react/src/hooks/contracts/useContractEvent.ts
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ export const useContractEvent = <
const listenerRef = React.useRef(listener)
listenerRef.current = listener

/* eslint-disable react-hooks/exhaustive-deps */
React.useEffect(() => {
const handler = (...event: Array<Parameters<Contract['on']>[1]>) =>
listenerRef.current(event)
Expand All @@ -40,5 +41,6 @@ export const useContractEvent = <
return () => {
contract_.off(eventName, handler)
}
}, [contract, eventName, once])
}, [contract, eventName])
/* eslint-enable react-hooks/exhaustive-deps */
}
11 changes: 8 additions & 3 deletions packages/react/src/hooks/contracts/useContractRead.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { Result } from 'ethers/lib/utils'
import { useBlockNumber } from '../network-status'
import { useProvider } from '../providers'
import { Config as UseContractConfig, useContract } from './useContract'
import { useCancel } from '../utils'
import { useCacheBuster, useCancel } from '../utils'

type Config = {
/** Arguments to pass contract method */
Expand Down Expand Up @@ -34,6 +34,7 @@ export const useContractRead = <
functionName: string,
{ args, overrides, skip, watch }: Config = {},
) => {
const cacheBuster = useCacheBuster()
const provider = useProvider()
const contract = useContract<Contract>({
signerOrProvider: provider,
Expand Down Expand Up @@ -86,18 +87,22 @@ export const useContractRead = <
[args, cancelQuery, contract, functionName, overrides],
)

/* eslint-disable react-hooks/exhaustive-deps */
React.useEffect(() => {
if (!skip) return
read()
return cancelQuery
}, [cancelQuery, read, skip])
}, [cacheBuster, cancelQuery, skip])
/* eslint-enable react-hooks/exhaustive-deps */

/* eslint-disable react-hooks/exhaustive-deps */
React.useEffect(() => {
if (!watch) return
if (!blockNumber) return
read()
return cancelQuery
}, [blockNumber, cancelQuery, read, watch])
}, [blockNumber, cancelQuery, watch])
/* eslint-enable react-hooks/exhaustive-deps */

return [
{
Expand Down
4 changes: 3 additions & 1 deletion packages/react/src/hooks/contracts/useToken.ts
Original file line number Diff line number Diff line change
Expand Up @@ -113,11 +113,13 @@ export const useToken = ({
[connector],
)

/* eslint-disable react-hooks/exhaustive-deps */
React.useEffect(() => {
if (skip || !address) return
getToken({ address, formatUnits })
return cancelQuery
}, [address, cancelQuery, formatUnits, getToken, skip])
}, [address, cancelQuery, formatUnits, skip])
/* eslint-enable react-hooks/exhaustive-deps */

return [
{
Expand Down
1 change: 1 addition & 0 deletions packages/react/src/hooks/ens/index.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
export { useEnsAvatar } from './useEnsAvatar'
export { useEnsLookup } from './useEnsLookup'
export { useEnsResolveName } from './useEnsResolveName'
export { useEnsResolver } from './useEnsResolver'
4 changes: 3 additions & 1 deletion packages/react/src/hooks/ens/useEnsAvatar.ts
Original file line number Diff line number Diff line change
Expand Up @@ -55,11 +55,13 @@ export const useEnsAvatar = ({ addressOrName, skip }: Config = {}) => {
)

// Fetch avatar when deps or chain changes
/* eslint-disable react-hooks/exhaustive-deps */
React.useEffect(() => {
if (skip || !addressOrName) return
getEnsAvatar({ addressOrName })
return cancelQuery
}, [addressOrName, cacheBuster, cancelQuery, getEnsAvatar, skip])
}, [addressOrName, cacheBuster, cancelQuery, skip])
/* eslint-enable react-hooks/exhaustive-deps */

return [
{ data: state.avatar, loading: state.loading, error: state.error },
Expand Down
4 changes: 2 additions & 2 deletions packages/react/src/hooks/ens/useEnsLookup.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ describe('useEnsLookup', () => {
it('does not have ens', async () => {
const { result, waitForNextUpdate } = renderHook(() =>
useEnsLookup({
address: wallets.ethers3.address,
address: wallets.ethers2.address,
}),
)
expect(result.current[0]).toMatchInlineSnapshot(`
Expand All @@ -44,7 +44,7 @@ describe('useEnsLookup', () => {
await waitForNextUpdate()
expect(result.current[0]).toMatchInlineSnapshot(`
{
"data": "meagher.eth",
"data": null,
"error": undefined,
"loading": false,
}
Expand Down
5 changes: 4 additions & 1 deletion packages/react/src/hooks/ens/useEnsLookup.ts
Original file line number Diff line number Diff line change
Expand Up @@ -54,11 +54,14 @@ export const useEnsLookup = ({ address, skip }: Config = {}) => {
[address, cancelQuery, provider],
)

// Resolve name when deps or chain changes
/* eslint-disable react-hooks/exhaustive-deps */
React.useEffect(() => {
if (skip || !address) return
lookupAddress({ address })
return cancelQuery
}, [address, cacheBuster, cancelQuery, lookupAddress, skip])
}, [address, cacheBuster, cancelQuery, skip])
/* eslint-enable react-hooks/exhaustive-deps */

return [
{ data: state.ens, loading: state.loading, error: state.error },
Expand Down
136 changes: 136 additions & 0 deletions packages/react/src/hooks/ens/useEnsResolveName.test.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,136 @@
import { wallets } from 'wagmi-testing'

import { actHook, renderHook } from '../../../test'
import { useEnsResolveName } from './useEnsResolveName'

describe('useEnsResolveName', () => {
describe('on mount', () => {
it('has ens', async () => {
const { result, waitForNextUpdate } = renderHook(() =>
useEnsResolveName({
name: wallets.ethers3.ensName,
}),
)
expect(result.current[0]).toMatchInlineSnapshot(`
{
"data": undefined,
"error": undefined,
"loading": true,
}
`)
await waitForNextUpdate()
expect(result.current[0]).toMatchInlineSnapshot(`
{
"data": "0xA0Cf798816D4b9b9866b5330EEa46a18382f251e",
"error": undefined,
"loading": false,
}
`)
})

it('does not have ens', async () => {
const { result, waitForNextUpdate } = renderHook(() =>
useEnsResolveName({
name: 'foo.eth',
}),
)
expect(result.current[0]).toMatchInlineSnapshot(`
{
"data": undefined,
"error": undefined,
"loading": true,
}
`)
await waitForNextUpdate()
expect(result.current[0]).toMatchInlineSnapshot(`
{
"data": null,
"error": undefined,
"loading": false,
}
`)
})

it('has error', async () => {
const { result, waitForNextUpdate } = renderHook(() =>
useEnsResolveName({
name: '0x',
}),
)
expect(result.current[0]).toMatchInlineSnapshot(`
{
"data": undefined,
"error": undefined,
"loading": true,
}
`)
await waitForNextUpdate()
expect(result.current[0]).toMatchInlineSnapshot(`
{
"data": undefined,
"error": [Error: invalid address (argument="address", value="0x", code=INVALID_ARGUMENT, version=address/5.5.0)],
"loading": false,
}
`)
})
})

it('skip', async () => {
const { result } = renderHook(() => useEnsResolveName({ skip: true }))
expect(result.current[0]).toMatchInlineSnapshot(`
{
"data": undefined,
"error": undefined,
"loading": false,
}
`)
})

describe('resolveName', () => {
it('uses config', async () => {
const { result } = renderHook(() =>
useEnsResolveName({
name: wallets.ethers3.ensName,
skip: true,
}),
)
await actHook(async () => {
const res = await result.current[1]()
expect(res).toMatchInlineSnapshot(`
{
"data": "0xA0Cf798816D4b9b9866b5330EEa46a18382f251e",
"error": undefined,
}
`)
})
})

it('uses params', async () => {
const { result } = renderHook(() => useEnsResolveName({ skip: true }))
await actHook(async () => {
const res = await result.current[1]({
name: wallets.ethers3.ensName,
})
expect(res).toMatchInlineSnapshot(`
{
"data": "0xA0Cf798816D4b9b9866b5330EEa46a18382f251e",
"error": undefined,
}
`)
})
})

it('has error', async () => {
const { result } = renderHook(() => useEnsResolveName({ skip: true }))
await actHook(async () => {
const res = await result.current[1]()
expect(res).toMatchInlineSnapshot(`
{
"data": undefined,
"error": [Error: name is required],
}
`)
})
})
})
})
Loading