Feat: single wallet dashboard

packages/shared/components/AssetTile.svelte

@@ -0,0 +1,38 @@
+<script lang="typescript">
+    import { Icon, Text } from 'shared/components'
+    import { isBright } from 'shared/lib/helpers'
+    import { Asset } from 'shared/lib/typings/assets'
+
+    export let asset: Asset
+
+    $: assetIconColor = isBright(asset?.color) ? 'gray-800' : 'white'
+</script>
+
+<div
+    style="--asset-color: {asset?.color}"
+    class="flex flex-row justify-between items-center space-x-2 bg-gray-50 dark:bg-gray-900 p-4 rounded-2xl"
+>
+    <div class="flex flex-row items-center space-x-4">
+        <div class="icon h-8 w-8 rounded-full flex items-center justify-center p-1">
+            <Icon classes="text-{assetIconColor}" icon={asset?.name?.toLocaleLowerCase()} height="100%" width="100%" />
+        </div>
+        <div class="flex flex-col flex-wrap space-y-1">
+            <Text classes="font-semibold">{asset?.name}</Text>
+            {#if asset?.fiatPrice}
+                <Text secondary smaller>{asset?.fiatPrice}</Text>
+            {/if}
+        </div>
+    </div>
+    <div class="flex flex-col flex-wrap space-y-1 text-right">
+        <Text classes="font-semibold">{asset?.balance}</Text>
+        {#if asset?.fiatBalance}
+            <Text secondary smaller>{`≈ ${asset?.fiatBalance}`}</Text>
+        {/if}
+    </div>
+</div>
+
+<style type="text/scss">
+    .icon {
+        background-color: var(--asset-color);
+    }
+</style>

packages/shared/components/index.js

@@ -4,7 +4,7 @@ export { default as ActivityRow } from './ActivityRow.svelte'
 export { default as Address } from './inputs/Address.svelte'
 export { default as Amount } from './inputs/Amount.svelte'
 export { default as Animation } from './Animation.svelte'
-export { default as BalanceSummary } from './BalanceSummary.svelte'
+export { default as AssetTile } from './AssetTile.svelte'
 export { default as Box } from './Box.svelte'
 export { default as BundleMiningLayout } from './BundleMiningLayout.svelte'
 export { default as Button } from './Button.svelte'

packages/shared/components/modals/AccountActions.svelte

@@ -3,10 +3,16 @@
     import { localize } from 'shared/lib/i18n'
     import { openPopup } from 'shared/lib/popup'
     import { activeProfile, updateProfile } from 'shared/lib/profile'
-    import { accountRoute } from 'shared/lib/router'
+    import { accountRoute, resetWalletRoute } from 'shared/lib/router'
     import { SettingsIcons } from 'shared/lib/typings/icons'
     import { AccountRoutes } from 'shared/lib/typings/routes'
-    import { asyncRemoveWalletAccount, selectedAccount, selectedMessage, wallet } from 'shared/lib/wallet'
+    import {
+        asyncRemoveWalletAccount,
+        setSelectedAccount,
+        selectedAccount,
+        selectedMessage,
+        wallet,
+    } from 'shared/lib/wallet'
     import { getContext } from 'svelte'
     import { Readable } from 'svelte/store'
     import { WalletAccount } from 'shared/lib/typings/wallet'
@@ -53,7 +59,7 @@
                     }
                     // TODO: handle for single wallet view
                     selectedMessage.set(null)
-                    accountRoute.set(AccountRoutes.Init)
+                    resetWalletRoute()
                 },
             },
         })
@@ -75,7 +81,8 @@
                     }
                     // TODO: handle for single wallet view
                     selectedMessage.set(null)
-                    accountRoute.set(AccountRoutes.Init)
+                    resetWalletRoute()
+                    setSelectedAccount(get(viewableAccounts)?.[0]?.id ?? null)
                 },
             },
         })
@@ -90,11 +97,11 @@
         }
         // TODO: handle for single wallet view
         selectedMessage.set(null)
-        accountRoute.set(AccountRoutes.Init)
+        resetWalletRoute()
     }
 </script>
 
-<Modal bind:isActive position={{ top: '121px', right: 'calc((100% + 16px) * 0.6666666)' }}>
+<Modal bind:isActive position={{ top: '90px', right: 'calc((100% + 16px) * 0.6666666)' }}>
     <div class="flex flex-col">
         <!-- Customize -->
         <button

packages/shared/components/modals/ProfileActions.svelte

@@ -103,7 +103,8 @@
                 lastBackupDateFormatted,
             },
         })
