Merge pull request #321 from alephium/hotfix

Hotfix
alephium · Jan 29, 2024 · 236dd70 · 236dd70
2 parents 4b7b093 + a671442
commit 236dd70
Show file tree

Hide file tree

Showing 55 changed files with 296 additions and 279 deletions.
diff --git 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
@@ -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": "./",

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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};