Merge branch 'develop-iota2.0' into feat/hide-locked-in-governance-in…

…-balance-breakdown

packages/desktop/components/popups/BalanceBreakdownPopup.svelte

@@ -162,7 +162,7 @@
                 subtitleKey={breakdownKey}
                 amount={breakdown[breakdownKey].amount}
                 subBreakdown={breakdown[breakdownKey].subBreakdown}
-                isBaseToken={breakdown[breakdownKey].isBaseToken}
+                isBaseToken={breakdownKey !== 'mana'}
             />
         {/each}
         <BalanceSummarySection titleKey="totalBalance" amount={Number(walletBalance?.baseCoin?.total ?? 0)} bold />

packages/desktop/components/popups/TokenInformationPopup.svelte

@@ -23,13 +23,16 @@
         AssetActionsModal,
         MeatballMenuButton,
         Modal,
+        BalanceSummarySection,
     } from '@ui'
     import { TextHintVariant } from '@ui/enums'
     import { MANA_ID } from '@core/network'
 
     export let asset: IAsset
     export let activityId: string = undefined
 
+    const balanceSummary = getBalanceSummary()
+
     let modal: Modal
 
     function onSkipClick(): void {
@@ -72,10 +75,20 @@
             overflow: true,
         })
     }
+
+    function getBalanceSummary(): { amount: number; details?: { [key: string]: { amount: number } } } {
+        const totalBalance = asset?.balance?.total
+
+        const details = {
+            availableAmount: { amount: asset?.balance?.available },
+            conditionallyLocked: { amount: asset?.balance?.total - asset?.balance?.available },
+        }
+        return { amount: totalBalance, details }
+    }
 </script>
 
 {#if asset}
-    <div class="space-y-6">
+    <div class="space-y-6 max-h-xl scrollable-y">
         <div class="flex flex-row justify-between items-center space-x-3 mr-8">
             <Text
                 type={TextType.h4}
@@ -127,9 +140,16 @@
                         isCopyable
                     />
                 {/if}
+                <balance-wrapper class="flex flex-col bg-gray-50 dark:bg-gray-850 px-4 py-4 rounded-lg">
+                    <BalanceSummarySection
+                        {asset}
+                        titleKey="totalBalanceAmount"
+                        amount={balanceSummary?.amount}
+                        subBreakdown={balanceSummary?.details}
+                    />
+                </balance-wrapper>
             </div>
         </div>
-
         <div class="flex flex-row flex-nowrap w-full space-x-4">
             {#if asset.verification?.status === NotVerifiedStatus.New}
                 <Button outline classes="w-full" onClick={onSkipClick}>

packages/desktop/components/popups/send/SendFormPopup.svelte

@@ -4,7 +4,6 @@
     import { selectedWallet } from '@core/wallet'
     import {
         isReservedTagKeyword,
-        InclusionState,
         selectedWalletActivities,
         newTransactionDetails,
         NewTransactionType,
@@ -15,6 +14,7 @@
     import SendNftForm from './SendNftForm.svelte'
     import { OptionalInputType, SendFormTab } from '@core/wallet/utils/send/sendUtils'
     import { FontWeight, Tabs, Text, TextType } from '@ui'
+    import { InclusionState } from '@iota/sdk/out/types'
 
     const tabs: SendFormTab[] = [SendFormTab.SendToken, SendFormTab.SendNft]
     const { type: transactionType, disableAssetSelection } = get(newTransactionDetails)

packages/shared/components/BalanceSummaryRow.svelte

@@ -6,33 +6,39 @@
     export let bold: boolean = false
     export let amount: string
     export let convertedAmount: string
+    export let secondaryStyle: boolean = false
 
-    const PRIMARY_TEXT_CONFIG = {
-        color: 'gray-800',
-        darkColor: 'white',
-        fontSize: '15',
-        fontWeight: bold ? FontWeight.semibold : FontWeight.normal,
-        lineHeight: '5',
-    }
-
-    const SECONDARY_TEXT_CONFIG = {
-        color: 'gray-600',
-        darkColor: 'gray-400',
-        fontSize: '13',
-        fontWeight: FontWeight.normal,
-        lineHeight: '4',
+    const TEXT_CONFIG = {
+        primary: {
+            color: 'gray-800',
+            darkColor: 'white',
+            fontSize: '15',
+            fontWeight: bold ? FontWeight.semibold : FontWeight.normal,
+            lineHeight: '5',
+        },
+        secondary: {
+            color: 'gray-600',
+            darkColor: 'gray-400',
+            fontSize: '13',
+            fontWeight: FontWeight.normal,
+            lineHeight: '4',
+        },
     }
 </script>
 
 <div class="flex flex-row justify-between flex-grow">
     <div class={title ? 'flex flex-col space-y-0.5' : null}>
-        <Text {...PRIMARY_TEXT_CONFIG}>{title}</Text>
+        <Text {...secondaryStyle ? TEXT_CONFIG.secondary : TEXT_CONFIG.primary}>
+            {title}
+        </Text>
         {#if subtitle}
-            <Text {...SECONDARY_TEXT_CONFIG}>{subtitle}</Text>
+            <Text {...TEXT_CONFIG.secondary}>{subtitle}</Text>
         {/if}
     </div>
     <div class="flex flex-col items-end space-y-0.5">
-        <Text {...PRIMARY_TEXT_CONFIG} classes="text-right">{amount}</Text>
-        <Text {...SECONDARY_TEXT_CONFIG} classes="text-right">{convertedAmount}</Text>
+        <Text {...secondaryStyle ? TEXT_CONFIG.secondary : TEXT_CONFIG.primary} classes="text-right">
+            {amount}
+        </Text>
+        <Text {...TEXT_CONFIG.secondary} classes="text-right">{convertedAmount}</Text>
     </div>
 </div>

packages/shared/components/BalanceSummarySection.svelte

@@ -1,12 +1,13 @@
 <script lang="ts">
     import { formatCurrency, localize } from '@core/i18n'
     import { getMarketAmountFromAssetValue } from '@core/market/utils'
-    import { formatTokenAmountBestMatch, selectedWalletAssets } from '@core/wallet'
+    import { IAsset, TokenMetadata, formatTokenAmountBestMatch, selectedWalletAssets } from '@core/wallet'
     import { BalanceSummaryRow, Icon } from '@ui'
     import { Icon as IconEnum } from '@auxiliary/icon'
     import { activeProfile } from '@core/profile'
     import { DEFAULT_MANA } from '@core/network'
 
+    export let asset: IAsset | null = null
     export let titleKey: string
     export let subtitleKey: string = ''
     export let subBreakdown: { [key: string]: { amount: number } } = {}
@@ -19,8 +20,12 @@
     $: hasChildren = !!Object.keys(subBreakdown ?? {}).length
     $: ({ baseCoin } = $selectedWalletAssets?.[$activeProfile?.network?.id] ?? {})
 
-    function getAmount(amount: number): string {
-        return baseCoin?.metadata ? formatTokenAmountBestMatch(amount, baseCoin?.metadata) : ''
+    function getAmount(amount: number, asset: IAsset | null): string {
+        if (!asset) {
+            return baseCoin?.metadata ? formatTokenAmountBestMatch(amount, baseCoin?.metadata) : ''
+        } else {
+            return asset?.metadata ? formatTokenAmountBestMatch(amount, asset?.metadata) : ''
+        }
     }
 
     function getAmountMana(amount: number): string {
@@ -32,16 +37,28 @@
         }
     }
 
-    function handleAmount(isBaseToken: boolean, amount: number) {
-        return isBaseToken ? getAmount(amount) : getAmountMana(amount)
+    function handleAmount(isBaseToken: boolean = false, amount: number, asset: IAsset | null): string {
+        if (!asset) {
+            return isBaseToken ? getAmount(amount, null) : getAmountMana(amount)
+        } else {
+            return getAmount(amount, asset)
+        }
     }
 
-    function handleCurrencyAmount(isBaseToken: boolean, amount: number) {
-        return isBaseToken ? getCurrencyAmount(amount) : getAmountMana(amount)
+    function handleCurrencyAmount(isBaseToken: boolean = false, amount: number, asset: IAsset | null): string {
+        if (!asset) {
+            return isBaseToken ? getCurrencyAmount(amount, null, baseCoin) : ''
+        } else {
+            return ''
+        }
     }
 
-    function getCurrencyAmount(amount: number): string {
-        return baseCoin ? formatCurrency(getMarketAmountFromAssetValue(amount, baseCoin)) : ''
+    function getCurrencyAmount(amount: number, asset: IAsset | null, baseCoin: IAsset | null | undefined): string {
+        if (!asset) {
+            return baseCoin ? formatCurrency(getMarketAmountFromAssetValue(amount, baseCoin)) : ''
+        } else {
+            return formatTokenAmountBestMatch(amount, asset?.metadata as TokenMetadata)
+        }
     }
 
     function toggleExpandedView(): void {
@@ -67,8 +84,8 @@
         <BalanceSummaryRow
             title={titleKey ? localize(`popups.balanceBreakdown.${titleKey}.title`) : ''}
             subtitle={subtitleKey ? localize(`popups.balanceBreakdown.${subtitleKey}.subtitle`) : ''}
-            amount={handleAmount(isBaseToken, amount)}
-            convertedAmount={handleCurrencyAmount(isBaseToken, amount)}
+            amount={handleAmount(isBaseToken, amount, asset)}
+            convertedAmount={handleCurrencyAmount(isBaseToken, amount, asset)}
             {bold}
         />
     </div>
@@ -77,9 +94,10 @@
             <balance-summary-row-expanded class="ml-8">
                 <BalanceSummaryRow
                     title={localize(`popups.balanceBreakdown.${breakdownKey}.title`)}
-                    subtitle={localize(`popups.balanceBreakdown.${breakdownKey}.subtitle`)}
-                    amount={handleAmount(isBaseToken, subBreakdown[breakdownKey].amount)}
-                    convertedAmount={handleCurrencyAmount(isBaseToken, subBreakdown[breakdownKey].amount)}
+                    subtitle={!asset ? localize(`popups.balanceBreakdown.${breakdownKey}.subtitle`) : undefined}
+                    amount={handleAmount(isBaseToken, subBreakdown[breakdownKey].amount, asset)}
+                    convertedAmount={handleCurrencyAmount(isBaseToken, subBreakdown[breakdownKey].amount, asset)}
+                    secondaryStyle={asset ? true : false}
                 />
             </balance-summary-row-expanded>
         {/each}

packages/shared/components/activity-info/GenericActivityInformation.svelte

@@ -2,8 +2,8 @@
     import { KeyValueBox } from '@ui'
     import { getFormattedTimeStamp, localize } from '@core/i18n'
     import { activeProfile, getBaseToken } from '@core/profile'
-    import { Activity, formatTokenAmountPrecise } from '@core/wallet'
-    import { ExplorerEndpoint } from '@core/network'
+    import { Activity, ActivityDirection, formatTokenAmountBestMatch, formatTokenAmountPrecise } from '@core/wallet'
+    import { DEFAULT_MANA, ExplorerEndpoint } from '@core/network'
     import { getOfficialExplorerUrl } from '@core/network/utils'
     import { openUrlInBrowser } from '@core/app'
     import { IKeyValueBoxList, truncateString } from '@core/utils'
@@ -28,6 +28,8 @@
     $: formattedGiftedStorageDeposit = formatTokenAmountPrecise(activity?.giftedStorageDeposit ?? 0, getBaseToken())
     $: formattedSurplus = formatTokenAmountPrecise(activity?.surplus ?? 0, getBaseToken())
     $: formattedGasFee = formatTokenAmountPrecise(Number(gasFee ?? 0), getBaseToken())
+    $: formattedManaPrefix = activity.direction === ActivityDirection.Incoming ? '' : '- '
+    $: formattedMana = formattedManaPrefix + formatTokenAmountBestMatch(Number(activity?.mana ?? 0), DEFAULT_MANA)
 
     let transactionDetailsList: IKeyValueBoxList
     $: transactionDetailsList = {
@@ -62,6 +64,9 @@
             timelockDate: { data: formattedTimelockDate, isTooltipVisible: true },
         }),
         ...(claimedTime && { claimedTime: { data: claimedTime } }),
+        ...(typeof activity?.mana === 'number' && {
+            mana: { data: formattedMana },
+        }),
     }
 
     function onTransactionIdClick(): void {

packages/shared/components/pills/ActivityInclusionStatusPill.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { localize } from '@core/i18n'
-    import { InclusionState } from '@core/wallet'
     import Pill from './Pill.svelte'
+    import { InclusionState } from '@iota/sdk/out/types'
 
     export let localizationKey: string
     export let inclusionState: InclusionState

packages/shared/components/pills/TransactionActivityStatusPill.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
-    import { ActivityAction, ActivityDirection, ActivityType, InclusionState } from '@core/wallet'
+    import { ActivityAction, ActivityDirection, ActivityType } from '@core/wallet'
     import ActivityInclusionStatusPill from './ActivityInclusionStatusPill.svelte'
+    import { InclusionState } from '@iota/sdk/out/types'
 
     export let isInternal: boolean
     export let type: ActivityType

packages/shared/components/tiles/ActivityTile.svelte

@@ -6,11 +6,11 @@
         ActivityAsyncStatus,
         ActivityType,
         IAsset,
-        InclusionState,
         NotVerifiedStatus,
         getTokenFromSelectedWallet,
         selectedWalletAssets,
     } from '@core/wallet'
+    import { InclusionState } from '@iota/sdk/out/types'
     import {
         ActivityInclusionStatusPill,
         AccountActivityTileContent,

packages/shared/components/tiles/AssetTile.svelte

@@ -6,6 +6,7 @@
     import { getMarketAmountFromAssetValue } from '@core/market/utils/getMarketAmountFromAssetValue'
     import { getMarketPriceForAsset } from '@core/market/utils'
     import { AssetIconSize } from '@ui/enums'
+    import { MANA_ID } from '@core/network'
 
     export let asset: IAsset | undefined
     export let onClick: () => unknown
@@ -15,6 +16,7 @@
 
     $: marketPrice = asset ? getMarketPriceForAsset(asset) : undefined
     $: marketBalance = asset ? getMarketAmountFromAssetValue(asset.balance?.total, asset) : undefined
+    $: total = (asset?.id === MANA_ID ? asset?.balance?.available : asset?.balance?.total) ?? 0
 </script>
 
 {#if asset}
@@ -46,7 +48,7 @@
             </div>
             <div class="flex flex-col text-right">
                 <Text type={TextType.p} fontWeight={FontWeight.semibold}>
-                    {asset.metadata ? formatTokenAmountBestMatch(asset.balance?.total, asset.metadata) : '-'}
+                    {asset.metadata ? formatTokenAmountBestMatch(total, asset.metadata) : '-'}
                 </Text>
                 {#if !squashed}
                     <div class="flex flex-row justify-between items-center text-right">

packages/shared/lib/contexts/onboarding/actions/handleTransactionInclusionEventForShimmerClaiming.ts

@@ -1,9 +1,9 @@
 import { get } from 'svelte/store'
 
-import { Event, TransactionInclusionWalletEvent, WalletEventType } from '@iota/sdk/out/types'
+import { Event, InclusionState, TransactionInclusionWalletEvent, WalletEventType } from '@iota/sdk/out/types'
 
 import { localize } from '@core/i18n'
-import { InclusionState, MissingTransactionIdError, validateWalletApiEvent } from '@core/wallet'
+import { MissingTransactionIdError, validateWalletApiEvent } from '@core/wallet'
 import { showAppNotification } from '@auxiliary/notification'
 
 import { ShimmerClaimingWalletState } from '../enums'

packages/shared/lib/core/wallet/actions/activities/updateClaimingTransactionInclusion.ts

@@ -1,8 +1,9 @@
-import { ActivityAsyncStatus, ActivityType, InclusionState } from '@core/wallet/enums'
+import { ActivityAsyncStatus, ActivityType } from '@core/wallet/enums'
 import { addClaimedActivity, allWalletActivities } from '@core/wallet/stores'
 import { showAppNotification } from '@auxiliary/notification'
 import { localize } from '@core/i18n'
 import { updateActivityFromPartialActivity } from '@core/wallet/utils/generateActivity/helper'
+import { InclusionState } from '@iota/sdk/out/types'
 
 export function updateClaimingTransactionInclusion(
     transactionId: string,

packages/shared/lib/core/wallet/actions/events-handlers/handleTransactionInclusionEvent.ts

@@ -1,5 +1,11 @@
 import { closePopup, openPopup, PopupId } from '@auxiliary/popup'
-import { AccountOutput, TransactionInclusionWalletEvent, WalletEvent, WalletEventType } from '@iota/sdk/out/types'
+import {
+    AccountOutput,
+    InclusionState,
+    TransactionInclusionWalletEvent,
+    WalletEvent,
+    WalletEventType,
+} from '@iota/sdk/out/types'
 import { updateParticipationOverview } from '@contexts/governance/stores'
 import { isWalletVoting } from '@contexts/governance/utils/isWalletVoting'
 import { updateNftInAllWalletNfts } from '@core/nfts'
@@ -14,7 +20,6 @@ import {
     ActivityDirection,
     ActivityType,
     GovernanceActivity,
-    InclusionState,
     WalletApiEventHandler,
 } from '@core/wallet'
 import { getWalletById, updateActiveWallet } from '@core/profile'

packages/shared/lib/core/wallet/enums/index.ts

@@ -8,7 +8,6 @@ export * from './not-verified-status.enum'
 export * from './token-standard.enum'
 export * from './verified-status.enum'
 export * from './return-strategy.enum'
-export * from './inclusion-state.enum'
 export * from './irc27-version.enum'
 export * from './subject.enum'
 export * from './wallet-colors.enum'

packages/shared/lib/core/wallet/interfaces/processed-transaction.interface.ts

@@ -1,6 +1,6 @@
-import { ActivityDirection, InclusionState } from '@core/wallet/enums'
+import { ActivityDirection } from '@core/wallet/enums'
 import { IWrappedOutput } from './wrapped-output.interface'
-import { UTXOInput } from '@iota/sdk/out/types'
+import { InclusionState, UTXOInput } from '@iota/sdk/out/types'
 
 export interface IProcessedTransaction {
     outputs: IWrappedOutput[]
@@ -11,6 +11,7 @@ export interface IProcessedTransaction {
     utxoInputs: UTXOInput[]
     wrappedInputs: IWrappedOutput[]
     claimingData?: IClaimData
+    mana: number
 }
 
 export interface IClaimData {