Skip to content

Commit

Permalink
Add usePoller Hook (#168)
Browse files Browse the repository at this point in the history
* usePoller Hook

A hook that allows the calling of a function at dedicated intervals.

* Update packages/hooks/src/hooks/usePoller.ts

Co-authored-by: with-heart <with.heart+git@pm.me>

* Update packages/hooks/src/hooks/usePoller.ts

Co-authored-by: with-heart <with.heart+git@pm.me>

* Update packages/hooks/src/hooks/usePoller.ts

Co-authored-by: with-heart <with.heart+git@pm.me>

* Added comments regarding usage of hook

* Add changeset

* Add docs, story example and a slight tweak for usePoller

Co-authored-by: with-heart <with.heart+git@pm.me>
Co-authored-by: Dhaiwat Pandya <dhaiwatpandya@gmail.com>
3 people authored Jan 5, 2022

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
1 parent 674078c commit 000c2f8
Showing 6 changed files with 65 additions and 2 deletions.
5 changes: 5 additions & 0 deletions .changeset/grumpy-windows-retire.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@web3-ui/hooks': minor
---

A new hook usePoller has been added. This hook can be used to call a function at a certain interval repeatedly
13 changes: 13 additions & 0 deletions packages/hooks/README.md
Original file line number Diff line number Diff line change
@@ -35,6 +35,7 @@ The following hooks are available:
- [useTokenBalance](#usetokenbalance)
- [useReadOnlyContract](#usereadonlycontract)
- [useReadOnlyProvider](#usereadonlyprovider)
- [usePoller](#usepoller)

---

@@ -170,3 +171,15 @@ const provider = useReadOnlyProvider(
'https://rinkeby.infura.io/v3/YOUR_INFURA_ID'
);
```

---

### usePoller

The `usePoller` hook takes in a function and a delay in milliseconds. It will call the function in every delay.

```tsx
import { usePoller } from '@web3-ui/hooks';

usePoller(() => console.log(contract.balanceOf(account)), 1000); // will log the balance every second
```
1 change: 1 addition & 0 deletions packages/hooks/src/hooks/index.ts
Original file line number Diff line number Diff line change
@@ -4,3 +4,4 @@ export { useTransaction } from './useTransaction';
export { useTokenBalance } from './useTokenBalance';
export { useReadOnlyProvider } from './useReadOnlyProvider';
export { useReadOnlyContract } from './useReadOnlyContract';
export { usePoller } from './usePoller';
34 changes: 34 additions & 0 deletions packages/hooks/src/hooks/usePoller.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import { useEffect, useRef } from 'react';

export const usePoller = (func: () => void, delay: number): void => {
/**
* Calls a function at a set interval. The function will also be called
* immediately.
*
* @param func The function to call at an interval
* @param delay The delay between each interval call
* @example
* const callback = () => console.log('test')
* usePoller(callback, 1000) // logs 'test' every second
*/

const savedCbFunc = useRef(func);

// Remember the latest fn.
useEffect(() => {
savedCbFunc.current = func;
}, [func]);

useEffect(() => {
if (!delay) {
return;
}

const id = setInterval(savedCbFunc.current, delay);
return () => clearInterval(id);
}, [delay, func]);

useEffect(() => {
func();
}, []);
};
3 changes: 2 additions & 1 deletion packages/hooks/src/index.ts
Original file line number Diff line number Diff line change
@@ -4,7 +4,8 @@ export {
useTokenBalance,
useTransaction,
useReadOnlyProvider,
useReadOnlyContract
useReadOnlyContract,
usePoller
} from './hooks';
export { Provider, Web3Context } from './Provider';
export { NETWORKS, CHAIN_ID_TO_NETWORK } from './constants';
11 changes: 10 additions & 1 deletion packages/hooks/src/stories/UseContract.stories.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { storiesOf } from '@storybook/react';
import React, { useEffect } from 'react';
import { Provider, useWallet, useContract, NETWORKS } from '..';
import { Provider, useWallet, useContract, NETWORKS, usePoller } from '..';
import { Button, Input, Divider, VStack } from '@chakra-ui/react';
import { ethers } from 'ethers';
import { useReadOnlyContract } from '../hooks/useReadOnlyContract';
@@ -68,6 +68,15 @@ const Default = () => {
amount: '0'
});

usePoller(async () => {
try {
const greeting = await contract.greet();
console.log(greeting); // logs the greeting every second
} catch (error) {
console.log(error);
}
}, 1000);

const handleGreet = async () => alert(await contract.greet());
const handleChangeState = (stateName: string) => ({ target: { value } }) => {
setState({ ...state, [stateName]: value });

0 comments on commit 000c2f8

Please sign in to comment.