Merge remote-tracking branch 'origin' into staking-fees

dapp/.eslintrc

@@ -15,6 +15,73 @@
       2,
       { "allowRequiredDefaults": true }
     ],
-    "react/require-default-props": [0]
+    "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": {
+        "map": [
+          ["#", "./src"]
+        ],
+        "extensions": [".js", ".jsx",".ts", ".tsx"]
+      }
+    }
   }
 }

dapp/package.json

@@ -20,20 +20,23 @@
     "@emotion/styled": "^11.11.0",
     "@ledgerhq/wallet-api-client": "^1.5.0",
     "@ledgerhq/wallet-api-client-react": "^1.3.0",
+    "@tanstack/react-table": "^8.11.3",
     "formik": "^2.4.5",
     "framer-motion": "^10.16.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-number-format": "^5.3.1"
   },
   "devDependencies": {
-    "@thesis-co/eslint-config": "^0.6.1",
+    "@thesis-co/eslint-config": "github:thesis/eslint-config#7b9bc8c",
     "@types/react": "^18.2.38",
     "@types/react-dom": "^18.2.17",
     "@typescript-eslint/eslint-plugin": "^6.12.0",
     "@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
 
@@ -20,9 +20,9 @@ function ActionForm({ action }: { action: Action }) {
   return (
     <ModalBody>
       <Tabs w="100%" variant="underline" defaultIndex={TABS.indexOf(action)}>
-        <TabList>
+        <TabList pb={6}>
           {TABS.map((tab) => (
-            <Tab key={tab} w="50%">
+            <Tab key={tab} w="50%" pb={4}>
               {tab}
             </Tab>
           ))}

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,12 +1,40 @@
 import React from "react"
-import { CardBody, Card, CardProps } from "@chakra-ui/react"
-import { TextMd } from "../shared/Typography"
+import {
+  CardBody,
+  Card,
+  CardProps,
+  Tabs,
+  TabList,
+  Tab,
+  TabPanels,
+  TabPanel,
+} from "@chakra-ui/react"
+import { useWalletContext } from "#/hooks"
+import ProtocolHistory from "../TransactionHistory/Protocol"
+import AccountHistory from "../TransactionHistory/Account"
 
 export default function TransactionHistory(props: CardProps) {
+  const { isConnected } = useWalletContext()
+
   return (
     <Card {...props}>
       <CardBody>
-        <TextMd>Transaction history</TextMd>
+        <Tabs variant="underline">
+          <TabList>
+            {isConnected && <Tab>Account history</Tab>}
+            <Tab>Protocol history</Tab>
+          </TabList>
+          <TabPanels>
+            {isConnected && (
+              <TabPanel>
+                <AccountHistory />
+              </TabPanel>
+            )}
+            <TabPanel>
+              <ProtocolHistory />
+            </TabPanel>
+          </TabPanels>
+        </Tabs>
       </CardBody>
     </Card>
   )

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()
@@ -31,8 +31,8 @@ export default function Overview() {
         templateAreas={`"position-details statistics"
                         "transaction-history transaction-history"`}
         gridTemplateColumns={{ base: "30% 1fr", xl: "20% 1fr" }}
-        gridTemplateRows={{ base: "55% 1fr", xl: "40% 1fr" }}
-        h="75vh"
+        gridTemplateRows={{ base: "55% 1fr", xl: "45% 1fr" }}
+        h="80vh"
         gap={4}
       >
         <PositionDetails gridArea="position-details" />