1  <script lang="ts">
  2    import Button from '$lib/components/button/button.svelte';
  3    import WalletIcon from '$lib/components/icons/Wallet.svelte';
  4    import wallet from '$lib/stores/wallet/wallet.store';
  5    import Flyout from '../flyout/flyout.svelte';
  6    import IdentityBadge from '../identity-badge/identity-badge.svelte';
  7    import AccountMenu from '../account-menu/account-menu.svelte';
  8    import SafeLogo from '../icons/safe-logo.svelte';
  9    import cupertinoPaneStore from '$lib/stores/cupertino-pane/cupertino-pane.store';
 10    import network from '$lib/stores/wallet/network';
 11  
 12    let safeAppMode = $derived(Boolean($wallet.safe));
 13  
 14    const walletInitializedStore = wallet.initialized;
 15    const waitingForOnboardStore = wallet.waitingForOnboard;
 16  </script>
 17  
 18  {#if !network.readOnlyMode}
 19    <div class="wrapper">
 20      {#if $wallet.connected}
 21        <div class="desktop-only">
 22          <Flyout>
 23            {#snippet trigger()}
 24              <div class="trigger">
 25                {#if safeAppMode}<div class="safe-logo">
 26                    <SafeLogo />
 27                  </div>{/if}
 28                <IdentityBadge
 29                  disableTooltip
 30                  hideAvatarOnMobile
 31                  disableLink
 32                  size="medium"
 33                  address={$wallet.address}
 34                />
 35              </div>
 36            {/snippet}
 37            {#snippet content()}
 38              <div>
 39                <AccountMenu />
 40              </div>
 41            {/snippet}
 42          </Flyout>
 43        </div>
 44        <div
 45          class="mobile-only"
 46          role="button"
 47          tabindex="0"
 48          onclick={() => cupertinoPaneStore.openSheet(AccountMenu, undefined)}
 49          onkeydown={() => cupertinoPaneStore.openSheet(AccountMenu, undefined)}
 50        >
 51          <IdentityBadge
 52            hideAvatarOnMobile
 53            disableLink
 54            size="medium"
 55            address={$wallet.address}
 56            disableTooltip
 57          />
 58        </div>
 59      {:else}
 60        <Button
 61          disabled={$waitingForOnboardStore}
 62          loading={!$walletInitializedStore}
 63          icon={WalletIcon}
 64          onclick={() => wallet.connect()}>Connect</Button
 65        >
 66      {/if}
 67    </div>
 68  {/if}
 69  
 70  <style>
 71    .wrapper {
 72      display: flex;
 73      align-items: center;
 74      justify-content: center;
 75      gap: 0.5rem;
 76    }
 77  
 78    .trigger {
 79      display: flex;
 80    }
 81  
 82    .trigger > .safe-logo {
 83      border-radius: 1rem;
 84      height: 2rem;
 85      width: 2rem;
 86      background-color: var(--color-primary);
 87      margin-right: -12px;
 88      z-index: 1;
 89    }
 90  
 91    .mobile-only {
 92      display: none;
 93    }
 94  
 95    @media (max-width: 768px) {
 96      .desktop-only {
 97        display: none;
 98      }
 99  
100      .mobile-only {
101        display: initial;
102      }
103    }
104  </style>