Merge branch 'main' into tbtc-api-retries

dapp/.env → dapp/.env.example

@@ -1,34 +1,32 @@
+# Network
 VITE_USE_TESTNET=true
 
-# Configuration of sentry.io
-VITE_SENTRY_SUPPORT=false
-# TODO: Sentry DSN will be added during the application building process when it is ready
-VITE_SENTRY_DSN=""
-
-# TODO: Use a more general source
-VITE_ETH_HOSTNAME_HTTP="https://sepolia.infura.io/v3/c80e8ccdcc4c4a809bce4fc165310617"
+# Basic UI settings
 VITE_REFERRAL=0
 
-# ENDPOINTS
-VITE_TBTC_API_ENDPOINT=""
+# Endpoints
+VITE_ETH_HOSTNAME_HTTP=""
 VITE_ACRE_API_ENDPOINT="http://localhost:8788/api/v1/"
+VITE_TBTC_API_ENDPOINT="http://localhost:8788/tbtc-api/v1/"
 
-# API KEYS
+# API keys
 VITE_GELATO_RELAY_API_KEY="htaJCy_XHj8WsE3w53WBMurfySDtjLP_TrNPPa6IPIc_"  # this key should not be used on production
-# Get the API key from: https://thegraph.com/studio/apikeys/.
 VITE_SUBGRAPH_API_KEY=""
 
+# Sentry
+VITE_SENTRY_SUPPORT=false
+VITE_SENTRY_DSN=""
+
 # Posthog
 VITE_POSTHOG_API_HOST="https://us.i.posthog.com"
 VITE_POSTHOG_API_KEY=""
 
 # Feature flags
-VITE_FEATURE_FLAG_WITHDRAWALS_ENABLED="false"
-VITE_FEATURE_FLAG_OKX_WALLET_ENABLED="false"
-VITE_FEATURE_FLAG_XVERSE_WALLET_ENABLED="false"
+VITE_FEATURE_FLAG_WITHDRAWALS_ENABLED="true"
+VITE_FEATURE_FLAG_OKX_WALLET_ENABLED="true"
+VITE_FEATURE_FLAG_XVERSE_WALLET_ENABLED="true"
 VITE_FEATURE_FLAG_ACRE_POINTS_ENABLED="true"
 VITE_FEATURE_FLAG_TVL_ENABLED="true"
 VITE_FEATURE_GATING_DAPP_ENABLED="true"
-VITE_FEATURE_POSTHOG_ENABLED="true"
+VITE_FEATURE_POSTHOG_ENABLED="false"
 VITE_FEATURE_MOBILE_MODE_ENABLED="true"
-

dapp/src/assets/icons/index.ts

@@ -1,4 +1,3 @@
-export * from "./ArrowUpRight"
 export * from "./AcreLogo"
 export * from "./Pause"
 export { default as LoadingSpinnerSuccessIcon } from "./LoadingSpinnerSuccessIcon"
@@ -8,4 +7,3 @@ export * from "./MezoSignIcon"
 export * from "./AcreSignIcon"
 export * from "./BitcoinsStackErrorIcon"
 export { default as MatsIcon } from "./MatsIcon"
-export { default as BoltFilled } from "./BoltFilled"

dapp/src/components/Footer.tsx

@@ -10,8 +10,9 @@ import {
   Icon,
 } from "@chakra-ui/react"
 import { EXTERNAL_HREF } from "#/constants"
-import { AcreSignIcon, ArrowUpRight } from "#/assets/icons"
+import { AcreSignIcon } from "#/assets/icons"
 import { useMobileMode } from "#/hooks"
+import { IconArrowUpRight } from "@tabler/icons-react"
 
 type FooterListItem = Pick<LinkProps, "href" | "children">
 
@@ -64,7 +65,7 @@ const getItemsList = (
           as={Link}
           __css={styles.link}
           iconSpacing={0}
-          rightIcon={<Icon as={ArrowUpRight} />}
+          rightIcon={<Icon as={IconArrowUpRight} />}
           {...link}
           isExternal
         />

dapp/src/components/Header/ConnectWallet.tsx

@@ -97,7 +97,7 @@ export default function ConnectWallet() {
       id: "Disconnect",
       icon: IconLogout,
       label: "Disconnect",
-      onClick: onDisconnect,
+      onClick: handleDisconnectWallet,
       closeOnSelect: true,
       isSupported: true,
     },
@@ -191,17 +191,6 @@ export default function ConnectWallet() {
                 </Tooltip>
               ),
           )}
-
-          <Tooltip size="xs" label="Disconnect">
-            <IconButton
-              variant="ghost"
-              aria-label="Disconnect"
-              icon={<Icon as={IconLogout} boxSize={5} />}
-              px={2}
-              boxSize={5}
-              onClick={handleDisconnectWallet}
-            />
-          </Tooltip>
         </HStack>
       </Flex>
     </HStack>

dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/ServerErrorModal.tsx

@@ -19,7 +19,7 @@ import {
   IconReload,
   IconServerBolt,
 } from "@tabler/icons-react"
-// import InfoTooltip from "#/components/shared/InfoTooltip"
+// import TooltipIcon from "#/components/shared/TooltipIcon"
 
 export default function ServerErrorModal({
   isLoading,
@@ -66,7 +66,7 @@ export default function ServerErrorModal({
           <HStack>
             <TextMd fontWeight="bold">System status</TextMd>
             {/* TODO: ADD a tooltip */}
-            {/* <InfoTooltip label="Tooltip text" placement="top" /> */}
+            {/* <TooltipIcon label="Tooltip text" placement="top" /> */}
           </HStack>
           <TextMd color="red.400">Partial Outage</TextMd>
         </Flex>

dapp/src/components/TransactionModal/FeesTooltip/FeesTooltip.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import { List } from "@chakra-ui/react"
-import InfoTooltip from "#/components/shared/InfoTooltip"
+import TooltipIcon from "#/components/shared/TooltipIcon"
 import { FeesTooltipItem } from "./FeesTooltipItem"
 import { Fee as AcreFee } from "../../../types/fee"
 
@@ -21,7 +21,7 @@ const mapFeeToLabel = (feeId: keyof AcreFee) => {
 
 export function FeesTooltip({ fees }: Props) {
   return (
-    <InfoTooltip
+    <TooltipIcon
       placement="right"
       label={
         <List spacing={0.5} minW={60}>

dapp/src/components/shared/ButtonLink.tsx

@@ -1,16 +1,16 @@
 import React from "react"
 import { Button, ButtonProps, Icon, Link, LinkProps } from "@chakra-ui/react"
-import { ArrowUpRight } from "#/assets/icons"
+import { IconArrowUpRight, TablerIcon } from "@tabler/icons-react"
 
 type ButtonLinkProps = ButtonProps &
   LinkProps & {
-    icon?: typeof Icon
+    icon?: TablerIcon
     iconColor?: string
   }
 
 export default function ButtonLink({
   children,
-  icon = ArrowUpRight,
+  icon = IconArrowUpRight,
   iconColor = "brand.400",
   variant = "outline",
   ...props

dapp/src/components/shared/ProgressBar.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import { Progress, ProgressProps, ProgressLabel, Icon } from "@chakra-ui/react"
-import { BoltFilled } from "#/assets/icons"
+import { IconBolt } from "@tabler/icons-react"
 
 type ProgressBarProps = ProgressProps & {
   withBoltIcon?: boolean
@@ -23,7 +23,8 @@ function ProgressBar(props: ProgressBarProps) {
           transform="auto"
           translateX="-100%"
           translateY="-50%"
-          as={BoltFilled}
+          as={IconBolt}
+          fill="currentcolor"
           mx={-1}
         />
       )}

dapp/src/components/shared/Tooltip.tsx

@@ -1,19 +1,19 @@
 import React, { useState } from "react"
-import { Box, Tooltip as ChakraTooltip, TooltipProps } from "@chakra-ui/react"
+import { Tooltip as ChakraTooltip, TooltipProps, Flex } from "@chakra-ui/react"
 
 export default function Tooltip(props: TooltipProps) {
   const { children, ...restProps } = props
   const [isOpen, setIsOpen] = useState(false)
 
   return (
     <ChakraTooltip isOpen={isOpen} {...restProps}>
-      <Box
+      <Flex
         onMouseEnter={() => setIsOpen(true)}
         onMouseLeave={() => setIsOpen(false)}
         onClick={() => setIsOpen(true)}
       >
         {children}
-      </Box>
+      </Flex>
     </ChakraTooltip>
   )
 }

dapp/src/components/shared/InfoTooltip.tsx → dapp/src/components/shared/TooltipIcon.tsx

@@ -1,16 +1,21 @@
 import React from "react"
-import { IconInfoCircleFilled } from "@tabler/icons-react"
+import { IconInfoCircleFilled, TablerIcon } from "@tabler/icons-react"
 import { Icon, TooltipProps } from "@chakra-ui/react"
 import Tooltip from "./Tooltip"
 
 // TODO: Define in the new color palette
 const ICON_COLOR = "#3A3328"
 
-export default function InfoTooltip(props: Omit<TooltipProps, "children">) {
+type TooltipIconProps = Omit<TooltipProps, "children"> & {
+  icon?: TablerIcon
+}
+
+export default function TooltipIcon(props: TooltipIconProps) {
+  const { icon, ...restProps } = props
   return (
-    <Tooltip placement="bottom" {...props}>
+    <Tooltip placement="bottom" {...restProps}>
       <Icon
-        as={IconInfoCircleFilled}
+        as={icon ?? IconInfoCircleFilled}
         boxSize="1.125rem" // 18px
         cursor="pointer"
         color={ICON_COLOR}

dapp/src/hooks/store/useActivities.ts

@@ -1,6 +1,9 @@
-import { selectActivities } from "#/store/wallet"
+import { selectActivities, selectHasPendingActivities } from "#/store/wallet"
 import { useAppSelector } from "./useAppSelector"
 
 export default function useActivities() {
-  return useAppSelector(selectActivities)
+  const activities = useAppSelector(selectActivities)
+  const hasPendingActivities = useAppSelector(selectHasPendingActivities)
+
+  return { activities, hasPendingActivities }
 }

dapp/src/pages/DashboardPage/AcrePointsCard.tsx

@@ -15,7 +15,7 @@ import { logPromiseFailure, numberToLocaleString } from "#/utils"
 import { useAcrePoints, useWallet } from "#/hooks"
 import Spinner from "#/components/shared/Spinner"
 import UserDataSkeleton from "#/components/shared/UserDataSkeleton"
-import InfoTooltip from "#/components/shared/InfoTooltip"
+import TooltipIcon from "#/components/shared/TooltipIcon"
 import useDebounce from "#/hooks/useDebounce"
 import { ONE_SEC_IN_MILLISECONDS } from "#/constants"
 import acrePointsIllustrationSrc from "#/assets/images/acre-points-illustration.png"
@@ -61,7 +61,7 @@ export default function AcrePointsCard(props: CardProps) {
           {isConnected ? "Your" : "Total"} Acre points
         </TextMd>
 
-        <InfoTooltip
+        <TooltipIcon
           label={
             isConnected
               ? "Your current balance of Acre points collected so far. New points drop daily and are ready to be claimed. Unclaimed points roll over to the next day."
@@ -94,7 +94,7 @@ export default function AcrePointsCard(props: CardProps) {
                   <HStack spacing={0}>
                     <Spinner mr={3} size="sm" />
                     <TextMd>Your drop is being prepared.</TextMd>
-                    <InfoTooltip
+                    <TooltipIcon
                       label={`
                         We need some time to calculate your points. It may take up to 30 minutes. 
                         ${claimableBalance ? "You can still claim points from previous drops." : ""}

dapp/src/pages/DashboardPage/AcreTVLMessage.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { Box, HStack, StackProps, VStack } from "@chakra-ui/react"
 import { useAllActivitiesCount, useStatistics, useWallet } from "#/hooks"
-import { BoltFilled } from "#/assets/icons"
+import { IconBolt } from "@tabler/icons-react"
 import { TextMd } from "#/components/shared/Typography"
 import { CurrencyBalance } from "#/components/shared/CurrencyBalance"
 
@@ -20,7 +20,9 @@ export default function AcreTVLMessage(props: AcreTVLMessageProps) {
 
   return (
     <HStack align="start" spacing={1} color="grey.500" {...props}>
-      <BoltFilled color="orange.400" my={1} />
+      <Box color="orange.400" margin="auto">
+        <IconBolt fill="currentColor" size={16} />
+      </Box>
       {tvl.isCapExceeded ? (
         <VStack align="start" spacing={0}>
           <TextMd fontWeight="semibold" color="grey.700">

dapp/src/pages/DashboardPage/BeehiveCard.tsx

@@ -1,5 +1,12 @@
 import React from "react"
+import { MezoSignIcon } from "#/assets/icons"
+import beehiveIllustrationSrc from "#/assets/images/beehive-illustration.svg"
+import TooltipIcon from "#/components/shared/TooltipIcon"
 import { H6, TextMd, TextSm } from "#/components/shared/Typography"
+import UserDataSkeleton from "#/components/shared/UserDataSkeleton"
+import { useMats, useModal } from "#/hooks"
+import { MODAL_TYPES } from "#/types"
+import { numberToLocaleString } from "#/utils"
 import {
   Box,
   Button,
@@ -12,13 +19,6 @@ import {
   Image,
   VStack,
 } from "@chakra-ui/react"
-import { MezoSignIcon } from "#/assets/icons"
-import { useMats, useModal } from "#/hooks"
-import { MODAL_TYPES } from "#/types"
-import beehiveIllustrationSrc from "#/assets/images/beehive-illustration.svg"
-import UserDataSkeleton from "#/components/shared/UserDataSkeleton"
-import { numberToLocaleString } from "#/utils"
-import InfoTooltip from "#/components/shared/InfoTooltip"
 
 export default function BeehiveCard(props: CardProps) {
   const { openModal } = useModal()
@@ -32,7 +32,7 @@ export default function BeehiveCard(props: CardProps) {
     <Card {...props}>
       <CardHeader as={Flex} alignItems="center" justify="space-between" gap={2}>
         <TextMd>Additional rewards</TextMd>
-        <InfoTooltip
+        <TooltipIcon
           label="Acre Beehive automatically collects rewards from our partner projects. Rewards are dropped daily, and your share is calculated based on your deposit amount and how long you HODL."
           w={56}
         />