From df8e62291f9b7be85413542913714b431f871b0f Mon Sep 17 00:00:00 2001 From: Clement Mwimo Date: Tue, 28 Jul 2026 23:42:10 -0600 Subject: [PATCH 1/5] migrated ChevronLeft kyper --- src/components/GoBackButton.tsx | 10 +++++----- typings/kyper.d.ts | 1 - 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/src/components/GoBackButton.tsx b/src/components/GoBackButton.tsx index 7ed18fa92d..7b6b1e2620 100644 --- a/src/components/GoBackButton.tsx +++ b/src/components/GoBackButton.tsx @@ -3,7 +3,7 @@ import React, { forwardRef, useRef } from 'react' import PropTypes from 'prop-types' import { useTokens } from '@kyper/tokenprovider' import { IconButton } from '@mui/material' -import { ChevronLeft } from '@kyper/icon/ChevronLeft' +import { Icon } from '@mxenabled/mxui' import { __ } from 'src/utilities/Intl' @@ -25,10 +25,10 @@ export const GoBackButton = forwardRef((pr ref={ref ?? defaultRef} style={styles} > - ) diff --git a/typings/kyper.d.ts b/typings/kyper.d.ts index e9b6e8122a..70d635e1d7 100644 --- a/typings/kyper.d.ts +++ b/typings/kyper.d.ts @@ -17,7 +17,6 @@ declare module '@kyper/icon/Image' declare module '@kyper/icon/Health' declare module '@kyper/icon/Grid' declare module '@kyper/progressindicators' -declare module '@kyper/icon/ChevronLeft' declare module '@kyper/icon/Lock' declare module '@kyper/utilityrow' declare module '@kyper/hooks' From b21440de833ad2aeda20933f2c13c825e5e44eb2 Mon Sep 17 00:00:00 2001 From: Clement Mwimo Date: Wed, 29 Jul 2026 15:32:38 -0600 Subject: [PATCH 2/5] feat: use one back button accross the widget for consistency --- src/components/ConnectNavigationHeader.js | 47 +++------------ src/components/GoBackButton.tsx | 57 +++++++++++-------- .../__tests__/GoBackButton-test.tsx | 13 +++-- 3 files changed, 47 insertions(+), 70 deletions(-) diff --git a/src/components/ConnectNavigationHeader.js b/src/components/ConnectNavigationHeader.js index 6afe618fd0..30e832dfcc 100644 --- a/src/components/ConnectNavigationHeader.js +++ b/src/components/ConnectNavigationHeader.js @@ -1,23 +1,14 @@ import React, { useContext, useState, useEffect, useRef } from 'react' import PropTypes from 'prop-types' import { useSelector } from 'react-redux' -import { useTokens } from '@kyper/tokenprovider' - -import AppBar from '@mui/material/AppBar' -import Box from '@mui/material/Box' -import Toolbar from '@mui/material/Toolbar' -import IconButton from '@mui/material/IconButton' -import { Icon } from '@mxenabled/mxui' - import { __ } from 'src/utilities/Intl' import { STEPS } from 'src/const/Connect' import { PostMessageContext } from 'src/ConnectWidget' +import { GoBackButton } from 'src/components/GoBackButton' export const ConnectNavigationHeader = (props) => { const goBackButtonContainerRef = useRef() const postMessageFunctions = useContext(PostMessageContext) - const tokens = useTokens() - const sx = getStyles(tokens) const step = useSelector( (state) => state.connect.location[state.connect.location.length - 1]?.step ?? STEPS.SEARCH, ) @@ -65,24 +56,12 @@ export const ConnectNavigationHeader = (props) => { } return ( - - - - {shouldShowGlobalBackButton || showMobileBackButton ? ( - - - - ) : null} - - - + ) } @@ -90,15 +69,3 @@ ConnectNavigationHeader.propTypes = { connectGoBack: PropTypes.func.isRequired, stepComponentRef: PropTypes.object, } - -const getStyles = (tokens) => ({ - container: { flexGrow: 1 }, - appBar: { backgroundColor: tokens.BackgroundColor.Container, display: 'flex' }, - toolbar: { - padding: `0 ${tokens.Spacing.Medium}px`, - maxWidth: '368px', - left: '50%', - transform: 'translateX(-50%)', - }, - button: { color: tokens.TextColor.Default }, -}) diff --git a/src/components/GoBackButton.tsx b/src/components/GoBackButton.tsx index 7b6b1e2620..e13938473d 100644 --- a/src/components/GoBackButton.tsx +++ b/src/components/GoBackButton.tsx @@ -1,48 +1,55 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ import React, { forwardRef, useRef } from 'react' -import PropTypes from 'prop-types' import { useTokens } from '@kyper/tokenprovider' -import { IconButton } from '@mui/material' +import { AppBar, Box, IconButton, Toolbar, SxProps, Theme } from '@mui/material' import { Icon } from '@mxenabled/mxui' import { __ } from 'src/utilities/Intl' interface GoBackButtonProps { handleGoBack: () => void + shouldShowBackButton: boolean + toolbarSx?: SxProps } export const GoBackButton = forwardRef((props, ref) => { const defaultRef = useRef(null) - const { handleGoBack } = props + const { handleGoBack, shouldShowBackButton = true, toolbarSx } = props const tokens = useTokens() - const styles = getStyles(tokens) + const defaultStyles = getStyles(tokens) return ( - - - + + + + {shouldShowBackButton ? ( + + + + ) : null} + + + ) }) const getStyles = (tokens: any) => ({ - height: '44px', - margin: `0px ${tokens.Spacing.XSmall}px ${tokens.Spacing.XSmall}px -${tokens.Spacing.Medium}px`, - padding: `0px 8px`, - width: '44px', + container: { flexGrow: 1 }, + appBar: { backgroundColor: tokens.BackgroundColor.Container, display: 'flex' }, + toolbar: { + padding: `0 ${tokens.Spacing.Medium}px`, + maxWidth: '368px', + left: 0, + transform: 'translateX(-5%)', + }, + button: { color: tokens.TextColor.Default }, }) -GoBackButton.propTypes = { - handleGoBack: PropTypes.func.isRequired, -} - GoBackButton.displayName = 'GoBackButton' diff --git a/src/components/__tests__/GoBackButton-test.tsx b/src/components/__tests__/GoBackButton-test.tsx index 7c30c69efd..fdbc9a2157 100644 --- a/src/components/__tests__/GoBackButton-test.tsx +++ b/src/components/__tests__/GoBackButton-test.tsx @@ -3,24 +3,27 @@ import { render, screen, fireEvent } from 'src/utilities/testingLibrary' import { GoBackButton } from '../GoBackButton' describe('GoBackButton', () => { - const handleGoBack = vi.fn() + const defaultProps = { + handleGoBack: vi.fn(), + shouldShowBackButton: true, + } it('renders the go back button', () => { - render() + render() const button = screen.getByRole('button', { name: /back/i }) expect(button).toBeInTheDocument() }) it('navigates back when clicked', () => { - render() + render() const button = screen.getByRole('button', { name: /back/i }) fireEvent.click(button) - expect(handleGoBack).toHaveBeenCalled() + expect(defaultProps.handleGoBack).toHaveBeenCalled() }) it('is accessible', () => { - render() + render() const button = screen.getByRole('button', { name: /back/i }) expect(button).toHaveAttribute('aria-label', 'Go Back') }) From e4c64e699589be58bc288a68aae197382a5d02b8 Mon Sep 17 00:00:00 2001 From: Clement Mwimo Date: Wed, 29 Jul 2026 16:11:41 -0600 Subject: [PATCH 3/5] fixed failing test --- src/components/GoBackButton.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/GoBackButton.tsx b/src/components/GoBackButton.tsx index e13938473d..7a0076150d 100644 --- a/src/components/GoBackButton.tsx +++ b/src/components/GoBackButton.tsx @@ -8,13 +8,13 @@ import { __ } from 'src/utilities/Intl' interface GoBackButtonProps { handleGoBack: () => void - shouldShowBackButton: boolean + shouldShowBackButton?: boolean toolbarSx?: SxProps } export const GoBackButton = forwardRef((props, ref) => { const defaultRef = useRef(null) - const { handleGoBack, shouldShowBackButton = true, toolbarSx } = props + const { handleGoBack, shouldShowBackButton, toolbarSx } = props const tokens = useTokens() const defaultStyles = getStyles(tokens) From c96ca2879aac6f906c4ecb004bbe491a00b55420 Mon Sep 17 00:00:00 2001 From: Clement Mwimo Date: Wed, 29 Jul 2026 16:37:40 -0600 Subject: [PATCH 4/5] fixing a bug with showMobileBackButton --- src/components/ConnectNavigationHeader.js | 6 +++--- src/components/GoBackButton.tsx | 2 +- src/views/manualAccount/ManualAccountConnect-test.tsx | 2 ++ 3 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/components/ConnectNavigationHeader.js b/src/components/ConnectNavigationHeader.js index 30e832dfcc..bf058bd3bc 100644 --- a/src/components/ConnectNavigationHeader.js +++ b/src/components/ConnectNavigationHeader.js @@ -12,9 +12,9 @@ export const ConnectNavigationHeader = (props) => { const step = useSelector( (state) => state.connect.location[state.connect.location.length - 1]?.step ?? STEPS.SEARCH, ) - const showMobileBackButton = useSelector( - (state) => state.config.show_back_button && state.connect.location.length === 1, - ) + const showMobileBackButton = + useSelector((state) => state.config.show_back_button && state.connect.location.length === 1) || + false const [shouldShowGlobalBackButton, setShouldShowGlobalBackButton] = useState(false) useEffect(() => { diff --git a/src/components/GoBackButton.tsx b/src/components/GoBackButton.tsx index 7a0076150d..c7c8444440 100644 --- a/src/components/GoBackButton.tsx +++ b/src/components/GoBackButton.tsx @@ -14,7 +14,7 @@ interface GoBackButtonProps { export const GoBackButton = forwardRef((props, ref) => { const defaultRef = useRef(null) - const { handleGoBack, shouldShowBackButton, toolbarSx } = props + const { handleGoBack, shouldShowBackButton = true, toolbarSx = {} } = props const tokens = useTokens() const defaultStyles = getStyles(tokens) diff --git a/src/views/manualAccount/ManualAccountConnect-test.tsx b/src/views/manualAccount/ManualAccountConnect-test.tsx index 9d43d25dc4..5bdb03a537 100644 --- a/src/views/manualAccount/ManualAccountConnect-test.tsx +++ b/src/views/manualAccount/ManualAccountConnect-test.tsx @@ -236,6 +236,8 @@ describe('', () => { await addManualCheckingAccount(user) await screen.findByTestId('manual-account-success-header') + screen.debug() + expect(screen.queryByTestId('back-button')).not.toBeInTheDocument() }) }) From 549fcb7fc003cfdb7949d2bc9ea55f922f01f4d2 Mon Sep 17 00:00:00 2001 From: Clement Mwimo Date: Wed, 29 Jul 2026 16:39:20 -0600 Subject: [PATCH 5/5] remove unused code --- src/views/manualAccount/ManualAccountConnect-test.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/views/manualAccount/ManualAccountConnect-test.tsx b/src/views/manualAccount/ManualAccountConnect-test.tsx index 5bdb03a537..9d43d25dc4 100644 --- a/src/views/manualAccount/ManualAccountConnect-test.tsx +++ b/src/views/manualAccount/ManualAccountConnect-test.tsx @@ -236,8 +236,6 @@ describe('', () => { await addManualCheckingAccount(user) await screen.findByTestId('manual-account-success-header') - screen.debug() - expect(screen.queryByTestId('back-button')).not.toBeInTheDocument() }) })