use makeQuery in every script

packages/frontend/src/scripts/forced-actions/perpetual/getFormElements.ts

@@ -1,26 +1,21 @@
 import { FormId } from '../../../view/pages/forced-actions/components/form/ids'
+import { makeQuery } from '../../utils/query'
 
 export type FormElements = ReturnType<typeof getFormElements>
 
 export function getFormElements() {
-  function $<T extends HTMLElement>(id: string) {
-    const element = document.getElementById(id)
-    if (!element) {
-      throw new Error(`Cannot find #${id}`)
-    }
-    return element as T
-  }
+  const { $ } = makeQuery(document.body)
 
   return {
-    form: $<HTMLFormElement>(FormId.Form),
-    amountInput: $<HTMLInputElement>(FormId.AmountInput),
-    priceInput: document.getElementById(FormId.PriceInput) as
+    form: $<HTMLFormElement>(`#${FormId.Form}`),
+    amountInput: $<HTMLInputElement>(`#${FormId.AmountInput}`),
+    priceInput: document.getElementById(`#${FormId.PriceInput}`) as
       | HTMLInputElement
       | undefined,
-    totalInput: document.getElementById(FormId.TotalInput) as
+    totalInput: document.getElementById(`#${FormId.TotalInput}`) as
       | HTMLInputElement
       | undefined,
-    submitButton: $<HTMLButtonElement>(FormId.SubmitButton),
-    amountErrorView: $(FormId.AmountErrorView),
+    submitButton: $<HTMLButtonElement>(`#${FormId.SubmitButton}`),
+    amountErrorView: $(`#${FormId.AmountErrorView}`),
   }
 }

packages/frontend/src/scripts/forced-actions/perpetual/offer/acceptForm.ts

@@ -5,14 +5,15 @@ import {
 } from '@explorer/shared'
 import { EthereumAddress } from '@explorer/types'
 
-import { ACCEPT_OFFER_FORM_ID } from '../../../../view/pages/transaction/components/AcceptOfferForm'
+import { ACCEPT_OFFER_FORM_CLASS } from '../../../../view/pages/transaction/components/AcceptOfferForm'
 import { Api } from '../../../peripherals/api'
 import { Wallet } from '../../../peripherals/wallet'
