From e931d9fcca38f118e9c0ff0b9dc2babc0d27aecf Mon Sep 17 00:00:00 2001
From: Ilias Trichopoulos <hlias.nop@gmail.com>
Date: Mon, 29 Jan 2024 13:08:41 +0800
Subject: [PATCH 1/3] Revert "Fix many React warnings due to styled-components"

This reverts commit 8ab1894a409c8454e04c043216589edf24123f73.

Closes #319
---
 .changeset/honest-books-kiss.md               |  5 ++
 apps/desktop-wallet/src/App.tsx               |  8 +--
 .../src/components/AddressBadge.tsx           | 33 +++++-----
 .../src/components/AddressRow.tsx             |  2 +-
 apps/desktop-wallet/src/components/Amount.tsx | 17 +++---
 .../src/components/AppHeader.tsx              |  2 +-
 apps/desktop-wallet/src/components/Badge.tsx  | 16 ++---
 apps/desktop-wallet/src/components/Button.tsx | 18 +++---
 .../components/Buttons/ShortcutButtons.tsx    | 24 ++++----
 .../src/components/DefaultAddressSwitch.tsx   |  6 +-
 .../src/components/DeltaPercentage.tsx        |  8 +--
 .../src/components/ExpandableSection.tsx      | 10 ++--
 apps/desktop-wallet/src/components/IOList.tsx | 10 +---
 .../src/components/Inputs/AddressSelect.tsx   | 30 +++++-----
 .../src/components/Inputs/CompactToggle.tsx   |  2 +-
 .../src/components/Inputs/Input.tsx           | 18 +++---
 .../src/components/Inputs/MultiSelect.tsx     |  2 +-
 .../src/components/Inputs/Select.tsx          | 60 +++++++++----------
 .../components/Inputs/SelectOptionAddress.tsx |  4 +-
 .../components/Inputs/WalletPassphrase.tsx    |  6 +-
 .../src/components/Inputs/index.tsx           | 10 ++--
 .../desktop-wallet/src/components/NavItem.tsx |  8 +--
 .../src/components/NetworkSwitch.tsx          |  2 +-
 .../PageComponents/PageContainers.tsx         | 10 ++--
 .../src/components/PageComponents/SideBar.tsx |  2 +-
 apps/desktop-wallet/src/components/Popup.tsx  | 22 +++----
 apps/desktop-wallet/src/components/TabBar.tsx | 18 +++---
 apps/desktop-wallet/src/components/Table.tsx  | 16 ++---
 .../src/components/TableTabBar.tsx            |  6 +-
 .../src/components/TransactionList.tsx        | 14 ++---
 .../src/components/TransactionalInfo.tsx      | 28 ++++-----
 .../src/modals/AddressDetailsModal.tsx        |  6 +-
 .../src/modals/CenteredModal.tsx              | 12 ++--
 .../src/modals/NewAddressModal.tsx            |  2 +-
 .../src/modals/NotificationsModal.tsx         |  2 +-
 .../src/modals/SendModals/AddressInputs.tsx   |  2 +-
 .../modals/SendModals/CheckAddressesBox.tsx   |  2 +-
 .../SettingsModal/DevToolsSettingsSection.tsx |  8 +--
 .../SettingsModal/EditWalletNameModal.tsx     |  2 +-
 .../SettingsModal/GeneralSettingsSection.tsx  |  8 +--
 .../SettingsModal/NetworkSettingsSection.tsx  |  2 +-
 .../SettingsModal/WalletsSettingsSection.tsx  |  8 +--
 .../src/modals/SettingsModal/index.tsx        |  4 +-
 apps/desktop-wallet/src/modals/SideModal.tsx  |  2 +-
 .../src/modals/TransactionDetailsModal.tsx    | 12 ++--
 .../src/modals/WalletConnectModal.tsx         |  2 +-
 .../AddressesPage/AddressGridRow.tsx          |  2 +-
 .../AddressesPage/ContactsTabContent.tsx      |  4 +-
 .../AddressesPage/TabContent.tsx              |  2 +-
 .../OverviewPage/AmountsOverviewPanel.tsx     | 18 +++---
 .../UnlockedWallet/OverviewPage/index.tsx     |  2 +-
 .../UnlockedWallet/TransfersPage/index.tsx    |  4 +-
 .../UnlockedWallet/UnlockedWalletLayout.tsx   | 24 ++++----
 53 files changed, 273 insertions(+), 274 deletions(-)
 create mode 100644 .changeset/honest-books-kiss.md

