Skip to content
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

Jump to bottom

feat: add new label to swaps button [SWAP-86] #3763

Merged
merged 4 commits into from
May 29, 2024
Merged

feat: add new label to swaps button [SWAP-86] #3763

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d7ef557
feat: add new label to swaps button
compojoom May 28, 2024
6653a8e
fix: make new badge closer to design
compojoom May 28, 2024
6548aa3
refactor: move static tag to the navItem conf array
compojoom May 29, 2024
a2de336
refactor: optimise the itemTag code
compojoom May 29, 2024
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
3 changes: 3 additions & 0 deletions src/components/sidebar/SidebarNavigation/config.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,13 @@ import AppsIcon from '@/public/images/apps/apps-icon.svg'
import SettingsIcon from '@/public/images/sidebar/settings.svg'
import SwapIcon from '@/public/images/common/swap.svg'
import { SvgIcon } from '@mui/material'
import Chip from '@mui/material/Chip'

export type NavItem = {
label: string
icon?: ReactElement
href: string
tag?: ReactElement
}

export const navItems: NavItem[] = [
Expand All @@ -31,6 +33,7 @@ export const navItems: NavItem[] = [
label: 'Swap',
icon: <SvgIcon component={SwapIcon} inheritViewBox />,
href: AppRoutes.swap,
tag: <Chip label="New" color="success" sx={{ ml: 1 }} />,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good! Alternatively it could be a boolean prop like isNew. Both are fine.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No, I like it being a react component. This way we could add whatever we want to other items

},
{
label: 'Transactions',
Expand Down
19 changes: 11 additions & 8 deletions src/components/sidebar/SidebarNavigation/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,16 @@ const isRouteEnabled = (route: string, chain?: ChainInfo) => {
return !featureRoute || hasFeature(chain, featureRoute)
}

const NavItemTag = ({ item }: { item: NavItem }) => {
const queueSize = useQueuedTxsLength()

if (item.href === AppRoutes.transactions.history) {
return <SidebarListItemCounter count={queueSize} />
}

return item.tag
}

const Navigation = (): ReactElement => {
const chain = useCurrentChain()
const router = useRouter()
Expand All @@ -56,13 +66,6 @@ const Navigation = (): ReactElement => {
}
}

const getCounter = (item: NavItem) => {
// Indicate qeueued txs
if (item.href === AppRoutes.transactions.history) {
return queueSize
}
}

// Route Transactions to Queue if there are queued txs, otherwise to History
const getRoute = (href: string) => {
if (href === AppRoutes.transactions.history && queueSize) {
Expand Down Expand Up @@ -98,7 +101,7 @@ const Navigation = (): ReactElement => {
<SidebarListItemText data-testid="sidebar-list-item" bold>
{item.label}

<SidebarListItemCounter count={getCounter(item)} />
<NavItemTag item={item} />
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You could pass queue size here to avoid calling the useQueuedTxsLength for each item.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ok, i've refactored it.

</SidebarListItemText>
</SidebarListItemButton>
</ListItem>
Expand Down
2 changes: 1 addition & 1 deletion src/components/theme/darkPalette.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ const darkPalette = {
secondary: {
dark: '#636669',
main: '#FFFFFF',
light: '#12FF80',
light: '#B0FFC9',
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This was synced with @TanyaEfremova

background: '#1B2A22',
},
border: {
Expand Down
11 changes: 11 additions & 0 deletions src/components/theme/safeTheme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ declare module '@mui/material/styles' {
backdrop: Palette['primary']
static: Palette['primary']
}

export interface PaletteOptions {
border: PaletteOptions['primary']
logo: PaletteOptions['primary']
Expand All @@ -33,6 +34,7 @@ declare module '@mui/material/styles' {
export interface PaletteColor {
background?: string
}

export interface SimplePaletteColorOptions {
background?: string
}
Expand All @@ -52,6 +54,7 @@ declare module '@mui/material/Button' {
export interface ButtonPropsColorOverrides {
background: true
}

export interface ButtonPropsVariantOverrides {
danger: true
}
Expand Down Expand Up @@ -279,6 +282,14 @@ const createSafeTheme = (mode: PaletteMode): Theme => {
},
},
},
MuiChip: {
styleOverrides: {
colorSuccess: ({ theme }) => ({
backgroundColor: theme.palette.secondary.light,
height: '24px',
}),
},
},
MuiAlert: {
styleOverrides: {
standardError: ({ theme }) => ({
Expand Down
Loading