clean types for opportunity

.github/workflows/code_quality.yml

@@ -7,14 +7,41 @@ defaults:
   run:
     shell: bash
 
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
 jobs:
+  install-dependencies:
+    if: ${{ always() }}
+    runs-on: ubuntu-latest
+    name: 'Dependencies'
+    steps:
+      - name: Checkout repository 
+        uses: actions/checkout@v3
+        with:
+          submodules: recursive
+
+      - name: Set up Bun
+        uses: oven-sh/setup-bun@v2
+        with:
+          bun-version: latest
+
+      - name: Check dependencies
+        run: bun install
+
   check-lint:
+    name: 'Linting'
+    needs: install-dependencies
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - name: Checkout repository 
+        uses: actions/checkout@v3
+        with:
+          submodules: recursive
 
       - name: Set up Bun
-        uses: oven-sh/setup-bun@v1
+        uses: oven-sh/setup-bun@v2
         with:
           bun-version: latest
 
@@ -24,5 +51,23 @@ jobs:
       - name: Check codebase linting
         run: bun lint:ci
 
+  check-type:
+    name: 'Typing'
+    runs-on: ubuntu-latest
+    needs: check-lint
+    steps:
+      - name: Checkout repository 
+        uses: actions/checkout@v3
+        with:
+          submodules: recursive
+
+      - name: Set up Bun
+        uses: oven-sh/setup-bun@v2
+        with:
+          bun-version: latest
+
+      - name: Check dependencies
+        run: bun install
+
       - name: Check codebase typing
         run: bun typecheck

.gitignore

@@ -1,2 +1,3 @@
 node_modules
+dist
 .DS_Store

package.json

@@ -70,14 +70,14 @@
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.2",
-    "@remix-run/dev": "^2.11.2",
+    "@remix-run/dev": "^2.15.2",
     "@types/bun": "^1.1.14",
     "@types/react": "^18.2.20",
     "@types/react-dom": "^18.2.7",
     "autoprefixer": "^10.4.19",
     "elysia": "^1.1.19",
     "postcss": "^8.4.38",
-    "typescript": "^5.6.2",
+    "typescript": "^5.8.0-dev.20250116",
     "vite": "^5.1.0",
     "vite-tsconfig-paths": "^4.2.1"
   },

src/components/dapp/TransactionButton.tsx

@@ -9,9 +9,11 @@ import List from "../primitives/List";
 import { Notifier } from "../primitives/Notifications";
 import Tooltip from "../primitives/Tooltip";
 
