WIP

.github/workflows/pledge-signer-sync/pledge-sync.js

@@ -25,7 +25,10 @@ if (!GALXE_ACCESS_TOKEN || !FIRESTORE_USER || !FIRESTORE_PASSWORD) {
 // Limit sync range to last 4 days ( 2 days from last sync + 2 days from now )
 const TARGET_DATE = new Date(Date.now() - 4 * 24 * 60 * 60_000)
 
-const wait = (ms) => new Promise((r) => setTimeout(r, ms))
+const wait = (ms) =>
+  new Promise((r) => {
+    setTimeout(r, ms)
+  })
 
 const getAddresses = async () => {
   const app = initializeApp({

__mocks__/@ethersproject/web.ts

@@ -1,4 +1,5 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
+// Fixing this here requires digging into Jest a bit, kicking for now.
+// eslint-disable-next-line import/no-import-module-exports
 import sinon from "sinon"
 
 const mock =

__mocks__/webextension-polyfill.ts

@@ -1,3 +1,5 @@
+// Fixing this here requires digging into Jest a bit, kicking for now.
+// eslint-disable-next-line import/no-import-module-exports
 import { Tabs } from "webextension-polyfill"
 
 const browserMock = jest.createMockFromModule<

background/main.ts

@@ -244,7 +244,7 @@ const reduxCache: Middleware = (store) => (next) => (action) => {
 
 // Declared out here so ReduxStoreType can be used in Main.store type
 // declaration.
-const initializeStore = (preloadedState = {}, main: Main) =>
+const initializeStore = (main: Main, preloadedState = {}) =>
   configureStore({
     preloadedState,
     reducer: rootReducer,
@@ -506,7 +506,7 @@ export default class Main extends BaseService<never> {
     })
 
     // Start up the redux store and set it up for proxying.
-    this.store = initializeStore(savedReduxState, this)
+    this.store = initializeStore(this, savedReduxState)
 
     const queueUpdate = debounce(
       (lastState, newState, updateFn) => {

background/services/chain/serial-fallback-provider.ts

@@ -266,7 +266,7 @@ export default class SerialFallbackProvider extends JsonRpcProvider {
   private subscriptions: {
     tag: string
     param: unknown[]
-    processFunc: (result: unknown) => void
+    processFunc: (_: unknown) => void
   }[] = []
 
   // Information on event subscriptions, which can be restored on non-WebSocket

background/services/chain/tests/index.unit.test.ts

@@ -148,7 +148,8 @@ describe("Chain Service", () => {
     it("should get block prices if the NETWORK_POLLING_TIMEOUT has been exceeded", async () => {
       // Set last activity time to 10 minutes ago
       const externalized = chainService as unknown as ChainServiceExternalized
-      externalized.lastUserActivityOnNetwork[ETHEREUM.chainID] = Date.now() - 10 * MINUTE
+      externalized.lastUserActivityOnNetwork[ETHEREUM.chainID] =
+        Date.now() - 10 * MINUTE
       const getBlockPricesStub = sandbox
         .stub(gas, "default")
         .callsFake(async () => createBlockPrices())

background/services/provider-bridge/index.ts

@@ -67,7 +67,7 @@ export type AddChainRequestData = ValidatedAddEthereumChainParameter & {
  */
 export default class ProviderBridgeService extends BaseService<Events> {
   #pendingPermissionsRequests: {
-    [origin: string]: (value: unknown) => void
+    [origin: string]: (_: unknown) => void
   } = {}
 
   #pendingAddNetworkRequests: {

ui/__mocks__/IntersectionObserver.ts

@@ -1,5 +1,5 @@
 export default class IntersectionObserverMock {
-  callbackMap: Map<HTMLElement, (...args: unknown[]) => void> = new Map()
+  callbackMap: Map<HTMLElement, (..._: unknown[]) => void> = new Map()
 
   constructor(
     protected callback: (entry: [Partial<IntersectionObserverEntry>]) => void

ui/components/AccountsNotificationPanel/AccountsNotificationPanelAccounts.tsx

@@ -304,7 +304,7 @@ type Props = {
 
 export default function AccountsNotificationPanelAccounts({
   onCurrentAddressChange,
-}: Props): ReactElement {
+}: Props): ReactElement | null {
   const { t } = useTranslation()
   const dispatch = useBackgroundDispatch()
   const history = useHistory()
@@ -362,7 +362,7 @@ export default function AccountsNotificationPanelAccounts({
 
         // If there are no account totals for the given type, skip the section.
         if (accountTypeTotals === undefined || accountTypeTotals.length <= 0) {
-          return <></>
+          return null
         }
 
         const accountTotalsByType = accountTypeTotals.reduce(

ui/components/AccountsNotificationPanel/AccountsNotificationPanelNotifications.tsx

@@ -2,6 +2,9 @@ import React, { ReactElement } from "react"
 import AccountsNotificationPanelNotificationItem from "./AccountsNotificationPanelNotificationItem"
 import SharedButton from "../Shared/SharedButton"
 
+// This file is currently still a stub, so using sample data.
+/* eslint-disable react/no-array-index-key */
+
 export default function AccountsNotificationPanelNotifications(): ReactElement {
   return (
     <>

ui/components/Onboarding/OnboardingOpenClaimFlowBanner.tsx

@@ -238,7 +238,7 @@ function IneligibleCTAContent({
   )
 }
 
-export default function OnboardingOpenClaimFlowBanner(): ReactElement {
+export default function OnboardingOpenClaimFlowBanner(): ReactElement | null {
   const claimAmount = useBackgroundSelector(selectEligibility).toString()
   const isClaimLoading = useBackgroundSelector(selectEligibilityLoading)
 
@@ -266,7 +266,7 @@ export default function OnboardingOpenClaimFlowBanner(): ReactElement {
     ((!hasSomethingToClaim || isClaimLoading) &&
       addresHasNothingToClaimClosed.split(";").includes(currentAddress))
   )
-    return <></>
+    return null
 
   if (isClaimLoading)
     return (

ui/components/Shared/SharedDropDown.tsx

@@ -1,4 +1,10 @@
-import React, { ReactElement, useRef, useState } from "react"
+import React, {
+  ReactElement,
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+} from "react"
 import { useTranslation } from "react-i18next"
 import { useOnClickOutside } from "../../hooks"
 import AccountitemOptionLabel from "../AccountItem/AccountItemOptionLabel"
@@ -39,11 +45,19 @@ type ContentProps = {
 
 function DropdownContainer({ children }: DropdownContainerProps): ReactElement {
   const [isOpen, setIsOpen] = useState(false)
+  const dropdownToggle = useCallback(
+    (value?: boolean) =>
+      setIsOpen(value ?? ((existingValue) => !existingValue)),
+    [setIsOpen]
+  )
 
-  const contextValue: DropdownContextValue = {
-    isOpen,
-    toggle: (value) => setIsOpen(value ?? ((p) => !p)),
-  }
+  const contextValue: DropdownContextValue = useMemo<DropdownContextValue>(
+    () => ({
+      isOpen,
+      toggle: dropdownToggle,
+    }),
+    [isOpen, dropdownToggle]
+  )
 
   return (
     <DropdownContext.Provider value={contextValue}>

ui/components/Shared/SharedSkeletonLoader.tsx

@@ -8,11 +8,14 @@ export default function SharedSkeletonLoader(props: {
   children?: ReactNode
   isLoaded?: boolean
   customStyles?: string
-}): ReactElement | ReactNode {
+}): ReactElement {
   const { width, height, borderRadius, isLoaded, customStyles, children } =
     props
 
-  if (isLoaded) return children
+  // Want to return a ReactElement to make this maximally easy to integrate,
+  // whereas children can be a ReactNode; Fragment will let us achieve that.
+  // eslint-disable-next-line react/jsx-no-useless-fragment
+  if (isLoaded) return <>{children}</>
 
   return (
     <div className={classNames("skeleton")} data-testid="loading_skeleton">

ui/components/Signing/SignatureDetails/TransactionSignatureDetails/TransactionSignatureDetailsPanelSwitcher.tsx

@@ -8,7 +8,7 @@ export default function TransactionDataPanelSwitcher({
   transactionRequest,
 }: {
   transactionRequest: EnrichedEVMTransactionRequest
-}): ReactElement {
+}): ReactElement | null {
   const switchablePanels = useSwitchablePanels([
     {
       name: "Details",
@@ -24,5 +24,5 @@ export default function TransactionDataPanelSwitcher({
     },
   ])
 
-  return <>{switchablePanels}</>
+  return switchablePanels
 }

ui/hooks/index.ts

@@ -1,6 +1,6 @@
 import { isAllowedQueryParamPage } from "@tallyho/provider-bridge-shared"
 
-import { useState, useEffect, ReactElement, ReactNode } from "react"
+import React, { useState, useEffect, ReactElement } from "react"
 import { getAllAddresses } from "@tallyho/tally-background/redux-slices/selectors/accountsSelectors"
 import SharedPanelSwitcher from "../components/Shared/SharedPanelSwitcher"
 import { useBackgroundSelector } from "./redux-hooks"
@@ -41,7 +41,7 @@ type PanelDescriptor = {
  * interchange between several screens exclusively from each other.
  *
  * The underlying component is a `SharedPanelSwitcher`, and the hook returns
- * the switcher element and current panel being displayed as siblings for
+ * the switcher element and current panel being displayed as a fragment for
  * adding to a JSX component.
  *
  * @example
@@ -65,20 +65,24 @@ type PanelDescriptor = {
  *   },
  * ])
 
- * return <>{switchablePanels}</>
+ * return switchablePanels
  * ```
  */
-export function useSwitchablePanels(panels: PanelDescriptor[]): ReactNode {
+export function useSwitchablePanels(
+  panels: PanelDescriptor[]
+): ReactElement | null {
   const [panelNumber, setPanelNumber] = useState(0)
 
-  return [
-    SharedPanelSwitcher({
-      setPanelNumber,
-      panelNumber,
-      panelNames: panels.map(({ name }) => name),
-    }),
-    panels[panelNumber].panelElement(),
-  ]
+  return React.Fragment({
+    children: [
+      SharedPanelSwitcher({
+        setPanelNumber,
+        panelNumber,
+        panelNames: panels.map(({ name }) => name),
+      }),
+      panels[panelNumber].panelElement(),
+    ],
+  })
 }
 
 export function useIsOnboarding(): boolean {

ui/pages/Earn/DepositCard.tsx

@@ -18,14 +18,14 @@ export const getDisplayAPR = (
     }
     return `${data.low} - ${data.high}`
   }
-  return data.totalAPR
+  return data.totalAPR ?? ""
 }
 
 export default function EarnDepositedCard({
   vault,
 }: {
   vault: AvailableVault
-}): ReactElement {
+}): ReactElement | null {
   const { vaultAddress, icons, userDeposited, asset } = vault
   const userDepositedAmount = fromFixedPointNumber(
     {

ui/pages/EarnDeposit.tsx

@@ -46,7 +46,7 @@ import {
   AccordionPoolInfoContent,
 } from "./Earn/AccordionPoolInfo"
 
-export default function EarnDeposit(): ReactElement {
+export default function EarnDeposit(): ReactElement | null {
   const storedInput = useBackgroundSelector(selectEarnInputAmount)
   const account = useBackgroundSelector(selectCurrentAccount)
   const accountBalances = useBackgroundSelector(selectCurrentAccountBalances)

ui/pages/Popup.tsx

@@ -212,17 +212,15 @@ export function Main(): ReactElement {
           .hide {
             opacity: 0;
           }
-        `}
-      </style>
-      {isDappPopup && (
-        <style jsx global>
-          {`
+
+          ${isDappPopup &&
+          `
             body {
               height: 100%;
             }
-          `}
-        </style>
-      )}
+           `}
+        `}
+      </style>
     </>
   )
 }

ui/routes/routes.tsx

@@ -30,7 +30,7 @@ type PageList = {
   // Tricky to handle all props components are
   // accepting here.
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  Component: (...args: any[]) => ReactElement
+  Component: (...args: any[]) => ReactElement | null
   hasTabBar: boolean
   hasTopBar: boolean
   persistOnClose: boolean