Skip to content

Jameson/CT-2463 CT-2463 CT-2463 CT-2465 CT-2466 #369

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Jameson13B merged 3 commits into from
Aug 21, 2026
Merged

Jameson/CT-2463 CT-2463 CT-2463 CT-2465 CT-2466 #369

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b12ae55
feat: Convetrted the four Kyper icons to MXUI <Icon name="…" /> in th…
Jameson13B Aug 20, 2026
675144d
remove test asset
Jameson13B Aug 20, 2026
bec761d
feat: changed Kyper icons to MXUI icons
Jameson13B Aug 21, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 6 additions & 9 deletions src/components/StyledAccountTypeIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,9 @@
import React from 'react'

import { useTokens } from '@kyper/tokenprovider'
import { Icon } from '@mxenabled/mxui'
import { Accounts } from '@kyper/icon/Accounts'
import { Check } from '@kyper/icon/Check'
import { PiggyBankOutline } from '@kyper/icon/PiggyBankOutline'
import { Document } from '@kyper/icon/Document'
import { CreditCard } from '@kyper/icon/CreditCard'
import { Dollar } from '@kyper/icon/Dollar'
import { Growth } from '@kyper/icon/Growth'
import { Home } from '@kyper/icon/Home'
import { Notarized } from '@kyper/icon/Notarized'
Expand Down Expand Up @@ -36,11 +33,11 @@ export const StyledAccountTypeIcon: React.FC<StyledAccountTypeIconProps> = ({
case AccountTypes.CHECKING:
return <Check color={tokens.TextColor.Default} size={iconSize} />
case AccountTypes.SAVINGS:
return <PiggyBankOutline color={tokens.TextColor.Default} size={iconSize} />
return <Icon name="savings" size={iconSize} />
case AccountTypes.LOAN:
return <Document color={tokens.TextColor.Default} size={iconSize} />
return <Icon name="contract" size={iconSize} />
case AccountTypes.CREDIT_CARD:
return <CreditCard color={tokens.TextColor.Default} size={iconSize} />
return <Icon name="credit_card" size={iconSize} />
case AccountTypes.INVESTMENT:
return <Growth color={tokens.TextColor.Default} size={iconSize} />
case AccountTypes.LINE_OF_CREDIT:
Expand All @@ -50,11 +47,11 @@ export const StyledAccountTypeIcon: React.FC<StyledAccountTypeIconProps> = ({
case AccountTypes.PROPERTY:
return <Image color={tokens.TextColor.Default} size={iconSize} />
case AccountTypes.CASH:
return <Dollar color={tokens.TextColor.Default} size={iconSize} />
return <Icon name="local_atm" size={iconSize} />
case AccountTypes.INSURANCE:
return <Health color={tokens.TextColor.Default} size={iconSize} />
case AccountTypes.PREPAID:
return <CreditCard color={tokens.TextColor.Default} size={iconSize} />
return <Icon name="credit_card" size={iconSize} />
case AccountTypes.UNKNOWN:
return <Grid color={tokens.TextColor.Default} size={iconSize} />
case 'accounts':
Expand Down
96 changes: 43 additions & 53 deletions src/views/manualAccount/ManualAccountMenu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,6 @@ import { useTokens } from '@kyper/tokenprovider'
import { Icon, Text } from '@mxenabled/mxui'
import { UtilityRow } from '@kyper/utilityrow'
import { Check } from '@kyper/icon/Check'
import { PiggyBankOutline } from '@kyper/icon/PiggyBankOutline'
import { Document } from '@kyper/icon/Document'
import { CreditCard } from '@kyper/icon/CreditCard'
import { Dollar } from '@kyper/icon/Dollar'
import { Growth } from '@kyper/icon/Growth'
import { Home } from '@kyper/icon/Home'
import { Notarized } from '@kyper/icon/Notarized'
Expand All @@ -25,10 +21,10 @@ import { getDelay } from 'src/utilities/getDelay'
import { focusElement } from 'src/utilities/Accessibility'
import { AccountTypeNames, AccountTypes } from 'src/views/manualAccount/constants'
import { StyledAccountTypeIcon } from 'src/components/StyledAccountTypeIcon'
import { Stack } from '@mui/material'

export const ManualAccountMenu = React.forwardRef((props, ref) => {
const tokens = useTokens()
const styles = getStyles(tokens)
const getNextDelay = getDelay()

const typeList =
Expand All @@ -51,16 +47,16 @@ export const ManualAccountMenu = React.forwardRef((props, ref) => {

const getIcon = {
[AccountTypes.CHECKING]: <Check color={tokens.TextColor.Default} />,
[AccountTypes.SAVINGS]: <PiggyBankOutline color={tokens.TextColor.Default} />,
[AccountTypes.LOAN]: <Document color={tokens.TextColor.Default} />,
[AccountTypes.CREDIT_CARD]: <CreditCard color={tokens.TextColor.Default} />,
[AccountTypes.SAVINGS]: <Icon color="secondary" name="savings" size={20} />,
[AccountTypes.LOAN]: <Icon color="secondary" name="contract" size={20} />,
[AccountTypes.CREDIT_CARD]: <Icon color="secondary" name="credit_card" size={20} />,
[AccountTypes.INVESTMENT]: <Growth color={tokens.TextColor.Default} />,
[AccountTypes.LINE_OF_CREDIT]: <Notarized color={tokens.TextColor.Default} />,
[AccountTypes.MORTGAGE]: <Home color={tokens.TextColor.Default} />,
[AccountTypes.PROPERTY]: <Image color={tokens.TextColor.Default} />,
[AccountTypes.CASH]: <Dollar color={tokens.TextColor.Default} />,
[AccountTypes.CASH]: <Icon color="secondary" name="local_atm" size={20} />,
[AccountTypes.INSURANCE]: <Health color={tokens.TextColor.Default} />,
[AccountTypes.PREPAID]: <CreditCard color={tokens.TextColor.Default} />,
[AccountTypes.PREPAID]: <Icon color="secondary" name="credit_card" size={20} />,
[AccountTypes.UNKNOWN]: <Grid color={tokens.TextColor.Default} />,
}

Expand All @@ -75,56 +71,50 @@ export const ManualAccountMenu = React.forwardRef((props, ref) => {
return (
<div data-test="manual-account-menu-container" ref={ref}>
<SlideDown delay={getNextDelay()}>
<StyledAccountTypeIcon icon="accounts" iconSize={40} size={64} />
<Text
component="h2"
data-test="add-account-manually-header"
style={styles.title}
truncate={false}
variant="H2"
>
{__('Add account manually')}
</Text>
<Text
component="p"
data-test="add-manual-account-paragraph"
style={styles.body}
truncate={false}
variant="Paragraph"
>
{__("Track accounts, assets, and other things that don't have a live connection.")}
</Text>
<Stack spacing={3}>
<StyledAccountTypeIcon icon="accounts" iconSize={40} size={64} />
<Stack spacing={1}>
<Text
component="h2"
data-test="add-account-manually-header"
truncate={false}
variant="H2"
>
{__('Add account manually')}
</Text>
<Text
component="p"
data-test="add-manual-account-paragraph"
truncate={false}
variant="Paragraph"
>
{__("Track accounts, assets, and other things that don't have a live connection.")}
</Text>
</Stack>
</Stack>
</SlideDown>
<SlideDown delay={getNextDelay()}>
{typeList.map((account_type, i) => (
<UtilityRow
aria-label={AccountTypeNames[account_type]()}
borderType="inset-left"
data-test={`${AccountTypeNames[account_type]().replace(/\s+/g, '-')}-button`}
key={i}
leftChildren={getIcon[account_type]}
onClick={() =>
fadeOut(ref.current, 'up', 300).then(props.handleAccountTypeSelect(account_type))
}
rightChildren={<Icon name="chevron_right" size={24} />}
title={AccountTypeNames[account_type]()}
/>
))}
<Stack>
{typeList.map((account_type, i) => (
<UtilityRow
aria-label={AccountTypeNames[account_type]()}
borderType="inset-left"
data-test={`${AccountTypeNames[account_type]().replace(/\s+/g, '-')}-button`}
key={i}
leftChildren={getIcon[account_type]}
onClick={() =>
fadeOut(ref.current, 'up', 300).then(props.handleAccountTypeSelect(account_type))
}
rightChildren={<Icon name="chevron_right" size={24} />}
title={AccountTypeNames[account_type]()}
/>
))}
</Stack>
</SlideDown>
</div>
)
})

const getStyles = (tokens) => ({
title: {
marginBottom: tokens.Spacing.XSmall,
marginTop: tokens.Spacing.Large,
},
body: {
marginBottom: tokens.Spacing.XSmall,
},
})

ManualAccountMenu.propTypes = {
availableAccountTypes: PropTypes.array,
handleAccountTypeSelect: PropTypes.func.isRequired,
Expand Down
Loading