updates for tsunami

pooltogether · Aug 16, 2021 · 617e722 · 617e722
1 parent 622a2ee
commit 617e722
Show file tree

Hide file tree

Showing 8 changed files with 6,475 additions and 2,203 deletions.
diff --git a/README.md b/README.md
@@ -2,59 +2,29 @@
 
 A collection of various useful hooks used across the PoolTogether applications.
 
-## How to use
-
-1. `yarn add @pooltogether/utilities`
-2. `import * as Utils from '@pooltogether/hooks'` OR `import { hookYouWantToUse } from '@pooltogether/hooks'`
-3. Ensure you have all of the required environment variables imported into your project
-
-## Requirements
-
-Hooks that require other hooks also require their required hooks & environment variables.
-
-### useInitializeOnboard
-
-- `NEXT_JS_DOMAIN_NAME` ex. `'pooltogether.com'` or `''`
-- `NEXT_JS_INFURA_ID`
-- `NEXT_JS_FORTMATIC_API_KEY`
-- `NEXT_JS_PORTIS_API_KEY`
-- `NEXT_JS_DEFAULT_ETHEREUM_NETWORK_NAME` ex. `'homestead'`
-
-### useOnboard
-
-- useInitializeOnboard
-
-### useIsWalletMetamask
-
-- useOnboard
-
-### useIsWalletOnNetwork
+## NOTE
 
-- useOnboard
+Make sure you keep `peerDependencies` and `devDependencies` versions in sync!
 
-### useUsersAddress
-
-- useOnboard
-
-## TODO:
+## How to use
 
-- jest tests
+1. `yarn add @pooltogether/utilities`
+2. `import * as Hooks from '@pooltogether/hooks'` OR `import { hookYouWantToUse } from '@pooltogether/hooks'`
+3. Ensure you call any required init functions early
 
 ## Local development
 
-TODO: Make this better...
+Local development works best with yalc
+`yarn global add yalc`
 
 In pooltogether-hooks:
-`yarn link`
+`yarn start`
 
 In the app you're importing pooltogether-hooks:
-`yarn link-hooks`
+`yalc link @pooltogether/hooks`
 
-In pooltogether-hooks:
-`yarn link-local`
-`yarn start`
+When you save changes inside the hooks `src` folder, the package will rebuild and be pushed to all other projects that have run `yalc link @pooltogether/hooks`.
 
-In the app you're importing pooltogether-hooks:
-`yarn dev`
+## TODO:
 
-And your app will hot reload when changes are detected in the hooks folder!
+- jest tests
diff --git a/package.json b/package.json
@@ -14,45 +14,53 @@
     "start": "rm -rf dist && tsc-watch --onSuccess \"yalc push\"",
     "build": "rm -rf dist && tsc",
     "watch": "yarn start",
-    "reinstall": "rm -rf node_modules/ && yarn install",
+    "reinstall": "rm -rf node_modules/ && rm -rf dist/ && yarn install",
     "prepublish": "yarn build",
     "test": "jest",
     "test:watch": "yarn run test --watch",
     "test:cov": "jest --coverage --coverageDirectory=coverage && open ./coverage/index.html",
     "link-local": "yarn link react && yarn link react-query && yarn link react-dom && yarn link jotai",
     "unlink-local": "yarn unlink react && yarn unlink react-query && yarn unlink jotai && yarn install --force"
   },
