Merge branch 'main' into posthog

dapp/src/DApp.tsx

@@ -10,7 +10,7 @@ import GlobalStyles from "./components/GlobalStyles"
 import {
   DocsDrawerContextProvider,
   SidebarContextProvider,
-  WalletConnectionErrorContextProvider,
+  WalletConnectionAlertContextProvider,
 } from "./contexts"
 import { useInitApp } from "./hooks"
 import { router } from "./router"
@@ -68,13 +68,13 @@ function DAppProviders() {
           <AcreSdkProvider>
             <DocsDrawerContextProvider>
               <SidebarContextProvider>
-                <WalletConnectionErrorContextProvider>
+                <WalletConnectionAlertContextProvider>
                   <ReduxProvider store={store}>
                     <PostHogProvider>
                       <DApp />
                     </PostHogProvider>
                   </ReduxProvider>
-                </WalletConnectionErrorContextProvider>
+                </WalletConnectionAlertContextProvider>
               </SidebarContextProvider>
             </DocsDrawerContextProvider>
           </AcreSdkProvider>

dapp/src/components/ConnectWalletModal/ConnectWalletAlert.tsx

@@ -0,0 +1,99 @@
+import React from "react"
+import { Box, Link, VStack } from "@chakra-ui/react"
+import { AnimatePresence, Variants, motion } from "framer-motion"
+import { EXTERNAL_HREF } from "#/constants"
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+  AlertIcon,
+  AlertProps,
+} from "../shared/Alert"
+
+export enum ConnectionAlert {
+  Rejected = "REJECTED",
+  NotSupported = "NOT_SUPPORTED",
+  NetworkMismatch = "NETWORK_MISMATCH",
+  InvalidSIWWSignature = "INVALID_SIWW_SIGNATURE",
+  Default = "DEFAULT",
+}
+
+function ContactSupport() {
+  return (
+    <Box as="span">
+      If the problem persists, contact{" "}
+      <Link
+        // TODO: Define in the new color palette
+        color="#0E61FE"
+        textDecoration="underline"
+        href={EXTERNAL_HREF.DISCORD}
+        isExternal
+      >
+        Acre support
+      </Link>
+      .
+    </Box>
+  )
+}
+
+const CONNECTION_ALERTS = {
+  [ConnectionAlert.Rejected]: {
+    title: "Wallet connection rejected.",
+    description: "If you encountered an error, please try again.",
+  },
+  [ConnectionAlert.NotSupported]: {
+    title: "Not supported.",
+    description:
+      "Only Native SegWit, Nested SegWit, or Legacy addresses are supported. Please use a compatible address or switch to a different wallet.",
+  },
+  [ConnectionAlert.NetworkMismatch]: {
+    title: "Incorrect network detected in your wallet.",
+    description:
+      "Please connect your wallet to the correct Bitcoin network and try again.",
+  },
+  [ConnectionAlert.Default]: {
+    title: "Wallet connection failed. Please try again.",
+    description: <ContactSupport />,
+  },
+  [ConnectionAlert.InvalidSIWWSignature]: {
+    title: "Invalid sign-in signature. Please try again.",
+    description: <ContactSupport />,
+  },
+}
+
+const collapseVariants: Variants = {
+  collapsed: { height: 0 },
+  expanded: { height: "auto" },
+}
+
+type ConnectWalletAlertProps = AlertProps & { type?: ConnectionAlert }
+
+export default function ConnectWalletAlert(props: ConnectWalletAlertProps) {
+  const { type, status, ...restProps } = props
+
+  const data = type ? CONNECTION_ALERTS[type] : undefined
+
+  return (
+    <AnimatePresence initial={false}>
+      {data && (
+        <Box
+          as={motion.div}
+          variants={collapseVariants}
+          initial="collapsed"
+          animate="expanded"
+          exit="collapsed"
+          overflow="hidden"
+          w="full"
+        >
+          <Alert status={status} mb={6} {...restProps}>
+            <AlertIcon />
+            <VStack w="full" align="start" spacing={0}>
+              <AlertTitle textAlign="start">{data.title}</AlertTitle>
+              <AlertDescription>{data.description}</AlertDescription>
+            </VStack>
+          </Alert>
+        </Box>
+      )}
+    </AnimatePresence>
+  )
+}

dapp/src/components/ConnectWalletModal/ConnectWalletButton.tsx

@@ -1,12 +1,12 @@
 import React, { useCallback, useEffect, useRef, useState } from "react"
