Merge branch 'main' into dapp-tests-reorg

dapp/package.json

@@ -35,7 +35,6 @@
     "@tanstack/react-query-devtools": "^5.49.2",
     "axios": "^1.6.7",
     "bignumber.js": "^9.1.2",
-    "crypto-js": "^4.2.0",
     "ethers": "^6.10.0",
     "formik": "^2.4.5",
     "framer-motion": "^10.16.5",
@@ -53,7 +52,6 @@
   "devDependencies": {
     "@sentry/vite-plugin": "^2.22.5",
     "@thesis-co/eslint-config": "github:thesis/eslint-config#7b9bc8c",
-    "@types/crypto-js": "^4.2.2",
     "@types/luxon": "^3.4.2",
     "@types/react": "^18.2.38",
     "@types/react-dom": "^18.2.17",

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)
       },
     })

dapp/src/components/MezoBeehiveModal.tsx

@@ -42,7 +42,7 @@ function MezoBeehiveModalBase() {
         </Flex>
       </ModalHeader>
 
-      <ModalBody gap={6} pb={8} overflowX="hidden">
+      <ModalBody gap={6} pb={{ base: 0, sm: 8 }} overflowX="hidden">
         <VStack spacing={1}>
           {data && (
             <HStack>

dapp/src/components/TransactionModal/ActionFormModal.tsx

@@ -107,7 +107,7 @@ function ActionFormModal({ type }: { type: ActionFlowType }) {
     <>
       {!isLoading && <ModalCloseButton />}
       <ModalHeader>{heading}</ModalHeader>
-      <ModalBody px={10}>
+      <ModalBody>
         <Box w="100%">
           <FormComponent onSubmitForm={handleSubmitFormWrapper} />
         </Box>

dapp/src/components/TransactionModal/ResumeModal.tsx

@@ -22,7 +22,7 @@ export default function ResumeModal({ closeModal }: BaseModalProps) {
 
   return (
     <>
-      <ModalHeader pb={6} textAlign="center">
+      <ModalHeader pb={{ sm: 6 }} textAlign="center">
         Paused
       </ModalHeader>
       <ModalBody textAlign="start" py={6} mx={3} gap={4}>

dapp/src/components/TransactionModal/SuccessModal.tsx

@@ -32,7 +32,7 @@ export default function SuccessModal({ type }: SuccessModalProps) {
   return (
     <>
       <ModalCloseButton />
-      <ModalHeader textAlign="center" pt={16}>
+      <ModalHeader textAlign="center" pt={{ sm: 16 }}>
         {ACTION_FLOW_TYPES.UNSTAKE === type
           ? "Withdrawal initiated!"
           : "Deposit received!"}

dapp/src/components/TransactionModal/WalletInteractionModal.tsx

@@ -61,7 +61,7 @@ export default function WalletInteractionModal({
   return (
     <>
       {step === "opening-wallet" && <ModalCloseButton />}
-      <ModalHeader textAlign="center" pt={16} pb={12}>
+      <ModalHeader textAlign="center" pt={{ sm: 16 }} pb={{ base: 4, sm: 12 }}>
         {header}
       </ModalHeader>
       <ModalBody gap={12}>

dapp/src/components/WelcomeModal.tsx

@@ -136,7 +136,7 @@ function WelcomeModalBase({ closeModal }: BaseModalProps) {
           </TextSm>
           {activeStepData.title}
         </ModalHeader>
-        <ModalBody textAlign="left" display="block" color="brown.80" px="10">
+        <ModalBody textAlign="left" display="block" color="brown.80">
           {activeStepData.content(embeddedApp)}
         </ModalBody>
         <ModalFooter

dapp/src/sentry.ts

@@ -1,5 +1,5 @@
 import * as Sentry from "@sentry/react"
-import * as CryptoJS from "crypto-js"
+import { sha256, toUtf8Bytes } from "ethers"
 
 const initialize = (dsn: string) => {
   Sentry.init({
@@ -33,11 +33,9 @@ const setUser = (bitcoinAddress: string | undefined) => {
     return
   }
 
-  const hashedBitcoinAddress = CryptoJS.SHA256(
-    bitcoinAddress.toLowerCase(),
-  ).toString(CryptoJS.enc.Hex)
-
-  const id = hashedBitcoinAddress.slice(0, 10)
+  const hashedBitcoinAddress = sha256(toUtf8Bytes(bitcoinAddress.toLowerCase()))
+  // Remove the 0x prefix and take the first 10 characters.
+  const id = hashedBitcoinAddress.slice(2, 12)
 
   Sentry.setUser({ id })
 }

dapp/src/theme/Modal.ts

@@ -2,23 +2,24 @@ import { modalAnatomy as parts } from "@chakra-ui/anatomy"
 import { createMultiStyleConfigHelpers, defineStyle } from "@chakra-ui/react"
 
 const baseStyleContainer = defineStyle({
-  px: 8,
+  px: { base: 3, sm: 8 },
 })
 
 const baseStyleDialog = defineStyle({
   marginTop: { base: 12, sm: "var(--chakra-space-modal_shift)" },
   marginBottom: 8,
   boxShadow: "none",
   borderRadius: "xl",
+  p: { base: 5, sm: 0 },
   bg: "gold.100",
   border: "none",
 })
 
 const baseCloseButton = defineStyle({
-  top: -7,
-  right: -7,
-  boxSize: 7,
-  rounded: "100%",
+  top: { base: 3, sm: -7 },
+  right: { base: 3, sm: -7 },
+  boxSize: { sm: 7 },
+  rounded: { sm: "100%" },
   bg: "opacity.white.5",
 
   _hover: {
@@ -37,8 +38,8 @@ const baseStyleHeader = defineStyle({
   fontSize: "xl",
   lineHeight: "xl",
   fontWeight: "bold",
-  pt: 10,
-  px: 10,
+  pt: { sm: 10 },
+  px: { sm: 10 },
   pb: 8,
 })
 
@@ -50,15 +51,15 @@ const baseStyleBody = defineStyle({
   alignItems: "center",
   gap: 6,
   pt: 0,
-  px: 8,
-  pb: 10,
+  px: { base: 0, sm: 10 },
+  pb: { base: 0, sm: 10 },
 })
 
 const baseStyleFooter = defineStyle({
   flexDirection: "column",
   gap: 6,
-  px: 8,
-  pb: 10,
+  px: { base: 0, sm: 8 },
+  pb: { base: 0, sm: 10 },
 })
 
 const multiStyleConfig = createMultiStyleConfigHelpers(parts.keys)