enhancement: add tooltip for glow units

packages/shared/components/StakingAssetTile.svelte

@@ -48,6 +48,7 @@
     let remainingTime: number
 
     const FIAT_PLACEHOLDER = '---'
+    const SHOW_SHIMMER_TOKEN_FORMATTING_WARNING = !isAssembly
 
     $: $activeProfile.stakingRewards
     $: isDarkModeEnabled = $appSettings.darkMode
@@ -65,6 +66,7 @@
                 $selectedAccountParticipationOverview?.[`${airdrop}Rewards`] <= 0
         }
     }
+
     $: showWarningState =
         isPartiallyStakedAndCanStake ||
         (isBelowMinimumRewards && !getAccount($stakedAccounts) && isParticipationPossible(stakingEventState)) ||
@@ -132,6 +134,11 @@
                     body: _getBody(),
                 }
             }
+        } else {
+            return {
+                title: localize('tooltips.shimmerTokenFormatting.title'),
+                body: [localize('tooltips.shimmerTokenFormatting.body')],
+            }
         }
     }
 </script>
@@ -149,13 +156,15 @@
         <div class="flex flex-col flex-wrap space-y-1 text-left">
             <div class="flex flex-row items-center space-x-1">
                 <Text classes="font-semibold">{asset?.name}</Text>
-                {#if showWarningState && tooltipText?.body.length > 0}
+                {#if (showWarningState || SHOW_SHIMMER_TOKEN_FORMATTING_WARNING) && tooltipText?.body.length > 0}
                     <div bind:this={tooltipAnchor} on:mouseenter={toggleTooltip} on:mouseleave={toggleTooltip}>
                         <Icon
                             icon="exclamation"
                             width="17"
                             height="17"
-                            classes="fill-current text-yellow-600 group-hover:text-gray-900"
+                            classes="fill-current text-{showWarningState
+                                ? 'yellow-600'
+                                : 'gray-500'} group-hover:text-gray-900"
                         />
                     </div>
                 {/if}

packages/shared/locales/en.json

@@ -1419,6 +1419,10 @@
             "bodyWillNotReachMin": "You will not reach the minimum reward value during the remaining staking period unless you add more IOTA.",
             "bodyDidNotReachMin": "You did not stake enough IOTA to reach the minimum reward value for {airdrop} ({airdropRewardMin}).",
             "bodyMinBalanceAirdrop": "This wallet does not have enough IOTA tokens to reach the minimum airdrop reward for {airdrop}."
+        },
+        "shimmerTokenFormatting": {
+            "title": "SMR unit formatting updated",
+            "body": "The SMR unit formatting has been updated. 1 SMR now has 6 decimal places rather than 0."
         }
     },
     "exports": {

packages/shared/routes/dashboard/staking/views/StakingAirdrop.svelte

@@ -1,5 +1,5 @@
 <script lang="typescript">
-    import { HR, Link, StakingAirdropIndicator, Text } from 'shared/components'
+    import { HR, Icon, Link, StakingAirdropIndicator, Text, Tooltip } from 'shared/components'
     import { localize } from '@core/i18n'
     import { showAppNotification } from 'shared/lib/notifications'
     import { formatStakingAirdropReward, isParticipationPossible } from 'shared/lib/participation'
@@ -25,6 +25,9 @@
     let remainingTimeAmount: string
     let remainingTimeUnit: string
 
+    let rewardsWrapperWidth: number
+    let stakingAirdropWidth: number
+
     const video = {
         [StakingAirdrop.Assembly]: null,
         [StakingAirdrop.Shimmer]: null,
@@ -33,9 +36,18 @@
     $: $assemblyStakingRemainingTime, $shimmerStakingRemainingTime, parseRemainingTime()
 
     const isAssembly = airdrop === StakingAirdrop.Assembly
+
+    const SHOW_SHIMMER_TOKEN_FORMATTING_WARNING = !isAssembly
+    let showTooltip = false
+    let tooltipAnchor: HTMLElement
+
     let stakingEventState = ParticipationEventState.Inactive
     $: stakingEventState = isAssembly ? $assemblyStakingEventState : $shimmerStakingEventState
 
+    function toggleTooltip(): void {
+        showTooltip = !showTooltip
+    }
+
     function getFormattedStakingAirdropRewards(forCurrentRewards: boolean, stakingRewards: number): string {
         return formatStakingAirdropReward(airdrop, stakingRewards, 6)
     }
@@ -104,6 +116,7 @@
     class="relative z-0 flex w-full h-full bg-{airdrop}-bg"
     on:mouseenter={video[airdrop]?.play()}
     on:mouseleave={video[airdrop]?.pause()}
+    bind:clientWidth={stakingAirdropWidth}
 >
     <!-- svelte-ignore a11y-media-has-caption -->
     <video
@@ -200,14 +213,28 @@
                 {/if}
                 <HR />
                 <div class="flex flex-row justify-between space-x-4">
-                    <div class="flex flex-col">
-                        <div>
+                    <div class="flex flex-col" bind:clientWidth={rewardsWrapperWidth}>
+                        <div class="flex flex-row items-center space-x-1">
                             <Text type="p" classes="font-bold text-lg inline text-white dark:text-gray-400 break-all">
                                 {totalStakingRewards.split(' ')[0]}
                             </Text>
                             <Text type="p" secondary classes="text-sm inline">
                                 {totalStakingRewards.split(' ')[1]}
                             </Text>
+                            {#if SHOW_SHIMMER_TOKEN_FORMATTING_WARNING}
+                                <div
+                                    bind:this={tooltipAnchor}
+                                    on:mouseenter={toggleTooltip}
+                                    on:mouseleave={toggleTooltip}
+                                >
+                                    <Icon
+                                        icon="exclamation"
+                                        width="17"
+                                        height="17"
+                                        classes="fill-current text-gray-500 group-hover:text-gray-900"
+                                    />
+                                </div>
+                            {/if}
                         </div>
                         <Text
                             type="p"
@@ -223,6 +250,16 @@
         </div>
     </div>
 </div>
+{#if showTooltip}
+    <Tooltip anchor={tooltipAnchor} position={rewardsWrapperWidth > 0.5 * stakingAirdropWidth ? 'left' : 'right'}>
+        <Text type="p" classes="text-gray-900 bold mb-2 text-left"
+            >{localize('tooltips.shimmerTokenFormatting.title')}</Text
+        >
+        <Text type="p" secondary classes="text-left">
+            {localize('tooltips.shimmerTokenFormatting.body')}
+        </Text>
+    </Tooltip>
+{/if}
 
 <style type="text/scss">
     .apply-min-height {