From af464a354a098707c828769b98d2ae7f5f12d80c Mon Sep 17 00:00:00 2001
From: Matthew Maxwell <maxwellmattryan@gmail.com>
Date: Tue, 26 Jul 2022 14:16:18 -0500
Subject: [PATCH 1/4] enhancement: add tooltip to Shimmer asset tiles

---
 packages/shared/components/StakingAssetTile.svelte | 7 +++++++
 packages/shared/locales/en.json                    | 4 ++++
 2 files changed, 11 insertions(+)

diff --git a/packages/shared/components/StakingAssetTile.svelte b/packages/shared/components/StakingAssetTile.svelte
index 0ef7bf1a96a..c44cc87cbdd 100644
--- a/packages/shared/components/StakingAssetTile.svelte
+++ b/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
@@ -66,6 +67,7 @@
         }
     }
     $: showWarningState =
+        SHOW_SHIMMER_TOKEN_FORMATTING_WARNING ||
         isPartiallyStakedAndCanStake ||
         (isBelowMinimumRewards && !getAccount($stakedAccounts) && isParticipationPossible(stakingEventState)) ||
         (isBelowMinimumRewards && hasStakingEnded)
@@ -132,6 +134,11 @@
                     body: _getBody(),
                 }
             }
+        } else {
+            return {
+                title: localize('tooltips.shimmerTokenFormatting.title'),
+                body: [localize('tooltips.shimmerTokenFormatting.body')],
+            }
         }
     }
 </script>
diff --git a/packages/shared/locales/en.json b/packages/shared/locales/en.json
index a3cc7013152..d553d098fca 100644
--- a/packages/shared/locales/en.json
+++ b/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": {

From 24a107cabd73228a154556fcf2170a4abca884b0 Mon Sep 17 00:00:00 2001
From: Matthew Maxwell <maxwellmattryan@gmail.com>
Date: Wed, 27 Jul 2022 08:28:11 -0500
Subject: [PATCH 2/4] enhancement: add tooltip to staking airdrop dashboard
 tiles

---
 .../shared/components/StakingAssetTile.svelte |  8 ++--
 .../staking/views/StakingAirdrop.svelte       | 38 ++++++++++++++++++-
 2 files changed, 41 insertions(+), 5 deletions(-)

diff --git a/packages/shared/components/StakingAssetTile.svelte b/packages/shared/components/StakingAssetTile.svelte
index c44cc87cbdd..9829e9aeb65 100644
--- a/packages/shared/components/StakingAssetTile.svelte
+++ b/packages/shared/components/StakingAssetTile.svelte
@@ -66,8 +66,8 @@
                 $selectedAccountParticipationOverview?.[`${airdrop}Rewards`] <= 0
         }
     }
+
     $: showWarningState =
-        SHOW_SHIMMER_TOKEN_FORMATTING_WARNING ||
         isPartiallyStakedAndCanStake ||
         (isBelowMinimumRewards && !getAccount($stakedAccounts) && isParticipationPossible(stakingEventState)) ||
         (isBelowMinimumRewards && hasStakingEnded)
@@ -156,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}
diff --git a/packages/shared/routes/dashboard/staking/views/StakingAirdrop.svelte b/packages/shared/routes/dashboard/staking/views/StakingAirdrop.svelte
index c1158939c9d..8302d77ef92 100644
--- a/packages/shared/routes/dashboard/staking/views/StakingAirdrop.svelte
+++ b/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'
@@ -33,9 +33,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)
     }
@@ -201,13 +210,27 @@
                 <HR />
                 <div class="flex flex-row justify-between space-x-4">
                     <div class="flex flex-col">
-                        <div>
+                        <div class="flex flex-row justify-between 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"
@@ -224,6 +247,17 @@
     </div>
 </div>
 
+{#if showTooltip}
+    <Tooltip anchor={tooltipAnchor} position="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 {
         min-height: 310px;

From 369944fcd094a018e195ab927e1351c0da8884a8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bego=C3=B1a=20Alvarez?= <balvarez@boxfish.studio>
Date: Wed, 27 Jul 2022 16:42:29 +0200
Subject: [PATCH 3/4] fix: tooltip position for large reward numbers

---
 .../dashboard/staking/views/StakingAirdrop.svelte     | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/shared/routes/dashboard/staking/views/StakingAirdrop.svelte b/packages/shared/routes/dashboard/staking/views/StakingAirdrop.svelte
index 8302d77ef92..b69a40ae8e0 100644
--- a/packages/shared/routes/dashboard/staking/views/StakingAirdrop.svelte
+++ b/packages/shared/routes/dashboard/staking/views/StakingAirdrop.svelte
@@ -25,6 +25,9 @@
     let remainingTimeAmount: string
     let remainingTimeUnit: string
 
+    let rewardsWrapperWidth: number
+    let stakingAirdropWidth: number
+
     const video = {
         [StakingAirdrop.Assembly]: null,
         [StakingAirdrop.Shimmer]: null,
@@ -113,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
@@ -209,8 +213,8 @@
                 {/if}
                 <HR />
                 <div class="flex flex-row justify-between space-x-4">
-                    <div class="flex flex-col">
-                        <div class="flex flex-row justify-between items-center space-x-1">
+                    <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>
@@ -246,9 +250,8 @@
         </div>
     </div>
 </div>
-
 {#if showTooltip}
-    <Tooltip anchor={tooltipAnchor} position="right">
+    <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
         >

From bf54c65b6fc3292bd32bc923806efccda3d0cec1 Mon Sep 17 00:00:00 2001
From: Matthew Maxwell <44885822+maxwellmattryan@users.noreply.github.com>
Date: Wed, 27 Jul 2022 10:44:16 -0500
Subject: [PATCH 4/4] chore: improve wording

---
 packages/shared/locales/en.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/shared/locales/en.json b/packages/shared/locales/en.json
index d553d098fca..87625954e51 100644
--- a/packages/shared/locales/en.json
+++ b/packages/shared/locales/en.json
@@ -1421,8 +1421,8 @@
             "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."
+            "title": "SMR token denomination updated",
+            "body": "The SMR token denomination has changed. 1 SMR (previously) is now represented as 0.000001 SMR"
         }
     },
     "exports": {