Merge branch 'main' into withdrawal-fee

dapp/src/DApp.tsx

@@ -6,7 +6,11 @@ import { WagmiProvider } from "wagmi"
 import { QueryClientProvider } from "@tanstack/react-query"
 import { AcreSdkProvider } from "./acre-react/contexts"
 import GlobalStyles from "./components/GlobalStyles"
-import { DocsDrawerContextProvider, SidebarContextProvider } from "./contexts"
+import {
+  DocsDrawerContextProvider,
+  SidebarContextProvider,
+  WalletConnectionErrorContextProvider,
+} from "./contexts"
 import { useInitApp } from "./hooks"
 import { router } from "./router"
 import { store } from "./store"
@@ -32,11 +36,13 @@ function DAppProviders() {
         <AcreSdkProvider>
           <DocsDrawerContextProvider>
             <SidebarContextProvider>
-              <ReduxProvider store={store}>
-                <ChakraProvider theme={theme}>
-                  <DApp />
-                </ChakraProvider>
-              </ReduxProvider>
+              <WalletConnectionErrorContextProvider>
+                <ReduxProvider store={store}>
+                  <ChakraProvider theme={theme}>
+                    <DApp />
+                  </ChakraProvider>
+                </ReduxProvider>
+              </WalletConnectionErrorContextProvider>
             </SidebarContextProvider>
           </DocsDrawerContextProvider>
         </AcreSdkProvider>

dapp/src/acre-react/contexts/AcreSdkContext.tsx

@@ -38,6 +38,8 @@ export function AcreSdkProvider({ children }: { children: React.ReactNode }) {
       if (bitcoinProvider) {
         sdk = await sdk.connect(bitcoinProvider)
         setIsConnected(true)
+      } else {
+        setIsConnected(false)
       }
 
       setAcre(sdk)

dapp/src/components/ConnectWalletModal/ConnectWalletButton.tsx

@@ -1,31 +1,44 @@
-import React, { useCallback, useEffect } from "react"
+import React, { useCallback, useEffect, useState } from "react"
+import { CONNECTION_ERRORS } from "#/constants"
+import {
+  useAppDispatch,
+  useModal,
+  useWallet,
+  useWalletConnectionError,
+} from "#/hooks"
+import { setIsSignedMessage } from "#/store/wallet"
+import { OrangeKitConnector, OrangeKitError, OnSuccessCallback } from "#/types"
+import {
+  isSupportedBTCAddressType,
+  logPromiseFailure,
+  orangeKit,
+} from "#/utils"
 import {
   Button,
   Card,
   CardBody,
   CardHeader,
   Flex,
   Icon,
-  VStack,
   Image,
   ImageProps,
+  VStack,
 } from "@chakra-ui/react"
-import { useAppDispatch, useModal, useWallet } from "#/hooks"
-import { setIsSignedMessage } from "#/store/wallet"
-import { logPromiseFailure, orangeKit } from "#/utils"
-import { OrangeKitConnector } from "#/types"
 import { useSignMessage } from "wagmi"
 import { IconArrowNarrowRight } from "@tabler/icons-react"
 import { AnimatePresence, Variants, motion } from "framer-motion"
+import { ONE_SEC_IN_MILLISECONDS } from "#/constants"
+import ArrivingSoonTooltip from "../ArrivingSoonTooltip"
 import { TextLg, TextMd } from "../shared/Typography"
 import ConnectWalletStatusLabel from "./ConnectWalletStatusLabel"
-import ArrivingSoonTooltip from "../ArrivingSoonTooltip"
+import Spinner from "../shared/Spinner"
 
 type ConnectWalletButtonProps = {
   label: string
   onClick: () => void
   isSelected: boolean
   connector: OrangeKitConnector & { isDisabled: boolean }
+  onSuccess?: OnSuccessCallback
 }
 
 const iconStyles: Record<string, ImageProps> = {
@@ -44,6 +57,7 @@ export default function ConnectWalletButton({
   onClick,
   isSelected,
   connector,
+  onSuccess,
 }: ConnectWalletButtonProps) {
   const {
     address,
@@ -56,15 +70,22 @@ export default function ConnectWalletButton({
   const { closeModal } = useModal()
   const dispatch = useAppDispatch()
 
-  const hasConnectionError = connectionStatus === "error"
+  const [isLoading, setIsLoading] = useState<boolean>(false)
+  const { connectionError, setConnectionError } = useWalletConnectionError()
+
+  const hasConnectionError = connectionError || connectionStatus === "error"
   const hasSignMessageStatus = signMessageStatus === "error"
   const showStatuses = isSelected && !hasConnectionError
   const showRetryButton = address && hasSignMessageStatus
 
-  const onSuccess = useCallback(() => {
+  const handleOnSuccess = useCallback(() => {
     closeModal()
     dispatch(setIsSignedMessage(true))
-  }, [closeModal, dispatch])
+
+    if (onSuccess) {
+      onSuccess()
+    }
+  }, [closeModal, dispatch, onSuccess])
 
   const handleSignMessage = useCallback(
     async (connectedConnector: OrangeKitConnector) => {
@@ -78,35 +99,72 @@ export default function ConnectWalletButton({
           message,
           connector: orangeKit.typeConversionToConnector(connectedConnector),
         },
-        { onSuccess },
+        { onSuccess: handleOnSuccess },
       )
     },
-    [onSuccess, signMessage],
+    [handleOnSuccess, signMessage],
   )
 
-  const handleConnection = useCallback(() => {
+  const handleConnection = useCallback(async () => {
+    const bitcoinAddress = await connector.getBitcoinAddress()
+
     onConnect(connector, {
       onSuccess: () => {
+        // This is workaround to disallow Nested Segwit addresses.
+        // Should be handled by OrangeKit
+        if (!isSupportedBTCAddressType(bitcoinAddress)) {
+          onDisconnect()
+          setConnectionError(CONNECTION_ERRORS.NOT_SUPPORTED)
+          return
+        }
+
         logPromiseFailure(handleSignMessage(connector))
       },
-      onError: (error: unknown) => {
-        // TODO: Handle when the wallet connection fails
-        console.error(error)
+      onError: (error: OrangeKitError) => {
+        const errorData = orangeKit.parseOrangeKitConnectionError(error)
+        setConnectionError(errorData)
       },
     })
-  }, [connector, handleSignMessage, onConnect])
+  }, [
+    connector,
+    handleSignMessage,
+    onConnect,
+    onDisconnect,
+    setConnectionError,
+  ])
+
+  const handleRedirectUser = useCallback(() => {
+    setIsLoading(true)
+
+    setTimeout(() => {
+      const wallet = orangeKit.getWalletInfo(connector)
+
+      if (wallet) {
+        window.open(wallet.downloadUrls.desktop, "_blank")?.focus()
+      }
+
+      setIsLoading(false)
+    }, ONE_SEC_IN_MILLISECONDS * 2)
+  }, [connector])
 
   const handleButtonClick = () => {
+    const isInstalled = orangeKit.isWalletInstalled(connector)
+
+    if (!isInstalled) {
+      handleRedirectUser()
+      return
+    }
+
     onClick()
 
     // Connector still selected and user wants to retry connect action
     if (isSelected && !isConnected) {
-      handleConnection()
+      logPromiseFailure(handleConnection())
     }
   }
 
   useEffect(() => {
-    if (isSelected) handleConnection()
+    if (isSelected) logPromiseFailure(handleConnection())
     // Reset the connection when user selects another connector
     else onDisconnect()
   }, [handleConnection, isSelected, onDisconnect])
@@ -138,7 +196,13 @@ export default function ConnectWalletButton({
                 {...iconStyles[connector.id]}
               />
             }
-            rightIcon={<Icon as={IconArrowNarrowRight} boxSize={6} ml="auto" />}
+            rightIcon={
+              !isLoading ? (
+                <Icon as={IconArrowNarrowRight} boxSize={6} ml="auto" />
+              ) : (
+                <Spinner boxSize={6} variant="filled" />
+              )
+            }
             iconSpacing={4}
             isDisabled={connector.isDisabled}
           >

dapp/src/components/ConnectWalletModal/ConnectWalletErrorAlert.tsx

@@ -0,0 +1,46 @@
+import React from "react"
+import { Box } from "@chakra-ui/react"
+import { AnimatePresence, Variants, motion } from "framer-motion"
+import { ConnectionErrorData } from "#/types"
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+  AlertProps,
+} from "../shared/Alert"
+
+type ConnectWalletErrorAlertProps = AlertProps & Partial<ConnectionErrorData>
+
+const collapseVariants: Variants = {
+  collapsed: { height: 0 },
+  expanded: { height: "auto" },
+}
+
+export default function ConnectWalletErrorAlert(
+  props: ConnectWalletErrorAlertProps,
+) {
+  const { title, description, ...restProps } = props
+
+  const shouldRender = !!(title && description)
+
+  return (
+    <AnimatePresence initial={false}>
+      {shouldRender && (
+        <Box
+          as={motion.div}
+          variants={collapseVariants}
+          initial="collapsed"
+          animate="expanded"
+          exit="collapsed"
+          overflow="hidden"
+          w="full"
+        >
+          <Alert status="error" mb={6} {...restProps}>
+            <AlertTitle>{title}</AlertTitle>
+            <AlertDescription>{description}</AlertDescription>
+          </Alert>
+        </Box>
+      )}
+    </AnimatePresence>
+  )
+}

dapp/src/components/ConnectWalletModal/index.tsx

@@ -1,60 +1,52 @@
 import React, { useState } from "react"
 import { ModalBody, ModalHeader, ModalCloseButton } from "@chakra-ui/react"
-import { useConnectors } from "#/hooks"
-import { AnimatePresence } from "framer-motion"
+import { useConnectors, useWalletConnectionError } from "#/hooks"
+import { OrangeKitConnector } from "#/types"
+import { BaseModalProps, OnSuccessCallback } from "#/types"
+import { featureFlags } from "#/constants"
 import withBaseModal from "../ModalRoot/withBaseModal"
 import ConnectWalletButton from "./ConnectWalletButton"
-// import { Alert, AlertTitle, AlertDescription } from "./shared/Alert"
+import ConnectWalletErrorAlert from "./ConnectWalletErrorAlert"
 
 const disabledConnectorIds = [
-  import.meta.env.VITE_FEATURE_FLAG_OKX_WALLET_ENABLED !== "true"
-    ? "orangekit-okx"
-    : "",
+  featureFlags.OKX_WALLET_ENABLED ? "orangekit-okx" : "",
 ].filter(Boolean)
 
-export function ConnectWalletModalBase() {
+export function ConnectWalletModalBase({
+  onSuccess,
+}: {
+  onSuccess?: OnSuccessCallback
+} & BaseModalProps) {
   const connectors = useConnectors()
   const enabledConnectors = connectors.map((connector) => ({
     ...connector,
     isDisabled: disabledConnectorIds.includes(connector.id),
   }))
 
   const [selectedConnectorId, setSelectedConnectorId] = useState<string>()
+  const { connectionError, resetConnectionError } = useWalletConnectionError()
 
-  // TODO: Use commented code to integrate wallet connection error handling
-  // const mockError = { title: "Error", description: "An error occured!" }
+  const handleButtonOnClick = (connector: OrangeKitConnector) => {
+    resetConnectionError()
+    setSelectedConnectorId(connector.id)
+  }
 
   return (
     <>
-      <ModalCloseButton />
+      <ModalCloseButton onClick={() => resetConnectionError()} />
       <ModalHeader>Connect your wallet</ModalHeader>
 
       <ModalBody gap={0}>
-        <AnimatePresence initial={false}>
-          {/* {mockError && ( // TODO: Add a condition
-            <Box
-              as={motion.div}
-              variants={collapseVariants}
-              initial="collapsed"
-              animate="expanded"
-              exit="collapsed"
-              overflow="hidden"
-              w="full"
-            >
-              <Alert status="error" mb={6}>
-                <AlertTitle>{mockError.title}</AlertTitle>
-                <AlertDescription>{mockError.description}</AlertDescription>
-              </Alert>
-            </Box>
-          )} */}
-        </AnimatePresence>
+        <ConnectWalletErrorAlert {...connectionError} />
+
         {enabledConnectors.map((connector) => (
           <ConnectWalletButton
             key={connector.id}
             label={connector.name}
             connector={connector}
-            onClick={() => setSelectedConnectorId(connector.id)}
+            onClick={() => handleButtonOnClick(connector)}
             isSelected={selectedConnectorId === connector.id}
+            onSuccess={onSuccess}
           />
         ))}
       </ModalBody>

dapp/src/components/Header/ConnectWallet.tsx

@@ -54,7 +54,7 @@ export default function ConnectWallet() {
         leftIcon={<Icon as={BitcoinIcon} boxSize={6} color="brand.400" />}
         onClick={handleConnectWallet}
       >
-        Choose account
+        Connect wallet
       </Button>
     )
   }

dapp/src/components/ModalRoot/withBaseModal.tsx

@@ -3,7 +3,7 @@ import { Modal, ModalContent, ModalOverlay, ModalProps } from "@chakra-ui/react"
 import { BaseModalProps } from "#/types"
 import { useSidebar } from "#/hooks"
 
-export const MODAL_BASE_SIZE = "lg"
+const MODAL_BASE_SIZE = "lg"
 
 function withBaseModal<T extends BaseModalProps>(
   WrappedModalContent: ComponentType<T>,