-import { CONNECTION_ERRORS, ONE_SEC_IN_MILLISECONDS } from "#/constants"
+import { ONE_SEC_IN_MILLISECONDS } from "#/constants"
 import {
   useAppDispatch,
   useIsEmbed,
   useModal,
   useSignMessageAndCreateSession,
   useWallet,
-  useWalletConnectionError,
+  useWalletConnectionAlert,
 } from "#/hooks"
 import { setIsSignedMessage } from "#/store/wallet"
 import { OrangeKitConnector, OrangeKitError, OnSuccessCallback } from "#/types"
@@ -29,6 +29,7 @@ import ArrivingSoonTooltip from "../ArrivingSoonTooltip"
 import { TextLg, TextMd } from "../shared/Typography"
 import ConnectWalletStatusLabel from "./ConnectWalletStatusLabel"
 import Spinner from "../shared/Spinner"
+import { ConnectionAlert } from "./ConnectWalletAlert"
 
 type ConnectWalletButtonProps = {
   label: string
@@ -67,16 +68,16 @@ export default function ConnectWalletButton({
   } = useWallet()
   const { signMessageStatus, resetMessageStatus, signMessageAndCreateSession } =
     useSignMessageAndCreateSession()
-  const { connectionError, setConnectionError, resetConnectionError } =
-    useWalletConnectionError()
+  const { type, setConnectionAlert, resetConnectionAlert } =
+    useWalletConnectionAlert()
   const { closeModal } = useModal()
   const dispatch = useAppDispatch()
   const isMounted = useRef(false)
   const { handleIdentification } = usePostHogIdentity()
 
   const [isLoading, setIsLoading] = useState<boolean>(false)
 
-  const hasConnectionError = connectionError || connectionStatus === "error"
+  const hasConnectionError = type || connectionStatus === "error"
   const hasSignMessageErrorStatus = signMessageStatus === "error"
   const shouldShowStatuses = isSelected && !hasConnectionError
   const shouldShowRetryButton = address && hasSignMessageErrorStatus
@@ -101,14 +102,14 @@ export default function ConnectWalletButton({
 
         onDisconnect()
         console.error("Failed to sign siww message", error)
-        setConnectionError(CONNECTION_ERRORS.INVALID_SIWW_SIGNATURE)
+        setConnectionAlert(ConnectionAlert.InvalidSIWWSignature)
       }
     },
     [
       signMessageAndCreateSession,
       onSuccessSignMessage,
       onDisconnect,
-      setConnectionError,
+      setConnectionAlert,
     ],
   )
 
@@ -135,18 +136,18 @@ export default function ConnectWalletButton({
       onError: (error: OrangeKitError) => {
         const errorData = orangeKit.parseOrangeKitConnectionError(error)
 
-        if (errorData === CONNECTION_ERRORS.DEFAULT) {
+        if (errorData === ConnectionAlert.Default) {
           console.error("Failed to connect", error)
         }
 
-        setConnectionError(errorData)
+        setConnectionAlert(errorData)
       },
     })
   }, [
     onConnect,
     connector,
     onSuccessConnection,
-    setConnectionError,
+    setConnectionAlert,
     isReconnecting,
   ])
 
