ui: dashboard header setup (#4990)

* ref: merge with stardust-develop

* feat: deactivate sendAndReceive

* feat: setup features for top bar

* fix: add missing lang attribute

* ref: move feature flags to wallet

* ui: add fixed positions for top bar elements

* fix: change onClick of AccountActionsButton back

packages/mobile/components/AccountSwitcher.svelte

@@ -0,0 +1,15 @@
+<script lang="typescript">
+    import { Icon as IconEnum } from '@auxiliary/icon'
+    import { selectedAccount } from '@core/account'
+    import { Icon } from 'shared/components'
+    import { AccountLabel } from 'shared/components/atoms/'
+
+    function onClick(): void {}
+</script>
+
+<button on:click={onClick} class="flex flex-row justify-center items-center space-x-2">
+    <AccountLabel account={$selectedAccount} />
+    <div class="rotate-180">
+        <Icon height="18" width="18" icon={IconEnum.ChevronDown} classes="text-gray-500 dark:text-white" />
+    </div>
+</button>

packages/mobile/components/TopBar.svelte

@@ -0,0 +1,22 @@
+<script lang="typescript">
+    import { AccountSwitcher, AccountActionsButton, ProfileActionsButton } from './'
+    import features from '../features/features'
+</script>
+
+<div class="grid grid-cols-4 h-10">
+    <div class="col-span-1">
+        {#if features?.wallet?.profileActions?.enabled}
+            <ProfileActionsButton />
+        {/if}
+    </div>
+    <div class="flex justify-center col-span-2 content-center">
+        {#if features?.wallet?.accountSwitcher?.enabled}
+            <AccountSwitcher />
+        {/if}
+    </div>
+    <div class="flex justify-end col-span-1">
+        {#if features?.wallet?.accountActions?.enabled}
+            <AccountActionsButton />
+        {/if}
+    </div>
+</div>

packages/mobile/components/buttons/AccountActionsButton.svelte

@@ -0,0 +1,5 @@
+<script lang="typescript">
+    import { MeatballMenuButton } from 'shared/components'
+</script>
+
+<MeatballMenuButton onClick={() => {}} classes="items-center text-gray-500" />

packages/mobile/components/buttons/ProfileActionsButton.svelte

@@ -0,0 +1,12 @@
+<script lang="typescript">
+    import { activeProfile } from '@core/profile'
+    import { getInitials } from '@lib/helpers'
+
+    // @TODO fix the linting error that profileInitial isn't used
+    /* eslint-disable @typescript-eslint/no-unused-vars */
+    $: profileInitial = getInitials($activeProfile?.name, 1)
+</script>
+
+<button class="w-10 h-10 relative flex items-center justify-center rounded-full bg-blue-500 leading-100">
+    <span class="text-12 text-center text-white uppercase">{profileInitial}</span>
+</button>

packages/mobile/components/buttons/index.js

@@ -1 +1,3 @@
+export { default as AccountActionsButton } from './AccountActionsButton.svelte'
+export { default as ProfileActionsButton } from './ProfileActionsButton.svelte'
 export { default as ProfileButton } from './ProfileButton.svelte'

packages/mobile/components/index.js

@@ -1,6 +1,8 @@
+export { default as AccountSwitcher } from './AccountSwitcher.svelte'
 export { default as AssetList } from './AssetList.svelte'
 export { default as OnboardingLayout } from './OnboardingLayout.svelte'
 export { default as RecoveryPhrase } from './RecoveryPhrase.svelte'
+export { default as TopBar } from './TopBar.svelte'
 export { default as Route } from './Route.svelte'
 export { default as TabPane } from './TabPane.svelte'
 

packages/mobile/features/features.ts

@@ -88,7 +88,13 @@ const features = {
     },
     wallet: {
         enabled: false,
-        accountSummary: {
+        profileActions: {
+            enabled: false,
+        },
+        accountSwitcher: {
+            enabled: false,
+        },
+        accountActions: {
             enabled: false,
         },
         sendAndReceive: {

packages/mobile/routes/dashboard/DashboardRouter.svelte

@@ -1,15 +1,38 @@
 <script lang="typescript">
     import { selectedAccount } from '@core/account'
-    import { TabPane } from '../../../mobile/components'
+    import { localize } from '@core/i18n'
+    import { BASE_TOKEN } from '@core/network'
+    import { activeProfile } from '@core/profile'
+    import features from '../../features/features'
+    import { TabPane, TopBar } from '../../../mobile/components'
     import { activeWalletTab, WALLET_TAB_COMPONENT } from '../../lib/contexts/wallet'
+    import { Button, TogglableAmountLabel } from 'shared/components'
     import { TabNavigator } from './wallet/tabs'
 
     $: activeWalletTabComponent = WALLET_TAB_COMPONENT[$activeWalletTab]
 </script>
 
 {#if $selectedAccount}
-    <div class="flex flex-col w-screen h-screen bg-white dark:bg-gray-800">
-        <div class="w-full h-18">BALANCE PLACEHOLDER</div>
+    <div class="flex flex-col w-screen h-screen bg-gray-50 dark:bg-gray-900">
+        <div class="px-5 py-6">
+            <TopBar />
+            <div class="flex justify-center w-full mt-5">
+                <TogglableAmountLabel
+                    amount={$selectedAccount.balances?.baseCoin?.available}
+                    tokenMetadata={BASE_TOKEN[$activeProfile?.networkProtocol]}
+                />
+            </div>
+            {#if features?.wallet?.sendAndReceive?.enabled}
+                <div class="flex flex-row items-center justify-center w-full space-x-2 mt-8">
+                    <Button classes="w-1/2 h-10">
+                        {localize('actions.send')}
+                    </Button>
+                    <Button classes="w-1/2 h-10">
+                        {localize('actions.receive')}
+                    </Button>
+                </div>
+            {/if}
+        </div>
         {#if activeWalletTabComponent}
             <div class="relative flex flex-col flex-auto w-full">
                 <TabPane>