Add usePoller Hook (#168)

* 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>

Author: 3 people

.changeset/grumpy-windows-retire.md

@@ -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

packages/hooks/README.md

@@ -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
+```

packages/hooks/src/hooks/index.ts

@@ -4,3 +4,4 @@ export { useTransaction } from './useTransaction';
 export { useTokenBalance } from './useTokenBalance';
 export { useReadOnlyProvider } from './useReadOnlyProvider';
 export { useReadOnlyContract } from './useReadOnlyContract';
+export { usePoller } from './usePoller';

packages/hooks/src/hooks/usePoller.ts

@@ -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();
+  }, []);
+};

packages/hooks/src/index.ts

@@ -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';

packages/hooks/src/stories/UseContract.stories.tsx

@@ -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 });