diff --git a/.changeset/honest-books-kiss.md b/.changeset/honest-books-kiss.md
new file mode 100644
index 000000000..88a9b28bc
--- /dev/null
+++ b/.changeset/honest-books-kiss.md
@@ -0,0 +1,5 @@
+---
+'alephium-desktop-wallet': patch
+---
+
+Fix address hash overlap introduced in 2.2.1
diff --git a/apps/desktop-wallet/src/App.tsx b/apps/desktop-wallet/src/App.tsx
index 19e72dfc6..45e976eec 100644
--- a/apps/desktop-wallet/src/App.tsx
+++ b/apps/desktop-wallet/src/App.tsx
@@ -230,7 +230,7 @@ const App = () => {
       {splashScreenVisible && <SplashScreen onSplashScreenShown={() => setSplashScreenVisible(false)} />}
 
       <WalletConnectContextProvider>
-        <AppContainer $showDevIndication={showDevIndication}>
+        <AppContainer showDevIndication={showDevIndication}>
           <CenteredSection>
             <Router />
           </CenteredSection>
@@ -249,15 +249,15 @@ const App = () => {
 
 export default App
 
-const AppContainer = styled.div<{ $showDevIndication: boolean }>`
+const AppContainer = styled.div<{ showDevIndication: boolean }>`
   display: flex;
   flex-direction: column;
   flex: 1;
 
   background-color: ${({ theme }) => theme.bg.secondary};
 
-  ${({ $showDevIndication, theme }) =>
-    $showDevIndication &&
+  ${({ showDevIndication, theme }) =>
+    showDevIndication &&
     css`
       border: 5px solid ${theme.global.valid};
     `};
diff --git a/apps/desktop-wallet/src/components/AddressBadge.tsx b/apps/desktop-wallet/src/components/AddressBadge.tsx
index 188620bbc..14ee28cdf 100644
--- a/apps/desktop-wallet/src/components/AddressBadge.tsx
+++ b/apps/desktop-wallet/src/components/AddressBadge.tsx
@@ -29,8 +29,8 @@ import { makeSelectContactByAddress, selectAddressByHash } from '@/storage/addre
 
 interface AddressBadgeProps {
   addressHash: AddressHash
-  $truncate?: boolean
-  $withBorders?: boolean
+  truncate?: boolean
+  withBorders?: boolean
   hideStar?: boolean
   hideColorIndication?: boolean
   disableA11y?: boolean
@@ -48,10 +48,11 @@ const AddressBadge = ({
   hideColorIndication,
   disableA11y = false,
   disableCopy,
-  $truncate,
+  truncate,
   appendHash = false,
   displayHashUnder = false,
-  $withBorders
+  showFull,
+  withBorders
 }: AddressBadgeProps) => {
   const { t } = useTranslation()
   const address = useAppSelector((s) => selectAddressByHash(s, addressHash))
@@ -61,11 +62,11 @@ const AddressBadge = ({
   return (
     <AddressBadgeStyled
       className={className}
-      $withBorders={contact || address ? $withBorders : false}
-      $truncate={$truncate}
+      withBorders={contact || address ? withBorders : false}
+      truncate={truncate}
     >
       {contact ? (
-        <Label $truncate={$truncate}>
+        <Label truncate={truncate}>
           {disableCopy ? (
             contact.name
           ) : (
@@ -81,7 +82,7 @@ const AddressBadge = ({
           {!hideColorIndication && <AddressColorIndicator addressHash={address.hash} hideMainAddressBadge={hideStar} />}
           {address.label ? (
             <LabelAndHash isColumn={displayHashUnder}>
-              <Label $truncate={$truncate}>
+              <Label truncate={truncate}>
                 {disableCopy || appendHash ? (
                   address.label
                 ) : (
@@ -105,21 +106,21 @@ const AddressBadge = ({
 
 export default AddressBadge
 
-const AddressBadgeStyled = styled.div<Pick<AddressBadgeProps, '$withBorders' | '$truncate'>>`
+const AddressBadgeStyled = styled.div<Pick<AddressBadgeProps, 'withBorders' | 'truncate'>>`
   display: flex;
   align-items: center;
   gap: 6px;
 
-  ${({ $withBorders }) =>
-    $withBorders &&
+  ${({ withBorders }) =>
+    withBorders &&
     css`
       border: 1px solid ${({ theme }) => theme.border.primary};
       border-radius: 25px;
       padding: 5px 10px;
     `}
 
-  ${({ $truncate }) =>
-    $truncate &&
+  ${({ truncate }) =>
+    truncate &&
     css`
       white-space: nowrap;
       overflow: hidden;
@@ -140,13 +141,13 @@ const LabelAndHash = styled.div<{ isColumn: boolean }>`
     `}
 `
 
-const Label = styled.span<Pick<AddressBadgeProps, '$truncate'>>`
+const Label = styled.span<Pick<AddressBadgeProps, 'truncate'>>`
   margin-right: 2px;
   white-space: nowrap;
   max-width: 125px;
 
-  ${({ $truncate }) =>
-    $truncate &&
+  ${({ truncate }) =>
+    truncate &&
     css`
       overflow: hidden;
       text-overflow: ellipsis;
diff --git a/apps/desktop-wallet/src/components/AddressRow.tsx b/apps/desktop-wallet/src/components/AddressRow.tsx
index c764f43f0..b3d054345 100644
--- a/apps/desktop-wallet/src/components/AddressRow.tsx
+++ b/apps/desktop-wallet/src/components/AddressRow.tsx
@@ -42,7 +42,7 @@ const AddressRow: FC<AddressRowProps> = ({ address, disableAddressCopy, onClick,
     <Row>
       <AddressColorIndicatorStyled addressHash={address.hash} />
       <Label>
-        <AddressBadge addressHash={address.hash} hideColorIndication $truncate appendHash displayHashUnder />
+        <AddressBadge addressHash={address.hash} hideColorIndication truncate appendHash displayHashUnder />
       </Label>
       {children}
     </Row>
diff --git a/apps/desktop-wallet/src/components/Amount.tsx b/apps/desktop-wallet/src/components/Amount.tsx
index 1328d7ae2..333598c1f 100644
--- a/apps/desktop-wallet/src/components/Amount.tsx
+++ b/apps/desktop-wallet/src/components/Amount.tsx
@@ -35,7 +35,7 @@ interface AmountProps {
   tabIndex?: number
   suffix?: string
   isUnknownToken?: boolean
-  $highlight?: boolean
+  highlight?: boolean
   showPlusMinus?: boolean
   className?: string
 }
@@ -52,7 +52,7 @@ const Amount = ({
   color,
   overrideSuffixColor,
   tabIndex,
-  $highlight,
+  highlight,
   isUnknownToken,
   showPlusMinus = false
 }: AmountProps) => {
@@ -89,8 +89,7 @@ const Amount = ({
 
   return (
     <AmountStyled
-      {...{ className, color, value, $highlight, tabIndex: tabIndex ?? -1 }}
-      $discreetMode={discreetMode}
+      {...{ className, color, value, highlight, tabIndex: tabIndex ?? -1, discreetMode }}
       data-tooltip-id="default"
       data-tooltip-content={discreetMode ? t('Click to deactivate discreet mode') : ''}
       data-tooltip-delay-show={500}
@@ -122,11 +121,11 @@ const Amount = ({
 
 export default Amount
 
-const AmountStyled = styled.div<Pick<AmountProps, 'color' | '$highlight' | 'value'> & { $discreetMode: boolean }>`
-  color: ${({ color, $highlight, value, theme }) =>
+const AmountStyled = styled.div<Pick<AmountProps, 'color' | 'highlight' | 'value'> & { discreetMode: boolean }>`
+  color: ${({ color, highlight, value, theme }) =>
     color
       ? color
-      : $highlight && value !== undefined
+      : highlight && value !== undefined
         ? value < 0
           ? theme.font.highlight
           : theme.global.valid
@@ -135,8 +134,8 @@ const AmountStyled = styled.div<Pick<AmountProps, 'color' | '$highlight' | 'valu
   white-space: pre;
   font-weight: var(--fontWeight-bold);
   font-feature-settings: 'tnum' on;
-  ${({ $discreetMode }) =>
-    $discreetMode &&
+  ${({ discreetMode }) =>
+    discreetMode &&
     css`
       filter: blur(10px);
       max-width: 100px;
diff --git a/apps/desktop-wallet/src/components/AppHeader.tsx b/apps/desktop-wallet/src/components/AppHeader.tsx
index 3d2e397ac..0fc58b662 100644
--- a/apps/desktop-wallet/src/components/AppHeader.tsx
+++ b/apps/desktop-wallet/src/components/AppHeader.tsx
@@ -122,7 +122,7 @@ const AppHeader: FC<AppHeader> = ({ children, title, className, invisible }) =>
           {isAuthenticated && (
             <>
               <Button
-                $transparent
+                transparent
                 squared
                 short
                 role="secondary"
diff --git a/apps/desktop-wallet/src/components/Badge.tsx b/apps/desktop-wallet/src/components/Badge.tsx
index 5f1b2a556..900ef50f9 100644
--- a/apps/desktop-wallet/src/components/Badge.tsx
+++ b/apps/desktop-wallet/src/components/Badge.tsx
@@ -25,11 +25,11 @@ import Truncate from '@/components/Truncate'
 interface BadgeProps {
   color?: string
   border?: boolean
-  $transparent?: boolean
+  transparent?: boolean
   truncate?: boolean
   rounded?: boolean
   short?: boolean
-  $compact?: boolean
+  compact?: boolean
   className?: string
 }
 
@@ -40,19 +40,19 @@ const Badge: FC<HasTooltip<BadgeProps>> = ({ className, children, truncate, tool
 )
 
 export default styled(Badge)`
-  ${({ color, theme, rounded, border, short, $compact, truncate, $transparent }) => {
+  ${({ color, theme, rounded, border, short, compact, truncate, transparent }) => {
     const usedColor = color || theme.font.primary
 
     return css`
       display: inline-flex;
       align-items: center;
-      padding: 0 ${$compact ? '5px' : short ? '8px' : '10px'};
-      height: ${short ? 25 : $compact ? 20 : 30}px;
+      padding: 0 ${compact ? '5px' : short ? '8px' : '10px'};
+      height: ${short ? 25 : compact ? 20 : 30}px;
       color: ${usedColor};
-      border-radius: ${rounded ? '100px' : $compact ? 'var(--radius-tiny)' : 'var(--radius-small)'};
-      background-color: ${!$transparent && colord(usedColor).alpha(0.08).toRgbString()};
+      border-radius: ${rounded ? '100px' : compact ? 'var(--radius-tiny)' : 'var(--radius-small)'};
+      background-color: ${!transparent && colord(usedColor).alpha(0.08).toRgbString()};
       white-space: nowrap;
-      font-size: ${$compact ? '11px' : 'inherit'};
+      font-size: ${compact ? '11px' : 'inherit'};
 
       ${border &&
       css`
diff --git a/apps/desktop-wallet/src/components/Button.tsx b/apps/desktop-wallet/src/components/Button.tsx
index 3649dc426..7a6517f2f 100644
--- a/apps/desktop-wallet/src/components/Button.tsx
+++ b/apps/desktop-wallet/src/components/Button.tsx
@@ -28,7 +28,7 @@ import Spinner from '@/components/Spinner'
 export interface ButtonProps extends HTMLMotionProps<'button'> {
   role?: 'primary' | 'secondary'
   variant?: 'default' | 'contrast' | 'valid' | 'alert' | 'faded'
-  $transparent?: boolean
+  transparent?: boolean
   disabled?: boolean
   squared?: boolean
   submit?: boolean
@@ -109,13 +109,13 @@ export default styled(Button)`
     theme,
     role = 'primary',
     variant = 'default',
-    $transparent,
+    transparent,
     borderless,
     iconBackground,
     iconColor,
     children
   }) => {
-    const bgColor = $transparent
+    const bgColor = transparent
       ? 'transparent'
       : {
           primary: {
@@ -134,7 +134,7 @@ export default styled(Button)`
           }[variant]
         }[role]
 
-    const hoverBgColor = $transparent
+    const hoverBgColor = transparent
       ? colord(theme.bg.primary).isDark()
         ? colord(theme.bg.primary).lighten(0.02).toRgbString()
         : theme.bg.hover
@@ -155,7 +155,7 @@ export default styled(Button)`
           }[variant]
         }[role]
 
-    const activeBgColor = $transparent
+    const activeBgColor = transparent
       ? colord(theme.bg.primary).isDark()
         ? colord(theme.global.accent).alpha(0.4).toRgbString()
         : colord(theme.global.accent).lighten(0.1).alpha(0.15).toRgbString()
@@ -176,7 +176,7 @@ export default styled(Button)`
           }[variant]
         }[role]
 
-    const fontColor = $transparent
+    const fontColor = transparent
       ? theme.font.secondary
       : {
           primary: {
@@ -197,7 +197,7 @@ export default styled(Button)`
 
     const borderColor = borderless
       ? 'transparent'
-      : $transparent
+      : transparent
         ? {
             primary: {
               default: theme.global.accent,
@@ -231,7 +231,7 @@ export default styled(Button)`
             }[variant]
           }[role]
 
-    const hoverColor = $transparent
+    const hoverColor = transparent
       ? theme.font.primary
       : {
           primary: {
@@ -256,7 +256,7 @@ export default styled(Button)`
       border: 1px solid ${borderColor};
       position: relative;
 
-      ${!$transparent &&
+      ${!transparent &&
       !borderless &&
       css`
         box-shadow: ${({ theme }) => theme.shadow.primary};
diff --git a/apps/desktop-wallet/src/components/Buttons/ShortcutButtons.tsx b/apps/desktop-wallet/src/components/Buttons/ShortcutButtons.tsx
index 0ca734311..31d756edc 100644
--- a/apps/desktop-wallet/src/components/Buttons/ShortcutButtons.tsx
+++ b/apps/desktop-wallet/src/components/Buttons/ShortcutButtons.tsx
@@ -41,7 +41,7 @@ interface ShortcutButtonsProps {
   walletSettings?: boolean
   addressSettings?: boolean
   addressHash?: AddressHash
-  isHighlighted?: boolean
+  highlight?: boolean
   solidBackground?: boolean
 }
 
@@ -53,7 +53,7 @@ const ShortcutButtons = ({
   walletSettings,
   addressSettings,
   addressHash,
-  isHighlighted,
+  highlight,
   solidBackground
 }: ShortcutButtonsProps) => {
   const { t } = useTranslation()
@@ -104,53 +104,53 @@ const ShortcutButtons = ({
     <>
       {receive && (
         <ShortcutButton
-          $transparent={!solidBackground}
+          transparent={!solidBackground}
           role="secondary"
           borderless
           onClick={handleReceiveClick}
           Icon={ArrowDown}
           iconColor={theme.global.valid}
           iconBackground
-          isHighlighted={isHighlighted}
+          highlight={highlight}
         >
           <ButtonText>{t('Receive')}</ButtonText>
         </ShortcutButton>
       )}
       {send && (
         <ShortcutButton
-          $transparent={!solidBackground}
+          transparent={!solidBackground}
           role="secondary"
           borderless
           onClick={handleSendClick}
           Icon={ArrowUp}
           iconColor={theme.global.highlight}
           iconBackground
-          isHighlighted={isHighlighted}
+          highlight={highlight}
         >
           <ButtonText>{t('Send')}</ButtonText>
         </ShortcutButton>
       )}
       {walletSettings && (
         <ShortcutButton
-          $transparent={!solidBackground}
+          transparent={!solidBackground}
           role="secondary"
           borderless
           onClick={handleWalletSettingsClick}
           Icon={Settings}
           iconBackground
-          isHighlighted={isHighlighted}
+          highlight={highlight}
         >
           <ButtonText>{t('Settings')}</ButtonText>
         </ShortcutButton>
       )}
       {lock && (
         <ShortcutButton
-          $transparent={!solidBackground}
+          transparent={!solidBackground}
           role="secondary"
           borderless
           onClick={lockWallet}
           Icon={Lock}
-          isHighlighted={isHighlighted}
+          highlight={highlight}
           iconBackground
         >
           <ButtonText>{t('Lock wallet')}</ButtonText>
@@ -158,7 +158,7 @@ const ShortcutButtons = ({
       )}
       {addressSettings && addressHash && (
         <ShortcutButton
-          $transparent={!solidBackground}
+          transparent={!solidBackground}
           role="secondary"
           borderless
           onClick={handleAddressSettingsClick}
@@ -184,7 +184,7 @@ const ShortcutButtons = ({
 
 export default ShortcutButtons
 
-const ShortcutButton = styled(Button)`
+const ShortcutButton = styled(Button)<Pick<ShortcutButtonsProps, 'highlight'>>`
   border-radius: 0;
   margin: 0;
   width: auto;
diff --git a/apps/desktop-wallet/src/components/DefaultAddressSwitch.tsx b/apps/desktop-wallet/src/components/DefaultAddressSwitch.tsx
index 74114c723..19f8db0df 100644
--- a/apps/desktop-wallet/src/components/DefaultAddressSwitch.tsx
+++ b/apps/desktop-wallet/src/components/DefaultAddressSwitch.tsx
@@ -60,7 +60,7 @@ const DefaultAddressSwitch = () => {
       title={t('Default address')}
       optionRender={({ value }, isSelected) => (
         <OptionContent>
-          <AddressBadgeStyled addressHash={value} $truncate />
+          <AddressBadgeStyled addressHash={value} truncate />
           {isSelected && <CheckMark />}
         </OptionContent>
       )}
@@ -81,12 +81,12 @@ const SelectCustomComponent = (value?: SelectOption<AddressHash>, disablePointer
     <Button
       role="secondary"
       short
-      $transparent
+      transparent
       data-tooltip-id="default"
       data-tooltip-content={t('Default address')}
       disablePointer={disablePointer}
     >
-      {value?.value && <AddressBadge addressHash={value.value} $truncate />}
+      {value?.value && <AddressBadge addressHash={value.value} truncate />}
     </Button>
   )
 }
diff --git a/apps/desktop-wallet/src/components/DeltaPercentage.tsx b/apps/desktop-wallet/src/components/DeltaPercentage.tsx
index 9935fe4f7..d1fb10991 100644
--- a/apps/desktop-wallet/src/components/DeltaPercentage.tsx
+++ b/apps/desktop-wallet/src/components/DeltaPercentage.tsx
@@ -45,7 +45,7 @@ const DeltaPercentage = ({ initialValue, latestValue, className }: DeltaPercenta
     <DeltaPercentageStyled
       className={className}
       style={{ color }}
-      $discreetMode={discreetMode}
+      discreetMode={discreetMode}
       data-tooltip-id="default"
       data-tooltip-content={discreetMode ? t('Click to deactivate discreet mode') : ''}
       data-tooltip-delay-show={500}
@@ -59,13 +59,13 @@ const DeltaPercentage = ({ initialValue, latestValue, className }: DeltaPercenta
 
 export default DeltaPercentage
 
-const DeltaPercentageStyled = styled.div<{ $discreetMode: boolean }>`
+const DeltaPercentageStyled = styled.div<{ discreetMode: boolean }>`
   display: flex;
   align-items: center;
   height: 24px;
 
-  ${({ $discreetMode }) =>
-    $discreetMode &&
+  ${({ discreetMode }) =>
+    discreetMode &&
     css`
       filter: blur(10px);
       overflow: hidden;
diff --git a/apps/desktop-wallet/src/components/ExpandableSection.tsx b/apps/desktop-wallet/src/components/ExpandableSection.tsx
index d411b047b..258b32bfa 100644
--- a/apps/desktop-wallet/src/components/ExpandableSection.tsx
+++ b/apps/desktop-wallet/src/components/ExpandableSection.tsx
@@ -72,7 +72,7 @@ const ExpandableSection: FC<ExpandableSectionProps> = ({
   const titleText = isExpanded && sectionTitleOpen ? sectionTitleOpen : sectionTitleClosed
 
   return (
-    <ExpandableSectionContainer className={className} shrinkWhenOpen={shrinkWhenOpen} $isOpen={isExpanded}>
+    <ExpandableSectionContainer className={className} shrinkWhenOpen={shrinkWhenOpen} isOpen={isExpanded}>
       <Title
         onMouseDown={handleTitleExpansion}
         onKeyDown={(e) => onEnterOrSpace(e, handleTitleExpansion)}
@@ -95,7 +95,7 @@ const ExpandableSection: FC<ExpandableSectionProps> = ({
           {...fastTransition}
         >
           <Content>
-            <Section $align="stretch">{children}</Section>
+            <Section align="stretch">{children}</Section>
           </Content>
         </ContentWrapper>
       )}
@@ -105,15 +105,15 @@ const ExpandableSection: FC<ExpandableSectionProps> = ({
 
 export default ExpandableSection
 
-const ExpandableSectionContainer = styled.div<{ shrinkWhenOpen: boolean; $isOpen?: boolean }>`
+const ExpandableSectionContainer = styled.div<{ shrinkWhenOpen: boolean; isOpen?: boolean }>`
   display: flex;
   flex-direction: column;
   margin: var(--spacing-3) 0;
   transition: margin 0.2s ease-in-out;
 
-  ${({ shrinkWhenOpen, $isOpen }) =>
+  ${({ shrinkWhenOpen, isOpen }) =>
     shrinkWhenOpen &&
-    $isOpen &&
+    isOpen &&
     css`
       margin-bottom: 0;
     `}
diff --git a/apps/desktop-wallet/src/components/IOList.tsx b/apps/desktop-wallet/src/components/IOList.tsx
index 068a6de24..dfeef4485 100644
--- a/apps/desktop-wallet/src/components/IOList.tsx
+++ b/apps/desktop-wallet/src/components/IOList.tsx
@@ -85,20 +85,14 @@ const IOList = ({
 
     return truncate ? (
       <TruncateWrap>
-        <AddressBadge $truncate addressHash={addressHash} disableA11y={disableA11y} $withBorders />
+        <AddressBadge truncate addressHash={addressHash} disableA11y={disableA11y} withBorders />
         {extraAddressesText && <AddressesHidden>{extraAddressesText}</AddressesHidden>}
       </TruncateWrap>
     ) : (
       <Addresses>
         {addressesToShow.map((addressHash) => {
           const addressComponent = (
-            <AddressBadge
-              $truncate
-              addressHash={addressHash}
-              disableA11y={disableA11y}
-              $withBorders
-              key={addressHash}
-            />
+            <AddressBadge truncate addressHash={addressHash} disableA11y={disableA11y} withBorders key={addressHash} />
           )
           return linkToExplorer ? (
             <ActionLinkStyled onClick={() => handleShowAddress(addressHash)} key={addressHash}>
diff --git a/apps/desktop-wallet/src/components/Inputs/AddressSelect.tsx b/apps/desktop-wallet/src/components/Inputs/AddressSelect.tsx
index 6dc90ae4f..feaf32d12 100644
--- a/apps/desktop-wallet/src/components/Inputs/AddressSelect.tsx
+++ b/apps/desktop-wallet/src/components/Inputs/AddressSelect.tsx
@@ -41,7 +41,7 @@ interface AddressSelectProps {
   label?: string
   disabled?: boolean
   hideAddressesWithoutAssets?: boolean
-  $simpleMode?: boolean
+  simpleMode?: boolean
   noMargin?: boolean
   className?: string
   emptyListPlaceholder?: string
@@ -59,7 +59,7 @@ function AddressSelect({
   onAddressChange,
   hideAddressesWithoutAssets,
   noMargin,
-  $simpleMode = false,
+  simpleMode = false,
   emptyListPlaceholder
 }: AddressSelectProps) {
   const moveFocusOnPreviousModal = useMoveFocusOnPreviousModal()
@@ -111,8 +111,8 @@ function AddressSelect({
         onMouseDown={openAddressSelectModal}
         onKeyDown={(e) => onEnterOrSpace(e, openAddressSelectModal)}
         disabled={disabled}
-        $heightSize={$simpleMode ? 'normal' : 'big'}
-        $simpleMode={$simpleMode}
+        heightSize={simpleMode ? 'normal' : 'big'}
+        simpleMode={simpleMode}
         noMargin={noMargin}
       >
         {label && (
@@ -120,7 +120,7 @@ function AddressSelect({
             {label}
           </InputLabel>
         )}
-        {!disabled && !$simpleMode && (
+        {!disabled && !simpleMode && (
           <MoreIcon>
             <MoreVertical size={16} />
           </MoreIcon>
@@ -131,14 +131,14 @@ function AddressSelect({
           className={className}
           disabled={disabled}
           id={id}
-          $simpleMode={$simpleMode}
+          simpleMode={simpleMode}
           value={address.hash}
           label={label}
         >
           {(!hideAddressesWithoutAssets || options.find((option) => option.hash === address.hash)) && (
             <>
               <AddressBadge addressHash={address.hash} showFull appendHash />
-              {!address.label && !$simpleMode && <HashEllipsed hash={address.hash} />}
+              {!address.label && !simpleMode && <HashEllipsed hash={address.hash} />}
             </>
           )}
         </ClickableInput>
@@ -160,7 +160,7 @@ function AddressSelect({
 
 export default AddressSelect
 
-const AddressSelectContainer = styled(SelectContainer)<Pick<AddressSelectProps, 'disabled' | '$simpleMode'>>`
+const AddressSelectContainer = styled(SelectContainer)<Pick<AddressSelectProps, 'disabled' | 'simpleMode'>>`
   ${({ disabled }) =>
     disabled &&
     css`
@@ -168,25 +168,25 @@ const AddressSelectContainer = styled(SelectContainer)<Pick<AddressSelectProps,
       box-shadow: none;
     `}
 
-  ${({ $simpleMode }) =>
-    $simpleMode &&
+  ${({ simpleMode }) =>
+    simpleMode &&
     css`
       margin: 0;
       box-shadow: none;
     `}
 `
 
-const ClickableInput = styled.div<InputProps & Pick<AddressSelectProps, '$simpleMode'>>`
-  ${({ isValid, Icon, $simpleMode, value, label }) =>
-    inputDefaultStyle(isValid || !!Icon, !!value, !!label, $simpleMode ? 'normal' : 'big', false, true)};
+const ClickableInput = styled.div<InputProps & Pick<AddressSelectProps, 'simpleMode'>>`
+  ${({ isValid, Icon, simpleMode, value, label }) =>
+    inputDefaultStyle(isValid || !!Icon, !!value, !!label, simpleMode ? 'normal' : 'big', false, true)};
   display: flex;
   align-items: center;
   padding-right: 50px;
   gap: var(--spacing-2);
   cursor: ${({ disabled }) => (disabled ? 'auto' : 'pointer')};
 
-  ${({ $simpleMode }) =>
-    $simpleMode &&
+  ${({ simpleMode }) =>
+    simpleMode &&
     css`
       border: 0;
       height: calc(100% - 2px);
diff --git a/apps/desktop-wallet/src/components/Inputs/CompactToggle.tsx b/apps/desktop-wallet/src/components/Inputs/CompactToggle.tsx
index 38778ab94..23f0f1a00 100644
--- a/apps/desktop-wallet/src/components/Inputs/CompactToggle.tsx
+++ b/apps/desktop-wallet/src/components/Inputs/CompactToggle.tsx
@@ -28,7 +28,7 @@ interface CompactToggleProps extends ButtonProps {
 }
 
 const CompactToggle = ({ toggled, onToggle, IconOn, IconOff, ...props }: CompactToggleProps) => (
-  <Button squared $transparent role="secondary" onClick={() => onToggle(!toggled)} {...props}>
+  <Button squared transparent role="secondary" onClick={() => onToggle(!toggled)} {...props}>
     {toggled ? <IconOn /> : <IconOff />}
   </Button>
 )
diff --git a/apps/desktop-wallet/src/components/Inputs/Input.tsx b/apps/desktop-wallet/src/components/Inputs/Input.tsx
index f1b4c465e..b4155fbf9 100644
--- a/apps/desktop-wallet/src/components/Inputs/Input.tsx
+++ b/apps/desktop-wallet/src/components/Inputs/Input.tsx
@@ -52,7 +52,7 @@ const Input = ({
   inputFieldStyle,
   inputFieldRef,
   liftLabel = false,
-  $heightSize = 'normal',
+  heightSize = 'normal',
   largeText,
   ...props
 }: InputProps) => {
@@ -77,7 +77,7 @@ const Input = ({
       custom={disabled}
       noMargin={noMargin}
       className={className}
-      $heightSize={$heightSize}
+      heightSize={heightSize}
     >
       <InputRow>
         {label && (
@@ -96,7 +96,7 @@ const Input = ({
           onWheel={handleScroll}
           Icon={Icon}
           ref={inputFieldRef}
-          $heightSize={$heightSize}
+          heightSize={heightSize}
           contrast={contrast}
           largeText={largeText}
         />
@@ -107,7 +107,7 @@ const Input = ({
         )}
         {!!Icon && !!onIconPress && (
           <InputButtonContainer>
-            <Button onClick={onIconPress} Icon={Icon} $transparent squared borderless />
+            <Button onClick={onIconPress} Icon={Icon} transparent squared borderless />
           </InputButtonContainer>
         )}
         {!disabled && isValid && (
@@ -125,17 +125,17 @@ const Input = ({
 
 export default Input
 
-export const InputContainer = styled(motion.div)<Pick<InputProps, 'noMargin' | '$heightSize'>>`
+export const InputContainer = styled(motion.div)<Pick<InputProps, 'noMargin' | 'heightSize'>>`
   position: relative;
-  min-height: ${({ $heightSize }) =>
-    $heightSize === 'small' ? '50px' : $heightSize === 'big' ? '60px' : 'var(--inputHeight)'};
+  min-height: ${({ heightSize }) =>
+    heightSize === 'small' ? '50px' : heightSize === 'big' ? '60px' : 'var(--inputHeight)'};
   width: 100%;
   margin: ${({ noMargin }) => (noMargin ? 0 : '16px 0')};
 `
 
 export const InputBase = styled.input<InputProps>`
-  ${({ isValid, value, label, Icon, $heightSize, contrast, largeText }) =>
-    inputDefaultStyle(isValid || !!Icon, !!value, !!label, $heightSize, contrast, largeText)};
+  ${({ isValid, value, label, Icon, heightSize, contrast, largeText }) =>
+    inputDefaultStyle(isValid || !!Icon, !!value, !!label, heightSize, contrast, largeText)};
   color-scheme: ${({ theme }) => (colord(theme.bg.primary).isDark() ? 'dark' : 'light')};
 `
 
diff --git a/apps/desktop-wallet/src/components/Inputs/MultiSelect.tsx b/apps/desktop-wallet/src/components/Inputs/MultiSelect.tsx
index 99b2a5874..2c7aef220 100644
--- a/apps/desktop-wallet/src/components/Inputs/MultiSelect.tsx
+++ b/apps/desktop-wallet/src/components/Inputs/MultiSelect.tsx
@@ -133,7 +133,7 @@ export function MultiSelectOptionsModal<T>({
               focusable
               aria-label={getOptionText(option)}
               isFloating={floatingOptions}
-              $hasCustomOptionRender={!!renderOption}
+              hasCustomOptionRender={!!renderOption}
             >
               {renderOption ? (
                 renderOption(option, isSelected)
diff --git a/apps/desktop-wallet/src/components/Inputs/Select.tsx b/apps/desktop-wallet/src/components/Inputs/Select.tsx
index 5433e96df..50b4697d9 100644
--- a/apps/desktop-wallet/src/components/Inputs/Select.tsx
+++ b/apps/desktop-wallet/src/components/Inputs/Select.tsx
@@ -73,8 +73,8 @@ interface SelectProps<T extends OptionValue> {
   skipEqualityCheck?: boolean
   noMargin?: boolean
   className?: string
-  $simpleMode?: boolean
-  $heightSize?: InputHeight
+  simpleMode?: boolean
+  heightSize?: InputHeight
   renderCustomComponent?: (value?: SelectOption<T>, disablePointer?: boolean) => ReactNode
   ListBottomComponent?: ReactNode
   allowReselectionOnClickWhenSingleOption?: boolean
@@ -93,9 +93,9 @@ function Select<T extends OptionValue>({
   contrast,
   skipEqualityCheck = false,
   noMargin,
-  $simpleMode,
+  simpleMode,
   className,
-  $heightSize,
+  heightSize,
   renderCustomComponent,
   ListBottomComponent,
   allowReselectionOnClickWhenSingleOption
@@ -105,7 +105,7 @@ function Select<T extends OptionValue>({
   const [canBeAnimated, setCanBeAnimated] = useState(false)
   const [value, setValue] = useState(controlledValue)
   const [showPopup, setShowPopup] = useState(false)
-  const [$hookCoordinates, setHookCoordinates] = useState<Coordinates | undefined>(undefined)
+  const [hookCoordinates, setHookCoordinates] = useState<Coordinates | undefined>(undefined)
 
   const multipleAvailableOptions = options.length > 1
 
@@ -187,10 +187,10 @@ function Select<T extends OptionValue>({
         onMouseDown={handleClick}
         onKeyDown={handleKeyDown}
         style={{ zIndex: raised && showPopup ? 2 : undefined, boxShadow: disabled ? 'none' : undefined }}
-        $heightSize={$heightSize}
-        $simpleMode={$simpleMode}
+        heightSize={heightSize}
+        simpleMode={simpleMode}
         tabIndex={renderCustomComponent ? -1 : 0}
-        $showPointer={multipleAvailableOptions}
+        showPointer={multipleAvailableOptions}
       >
         {renderCustomComponent ? (
           <CustomComponentContainer ref={selectedValueRef}>
@@ -201,7 +201,7 @@ function Select<T extends OptionValue>({
             <InputLabel isElevated={!!value} htmlFor={id}>
               {label}
             </InputLabel>
-            {multipleAvailableOptions && !$simpleMode && (
+            {multipleAvailableOptions && !simpleMode && (
               <MoreIcon>
                 <MoreVertical size={16} />
               </MoreIcon>
@@ -211,11 +211,11 @@ function Select<T extends OptionValue>({
               className={className}
               ref={selectedValueRef}
               id={id}
-              $simpleMode={$simpleMode}
+              simpleMode={simpleMode}
               label={label}
-              $heightSize={$heightSize}
+              heightSize={heightSize}
               contrast={contrast}
-              $showPointer={multipleAvailableOptions}
+              showPointer={multipleAvailableOptions}
             >
               <Truncate>{value?.label}</Truncate>
             </SelectedValue>
@@ -230,7 +230,7 @@ function Select<T extends OptionValue>({
             selectedOption={value}
             setValue={setInputValue}
             title={title}
-            $hookCoordinates={$hookCoordinates}
+            hookCoordinates={hookCoordinates}
             onClose={handlePopupClose}
             parentSelectRef={selectedValueRef}
             ListBottomComponent={ListBottomComponent}
@@ -246,7 +246,7 @@ interface SelectOptionsModalProps<T extends OptionValue> {
   selectedOption?: SelectOption<T>
   setValue: (value: SelectOption<T>) => void | undefined
   onClose: () => void
-  $hookCoordinates?: Coordinates
+  hookCoordinates?: Coordinates
   title?: string
   optionRender?: (option: SelectOption<T>, isSelected: boolean) => ReactNode
   onSearchInput?: (input: string) => void
@@ -264,7 +264,7 @@ export function SelectOptionsModal<T extends OptionValue>({
   selectedOption,
   setValue,
   onClose,
-  $hookCoordinates,
+  hookCoordinates,
   title,
   optionRender,
   onSearchInput,
@@ -313,7 +313,7 @@ export function SelectOptionsModal<T extends OptionValue>({
     <Popup
       title={title}
       onClose={onClose}
-      $hookCoordinates={$hookCoordinates}
+      hookCoordinates={hookCoordinates}
       minWidth={width}
       extraHeaderContent={
         onSearchInput &&
@@ -322,7 +322,7 @@ export function SelectOptionsModal<T extends OptionValue>({
             placeholder={searchPlaceholder}
             Icon={SearchIcon}
             onChange={(e) => onSearchInput(e.target.value)}
-            $heightSize="small"
+            heightSize="small"
             noMargin
           />
         )
@@ -351,7 +351,7 @@ export function SelectOptionsModal<T extends OptionValue>({
               focusable
               aria-label={option.label}
               isFloating={floatingOptions}
-              $hasCustomOptionRender={!!optionRender}
+              hasCustomOptionRender={!!optionRender}
             >
               {optionRender ? (
                 optionRender(option, isSelected)
@@ -397,20 +397,20 @@ export const MoreIcon = styled.div`
 `
 
 const SelectedValue = styled.div<InputProps>`
-  ${({ $heightSize, label, contrast }) => inputDefaultStyle(true, true, !!label, $heightSize, contrast)};
+  ${({ heightSize, label, contrast }) => inputDefaultStyle(true, true, !!label, heightSize, contrast)};
 
   padding-right: 35px;
   font-weight: var(--fontWeight-semiBold);
 
-  cursor: ${({ $showPointer }) => $showPointer && 'pointer'};
+  cursor: ${({ showPointer }) => showPointer && 'pointer'};
 
   display: flex;
   align-items: center;
   min-width: 0;
   box-shadow: ${({ theme }) => theme.shadow.primary};
 
-  ${({ $simpleMode }) =>
-    $simpleMode &&
+  ${({ simpleMode }) =>
+    simpleMode &&
     css`
       border: 0;
 
@@ -421,12 +421,12 @@ const SelectedValue = styled.div<InputProps>`
 `
 
 export const SelectContainer = styled(InputContainer)<
-  Pick<InputProps, 'noMargin' | '$heightSize' | '$simpleMode' | '$showPointer'>
+  Pick<InputProps, 'noMargin' | 'heightSize' | 'simpleMode' | 'showPointer'>
 >`
-  cursor: ${({ $showPointer }) => $showPointer && 'pointer'};
-  margin: ${({ noMargin, $simpleMode }) => (noMargin || $simpleMode ? 0 : '16px 0')};
-  height: ${({ $heightSize }) =>
-    $heightSize === 'small' ? '50px' : $heightSize === 'big' ? '60px' : 'var(--inputHeight)'};
+  cursor: ${({ showPointer }) => showPointer && 'pointer'};
+  margin: ${({ noMargin, simpleMode }) => (noMargin || simpleMode ? 0 : '16px 0')};
+  height: ${({ heightSize }) =>
+    heightSize === 'small' ? '50px' : heightSize === 'big' ? '60px' : 'var(--inputHeight)'};
 
   &:focus {
     ${SelectedValue} {
@@ -451,7 +451,7 @@ export const OptionItem = styled.button<{
   focusable?: boolean
   invisible?: boolean
   isFloating?: boolean
-  $hasCustomOptionRender?: boolean
+  hasCustomOptionRender?: boolean
 }>`
   display: flex;
   justify-content: space-between;
@@ -464,8 +464,8 @@ export const OptionItem = styled.button<{
   visibility: ${({ invisible }) => invisible && 'hidden'};
   font-weight: ${({ selected }) => selected && 'var(--fontWeight-semiBold)'};
 
-  ${({ $hasCustomOptionRender }) => css`
-    padding: ${$hasCustomOptionRender ? '0px' : 'var(--spacing-4)'};
+  ${({ hasCustomOptionRender }) => css`
+    padding: ${hasCustomOptionRender ? '0px' : 'var(--spacing-4)'};
   `};
 
   ${({ isFloating, selected, theme }) =>
diff --git a/apps/desktop-wallet/src/components/Inputs/SelectOptionAddress.tsx b/apps/desktop-wallet/src/components/Inputs/SelectOptionAddress.tsx
index 2481ac33d..251a37246 100644
--- a/apps/desktop-wallet/src/components/Inputs/SelectOptionAddress.tsx
+++ b/apps/desktop-wallet/src/components/Inputs/SelectOptionAddress.tsx
@@ -51,7 +51,7 @@ const SelectOptionAddress = ({ address, isSelected, className }: SelectOptionAdd
       MainContent={
         <Header>
           <AddressBadgeContainer>
-            <AddressBadgeStyled addressHash={address.hash} disableA11y $truncate appendHash />
+            <AddressBadgeStyled addressHash={address.hash} disableA11y truncate appendHash />
           </AddressBadgeContainer>
           <Group>
             {t('Group')} {address.group}
@@ -63,7 +63,7 @@ const SelectOptionAddress = ({ address, isSelected, className }: SelectOptionAdd
           {knownAssetsWithBalance.map((a) => (
             <AssetBadge key={a.id} assetId={a.id} amount={a.balance} withBackground />
           ))}
-          {unknownAssetsNb > 0 && <Badge $compact>+ {unknownAssetsNb}</Badge>}
+          {unknownAssetsNb > 0 && <Badge compact>+ {unknownAssetsNb}</Badge>}
         </AssetList>
       }
     />
diff --git a/apps/desktop-wallet/src/components/Inputs/WalletPassphrase.tsx b/apps/desktop-wallet/src/components/Inputs/WalletPassphrase.tsx
index 7104f0be1..b81404007 100644
--- a/apps/desktop-wallet/src/components/Inputs/WalletPassphrase.tsx
+++ b/apps/desktop-wallet/src/components/Inputs/WalletPassphrase.tsx
@@ -64,7 +64,7 @@ const WalletPassphrase = ({ onPassphraseConfirmed, setIsPassphraseConfirmed, cla
   }
 
   return (
-    <Container className={className} $isOpen={isToggleSectionOpen}>
+    <Container className={className} isOpen={isToggleSectionOpen}>
       <ToggleSection
         title={t('Use optional passphrase')}
         subtitle={t('Advanced feature')}
@@ -116,10 +116,10 @@ const WalletPassphrase = ({ onPassphraseConfirmed, setIsPassphraseConfirmed, cla
 
 export default WalletPassphrase
 
-const Container = styled.div<{ $isOpen: boolean }>`
+const Container = styled.div<{ isOpen: boolean }>`
   max-width: 350px;
 
-  opacity: ${({ $isOpen }) => ($isOpen ? 1 : 0.3)};
+  opacity: ${({ isOpen }) => (isOpen ? 1 : 0.3)};
   transition: opacity 0.2s ease-out;
 
   &:hover {
diff --git a/apps/desktop-wallet/src/components/Inputs/index.tsx b/apps/desktop-wallet/src/components/Inputs/index.tsx
index cd88565ca..2605ed187 100644
--- a/apps/desktop-wallet/src/components/Inputs/index.tsx
+++ b/apps/desktop-wallet/src/components/Inputs/index.tsx
@@ -38,10 +38,10 @@ export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
   inputFieldRef?: RefObject<HTMLInputElement>
   liftLabel?: boolean
   className?: string
-  $heightSize?: InputHeight
-  $simpleMode?: boolean
+  heightSize?: InputHeight
+  simpleMode?: boolean
   largeText?: boolean
-  $showPointer?: boolean
+  showPointer?: boolean
 }
 
 export interface TextAreaProps extends InputHTMLAttributes<HTMLTextAreaElement> {
@@ -64,12 +64,12 @@ export const inputDefaultStyle = (
   hasIcon?: boolean,
   hasValue?: boolean,
   hasLabel?: boolean,
-  $heightSize?: InputHeight,
+  heightSize?: InputHeight,
   isContrasted?: boolean,
   largeText?: boolean
 ) => css`
   background-image: none;
-  height: ${$heightSize === 'small' ? '50px' : $heightSize === 'big' ? '60px' : 'var(--inputHeight)'};
+  height: ${heightSize === 'small' ? '50px' : heightSize === 'big' ? '60px' : 'var(--inputHeight)'};
   width: 100%;
   border-radius: var(--radius-big);
   background-color: ${({ theme }) => (isContrasted && theme.name === 'dark' ? theme.bg.background2 : theme.bg.primary)};
diff --git a/apps/desktop-wallet/src/components/NavItem.tsx b/apps/desktop-wallet/src/components/NavItem.tsx
index 1b60ead76..672b96fa2 100644
--- a/apps/desktop-wallet/src/components/NavItem.tsx
+++ b/apps/desktop-wallet/src/components/NavItem.tsx
@@ -52,8 +52,8 @@ const NavItem = ({ Icon, label, to, onClick }: NavItemProps) => {
       borderless={!isActive}
       squared
       role="secondary"
-      $transparent={!isActive}
-      $isActive={isActive}
+      transparent={!isActive}
+      isActive={isActive}
       data-tooltip-id="sidenav"
       data-tooltip-content={label}
       iconColor={theme.font.primary}
@@ -61,9 +61,9 @@ const NavItem = ({ Icon, label, to, onClick }: NavItemProps) => {
   )
 }
 
-const ButtonStyled = styled(Button)<{ $isActive: boolean }>`
+const ButtonStyled = styled(Button)<{ isActive: boolean }>`
   &:not(:hover) {
-    opacity: ${({ $isActive }) => ($isActive ? 1 : 0.5)} !important;
+    opacity: ${({ isActive }) => (isActive ? 1 : 0.5)} !important;
   }
 
   &:hover {
diff --git a/apps/desktop-wallet/src/components/NetworkSwitch.tsx b/apps/desktop-wallet/src/components/NetworkSwitch.tsx
index 3060afd58..9f041f492 100644
--- a/apps/desktop-wallet/src/components/NetworkSwitch.tsx
+++ b/apps/desktop-wallet/src/components/NetworkSwitch.tsx
@@ -124,7 +124,7 @@ const SelectCustomComponent = () => {
   }[network.status]
 
   return (
-    <Button role="secondary" $transparent short data-tooltip-id="default" data-tooltip-content={t('Current network')}>
+    <Button role="secondary" transparent short data-tooltip-id="default" data-tooltip-content={t('Current network')}>
       <NetworkNameLabel>{upperFirst(network.name)}</NetworkNameLabel>
       <DotIcon color={networkStatusColor} />
     </Button>
diff --git a/apps/desktop-wallet/src/components/PageComponents/PageContainers.tsx b/apps/desktop-wallet/src/components/PageComponents/PageContainers.tsx
index dba4dc24a..c05571110 100644
--- a/apps/desktop-wallet/src/components/PageComponents/PageContainers.tsx
+++ b/apps/desktop-wallet/src/components/PageComponents/PageContainers.tsx
@@ -37,7 +37,7 @@ interface SectionProps extends HTMLMotionProps<'div'> {
   apparitionDelay?: number
   style?: MotionStyle
   inList?: boolean
-  $align?: SectionContentAlignment
+  align?: SectionContentAlignment
 }
 
 const sectionVariants: Variants = {
@@ -68,7 +68,7 @@ export const FloatingPanel: FC<MainPanelProps> = ({ children, ...props }) => (
   </StyledFloatingPanel>
 )
 
-export const Section = ({ children, apparitionDelay, inList, $align = 'center', style, className }: SectionProps) => (
+export const Section = ({ children, apparitionDelay, inList, align = 'center', style, className }: SectionProps) => (
   <SectionContainer
     variants={sectionVariants}
     initial="hidden"
@@ -76,7 +76,7 @@ export const Section = ({ children, apparitionDelay, inList, $align = 'center',
     exit="hidden"
     custom={apparitionDelay}
     inList={inList}
-    $align={$align}
+    align={align}
     style={style}
     className={className}
   >
@@ -120,9 +120,9 @@ export const PanelContentContainer = styled.div`
   flex-direction: column;
 `
 
-export const SectionContainer = styled(motion.div)<{ $align: SectionContentAlignment; inList?: boolean }>`
+export const SectionContainer = styled(motion.div)<{ align: SectionContentAlignment; inList?: boolean }>`
   display: flex;
-  align-items: ${({ $align }) => $align};
+  align-items: ${({ align }) => align};
   flex-direction: column;
   min-width: 280px;
 
diff --git a/apps/desktop-wallet/src/components/PageComponents/SideBar.tsx b/apps/desktop-wallet/src/components/PageComponents/SideBar.tsx
index 34727e51d..9b8772c7e 100644
--- a/apps/desktop-wallet/src/components/PageComponents/SideBar.tsx
+++ b/apps/desktop-wallet/src/components/PageComponents/SideBar.tsx
@@ -49,7 +49,7 @@ const SideBar: FC<SideBarProps> = ({ animateEntry, className, children }) => {
       <BottomButtons>
         <ThemeSwitcher />
         <Button
-          $transparent
+          transparent
           squared
           role="secondary"
           onClick={() => setIsSettingsModalOpen(true)}
diff --git a/apps/desktop-wallet/src/components/Popup.tsx b/apps/desktop-wallet/src/components/Popup.tsx
index 79087a910..9d26ae05e 100644
--- a/apps/desktop-wallet/src/components/Popup.tsx
+++ b/apps/desktop-wallet/src/components/Popup.tsx
@@ -31,14 +31,14 @@ interface PopupProps {
   children?: ReactNode | ReactNode[]
   title?: string
   extraHeaderContent?: ReactNode
-  $hookCoordinates?: Coordinates
+  hookCoordinates?: Coordinates
   minWidth?: number
 }
 
 const minMarginToEdge = 20
 const headerHeight = 50
 
-const Popup = ({ children, onClose, title, $hookCoordinates, extraHeaderContent, minWidth = 200 }: PopupProps) => {
+const Popup = ({ children, onClose, title, hookCoordinates, extraHeaderContent, minWidth = 200 }: PopupProps) => {
   const { height: windowHeight, width: windowWidth } = useWindowSize() // Recompute position on window resize
 
   const contentRef = useRef<HTMLDivElement>(null)
@@ -85,7 +85,7 @@ const Popup = ({ children, onClose, title, $hookCoordinates, extraHeaderContent,
       {...fastTransition}
     >
       {title && (
-        <Header $hasExtraContent={!!extraHeaderContent}>
+        <Header hasExtraContent={!!extraHeaderContent}>
           <h2>{title}</h2>
           {extraHeaderContent}
         </Header>
@@ -96,10 +96,10 @@ const Popup = ({ children, onClose, title, $hookCoordinates, extraHeaderContent,
 
   return (
     <ModalContainer onClose={onClose}>
-      {$hookCoordinates ? (
+      {hookCoordinates ? (
         <Hook
-          $hookCoordinates={$hookCoordinates}
-          $contentWidth={contentRef.current?.clientWidth || 0}
+          hookCoordinates={hookCoordinates}
+          contentWidth={contentRef.current?.clientWidth || 0}
           onClick={handleHookClick}
         >
           {PopupContent}
@@ -113,13 +113,13 @@ const Popup = ({ children, onClose, title, $hookCoordinates, extraHeaderContent,
 
 export default Popup
 
-const Hook = styled.div<{ $hookCoordinates: Coordinates; $contentWidth: number }>`
+const Hook = styled.div<{ hookCoordinates: Coordinates; contentWidth: number }>`
   position: absolute;
   display: flex;
   justify-content: center;
   align-items: center;
-  top: ${({ $hookCoordinates }) => $hookCoordinates.y - headerHeight / 2}px;
-  left: ${({ $hookCoordinates, $contentWidth }) => $hookCoordinates.x - $contentWidth / 2}px;
+  top: ${({ hookCoordinates }) => hookCoordinates.y - headerHeight / 2}px;
+  left: ${({ hookCoordinates, contentWidth }) => hookCoordinates.x - contentWidth / 2}px;
 `
 
 const Content = styled(motion.div)<Pick<PopupProps, 'minWidth'>>`
@@ -140,8 +140,8 @@ const Content = styled(motion.div)<Pick<PopupProps, 'minWidth'>>`
   background-color: ${({ theme }) => theme.bg.primary};
 `
 
-const Header = styled.div<{ $hasExtraContent: boolean }>`
-  height: ${({ $hasExtraContent }) => ($hasExtraContent ? 'auto' : `${headerHeight}px`)};
+const Header = styled.div<{ hasExtraContent: boolean }>`
+  height: ${({ hasExtraContent }) => (hasExtraContent ? 'auto' : `${headerHeight}px`)};
   padding: var(--spacing-2) var(--spacing-2) var(--spacing-2) var(--spacing-4);
   border-bottom: 1px solid ${({ theme }) => theme.border.primary};
   background-color: ${({ theme }) => theme.bg.tertiary};
diff --git a/apps/desktop-wallet/src/components/TabBar.tsx b/apps/desktop-wallet/src/components/TabBar.tsx
index 33e537515..5bbe77d8a 100644
--- a/apps/desktop-wallet/src/components/TabBar.tsx
+++ b/apps/desktop-wallet/src/components/TabBar.tsx
@@ -61,9 +61,9 @@ const TabBar = ({
             role="tab"
             tabIndex={0}
             aria-selected={isActive}
-            $isActive={isActive}
+            isActive={isActive}
           >
-            <TabLabel $isActive={isActive}>{item.label}</TabLabel>
+            <TabLabel isActive={isActive}>{item.label}</TabLabel>
           </TabComponent>
         )
       })}
@@ -81,14 +81,14 @@ export default styled(TabBar)`
   height: 55px;
 `
 
-export const Tab = styled.div<{ $isActive: boolean }>`
+export const Tab = styled.div<{ isActive: boolean }>`
   flex: 1;
   display: flex;
   min-width: 50px;
   text-align: center;
   justify-content: center;
   align-items: center;
-  background-color: ${({ $isActive, theme }) => ($isActive ? theme.bg.background1 : 'transparent')};
+  background-color: ${({ isActive, theme }) => (isActive ? theme.bg.background1 : 'transparent')};
   border: 1px solid ${({ theme }) => theme.border.primary};
   border-bottom: none;
   cursor: pointer;
@@ -96,8 +96,8 @@ export const Tab = styled.div<{ $isActive: boolean }>`
   font-weight: var(--fontWeight-semiBold);
   margin-bottom: -1px;
 
-  ${({ $isActive, theme }) =>
-    $isActive
+  ${({ isActive, theme }) =>
+    isActive
       ? css`
           color: ${theme.font.primary};
         `
@@ -114,9 +114,9 @@ export const Tab = styled.div<{ $isActive: boolean }>`
   }
 `
 
-const TabLabel = styled.span<{ $isActive: boolean }>`
-  ${({ $isActive }) =>
-    !$isActive &&
+const TabLabel = styled.span<{ isActive: boolean }>`
+  ${({ isActive }) =>
+    !isActive &&
     css`
       filter: saturate(10%);
     `}
diff --git a/apps/desktop-wallet/src/components/Table.tsx b/apps/desktop-wallet/src/components/Table.tsx
index 19adb9375..147473349 100644
--- a/apps/desktop-wallet/src/components/Table.tsx
+++ b/apps/desktop-wallet/src/components/Table.tsx
@@ -32,7 +32,7 @@ export interface TableProps {
 
 interface TableCellProps {
   truncate?: boolean
-  $align?: AlignType
+  align?: AlignType
 }
 
 const Table: FC<TableProps> = ({ className, children, minWidth }) => (
@@ -76,11 +76,11 @@ export const TableCell = styled.div<TableCellProps>`
   &:not(:last-child) {
     padding-right: var(--spacing-5);
   }
-  ${({ $align }) =>
-    $align &&
+  ${({ align }) =>
+    align &&
     css`
-      justify-self: ${$align};
-      text-align: ${$align === 'end' ? 'right' : 'auto'};
+      justify-self: ${align};
+      text-align: ${align === 'end' ? 'right' : 'auto'};
     `};
 `
 
@@ -101,7 +101,7 @@ const TableColumns = styled.div<{ columnWidths?: (string | undefined)[] }>`
   min-height: 55px;
 `
 
-export const TableRow = styled(TableColumns)<{ onClick?: () => void; $blinking?: boolean }>`
+export const TableRow = styled(TableColumns)<{ onClick?: () => void; blinking?: boolean }>`
   border-bottom: 1px solid ${({ theme }) => theme.border.secondary};
 
   &:last-child {
@@ -119,8 +119,8 @@ export const TableRow = styled(TableColumns)<{ onClick?: () => void; $blinking?:
       }
     `}
 
-  ${({ $blinking }) =>
-    $blinking &&
+  ${({ blinking }) =>
+    blinking &&
     css`
       opacity: 0.5;
 
diff --git a/apps/desktop-wallet/src/components/TableTabBar.tsx b/apps/desktop-wallet/src/components/TableTabBar.tsx
index b0ab0326e..7bc2a9434 100644
--- a/apps/desktop-wallet/src/components/TableTabBar.tsx
+++ b/apps/desktop-wallet/src/components/TableTabBar.tsx
@@ -28,14 +28,14 @@ export default styled(TableTabBar)`
 
 const TableTab = styled(Tab)`
   min-width: 60px;
-  background-color: ${({ $isActive, theme }) => ($isActive ? theme.bg.primary : theme.bg.tertiary)};
+  background-color: ${({ isActive, theme }) => (isActive ? theme.bg.primary : theme.bg.tertiary)};
   border: none;
 
   border-bottom: 1px solid ${({ theme }) => theme.border.secondary};
   margin-bottom: 0;
 
-  ${({ $isActive }) =>
-    $isActive &&
+  ${({ isActive, theme }) =>
+    isActive &&
     css`
       border-bottom: 1px solid transparent;
     `}
diff --git a/apps/desktop-wallet/src/components/TransactionList.tsx b/apps/desktop-wallet/src/components/TransactionList.tsx
index 5a78e75b3..f94ece9f9 100644
--- a/apps/desktop-wallet/src/components/TransactionList.tsx
+++ b/apps/desktop-wallet/src/components/TransactionList.tsx
@@ -52,7 +52,7 @@ interface TransactionListProps {
   className?: string
   title?: string
   limit?: number
-  $compact?: boolean
+  compact?: boolean
   hideHeader?: boolean
   hideFromColumn?: boolean
   directions?: Direction[]
@@ -67,7 +67,7 @@ const TransactionList = ({
   addressHashes,
   title,
   limit,
-  $compact,
+  compact,
   hideHeader = false,
   hideFromColumn = false,
   directions,
@@ -171,12 +171,12 @@ const TransactionList = ({
           </>
         )}
         {pendingTxs.map((tx) => (
-          <TableRow key={tx.hash} $blinking role="row" tabIndex={0}>
+          <TableRow key={tx.hash} blinking role="row" tabIndex={0}>
             <TransactionalInfo
               transaction={tx}
               addressHash={tx.address.hash}
               showInternalInflows={hideFromColumn}
-              $compact={$compact}
+              compact={compact}
             />
           </TableRow>
         ))}
@@ -192,13 +192,13 @@ const TransactionList = ({
               transaction={tx}
               addressHash={tx.address.hash}
               showInternalInflows={hideFromColumn}
-              $compact={$compact}
+              compact={compact}
             />
           </TableRow>
         ))}
         {limit === undefined && confirmedTxs.length !== totalNumberOfTransactions && (
           <TableRow role="row">
-            <TableCell $align="center" role="gridcell">
+            <TableCell align="center" role="gridcell">
               {allTxsLoaded ? (
                 <span>{t('All transactions loaded!')}</span>
               ) : userAttemptedToLoadMoreTxs ? (
@@ -211,7 +211,7 @@ const TransactionList = ({
         )}
         {!stateUninitialized && !pendingTxs.length && !displayedConfirmedTxs.length && (
           <TableRow role="row" tabIndex={0}>
-            <TableCellPlaceholder $align="center">{t('No transactions to display')}</TableCellPlaceholder>
+            <TableCellPlaceholder align="center">{t('No transactions to display')}</TableCellPlaceholder>
           </TableRow>
         )}
       </Table>
diff --git a/apps/desktop-wallet/src/components/TransactionalInfo.tsx b/apps/desktop-wallet/src/components/TransactionalInfo.tsx
index 81324fc9c..af07693f8 100644
--- a/apps/desktop-wallet/src/components/TransactionalInfo.tsx
+++ b/apps/desktop-wallet/src/components/TransactionalInfo.tsx
@@ -45,7 +45,7 @@ interface TransactionalInfoProps {
   transaction: AddressTransaction
   addressHash?: AddressHash
   showInternalInflows?: boolean
-  $compact?: boolean
+  compact?: boolean
   className?: string
 }
 
@@ -54,7 +54,7 @@ const TransactionalInfo = ({
   addressHash: addressHashProp,
   className,
   showInternalInflows,
-  $compact
+  compact
 }: TransactionalInfoProps) => {
   const { t } = useTranslation()
   const { addressHash: addressHashParam = '' } = useParams<{ addressHash: AddressHash }>()
@@ -72,7 +72,7 @@ const TransactionalInfo = ({
     tx.type === 'contract' ? (
       <Badge>{t('Smart contract')}</Badge>
     ) : (
-      <AddressBadge $truncate addressHash={direction === 'in' ? tx.fromAddress : tx.toAddress} $withBorders />
+      <AddressBadge truncate addressHash={direction === 'in' ? tx.fromAddress : tx.toAddress} withBorders />
     )
   ) : null
 
@@ -97,7 +97,7 @@ const TransactionalInfo = ({
           </AssetTime>
         </DirectionAndTime>
       </CellTime>
-      <CellAssetBadges $compact={$compact}>
+      <CellAssetBadges compact={compact}>
         <AssetBadges>
           {assets.map(({ id }) => (
             <AssetBadge assetId={id} simple key={id} />
@@ -105,12 +105,12 @@ const TransactionalInfo = ({
         </AssetBadges>
       </CellAssetBadges>
       {!showInternalInflows && (
-        <CellAddress $alignRight>
+        <CellAddress alignRight>
           <HiddenLabel text={direction === 'swap' ? t('between') : t('from')} />
           {isPending ? (
-            <AddressBadgeStyled addressHash={tx.fromAddress} $truncate disableA11y $withBorders />
+            <AddressBadgeStyled addressHash={tx.fromAddress} truncate disableA11y withBorders />
           ) : direction === 'out' || direction === 'swap' ? (
-            <AddressBadgeStyled addressHash={addressHash} $truncate disableA11y $withBorders />
+            <AddressBadgeStyled addressHash={addressHash} truncate disableA11y withBorders />
           ) : (
             direction === 'in' && (
               <IOList
@@ -149,7 +149,7 @@ const TransactionalInfo = ({
       <CellAddress>
         <DirectionalAddress>
           {direction === 'in' && !showInternalInflows && (
-            <AddressBadge addressHash={addressHash} $truncate disableA11y $withBorders />
+            <AddressBadge addressHash={addressHash} truncate disableA11y withBorders />
           )}
           {((direction === 'in' && showInternalInflows) || direction === 'out' || direction === 'swap') &&
             (pendingDestinationAddress || (
@@ -169,7 +169,7 @@ const TransactionalInfo = ({
         {knownAssets.map(({ id, amount, decimals, symbol }) => (
           <AmountContainer key={id}>
             {lockTime && lockTime > new Date() && <LockStyled unlockAt={lockTime} />}
-            <Amount value={amount} decimals={decimals} suffix={symbol} $highlight={!isMoved} showPlusMinus={!isMoved} />
+            <Amount value={amount} decimals={decimals} suffix={symbol} highlight={!isMoved} showPlusMinus={!isMoved} />
           </AmountContainer>
         ))}
       </TableCellAmount>
@@ -215,7 +215,7 @@ const AssetTime = styled.div`
   max-width: 120px;
 `
 
-const CellAddress = styled.div<{ $alignRight?: boolean }>`
+const CellAddress = styled.div<{ alignRight?: boolean }>`
   min-width: 0;
   max-width: 120px;
   flex-grow: 1;
@@ -225,8 +225,8 @@ const CellAddress = styled.div<{ $alignRight?: boolean }>`
   display: flex;
   width: 100%;
 
-  ${({ $alignRight }) =>
-    $alignRight &&
+  ${({ alignRight }) =>
+    alignRight &&
     css`
       justify-content: flex-end;
     `}
@@ -258,10 +258,10 @@ const LockStyled = styled(Lock)`
   color: ${({ theme }) => theme.font.secondary};
 `
 
-const CellAssetBadges = styled.div<Pick<TransactionalInfoProps, '$compact'>>`
+const CellAssetBadges = styled.div<Pick<TransactionalInfoProps, 'compact'>>`
   flex-grow: 1;
   flex-shrink: 0;
-  width: ${({ $compact }) => ($compact ? '80px' : '180px')};
+  width: ${({ compact }) => (compact ? '80px' : '180px')};
 
   @media ${deviceBreakPoints.desktop} {
     width: 80px;
diff --git a/apps/desktop-wallet/src/modals/AddressDetailsModal.tsx b/apps/desktop-wallet/src/modals/AddressDetailsModal.tsx
index 8e28b318f..05ac5e7bc 100644
--- a/apps/desktop-wallet/src/modals/AddressDetailsModal.tsx
+++ b/apps/desktop-wallet/src/modals/AddressDetailsModal.tsx
@@ -71,7 +71,7 @@ const AddressDetailsModal = ({ addressHash, onClose }: AddressDetailsModalProps)
                 addressHash={address.hash}
                 hideColorIndication
                 disableCopy={!!address.label}
-                $truncate
+                truncate
               />
               {address.label && <TitleAddressHash hash={address.hash} />}
             </Title>
@@ -81,7 +81,7 @@ const AddressDetailsModal = ({ addressHash, onClose }: AddressDetailsModalProps)
           </LeftSide>
           <ExplorerButton
             role="secondary"
-            $transparent
+            transparent
             short
             onClick={() => openInWebBrowser(`${explorerUrl}/addresses/${addressHash}`)}
           >
@@ -116,7 +116,7 @@ const AddressDetailsModal = ({ addressHash, onClose }: AddressDetailsModalProps)
         <TransactionList
           title={t('Address transactions')}
           addressHashes={[address.hash]}
-          $compact
+          compact
           hideFromColumn
           headerExtraContent={
             <Button short role="secondary" Icon={FileDown} onClick={() => setIsCSVExportModalOpen(true)}>
diff --git a/apps/desktop-wallet/src/modals/CenteredModal.tsx b/apps/desktop-wallet/src/modals/CenteredModal.tsx
index cd8abbfe7..88ac0dfac 100644
--- a/apps/desktop-wallet/src/modals/CenteredModal.tsx
+++ b/apps/desktop-wallet/src/modals/CenteredModal.tsx
@@ -70,10 +70,10 @@ const CenteredModal: FC<CenteredModalProps> = ({
   return (
     <ModalContainer onClose={onClose} focusMode={focusMode} hasPadding skipFocusOnMount={skipFocusOnMount} {...rest}>
       <CenteredBox role="dialog" {...fadeInOutScaleFast} narrow={narrow}>
-        <ModalHeader $transparent={transparentHeader}>
+        <ModalHeader transparent={transparentHeader}>
           <TitleRow>
             {onBack && !disableBack && (
-              <BackButton aria-label={t('Back')} squared role="secondary" $transparent onClick={onBack} borderless>
+              <BackButton aria-label={t('Back')} squared role="secondary" transparent onClick={onBack} borderless>
                 <ChevronLeft />
               </BackButton>
             )}
@@ -88,7 +88,7 @@ const CenteredModal: FC<CenteredModalProps> = ({
               </span>
               {subtitle && <ModalSubtitle>{subtitle}</ModalSubtitle>}
             </PanelTitle>
-            <CloseButton aria-label={t('Close')} squared role="secondary" $transparent onClick={onClose} borderless>
+            <CloseButton aria-label={t('Close')} squared role="secondary" transparent onClick={onClose} borderless>
               <X />
             </CloseButton>
           </TitleRow>
@@ -162,12 +162,12 @@ const CenteredBox = styled(motion.div)<{ narrow: boolean }>`
   }
 `
 
-export const ModalHeader = styled.header<{ $transparent?: boolean }>`
+export const ModalHeader = styled.header<{ transparent?: boolean }>`
   position: sticky;
   top: 0;
   z-index: 1;
-  ${({ $transparent }) =>
-    !$transparent &&
+  ${({ transparent }) =>
+    !transparent &&
     css`
       background-color: ${({ theme }) => theme.bg.background2};
       border-bottom: 1px solid ${({ theme }) => theme.border.primary};
diff --git a/apps/desktop-wallet/src/modals/NewAddressModal.tsx b/apps/desktop-wallet/src/modals/NewAddressModal.tsx
index 22b89f34c..1c11d7e97 100644
--- a/apps/desktop-wallet/src/modals/NewAddressModal.tsx
+++ b/apps/desktop-wallet/src/modals/NewAddressModal.tsx
@@ -108,7 +108,7 @@ const NewAddressModal = ({ title, onClose, singleAddress }: NewAddressModalProps
   return (
     <CenteredModal title={title} onClose={onClose}>
       {!isPassphraseUsed && (
-        <Section $align="flex-start">
+        <Section align="flex-start">
           <AddressMetadataForm
             label={addressLabel}
             setLabel={setAddressLabel}
diff --git a/apps/desktop-wallet/src/modals/NotificationsModal.tsx b/apps/desktop-wallet/src/modals/NotificationsModal.tsx
index b526bd8d4..7aa278a27 100644
--- a/apps/desktop-wallet/src/modals/NotificationsModal.tsx
+++ b/apps/desktop-wallet/src/modals/NotificationsModal.tsx
@@ -46,7 +46,7 @@ const NotificationsModal = ({ onClose, focusMode }: ModalContainerProps) => {
       <NotificationsBox role="dialog" {...fadeInOutScaleFast}>
         <h2>{t('Current wallet')}</h2>
         <WalletSwitcher onUnlock={onClose} />
-        <Button onClick={lockWallet} wide $transparent Icon={Lock}>
+        <Button onClick={lockWallet} wide transparent Icon={Lock}>
           {t('Lock wallet')}
         </Button>
       </NotificationsBox>
diff --git a/apps/desktop-wallet/src/modals/SendModals/AddressInputs.tsx b/apps/desktop-wallet/src/modals/SendModals/AddressInputs.tsx
index 342d38b4d..de00daa12 100644
--- a/apps/desktop-wallet/src/modals/SendModals/AddressInputs.tsx
+++ b/apps/desktop-wallet/src/modals/SendModals/AddressInputs.tsx
@@ -117,7 +117,7 @@ const AddressInputs = ({
               onAddressChange={onFromAddressChange}
               id="from-address"
               hideAddressesWithoutAssets={hideFromAddressesWithoutAssets}
-              $simpleMode
+              simpleMode
               shouldDisplayAddressSelectModal={isAddressSelectModalOpen}
             />
           )}
diff --git a/apps/desktop-wallet/src/modals/SendModals/CheckAddressesBox.tsx b/apps/desktop-wallet/src/modals/SendModals/CheckAddressesBox.tsx
index 0681bf701..d348c93c3 100644
--- a/apps/desktop-wallet/src/modals/SendModals/CheckAddressesBox.tsx
+++ b/apps/desktop-wallet/src/modals/SendModals/CheckAddressesBox.tsx
@@ -49,7 +49,7 @@ const CheckAddressesBox = ({ fromAddress, toAddressHash, className }: CheckAddre
       <AddressRow>
         <AddressLabel>{t('From')}</AddressLabel>
         <AddressLabelHash>
-          <AddressBadge addressHash={fromAddress.hash} $truncate showFull appendHash />
+          <AddressBadge addressHash={fromAddress.hash} truncate showFull appendHash />
         </AddressLabelHash>
       </AddressRow>
       {toAddressHash && (
diff --git a/apps/desktop-wallet/src/modals/SettingsModal/DevToolsSettingsSection.tsx b/apps/desktop-wallet/src/modals/SettingsModal/DevToolsSettingsSection.tsx
index 2849feb83..d854503b5 100644
--- a/apps/desktop-wallet/src/modals/SettingsModal/DevToolsSettingsSection.tsx
+++ b/apps/desktop-wallet/src/modals/SettingsModal/DevToolsSettingsSection.tsx
@@ -109,7 +109,7 @@ const DevToolsSettingsSection = () => {
 
   return (
     <>
-      <Section $align="flex-start">
+      <Section align="flex-start">
         <Box>
           <InlineLabelValueInput
             label={t('Enable developer tools')}
@@ -120,7 +120,7 @@ const DevToolsSettingsSection = () => {
       </Section>
       {devTools && (
         <>
-          <Section $align="flex-start" inList>
+          <Section align="flex-start" inList>
             <h2 tabIndex={0} role="label">
               {t('Testnet faucet')}
             </h2>
@@ -139,7 +139,7 @@ const DevToolsSettingsSection = () => {
               {t('Receive testnet tokens')}
             </Button>
           </Section>
-          <Section $align="flex-start" inList>
+          <Section align="flex-start" inList>
             <h2 tabIndex={0} role="label">
               {t('Smart contracts')}
             </h2>
@@ -152,7 +152,7 @@ const DevToolsSettingsSection = () => {
               </Button>
             </ButtonsRow>
           </Section>
-          <PrivateKeySection $align="flex-start" role="list">
+          <PrivateKeySection align="flex-start" role="list">
             <h2 tabIndex={0} role="label">
               {t('Address keys export')}
             </h2>
diff --git a/apps/desktop-wallet/src/modals/SettingsModal/EditWalletNameModal.tsx b/apps/desktop-wallet/src/modals/SettingsModal/EditWalletNameModal.tsx
index 3c6276ce7..12ebf371d 100644
--- a/apps/desktop-wallet/src/modals/SettingsModal/EditWalletNameModal.tsx
+++ b/apps/desktop-wallet/src/modals/SettingsModal/EditWalletNameModal.tsx
@@ -77,7 +77,7 @@ const EditWalletNameModal = (props: CenteredModalProps) => {
               onBlur={onBlur}
               error={errors.name?.type === 'required' ? requiredErrorMessage : errors.name?.message}
               isValid={!!value && !errors.name}
-              $heightSize="big"
+              heightSize="big"
             />
           )}
           rules={{
diff --git a/apps/desktop-wallet/src/modals/SettingsModal/GeneralSettingsSection.tsx b/apps/desktop-wallet/src/modals/SettingsModal/GeneralSettingsSection.tsx
index 7534e3e58..20c24d2e1 100644
--- a/apps/desktop-wallet/src/modals/SettingsModal/GeneralSettingsSection.tsx
+++ b/apps/desktop-wallet/src/modals/SettingsModal/GeneralSettingsSection.tsx
@@ -169,7 +169,7 @@ const GeneralSettingsSection = ({ className }: GeneralSettingsSectionProps) => {
             }}
             noMargin
             title={t('Lock time')}
-            $heightSize="small"
+            heightSize="small"
           />
         }
       />
@@ -185,7 +185,7 @@ const GeneralSettingsSection = ({ className }: GeneralSettingsSectionProps) => {
             controlledValue={themeOptions.find((l) => l.value === theme)}
             noMargin
             title={t('Theme')}
-            $heightSize="small"
+            heightSize="small"
           />
         }
       />
@@ -217,7 +217,7 @@ const GeneralSettingsSection = ({ className }: GeneralSettingsSectionProps) => {
             controlledValue={languageOptions.find((l) => l.value === language)}
             noMargin
             title={t('Language')}
-            $heightSize="small"
+            heightSize="small"
           />
         }
       >
@@ -246,7 +246,7 @@ const GeneralSettingsSection = ({ className }: GeneralSettingsSectionProps) => {
             controlledValue={fiatCurrencyOptions.find((l) => l.value === fiatCurrency)}
             noMargin
             title={t('Currency')}
-            $heightSize="small"
+            heightSize="small"
           />
         }
       />
diff --git a/apps/desktop-wallet/src/modals/SettingsModal/NetworkSettingsSection.tsx b/apps/desktop-wallet/src/modals/SettingsModal/NetworkSettingsSection.tsx
index 4b73057f2..7e43377f8 100644
--- a/apps/desktop-wallet/src/modals/SettingsModal/NetworkSettingsSection.tsx
+++ b/apps/desktop-wallet/src/modals/SettingsModal/NetworkSettingsSection.tsx
@@ -217,7 +217,7 @@ const NetworkSettingsSection = () => {
           />
           <h2 tabIndex={0} role="label">
             {t('Custom proxy (SOCKS5)')}
-            <ExperimentalBadge color={theme.global.accent} $compact>
+            <ExperimentalBadge color={theme.global.accent} compact>
               {t('Experimental')}
             </ExperimentalBadge>
           </h2>
diff --git a/apps/desktop-wallet/src/modals/SettingsModal/WalletsSettingsSection.tsx b/apps/desktop-wallet/src/modals/SettingsModal/WalletsSettingsSection.tsx
index b92daddba..9ffd0443d 100644
--- a/apps/desktop-wallet/src/modals/SettingsModal/WalletsSettingsSection.tsx
+++ b/apps/desktop-wallet/src/modals/SettingsModal/WalletsSettingsSection.tsx
@@ -69,7 +69,7 @@ const WalletsSettingsSection = () => {
 
   return (
     <>
-      <Section $align="flex-start" role="table">
+      <Section align="flex-start" role="table">
         <h2 tabIndex={0} role="label">
           {t('Wallet list')} ({wallets.length})
         </h2>
@@ -85,7 +85,7 @@ const WalletsSettingsSection = () => {
         </BoxContainerStyled>
       </Section>
       {isAuthenticated && (
-        <CurrentWalletSection $align="flex-start">
+        <CurrentWalletSection align="flex-start">
           <h2>{t('Current wallet')}</h2>
           <InfoBox label={t('Wallet name')} short>
             <CurrentWalletBox>
@@ -95,7 +95,7 @@ const WalletsSettingsSection = () => {
                 tabIndex={0}
                 squared
                 role="secondary"
-                $transparent
+                transparent
                 borderless
                 onClick={() => setIsEditWalletNameModalOpen(true)}
               >
@@ -161,7 +161,7 @@ const WalletItem = ({ wallet, isCurrent, onWalletDelete }: WalletItemProps) => {
         tabIndex={0}
         squared
         role="secondary"
-        $transparent
+        transparent
         borderless
         onClick={() => onWalletDelete(wallet)}
         onBlur={() => setIsShowingDeleteButton(false)}
diff --git a/apps/desktop-wallet/src/modals/SettingsModal/index.tsx b/apps/desktop-wallet/src/modals/SettingsModal/index.tsx
index a29e01208..1168aa6f9 100644
--- a/apps/desktop-wallet/src/modals/SettingsModal/index.tsx
+++ b/apps/desktop-wallet/src/modals/SettingsModal/index.tsx
@@ -103,7 +103,7 @@ const SettingsModal = ({ onClose, initialTabValue }: SettingsModalProps) => {
                   key={tab.value}
                   role="secondary"
                   wide
-                  $transparent={currentTab.value !== tab.value}
+                  transparent={currentTab.value !== tab.value}
                   borderless={currentTab.value !== tab.value}
                   onClick={() => setCurrentTab(tab)}
                 >
@@ -124,7 +124,7 @@ const SettingsModal = ({ onClose, initialTabValue }: SettingsModalProps) => {
         <TabContentsColumn>
           <ColumnHeader>
             <ColumnTitle>{currentTab.label}</ColumnTitle>
-            <Button aria-label={t('Close')} squared role="secondary" $transparent onClick={onClose} borderless>
+            <Button aria-label={t('Close')} squared role="secondary" transparent onClick={onClose} borderless>
               <X />
             </Button>
           </ColumnHeader>
diff --git a/apps/desktop-wallet/src/modals/SideModal.tsx b/apps/desktop-wallet/src/modals/SideModal.tsx
index 3d875581d..dbcf4796c 100644
--- a/apps/desktop-wallet/src/modals/SideModal.tsx
+++ b/apps/desktop-wallet/src/modals/SideModal.tsx
@@ -61,7 +61,7 @@ const SideModal = ({
         {!hideHeader && (
           <ModalHeader>
             <HeaderColumn>{header ?? <Title>{title}</Title>}</HeaderColumn>
-            <CloseButton aria-label={t('Close')} squared role="secondary" $transparent onClick={onClose} Icon={X} />
+            <CloseButton aria-label={t('Close')} squared role="secondary" transparent onClick={onClose} Icon={X} />
           </ModalHeader>
         )}
         <Scrollbar>
diff --git a/apps/desktop-wallet/src/modals/TransactionDetailsModal.tsx b/apps/desktop-wallet/src/modals/TransactionDetailsModal.tsx
index 931f78a33..2b6e0e946 100644
--- a/apps/desktop-wallet/src/modals/TransactionDetailsModal.tsx
+++ b/apps/desktop-wallet/src/modals/TransactionDetailsModal.tsx
@@ -87,7 +87,7 @@ const TransactionDetailsModal = ({ transaction, onClose }: TransactionDetailsMod
                 value={amount}
                 decimals={decimals}
                 suffix={symbol}
-                $highlight={!isMoved}
+                highlight={!isMoved}
                 showPlusMinus={!isMoved}
               />
             </AmountContainer>
@@ -118,7 +118,7 @@ const TransactionDetailsModal = ({ transaction, onClose }: TransactionDetailsMod
           )}
           {direction === 'swap' && (
             <>
-              <AddressBadgeStyled addressHash={transaction.address.hash} $truncate $withBorders />
+              <AddressBadgeStyled addressHash={transaction.address.hash} truncate withBorders />
               <FromIn>{t('and')}</FromIn>
               <SwapPartnerAddress>
                 <IOList
@@ -152,7 +152,7 @@ const TransactionDetailsModal = ({ transaction, onClose }: TransactionDetailsMod
                     onClick={() => handleShowAddress(transaction.address.hash)}
                     key={transaction.address.hash}
                   >
-                    <AddressBadge addressHash={transaction.address.hash} $truncate $withBorders />
+                    <AddressBadge addressHash={transaction.address.hash} truncate withBorders />
                   </ActionLinkStyled>
                 </AddressList>
               ) : (
@@ -173,7 +173,7 @@ const TransactionDetailsModal = ({ transaction, onClose }: TransactionDetailsMod
                     onClick={() => handleShowAddress(transaction.address.hash)}
                     key={transaction.address.hash}
                   >
-                    <AddressBadge addressHash={transaction.address.hash} $withBorders />
+                    <AddressBadge addressHash={transaction.address.hash} withBorders />
                   </ActionLinkStyled>
                 </AddressList>
               ) : (
@@ -216,7 +216,7 @@ const TransactionDetailsModal = ({ transaction, onClose }: TransactionDetailsMod
                   decimals={decimals}
                   suffix={symbol}
                   isUnknownToken={!symbol}
-                  $highlight={!isMoved}
+                  highlight={!isMoved}
                   showPlusMinus={!isMoved}
                 />
                 {!symbol && <TokenHash hash={id} />}
@@ -238,7 +238,7 @@ const TransactionDetailsModal = ({ transaction, onClose }: TransactionDetailsMod
             <Amounts>
               {unknownTokens.map(({ id, amount, symbol }) => (
                 <AmountContainer key={id}>
-                  <Amount tabIndex={0} value={amount} isUnknownToken={!symbol} $highlight />
+                  <Amount tabIndex={0} value={amount} isUnknownToken={!symbol} highlight />
                   {!symbol && <TokenHash hash={id} />}
                 </AmountContainer>
               ))}
diff --git a/apps/desktop-wallet/src/modals/WalletConnectModal.tsx b/apps/desktop-wallet/src/modals/WalletConnectModal.tsx
index bfd395447..6e6bad836 100644
--- a/apps/desktop-wallet/src/modals/WalletConnectModal.tsx
+++ b/apps/desktop-wallet/src/modals/WalletConnectModal.tsx
@@ -81,7 +81,7 @@ const WalletConnectModal = (props: CenteredModalProps) => {
             onChange={(t) => setUri(t.target.value)}
             value={uri}
             label={t('Paste WalletConnect URI copied from the dApp')}
-            $heightSize="big"
+            heightSize="big"
           />
           <ConnectButton onClick={handleConnect} disabled={uri === ''}>
             {t('Connect')}
diff --git a/apps/desktop-wallet/src/pages/UnlockedWallet/AddressesPage/AddressGridRow.tsx b/apps/desktop-wallet/src/pages/UnlockedWallet/AddressesPage/AddressGridRow.tsx
index b78c27985..9f8b7bdb8 100644
--- a/apps/desktop-wallet/src/pages/UnlockedWallet/AddressesPage/AddressGridRow.tsx
+++ b/apps/desktop-wallet/src/pages/UnlockedWallet/AddressesPage/AddressGridRow.tsx
@@ -95,7 +95,7 @@ const AddressGridRow = ({ addressHash, className }: AddressGridRowProps) => {
           <AddressColorIndicator addressHash={address.hash} size={16} />
           <Column>
             <Label>
-              <AddressBadge addressHash={address.hash} hideColorIndication $truncate showFull disableA11y />
+              <AddressBadge addressHash={address.hash} hideColorIndication truncate showFull disableA11y />
             </Label>
             {stateUninitialized ? (
               <SkeletonLoader height="15.5px" />
diff --git a/apps/desktop-wallet/src/pages/UnlockedWallet/AddressesPage/ContactsTabContent.tsx b/apps/desktop-wallet/src/pages/UnlockedWallet/AddressesPage/ContactsTabContent.tsx
index 36077976d..d542474b4 100644
--- a/apps/desktop-wallet/src/pages/UnlockedWallet/AddressesPage/ContactsTabContent.tsx
+++ b/apps/desktop-wallet/src/pages/UnlockedWallet/AddressesPage/ContactsTabContent.tsx
@@ -96,12 +96,12 @@ const ContactsTabContent = () => {
                 <HashEllipsedStyled hash={contact.address} />
               </ContentRow>
               <ButtonsRow>
-                <SendButton $transparent borderless onClick={() => openSendModal(contact)}>
+                <SendButton transparent borderless onClick={() => openSendModal(contact)}>
                   <ArrowUp strokeWidth={1} />
                   <ButtonText>{t('Send')}</ButtonText>
                 </SendButton>
                 <Separator />
-                <EditButton $transparent borderless onClick={() => openEditContactModal(contact)}>
+                <EditButton transparent borderless onClick={() => openEditContactModal(contact)}>
                   <Pencil strokeWidth={1} />
                   <ButtonText>{t('Edit')}</ButtonText>
                 </EditButton>
diff --git a/apps/desktop-wallet/src/pages/UnlockedWallet/AddressesPage/TabContent.tsx b/apps/desktop-wallet/src/pages/UnlockedWallet/AddressesPage/TabContent.tsx
index 4dd26f2c9..b5db94639 100644
--- a/apps/desktop-wallet/src/pages/UnlockedWallet/AddressesPage/TabContent.tsx
+++ b/apps/desktop-wallet/src/pages/UnlockedWallet/AddressesPage/TabContent.tsx
@@ -50,7 +50,7 @@ const TabContent: FC<TabContentProps> = ({
         Icon={SearchIcon}
         onChange={(e) => onSearch(e.target.value)}
         contrast
-        $heightSize="small"
+        heightSize="small"
       />
       {HeaderMiddleComponent}
       <ButtonContainer {...fadeInOut}>
diff --git a/apps/desktop-wallet/src/pages/UnlockedWallet/OverviewPage/AmountsOverviewPanel.tsx b/apps/desktop-wallet/src/pages/UnlockedWallet/OverviewPage/AmountsOverviewPanel.tsx
index 0b044c214..6af0eeb17 100644
--- a/apps/desktop-wallet/src/pages/UnlockedWallet/OverviewPage/AmountsOverviewPanel.tsx
+++ b/apps/desktop-wallet/src/pages/UnlockedWallet/OverviewPage/AmountsOverviewPanel.tsx
@@ -101,7 +101,7 @@ const AmountsOverviewPanel: FC<AmountsOverviewPanelProps> = ({ className, addres
               ) : (
                 <FiatTotalAmount tabIndex={0} value={balanceInFiat} isFiat suffix={currencies[fiatCurrency].symbol} />
               )}
-              <Opacity $fadeOut={isHoveringChart}>
+              <Opacity fadeOut={isHoveringChart}>
                 <FiatDeltaPercentage>
                   {isPriceLoading ||
                   stateUninitialized ||
@@ -126,9 +126,9 @@ const AmountsOverviewPanel: FC<AmountsOverviewPanelProps> = ({ className, addres
                     hasHistoricBalances && (
                       <ButtonStyled
                         key={length}
-                        $transparent
+                        transparent
                         short
-                        $isActive={length === chartLength}
+                        isActive={length === chartLength}
                         onClick={() => setChartLength(length)}
                       >
                         {length}
@@ -141,7 +141,7 @@ const AmountsOverviewPanel: FC<AmountsOverviewPanelProps> = ({ className, addres
             {!singleAddress && (
               <>
                 <Divider />
-                <AvailableLockedBalancesColumn $fadeOut={isHoveringChart}>
+                <AvailableLockedBalancesColumn fadeOut={isHoveringChart}>
                   <AvailableBalanceRow>
                     <BalanceLabel tabIndex={0} role="representation">
                       {t('Available')}
@@ -167,7 +167,7 @@ const AmountsOverviewPanel: FC<AmountsOverviewPanelProps> = ({ className, addres
             )}
           </BalancesRow>
         </Balances>
-        {children && <RightColumnContent $fadeOut={isHoveringChart}>{children}</RightColumnContent>}
+        {children && <RightColumnContent fadeOut={isHoveringChart}>{children}</RightColumnContent>}
       </Panel>
 
       <ChartOuterContainer
@@ -218,9 +218,9 @@ const BalancesRow = styled.div`
   padding: 0 6%;
 `
 
-const Opacity = styled.div<{ $fadeOut?: boolean }>`
+const Opacity = styled.div<{ fadeOut?: boolean }>`
   transition: opacity 0.2s ease-out;
-  opacity: ${({ $fadeOut }) => ($fadeOut ? 0.23 : 1)};
+  opacity: ${({ fadeOut }) => (fadeOut ? 0.23 : 1)};
 `
 
 const RightColumnContent = styled(Opacity)`
@@ -289,9 +289,9 @@ const ChartLengthBadges = styled.div`
   gap: 10px;
 `
 
-const ButtonStyled = styled(Button)<{ $isActive: boolean }>`
+const ButtonStyled = styled(Button)<{ isActive: boolean }>`
   color: ${({ theme }) => theme.font.primary};
-  opacity: ${({ $isActive }) => ($isActive ? 1 : 0.4)};
+  opacity: ${({ isActive }) => (isActive ? 1 : 0.4)};
   border-color: ${({ theme }) => theme.font.primary};
   padding: 3px;
   height: auto;
diff --git a/apps/desktop-wallet/src/pages/UnlockedWallet/OverviewPage/index.tsx b/apps/desktop-wallet/src/pages/UnlockedWallet/OverviewPage/index.tsx
index c63818c79..1c808e256 100644
--- a/apps/desktop-wallet/src/pages/UnlockedWallet/OverviewPage/index.tsx
+++ b/apps/desktop-wallet/src/pages/UnlockedWallet/OverviewPage/index.tsx
@@ -57,7 +57,7 @@ const OverviewPage = ({ className }: OverviewPageProps) => {
           </ButtonsGrid>
         </Shortcuts>
       </AmountsOverviewPanel>
-      <UnlockedWalletPanel $bottom $top>
+      <UnlockedWalletPanel bottom top>
         <AssetAndAddressesRow>
           <AssetsListStyled maxHeightInPx={maxPanelHeightInPx} />
           <AddressesContactsListStyled maxHeightInPx={maxPanelHeightInPx} />
diff --git a/apps/desktop-wallet/src/pages/UnlockedWallet/TransfersPage/index.tsx b/apps/desktop-wallet/src/pages/UnlockedWallet/TransfersPage/index.tsx
index df906e8a3..126b8abe1 100644
--- a/apps/desktop-wallet/src/pages/UnlockedWallet/TransfersPage/index.tsx
+++ b/apps/desktop-wallet/src/pages/UnlockedWallet/TransfersPage/index.tsx
@@ -85,7 +85,7 @@ const TransfersPage = ({ className }: TransfersPageProps) => {
         selectedAssets={selectedAssets}
         setSelectedAssets={setSelectedAssets}
       />
-      <StyledUnlockedWalletPanel $doubleTop $bottom $backgroundColor="background1">
+      <StyledUnlockedWalletPanel doubleTop bottom backgroundColor="background1">
         <TransactionList
           addressHashes={map(selectedAddresses, 'hash')}
           directions={map(selectedDirections, 'value')}
@@ -99,7 +99,7 @@ const TransfersPage = ({ className }: TransfersPageProps) => {
       >
         <CornerButtons>
           <ButtonsGrid>
-            <ShortcutButtons receive send isHighlighted analyticsOrigin="transfer_page" />
+            <ShortcutButtons receive send highlight analyticsOrigin="transfer_page" />
           </ButtonsGrid>
         </CornerButtons>
       </BottomRow>
diff --git a/apps/desktop-wallet/src/pages/UnlockedWallet/UnlockedWalletLayout.tsx b/apps/desktop-wallet/src/pages/UnlockedWallet/UnlockedWalletLayout.tsx
index fbc63d8fb..cd8dd349e 100644
--- a/apps/desktop-wallet/src/pages/UnlockedWallet/UnlockedWalletLayout.tsx
+++ b/apps/desktop-wallet/src/pages/UnlockedWallet/UnlockedWalletLayout.tsx
@@ -158,7 +158,7 @@ const UnlockedWalletLayout = ({ children, title, className }: UnlockedWalletLayo
             {networkStatus === 'online' && (
               <RefreshButton
                 role="secondary"
-                $transparent
+                transparent
                 squared
                 short
                 onClick={refreshAddressesData}
@@ -181,28 +181,28 @@ const UnlockedWalletLayout = ({ children, title, className }: UnlockedWalletLayo
 }
 
 export const UnlockedWalletPanel = styled.div<{
-  $top?: boolean
-  $bottom?: boolean
-  $doubleTop?: boolean
-  $backgroundColor?: keyof Pick<DefaultTheme['bg'], 'background1' | 'background2'>
+  top?: boolean
+  bottom?: boolean
+  doubleTop?: boolean
+  backgroundColor?: keyof Pick<DefaultTheme['bg'], 'background1' | 'background2'>
 }>`
   padding-left: 60px;
   padding-right: 60px;
 
-  ${({ $top, $doubleTop }) => css`
-    padding-top: ${$top ? 20 : $doubleTop ? 40 : 0}px;
+  ${({ top, doubleTop }) => css`
+    padding-top: ${top ? 20 : doubleTop ? 40 : 0}px;
   `}
 
-  ${({ $bottom }) =>
-    $bottom &&
+  ${({ bottom }) =>
+    bottom &&
     css`
       padding-bottom: 60px;
     `}
 
-  ${({ $backgroundColor }) =>
-    $backgroundColor &&
+  ${({ backgroundColor }) =>
+    backgroundColor &&
     css`
-      background-color: ${({ theme }) => theme.bg[$backgroundColor]};
+      background-color: ${({ theme }) => theme.bg[backgroundColor]};
     `}
 `
 

From f335f9981e01d1db0b260d0bb6dfd6b1084912e9 Mon Sep 17 00:00:00 2001
From: Ilias Trichopoulos <hlias.nop@gmail.com>
Date: Mon, 29 Jan 2024 13:15:21 +0800
Subject: [PATCH 2/3] Disable all styled-component warnings

Related to #320
---
 apps/desktop-wallet/src/index.tsx | 25 +++++++++++++++++++++----
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/apps/desktop-wallet/src/index.tsx b/apps/desktop-wallet/src/index.tsx
index 29ab33bfe..c0338fcc1 100644
--- a/apps/desktop-wallet/src/index.tsx
+++ b/apps/desktop-wallet/src/index.tsx
@@ -20,10 +20,12 @@ import '@/index.css' // Importing CSS through CSS file to avoid font flickering
 import '@/i18n'
 import '@yaireo/tagify/dist/tagify.css' // Tagify CSS: important to import after index.css file
 
+import isPropValid from '@emotion/is-prop-valid'
 import { StrictMode, Suspense } from 'react'
 import ReactDOM from 'react-dom'
 import { Provider } from 'react-redux'
 import { HashRouter as Router } from 'react-router-dom'
+import { StyleSheetManager } from 'styled-components'
 
 import App from '@/App'
 import Tooltips from '@/components/Tooltips'
@@ -43,10 +45,12 @@ ReactDOM.render(
       <Router>
         <Suspense fallback="loading">
           <AnalyticsProvider>
-            <GlobalContextProvider>
-              <App />
-              <Tooltips />
-            </GlobalContextProvider>
+            <StyleSheetManager shouldForwardProp={shouldForwardProp}>
+              <GlobalContextProvider>
+                <App />
+                <Tooltips />
+              </GlobalContextProvider>
+            </StyleSheetManager>
           </AnalyticsProvider>
         </Suspense>
       </Router>
@@ -60,3 +64,16 @@ ReactDOM.render(
 // unregister() to register() below. Note this comes with some pitfalls.
 // Learn more about service workers: https://bit.ly/CRA-PWA
 serviceWorker.unregister()
+
+// TODO: Remove when migrating to transient props
+// See: https://styled-components.com/docs/faqs#shouldforwardprop-is-no-longer-provided-by-default
+// This implements the default behavior from styled-components v5
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function shouldForwardProp(propName: any, target: any) {
+  if (typeof target === 'string') {
+    // For HTML elements, forward the prop if it is a valid HTML attribute
+    return isPropValid(propName)
+  }
+  // For other elements, forward all props
+  return true
+}

From a671442f7c7c36bb7698d96a8c07ee4b4a48f171 Mon Sep 17 00:00:00 2001
From: Ilias Trichopoulos <hlias.nop@gmail.com>
Date: Mon, 29 Jan 2024 13:27:24 +0800
Subject: [PATCH 3/3] Bump desktop wallet version to 2.2.2

---
 .changeset/honest-books-kiss.md  | 5 -----
 apps/desktop-wallet/CHANGELOG.md | 6 ++++++
 apps/desktop-wallet/package.json | 2 +-
 3 files changed, 7 insertions(+), 6 deletions(-)
 delete mode 100644 .changeset/honest-books-kiss.md

diff --git a/.changeset/honest-books-kiss.md b/.changeset/honest-books-kiss.md
deleted file mode 100644
index 88a9b28bc..000000000
--- a/.changeset/honest-books-kiss.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'alephium-desktop-wallet': patch
----
-
-Fix address hash overlap introduced in 2.2.1
diff --git a/apps/desktop-wallet/CHANGELOG.md b/apps/desktop-wallet/CHANGELOG.md
index 98e4df424..8e9d61c32 100644
--- a/apps/desktop-wallet/CHANGELOG.md
+++ b/apps/desktop-wallet/CHANGELOG.md
@@ -1,5 +1,11 @@
 # alephium-desktop-wallet
 
+## 2.2.2
+
+### Patch Changes
+
+- e931d9f: Fix address hash overlap introduced in 2.2.1
+
 ## 2.2.1
 
 ### Patch Changes
diff --git a/apps/desktop-wallet/package.json b/apps/desktop-wallet/package.json
index 9d4b48602..6c18e5a7d 100644
--- a/apps/desktop-wallet/package.json
+++ b/apps/desktop-wallet/package.json
@@ -1,7 +1,7 @@
 {
   "name": "alephium-desktop-wallet",
   "description": "The official Alephium wallet",
-  "version": "2.2.1",
+  "version": "2.2.2",
   "author": "Alephium dev <dev@alephium.org>",
   "main": "public/electron.js",
   "homepage": "./",