-    }''
+    }
+    ('')
 
     function handleVersionUpdateClick() {
         openPopup({ type: 'version' })

packages/shared/components/popups/CreateAccount.svelte

@@ -94,9 +94,7 @@
                 balance={'0 Mi'}
                 balanceEquiv={'US$ 0,00'}
                 {color}
-                disabledHover="true"
                 name={accountAlias || localize('general.accountName')}
-                size="l"
                 classes="mb-4"
             />
             <Input

packages/shared/lib/assets.ts

@@ -0,0 +1,54 @@
+import { Unit } from '@iota/unit-converter'
+import { convertToFiat, currencies, exchangeRates } from 'shared/lib/currency'
+import { formatStakingAirdropReward } from 'shared/lib/participation/staking'
+import { assemblyStakingRewards, shimmerStakingRewards } from 'shared/lib/participation/stores'
+import { activeProfile } from 'shared/lib/profile'
+import { Asset, Token } from 'shared/lib/typings/assets'
+import { AvailableExchangeRates, CurrencyTypes } from 'shared/lib/typings/currency'
+import { UNIT_MAP } from 'shared/lib/units'
+import { selectedAccount } from 'shared/lib/wallet'
+import { derived } from 'svelte/store'
+import { StakingAirdrop } from './participation/types'
+
+export const assets = derived(
+    [exchangeRates, currencies, activeProfile, selectedAccount, assemblyStakingRewards, shimmerStakingRewards],
+    ([
+        $exchangeRates,
+        $currencies,
+        $activeProfile,
+        $selectedAccount,
+        $assemblyStakingRewards,
+        $shimmerStakingRewards,
+    ]) => {
+        if (!$activeProfile || !$selectedAccount) return []
+        const profileCurrency = $activeProfile?.settings.currency ?? AvailableExchangeRates.USD
+        const assets: Asset[] = [
+            {
+                name: Token.IOTA,
+                balance: $selectedAccount.balance,
+                fiatPrice: `${convertToFiat(
+                    UNIT_MAP[Unit.Mi].val,
+                    $currencies[CurrencyTypes.USD],
+                    $exchangeRates[profileCurrency]
+                )} ${profileCurrency}`,
+                fiatBalance: $selectedAccount.balanceEquiv,
+                color: '#6E82A4',
+            },
+        ]
+        if ($assemblyStakingRewards) {
+            assets.push({
+                name: Token.Assembly,
+                balance: formatStakingAirdropReward(StakingAirdrop[Token.Assembly], Number($assemblyStakingRewards), 6),
+                color: '#DCABE1',
+            })
+        }
+        if ($shimmerStakingRewards) {
+            assets.push({
+                name: Token.Shimmer,
+                balance: formatStakingAirdropReward(StakingAirdrop[Token.Shimmer], Number($shimmerStakingRewards), 6),
+                color: '#25DFCA',
+            })
+        }
+        return assets
+    }
+)

packages/shared/lib/typings/assets.ts

@@ -0,0 +1,13 @@
+export enum Token {
+    IOTA = 'IOTA',
+    Assembly = 'Assembly',
+    Shimmer = 'Shimmer',
+}
+
+export type Asset = {
+    name: Token | string
+    balance: string
+    fiatPrice?: string
+    fiatBalance?: string
+    color?: string
+}

packages/shared/locales/en.json

@@ -960,7 +960,6 @@
         "darkTheme": "Dark",
         "systemTheme": "System",
         "balance": "Balance",
-        "accountBalance": "Wallet Balance",
         "all": "All",
         "incoming": "Incoming",
         "outgoing": "Outgoing",
@@ -1053,7 +1052,8 @@
         "notStaked": "Not staked",
         "stakedFunds": "Staked funds",
         "unstakedFunds": "Unstaked funds",
-        "accountColor": "Wallet color"
+        "accountColor": "Wallet color",
+        "myAssets": "My assets"
     },
     "dates": {
         "today": "Today",

packages/shared/routes/dashboard/Dashboard.svelte

@@ -359,9 +359,9 @@
         pollLedgerDeviceStatus(false, LEDGER_STATUS_POLL_INTERVAL)
     }
 
