Merge pull request #1293 from alephium/order-by-inde

Sort addresses by index & improve Ledger instructions page

apps/desktop-wallet/locales/en-US/translation.json

@@ -6,6 +6,7 @@
   "Address details": "Address details",
   "Address group": "Address group",
   "Address label": "Address label",
+  "Address index": "Address index",
   "Address NFTs": "Address NFTs",
   "Address options": "Address options",
   "Address tokens": "Address tokens",

apps/desktop-wallet/src/components/InfoBox.tsx

@@ -15,6 +15,7 @@ export interface InfoBoxProps {
   small?: boolean
   short?: boolean
   contrast?: boolean
+  align?: 'left' | 'center'
   className?: string
 }
 
@@ -29,7 +30,8 @@ const InfoBox: FC<InfoBoxProps> = ({
   onClick,
   short,
   children,
-  contrast
+  contrast,
+  align = 'center'
 }) => {
   const theme = useTheme()
 
@@ -42,7 +44,7 @@ const InfoBox: FC<InfoBoxProps> = ({
             <Icon color={getImportanceColor(theme, importance)} strokeWidth={1.5} />
           </IconContainer>
         )}
-        <TextContainer wordBreak={wordBreak} ellipsis={ellipsis}>
+        <TextContainer wordBreak={wordBreak} ellipsis={ellipsis} align={align}>
           {text || children}
         </TextContainer>
       </StyledBox>
@@ -53,7 +55,7 @@ const InfoBox: FC<InfoBoxProps> = ({
 const getImportanceColor = (theme: DefaultTheme, importance?: InfoBoxImportance) =>
   importance
     ? {
-        default: theme.bg.accent,
+        default: theme.global.accent,
         alert: theme.global.alert,
         warning: theme.global.highlight,
         accent: theme.global.accent
@@ -73,11 +75,11 @@ const IconContainer = styled.div`
   justify-content: center;
 `
 
-const TextContainer = styled.div<{ wordBreak?: boolean; ellipsis?: boolean }>`
+const TextContainer = styled.div<Pick<InfoBoxProps, 'wordBreak' | 'ellipsis' | 'align'>>`
   flex: 2;
   font-weight: var(--fontWeight-medium);
   word-break: ${({ wordBreak }) => (wordBreak ? 'break-all' : 'initial')};
-  text-align: center;
+  text-align: ${({ align }) => align};
 
   ${({ ellipsis }) =>
     ellipsis

apps/desktop-wallet/src/features/ledger/ConnectLedgerInstructionsPage.tsx

@@ -1,7 +1,9 @@
 import { getHumanReadableError } from '@alephium/shared'
+import { Power, Unplug } from 'lucide-react'
 import { useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import { useNavigate } from 'react-router-dom'
+import styled from 'styled-components'
 
 import ActionLink from '@/components/ActionLink'
 import Button from '@/components/Button'
@@ -44,32 +46,47 @@ const ConnectLedgerInstructionsPage = () => {
   return (
     <LockedWalletLayout>
       <FloatingPanel enforceMinHeight>
-        <PanelTitle onBackButtonClick={() => navigate('/')}>{t('Connect your Ledger')}</PanelTitle>
-        <ol>
-          <li>{t('Plug in and unlock your Ledger device.')}</li>
-          <li>
+        <PanelTitle centerText>{t('Connect your Ledger')}</PanelTitle>
+        <InfoBoxes>
+          <InfoBox align="left" Icon={Unplug}>
+            {t('Plug in and unlock your Ledger device.')}
+          </InfoBox>
+          <InfoBox align="left" Icon={Power}>
             <Trans t={t} i18nKey="ledgerInstructionsOpenApp">
               Open the Alephium Ledger app. The Alephium app can be installed via
               <ActionLink onClick={() => openInWebBrowser(links.ledgerLive)}>Ledger Live</ActionLink>.
             </Trans>
-          </li>
-        </ol>
-        {error && (
-          <>
-            <InfoBox importance="warning">
-              <div>{t('Is your device plugged in and the Alephium app open?')}</div>
-            </InfoBox>
-            <InfoBox importance="alert">
-              <div>{error}</div>
-            </InfoBox>
-          </>
-        )}
-        <FooterActionsContainer>
-          <Button onClick={handleContinuePress}>{t('Continue')}</Button>
-        </FooterActionsContainer>
+          </InfoBox>
+          {error && (
+            <>
+              <InfoBox importance="warning">
+                <div>{t('Is your device plugged in and the Alephium app open?')}</div>
+              </InfoBox>
+              <InfoBox importance="alert">
+                <div>{error}</div>
+              </InfoBox>
+            </>
+          )}
+        </InfoBoxes>
+        <FooterActionsContainerStyled>
+          <Button onClick={() => navigate('/')} tall role="secondary">
+            {t('Back')}
+          </Button>
+          <Button onClick={handleContinuePress} tall>
+            {t('Continue')}
+          </Button>
+        </FooterActionsContainerStyled>
       </FloatingPanel>
     </LockedWalletLayout>
   )
 }
 
 export default ConnectLedgerInstructionsPage
+
+const FooterActionsContainerStyled = styled(FooterActionsContainer)`
+  margin-top: auto;
+`
+
+const InfoBoxes = styled.div`
+  margin-top: var(--spacing-8);
+`

apps/desktop-wallet/src/features/settings/settingsConstants.ts

@@ -20,7 +20,8 @@ export const LockTimes = {
 export enum AddressOrder {
   LastUse = 'lastUse',
   AlphBalance = 'alphBalance',
-  Label = 'label'
+  Label = 'label',
+  Index = 'index'
 }
 
 export const locktimeInMinutes = Object.values(LockTimes)

apps/desktop-wallet/src/hooks/useAddresses.ts

@@ -16,6 +16,7 @@ import { TokenId } from '@/types/tokens'
 export const useFetchAddressesHashesSortedByPreference = () => {
   const orderPreference = useAppSelector((s) => s.settings.addressOrderPreference)
   const addressesSortedByLabel = useAddressesHashesSortedByLabel()
+  const addressesSortedByIndex = useAddressesHashesSortedByIndex()
   const { data: addressesSortedByLastUse, isLoading: isLoadingLastUse } = useFetchAddressesHashesSortedByLastUse()
   const { data: addressesSortedByAlphBalance, isLoading: isLoadingAlphBalance } =
     useFetchAddressesHashesSortedByAlphBalance({
@@ -33,6 +34,11 @@ export const useFetchAddressesHashesSortedByPreference = () => {
         data: addressesSortedByAlphBalance,
         isLoading: isLoadingAlphBalance
       }
+    case AddressOrder.Index:
+      return {
+        data: addressesSortedByIndex,
+        isLoading: false
+      }
     default:
       return {
         data: addressesSortedByLastUse,
@@ -153,3 +159,30 @@ export const useAddressesHashesSortedByLabel = (): AddressHash[] => {
     [allAddressHashes, addressEntities, defaultAddressHash]
   )
 }
+
+export const useAddressesHashesSortedByIndex = (): AddressHash[] => {
+  const allAddressHashes = useUnsortedAddressesHashes()
+  const defaultAddressHash = useAppSelector((s) => selectDefaultAddress(s).hash)
+  const addressEntities = useAppSelector((s) => s.addresses.entities)
+
+  return useMemo(
+    () =>
+      [...allAddressHashes].sort((a, b) => {
+        if (a === defaultAddressHash) return -1
+        if (b === defaultAddressHash) return 1
+
+        const indexA = addressEntities[a]?.index
+        const indexB = addressEntities[b]?.index
+
+        if (indexA && !indexB) return -1
+        if (!indexA && indexB) return 1
+
+        if (indexA && indexB) {
+          return indexA > indexB ? 1 : -1
+        }
+
+        return a.localeCompare(b)
+      }),
+    [allAddressHashes, addressEntities, defaultAddressHash]
+  )
+}

apps/desktop-wallet/src/pages/unlockedWallet/addressesPage/AddressSortingSelect.tsx

@@ -16,7 +16,8 @@ const AddressSortingSelect = () => {
   const orderOptions: SelectOption<AddressOrder>[] = [
     { value: AddressOrder.LastUse, label: t('Last used') },
     { value: AddressOrder.AlphBalance, label: t('ALPH balance') },
-    { value: AddressOrder.Label, label: t('Address label') }
+    { value: AddressOrder.Label, label: t('Address label') },
+    { value: AddressOrder.Index, label: t('Address index') }
   ]
 
   const onSelect = (value: AddressOrder) => {