Merge branch 'main' into update-deposit-ui-mobile

thesis · Nov 28, 2024 · d966a94 · d966a94
2 parents 41c0fd9 + c217341
commit d966a94
Show file tree

Hide file tree

Showing 24 changed files with 386 additions and 145 deletions.
diff --git a/dapp/manifests/ledger-live/ledger-live-manifest-development.json b/dapp/manifests/ledger-live/ledger-live-manifest-development.json
@@ -23,6 +23,7 @@
     "account.list",
     "bitcoin.getAddress",
     "bitcoin.getPublicKey",
+    "bitcoin.getXPub",
     "transaction.signAndBroadcast",
     "custom.acre.messageSign",
     "custom.acre.transactionSignAndBroadcast"

diff --git a/dapp/manifests/ledger-live/ledger-live-manifest-mainnet.json b/dapp/manifests/ledger-live/ledger-live-manifest-mainnet.json
@@ -23,6 +23,7 @@
     "account.list",
     "bitcoin.getAddress",
     "bitcoin.getPublicKey",
+    "bitcoin.getXPub",
     "transaction.signAndBroadcast",
     "custom.acre.messageSign",
     "custom.acre.transactionSignAndBroadcast"

diff --git a/dapp/manifests/ledger-live/ledger-live-manifest-testnet.json b/dapp/manifests/ledger-live/ledger-live-manifest-testnet.json
@@ -23,6 +23,7 @@
     "account.list",
     "bitcoin.getAddress",
     "bitcoin.getPublicKey",
+    "bitcoin.getXPub",
     "transaction.signAndBroadcast",
     "custom.acre.messageSign",
     "custom.acre.transactionSignAndBroadcast"

diff --git a/dapp/manifests/ledger-live/ledger-manifest-template.json b/dapp/manifests/ledger-live/ledger-manifest-template.json
@@ -23,6 +23,7 @@
     "account.list",
     "bitcoin.getAddress",
     "bitcoin.getPublicKey",
+    "bitcoin.getXPub",
     "transaction.signAndBroadcast",
     "custom.acre.messageSign",
     "custom.acre.transactionSignAndBroadcast"

diff --git a/dapp/src/components/ConnectWalletModal/ConnectWalletButton.tsx b/dapp/src/components/ConnectWalletModal/ConnectWalletButton.tsx
@@ -129,6 +129,11 @@ export default function ConnectWalletButton({
       },
       onError: (error: OrangeKitError) => {
         const errorData = orangeKit.parseOrangeKitConnectionError(error)
+
+        if (errorData === CONNECTION_ERRORS.DEFAULT) {
+          console.error("Failed to connect", error)
+        }
+
         setConnectionError(errorData)
       },
     })

diff --git a/dapp/src/components/Header/ConnectWallet.tsx b/dapp/src/components/Header/ConnectWallet.tsx
@@ -5,11 +5,15 @@ import {
   HStack,
   Icon,
   IconButton,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuList,
   StackDivider,
   useClipboard,
   useMultiStyleConfig,
 } from "@chakra-ui/react"
-import { useIsEmbed, useModal, useWallet } from "#/hooks"
+import { useIsEmbed, useMobileMode, useModal, useWallet } from "#/hooks"
 import { CurrencyBalance } from "#/components/shared/CurrencyBalance"
 import { TextMd } from "#/components/shared/Typography"
 import { BitcoinIcon } from "#/assets/icons"
@@ -21,6 +25,8 @@ import {
   IconLogout,
   IconWallet,
   IconUserCode,
+  IconChevronDown,
+  IconChevronUp,
 } from "@tabler/icons-react"
 import { useMatch } from "react-router-dom"
 import Tooltip from "../shared/Tooltip"
@@ -39,6 +45,7 @@ export default function ConnectWallet() {
     size: "lg",
   })
   const isDashboardPage = useMatch("/dashboard")
+  const isMobile = useMobileMode()
 
   const handleConnectWallet = (isReconnecting: boolean = false) => {
     openModal(MODAL_TYPES.CONNECT_WALLET, { isReconnecting })
@@ -62,8 +69,65 @@ export default function ConnectWallet() {
       </Button>
     )
   }
+  const options = [
+    {
+      id: "Copy",
+      icon: IconCopy,
+      label: hasCopied ? "Address copied" : "Copy Address",
+      onClick: onCopy,
+      isSupported: true,
+      closeOnSelect: false,
+    },
+    {
+      id: "Change account",
+      icon: IconUserCode,
+      label: "Change account",
+      onClick: () => handleConnectWallet(true),
+      isSupported: isChangeAccountFeatureSupported(embeddedApp),
+      closeOnSelect: true,
+    },
+    {
+      id: "Disconnect",
+      icon: IconLogout,
+      label: "Disconnect",
+      onClick: onDisconnect,
+      closeOnSelect: true,
+      isSupported: true,
+    },
+  ]
 