-    $: if ($accountsLoaded && $viewableAccounts.length) {
+    $: if ($accountsLoaded) {
         // TODO: persist last selected account
-        setSelectedAccount($viewableAccounts[0]?.id)
+        setSelectedAccount(get(viewableAccounts)?.[0]?.id ?? null)
     }
 </script>
 

packages/shared/routes/dashboard/wallet/Wallet.svelte

@@ -1,6 +1,6 @@
 <script lang="typescript">
-    import { AccountActionsModal, DashboardPane, Drawer } from 'shared/components'
-    import { clearSendParams, loggedIn, mobile, sendParams } from 'shared/lib/app'
+    import { AccountActionsModal, DashboardPane, Text } from 'shared/components'
+    import { clearSendParams, loggedIn, sendParams } from 'shared/lib/app'
     import { deepLinkRequestActive } from 'shared/lib/deepLinking/deepLinking'
     import { deepCopy } from 'shared/lib/helpers'
     import { localize } from 'shared/lib/i18n'
@@ -10,7 +10,6 @@
     import { closePopup, openPopup } from 'shared/lib/popup'
     import {
         activeProfile,
-        getColor,
         isLedgerProfile,
         isSoftwareProfile,
         isStrongholdLocked,
@@ -42,12 +41,19 @@
         addMessagesPair,
     } from 'shared/lib/wallet'
     import { onMount } from 'svelte'
-    import { AccountActions, AccountBalance, AccountHistory, BarChart, LineChart } from './views/'
+    import {
+        AccountAssets,
+        AccountBalance,
+        AccountHistory,
+        BarChart,
+        LineChart,
+        ManageAccount,
+        Send,
+        Receive,
+    } from './views/'
     import { checkStronghold } from 'shared/lib/stronghold'
     import { AccountIdentifier } from 'shared/lib/typings/account'
 
-    let drawer: Drawer
-
     const { accounts, accountsLoaded, internalTransfersInProgress } = $wallet
 
     let showActionsModal = false
@@ -400,15 +406,24 @@
         {#key $selectedAccount?.id}
             <div class="w-full h-full grid grid-cols-3 gap-x-4 min-h-0">
                 <DashboardPane classes=" h-full flex flex-auto flex-col flex-shrink-0">
-                    <AccountBalance
-                        color={getColor($activeProfile, $selectedAccount?.id)}
-                        balance={$selectedAccount.rawIotaBalance}
-                        balanceEquiv={$selectedAccount.balanceEquiv}
-                        onMenuClick={handleMenuClick}
-                        classes={$accountRoute === AccountRoutes.Manage ? 'hidden' : ''}
-                    />
+                    {#if $accountRoute !== AccountRoutes.Manage}
+                        <AccountBalance onMenuClick={handleMenuClick} />
+                    {/if}
                     <DashboardPane classes="h-full -mt-5 z-0">
-                        <AccountActions {isGeneratingAddress} {onSend} {onInternalTransfer} {onGenerateAddress} />
+                        {#if $activeProfile?.hiddenAccounts?.includes($selectedAccount?.id)}
+                            <div class="px-6 my-4">
+                                <Text type="p" secondary>{localize('general.accountRemoved')}</Text>
+                            </div>
+                        {/if}
+                        {#if $accountRoute === AccountRoutes.Init}
+                            <AccountAssets />
+                        {:else if $accountRoute === AccountRoutes.Send}
+                            <Send {onSend} {onInternalTransfer} />
+                        {:else if $accountRoute === AccountRoutes.Receive}
+                            <Receive {isGeneratingAddress} {onGenerateAddress} />
+                        {:else if $accountRoute === AccountRoutes.Manage}
+                            <ManageAccount alias={$selectedAccount.alias} account={$selectedAccount} />
+                        {/if}
                     </DashboardPane>
                 </DashboardPane>
                 <DashboardPane>
@@ -426,8 +441,8 @@
                     </DashboardPane>
                 </div>
             </div>
+            <AccountActionsModal bind:isActive={showActionsModal} />
         {/key}
-        <AccountActionsModal bind:isActive={showActionsModal} />
     </div>
 {/if}
 

packages/shared/routes/dashboard/wallet/views/AccountAssets.svelte

@@ -0,0 +1,16 @@
+<script lang="typescript">
+    import { AssetTile, Text } from 'shared/components'
+    import { assets } from 'shared/lib/assets'
+    import { localize } from 'shared/lib/i18n'
+</script>
+
+<div class="w-full h-full space-y-6 flex flex-auto flex-col flex-shrink-0 p-6">
+    <Text classes="text-left" type="h5">{localize('general.myAssets')}</Text>
+    <div
+        class="w-full space-y-4 flex flex-auto flex-col overflow-y-auto h-1 space-y-2.5 -mr-2 pr-2 scroll-secondary scrollable-y"
+    >
+        {#each $assets as asset}
+            <AssetTile {asset} />
+        {/each}
+    </div>
+</div>