+import { makeQuery } from '../../../utils/query'
 
 export function initAcceptOfferForm() {
-  const forms = document.querySelectorAll<HTMLFormElement>(
-    `.${ACCEPT_OFFER_FORM_ID}`
-  )
+  const { $$ } = makeQuery(document.body)
+
+  const forms = $$<HTMLFormElement>(`.${ACCEPT_OFFER_FORM_CLASS}`)
   forms.forEach((form) => {
     // eslint-disable-next-line @typescript-eslint/no-misused-promises
     form.addEventListener('submit', async (e) => {

packages/frontend/src/scripts/forced-actions/perpetual/offer/cancelForm.ts

@@ -1,13 +1,14 @@
 import { EthereumAddress } from '@explorer/types'
 
-import { CANCEL_OFFER_FORM_ID } from '../../../../view/pages/transaction/components/CancelOfferForm'
+import { CANCEL_OFFER_FORM_CLASS } from '../../../../view/pages/transaction/components/CancelOfferForm'
 import { Api } from '../../../peripherals/api'
 import { Wallet } from '../../../peripherals/wallet'
+import { makeQuery } from '../../../utils/query'
 
 export function initCancelOfferForm() {
-  const form = document.querySelector<HTMLFormElement>(
-    `.${CANCEL_OFFER_FORM_ID}`
-  )
+  const { $ } = makeQuery(document.body)
+
+  const form = $.maybe<HTMLFormElement>(`.${CANCEL_OFFER_FORM_CLASS}`)
   // eslint-disable-next-line @typescript-eslint/no-misused-promises
   form?.addEventListener('submit', async (e) => {
     e.preventDefault()

packages/frontend/src/scripts/forced-actions/perpetual/offer/finalizeForm.ts

@@ -5,14 +5,14 @@ import {
 import { EthereumAddress } from '@explorer/types'
 
 // eslint-disable-next-line no-restricted-imports
-import { FINALIZE_OFFER_FORM_ID } from '../../../../view/pages/transaction/components/FinalizeOfferForm'
+import { FINALIZE_OFFER_FORM_CLASS } from '../../../../view/pages/transaction/components/FinalizeOfferForm'
 import { Api } from '../../../peripherals/api'
 import { Wallet } from '../../../peripherals/wallet'
+import { makeQuery } from '../../../utils/query'
 
 export function initFinalizeForm() {
-  const forms = document.querySelectorAll<HTMLFormElement>(
-    `.${FINALIZE_OFFER_FORM_ID}`
-  )
+  const { $$ } = makeQuery(document.body)
+  const forms = $$<HTMLFormElement>(`.${FINALIZE_OFFER_FORM_CLASS}`)
   forms.forEach((form) => {
     // eslint-disable-next-line @typescript-eslint/no-misused-promises
     form.addEventListener('submit', async (e) => {

packages/frontend/src/scripts/forced-actions/perpetual/perpetualForcedActionForm.ts

@@ -2,13 +2,16 @@ import { CollateralAsset, UserDetails } from '@explorer/shared'
 
 import { FormId } from '../../../view/pages/forced-actions/components/form/ids'
 import { NewForcedActionFormProps } from '../../../view/pages/forced-actions/NewForcedActionFormProps'
+import { makeQuery } from '../../utils/query'
 import { FormElements, getFormElements } from './getFormElements'
 import { getInitialState, nextFormState } from './state'
 import { submit } from './submit'
 import { FormAction, FormState } from './types'
 
 export function initPerpetualForcedActionForm() {
-  if (!document.getElementById(FormId.Form)) {
+  const { $ } = makeQuery(document.body)
+
+  if (!$.maybe(`#${FormId.Form}`)) {
     return
   }
 

packages/frontend/src/scripts/forced-actions/spot/spotForcedWithdrawalForm.ts

@@ -5,9 +5,12 @@ import { SPOT_FORCED_WITHDRAWAL_FORM_ID } from '../../../view'
 import { NewForcedActionFormProps } from '../../../view/pages/forced-actions/NewForcedActionFormProps'
 import { Api } from '../../peripherals/api'
 import { Wallet } from '../../peripherals/wallet'
+import { makeQuery } from '../../utils/query'
 
 export function initSpotForcedWithdrawalForm() {
-  const form = document.getElementById(SPOT_FORCED_WITHDRAWAL_FORM_ID)
+  const { $ } = makeQuery(document.body)
+
+  const form = $.maybe(`#${SPOT_FORCED_WITHDRAWAL_FORM_ID}`)
   if (!form) {
     return
   }

packages/frontend/src/scripts/imageFallback.ts

@@ -1,6 +1,8 @@
+import { makeQuery } from './utils/query'
+
 export function initImageFallback() {
-  const imagesWithFallback =
-    document.querySelectorAll<HTMLImageElement>('img[data-fallback]')
+  const { $$ } = makeQuery(document.body)
+  const imagesWithFallback = $$<HTMLImageElement>('img[data-fallback]')
 
   imagesWithFallback.forEach((image) => {
     image.addEventListener('error', () => {

packages/frontend/src/scripts/keys/starkKeyRecovery.ts

@@ -4,10 +4,13 @@ import Cookie from 'js-cookie'
 
 import { RECOVER_STARK_KEY_BUTTON_ID } from '../../view'
 import { getUsersInfo } from '../metamask'
+import { makeQuery } from '../utils/query'
 import { RecoveredKeys, recoverKeysDydx, recoverKeysMyria } from './recovery'
 
 export function initStarkKeyRecovery() {
-  const registerButton = document.getElementById(RECOVER_STARK_KEY_BUTTON_ID)
+  const { $ } = makeQuery(document.body)
+
+  const registerButton = $.maybe(`#${RECOVER_STARK_KEY_BUTTON_ID}`)
   const cookieAccount = Cookie.get('account')
   const account = cookieAccount ? EthereumAddress(cookieAccount) : undefined
 

packages/frontend/src/scripts/keys/starkKeyRegistration.ts

@@ -4,9 +4,12 @@ import Cookies from 'js-cookie'
 import { REGISTER_STARK_KEY_BUTTON_ID } from '../../view'
 import { getUsersInfo } from '../metamask'
 import { Wallet } from '../peripherals/wallet'
+import { makeQuery } from '../utils/query'
 
 export function initStarkKeyRegistration() {
-  const registerButton = document.getElementById(REGISTER_STARK_KEY_BUTTON_ID)
+  const { $ } = makeQuery(document.body)
+
+  const registerButton = $.maybe(`#${REGISTER_STARK_KEY_BUTTON_ID}`)
 
   if (!registerButton) {
     return

packages/frontend/src/scripts/metamask.ts

@@ -4,6 +4,7 @@ import Cookie from 'js-cookie'
 import { z } from 'zod'
 
 import { Registration } from './keys/keys'
+import { makeQuery } from './utils/query'
 
 type UsersInfo = z.infer<typeof UsersInfo>
 const UsersInfo = z.record(
@@ -22,10 +23,9 @@ export const getUsersInfo = (): UsersInfo => {
 
 export function initMetamask() {
   const provider = window.ethereum
+  const { $ } = makeQuery(document.body)
 
-  const connectButton = document.querySelector<HTMLButtonElement>(
-    '#connect-with-metamask'
-  )
+  const connectButton = $.maybe<HTMLButtonElement>('#connect-with-metamask')
   if (connectButton) {
     connectButton.addEventListener('click', () => {
       if (provider) {

packages/frontend/src/scripts/pagination.ts

@@ -1,7 +1,9 @@
+import { makeQuery } from './utils/query'
+
 export function initPagination() {
-  const forms = document.querySelectorAll<HTMLFormElement>(
-    '[data-component="TableLimitSelect"]'
-  )
+  const { $$ } = makeQuery(document.body)
+  const forms = $$<HTMLFormElement>('[data-component="TableLimitSelect"]')
+
   forms.forEach((form) => {
     const select = form.querySelector('select')
     select?.addEventListener('change', () => form.submit())

packages/frontend/src/scripts/regularWithdrawal.ts

@@ -4,11 +4,11 @@ import { AssetHash, EthereumAddress, StarkKey } from '@explorer/types'
 import { REGULAR_WITHDRAWAL_FORM_ID } from '../view/pages/user/components/RegularWithdrawalForm'
 import { Api } from './peripherals/api'
 import { Wallet } from './peripherals/wallet'
+import { makeQuery } from './utils/query'
 
 export function initRegularWithdrawalForm() {
-  const form = document.querySelector<HTMLFormElement>(
-    `#${REGULAR_WITHDRAWAL_FORM_ID}`
-  )
+  const { $ } = makeQuery(document.body)
+  const form = $.maybe<HTMLFormElement>(`#${REGULAR_WITHDRAWAL_FORM_ID}`)
 
   form?.addEventListener('submit', (e) => {
     e.preventDefault()

packages/frontend/src/scripts/stateUpdateStats.ts

@@ -1,7 +1,9 @@
+import { makeQuery } from './utils/query'
+
 export function initStateUpdateStats() {
-  const components = document.querySelectorAll(
-    '[data-component="StateUpdateStats"]'
-  )
+  const { $$ } = makeQuery(document.body)
+  const components = $$('[data-component="StateUpdateStats"]')
+
   components.forEach((component) => {
     const button = component.querySelector('button')
     const advanced = component.querySelector(

packages/frontend/src/scripts/tooltips.ts

@@ -63,9 +63,7 @@ export function initTooltips() {
   }
 
   window.addEventListener('resize', hide)
-  document
-    .querySelectorAll('.TableView')
-    .forEach((x) => x.addEventListener('scroll', hide))
+  $$('.TableView').forEach((x) => x.addEventListener('scroll', hide))
   document.body.addEventListener('scroll', hide)
   document.body.addEventListener('click', (e) => {
     if (e.currentTarget !== tooltip) {

packages/frontend/src/view/pages/transaction/components/AcceptOfferForm.tsx

@@ -6,7 +6,7 @@ import {
 } from '@explorer/shared'
 import React, { ReactNode } from 'react'
 
-export const ACCEPT_OFFER_FORM_ID = 'accept-offer-form'
+export const ACCEPT_OFFER_FORM_CLASS = 'accept-offer-form'
 
 interface AcceptOfferFormProps extends AcceptOfferFormData {
   children: ReactNode
@@ -31,7 +31,7 @@ export function AcceptOfferForm(props: AcceptOfferFormProps) {
   const collateralAssetJson = serializeCollateralAsset(props.collateralAsset)
   return (
     <form
-      className={ACCEPT_OFFER_FORM_ID}
+      className={ACCEPT_OFFER_FORM_CLASS}
       action={`/offers/${props.id}/accept`}
       method="POST"
       data-offer={createdJson}

packages/frontend/src/view/pages/transaction/components/CancelOfferForm.tsx

@@ -1,7 +1,7 @@
 import { CancelOfferFormData } from '@explorer/shared'
 import React, { ReactNode } from 'react'
 
-export const CANCEL_OFFER_FORM_ID = 'cancel-offer-form'
+export const CANCEL_OFFER_FORM_CLASS = 'cancel-offer-form'
 
 interface CancelOfferFormProps extends CancelOfferFormData {
   children: ReactNode
@@ -10,7 +10,7 @@ interface CancelOfferFormProps extends CancelOfferFormData {
 export function CancelOfferForm(props: CancelOfferFormProps) {
   return (
     <form
-      className={CANCEL_OFFER_FORM_ID}
+      className={CANCEL_OFFER_FORM_CLASS}
       method="POST"
       action={`/offers/${props.offerId}/cancel`}
       data-offer-id={props.offerId.toString()}

packages/frontend/src/view/pages/transaction/components/FinalizeOfferForm.tsx

@@ -5,7 +5,7 @@ import {
 } from '@explorer/shared'
 import React, { ReactNode } from 'react'
 
-export const FINALIZE_OFFER_FORM_ID = 'finalize-offer-form'
+export const FINALIZE_OFFER_FORM_CLASS = 'finalize-offer-form'
 
 interface FinalizeOfferFormProps extends FinalizeOfferFormData {
   children: ReactNode
@@ -18,7 +18,7 @@ export function FinalizeOfferForm(props: FinalizeOfferFormProps) {
   const collateralAssetJson = serializeCollateralAsset(collateralAsset)
   return (
     <form
-      className={FINALIZE_OFFER_FORM_ID}
+      className={FINALIZE_OFFER_FORM_CLASS}
       action="/forced/trades"
       method="POST"
       data-offer-id={offerId.toString()}