Merge branch 'main' into connection-alert

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.test.ts

@@ -0,0 +1,38 @@
+import { describe, expect, it, vi } from "vitest"
+import * as Sentry from "@sentry/react"
+import sentry from "./sentry"
+
+describe("sentry", () => {
+  describe("setUser", () => {
+    vi.mock("@sentry/react")
+
+    const testCases = [
+      { bitcoinAddress: undefined, expectedResult: null },
+      { bitcoinAddress: "", expectedResult: null },
+      { bitcoinAddress: " ", expectedResult: null },
+      {
+        bitcoinAddress: "17VZNX1SN5NtKa8UQFxwQbFeFc3iqRYhem",
+        expectedResult: { id: "1f520a9757" },
+      },
+      {
+        bitcoinAddress: "bc1qw508d6qejxtdg4y5r3zarvary0c5xw7kv8f3t4",
+        expectedResult: { id: "6cd42dab02" },
+      },
+      {
+        bitcoinAddress: "BC1QW508D6QEJXTDG4Y5R3ZARVARY0C5XW7KV8F3T4",
+        expectedResult: { id: "6cd42dab02" },
+      },
+    ]
+
+    describe.each(testCases)(
+      "when address is $bitcoinAddress",
+      ({ bitcoinAddress, expectedResult }) => {
+        it("should set expected user in Sentry", () => {
+          sentry.setUser(bitcoinAddress)
+
+          expect(Sentry.setUser).toHaveBeenCalledWith(expectedResult)
+        })
+      },
+    )
+  })
+})

dapp/src/sentry/index.ts → dapp/src/sentry.ts

@@ -1,4 +1,5 @@
 import * as Sentry from "@sentry/react"
+import { sha256, toUtf8Bytes } from "ethers"
 
 const initialize = (dsn: string) => {
   Sentry.init({
@@ -17,8 +18,26 @@ const initialize = (dsn: string) => {
   })
 }
 
+/**
+ * Sets the user in Sentry with an ID from hashed Bitcoin address.
+ * The Bitcoin address is first converted to lowercase and then hashed using SHA-256.
+ * The resulting hash is then converted to a hexadecimal string and the first 10
+ * characters are set as the user ID.
+ *
+ * @param bitcoinAddress - The Bitcoin address of the user. If undefined, the user
+ * is set to null in Sentry.
+ */
 const setUser = (bitcoinAddress: string | undefined) => {
-  Sentry.setUser(bitcoinAddress ? { id: bitcoinAddress } : null)
+  if (!bitcoinAddress) {
+    Sentry.setUser(null)
+    return
+  }
+
+  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 })
 }
 
 const captureException = (exception: unknown) =>

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)