Update dependencies

.gitignore

@@ -23,3 +23,4 @@ yarn-debug.log*
 yarn-error.log*
 
 .idea
+.eslintcache

.travis.yml

@@ -1,3 +1,5 @@
 language: node_js
 node_js: 10
 dist: bionic
+cache: yarn
+script: yarn build

package.json

@@ -4,32 +4,32 @@
   "private": true,
   "dependencies": {
     "@ledgerhq/hw-transport-webusb": "^5.34.0",
-    "@material-ui/core": "^4.11.0",
-    "@material-ui/icons": "^4.9.1",
-    "@project-serum/serum": "^0.13.11",
-    "@solana/web3.js": "^0.78.2",
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.3.2",
-    "@testing-library/user-event": "^7.1.2",
+    "@material-ui/core": "^4.11.2",
+    "@material-ui/icons": "^4.11.2",
+    "@project-serum/serum": "^0.13.14",
+    "@solana/web3.js": "^0.87.2",
+    "@testing-library/jest-dom": "^5.11.6",
+    "@testing-library/react": "^11.2.2",
+    "@testing-library/user-event": "^12.6.0",
     "@types/bn.js": "^4.11.6",
     "@types/jest": "^26.0.14",
     "@types/node": "^14.11.4",
-    "@types/react": "^16.9.51",
-    "@types/react-dom": "^16.9.8",
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
     "bip32": "^2.0.5",
-    "bip39": "^3.0.2",
+    "bip39": "^3.0.3",
     "bn.js": "^5.1.2",
     "bs58": "^4.0.1",
     "buffer-layout": "^1.2.0",
     "immutable-tuple": "^0.4.10",
-    "mdi-material-ui": "^6.17.0",
-    "notistack": "^0.9.17",
+    "mdi-material-ui": "^6.21.0",
+    "notistack": "^1.0.2",
     "qrcode.react": "^1.0.0",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "react-scripts": "3.4.1",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "react-scripts": "4.0.1",
     "tweetnacl": "^1.0.3",
-    "typescript": "3.9.7",
+    "typescript": "4.1.3",
     "web3": "^1.2.11"
   },
   "scripts": {
@@ -74,7 +74,7 @@
   "devDependencies": {
     "gh-pages": "^3.1.0",
     "git-format-staged": "^2.1.0",
-    "husky": "^4.2.5",
-    "prettier": "^2.0.5"
+    "husky": "^4.3.6",
+    "prettier": "^2.2.1"
   }
 }

src/utils/connection.tsx

@@ -5,7 +5,7 @@ import {
   Connection,
   PublicKey,
 } from '@solana/web3.js';
-import { useLocalStorageState } from './utils';
+import { useLocalStorageState, useRefEqual } from './utils';
 import { refreshCache, setCache, useAsyncData } from './fetch-loop';
 import tuple from 'immutable-tuple';
 
@@ -33,7 +33,7 @@ export function ConnectionProvider({ children }) {
   );
 }
 
-export function useConnection() {
+export function useConnection(): Connection {
   let context = useContext(ConnectionContext);
   if (!context) {
     throw new Error('Missing connection context');
@@ -97,8 +97,18 @@ export function useAccountInfo(publicKey?: PublicKey) {
       connection.removeAccountChangeListener(id);
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [connection, publicKey?.toBase58(), cacheKey]);
-  return [accountInfo, loaded];
+  }, [connection, publicKey?.toBase58() ?? '', cacheKey]);
+  return [
+    useRefEqual(
+      accountInfo,
+      (oldInfo, newInfo) =>
+        !!oldInfo &&
+        !!newInfo &&
+        oldInfo.data.equals(newInfo.data) &&
+        oldInfo.lamports === newInfo.lamports,
+    ),
+    loaded,
+  ];
 }
 
 export function refreshAccountInfo(connection, publicKey, clearCache = false) {

src/utils/fetch-loop.ts

@@ -154,20 +154,19 @@ class FetchLoopInternal<T = any> {
   };
 }
 
-export function useAsyncData(
-  asyncFn,
-  cacheKey,
+export function useAsyncData<T = any>(
+  asyncFn: () => Promise<T>,
+  cacheKey: any,
   { refreshInterval = 60000 } = {},
-) {
-  cacheKey = formatCacheKey(cacheKey);
-
+): [null | undefined | T, boolean] {
   const [, rerender] = useReducer((i) => i + 1, 0);
+  cacheKey = formatCacheKey(cacheKey);
 
   useEffect(() => {
     if (!cacheKey) {
-      return () => {};
+      return;
     }
-    const listener = new FetchLoopListener(
+    const listener = new FetchLoopListener<T>(
       cacheKey,
       asyncFn,
       refreshInterval,

src/utils/utils.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { Connection, PublicKey } from '@solana/web3.js';
 
 export async function sleep(ms: number) {
@@ -52,6 +52,17 @@ export function useListener(emitter, eventName: string) {
   }, [emitter, eventName]);
 }
 
+export function useRefEqual<T>(
+  value: T,
+  areEqual: (oldValue: T, newValue: T) => boolean,
+): T {
+  const prevRef = useRef<T>(value);
+  if (prevRef.current !== value && !areEqual(prevRef.current, value)) {
+    prevRef.current = value;
+  }
+  return prevRef.current;
+}
+
 export function abbreviateAddress(address: PublicKey) {
   let base58 = address.toBase58();
   return base58.slice(0, 4) + '…' + base58.slice(base58.length - 4);

src/utils/wallet.js

@@ -20,7 +20,7 @@ import {
   parseMintData,
   parseTokenAccountData,
 } from './tokens/data';
-import { useListener, useLocalStorageState } from './utils';
+import { useListener, useLocalStorageState, useRefEqual } from './utils';
 import { useTokenName } from './tokens/names';
 import { refreshCache, useAsyncData } from './fetch-loop';
 import { getUnlockedMnemonicAndSeed, walletSeedChanged } from './wallet-seed';
@@ -331,18 +331,19 @@ export function useWalletPublicKeys() {
     wallet.getTokenAccountInfo,
     wallet.getTokenAccountInfo,
   );
-  const getPublicKeys = () => [
+  let publicKeys = [
     wallet.publicKey,
     ...(tokenAccountInfo
       ? tokenAccountInfo.map(({ publicKey }) => publicKey)
       : []),
   ];
-  const serialized = getPublicKeys()
-    .map((pubKey) => pubKey?.toBase58() || '')
-    .toString();
-
   // Prevent users from re-rendering unless the list of public keys actually changes
-  let publicKeys = useMemo(getPublicKeys, [serialized]);
+  publicKeys = useRefEqual(
+    publicKeys,
+    (oldKeys, newKeys) =>
+      oldKeys.length === newKeys.length &&
+      oldKeys.every((key, i) => key.equals(newKeys[i])),
+  );
   return [publicKeys, loaded];
 }
 

tsconfig.json

@@ -18,7 +18,8 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react"
+    "jsx": "react-jsx",
+    "noFallthroughCasesInSwitch": true
   },
   "include": [
     "src"