@meddleware/dashboard 0.1.7 → 0.1.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/package.json +3 -3
  2. package/src/App.vue +56 -31
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@meddleware/dashboard",
3
- "version": "0.1.7",
3
+ "version": "0.1.9",
4
4
  "description": "Meddleware tools hub — Vue 3 SPA listing hosted services (Walrus, Access Gate) with white-label deploy options.",
5
5
  "author": "Meddleware <dev@meddleware.co.uk>",
6
6
  "license": "0BSD",
@@ -28,9 +28,9 @@
28
28
  "dependencies": {
29
29
  "@meddleware/access-gate-ui": "^0.1.3",
30
30
  "@meddleware/design-tokens": "^0.1.2",
31
- "@meddleware/seal-ui": "^0.0.3",
31
+ "@meddleware/seal-ui": "^0.0.5",
32
32
  "@meddleware/ui": "^0.1.6",
33
- "@meddleware/wallet-adapter": "^0.0.2",
33
+ "@meddleware/wallet-adapter": "^0.0.3",
34
34
  "@meddleware/walrus-ui": "^0.1.5",
35
35
  "pinia": "^4.0.2",
36
36
  "vue": "^3.5.40",
package/src/App.vue CHANGED
@@ -6,7 +6,8 @@ import {
6
6
  ColorModeControl, SidebarItem, StatusWidget,
7
7
  useColorMode,
8
8
  } from '@meddleware/ui'
9
- import { useWallet } from '@meddleware/wallet-adapter'
9
+ import { useWallet, WalletSelector } from '@meddleware/wallet-adapter'
10
+ import type { Wallet } from '@mysten/wallet-standard'
10
11
 
11
12
  const { mode, set } = useColorMode('dark')
12
13
  const route = useRoute()
@@ -22,13 +23,12 @@ const { wallets, account, connect, disconnect, connecting } = useWallet({
22
23
  requiredFeatures: ['sui:signTransaction', 'sui:signPersonalMessage'],
23
24
  })
24
25
 
25
- async function onConnect(): Promise<void> {
26
- const w = wallets.value[0]
27
- if (w) await connect(w)
26
+ async function onSelect(w: Wallet): Promise<void> {
27
+ await connect(w)
28
28
  }
29
29
 
30
30
  function shortAddr(addr: string): string {
31
- return `${addr.slice(0, 8)}…${addr.slice(-4)}`
31
+ return `${addr.slice(0, 6)}…${addr.slice(-4)}`
32
32
  }
33
33
  </script>
34
34
 
@@ -40,21 +40,6 @@ function shortAddr(addr: string): string {
40
40
  <span>Meddleware</span>
41
41
  </template>
42
42
  <template #actions>
43
- <span v-if="account" class="wallet-addr" :title="account.address">
44
- {{ shortAddr(account.address) }}
45
- </span>
46
- <button v-if="account" type="button" class="wallet-btn" @click="disconnect">
47
- Disconnect
48
- </button>
49
- <button
50
- v-else
51
- type="button"
52
- class="wallet-btn"
53
- :disabled="!wallets.length || connecting"
54
- @click="onConnect"
55
- >
56
- {{ wallets.length ? (connecting ? 'Connecting…' : 'Connect wallet') : 'No wallet' }}
57
- </button>
58
43
  <StatusWidget />
59
44
  <ColorModeControl :model-value="mode" @update:model-value="set" />
60
45
  </template>
@@ -72,6 +57,18 @@ function shortAddr(addr: string): string {
72
57
  <SidebarItem label="Sealed Storage" icon="🔒" :active="isSealedStorage" @click="navigate" />
73
58
  </router-link>
74
59
  </nav>
60
+
61
+ <template #foot>
62
+ <div v-if="account" class="wallet-connected">
63
+ <span class="wallet-addr" :title="account.address">{{ shortAddr(account.address) }}</span>
64
+ <button type="button" class="wallet-disconnect" @click="disconnect">Disconnect</button>
65
+ </div>
66
+ <div v-else class="wallet-disconnected">
67
+ <p class="wallet-prompt">{{ connecting ? 'Connecting…' : 'Connect wallet' }}</p>
68
+ <WalletSelector :wallets="wallets" @select="onSelect" />
69
+ </div>
70
+ <p class="sidebar-copyright">© {{ new Date().getFullYear() }} Meddleware</p>
71
+ </template>
75
72
  </AppSidebar>
76
73
 
77
74
  <main class="app-shell__main">
@@ -99,8 +96,6 @@ function shortAddr(addr: string): string {
99
96
  }
100
97
 
101
98
  .app-shell__main {
102
- /* Inline tool views can exceed the viewport — scroll the main area internally
103
- (the shell itself stays fixed at 100vh). */
104
99
  overflow-y: auto;
105
100
  height: 100%;
106
101
  }
@@ -109,24 +104,54 @@ function shortAddr(addr: string): string {
109
104
  color: var(--gold);
110
105
  }
111
106
 
107
+ /* ── Sidebar wallet foot ───────────────────────────────── */
108
+ .wallet-connected {
109
+ display: flex;
110
+ align-items: center;
111
+ justify-content: space-between;
112
+ gap: 0.5rem;
113
+ margin-bottom: 0.75rem;
114
+ }
115
+
112
116
  .wallet-addr {
113
117
  font-family: monospace;
114
- font-size: 0.85rem;
118
+ font-size: 0.8rem;
115
119
  color: var(--muted);
120
+ white-space: nowrap;
121
+ overflow: hidden;
122
+ text-overflow: ellipsis;
116
123
  }
117
124
 
118
- .wallet-btn {
125
+ .wallet-disconnect {
119
126
  background: none;
120
- border: 1px solid var(--border);
121
- border-radius: 8px;
122
- padding: 0.35rem 0.75rem;
127
+ border: none;
128
+ padding: 0;
129
+ color: var(--muted);
130
+ font-size: 0.8rem;
123
131
  cursor: pointer;
132
+ white-space: nowrap;
133
+ text-decoration: underline;
134
+ text-underline-offset: 2px;
135
+ }
136
+
137
+ .wallet-disconnect:hover {
124
138
  color: var(--text);
125
- font-size: 0.85rem;
126
139
  }
127
140
 
128
- .wallet-btn:disabled {
129
- opacity: 0.5;
130
- cursor: not-allowed;
141
+ .wallet-disconnected {
142
+ margin-bottom: 0.75rem;
143
+ }
144
+
145
+ .wallet-prompt {
146
+ font-size: 0.8rem;
147
+ color: var(--muted);
148
+ margin: 0 0 0.5rem;
149
+ }
150
+
151
+ .sidebar-copyright {
152
+ font-size: 0.75rem;
153
+ color: var(--muted);
154
+ margin: 0;
155
+ opacity: 0.6;
131
156
  }
132
157
  </style>