From 28dddb5e29b415df0d249ab52f9206c8f876003c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ruveyda=20K=C4=B1=C5=9Fla?= Date: Thu, 31 Jul 2025 22:38:06 +0330 Subject: [PATCH 1/6] fix: remove overflow hidden --- src/components/CardItem/index.tsx | 3 ++- src/components/Modal/index.tsx | 15 ++++++++++++--- src/containers/BluxModal/content.tsx | 2 +- src/containers/Pages/Activity/index.tsx | 4 ++-- src/tailwind.css | 11 +++++++++++ 5 files changed, 28 insertions(+), 7 deletions(-) diff --git a/src/components/CardItem/index.tsx b/src/components/CardItem/index.tsx index 84f2a97..5efd682 100644 --- a/src/components/CardItem/index.tsx +++ b/src/components/CardItem/index.tsx @@ -103,6 +103,7 @@ const CardItem = ({ {variant === 'input' ? ( <> onSubmit?.(inputValue)} - className={`bluxcc:absolute bluxcc:right-0 bluxcc:flex bluxcc:h-8 bluxcc:w-[68px]! bluxcc:items-center bluxcc:justify-center bluxcc:border bluxcc:!text-sm bluxcc:font-medium bluxcc:transition-[border-radius,background,border-color] bluxcc:duration-150`} + className={`bluxcc:absolute bluxcc:right-0 bluxcc:flex bluxcc:h-8 bluxcc:w-[68px]! bluxcc:items-center bluxcc:justify-center bluxcc:border bluxcc:!text-sm bluxcc:font-medium bluxcc:transition-[border-radius,background,border-color] bluxcc:duration-200`} style={{ background: appearance.bgField, borderRadius: appearance.borderRadius, diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx index 8cfb832..d4f1030 100644 --- a/src/components/Modal/index.tsx +++ b/src/components/Modal/index.tsx @@ -87,7 +87,7 @@ const Modal = ({ onClick={(e) => e.target === e.currentTarget && handleClose(onClose)} >
-
+
, }, [Routes.OTP]: { - title: translate('enterConfirmationCodeTitle', lang), + title: '', Component: , }, [Routes.WRONG_NETWORK]: { diff --git a/src/containers/Pages/Activity/index.tsx b/src/containers/Pages/Activity/index.tsx index b657fe5..6f24d5b 100644 --- a/src/containers/Pages/Activity/index.tsx +++ b/src/containers/Pages/Activity/index.tsx @@ -73,7 +73,7 @@ const Activity: React.FC = () => { details.description = `${humanizeAmount(op.amount)} ${handleAssetText(op)}`; } else if ( op.type === - Horizon.HorizonApi.OperationResponseType.pathPaymentStrictSend || + Horizon.HorizonApi.OperationResponseType.pathPaymentStrictSend || op.type === Horizon.HorizonApi.OperationResponseType.pathPayment ) { console.log(op); @@ -90,7 +90,7 @@ const Activity: React.FC = () => { const isEmpty = !loading && transactionsDetails.length === 0; return ( -
+
{loading ? (
{t('loadingActivity')} diff --git a/src/tailwind.css b/src/tailwind.css index 72800c6..2a76b8f 100644 --- a/src/tailwind.css +++ b/src/tailwind.css @@ -153,3 +153,14 @@ #bluxcc-input[type='number'] { -moz-appearance: textfield !important; } + +#bluxcc-input:-webkit-autofill, +#bluxcc-input:-webkit-autofill:hover, +#bluxcc-input:-webkit-autofill:focus, +#bluxcc-input:-webkit-autofill:active { + -webkit-box-shadow: 0 0 0 1000px transparent inset !important; + box-shadow: 0 0 0 1000px transparent inset !important; + -webkit-text-fill-color: inherit !important; + color: inherit !important; + transition: background-color 5000s ease-in-out 0s !important; +} From 65b426461dcbd7719494fe6bb5c24adaa742ece1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ruveyda=20K=C4=B1=C5=9Fla?= Date: Fri, 1 Aug 2025 01:38:31 +0330 Subject: [PATCH 2/6] fix: restore overflow hidden --- src/components/Modal/index.tsx | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx index d4f1030..f572d28 100644 --- a/src/components/Modal/index.tsx +++ b/src/components/Modal/index.tsx @@ -98,12 +98,8 @@ const Modal = ({ ? `${isMobile ? height + 40 : height}px` : height, transition: heightReady - ? `height 300ms ease-in-out, border-radius 300ms, opacity 300ms ease-out${ - isMobile ? ', transform 300ms ease-out' : '' - }` - : `border-radius 300ms, opacity 300ms ease-out ${ - isMobile ? ', transform 300ms ease-out' : '' - }`, + ? `height 300ms ease-in-out, border-radius 300ms, opacity 300ms ease-out${isMobile ? ', transform 300ms ease-out' : ''}` + : `border-radius 300ms, opacity 300ms ease-out${isMobile ? ', transform 300ms ease-out' : ''}`, transform: isMobile ? isOpening ? 'translateY(100%)' @@ -120,7 +116,7 @@ const Modal = ({ outlineColor: appearance.borderColor, outlineWidth: appearance.borderWidth, borderRadius: appearance.borderRadius, - // overflow: heightReady ? 'visible' : 'hidden', + overflow: 'hidden', }} >
From 39244c63ae1a9019562589b22b1d3da300812bfa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ruveyda=20K=C4=B1=C5=9Fla?= Date: Fri, 1 Aug 2025 14:48:46 +0330 Subject: [PATCH 3/6] fix: remove transition from classname --- src/components/Modal/index.tsx | 4 ++-- src/constants/index.ts | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx index f572d28..f65b99c 100644 --- a/src/components/Modal/index.tsx +++ b/src/components/Modal/index.tsx @@ -87,7 +87,7 @@ const Modal = ({ onClick={(e) => e.target === e.currentTarget && handleClose(onClose)} >
Date: Fri, 1 Aug 2025 15:31:07 +0330 Subject: [PATCH 4/6] refactor: remove header from modal and added header to components --- src/components/{Modal => }/Header/index.tsx | 6 ++--- src/components/Modal/index.tsx | 27 +++------------------ src/containers/BluxModal/index.tsx | 14 +++++++---- 3 files changed, 15 insertions(+), 32 deletions(-) rename src/components/{Modal => }/Header/index.tsx (86%) diff --git a/src/components/Modal/Header/index.tsx b/src/components/Header/index.tsx similarity index 86% rename from src/components/Modal/Header/index.tsx rename to src/components/Header/index.tsx index a800b54..acdca2c 100644 --- a/src/components/Modal/Header/index.tsx +++ b/src/components/Header/index.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { ArrowLeft, Close } from '../../../assets/Icons'; -import { useProvider } from '../../../context/provider'; +import { ArrowLeft, Close } from '../../assets/Icons'; +import { useProvider } from '../../context/provider'; interface HeaderProps { icon?: 'info' | 'back'; @@ -41,7 +41,7 @@ const ModalHeader = ({
)} -

+

{title}

diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx index f65b99c..038e1c8 100644 --- a/src/components/Modal/index.tsx +++ b/src/components/Modal/index.tsx @@ -3,31 +3,20 @@ import React, { useEffect, useRef, useState } from 'react'; import { useProvider } from '../../context/provider'; import { useModalAnimation } from '../../hooks/useModalAnimation'; -import ModalHeader from './Header'; import ModalBackdrop from './Backdrop'; interface ModalProps { isOpen: boolean; onClose?: () => void; - onBack?: () => void; children: React.ReactNode; - icon?: 'info' | 'back'; - onInfo?: () => void; - closeButton?: boolean; - title: string; isSticky?: boolean; } const Modal = ({ isOpen, onClose = () => {}, - onBack, - onInfo, children, - title, - icon, isSticky = false, - closeButton = true, }: ModalProps) => { const [height, setHeight] = useState('auto'); const [isMobile, setIsMobile] = useState(false); @@ -52,11 +41,9 @@ const Modal = ({ useEffect(() => { if (!isOpen || !contentRef.current) return; - // Initialize height when modal opens setHeight(contentRef.current.offsetHeight); setHeightReady(true); - // Set up the resize observer to update height when content changes const resizeObserver = new ResizeObserver(() => { if (contentRef.current) { setHeight(contentRef.current.offsetHeight); @@ -98,8 +85,8 @@ const Modal = ({ ? `${isMobile ? height + 40 : height}px` : height, transition: heightReady - ? `height 300ms ease-in-out, border-radius 300ms, opacity 300ms ease-out, outline 300ms ease-out, color 300ms ease-out${isMobile ? ', transform 300ms ease-out' : ''}` - : `border-radius 300ms, opacity 300ms ease-out${isMobile ? ', transform 300ms ease-out' : ''}`, + ? `height 250ms ease-in-out, border-radius 250ms, opacity 250ms ease-out, outline 250ms ease-out, color 250ms ease-out${isMobile ? ', transform 250ms ease-out' : ''}` + : `border-radius 250ms, opacity 250ms ease-out${isMobile ? ', transform 250ms ease-out' : ''}`, transform: isMobile ? isOpening ? 'translateY(100%)' @@ -124,17 +111,9 @@ const Modal = ({ className={`bluxcc:px-6 bluxcc:pb-4`} style={{ opacity: heightReady ? 1 : 0, - transition: 'opacity 300ms ease-in-out', + transition: 'opacity 250ms ease-in-out', }} > - handleClose(onClose)} - /> {children}
diff --git a/src/containers/BluxModal/index.tsx b/src/containers/BluxModal/index.tsx index e0b0d73..7878d96 100644 --- a/src/containers/BluxModal/index.tsx +++ b/src/containers/BluxModal/index.tsx @@ -6,6 +6,7 @@ import { useProvider } from '../../context/provider'; import { Routes } from '../../types'; import { getModalContent } from './content'; import { LanguageKey } from '../../constants/locales'; +import Header from '../../components/Header'; interface BluxModalProps { isOpen: boolean; @@ -72,13 +73,16 @@ export default function BluxModal({ isOpen, closeModal }: BluxModalProps) { return ( {} : handleCloseModal} - title={title} isSticky={isSticky} - icon={modalIcon} - closeButton={!showCloseModalIcon} + onClose={isSticky ? () => {} : handleCloseModal} > +
{} : handleCloseModal} + title={title} + icon={modalIcon} + closeButton={!showCloseModalIcon} + /> {Component} ); From cc5de5ed39788431437f0e1e839aef00c6c93d7f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ruveyda=20K=C4=B1=C5=9Fla?= Date: Fri, 1 Aug 2025 16:47:03 +0330 Subject: [PATCH 5/6] fix: refactor modal component --- src/components/Header/index.tsx | 6 +-- src/components/Modal/index.tsx | 64 ++++++++--------------- src/containers/BluxModal/index.tsx | 10 ++-- src/containers/Pages/OnBoarding/index.tsx | 2 +- src/hooks/useDynamicHeight.ts | 28 ++++++++++ src/hooks/useIsMobile.ts | 14 +++++ 6 files changed, 72 insertions(+), 52 deletions(-) create mode 100644 src/hooks/useDynamicHeight.ts create mode 100644 src/hooks/useIsMobile.ts diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx index acdca2c..46c49ed 100644 --- a/src/components/Header/index.tsx +++ b/src/components/Header/index.tsx @@ -11,7 +11,7 @@ interface HeaderProps { onClose: () => void; } -const ModalHeader = ({ +const Header = ({ icon, onInfo, onBack, @@ -21,7 +21,7 @@ const ModalHeader = ({ }: HeaderProps) => { const context = useProvider(); return ( -
+
{icon === 'info' ? (
{ - const [height, setHeight] = useState('auto'); - const [isMobile, setIsMobile] = useState(false); - const [heightReady, setHeightReady] = useState(false); - - const contentRef = useRef(null); const context = useProvider(); + const contentRef = useRef(null); + + const isMobile = useIsMobile(); const { isOpening, isClosing, handleClose } = useModalAnimation(isOpen); + const { height, ready: heightReady } = useDynamicHeight(contentRef, [ + isOpen, + children, + ]); const { appearance } = context.value.config; - useEffect(() => { - const checkMobile = () => setIsMobile(window.innerWidth < 760); - - checkMobile(); - - window.addEventListener('resize', checkMobile); - - return () => window.removeEventListener('resize', checkMobile); - }, []); - - useEffect(() => { - if (!isOpen || !contentRef.current) return; - - setHeight(contentRef.current.offsetHeight); - setHeightReady(true); - - const resizeObserver = new ResizeObserver(() => { - if (contentRef.current) { - setHeight(contentRef.current.offsetHeight); - } - }); - - resizeObserver.observe(contentRef.current); - - return () => resizeObserver.disconnect(); - }, [isOpen, children]); - if (!isOpen) return null; return ( @@ -82,18 +59,19 @@ const Modal = ({ style={{ height: typeof height === 'number' - ? `${isMobile ? height + 40 : height}px` + ? `${isMobile ? height + 20 : height}px` : height, transition: heightReady - ? `height 250ms ease-in-out, border-radius 250ms, opacity 250ms ease-out, outline 250ms ease-out, color 250ms ease-out${isMobile ? ', transform 250ms ease-out' : ''}` - : `border-radius 250ms, opacity 250ms ease-out${isMobile ? ', transform 250ms ease-out' : ''}`, - transform: isMobile - ? isOpening + ? `height 250ms ease-in-out, border-radius 250ms, opacity 250ms ease-out, outline 250ms ease-out, color 250ms ease-out${ + isMobile ? ', transform 250ms ease-out' : '' + }` + : `border-radius 250ms, opacity 250ms ease-out${ + isMobile ? ', transform 250ms ease-out' : '' + }`, + transform: + isMobile && (isOpening || isClosing) ? 'translateY(100%)' - : isClosing - ? 'translateY(100%)' - : 'translateY(0%)' - : 'none', + : 'translateY(0%)', backgroundColor: appearance.background, opacity: isClosing && !isSticky ? '0' : '1', color: appearance.textColor, @@ -108,7 +86,7 @@ const Modal = ({ >
{ alt={value.config.appName} width={152} height={60} - className="bluxcc:max-h-[80px] bluxcc:max-w-[180px]" + className="bluxcc:max-h-[80px] bluxcc:max-w-[180px] bluxcc:select-none" loading="eager" decoding="async" draggable="false" diff --git a/src/hooks/useDynamicHeight.ts b/src/hooks/useDynamicHeight.ts new file mode 100644 index 0000000..5dee2bc --- /dev/null +++ b/src/hooks/useDynamicHeight.ts @@ -0,0 +1,28 @@ +import { useEffect, useState } from 'react'; + +export const useDynamicHeight = ( + ref: React.RefObject, + deps: React.DependencyList = [], +) => { + const [height, setHeight] = useState('auto'); + const [ready, setReady] = useState(false); + + useEffect(() => { + const el = ref.current; + if (!el) return; + + const updateHeight = () => { + setHeight(el.offsetHeight); + }; + + updateHeight(); + setReady(true); + + const observer = new ResizeObserver(updateHeight); + observer.observe(el); + + return () => observer.disconnect(); + }, deps); + + return { height, ready }; +}; diff --git a/src/hooks/useIsMobile.ts b/src/hooks/useIsMobile.ts new file mode 100644 index 0000000..5077647 --- /dev/null +++ b/src/hooks/useIsMobile.ts @@ -0,0 +1,14 @@ +import { useEffect, useState } from 'react'; + +export const useIsMobile = (breakpoint = 760) => { + const [isMobile, setIsMobile] = useState(false); + + useEffect(() => { + const update = () => setIsMobile(window.innerWidth < breakpoint); + update(); + window.addEventListener('resize', update); + return () => window.removeEventListener('resize', update); + }, [breakpoint]); + + return isMobile; +}; From d56d60849d5838c5e24787719274058b2744f50e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ruveyda=20K=C4=B1=C5=9Fla?= Date: Sat, 2 Aug 2025 16:52:52 +0330 Subject: [PATCH 6/6] fix: remove sms login option and fix icon colors --- src/components/CardItem/index.tsx | 2 +- src/components/Header/index.tsx | 6 ++++-- src/components/Modal/index.tsx | 1 - src/types/index.ts | 9 +-------- 4 files changed, 6 insertions(+), 12 deletions(-) diff --git a/src/components/CardItem/index.tsx b/src/components/CardItem/index.tsx index 5efd682..3797bfd 100644 --- a/src/components/CardItem/index.tsx +++ b/src/components/CardItem/index.tsx @@ -159,7 +159,7 @@ const CardItem = ({ {endArrow && ( - + )}
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx index 46c49ed..7e50348 100644 --- a/src/components/Header/index.tsx +++ b/src/components/Header/index.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { ArrowLeft, Close } from '../../assets/Icons'; import { useProvider } from '../../context/provider'; +import hexToRgba from '../../utils/hexToRgba'; interface HeaderProps { icon?: 'info' | 'back'; @@ -20,6 +21,7 @@ const Header = ({ onClose, }: HeaderProps) => { const context = useProvider(); + const { appearance } = context.value.config; return (
{icon === 'info' ? ( @@ -35,7 +37,7 @@ const Header = ({ onClick={onBack} className="bluxcc:flex bluxcc:size-5 bluxcc:cursor-pointer bluxcc:items-center bluxcc:justify-center" > - +
) : (
@@ -47,7 +49,7 @@ const Header = ({ {closeButton ? (
- +
) : (
diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx index b8cdd1d..c99f320 100644 --- a/src/components/Modal/index.tsx +++ b/src/components/Modal/index.tsx @@ -2,7 +2,6 @@ import React, { useRef } from 'react'; import { useProvider } from '../../context/provider'; import { useModalAnimation } from '../../hooks/useModalAnimation'; - import ModalBackdrop from './Backdrop'; import { useIsMobile } from '../../hooks/useIsMobile'; import { useDynamicHeight } from '../../hooks/useDynamicHeight'; diff --git a/src/types/index.ts b/src/types/index.ts index 743215c..c3e802e 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -73,14 +73,7 @@ export interface IProviderConfig { lang?: LanguageKey; showWalletUIs?: boolean; loginMethods?: Array< - | 'wallet' - | 'email' - | 'sms' - | 'google' - | 'twitter' - | 'discord' - | 'github' - | 'passkey' + 'wallet' | 'email' | 'google' | 'twitter' | 'discord' | 'github' | 'passkey' >; }