-  return (
+  return isMobile ? (
+    <Menu>
+      {({ isOpen }) => (
+        <>
+          <MenuButton
+            as={Button}
+            variant="card"
+            leftIcon={<Icon as={BitcoinIcon} boxSize={6} color="brand.400" />}
+            rightIcon={isOpen ? <IconChevronUp /> : <IconChevronDown />}
+          >
+            <TextMd color="brand.400">{truncateAddress(address)}</TextMd>
+          </MenuButton>
+          <MenuList bg="gold.200">
+            {options.map(
+              (option) =>
+                option.isSupported && (
+                  <MenuItem
+                    key={option.id}
+                    closeOnSelect={option.closeOnSelect}
+                    {...styles}
+                    icon={<Icon as={option.icon} boxSize={5} />}
+                    onClick={option.onClick}
+                  >
+                    {option.label}
+                  </MenuItem>
+                ),
+            )}
+          </MenuList>
+        </>
+      )}
+    </Menu>
+  ) : (
     <HStack spacing={4}>
       <HStack display={{ base: "none", md: "flex" }}>
         <CurrencyBalance currency="bitcoin" amount={balance} />
@@ -100,44 +164,26 @@ export default function ConnectWallet() {
           spacing={1}
           divider={<StackDivider borderColor="gold.500" />}
         >
-          <Tooltip
-            size="xs"
-            label={hasCopied ? "Address copied" : "Copy"}
-            closeOnClick={false}
-          >
-            <IconButton
-              variant="ghost"
-              aria-label="Copy"
-              icon={<Icon as={IconCopy} boxSize={5} />}
-              px={2}
-              boxSize={5}
-              onClick={onCopy}
-            />
-          </Tooltip>
-
-          {isChangeAccountFeatureSupported(embeddedApp) && (
-            <Tooltip size="xs" label="Change account">
-              <IconButton
-                variant="ghost"
-                aria-label="Change account"
-                icon={<Icon as={IconUserCode} boxSize={5} />}
-                px={2}
-                boxSize={5}
-                onClick={() => handleConnectWallet(true)}
-              />
-            </Tooltip>
+          {options.map(
+            (option) =>
+              option.isSupported && (
+                <Tooltip
+                  key={option.id}
+                  size="xs"
+                  label={option.label}
+                  closeOnClick={false}
+                >
+                  <IconButton
+                    variant="ghost"
+                    aria-label={option.id}
+                    icon={<Icon as={option.icon} boxSize={5} />}
+                    px={2}
+                    boxSize={5}
+                    onClick={option.onClick}
+                  />
+                </Tooltip>
+              ),
           )}
-
-          <Tooltip size="xs" label="Disconnect">
-            <IconButton
-              variant="ghost"
-              aria-label="Disconnect"
-              icon={<Icon as={IconLogout} boxSize={5} />}
-              px={2}
-              boxSize={5}
-              onClick={onDisconnect}
-            />
-          </Tooltip>
         </HStack>
       </Flex>
     </HStack>

diff --git a/dapp/src/components/TransactionModal/ActiveUnstakingStep/BuildTransactionModal.tsx b/dapp/src/components/TransactionModal/ActiveUnstakingStep/BuildTransactionModal.tsx
@@ -16,10 +16,10 @@ export default function BuildTransactionModal({
   return (
     <>
       <ModalCloseButton onClick={onClose} />
-      <ModalHeader>Building transaction data...</ModalHeader>
+      <ModalHeader>Preparing withdrawal transaction...</ModalHeader>
       <ModalBody>
         <Spinner size="xl" variant="filled" />
-        <TextMd>We are building your withdrawal data.</TextMd>
+        <TextMd>This may take a few minutes.</TextMd>
         <Button size="lg" width="100%" variant="outline" onClick={onClose}>
           Cancel
         </Button>

diff --git a/dapp/src/components/TransactionModal/WalletInteractionModal.tsx b/dapp/src/components/TransactionModal/WalletInteractionModal.tsx
@@ -10,8 +10,8 @@ import {
   ProgressProps,
 } from "@chakra-ui/react"
 import { AcreSignIcon } from "#/assets/icons"
-import { useActionFlowType, useConnector } from "#/hooks"
-import { ACTION_FLOW_TYPES } from "#/types"
+import { useActionFlowType, useConnector, useIsEmbed } from "#/hooks"
+import { ACTION_FLOW_TYPES, DappMode } from "#/types"
 import { Alert, AlertIcon } from "../shared/Alert"
 import { TextMd } from "../shared/Typography"
 
@@ -22,11 +22,16 @@ const ICON_STYLES = {
 
 type WalletInteractionStep = "opening-wallet" | "awaiting-transaction"
 
+const CONTENT_BY_DAPP_MODE: Record<DappMode, string> = {
+  standalone: "wallet",
+  "ledger-live": "Ledger Device",
+}
+
 const DATA: Record<
   WalletInteractionStep,
   {
     header: string
-    description: (action: string) => string
+    description: (action: string, mode: DappMode) => string
     progressProps?: ProgressProps
   }
 > = {
@@ -37,7 +42,8 @@ const DATA: Record<
   },
   "awaiting-transaction": {
     header: "Awaiting signature confirmation",
-    description: () => "Waiting for your wallet to confirm the transaction.",
+    description: (_, mode: DappMode) =>
+      `Communicating with your ${CONTENT_BY_DAPP_MODE[mode]}...`,
     progressProps: { transform: "scaleX(-1)" },
   },
 }
@@ -50,6 +56,7 @@ export default function WalletInteractionModal({
   const actionType = useActionFlowType()
   const connector = useConnector()
   const { header, description, progressProps } = DATA[step]
+  const { embeddedApp } = useIsEmbed()
 
   return (
     <>
@@ -78,14 +85,14 @@ export default function WalletInteractionModal({
         <TextMd>
           {description(
             actionType === ACTION_FLOW_TYPES.STAKE ? "deposit" : "withdraw",
+            embeddedApp ?? "standalone",
           )}
         </TextMd>
         {step === "awaiting-transaction" && (
           <Alert variant="elevated">
             <AlertIcon />
             <AlertDescription>
               <TextMd>This may take up to a minute.</TextMd>
-              <TextMd>Don&apos;t close this window.</TextMd>
             </AlertDescription>
           </Alert>
         )}

diff --git a/dapp/src/hooks/index.ts b/dapp/src/hooks/index.ts
@@ -27,7 +27,6 @@ export { default as useMobileMode } from "./useMobileMode"
 export { default as useBitcoinRecoveryAddress } from "./useBitcoinRecoveryAddress"
 export { default as useIsFetchedWalletData } from "./useIsFetchedWalletData"
 export { default as useLocalStorage } from "./useLocalStorage"
-export { default as useDetectReferral } from "./useDetectReferral"
 export { default as useReferral } from "./useReferral"
 export { default as useMats } from "./useMats"
 export { default as useIsEmbed } from "./useIsEmbed"

diff --git a/dapp/src/hooks/useDetectReferral.ts b/dapp/src/hooks/useDetectReferral.ts
diff --git a/dapp/src/hooks/useInitApp.ts b/dapp/src/hooks/useInitApp.ts
@@ -4,7 +4,6 @@ import { useAccountsChangedOKX } from "./orangeKit/useAccountsChangedOKX"
 import { useInitDataFromSdk, useInitializeAcreSdk } from "./sdk"
 import { useSentry } from "./sentry"
 import useDetectEmbed from "./useDetectEmbed"
-import useDetectReferral from "./useDetectReferral"
 import { useDisconnectWallet } from "./useDisconnectWallet"
 import { useFetchBTCPriceUSD } from "./useFetchBTCPriceUSD"
 
@@ -13,7 +12,6 @@ export function useInitApp() {
   // useDetectThemeMode()
   useSentry()
   useDetectEmbed()
-  useDetectReferral()
   useInitializeAcreSdk()
   useInitDataFromSdk()
   useFetchBTCPriceUSD()

diff --git a/dapp/src/hooks/useLocalStorage.ts b/dapp/src/hooks/useLocalStorage.ts
@@ -1,4 +1,7 @@
-import { useLocalStorage as useRehooksLocalStorage } from "@rehooks/local-storage"
+import {
+  useLocalStorage as useRehooksLocalStorage,
+  writeStorage,
+} from "@rehooks/local-storage"
 
 export const parseLocalStorageValue = (value: string | null | undefined) => {
   if (
@@ -12,6 +15,8 @@ export const parseLocalStorageValue = (value: string | null | undefined) => {
   return value
 }
 
+export { writeStorage }
+
 export const getLocalStorageItem = (key: string): string | undefined => {
   const value = localStorage.getItem(key)
   return parseLocalStorageValue(value)