feat: add new hex address equivalence for mainnet profiles

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>

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>

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}>

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()
     }

packages/shared/components/boxes/HexAddressBox.svelte

@@ -0,0 +1,81 @@
+<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 = ''
+
+    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="border border-solid border-gray-300 hover:bg-blue-50 hover:border-gray-500 focus:bg-blue-100 focus:border-blue-400 active:bg-blue-100 active:border-blue-400 dark:border-gray-700 dark:hover:bg-gray-700 dark:hover:bg-opacity-20 dark:hover:border-opacity-50 dark:focus:bg-gray-700 dark:focus:bg-opacity-20 dark:focus:border-opacity-50 dark:active:bg-gray-700 dark:active:bg-opacity-20 dark:active:border-opacity-50"
+    >
+        <CopyableBox
+            bind:this={hexCopyableBoxElement}
+            col
+            {isCopyable}
+            value={hexAddress}
+            clearBoxPadding
+            clearBackground
+            {...$$restProps}
+        >
+            <div class="flex flex-row gap-1.5 items-center">
+                {#if hexAddress.length > 20}
+                    <div class="flex flex-col w-full">
+                        <Text type={TextType.pre} fontSize="12" fontWeight={FontWeight.light} secondary>
+                            {hexAddress.slice(0, hexAddress.length / 2)}
+                        </Text>
+                        <Text type={TextType.pre} fontSize="12" fontWeight={FontWeight.light} secondary>
+                            {hexAddress.slice(hexAddress.length / 2)}
+                        </Text>
+                    </div>
+                {:else}
+                    <Text type={TextType.pre} fontSize="12" fontWeight={FontWeight.light} secondary>
+                        {hexAddress}
+                    </Text>
+                {/if}
+                {#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}

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'

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;

packages/shared/lib/core/utils/constants/bech32-hrp.constant.ts

@@ -0,0 +1 @@
+export const BECH32_DEFAULT_HRP = 'iota'

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'

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.