+type WagmiTx = Parameters<UseSendTransactionReturnType<ResolvedRegister["config"], unknown>["sendTransaction"]>["0"];
+
 export type TransactionButtonProps = ButtonProps & {
   enableSponsorCheckbox?: boolean;
-  tx?: Parameters<UseSendTransactionReturnType<ResolvedRegister["config"], unknown>["sendTransaction"]>["0"];
+  tx?: { [K in keyof WagmiTx]: K extends "data" | "to" ? string : WagmiTx[K] };
   name?: ReactNode;
   iconProps?: IconProps;
   onExecute?: (hash: string) => void;
@@ -82,7 +84,8 @@ export default function TransactionButton({
       let receipt = null;
       while (receipt === null) {
         try {
-          const res = await getTransactionReceipt(client, { hash });
+          // biome-ignore lint/suspicious/noExplicitAny: TODO: tx clients overall
+          const res = await getTransactionReceipt(client as any, { hash });
           receipt = res;
         } catch {
           delay(1000);

src/components/extenders/Dropdown.tsx

@@ -13,9 +13,11 @@ export type DropdownProps = Component<
     state?: GetSet<boolean>;
     content?: ReactNode;
     onHover?: boolean;
+    children?: ReactNode;
   },
-  BoxProps
->;
+  HTMLButtonElement
+> &
+  Omit<BoxProps, "content">;
 
 export default function Dropdown({
   state,

src/components/extenders/Modal.tsx

@@ -16,7 +16,7 @@ export type ModalProps = Component<{
   modal?: ReactNode;
   state?: GetSet<boolean>;
 }> &
-  BoxProps;
+  Omit<BoxProps, "title">;
 
 export default function Modal({ state, title, description, modal, children, className, ...props }: ModalProps) {
   const { vars } = useTheme();

src/components/primitives/Input.tsx

@@ -101,7 +101,8 @@ Input.BigInt = function InputBigInt({ state, base, ...props }: InputProps<bigint
       displayed?.split(".")?.[1]?.[displayed?.split?.(".")?.[1]?.length - 1] === "0" ||
       displayed?.[displayed.length - 1] === ".";
 
-    if (_chosenValue === undefined || _chosenValue === "") return "";
+    // biome-ignore lint/suspicious/noExplicitAny: Making sure it's not an empty string for numbers input
+    if (_chosenValue === undefined || (_chosenValue as any as string) === "") return "";
     if (displayed === "0" || isInputtingDecimals) return displayed;
     return transformed ?? displayed;
   }, [internal, state, displayed, base, _getter]);
@@ -110,7 +111,7 @@ Input.BigInt = function InputBigInt({ state, base, ...props }: InputProps<bigint
     (v: string | undefined) => {
       try {
         if (v === undefined || v === "") {
-          setter?.(v) ?? setInternal(v);
+          setter?.(undefined) ?? setInternal(undefined);
           setDisplayed(undefined);
           return;
         }

src/components/primitives/Notifications.tsx

@@ -1,8 +1,9 @@
 import type { ReactNode } from "react";
 import { ToastContainer, toast } from "react-toastify";
-import { Button, Group, Icon, type IconProps, type State, Text, mergeClass } from "../..";
+import { Button, Group, Icon, type IconProps, Text, mergeClass } from "../..";
 import { boxStyles } from "./Box";
 import "react-toastify/dist/ReactToastify.css";
+import type { State } from "../../theming/variables";
 
 export function NotificationText({ title, subtitle }: { title: ReactNode; subtitle: ReactNode }) {
   return (

src/components/primitives/Show.tsx

@@ -0,0 +1,11 @@
+import type { PropsWithChildren } from "react";
+
+/**
+ * Shorthand for conditionally displaying components
+ * @param if show or not
+ */
+export default function Show({ if: enabled, children }: PropsWithChildren<{ if: boolean }>) {
+  //TODO: add collapsible options to animate enabling/disabling
+  if (!enabled) return;
+  return children;
+}

src/components/primitives/Table.tsx

@@ -67,8 +67,9 @@ export type RowProps<T extends Columns> = Component<
   PropsWithChildren<
     {
       columns: T;
+      size?: ListProps["size"];
       exclude?: (keyof T)[];
-    } & TableColumns<T>
+    } & Partial<TableColumns<T>>
   >
 >;
 
@@ -141,6 +142,7 @@ export function Row<T extends Columns>({ columns, exclude, children, ...props }:
 export type TableProps<T extends Columns> = Component<
   Styled<typeof tableStyles> & {
     columns: T;
+    exclude?: (keyof T)[];
     header?: ReactNode;
     footer?: ReactNode;
     order?: Order;

src/components/primitives/Tabs.tsx

@@ -35,11 +35,11 @@ import { Link, useLocation } from "@remix-run/react";
 
 import type { ReactNode } from "react";
 import { type VariantProps, tv } from "tailwind-variants";
-import { Container } from "../..";
 import useThemableProps from "../../hooks/theming/useThemableProps";
 import { mergeClass } from "../../utils/css";
 import type { Component, Styled, Themable } from "../../utils/types";
 import Group from "../extenders/Group";
+import Container from "../layout/Container";
 import EventBlocker from "./EventBlocker";
 
 export const tabsStyles = tv(

src/hooks/theming/useThemedVariables.tsx

@@ -24,7 +24,7 @@ export default function useThemedVariables(
       return Object.assign({}, currentTheme(coloring).accent, currentTheme(coloring).main);
 
     if (coloring) {
-      const v = reduceColorIntoVariables(coloring);
+      const v = reduceColorIntoVariables(coloring as Coloring);
 
       return Object.assign({}, v[mode]?.accent, v[mode]?.main);
     }

src/hooks/useWalletState.tsx

@@ -5,7 +5,7 @@ import { type Config, useAccount, useConfig, useConnect, useDisconnect } from "w
 //TODO: remove merkl-related typings in favor of redeclarations for better abstraction
 import type { Chain, Explorer } from "@merkl/api";
 import { http, type WalletClient, createPublicClient, createWalletClient, custom } from "viem";
-import { eip712WalletActions, zksync } from "viem/zksync";
+import { type SendTransactionParameters, eip712WalletActions, zksync } from "viem/zksync";
 
 export type WalletOptions = {
   sponsorTransactions?: boolean;
@@ -44,7 +44,9 @@ export default function useWalletState(chains: (Chain & { explorers: Explorer[]
   }, [account, wrapClient]);
 
   const wrapTransaction = useCallback(
-    async (tx: Parameters<WalletClient["sendTransaction"]>) => {
+    async (
+      tx: [SendTransactionParameters & { paymaster?: string; paymasterInput?: string; gasPerPubdata?: string }],
+    ) => {
       if (!client) return;
       const configWrappedTx = await options?.transaction?.(tx, { client, config });
 
@@ -56,24 +58,27 @@ export default function useWalletState(chains: (Chain & { explorers: Explorer[]
         });
 
         const payload = {
-          account,
-          to: `${tx[0].to}`,
+          account: account.address as `0x${string}`,
+          to: `${tx[0].to}` as `0x${string}`,
+          chain: client.chain,
           from: account.address,
           value: BigInt(tx[0].value ?? "0"),
           gas: tx[0].gas ? BigInt(tx[0].gas ?? "0") : undefined,
           gasPerPubdata: tx[0].gasPerPubdata ? BigInt(tx[0].gasPerPubdata) : undefined,
           maxPriorityFeePerGas: BigInt(0),
           maxFeePerGas: tx[0].maxFeePerGas ? BigInt(tx[0].maxFeePerGas) : undefined,
-          nonce: await nonce.getTransactionCount({ address: account.address }),
+          nonce: await nonce.getTransactionCount({ address: account.address! }),
           data: tx[0].data,
-
+          kzg: undefined,
           paymaster: tx[0].paymaster,
           paymasterInput: tx[0].paymasterInput,
         };
 
         return createWalletClient({
           chain: zksync,
-          transport: custom(window.ethereum!),
+          //TODO: refactor transaction pipeline and embed this in clietn somehow
+          // biome-ignore lint/suspicious/noExplicitAny: Delete this in favor of using same as wallet client
+          transport: custom((window as any).ethereum!),
         })
           .extend(eip712WalletActions())
           .sendTransaction(payload);