@@ -169,7 +170,7 @@ export default function ConnectWalletButton({
     if (shouldShowStatuses) return
 
     if (!isReconnecting) onDisconnect()
-    resetConnectionError()
+    resetConnectionAlert()
     resetMessageStatus()
 
     const isInstalled = orangeKit.isWalletInstalled(connector)

dapp/src/components/ConnectWalletModal/index.tsx

@@ -5,13 +5,13 @@ import {
   useIsEmbed,
   useIsSignedMessage,
   useWallet,
-  useWalletConnectionError,
+  useWalletConnectionAlert,
 } from "#/hooks"
 import { OrangeKitConnector, BaseModalProps, OnSuccessCallback } from "#/types"
 import { wallets } from "#/constants"
 import withBaseModal from "../ModalRoot/withBaseModal"
 import ConnectWalletButton from "./ConnectWalletButton"
-import ConnectWalletErrorAlert from "./ConnectWalletErrorAlert"
+import ConnectWalletAlert from "./ConnectWalletAlert"
 
 export function ConnectWalletModalBase({
   onSuccess,
@@ -30,7 +30,7 @@ export function ConnectWalletModalBase({
   }))
 
   const [selectedConnectorId, setSelectedConnectorId] = useState<string>()
-  const { connectionError, resetConnectionError } = useWalletConnectionError()
+  const { type, status, resetConnectionAlert } = useWalletConnectionAlert()
   const isSignedMessage = useIsSignedMessage()
 
   const handleButtonOnClick = (connector: OrangeKitConnector) => {
@@ -48,7 +48,7 @@ export function ConnectWalletModalBase({
       {withCloseButton && (
         <ModalCloseButton
           onClick={() => {
-            resetConnectionError()
+            resetConnectionAlert()
 
             if (!isSignedMessage) {
               onDisconnect()
@@ -59,7 +59,7 @@ export function ConnectWalletModalBase({
       <ModalHeader>{`Select your ${isEmbed ? "account" : "wallet"}`}</ModalHeader>
 
       <ModalBody gap={0}>
-        <ConnectWalletErrorAlert {...connectionError} />
+        <ConnectWalletAlert type={type} status={status} />
 
         {enabledConnectors.map((connector) => (
           <ConnectWalletButton

dapp/src/components/TransactionModal/ActiveStakingStep/DepositBTCModal.tsx

@@ -1,21 +1,22 @@
-import React, { useCallback } from "react"
+import { ONE_SEC_IN_MILLISECONDS, queryKeysFactory } from "#/constants"
 import {
   useActionFlowPause,
   useActionFlowTokenAmount,
   useAppDispatch,
+  useCancelPromise,
   useDepositBTCTransaction,
   useInvalidateQueries,
   useStakeFlowContext,
   useVerifyDepositAddress,
 } from "#/hooks"
-import { eip1193, logPromiseFailure } from "#/utils"
-import { PROCESS_STATUSES } from "#/types"
+import { usePostHogCapture } from "#/hooks/posthog/usePostHogCapture"
+import { PostHogEvent } from "#/posthog/events"
 import { setStatus, setTxHash } from "#/store/action-flow"
-import { ONE_SEC_IN_MILLISECONDS, queryKeysFactory } from "#/constants"
+import { PROCESS_STATUSES } from "#/types"
+import { eip1193, logPromiseFailure } from "#/utils"
 import { useTimeout } from "@chakra-ui/react"
 import { useMutation } from "@tanstack/react-query"
-import { PostHogEvent } from "#/posthog/events"
-import { usePostHogCapture } from "#/hooks/posthog/usePostHogCapture"
+import { useCallback, useRef } from "react"
 import WalletInteractionModal from "../WalletInteractionModal"
 
 const { userKeys } = queryKeysFactory
@@ -31,6 +32,12 @@ export default function DepositBTCModal() {
   })
   const { handleCapture, handleCaptureWithCause } = usePostHogCapture()
 
+  const sessionId = useRef(Math.random())
+  const { cancel, resolve, sessionIdToPromise } = useCancelPromise(
+    sessionId.current,
+    "Deposit cancelled",
+  )
+
   const onStakeBTCSuccess = useCallback(() => {
     handleBitcoinBalanceInvalidation()
     dispatch(setStatus(PROCESS_STATUSES.SUCCEEDED))
@@ -64,6 +71,8 @@ export default function DepositBTCModal() {
 
   const onDepositBTCError = useCallback(
     (error: unknown) => {
+      if (!sessionIdToPromise[sessionId.current].shouldOpenErrorModal) return
+
       if (eip1193.didUserRejectRequest(error)) {
         handlePause()
       } else {
@@ -72,7 +81,7 @@ export default function DepositBTCModal() {
 
       handleCaptureWithCause(error, PostHogEvent.DepositFailure)
     },
-    [onError, handlePause, handleCaptureWithCause],
+    [sessionIdToPromise, handlePause, onError, handleCaptureWithCause],
   )
 
   const { mutate: sendBitcoinTransaction, status } = useDepositBTCTransaction({
@@ -87,6 +96,8 @@ export default function DepositBTCModal() {
       btcAddress,
     )
 
+    await resolve()
+
     if (verificationStatus === "valid") {
       sendBitcoinTransaction({
         recipient: btcAddress,
@@ -100,6 +111,7 @@ export default function DepositBTCModal() {
     btcAddress,
     depositReceipt,
     verifyDepositAddress,
+    resolve,
     sendBitcoinTransaction,
     onError,
   ])
@@ -113,5 +125,5 @@ export default function DepositBTCModal() {
   if (status === "pending" || status === "success")
     return <WalletInteractionModal step="awaiting-transaction" />
 
-  return <WalletInteractionModal step="opening-wallet" />
+  return <WalletInteractionModal step="opening-wallet" onClose={cancel} />
 }