From d94b6c203230beb4ffbdfb14b418226e325e83d9 Mon Sep 17 00:00:00 2001 From: Rafal Czajkowski Date: Tue, 26 Nov 2024 12:31:04 +0100 Subject: [PATCH 1/7] Update modal styles on mobile --- .../TransactionModal/ActionFormModal.tsx | 2 +- .../TransactionModal/ResumeModal.tsx | 2 +- .../TransactionModal/SuccessModal.tsx | 2 +- .../WalletInteractionModal.tsx | 2 +- dapp/src/theme/Modal.ts | 32 +++++++++++-------- dapp/src/theme/utils/semanticTokens.ts | 15 +++++++-- 6 files changed, 34 insertions(+), 21 deletions(-) diff --git a/dapp/src/components/TransactionModal/ActionFormModal.tsx b/dapp/src/components/TransactionModal/ActionFormModal.tsx index 53ab0e42b..8c50be64e 100644 --- a/dapp/src/components/TransactionModal/ActionFormModal.tsx +++ b/dapp/src/components/TransactionModal/ActionFormModal.tsx @@ -107,7 +107,7 @@ function ActionFormModal({ type }: { type: ActionFlowType }) { <> {!isLoading && } {heading} - + diff --git a/dapp/src/components/TransactionModal/ResumeModal.tsx b/dapp/src/components/TransactionModal/ResumeModal.tsx index 16cb45999..bc2159265 100644 --- a/dapp/src/components/TransactionModal/ResumeModal.tsx +++ b/dapp/src/components/TransactionModal/ResumeModal.tsx @@ -22,7 +22,7 @@ export default function ResumeModal({ closeModal }: BaseModalProps) { return ( <> - + Paused diff --git a/dapp/src/components/TransactionModal/SuccessModal.tsx b/dapp/src/components/TransactionModal/SuccessModal.tsx index e03d49658..5390a7e7f 100644 --- a/dapp/src/components/TransactionModal/SuccessModal.tsx +++ b/dapp/src/components/TransactionModal/SuccessModal.tsx @@ -32,7 +32,7 @@ export default function SuccessModal({ type }: SuccessModalProps) { return ( <> - + {ACTION_FLOW_TYPES.UNSTAKE === type ? "Withdrawal initiated!" : "Deposit received!"} diff --git a/dapp/src/components/TransactionModal/WalletInteractionModal.tsx b/dapp/src/components/TransactionModal/WalletInteractionModal.tsx index dbbf4c53b..84a8469aa 100644 --- a/dapp/src/components/TransactionModal/WalletInteractionModal.tsx +++ b/dapp/src/components/TransactionModal/WalletInteractionModal.tsx @@ -54,7 +54,7 @@ export default function WalletInteractionModal({ return ( <> {step === "opening-wallet" && } - + {header} diff --git a/dapp/src/theme/Modal.ts b/dapp/src/theme/Modal.ts index fd79f1bdc..bd1846073 100644 --- a/dapp/src/theme/Modal.ts +++ b/dapp/src/theme/Modal.ts @@ -2,23 +2,27 @@ import { modalAnatomy as parts } from "@chakra-ui/anatomy" import { createMultiStyleConfigHelpers, defineStyle } from "@chakra-ui/react" const baseStyleContainer = defineStyle({ - px: 8, + px: { base: 3, md: 8 }, }) const baseStyleDialog = defineStyle({ - marginTop: { base: 12, sm: "var(--chakra-space-modal_shift)" }, + marginTop: { + base: "var(--chakra-space-modal_shift)", + md: "var(--chakra-space-modal_shift_xl)", + }, marginBottom: 8, boxShadow: "none", borderRadius: "xl", + p: { base: 5 }, bg: "gold.100", border: "none", }) const baseCloseButton = defineStyle({ - top: -7, - right: -7, - boxSize: 7, - rounded: "100%", + top: { base: 3, md: -7 }, + right: { base: 3, md: -7 }, + boxSize: { md: 7 }, + rounded: { md: "100%" }, bg: "opacity.white.5", _hover: { @@ -37,9 +41,9 @@ const baseStyleHeader = defineStyle({ fontSize: "xl", lineHeight: "xl", fontWeight: "bold", - pt: 10, - px: 10, - pb: 8, + pt: { md: 10 }, + px: { md: 10 }, + mb: 8, }) const baseStyleBody = defineStyle({ @@ -50,15 +54,15 @@ const baseStyleBody = defineStyle({ alignItems: "center", gap: 6, pt: 0, - px: 8, - pb: 10, + px: { base: 0, md: 8 }, + pb: { base: 0, md: 10 }, }) const baseStyleFooter = defineStyle({ flexDirection: "column", gap: 6, - px: 8, - pb: 10, + px: { base: 0, md: 8 }, + pb: { base: 0, md: 10 }, }) const multiStyleConfig = createMultiStyleConfigHelpers(parts.keys) @@ -87,7 +91,7 @@ const sizeXl = multiStyleConfig.definePartsStyle({ }) const sizeLg = multiStyleConfig.definePartsStyle({ - dialog: { w: "30rem" }, + dialog: { w: { xs: "95%" } }, }) const sizeFull = multiStyleConfig.definePartsStyle({ diff --git a/dapp/src/theme/utils/semanticTokens.ts b/dapp/src/theme/utils/semanticTokens.ts index 8ad1298ba..dfd56d42b 100644 --- a/dapp/src/theme/utils/semanticTokens.ts +++ b/dapp/src/theme/utils/semanticTokens.ts @@ -1,8 +1,17 @@ +const headerHeight = 28 +const headerHeightXl = 36 + +const modalShiftToHeaderHeight = { + [headerHeight]: 28, + [headerHeightXl]: "9.25rem", +} + export const semanticTokens = { space: { - header_height: 28, - header_height_xl: 36, - modal_shift: "9.75rem", // 156px + header_height: headerHeight, + header_height_xl: headerHeightXl, + modal_shift: modalShiftToHeaderHeight[headerHeight], + modal_shift_xl: modalShiftToHeaderHeight[headerHeightXl], dashboard_card_padding: 5, }, sizes: { From a69c04b4d62c504624dace04fd90e112a98f98f2 Mon Sep 17 00:00:00 2001 From: Rafal Czajkowski Date: Wed, 27 Nov 2024 14:28:16 +0100 Subject: [PATCH 2/7] Update breakpoints for modal styles --- .../TransactionModal/ResumeModal.tsx | 2 +- .../TransactionModal/SuccessModal.tsx | 2 +- .../WalletInteractionModal.tsx | 2 +- dapp/src/theme/Modal.ts | 25 ++++++++----------- dapp/src/theme/utils/semanticTokens.ts | 15 +++-------- 5 files changed, 17 insertions(+), 29 deletions(-) diff --git a/dapp/src/components/TransactionModal/ResumeModal.tsx b/dapp/src/components/TransactionModal/ResumeModal.tsx index bc2159265..3547673dc 100644 --- a/dapp/src/components/TransactionModal/ResumeModal.tsx +++ b/dapp/src/components/TransactionModal/ResumeModal.tsx @@ -22,7 +22,7 @@ export default function ResumeModal({ closeModal }: BaseModalProps) { return ( <> - + Paused diff --git a/dapp/src/components/TransactionModal/SuccessModal.tsx b/dapp/src/components/TransactionModal/SuccessModal.tsx index 5390a7e7f..7fa7f8d31 100644 --- a/dapp/src/components/TransactionModal/SuccessModal.tsx +++ b/dapp/src/components/TransactionModal/SuccessModal.tsx @@ -32,7 +32,7 @@ export default function SuccessModal({ type }: SuccessModalProps) { return ( <> - + {ACTION_FLOW_TYPES.UNSTAKE === type ? "Withdrawal initiated!" : "Deposit received!"} diff --git a/dapp/src/components/TransactionModal/WalletInteractionModal.tsx b/dapp/src/components/TransactionModal/WalletInteractionModal.tsx index 84a8469aa..e7add85ea 100644 --- a/dapp/src/components/TransactionModal/WalletInteractionModal.tsx +++ b/dapp/src/components/TransactionModal/WalletInteractionModal.tsx @@ -54,7 +54,7 @@ export default function WalletInteractionModal({ return ( <> {step === "opening-wallet" && } - + {header} diff --git a/dapp/src/theme/Modal.ts b/dapp/src/theme/Modal.ts index bd1846073..589d0f691 100644 --- a/dapp/src/theme/Modal.ts +++ b/dapp/src/theme/Modal.ts @@ -6,10 +6,7 @@ const baseStyleContainer = defineStyle({ }) const baseStyleDialog = defineStyle({ - marginTop: { - base: "var(--chakra-space-modal_shift)", - md: "var(--chakra-space-modal_shift_xl)", - }, + marginTop: { base: 12, sm: "var(--chakra-space-modal_shift)" }, marginBottom: 8, boxShadow: "none", borderRadius: "xl", @@ -19,10 +16,10 @@ const baseStyleDialog = defineStyle({ }) const baseCloseButton = defineStyle({ - top: { base: 3, md: -7 }, - right: { base: 3, md: -7 }, - boxSize: { md: 7 }, - rounded: { md: "100%" }, + top: { base: 3, sm: -7 }, + right: { base: 3, sm: -7 }, + boxSize: { sm: 7 }, + rounded: { sm: "100%" }, bg: "opacity.white.5", _hover: { @@ -41,8 +38,8 @@ const baseStyleHeader = defineStyle({ fontSize: "xl", lineHeight: "xl", fontWeight: "bold", - pt: { md: 10 }, - px: { md: 10 }, + pt: { sm: 10 }, + px: { sm: 10 }, mb: 8, }) @@ -54,15 +51,15 @@ const baseStyleBody = defineStyle({ alignItems: "center", gap: 6, pt: 0, - px: { base: 0, md: 8 }, - pb: { base: 0, md: 10 }, + px: { base: 0, sm: 8 }, + pb: { base: 0, sm: 10 }, }) const baseStyleFooter = defineStyle({ flexDirection: "column", gap: 6, - px: { base: 0, md: 8 }, - pb: { base: 0, md: 10 }, + px: { base: 0, sm: 8 }, + pb: { base: 0, sm: 10 }, }) const multiStyleConfig = createMultiStyleConfigHelpers(parts.keys) diff --git a/dapp/src/theme/utils/semanticTokens.ts b/dapp/src/theme/utils/semanticTokens.ts index dfd56d42b..8ad1298ba 100644 --- a/dapp/src/theme/utils/semanticTokens.ts +++ b/dapp/src/theme/utils/semanticTokens.ts @@ -1,17 +1,8 @@ -const headerHeight = 28 -const headerHeightXl = 36 - -const modalShiftToHeaderHeight = { - [headerHeight]: 28, - [headerHeightXl]: "9.25rem", -} - export const semanticTokens = { space: { - header_height: headerHeight, - header_height_xl: headerHeightXl, - modal_shift: modalShiftToHeaderHeight[headerHeight], - modal_shift_xl: modalShiftToHeaderHeight[headerHeightXl], + header_height: 28, + header_height_xl: 36, + modal_shift: "9.75rem", // 156px dashboard_card_padding: 5, }, sizes: { From 552990dcd0acfd54c1633f914efd3933d0a7d7b6 Mon Sep 17 00:00:00 2001 From: Jakub Date: Wed, 27 Nov 2024 22:35:16 +0100 Subject: [PATCH 3/7] Log connection error We are now logging connection errors to the console. This will help us debug connection issues, as the error will be reported to Sentry. We're handling only the `DEFAULT` error type, as the other types are reported to the user in a modal. --- .../components/ConnectWalletModal/ConnectWalletButton.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/dapp/src/components/ConnectWalletModal/ConnectWalletButton.tsx b/dapp/src/components/ConnectWalletModal/ConnectWalletButton.tsx index 0747fdc8e..8b12b6236 100644 --- 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) }, }) From 6f92877d7db605e93c9523bd1c6f98b6554e01c8 Mon Sep 17 00:00:00 2001 From: Rafal Czajkowski Date: Thu, 28 Nov 2024 12:36:59 +0100 Subject: [PATCH 4/7] Improve padding in modal component on mobile --- dapp/src/components/MezoBeehiveModal.tsx | 2 +- dapp/src/theme/Modal.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/dapp/src/components/MezoBeehiveModal.tsx b/dapp/src/components/MezoBeehiveModal.tsx index ccc88a5e0..18ca145d8 100644 --- a/dapp/src/components/MezoBeehiveModal.tsx +++ b/dapp/src/components/MezoBeehiveModal.tsx @@ -42,7 +42,7 @@ function MezoBeehiveModalBase() { - + {data && ( diff --git a/dapp/src/theme/Modal.ts b/dapp/src/theme/Modal.ts index 589d0f691..5008352a8 100644 --- a/dapp/src/theme/Modal.ts +++ b/dapp/src/theme/Modal.ts @@ -10,7 +10,7 @@ const baseStyleDialog = defineStyle({ marginBottom: 8, boxShadow: "none", borderRadius: "xl", - p: { base: 5 }, + p: { base: 5, sm: 0 }, bg: "gold.100", border: "none", }) @@ -40,7 +40,7 @@ const baseStyleHeader = defineStyle({ fontWeight: "bold", pt: { sm: 10 }, px: { sm: 10 }, - mb: 8, + pb: 8, }) const baseStyleBody = defineStyle({ From 41c0fd96f70b983486ade2b3048adc87ee9fcc02 Mon Sep 17 00:00:00 2001 From: Rafal Czajkowski Date: Thu, 28 Nov 2024 12:50:21 +0100 Subject: [PATCH 5/7] Do not change the modal width There is no need to change the modal width - we should use the previous value. --- dapp/src/theme/Modal.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dapp/src/theme/Modal.ts b/dapp/src/theme/Modal.ts index 5008352a8..506c7d038 100644 --- a/dapp/src/theme/Modal.ts +++ b/dapp/src/theme/Modal.ts @@ -88,7 +88,7 @@ const sizeXl = multiStyleConfig.definePartsStyle({ }) const sizeLg = multiStyleConfig.definePartsStyle({ - dialog: { w: { xs: "95%" } }, + dialog: { w: "30rem" }, }) const sizeFull = multiStyleConfig.definePartsStyle({ From 679db3f05a26befb392b3ab2cdfb77eed39155d7 Mon Sep 17 00:00:00 2001 From: Jakub Date: Thu, 28 Nov 2024 12:50:53 +0100 Subject: [PATCH 6/7] Use existing ethers library to calculate hash We don't need to introduce another crypto-js library to calculate the hash. We can use the existing ethers library. --- dapp/package.json | 2 -- dapp/src/sentry.ts | 10 ++++------ pnpm-lock.yaml | 16 ---------------- 3 files changed, 4 insertions(+), 24 deletions(-) diff --git a/dapp/package.json b/dapp/package.json index 9914048db..b384d7b43 100644 --- a/dapp/package.json +++ b/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", diff --git a/dapp/src/sentry.ts b/dapp/src/sentry.ts index 6217c7ea0..f3707ede4 100644 --- a/dapp/src/sentry.ts +++ b/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 }) } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9ce741fed..53c684f24 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -74,9 +74,6 @@ importers: bignumber.js: specifier: ^9.1.2 version: 9.1.2 - crypto-js: - specifier: ^4.2.0 - version: 4.2.0 ethers: specifier: ^6.10.0 version: 6.13.0(bufferutil@4.0.8)(utf-8-validate@5.0.10) @@ -123,9 +120,6 @@ importers: '@thesis-co/eslint-config': specifier: github:thesis/eslint-config#7b9bc8c version: https://codeload.github.com/thesis/eslint-config/tar.gz/7b9bc8c(eslint@8.57.0)(prettier@3.3.2)(typescript@5.4.5) - '@types/crypto-js': - specifier: ^4.2.2 - version: 4.2.2 '@types/luxon': specifier: ^3.4.2 version: 3.4.2 @@ -3563,9 +3557,6 @@ packages: '@types/country-data@0.0.0': resolution: {integrity: sha512-lIxCk6G7AwmUagQ4gIQGxUBnvAq664prFD9nSAz6dgd1XmBXBtZABV/op+QsJsIyaP1GZsf/iXhYKHX3azSRCw==} - '@types/crypto-js@4.2.2': - resolution: {integrity: sha512-sDOLlVbHhXpAUAL0YHDUUwDZf3iN4Bwi4W6a0W0b+QcAezUbRtH4FVb+9J4h+XFPW7l/gQ9F8qC7P+Ec4k8QVQ==} - '@types/debug@4.1.12': resolution: {integrity: sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==} @@ -5166,9 +5157,6 @@ packages: crypto-js@3.3.0: resolution: {integrity: sha512-DIT51nX0dCfKltpRiXV+/TVZq+Qq2NgF4644+K7Ttnla7zEzqc+kjJyiB96BHNyUTBxyjzRcZYpUdZa+QAqi6Q==} - crypto-js@4.2.0: - resolution: {integrity: sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==} - css-box-model@1.2.1: resolution: {integrity: sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw==} @@ -16095,8 +16083,6 @@ snapshots: '@types/country-data@0.0.0': {} - '@types/crypto-js@4.2.2': {} - '@types/debug@4.1.12': dependencies: '@types/ms': 0.7.34 @@ -18491,8 +18477,6 @@ snapshots: crypto-js@3.3.0: {} - crypto-js@4.2.0: {} - css-box-model@1.2.1: dependencies: tiny-invariant: 1.3.3 From b37293eec0dfc75fb88b8d8fc3c3c344d316f4fc Mon Sep 17 00:00:00 2001 From: Rafal Czajkowski Date: Thu, 28 Nov 2024 13:26:59 +0100 Subject: [PATCH 7/7] Update `ModalBody` horizontal padding The `ModalHeader` and `ModalBoyd` components should have the same horizontal padding. --- dapp/src/components/WelcomeModal.tsx | 2 +- dapp/src/theme/Modal.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/dapp/src/components/WelcomeModal.tsx b/dapp/src/components/WelcomeModal.tsx index d29d17fdf..b68a6ce75 100644 --- a/dapp/src/components/WelcomeModal.tsx +++ b/dapp/src/components/WelcomeModal.tsx @@ -136,7 +136,7 @@ function WelcomeModalBase({ closeModal }: BaseModalProps) { {activeStepData.title} - + {activeStepData.content(embeddedApp)}