fix: handle undefined name in account switcher (#3033)

* fix: use dash placeholder for when the name is undefined

* chore: use last selected account as backup

packages/shared/components/AccountSwitcher.svelte

@@ -1,15 +1,18 @@
 <script lang="typescript">
-    import { WalletAccount } from '@lib/typings/wallet'
     import { AccountSwitcherModal, Icon, Text, Modal } from 'shared/components'
     import { activeProfile, getColor, updateProfile } from '@lib/profile'
     import { selectedAccount } from '@lib/wallet'
+    import { WalletAccount } from '@lib/typings/wallet'
 
     export let accounts: WalletAccount[] = []
     export let onCreateAccount = (..._: any[]): void => {}
 
     let modal: Modal
     let isModalOpened: boolean
 
+    let lastSelectedAccount: WalletAccount = null
+    $: if ($selectedAccount) lastSelectedAccount = $selectedAccount
+
     function onClick() {
         modal?.toggle()
         updateProfile('hasFinishedSingleAccountGuide', true)
@@ -19,8 +22,8 @@
 <svelte:window on:click={() => (isModalOpened = modal?.isOpened())} />
 <div class="relative left-8" style="-webkit-app-region: none;">
     <button on:click={onClick} class="flex flex-row justify-center items-center space-x-2">
-        <div class="circle" style="--account-color: {getColor($activeProfile, $selectedAccount?.id)};" />
-        <Text type="h5">{$selectedAccount?.alias}</Text>
+        <div class="circle" style="--account-color: {getColor($activeProfile, lastSelectedAccount?.id)};" />
+        <Text type="h5">{lastSelectedAccount?.alias ?? '---'}</Text>
         <div class="transform {isModalOpened ? 'rotate-180' : 'rotate-0'}">
             <Icon height="18" width="18" icon="chevron-down" classes="text-gray-800 dark:text-white" />
         </div>