diff --git a/src/components/CardItem/index.tsx b/src/components/CardItem/index.tsx index 84f2a97..3797bfd 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, @@ -158,7 +159,7 @@ const CardItem = ({ {endArrow && ( - + )} diff --git a/src/components/Modal/Header/index.tsx b/src/components/Header/index.tsx similarity index 65% rename from src/components/Modal/Header/index.tsx rename to src/components/Header/index.tsx index a800b54..7e50348 100644 --- a/src/components/Modal/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 { ArrowLeft, Close } from '../../assets/Icons'; +import { useProvider } from '../../context/provider'; +import hexToRgba from '../../utils/hexToRgba'; interface HeaderProps { icon?: 'info' | 'back'; @@ -11,7 +12,7 @@ interface HeaderProps { onClose: () => void; } -const ModalHeader = ({ +const Header = ({ icon, onInfo, onBack, @@ -20,8 +21,9 @@ const ModalHeader = ({ onClose, }: HeaderProps) => { const context = useProvider(); + const { appearance } = context.value.config; return ( -
+
{icon === 'info' ? (
- +
) : (
)} -

+

{title}

{closeButton ? (
- +
) : (
@@ -56,4 +58,4 @@ const ModalHeader = ({ ); }; -export default ModalHeader; +export default Header; diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx index 8cfb832..c99f320 100644 --- a/src/components/Modal/index.tsx +++ b/src/components/Modal/index.tsx @@ -1,73 +1,36 @@ -import React, { useEffect, useRef, useState } from 'react'; +import React, { useRef } from 'react'; import { useProvider } from '../../context/provider'; import { useModalAnimation } from '../../hooks/useModalAnimation'; - -import ModalHeader from './Header'; import ModalBackdrop from './Backdrop'; +import { useIsMobile } from '../../hooks/useIsMobile'; +import { useDynamicHeight } from '../../hooks/useDynamicHeight'; 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); - 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; - - // 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); - } - }); - - resizeObserver.observe(contentRef.current); - - return () => resizeObserver.disconnect(); - }, [isOpen, children]); - if (!isOpen) return null; return ( @@ -87,7 +50,7 @@ const Modal = ({ onClick={(e) => e.target === e.currentTarget && handleClose(onClose)} >
-
- handleClose(onClose)} - /> +
{children}
diff --git a/src/constants/index.ts b/src/constants/index.ts index 5609a66..89d0f09 100644 --- a/src/constants/index.ts +++ b/src/constants/index.ts @@ -9,7 +9,7 @@ export const defaultLightTheme: IAppearance = { accent: '#0c1083', borderWidth: '1px', bgField: '#ffffff', - borderRadius: '32px', + borderRadius: '24px', textColor: '#000000', background: '#ffffff', includeBorders: true, @@ -23,7 +23,7 @@ export const defaultDarkTheme: IAppearance = { accent: '#ffffff', borderWidth: '1px', bgField: '#1a1a1a', - borderRadius: '32px', + borderRadius: '24px', textColor: '#ffffff', background: '#000000', includeBorders: true, diff --git a/src/containers/BluxModal/content.tsx b/src/containers/BluxModal/content.tsx index 2b654cc..0d98a1b 100644 --- a/src/containers/BluxModal/content.tsx +++ b/src/containers/BluxModal/content.tsx @@ -50,7 +50,7 @@ export const getModalContent = ( Component: , }, [Routes.OTP]: { - title: translate('enterConfirmationCodeTitle', lang), + title: '', Component: , }, [Routes.WRONG_NETWORK]: { diff --git a/src/containers/BluxModal/index.tsx b/src/containers/BluxModal/index.tsx index e0b0d73..95af3a0 100644 --- a/src/containers/BluxModal/index.tsx +++ b/src/containers/BluxModal/index.tsx @@ -1,6 +1,7 @@ import React from 'react'; import Modal from '../../components/Modal'; +import Header from '../../components/Header'; import { useProvider } from '../../context/provider'; import { Routes } from '../../types'; @@ -60,25 +61,28 @@ export default function BluxModal({ isOpen, closeModal }: BluxModalProps) { } } }; - const modalContent = getModalContent(value.config.lang as LanguageKey); - - const { title, Component, isSticky } = modalContent[route]; - const showCloseModalIcon = route === Routes.WRONG_NETWORK || route === Routes.WAITING || route === Routes.SUCCESSFUL; + const modalContent = getModalContent(value.config.lang as LanguageKey); + + const { title, Component, isSticky } = modalContent[route]; + return ( {} : handleCloseModal} - title={title} isSticky={isSticky} - icon={modalIcon} - closeButton={!showCloseModalIcon} + onClose={isSticky ? () => {} : handleCloseModal} > +
{} : handleCloseModal} + title={title} + icon={modalIcon} + closeButton={!showCloseModalIcon} + /> {Component} ); 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/containers/Pages/OnBoarding/index.tsx b/src/containers/Pages/OnBoarding/index.tsx index 8632908..e111dd4 100644 --- a/src/containers/Pages/OnBoarding/index.tsx +++ b/src/containers/Pages/OnBoarding/index.tsx @@ -104,7 +104,7 @@ const OnBoarding = () => { 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; +}; 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; +} 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' >; }