feat: add husky pre-commit and push checks

.husky/pre-commit

@@ -0,0 +1,2 @@
+pnpm format:check
+pnpm lint

.husky/pre-push

@@ -0,0 +1 @@
+pnpm typecheck

components/Approve/index.tsx

@@ -25,7 +25,7 @@ const Index = () => {
 
   useHandleTransaction("approve", data, error, isPending, isSuccess, {
     type: "approve",
-    amount: MAXIMUM_VALUE_UINT256,
+    amount: BigInt(MAXIMUM_VALUE_UINT256),
   });
 
   return (

components/DelegatingView/index.tsx

@@ -66,7 +66,7 @@ const Index = ({ delegator, transcoders, protocol, currentRound }: Props) => {
 
   useHandleTransaction("withdrawFees", data, error, isPending, isSuccess, {
     recipient,
-    amount,
+    amount: BigInt(amount),
   });
 
   const isMyAccount = checkAddressEquality(

components/DelegatingWidget/Delegate.tsx

@@ -2,13 +2,13 @@ import { bondingManager } from "@lib/api/abis/main/BondingManager";
 import { livepeerToken } from "@lib/api/abis/main/LivepeerToken";
 import { MAXIMUM_VALUE_UINT256 } from "@lib/utils";
 import { Box, Button } from "@livepeer/design-system";
-import { parseEther } from "ethers/lib/utils";
 import { useHandleTransaction } from "hooks";
 import {
   useBondingManagerAddress,
   useLivepeerTokenAddress,
 } from "hooks/useContracts";
 import { useMemo, useState } from "react";
+import { parseEther } from "viem";
 import { useSimulateContract, useWriteContract } from "wagmi";
 
 import ProgressSteps from "../ProgressSteps";
@@ -54,12 +54,12 @@ const Delegate = ({
     approveIsSuccess,
     {
       type: "bond",
-      amount: MAXIMUM_VALUE_UINT256,
+      amount: BigInt(MAXIMUM_VALUE_UINT256),
     }
   );
 
   const bondWithHintArgs = {
-    amount: amount?.toString() ? parseEther(amount) : "0",
+    amount: amount?.toString() ? parseEther(amount) : BigInt(0),
     to,
     oldDelegateNewPosPrev,
     oldDelegateNewPosNext,

components/DelegatingWidget/Footer.tsx

@@ -7,14 +7,14 @@ import {
 } from "@lib/utils";
 import { Box, Button } from "@livepeer/design-system";
 import { AccountQueryResult, OrchestratorsSortedQueryResult } from "apollo";
-import { parseEther } from "ethers/lib/utils";
 import {
   StakingAction,
   useAccountAddress,
   useAccountBalanceData,
   usePendingFeesAndStakeData,
 } from "hooks";
 import { useMemo } from "react";
+import { parseEther } from "viem";
 
 import Delegate from "./Delegate";
 import Footnote from "./Footnote";

components/DelegatingWidget/Undelegate.tsx

@@ -1,8 +1,8 @@
 import { bondingManager } from "@lib/api/abis/main/BondingManager";
 import { Button } from "@livepeer/design-system";
-import { parseEther } from "ethers/lib/utils";
 import { useAccountAddress, useHandleTransaction } from "hooks";
 import { useBondingManagerAddress } from "hooks/useContracts";
+import { parseEther } from "viem";
 import { useSimulateContract, useWriteContract } from "wagmi";
 
 const Undelegate = ({ amount, newPosPrev, newPosNext, disabled }) => {

components/DelegatingWidget/index.tsx

@@ -67,7 +67,7 @@ const Index = ({
     [isMyTranscoder, isDelegated]
   );
   const currentPendingStake = Number(
-    fromWei(pendingFeesAndStake?.pendingStake ?? 0)
+    fromWei(pendingFeesAndStake?.pendingStake ?? "0")
   );
 
   return (

components/Drawer/index.tsx

@@ -6,8 +6,8 @@ import Router, { useRouter } from "next/router";
 import { useEffect } from "react";
 
 import Account from "../Account";
-import Logo from "../Logo";
 import LlamaswapModal from "../LlamaswapModal";
+import Logo from "../Logo";
 
 const Index = ({
   items = [],

components/HistoryView/index.tsx

@@ -39,20 +39,13 @@ const Index = () => {
   );
 
   const events = useMemo(
-    () =>
-      data?.transactions?.reduce(
-        (res, { events: e }) => res.concat(e as any),
-        []
-      ) ?? [],
+    () => data?.transactions?.flatMap(({ events: e }) => e ?? []) ?? [],
     [data]
   );
 
   const lastEventTimestamp = useMemo(
     () =>
-      Number(
-        (events?.[(events?.length || 0) - 1] as any)?.transaction?.timestamp ??
-          0
-      ),
+      Number(events?.[(events?.length || 0) - 1]?.transaction?.timestamp ?? 0),
     [events]
   );
 
@@ -61,9 +54,7 @@ const Index = () => {
   const mergedEvents = useMemo(
     () =>
       [
-        ...events.filter(
-          (e) => (e as any)?.__typename !== "WinningTicketRedeemedEvent"
-        ),
+        ...events.filter((e) => e?.__typename !== "WinningTicketRedeemedEvent"),
         ...(data?.winningTicketRedeemedEvents?.filter(
           (e) => (e?.transaction?.timestamp ?? 0) > lastEventTimestamp
         ) ?? []),
@@ -110,7 +101,7 @@ const Index = () => {
               variables: {
                 skip: data.transactions.length,
               },
-              updateQuery: (previousResult: any, { fetchMoreResult }: any) => {
+              updateQuery: (previousResult, { fetchMoreResult }) => {
                 if (!fetchMoreResult) {
                   return previousResult;
                 }
@@ -139,7 +130,7 @@ const Index = () => {
         }}
       >
         <Box css={{ paddingBottom: "$3" }}>
-          {mergedEvents.map((event: any, i: number) => renderSwitch(event, i))}
+          {mergedEvents.map((event, i: number) => renderSwitch(event, i))}
         </Box>
         {loading && data.transactions.length >= 10 && (
           <Flex
@@ -162,7 +153,7 @@ const Index = () => {
 
 export default Index;
 
-function renderSwitch(event: any, i: number) {
+function renderSwitch(event, i: number) {
   switch (event.__typename) {
     case "BondEvent":
       return (

components/LlamaswapModal/index.tsx

@@ -1,8 +1,4 @@
-import {
-  Dialog,
-  DialogContent,
-  DialogTrigger,
-} from "@livepeer/design-system";
+import { Dialog, DialogContent, DialogTrigger } from "@livepeer/design-system";
 
 const Index = ({ trigger, children }) => {
   return (

components/PerformanceList/index.tsx

@@ -11,6 +11,7 @@ import { useAllScoreData, useEnsData } from "hooks";
 import Link from "next/link";
 import numbro from "numbro";
 import { useMemo } from "react";
+import { Column } from "react-table";
 
 const EmptyData = () => <Skeleton css={{ height: 20, width: 100 }} />;
 
@@ -63,17 +64,22 @@ const PerformanceList = ({
   //sort double values correctly.  As such, we use a custom sort function to place 0 values after
   //non-zero's and before null/undefined values.
   const sortTypeFn = useMemo(
-    () => (rowA: any, rowB: any, columnId: string) => {
-      const a = rowA.values[columnId];
-      const b = rowB.values[columnId];
-      if (a === null || a === undefined) return -1;
-      if (b === null || b === undefined) return 1;
-      return a === b ? 0 : a > b ? 1 : -1;
-    },
+    () =>
+      (
+        rowA: { values: Record<string, unknown> },
+        rowB: { values: Record<string, unknown> },
+        columnId: string
+      ) => {
+        const a = rowA.values[columnId];
+        const b = rowB.values[columnId];
+        if (a === null || a === undefined) return -1;
+        if (b === null || b === undefined) return 1;
+        return a === b ? 0 : a > b ? 1 : -1;
+      },
     []
   );
 
-  const columns: any = useMemo(
+  const columns: Column<object>[] = useMemo(
     () => [
       {
         Header: "Rank",

components/StakeTransactions/index.tsx

@@ -1,6 +1,6 @@
 import { Box, Card, Flex, Heading, Text } from "@livepeer/design-system";
 import { UnbondingLock } from "apollo";
-import { parseEther } from "ethers/lib/utils";
+import { parseEther } from "viem";
 
 import {
   abbreviateNumber,

components/Table/index.tsx

@@ -15,7 +15,16 @@ import {
   ChevronUpIcon,
 } from "@radix-ui/react-icons";
 import { ReactNode } from "react";
-import { Column, usePagination, useSortBy, useTable } from "react-table";
+import {
+  Column,
+  HeaderGroup,
+  TableInstance,
+  usePagination,
+  UsePaginationInstanceProps,
+  useSortBy,
+  UseSortByInstanceProps,
+  useTable,
+} from "react-table";
 
 function DataTable<T extends object>({
   heading = null,
@@ -42,15 +51,17 @@ function DataTable<T extends object>({
     nextPage,
     previousPage,
     state: { pageIndex },
-  }: any = useTable<T>(
+  } = useTable<T>(
     {
       columns,
       data,
       initialState,
     },
     useSortBy,
     usePagination
-  );
+  ) as TableInstance<T> &
+    UsePaginationInstanceProps<T> &
+    UseSortByInstanceProps<T> & { state: { pageIndex: number } };
 
   return (
     <>
@@ -102,9 +113,17 @@ function DataTable<T extends object>({
 
                   return (
                     <Tr key={headerGroupKey} {...restHeaderGroupProps}>
-                      {headerGroup.headers.map((column: any, i) => {
+                      {headerGroup.headers.map((column, i) => {
                         const columnProps = column.getHeaderProps(
-                          column.getSortByToggleProps({ title: undefined })
+                          (
+                            column as HeaderGroup<T> & {
+                              getSortByToggleProps: (args?: {
+                                title?: string;
+                              }) => object;
+                            }
+                          ).getSortByToggleProps({
+                            title: undefined,
+                          })
                         );
                         const { key: columnKey, ...restColumnProps } =
                           columnProps;
@@ -114,10 +133,12 @@ function DataTable<T extends object>({
                             key={columnKey}
                             {...restColumnProps}
                             css={{
-                              px: i === 0 ? "$2" : "auto",
+                              paddingLeft: i === 0 ? "$2" : "auto",
+                              paddingRight: i === 0 ? "$2" : "auto",
                               width: i === 0 ? "40px" : "auto",
                               "@bp1": {
-                                px: i === 0 ? "$5" : "auto",
+                                paddingLeft: i === 0 ? "$5" : "auto",
+                                paddingRight: i === 0 ? "$5" : "auto",
                               },
                             }}
                           >
@@ -132,18 +153,34 @@ function DataTable<T extends object>({
                                 fontWeight: 700,
                               }}
                             >
-                              {column?.sortIconAlignment !== "start" &&
+                              {(
+                                column as HeaderGroup<T> & {
+                                  sortIconAlignment?: "start";
+                                }
+                              )?.sortIconAlignment !== "start" &&
                                 column.render("Header")}
                               <Box
                                 css={{
                                   minWidth:
-                                    column?.sortIconAlignment !== "start"
+                                    (
+                                      column as HeaderGroup<T> & {
+                                        sortIconAlignment?: "start";
+                                      }
+                                    )?.sortIconAlignment !== "start"
                                       ? 20
                                       : 0,
                                 }}
                               >
-                                {column.isSorted ? (
-                                  column.isSortedDesc ? (
+                                {(
+                                  column as HeaderGroup<T> & {
+                                    isSorted: boolean;
+                                  }
+                                ).isSorted ? (
+                                  (
+                                    column as HeaderGroup<T> & {
+                                      isSortedDesc: boolean;
+                                    }
+                                  ).isSortedDesc ? (
                                     <ChevronDownIcon />
                                   ) : (
                                     <ChevronUpIcon />
@@ -153,7 +190,11 @@ function DataTable<T extends object>({
                                 )}
                               </Box>
 
-                              {column?.sortIconAlignment === "start" && (
+                              {(
+                                column as HeaderGroup<T> & {
+                                  sortIconAlignment?: "start";
+                                }
+                              )?.sortIconAlignment === "start" && (
                                 <Box
                                   css={{
                                     marginLeft: "$1",
@@ -187,7 +228,8 @@ function DataTable<T extends object>({
                               fontSize: "$3",
                               fontWeight: 500,
                               lineHeight: 2,
-                              px: i === 0 ? "$5" : "$1",
+                              paddingLeft: i === 0 ? "$5" : "$1",
+                              paddingRight: i === 0 ? "$5" : "$1",
                               width: i === 0 ? "40px" : "auto",
                             }}
                           >

components/TransactionsList/index.tsx

@@ -554,7 +554,7 @@ const TransactionsList = ({
 
   return (
     <Table
-      data={events as any}
+      data={events as object[]}
       columns={columns}
       initialState={{
         pageSize,

components/TreasuryVotingWidget/index.tsx

@@ -23,7 +23,7 @@ const formatPercent = (percent: number) =>
   });
 
 const formatLPT = (lpt: string | undefined) =>
-  abbreviateNumber(fromWei(lpt ?? 0), 4);
+  abbreviateNumber(fromWei(lpt ?? "0"), 4);
 
 const TreasuryVotingWidget = ({ proposal, vote, ...props }: Props) => {
   const accountAddress = useAccountAddress();