Merge branch 'main' of github.com:thesis/acre into custom-cells

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/GlobalStyles/index.tsx

@@ -1,11 +1,11 @@
 import React from "react"
 import { Global } from "@emotion/react"
 
-import SegmentRegular from "#/fonts/Segment-Regular.otf"
-import SegmentMedium from "#/fonts/Segment-Medium.otf"
-import SegmentSemiBold from "#/fonts/Segment-SemiBold.otf"
-import SegmentBold from "#/fonts/Segment-Bold.otf"
-import SegmentBlack from "#/fonts/Segment-Black.otf"
+import SegmentRegular from "#/assets/fonts/Segment-Regular.otf"
+import SegmentMedium from "#/assets/fonts/Segment-Medium.otf"
+import SegmentSemiBold from "#/assets/fonts/Segment-SemiBold.otf"
+import SegmentBold from "#/assets/fonts/Segment-Bold.otf"
+import SegmentBlack from "#/assets/fonts/Segment-Black.otf"
 
 export default function GlobalStyles() {
   return (

dapp/src/components/Header/ConnectWallet.tsx

@@ -8,8 +8,8 @@ import {
 } from "#/hooks"
 import { CurrencyBalance } from "#/components/shared/CurrencyBalance"
 import { TextMd } from "#/components/shared/Typography"
-import { Bitcoin, Ethereum } from "#/static/icons"
-import { truncateAddress } from "#/utils"
+import { Bitcoin, Ethereum } from "#/assets/icons"
+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/Header/index.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import { Flex, HStack, Icon } from "@chakra-ui/react"
-import { AcreLogo } from "#/static/icons"
+import { AcreLogo } from "#/assets/icons"
 import ConnectWallet from "./ConnectWallet"
 
 export default function Header() {

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/Modals/Support/index.tsx

@@ -4,7 +4,7 @@ import {
   useRequestEthereumAccount,
   useWalletContext,
 } from "#/hooks"
-import { ConnectBTCAccount, ConnectETHAccount } from "#/static/icons"
+import { ConnectBTCAccount, ConnectETHAccount } from "#/assets/icons"
 import MissingAccount from "./MissingAccount"
 
 export default function SupportWrapper({

dapp/src/components/Overview/PositionDetails.tsx

@@ -12,7 +12,7 @@ import {
 } from "@chakra-ui/react"
 import { CurrencyBalanceWithConversion } from "#/components/shared/CurrencyBalanceWithConversion"
 import { TextMd } from "#/components/shared/Typography"
-import { Info } from "#/static/icons"
+import { Info } from "#/assets/icons"
 import StakingModal from "../Modals/Staking"
 
 export default function PositionDetails(props: CardProps) {

dapp/src/components/Overview/index.tsx

@@ -2,7 +2,7 @@ import React from "react"
 import { Button, Flex, Grid, HStack, Icon, Switch } from "@chakra-ui/react"
 import { useDocsDrawer } from "#/hooks"
 import { TextSm } from "#/components/shared/Typography"
-import { ArrowUpRight } from "#/static/icons"
+import { ArrowUpRight } from "#/assets/icons"
 import { USD } from "#/constants"
 import PositionDetails from "./PositionDetails"
 import Statistics from "./Statistics"

dapp/src/components/Sidebar/index.tsx

@@ -13,7 +13,7 @@ import {
 } from "@chakra-ui/react"
 import RightSidebar from "#/assets/images/right-sidebar-bg.png"
 import { useSidebar, useDocsDrawer } from "#/hooks"
-import { ShieldPlusIcon } from "#/static/icons"
+import { ShieldPlusIcon } from "#/assets/icons"
 import { TextMd, TextSm } from "../shared/Typography"
 import ButtonLink from "../shared/ButtonLink"
 

dapp/src/components/TransactionHistory/Table/utils/pagination.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import { UseTransactionHistoryTableResult } from "#/types"
-import { ArrowLeft, ArrowRight } from "#/static/icons"
+import { ArrowLeft, ArrowRight } from "#/assets/icons"
 
 export const PAGINATION_BUTTONS = [
   {

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

@@ -7,7 +7,7 @@ import {
   Icon,
   useMultiStyleConfig,
 } from "@chakra-ui/react"
-import { AlertInfo, ArrowUpRight } from "#/static/icons"
+import { AlertInfo, ArrowUpRight } from "#/assets/icons"
 
 const ICONS = {
   info: AlertInfo,

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

@@ -1,6 +1,6 @@
 import React from "react"
 import { Button, ButtonProps, Icon } from "@chakra-ui/react"
-import { ArrowUpRight } from "#/static/icons"
+import { ArrowUpRight } from "#/assets/icons"
 
 type ButtonLinkProps = ButtonProps & {
   icon?: typeof Icon

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

@@ -1,7 +1,7 @@
 import React from "react"
 import { Box, Icon, useMultiStyleConfig } from "@chakra-ui/react"
 import { CurrencyType } from "#/types"
-import { BTC, stBTC } from "#/static/icons"
+import { BTC, stBTC } from "#/assets/icons"
 import { getCurrencyByType } from "#/utils"
 
 const ICONS: Partial<Record<CurrencyType, typeof Icon>> = {

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/StatusInfo/index.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { TransactionInfoStatus } from "#/types"
 import { Box, Icon, TextProps, useMultiStyleConfig } from "@chakra-ui/react"
-import { Complete, Pending, Syncing } from "#/static/icons"
+import { Complete, Pending, Syncing } from "#/assets/icons"
 
 const DATA: Record<
   TransactionInfoStatus,

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/components/shared/TokenBalanceInput/index.tsx

@@ -17,7 +17,7 @@ import {
   getCurrencyByType,
   userAmountToBigInt,
 } from "#/utils"
-import { AlertInfo } from "#/static/icons"
+import { AlertInfo } from "#/assets/icons"
 import { CurrencyType } from "#/types"
 import NumberFormatInput, {
   NumberFormatInputValues,

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,
+})