-  "dependencies": {
+  "dependencies": {},
+  "devDependencies": {
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-query": "^3.16.0",
     "@pooltogether/bnc-onboard": "^1.25.0-c",
     "@pooltogether/etherplex": "^1.1.1",
     "@pooltogether/evm-chains-extended": "^0.4.4",
     "@pooltogether/utilities": "^0.0.34",
     "beautiful-react-hooks": "^0.35.0",
+    "jotai": "^0.16.10",
     "date-fns": "^2.23.0",
     "ethers": "^5.3.0",
     "framer-motion": "^4.1.17",
-    "js-cookie": "^2.2.1"
-  },
-  "devDependencies": {
+    "js-cookie": "^2.2.1",
     "@types/jest": "^26.0.23",
     "@types/js-cookie": "^2.2.6",
     "@types/node": "^15.0.2",
     "eth-revert-reason": "^1.0.3",
     "glob": "^7.1.7",
     "jest": "^26.6.3",
-    "jotai": "^0.16.10",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-query": "^3.16.0",
     "ts-jest": "^26.5.6",
     "tsc-watch": "^4.2.9",
     "typescript": "^4.2.4"
   },
   "peerDependencies": {
-    "jotai": "^0.16.10",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-query": "^3.16.0"
+    "react-query": "^3.16.0",
+    "@pooltogether/bnc-onboard": "^1.25.0-c",
+    "@pooltogether/etherplex": "^1.1.1",
+    "@pooltogether/evm-chains-extended": "^0.4.4",
+    "@pooltogether/utilities": "^0.0.34",
+    "beautiful-react-hooks": "^0.35.0",
+    "jotai": "^0.16.10",
+    "date-fns": "^2.23.0",
+    "ethers": "^5.3.0",
+    "framer-motion": "^4.1.17",
+    "js-cookie": "^2.2.1"
   },
   "jest": {
     "collectCoverageFrom": [

diff --git a/src/constants.ts b/src/constants.ts
@@ -3,6 +3,7 @@ import { CookieAttributes } from 'js-cookie'
 export const SELECTED_WALLET_COOKIE_KEY = 'selectedWallet'
 
 export const QUERY_KEYS = Object.freeze({
+  prizePeriod: 'prizePeriod',
   tokenBalances: 'tokenBalances',
   tokenAllowances: 'tokenAllowances',
   readProvider: 'readProvider',

diff --git a/src/hooks/transactions.ts b/src/hooks/transactions.ts
@@ -37,7 +37,7 @@ export const useTransaction = (txId) => {
  * @param poolToast poolToast object from @pooltogether/react-components library for displaying toast messages
  * @returns async function 'sendTx'
  */
-export const useSendTransaction = function (t, poolToast) {
+export const useSendTransaction = (t, poolToast) => {
   const [transactions, setTransactions] = useAtom(transactionsAtom)
   const { onboard, address: usersAddress, provider, network: chainId } = useOnboard()
 
@@ -61,7 +61,13 @@ export const useSendTransaction = function (t, poolToast) {
       ...callbacks
     }
 
-    let updatedTransactions = createTransaction(newTx, transactions, setTransactions, usersAddress, chainId)
+    let updatedTransactions = createTransaction(
+      newTx,
+      transactions,
+      setTransactions,
+      usersAddress,
+      chainId
+    )
 
     callTransaction(
       t,
@@ -158,7 +164,9 @@ const callTransaction = async (
       chainId
     )
 
-    poolToast.success(`"${tx.name}" ${t?.('transactionSentConfirming') || 'Transaction sent! Confirming...'}`)
+    poolToast.success(
+      `"${tx.name}" ${t?.('transactionSentConfirming') || 'Transaction sent! Confirming...'}`
+    )
     await ethersTx.wait()
 
     updatedTransactions = updateTransaction(
@@ -207,7 +215,8 @@ const callTransaction = async (
       }
 
       if (reason?.match('rng-in-flight') || e.message.match('rng-in-flight')) {
-        reason = t?.('prizeBeingAwardedPleaseTryAgainSoon') || 'Prize being awarded! Please try again soon'
+        reason =
+          t?.('prizeBeingAwardedPleaseTryAgainSoon') || 'Prize being awarded! Please try again soon'
       }
 
       errorMsg = reason ? reason : e.data?.message ? e.data.message : e.message
@@ -230,7 +239,10 @@ const callTransaction = async (
         chainId
       )
 
-      poolToast.error(`"${tx.name}" ${t?.('txFailedToCompleteWithReason') || 'Transaction did not complete:'} ${errorMsg}`)
+      poolToast.error(
+        `"${tx.name}" ${t?.('txFailedToCompleteWithReason') ||
+          'Transaction did not complete:'} ${errorMsg}`
+      )
     }
   }
 }
@@ -281,10 +293,25 @@ export const readTransactions = (
  * @param {string} usersAddress the current wallet address used in the localStorage lookup key to only find tx's by this sender
  * @param {number} chainId the network to check for existing transactions on
  */
-export const checkTransactionStatuses = (localStorageTransactions, provider, setTransactions, usersAddress, chainId) => {
+export const checkTransactionStatuses = (
+  localStorageTransactions,
+  provider,
+  setTransactions,
+  usersAddress,
+  chainId
+) => {
   localStorageTransactions
     .filter((tx) => tx.sent && !tx.completed)
-    .map((tx) => runAsyncCheckTx(tx, provider, localStorageTransactions, setTransactions, usersAddress, chainId))
+    .map((tx) =>
+      runAsyncCheckTx(
+        tx,
+        provider,
+        localStorageTransactions,
+        setTransactions,
+        usersAddress,
+        chainId
+      )
+    )
 }
 
 /**
@@ -296,7 +323,14 @@ export const checkTransactionStatuses = (localStorageTransactions, provider, set
  * @param {string} usersAddress the current wallet address used in the localStorage lookup key to only find tx's by this sender
  * @param {number} chainId the network to check for existing transactions on
  */
-const runAsyncCheckTx = async (tx, provider, transactions, setTransactions, usersAddress, chainId) => {
+const runAsyncCheckTx = async (
+  tx,
+  provider,
+  transactions,
+  setTransactions,
+  usersAddress,
+  chainId
+) => {
   let ethersTx
   try {
     ethersTx = await provider.getTransaction(tx.hash)
@@ -362,11 +396,18 @@ const runAsyncCheckTx = async (tx, provider, transactions, setTransactions, user
  * @param {object} newValues new values for keys to update in the object
  * @param {array} transactions the list of transactions from the mem-store
  * @param {function} setTransactions the mem-store setter function to update the list of transactions
- * @param {string} usersAddress the current wallet address used in the localStorage lookup key for setting a tx into localStorage 
+ * @param {string} usersAddress the current wallet address used in the localStorage lookup key for setting a tx into localStorage
  * @param {number} chainId the network to check use in the localStorage lookup key for setting a tx into localStorage
  * @returns {array} the updates list of transactions
  */
-export const updateTransaction = (id, newValues, transactions, setTransactions, usersAddress, chainId) => {
+export const updateTransaction = (
+  id,
+  newValues,
+  transactions,
+  setTransactions,
+  usersAddress,
+  chainId
+) => {
   let editedTransactions = transactions.map((transaction) => {
     return transaction.id === id
       ? {
@@ -389,11 +430,16 @@ export const updateTransaction = (id, newValues, transactions, setTransactions,
 /**
  * Stores the latest list of in mem-store transactions into the browser's localStorage
  * @param {array} transactions the list of transactions from the mem-store
- * @param {string} usersAddress the current wallet address used in the localStorage lookup key for setting a tx into localStorage 
+ * @param {string} usersAddress the current wallet address used in the localStorage lookup key for setting a tx into localStorage
  * @param {number} chainId the network to check use in the localStorage lookup key for setting a tx into localStorage
  * @param {transactionsKey} string customizable key for the localStorage key/val store, defaults to 'tx'
  */
-export const updateStorageWith = (transactions, usersAddress, chainId, transactionsKey = DEFAULT_TRANSACTIONS_KEY) => {
+export const updateStorageWith = (
+  transactions,
+  usersAddress,
+  chainId,
+  transactionsKey = DEFAULT_TRANSACTIONS_KEY
+) => {
   const sentTransactions = transactions.filter((tx) => {
     return tx.sent && !tx.cancelled
   })
@@ -418,7 +464,7 @@ export const updateStorageWith = (transactions, usersAddress, chainId, transacti
  * Removes all completed transactions from the browser's localStorage cache and local mem-store
  * @param {array} transactions the list of transactions from the mem-store
  * @param {function} setTransactions the mem-store function to update the list of transactions in the mem-store
- * @param {string} usersAddress the current wallet address used in the localStorage lookup key for setting a tx into localStorage 
+ * @param {string} usersAddress the current wallet address used in the localStorage lookup key for setting a tx into localStorage
  * @param {number} chainId the network to check use in the localStorage lookup key for setting a tx into localStorage
  */
 export const clearPreviousTransactions = (transactions, setTransactions, usersAddress, chainId) => {
@@ -434,7 +480,7 @@ export const clearPreviousTransactions = (transactions, setTransactions, usersAd
  * @param {object} newTx new transaction data to add
  * @param {array} transactions the list of transactions from the mem-store
  * @param {function} setTransactions the mem-store function to update the list of transactions in the mem-store
- * @param {string} usersAddress the current wallet address used in the localStorage lookup key for setting a tx into localStorage 
+ * @param {string} usersAddress the current wallet address used in the localStorage lookup key for setting a tx into localStorage
  * @param {number} chainId the network to check use in the localStorage lookup key for setting a tx into localStorage
  */
 export const createTransaction = (newTx, transactions, setTransactions, usersAddress, chainId) => {
@@ -449,4 +495,4 @@ export const createTransaction = (newTx, transactions, setTransactions, usersAdd
 
 const storageKey = (chainId, usersAddress, transactionsKey) => {
   return `${chainId}-${usersAddress.toLowerCase()}-${transactionsKey}`
-}
+}
diff --git a/src/hooks/useCoingeckoTokenImage.ts b/src/hooks/useCoingeckoTokenImage.ts
@@ -44,7 +44,7 @@ const TOKEN_IMAGES_BY_ADDRESS = {
 }
 
 const useCoingeckoTokenImage = (chainId, address) => {
-  const formattedAddress = address.toLowerCase()
+  const formattedAddress = address?.toLowerCase()
   const { data, isFetched, isFetching } = useCoingeckoTokenData(chainId, formattedAddress)
 
   const hardcodedImageUrl = TOKEN_IMAGES_BY_ADDRESS[formattedAddress]

diff --git a/src/hooks/useEnsName.ts b/src/hooks/useEnsName.ts
@@ -8,8 +8,8 @@ export const useEnsName = (address) => {
 
   const { readProvider, isReadProviderReady } = useReadProvider(NETWORK.mainnet)
 
-  useEffect(async () => {
-    if (address && readProvider) {
+  useEffect(() => {
+    const getAndSetEnsName = async () => {
       try {
         const resolvedEnsName = await readProvider.lookupAddress(address)
         if (resolvedEnsName) {
@@ -18,6 +18,10 @@ export const useEnsName = (address) => {
       } catch (e) {
         console.log(e)
       }
+    }
+
+    if (address && readProvider) {
+      getAndSetEnsName()
     } else {
       setEnsName('')
     }
@@ -26,4 +30,4 @@ export const useEnsName = (address) => {
   return ensName
 }
 
-export default useEnsName
+export default useEnsName