feat: add new hex address equivalence for mainnet profiles (#8717)

evavirseda · begonaalvarezd · web-flow · commit 89c9e0d6da39 · 2025-06-04T18:13:16.000+02:00
* add new hex address equivalence for mainnet profiles

* update styles and add HexAddressBox component

* fix test

* add to address history

* add copy button

---------

Co-authored-by: Begoña Álvarez de la Cruz &lt;balvarez@boxfish.studio&gt;
diff --git a/packages/desktop/components/popups/AddressHistoryPopup.svelte b/packages/desktop/components/popups/AddressHistoryPopup.svelte
@@ -6,11 +6,18 @@
     import { fetchWithTimeout } from '@core/nfts'
     import { checkActiveProfileAuth, getActiveProfile, updateAccountPersistedDataOnActiveProfile } from '@core/profile'
     import { getProfileManager } from '@core/profile-manager/stores'
-    import { setClipboard, truncateString } from '@core/utils'
+    import {
+        setClipboard,
+        truncateString,
+        isValidBech32AddressAndPrefix,
+        BECH32_DEFAULT_HRP,
+        convertBech32ToHex,
+    } from '@core/utils'
     import { AccountAddress } from '@iota/sdk/out/types'
     import VirtualList from '@sveltejs/svelte-virtual-list'
-    import { Button, FontWeight, KeyValueBox, Spinner, Text, TextType } from 'shared/components'
+    import { Button, ButtonSize, FontWeight, KeyValueBox, Spinner, Text, TextType } from 'shared/components'
     import { onMount } from 'svelte'
+    import { HexAddressBox } from '@ui'
 
     interface AddressHistory {
         address: string
@@ -42,6 +49,13 @@
         setClipboard(addresses)
     }
 
+    function onCopyAllHexAdressesClick(): void {
+        const hexList = knownAddresses
+            .map((address) => convertBech32ToHex(address.address, BECH32_DEFAULT_HRP))
+            .join(',')
+        setClipboard(hexList)
+    }
+
     onMount(() => {
         knownAddresses = $selectedAccount?.knownAddresses
         if (!knownAddresses?.length) {
@@ -146,7 +160,7 @@
         {#if knownAddresses.length > 0}
             <div class="w-full flex-col space-y-2 virtual-list-wrapper">
                 <VirtualList items={knownAddresses} let:item>
-                    <div class="mb-1">
+                    <div class="flex flex-col space-y-1">
                         <KeyValueBox
                             isCopyable
                             classes="flex items-center w-full py-4"
@@ -161,6 +175,11 @@
                             backgroundColor="gray-50"
                             darkBackgroundColor="gray-900"
                         />
+
+                        {#if isValidBech32AddressAndPrefix(item.address, BECH32_DEFAULT_HRP)}
+                            <HexAddressBox address={item.address} isCopyable clearBackground clearBorder />
+                            <hr class="border-gray-300 dark:border-gray-700 py-2" />
+                        {/if}
                     </div>
                 </VirtualList>
             </div>
@@ -174,13 +193,18 @@
     {/if}
 </div>
 <div class="flex flex-row flex-nowrap w-full space-x-4 mt-6">
-    <div class="flex w-full justify-center pt-8 space-x-4">
-        <Button outline classes="w-1/2" onClick={onCopyClick}>{localize('actions.copy')}</Button>
+    <div class="flex flex-col w-full justify-center pt-3 space-y-2">
+        <div class="flex w-full justify-center space-x-4">
+            <Button outline classes="w-1/2" onClick={onCopyClick} size={ButtonSize.Small}>Copy Addresses</Button>
+            <Button outline classes="w-1/2" onClick={onCopyAllHexAdressesClick} size={ButtonSize.Small}
+                >Copy Hex Addresses</Button
+            >
+        </div>
         <Button
-            classes="w-1/2"
             onClick={handleSearchClick}
             disabled={isBusy}
             {isBusy}
+            size={ButtonSize.Medium}
             busyMessage={localize('actions.searching')}>{localize('actions.search')}</Button
         >
     </div>
@@ -199,4 +223,7 @@
     .virtual-list-wrapper :global(svelte-virtual-list-contents) {
         margin-right: -1rem !important;
     }
+    .virtual-list-wrapper :global(svelte-virtual-list-row:last-of-type hr) {
+        display: none !important;
+    }
 </style>
diff --git a/packages/desktop/components/popups/ReceiveAddressPopup.svelte b/packages/desktop/components/popups/ReceiveAddressPopup.svelte
@@ -1,17 +1,28 @@
 <script lang="ts">
-    import { QR, Text, FontWeight, AddressBox } from '@ui'
+    import { QR, Text, FontWeight, AddressBox, HexAddressBox } from '@ui'
     import { localize } from '@core/i18n'
     import { selectedAccount } from '@core/account'
+    import { isValidBech32AddressAndPrefix, BECH32_DEFAULT_HRP } from '@core/utils'
 
     export let title: string = localize('general.receiveFunds')
 
+    let hasHexAddressToShow = false
+
     $: receiveAddress = $selectedAccount.depositAddress
+    $: if (isValidBech32AddressAndPrefix(receiveAddress, BECH32_DEFAULT_HRP)) {
+        hasHexAddressToShow = true
+    }
 </script>
 
 <receive-details class="w-full h-full space-y-6 flex flex-auto flex-col shrink-0">
     <Text type="h3" fontWeight={FontWeight.semibold} classes="text-left">{title}</Text>
     <div class="flex w-full flex-col items-center space-y-6">
         <QR data={receiveAddress} />
         <AddressBox address={receiveAddress} clearBackground isCopyable />
+        {#if hasHexAddressToShow}
+            <div class="w-3/4">
+                <HexAddressBox address={receiveAddress} isCopyable />
+            </div>
+        {/if}
     </div>
 </receive-details>
diff --git a/packages/desktop/views/dashboard/wallet/Wallet.svelte b/packages/desktop/views/dashboard/wallet/Wallet.svelte
@@ -1,9 +1,16 @@
 <script lang="ts">
     import { AssetList, Overflow, Pane, ReceiveAddressButton } from '@ui'
     import { AccountSummary, AccountActivity, SendButton } from '@components'
+    import { isValidBech32AddressAndPrefix, BECH32_DEFAULT_HRP } from '@core/utils'
     import { selectedAccountAssets } from '@core/wallet'
     import { selectedAccount } from '@core/account/stores'
     import features from '@features/features'
+    import { HexAddressBox } from 'shared/components'
+
+    let hasHexAddressToShow = false
+    $: if (isValidBech32AddressAndPrefix($selectedAccount?.depositAddress, BECH32_DEFAULT_HRP)) {
+        hasHexAddressToShow = true
+    }
 </script>
 
 {#if $selectedAccount}
@@ -20,10 +27,15 @@
                         {/if}
                     </Pane>
                     <Pane>
-                        <div class="flex flex-col space-y-6">
+                        <div class={`flex flex-col ${hasHexAddressToShow ? 'space-y-2' : 'space-y-6'}`}>
                             {#if features?.wallet?.sendAndReceive?.enabled}
-                                <SendButton />
+                                {#if !hasHexAddressToShow}
+                                    <SendButton />
+                                {/if}
                                 <ReceiveAddressButton />
+                                {#if hasHexAddressToShow}
+                                    <HexAddressBox address={$selectedAccount?.depositAddress} isCopyable />
+                                {/if}
                             {/if}
                         </div>
                     </Pane>
@@ -42,3 +54,36 @@
         {/key}
     </wallet-container>
 {/if}
+
+<style lang="scss">
+    hex-address-box {
+        @apply border;
+        @apply border-solid;
+        @apply border-gray-300;
+        &:hover {
+            @apply bg-blue-50;
+            @apply border-gray-500;
+        }
+        &:active,
+        &:focus {
+            @apply bg-blue-100;
+            @apply border-blue-400;
+        }
+        &.darkmode {
+            @apply border-gray-700;
+            &:hover,
+            &:focus,
+            &:active {
+                @apply bg-gray-700;
+                @apply bg-opacity-20;
+                @apply border-opacity-50;
+            }
+            &:disabled {
+                @apply bg-gray-700;
+                @apply bg-opacity-10;
+                @apply border-gray-700;
+                @apply border-opacity-10;
+            }
+        }
+    }
+</style>
diff --git a/packages/shared/components/SubjectBox.svelte b/packages/shared/components/SubjectBox.svelte
@@ -1,9 +1,16 @@
 <script lang="ts">
     import { localize } from '@core/i18n'
     import { Subject, SubjectType } from '@core/wallet'
-    import { Box, AddressBox, Text, AccountLabel, TextType, FontWeight } from 'shared/components'
+    import { Box, AddressBox, Text, AccountLabel, TextType, FontWeight, HexAddressBox } from 'shared/components'
+    import { isValidBech32AddressAndPrefix, BECH32_DEFAULT_HRP } from '@core/utils'
 
     export let subject: Subject | null = null
+
+    let hasHexAddressToShow = false
+
+    $: if (isValidBech32AddressAndPrefix(subject?.address, BECH32_DEFAULT_HRP)) {
+        hasHexAddressToShow = true
+    }
 </script>
 
 {#if subject?.type === SubjectType.Account}
@@ -12,6 +19,11 @@
     </Box>
 {:else if subject?.type === SubjectType.Address}
     <AddressBox clearBackground clearPadding isCopyable address={subject?.address} />
+    {#if hasHexAddressToShow}
+        <div class="w-3/4">
+            <HexAddressBox address={subject?.address} isCopyable />
+        </div>
+    {/if}
 {:else}
     <Box row clearBackground clearPadding classes="justify-center">
         <Text type={TextType.pre} fontSize="base" fontWeight={FontWeight.medium}>
diff --git a/packages/shared/components/boxes/AddressBox.svelte b/packages/shared/components/boxes/AddressBox.svelte
@@ -1,12 +1,9 @@
 <script lang="ts">
     import { Text, CopyableBox, FontWeight, TextType } from 'shared/components'
-
     export let address: string = ''
     export let isCopyable: boolean = false
     export let fontSize: string = 'base'
-
     let copyableBoxElement: CopyableBox
-
     export function copyAddress(): void {
         copyableBoxElement.onClick()
     }
diff --git a/packages/shared/components/boxes/HexAddressBox.svelte b/packages/shared/components/boxes/HexAddressBox.svelte
@@ -0,0 +1,78 @@
+<script lang="ts">
+    import { Icon, Text, CopyableBox, FontWeight, TextType, Tooltip, Position, Box } from 'shared/components'
+    import { convertBech32ToHex, BECH32_DEFAULT_HRP } from '@core/utils'
+    import { Icon as IconEnum } from '@auxiliary/icon'
+
+    export let isCopyable = false
+    export let address: string = ''
+    export let hexAddress = ''
+    export let clearBorder = false
+
+    let hexCopyableBoxElement: CopyableBox
+    let infoAnchor: HTMLElement
+    let tooltipRef: Tooltip
+    let showInfoTooltip = false
+
+    export function copyHexAddress(): void {
+        hexCopyableBoxElement?.onClick()
+    }
+
+    function showTooltip(): Promise<void> {
+        showInfoTooltip = true
+        tooltipRef?.refreshPosition()
+    }
+    function hideTooltip(): void {
+        showInfoTooltip = false
+    }
+
+    $: hexAddress = convertBech32ToHex(address, BECH32_DEFAULT_HRP)
+</script>
+
+{#if hexAddress.length > 0}
+    <Box
+        clearBackground
+        classes={`${
+            clearBorder
+                ? ''
+                : 'border border-solid border-gray-300 hover:border-gray-500 focus:border-blue-400 active:border-blue-400 dark:border-gray-700 dark:hover:border-opacity-50 dark:active:border-opacity-50 dark:focus:border-opacity-50'
+        } hover:bg-blue-50 focus:bg-blue-100 active:bg-blue-100 dark:hover:bg-gray-700 dark:hover:bg-opacity-20 dark:focus:bg-gray-700 dark:focus:bg-opacity-20 dark:active:bg-gray-700 dark:active:bg-opacity-20`}
+    >
+        <CopyableBox
+            bind:this={hexCopyableBoxElement}
+            col
+            {isCopyable}
+            value={hexAddress}
+            clearBoxPadding
+            clearBackground
+            {...$$restProps}
+        >
+            <div class="flex flex-row gap-4 items-center w-full justify-between">
+                <div class="flex flex-col w-full break-all text-center">
+                    <Text type={TextType.p} fontSize="12" fontWeight={FontWeight.light} secondary>
+                        {hexAddress}
+                    </Text>
+                </div>
+
+                {#if hexAddress.length > 0}
+                    <span bind:this={infoAnchor} on:mouseenter={showTooltip} on:mouseleave={hideTooltip}>
+                        <Icon icon={IconEnum.Info} classes="text-gray-500 w-4 h-4" />
+                    </span>
+                {/if}
+
+                {#if showInfoTooltip}
+                    <Tooltip
+                        bind:this={tooltipRef}
+                        anchor={infoAnchor}
+                        position={Position.Right}
+                        offset={6}
+                        size="small"
+                    >
+                        <Text color="gray-600" darkColor="gray-400" classes="text-left" smaller>
+                            Equivalent hex address in the new IOTA Wallet extension
+                        </Text>
+                    </Tooltip>
+                {/if}
+            </div>
+        </CopyableBox>
+    </Box>
+{/if}
diff --git a/packages/shared/components/boxes/index.js b/packages/shared/components/boxes/index.js
@@ -2,3 +2,4 @@ export { default as Box } from './Box.svelte'
 export { default as KeyValueBox } from './KeyValueBox.svelte'
 export { default as AddressBox } from './AddressBox.svelte'
 export { default as CopyableBox } from './CopyableBox.svelte'
+export { default as HexAddressBox } from './HexAddressBox.svelte'
diff --git a/packages/shared/components/buttons/ReceiveAddressButton.svelte b/packages/shared/components/buttons/ReceiveAddressButton.svelte
@@ -3,12 +3,9 @@
     import { appSettings } from '@core/app'
     import { localize } from '@core/i18n'
     import { QR, Text, FontWeight, AddressBox } from 'shared/components'
-
     let addressBoxElement: AddressBox
-
     $: receiveAddress = $selectedAccount.depositAddress
     $: darkModeEnabled = $appSettings.darkMode
-
     function onReceiveClick(): void {
         addressBoxElement.copyAddress()
     }
@@ -39,7 +36,6 @@
         @apply border;
         @apply border-solid;
         @apply border-gray-300;
-
         &:hover {
             @apply bg-blue-50;
             @apply border-gray-500;
diff --git a/packages/shared/lib/core/utils/constants/bech32-hrp.constant.ts b/packages/shared/lib/core/utils/constants/bech32-hrp.constant.ts
@@ -0,0 +1 @@
+export const BECH32_DEFAULT_HRP = 'iota'
diff --git a/packages/shared/lib/core/utils/constants/index.ts b/packages/shared/lib/core/utils/constants/index.ts
@@ -7,3 +7,4 @@ export * from './max-bytes.constant'
 export * from './max-number-of-iotas.constant'
 export * from './pin-length.constant'
 export * from './time.constants'
+export * from './bech32-hrp.constant'
diff --git a/packages/shared/lib/core/utils/convert.ts b/packages/shared/lib/core/utils/convert.ts
@@ -4,6 +4,15 @@ import { HEXADECIMAL_PREFIX, MILLISECONDS_PER_SECOND } from './constants'
 import { isValidDate } from './date'
 import { Base64 } from './encode'
 import { clamp } from './math'
+import { Bech32Helper } from './crypto'
+
+/**
+ * Converts a Bech32 address to a hexadecimal string.
+ */
+export function convertBech32ToHex(bech32Address: string, hrp: string): string {
+    const { addressBytes } = Bech32Helper.fromBech32(bech32Address, hrp)
+    return convertBytesToHexString(Array.from(addressBytes), true)
+}
 
 /**
  * Returns a UNIX timestamp from a given Date object.

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+export const BECH32_DEFAULT_HRP = 'iota'`