add eslint-plugin-react-hooks

.eslintrc

@@ -22,7 +22,8 @@
         "plugin:prettier/recommended",
         "prettier/react",
         "prettier/standard",
-        "prettier/@typescript-eslint"
+        "prettier/@typescript-eslint",
+        "plugin:react-hooks/recommended"
       ],
       "plugins": ["@typescript-eslint", "prettier"],
       "rules": {

package-lock.json

@@ -13923,9 +13923,10 @@
       }
     },
     "eslint-plugin-react-hooks": {
-      "version": "1.7.0",
+      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-1.7.0.tgz",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.1.2.tgz",
-      "integrity": "sha512-iXTCFcOmlWvw4+TOE8CLWj6yX1GwzT0Y6cUfHHZqWnSk144VmVIRcVGtUAzrLES7C798lmvnt02C7rxaOX1HNA=="
+      "integrity": "sha512-ykUeqkGyUGgwTtk78C0o8UG2fzwmgJ0qxBGPp2WqRKsTwcLuVf01kTDRAtOsd4u6whX2XOC8749n2vPydP82fg==",
+      "dev": true
     },
     "eslint-plugin-security": {
       "version": "1.4.0",
@@ -16437,6 +16438,11 @@
             }
           }
         },
+        "eslint-plugin-react-hooks": {
+          "version": "1.7.0",
+          "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-1.7.0.tgz",
+          "integrity": "sha512-iXTCFcOmlWvw4+TOE8CLWj6yX1GwzT0Y6cUfHHZqWnSk144VmVIRcVGtUAzrLES7C798lmvnt02C7rxaOX1HNA=="
+        },
         "execa": {
           "version": "4.0.3",
           "resolved": "https://registry.npmjs.org/execa/-/execa-4.0.3.tgz",

package.json

@@ -105,6 +105,7 @@
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-react": "^7.20.6",
+    "eslint-plugin-react-hooks": "^4.1.2",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^26.4.2",
     "prettier": "^2.1.2",

src/components/atoms/Price/Conversion.tsx

@@ -11,11 +11,9 @@ const cx = classNames.bind(styles)
 
 export default function Conversion({
   price,
-  update = true,
   className
 }: {
   price: string // expects price in OCEAN, not wei
-  update?: boolean
   className?: string
 }): ReactElement {
   const { appConfig } = useSiteMetadata()
@@ -56,15 +54,13 @@ export default function Conversion({
     if (isBrowser && price !== '0') {
       getData()
     }
-  }, [price, currency])
+  }, [price, currency, url])
 
-  if (update) {
+  // Fetch new prices periodically with swr
-    // Fetch new prices periodically with swr
+  useSWR(url, fetchData, {
-    useSWR(url, fetchData, {
+    refreshInterval: 30000, // 30 sec.
-      refreshInterval: 30000, // 30 sec.
+    onSuccess
-      onSuccess
+  })
-    })
-  }
 
   return (
     <span

src/components/molecules/Pagination.tsx

@@ -15,8 +15,6 @@ export default function Pagination({
   hrefBuilder,
   onPageChange
 }: PaginationProps): ReactElement {
-  if (!totalPages || totalPages < 2) return null
-
   const [smallViewport, setSmallViewport] = useState(true)
 
   function viewportChange(mq: { matches: boolean }) {
@@ -24,6 +22,8 @@ export default function Pagination({
   }
 
   useEffect(() => {
+    if (!totalPages || totalPages < 2) return null
+
     const mq = window.matchMedia('(min-width: 600px)')
     viewportChange(mq)
     mq.addListener(viewportChange)
@@ -31,7 +31,7 @@ export default function Pagination({
     return () => {
       mq.removeListener(viewportChange)
     }
-  }, [])
+  }, [totalPages])
 
   return (
     <ReactPaginate