Fix problems reported by eslint

dapp/.eslintrc

@@ -17,63 +17,6 @@
     ],
     "react/require-default-props": [0],
   },
-  // FIXME: 
-  // This is temporary solution after changes of the eslint-config version: @thesis-co/eslint-config: "github:thesis/eslint-config#7b9bc8c"
-  // Overrides rules should be fixed file by file.
-  "overrides": [
-    {
-      "files": [
-        "src/components/Header/ConnectWallet.tsx",
-        "src/components/Modals/Support/MissingAccount.tsx",
-        "src/components/Modals/Staking/SignMessage.tsx",
-        "src/hooks/useDepositBTCTransaction.ts",
-        "src/components/shared/Form/FormTokenBalanceInput.tsx"
-      ],
-      "rules": {
-        "@typescript-eslint/no-misused-promises": "off"
-      }
-    }, 
-    {
-      "files": [
-        "src/hooks/useSignMessage.ts"
-      ],
-      "rules": {
-        "@typescript-eslint/no-floating-promises": "off"
-      }
-    },
-    {
-      "files": [
-        "src/theme/*"
-      ],
-      "rules": {
-        "@typescript-eslint/unbound-method": "off"
-      }
-    },
-    {
-      "files": [
-        "src/theme/Alert.ts"
-      ],
-      "rules": {
-        "@typescript-eslint/no-unsafe-member-access": "off"
-      }
-    },
-    {
-      "files": [
-        "src/components/shared/Form/FormTokenBalanceInput.tsx"
-      ],
-      "rules": {
-        "@typescript-eslint/no-unsafe-assignment": "off"
-      }
-    },
-    {
-      "files": [
-        "src/components/shared/TokenAmountForm/index.tsx"
-      ],
-      "rules": {
-        "@typescript-eslint/require-await": "off"
-      }
-    }
-  ],
   "settings": {
     "import/resolver": {
       "alias": {

dapp/src/components/Header/ConnectWallet.tsx

@@ -9,7 +9,7 @@ import {
 import { CurrencyBalance } from "#/components/shared/CurrencyBalance"
 import { TextMd } from "#/components/shared/Typography"
 import { Bitcoin, Ethereum } from "#/static/icons"
-import { truncateAddress } from "#/utils"
+import { truncateAddress, asyncWrapper } from "#/utils"
 
 export type ConnectButtonsProps = {
   leftIcon: typeof Icon
@@ -24,12 +24,16 @@ function ConnectButton({
 }: ConnectButtonsProps) {
   const colorScheme = !account ? "error" : undefined
 
+  const handleClick = () => {
+    asyncWrapper(requestAccount())
+  }
+
   return (
     <Button
       variant="card"
       colorScheme={colorScheme}
       leftIcon={<Icon as={leftIcon} boxSize={6} />}
-      onClick={requestAccount}
+      onClick={handleClick}
     >
       {account ? truncateAddress(account.address) : "Not connected"}
     </Button>

dapp/src/components/Modals/Staking/SignMessage.tsx

@@ -3,14 +3,19 @@ import { Highlight } from "@chakra-ui/react"
 import { useModalFlowContext, useSignMessage } from "#/hooks"
 import Alert from "#/components/shared/Alert"
 import { TextMd } from "#/components/shared/Typography"
+import { asyncWrapper } from "#/utils"
 import StakingSteps from "./components/StakingSteps"
 
 export default function SignMessage() {
   const { goNext } = useModalFlowContext()
   const { signMessage } = useSignMessage(goNext)
 
+  const handleClick = () => {
+    asyncWrapper(signMessage())
+  }
+
   return (
-    <StakingSteps buttonText="Continue" activeStep={0} onClick={signMessage}>
+    <StakingSteps buttonText="Continue" activeStep={0} onClick={handleClick}>
       {/* TODO: Add the correct action after click */}
       <Alert withActionIcon onclick={() => {}}>
         <TextMd>

dapp/src/components/Modals/Support/MissingAccount.tsx

@@ -9,7 +9,7 @@ import {
 } from "@chakra-ui/react"
 import { TextMd } from "#/components/shared/Typography"
 import Alert from "#/components/shared/Alert"
-import { getCurrencyByType } from "#/utils"
+import { asyncWrapper, getCurrencyByType } from "#/utils"
 import { CurrencyType, RequestAccountParams } from "#/types"
 
 type MissingAccountProps = {
@@ -25,6 +25,10 @@ export default function MissingAccount({
 }: MissingAccountProps) {
   const { name, symbol } = getCurrencyByType(currency)
 
+  const handleClick = () => {
+    asyncWrapper(requestAccount())
+  }
+
   return (
     <>
       <ModalHeader>{name} account not installed</ModalHeader>
@@ -44,13 +48,7 @@ export default function MissingAccount({
         </Alert>
       </ModalBody>
       <ModalFooter mt={4}>
-        <Button
-          size="lg"
-          width="100%"
-          onClick={async () => {
-            await requestAccount()
-          }}
-        >
+        <Button size="lg" width="100%" onClick={handleClick}>
           Connect wallet
         </Button>
       </ModalFooter>

dapp/src/components/shared/Form/FormTokenBalanceInput.tsx

@@ -1,5 +1,6 @@
 import React from "react"
 import { useField } from "formik"
+import { asyncWrapper } from "#/utils"
 import TokenBalanceInput, { TokenBalanceInputProps } from "../TokenBalanceInput"
 
 export type FormTokenBalanceInputProps = {
@@ -11,12 +12,16 @@ export function FormTokenBalanceInput({
 }: FormTokenBalanceInputProps) {
   const [field, meta, helpers] = useField(name)
 
+  const setAmount = (value?: bigint) => {
+    asyncWrapper(helpers.setValue(value))
+  }
+
   return (
     <TokenBalanceInput
       {...restProps}
       {...field}
-      amount={meta.value}
-      setAmount={helpers.setValue}
+      amount={meta.value as bigint}
+      setAmount={setAmount}
       hasError={Boolean(meta.touched && meta.error)}
       errorMsgText={meta.error}
     />

dapp/src/components/shared/TokenAmountForm/index.tsx

@@ -15,10 +15,7 @@ const TokenAmountForm = withFormik<TokenAmountFormProps, TokenAmountFormValues>(
     mapPropsToValues: () => ({
       amount: undefined,
     }),
-    validate: async (
-      { amount },
-      { tokenBalance, currency, minTokenAmount },
-    ) => {
+    validate: ({ amount }, { tokenBalance, currency, minTokenAmount }) => {
       const errors: FormikErrors<TokenAmountFormValues> = {}
 
       errors.amount = validateTokenAmount(

dapp/src/theme/Alert.ts

@@ -8,9 +8,6 @@ import {
 
 const KEYS = [...parts.keys, "rightIconContainer"] as const
 
-const { defineMultiStyleConfig, definePartsStyle } =
-  createMultiStyleConfigHelpers(KEYS)
-
 const baseStyleDialog = defineStyle({
   py: 5,
   pl: 5,
@@ -39,13 +36,15 @@ const baseStyleRightIconContainer = defineStyle({
   w: 14,
 })
 
-const baseStyle = definePartsStyle({
+const multiStyleConfig = createMultiStyleConfigHelpers(KEYS)
+
+const baseStyle = multiStyleConfig.definePartsStyle({
   container: baseStyleDialog,
   icon: baseStyleIcon,
   rightIconContainer: baseStyleRightIconContainer,
 })
 
-const statusInfo = definePartsStyle({
+const statusInfo = multiStyleConfig.definePartsStyle({
   container: {
     bg: "gold.200",
   },
@@ -63,13 +62,18 @@ const statusStyles = (props: StyleFunctionProps) => {
     info: statusInfo,
   }
 
-  return styleMap[status] || {}
+  return styleMap[status as string] || {}
 }
 
-const variantSubtle = definePartsStyle((props) => statusStyles(props))
+const variantSubtle = multiStyleConfig.definePartsStyle((props) =>
+  statusStyles(props),
+)
 
 const variants = {
   subtle: variantSubtle,
 }
 
-export const alertTheme = defineMultiStyleConfig({ baseStyle, variants })
+export const alertTheme = multiStyleConfig.defineMultiStyleConfig({
+  baseStyle,
+  variants,
+})

dapp/src/theme/CurrencyBalance.ts

@@ -2,9 +2,6 @@ import { createMultiStyleConfigHelpers, defineStyle } from "@chakra-ui/react"
 
 const PARTS = ["balance", "symbol"]
 
-const { defineMultiStyleConfig, definePartsStyle } =
-  createMultiStyleConfigHelpers(PARTS)
-
 const baseStyleBalance = defineStyle({
   fontWeight: "bold",
   fontSize: "md",
@@ -18,12 +15,14 @@ const baseStyleSymbol = defineStyle({
   lineHeight: "md",
 })
 
-const baseStyle = definePartsStyle({
+const multiStyleConfig = createMultiStyleConfigHelpers(PARTS)
+
+const baseStyle = multiStyleConfig.definePartsStyle({
   balance: baseStyleBalance,
   symbol: baseStyleSymbol,
 })
 
-const variantGreaterBalance = definePartsStyle({
+const variantGreaterBalance = multiStyleConfig.definePartsStyle({
   balance: {
     fontSize: "4xl",
     lineHeight: "4xl",
@@ -38,7 +37,7 @@ const variants = {
   "greater-balance": variantGreaterBalance,
 }
 
-const sizeXs = definePartsStyle({
+const sizeXs = multiStyleConfig.definePartsStyle({
   balance: {
     fontSize: "xs",
     lineHeight: "xs",
@@ -49,7 +48,7 @@ const sizeXs = definePartsStyle({
   },
 })
 
-const sizeSm = definePartsStyle({
+const sizeSm = multiStyleConfig.definePartsStyle({
   balance: {
     fontSize: "sm",
     lineHeight: "sm",
@@ -60,7 +59,7 @@ const sizeSm = definePartsStyle({
   },
 })
 
-const sizeMd = definePartsStyle({
+const sizeMd = multiStyleConfig.definePartsStyle({
   balance: {
     fontSize: "md",
     lineHeight: "md",
@@ -71,7 +70,7 @@ const sizeMd = definePartsStyle({
   },
 })
 
-const sizeLg = definePartsStyle({
+const sizeLg = multiStyleConfig.definePartsStyle({
   balance: {
     fontSize: "lg",
     lineHeight: "lg",
@@ -82,7 +81,7 @@ const sizeLg = definePartsStyle({
   },
 })
 
-const sizeXl = definePartsStyle({
+const sizeXl = multiStyleConfig.definePartsStyle({
   balance: {
     fontSize: "xl",
     lineHeight: "xl",
@@ -101,7 +100,7 @@ const sizes = {
   xl: sizeXl,
 }
 
-export const currencyBalanceTheme = defineMultiStyleConfig({
+export const currencyBalanceTheme = multiStyleConfig.defineMultiStyleConfig({
   baseStyle,
   variants,
   sizes,

dapp/src/theme/Drawer.ts

@@ -1,9 +1,6 @@
 import { drawerAnatomy as parts } from "@chakra-ui/anatomy"
 import { createMultiStyleConfigHelpers, defineStyle } from "@chakra-ui/react"
 
-const { defineMultiStyleConfig, definePartsStyle } =
-  createMultiStyleConfigHelpers(parts.keys)
-
 const baseStyleDialogContainer = defineStyle({
   zIndex: "drawer",
 })
@@ -23,10 +20,14 @@ const baseStyleOverlay = defineStyle({
   backdropBlur: "8px",
 })
 
-const baseStyle = definePartsStyle({
+const multiStyleConfig = createMultiStyleConfigHelpers(parts.keys)
+
+const baseStyle = multiStyleConfig.definePartsStyle({
   dialogContainer: baseStyleDialogContainer,
   dialog: baseStyleDialog,
   overlay: baseStyleOverlay,
 })
 
-export const drawerTheme = defineMultiStyleConfig({ baseStyle })
+export const drawerTheme = multiStyleConfig.defineMultiStyleConfig({
+  baseStyle,
+})

dapp/src/theme/Form.ts

@@ -1,9 +1,6 @@
 import { formAnatomy as parts } from "@chakra-ui/anatomy"
 import { createMultiStyleConfigHelpers, defineStyle } from "@chakra-ui/react"
 
-const { defineMultiStyleConfig, definePartsStyle } =
-  createMultiStyleConfigHelpers(parts.keys)
-
 const baseStyleHelperText = defineStyle({
   display: "flex",
   alignItems: "center",
@@ -12,8 +9,10 @@ const baseStyleHelperText = defineStyle({
   color: "grey.500",
 })
 
-const baseStyle = definePartsStyle({
+const multiStyleConfig = createMultiStyleConfigHelpers(parts.keys)
+
+const baseStyle = multiStyleConfig.definePartsStyle({
   helperText: baseStyleHelperText,
 })
 
-export const formTheme = defineMultiStyleConfig({ baseStyle })
+export const formTheme = multiStyleConfig.defineMultiStyleConfig({ baseStyle })

dapp/src/theme/FormError.ts

@@ -2,16 +2,17 @@ import { defineStyle, createMultiStyleConfigHelpers } from "@chakra-ui/react"
 
 import { formErrorAnatomy as parts } from "@chakra-ui/anatomy"
 
-const { defineMultiStyleConfig, definePartsStyle } =
-  createMultiStyleConfigHelpers(parts.keys)
-
 const baseStyleText = defineStyle({
   fontWeight: "medium",
   color: "red.400",
 })
 
-const baseStyle = definePartsStyle({
+const multiStyleConfig = createMultiStyleConfigHelpers(parts.keys)
+
+const baseStyle = multiStyleConfig.definePartsStyle({
   text: baseStyleText,
 })
 
-export const formErrorTheme = defineMultiStyleConfig({ baseStyle })
+export const formErrorTheme = multiStyleConfig.defineMultiStyleConfig({
+  baseStyle,
+})