Vite config: import aliases, eslint config (#142)

Closes: #140 

Added `@~` prefix to local aliases. Thanks to this, we distinguish local
files from external packages.

dapp/.eslintrc

@@ -16,5 +16,15 @@
       { "allowRequiredDefaults": true }
     ],
     "react/require-default-props": [0]
+  },
+  "settings": {
+    "import/resolver": {
+      "alias": {
+        "map": [
+          ["#", "./src"]
+        ],
+        "extensions": [".js", ".jsx",".ts", ".tsx"]
+      }
+    }
   }
 }

dapp/package.json

@@ -34,6 +34,8 @@
     "@typescript-eslint/parser": "^6.12.0",
     "@vitejs/plugin-react": "^4.2.0",
     "eslint": "^8.54.0",
+    "eslint-import-resolver-alias": "^1.1.2",
+    "eslint-plugin-import": "^2.29.1",
     "prettier": "^3.1.0",
     "typescript": "^5.3.2",
     "vite": "^5.0.2",

dapp/src/components/DocsDrawer/index.tsx

@@ -5,8 +5,8 @@ import {
   DrawerContent,
   DrawerOverlay,
 } from "@chakra-ui/react"
-import { useDocsDrawer } from "../../hooks"
-import { TextMd } from "../shared/Typography"
+import { useDocsDrawer } from "#/hooks"
+import { TextMd } from "#/components/shared/Typography"
 
 export default function DocsDrawer() {
   const { isOpen, onClose } = useDocsDrawer()

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 "#/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"
 
 export default function GlobalStyles() {
   return (

dapp/src/components/Header/ConnectWallet.tsx

@@ -1,15 +1,15 @@
 import React from "react"
 import { Button, HStack, Icon } from "@chakra-ui/react"
 import { Account } from "@ledgerhq/wallet-api-client"
-import { Bitcoin, Ethereum } from "../../static/icons"
 import {
   useRequestBitcoinAccount,
   useRequestEthereumAccount,
   useWalletContext,
-} from "../../hooks"
-import { truncateAddress } from "../../utils"
-import { CurrencyBalance } from "../shared/CurrencyBalance"
-import { TextMd } from "../shared/Typography"
+} from "#/hooks"
+import { CurrencyBalance } from "#/components/shared/CurrencyBalance"
+import { TextMd } from "#/components/shared/Typography"
+import { Bitcoin, Ethereum } from "#/static/icons"
+import { truncateAddress } from "#/utils"
 
 export type ConnectButtonsProps = {
   leftIcon: typeof Icon

dapp/src/components/Header/index.tsx

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

dapp/src/components/Modals/ActionForm/index.tsx

@@ -7,8 +7,8 @@ import {
   TabPanels,
   TabPanel,
 } from "@chakra-ui/react"
+import { useModalFlowContext } from "#/hooks"
 import StakeForm from "../Staking/StakeForm"
-import { useModalFlowContext } from "../../../hooks"
 
 const TABS = ["stake", "unstake"] as const
 

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

@@ -1,7 +1,7 @@
 import React from "react"
-import Alert from "../../shared/Alert"
-import { useDepositBTCTransaction, useModalFlowContext } from "../../../hooks"
-import { TextMd } from "../../shared/Typography"
+import { useDepositBTCTransaction, useModalFlowContext } from "#/hooks"
+import Alert from "#/components/shared/Alert"
+import { TextMd } from "#/components/shared/Typography"
 import StakingSteps from "./components/StakingSteps"
 
 export default function DepositBTC() {

dapp/src/components/Modals/Staking/Overview/index.tsx

@@ -6,8 +6,8 @@ import {
   ModalHeader,
   StepNumber,
 } from "@chakra-ui/react"
-import { useModalFlowContext } from "../../../../hooks"
-import StepperBase from "../../../shared/StepperBase"
+import StepperBase from "#/components/shared/StepperBase"
+import { useModalFlowContext } from "#/hooks"
 import { STEPS } from "./steps"
 
 export default function Overview() {

dapp/src/components/Modals/Staking/Overview/steps.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { StepBase } from "../../../shared/StepperBase"
+import { StepBase } from "#/components/shared/StepperBase"
 import { Description, Title } from "../components/StakingSteps"
 
 export const STEPS: StepBase[] = [

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

@@ -1,8 +1,8 @@
 import React from "react"
 import { Highlight } from "@chakra-ui/react"
-import Alert from "../../shared/Alert"
-import { useModalFlowContext, useSignMessage } from "../../../hooks"
-import { TextMd } from "../../shared/Typography"
+import { useModalFlowContext, useSignMessage } from "#/hooks"
+import Alert from "#/components/shared/Alert"
+import { TextMd } from "#/components/shared/Typography"
 import StakingSteps from "./components/StakingSteps"
 
 export default function SignMessage() {

dapp/src/components/Modals/Staking/StakeForm/Details.tsx

@@ -1,9 +1,9 @@
 import React from "react"
 import { List } from "@chakra-ui/react"
-import { useTransactionDetails } from "../../../../hooks"
-import TransactionDetailsAmountItem from "../../../shared/TransactionDetails/AmountItem"
-import { CurrencyType } from "../../../../types"
-import { useTokenAmountFormValue } from "../../../shared/TokenAmountForm/TokenAmountFormBase"
+import TransactionDetailsAmountItem from "#/components/shared/TransactionDetails/AmountItem"
+import { useTokenAmountFormValue } from "#/components/shared/TokenAmountForm/TokenAmountFormBase"
+import { useTransactionDetails } from "#/hooks"
+import { CurrencyType } from "#/types"
 
 function Details({ currency }: { currency: CurrencyType }) {
   const value = useTokenAmountFormValue()

dapp/src/components/Modals/Staking/StakeForm/index.tsx

@@ -1,10 +1,10 @@
 import React, { useCallback } from "react"
 import { Button } from "@chakra-ui/react"
-import { BITCOIN_MIN_AMOUNT } from "../../../../constants"
-import { ModalStep } from "../../../../contexts"
-import { useWalletContext, useTransactionContext } from "../../../../hooks"
-import TokenAmountForm from "../../../shared/TokenAmountForm"
-import { TokenAmountFormValues } from "../../../shared/TokenAmountForm/TokenAmountFormBase"
+import { BITCOIN_MIN_AMOUNT } from "#/constants"
+import { ModalStep } from "#/contexts"
+import TokenAmountForm from "#/components/shared/TokenAmountForm"
+import { TokenAmountFormValues } from "#/components/shared/TokenAmountForm/TokenAmountFormBase"
+import { useWalletContext, useTransactionContext } from "#/hooks"
 import Details from "./Details"
 
 function StakeForm({ goNext }: ModalStep) {

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

@@ -6,9 +6,9 @@ import {
   ModalFooter,
   ModalHeader,
 } from "@chakra-ui/react"
-import { TextLg, TextMd } from "../../../shared/Typography"
-import StepperBase, { StepBase } from "../../../shared/StepperBase"
-import Spinner from "../../../shared/Spinner"
+import { TextLg, TextMd } from "#/components/shared/Typography"
+import StepperBase, { StepBase } from "#/components/shared/StepperBase"
+import Spinner from "#/components/shared/Spinner"
 
 export function Title({ children }: { children: React.ReactNode }) {
   return <TextLg fontWeight="bold">{children}</TextLg>

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

@@ -1,7 +1,7 @@
 import React from "react"
-import { useModalFlowContext } from "../../../hooks"
+import { useModalFlowContext } from "#/hooks"
+import ModalBase from "#/components/shared/ModalBase"
 import Overview from "./Overview"
-import ModalBase from "../../shared/ModalBase"
 import ActionForm from "../ActionForm"
 import SignMessage from "./SignMessage"
 import DepositBTC from "./DepositBTC"

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

@@ -7,10 +7,10 @@ import {
   ModalFooter,
   ModalHeader,
 } from "@chakra-ui/react"
-import { CurrencyType, RequestAccountParams } from "../../../types"
-import { TextMd } from "../../shared/Typography"
-import Alert from "../../shared/Alert"
-import { getCurrencyByType } from "../../../utils"
+import { TextMd } from "#/components/shared/Typography"
+import Alert from "#/components/shared/Alert"
+import { getCurrencyByType } from "#/utils"
+import { CurrencyType, RequestAccountParams } from "#/types"
 
 type MissingAccountProps = {
   currency: CurrencyType

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

@@ -3,9 +3,9 @@ import {
   useRequestBitcoinAccount,
   useRequestEthereumAccount,
   useWalletContext,
-} from "../../../hooks"
+} from "#/hooks"
+import { ConnectBTCAccount, ConnectETHAccount } from "#/static/icons"
 import MissingAccount from "./MissingAccount"
-import { ConnectBTCAccount, ConnectETHAccount } from "../../../static/icons"
 
 export default function SupportWrapper({
   children,

dapp/src/components/Overview/PositionDetails.tsx

@@ -10,10 +10,10 @@ import {
   CardProps,
   useBoolean,
 } from "@chakra-ui/react"
-import { Info } from "../../static/icons"
+import { CurrencyBalanceWithConversion } from "#/components/shared/CurrencyBalanceWithConversion"
+import { TextMd } from "#/components/shared/Typography"
+import { Info } from "#/static/icons"
 import StakingModal from "../Modals/Staking"
-import { CurrencyBalanceWithConversion } from "../shared/CurrencyBalanceWithConversion"
-import { TextMd } from "../shared/Typography"
 
 export default function PositionDetails(props: CardProps) {
   const [isOpenStakingModal, stakingModal] = useBoolean()

dapp/src/components/Overview/Statistics.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import { CardBody, Card, CardProps } from "@chakra-ui/react"
-import { TextMd } from "../shared/Typography"
+import { TextMd } from "#/components/shared/Typography"
 
 export default function Statistics(props: CardProps) {
   return (

dapp/src/components/Overview/TransactionHistory.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import { CardBody, Card, CardProps } from "@chakra-ui/react"
-import { TextMd } from "../shared/Typography"
+import { TextMd } from "#/components/shared/Typography"
 
 export default function TransactionHistory(props: CardProps) {
   return (

dapp/src/components/Overview/index.tsx

@@ -1,12 +1,12 @@
 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 { USD } from "#/constants"
 import PositionDetails from "./PositionDetails"
 import Statistics from "./Statistics"
 import TransactionHistory from "./TransactionHistory"
-import { USD } from "../../constants"
-import { ArrowUpRight } from "../../static/icons"
-import { TextSm } from "../shared/Typography"
-import { useDocsDrawer } from "../../hooks"
 
 export default function Overview() {
   const { onOpen } = useDocsDrawer()

dapp/src/components/Sidebar/index.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import { Box, Button, useMultiStyleConfig } from "@chakra-ui/react"
-import { useDocsDrawer, useSidebar } from "../../hooks"
+import { useDocsDrawer, useSidebar } from "#/hooks"
 
 export default function Sidebar() {
   const { isOpen } = useSidebar()

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 "#/static/icons"
 
 const ICONS = {
   info: AlertInfo,

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

@@ -4,8 +4,8 @@ import {
   formatTokenAmount,
   getCurrencyByType,
   numberToLocaleString,
-} from "../../../utils"
-import { CurrencyType } from "../../../types"
+} from "#/utils"
+import { CurrencyType } from "#/types"
 
 export type CurrencyBalanceProps = {
   currency: CurrencyType

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

@@ -5,13 +5,13 @@ import {
   ModalContent,
   ModalOverlay,
 } from "@chakra-ui/react"
+import { useSidebar } from "#/hooks"
 import {
   ModalFlowContext,
   ModalFlowContextValue,
   TransactionContextProvider,
-} from "../../../contexts"
-import { useSidebar } from "../../../hooks"
-import SupportWrapper from "../../Modals/Support"
+} from "#/contexts"
+import SupportWrapper from "#/components/Modals/Support"
 
 export default function ModalBase({
   isOpen,

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

@@ -1,7 +1,7 @@
 import React from "react"
 import { FormikProps, useField } from "formik"
+import { CurrencyType } from "#/types"
 import { Form, FormTokenBalanceInput } from "../Form"
-import { CurrencyType } from "../../../types"
 
 const TOKEN_AMOUNT_FIELD_NAME = "amount"
 

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

@@ -1,5 +1,5 @@
 import { FormikErrors, withFormik } from "formik"
-import { getErrorsObj, validateTokenAmount } from "../../../utils"
+import { getErrorsObj, validateTokenAmount } from "#/utils"
 import TokenAmountFormBase, {
   TokenAmountFormBaseProps,
   TokenAmountFormValues,

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

@@ -16,13 +16,13 @@ import {
   fixedPointNumberToString,
   getCurrencyByType,
   userAmountToBigInt,
-} from "../../../utils"
-import { CurrencyType } from "../../../types"
+} from "#/utils"
+import { AlertInfo } from "#/static/icons"
+import { CurrencyType } from "#/types"
 import NumberFormatInput, {
   NumberFormatInputValues,
 } from "../NumberFormatInput"
 import { CurrencyBalance } from "../CurrencyBalance"
-import { AlertInfo } from "../../../static/icons"
 
 const VARIANT = "balance"
 

dapp/src/constants/currency.ts

@@ -1,4 +1,4 @@
-import { Currency, CurrencyType } from "../types"
+import { Currency, CurrencyType } from "#/types"
 
 export const BITCOIN: Currency = {
   name: "Bitcoin",

dapp/src/contexts/TransactionContext.tsx

@@ -1,5 +1,5 @@
 import React, { createContext, useMemo, useState } from "react"
-import { TokenAmount } from "../types"
+import { TokenAmount } from "#/types"
 
 type TransactionContextValue = {
   tokenAmount?: TokenAmount

dapp/src/hooks/useDepositBTCTransaction.ts

@@ -1,5 +1,5 @@
 import { useCallback } from "react"
-import { OnSuccessCallback } from "../types"
+import { OnSuccessCallback } from "#/types"
 
 export function useDepositBTCTransaction(onSuccess?: OnSuccessCallback) {
   // TODO: sending transactions using the SDK

dapp/src/hooks/useDocsDrawer.ts

@@ -1,5 +1,5 @@
 import { useContext } from "react"
-import { DocsDrawerContext } from "../contexts"
+import { DocsDrawerContext } from "#/contexts"
 
 export function useDocsDrawer() {
   const context = useContext(DocsDrawerContext)

dapp/src/hooks/useModalFlowContext.ts

@@ -1,5 +1,5 @@
 import { useContext } from "react"
-import { ModalFlowContext } from "../contexts"
+import { ModalFlowContext } from "#/contexts"
 
 export function useModalFlowContext() {
   const context = useContext(ModalFlowContext)

dapp/src/hooks/useRequestBitcoinAccount.ts

@@ -1,8 +1,8 @@
 import { useRequestAccount } from "@ledgerhq/wallet-api-client-react"
 import { useCallback, useContext, useEffect } from "react"
-import { CURRENCY_ID_BITCOIN } from "../constants"
-import { UseRequestAccountReturn } from "../types"
-import { WalletContext } from "../contexts"
+import { WalletContext } from "#/contexts"
+import { UseRequestAccountReturn } from "#/types"
+import { CURRENCY_ID_BITCOIN } from "#/constants"
 
 export function useRequestBitcoinAccount(): UseRequestAccountReturn {
   const { setBtcAccount } = useContext(WalletContext)

dapp/src/hooks/useRequestEthereumAccount.ts

@@ -1,8 +1,8 @@
 import { useRequestAccount } from "@ledgerhq/wallet-api-client-react"
 import { useCallback, useContext, useEffect } from "react"
-import { CURRENCY_ID_ETHEREUM } from "../constants"
-import { UseRequestAccountReturn } from "../types"
-import { WalletContext } from "../contexts"
+import { WalletContext } from "#/contexts"
+import { UseRequestAccountReturn } from "#/types"
+import { CURRENCY_ID_ETHEREUM } from "#/constants"
 
 export function useRequestEthereumAccount(): UseRequestAccountReturn {
   const { setEthAccount } = useContext(WalletContext)