Skip to content

Commit 57779fc

Browse files
nyusternienyusternie
committed
feat(wallet): polish settings hardware and split wizard
1 parent d87a5e4 commit 57779fc

4 files changed

Lines changed: 287 additions & 141 deletions

File tree

‎packages/wallet/src/__tests__/ToolboxView.test.ts‎

Lines changed: 17 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,25 @@ describe("ToolboxView.vue", () => {
1717
expect(wrapper.text()).toContain("BTC/eCash fork");
1818
});
1919

20-
it("shows the BTC staging address UI scaffold", () => {
20+
it("shows the BTC staging address wizard step", () => {
2121
const wrapper = mount(ToolboxView);
22+
expect(wrapper.text()).toContain("Generate BTC staging address");
2223
expect(wrapper.text()).toContain("BTC staging address");
23-
expect(wrapper.text()).toContain("QR Preview");
24-
expect(wrapper.text()).toContain("current eCash wallet");
24+
expect(wrapper.text()).toContain("Funding QR");
25+
});
26+
27+
it("can navigate to the destination confirmation step", async () => {
28+
const wrapper = mount(ToolboxView);
29+
const destinationStep = wrapper
30+
.findAll("button")
31+
.find((button) => button.text().includes("Confirm destinations"));
32+
33+
expect(destinationStep).toBeDefined();
34+
await destinationStep!.trigger("click");
35+
36+
expect(wrapper.text()).toContain("Current eCash wallet");
37+
expect(wrapper.text()).toContain("BTC return address");
38+
expect(wrapper.text()).toContain("choose a safe BTC destination");
2539
});
2640

2741
it("explains wallet-native coin splitting safety", () => {
@@ -30,10 +44,4 @@ describe("ToolboxView.vue", () => {
3044
expect(wrapper.text()).toContain("explicit coin selection");
3145
expect(wrapper.text()).toContain("separate website or third-party tool");
3246
});
33-
34-
it("warns against blindly returning BTC to the detected source address", () => {
35-
const wrapper = mount(ToolboxView);
36-
expect(wrapper.text()).toContain("Do not silently return BTC");
37-
expect(wrapper.text()).toContain("exchange, custodian, or change address");
38-
});
3947
});

‎packages/wallet/src/views/HardwareWalletView.vue‎

Lines changed: 68 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,12 @@ const coin = ref("btc");
1616
const showOnDevice = ref(true);
1717
const account = ref<HardwareAccount | null>(null);
1818
19+
const quickStart = [
20+
"Connect your OneKey over WebUSB",
21+
"Choose a derivation path",
22+
"Confirm the address on-device",
23+
];
24+
1925
async function connect() {
2026
error.value = "";
2127
status.value = "connecting";
@@ -42,47 +48,67 @@ async function fetchAddress() {
4248
</script>
4349

4450
<template>
45-
<div class="mx-auto max-w-3xl">
46-
<div class="mb-6">
47-
<p class="text-xs uppercase tracking-widest text-ecash-500">OneKey integration</p>
48-
<h2 class="mt-1 text-2xl font-bold">Hardware Wallet</h2>
49-
<p class="mt-2 max-w-2xl text-sm text-gray-400">
50-
Connect a OneKey device, derive addresses, and verify receive details
51-
directly on your hardware wallet.
52-
</p>
53-
</div>
54-
55-
<div class="grid gap-4 lg:grid-cols-[1.2fr_0.8fr]">
56-
<section class="rounded-xl border border-gray-800 bg-gray-900 p-5">
57-
<div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
58-
<div>
59-
<h3 class="font-semibold text-white">{{ wallet.name }} Device</h3>
60-
<p class="mt-1 text-xs text-gray-500">
61-
Chromium + HTTPS or localhost · WebUSB required
62-
</p>
51+
<div class="mx-auto max-w-5xl">
52+
<section class="rounded-2xl border border-gray-800 bg-gray-900 p-5">
53+
<div class="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
54+
<div>
55+
<p class="text-xs uppercase tracking-widest text-ecash-500">OneKey integration</p>
56+
<h2 class="mt-1 text-3xl font-black">Hardware Wallet</h2>
57+
<p class="mt-2 max-w-2xl text-sm leading-6 text-gray-400">
58+
Verify receive addresses directly on your OneKey device and prepare
59+
for higher-assurance signing workflows across the Drivechains
60+
Financial Hub.
61+
</p>
62+
</div>
63+
64+
<div class="rounded-xl border border-gray-800 bg-gray-950 p-4 lg:w-72">
65+
<p class="text-xs uppercase tracking-widest text-gray-500">Device status</p>
66+
<div class="mt-3 flex items-center justify-between">
67+
<span class="text-sm font-semibold text-white">{{ wallet.name }}</span>
68+
<span
69+
class="rounded-full px-3 py-1 text-xs font-semibold"
70+
:class="{
71+
'bg-gray-800 text-gray-400': status === 'idle',
72+
'bg-yellow-900 text-yellow-300': status === 'connecting',
73+
'bg-ecash-900 text-ecash-400': status === 'connected',
74+
'bg-red-900 text-red-300': status === 'error',
75+
}"
76+
>
77+
{{ status }}
78+
</span>
6379
</div>
64-
<span
65-
class="rounded-full px-3 py-1 text-xs font-semibold"
66-
:class="{
67-
'bg-gray-800 text-gray-400': status === 'idle',
68-
'bg-yellow-900 text-yellow-300': status === 'connecting',
69-
'bg-ecash-900 text-ecash-400': status === 'connected',
70-
'bg-red-900 text-red-300': status === 'error',
71-
}"
80+
<button
81+
class="mt-4 w-full rounded-lg bg-ecash-500 px-4 py-2 text-sm font-semibold text-gray-950 hover:bg-ecash-400 disabled:opacity-40"
82+
:disabled="status === 'connecting'"
83+
@click="connect"
7284
>
73-
{{ status }}
74-
</span>
85+
{{ status === "connected" ? "Reconnect OneKey" : "Connect OneKey" }}
86+
</button>
7587
</div>
88+
</div>
89+
</section>
90+
91+
<section class="mt-5 grid gap-4 md:grid-cols-3">
92+
<div
93+
v-for="(item, i) in quickStart"
94+
:key="item"
95+
class="rounded-xl border border-gray-800 bg-gray-900 p-4"
96+
>
97+
<span class="flex h-8 w-8 items-center justify-center rounded-full bg-ecash-600 text-sm font-black text-white">
98+
{{ i + 1 }}
99+
</span>
100+
<p class="mt-3 text-sm font-semibold text-white">{{ item }}</p>
101+
</div>
102+
</section>
103+
104+
<section class="mt-5 grid gap-5 lg:grid-cols-[1.1fr_0.9fr]">
105+
<div class="rounded-xl border border-gray-800 bg-gray-900 p-5">
106+
<h3 class="font-semibold text-white">Address verification</h3>
107+
<p class="mt-1 text-xs text-gray-500">
108+
Chromium + HTTPS or localhost · WebUSB required
109+
</p>
76110

77-
<button
78-
class="mt-5 rounded-lg bg-ecash-500 px-4 py-2 text-sm font-semibold text-gray-950 hover:bg-ecash-400 disabled:opacity-40"
79-
:disabled="status === 'connecting'"
80-
@click="connect"
81-
>
82-
{{ status === "connected" ? "Reconnect OneKey" : "Connect OneKey" }}
83-
</button>
84-
85-
<div v-if="status === 'connected'" class="mt-6 space-y-4 rounded-lg border border-gray-800 bg-gray-950 p-4">
111+
<div class="mt-5 space-y-4 rounded-lg border border-gray-800 bg-gray-950 p-4">
86112
<label class="block text-xs uppercase tracking-wide text-gray-500">
87113
Derivation path
88114
<input
@@ -106,6 +132,7 @@ async function fetchAddress() {
106132

107133
<button
108134
class="rounded border border-gray-700 px-4 py-2 text-sm font-semibold text-gray-200 hover:bg-gray-800"
135+
:disabled="status !== 'connected'"
109136
@click="fetchAddress"
110137
>
111138
Show address
@@ -125,9 +152,9 @@ async function fetchAddress() {
125152
<p v-if="error" class="mt-4 text-sm text-red-400" data-test="hw-error">
126153
{{ error }}
127154
</p>
128-
</section>
155+
</div>
129156

130-
<aside class="space-y-4">
157+
<div class="space-y-5">
131158
<div class="rounded-xl border border-gray-800 bg-gray-900 p-4">
132159
<h3 class="font-semibold text-white">Basic hardware tools</h3>
133160
<ul class="mt-3 space-y-2 text-sm text-gray-400">
@@ -148,7 +175,7 @@ async function fetchAddress() {
148175
]"
149176
cta="Upgrade for hardware signing"
150177
/>
151-
</aside>
152-
</div>
178+
</div>
179+
</section>
153180
</div>
154181
</template>

‎packages/wallet/src/views/SettingsView.vue‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -141,10 +141,13 @@ function handleSave() {
141141
<p v-else class="text-xs text-gray-500">Deriving…</p>
142142
</div>
143143

144-
<!-- Debug info -->
145-
<div class="mt-8 rounded border border-gray-800 bg-gray-900 p-4">
146-
<p class="mb-2 text-sm font-semibold text-gray-400">Debug Info</p>
147-
<div class="space-y-1 font-mono text-xs text-gray-500">
144+
<!-- Debug info hidden by default for a cleaner user-facing settings page. -->
145+
<details class="mt-8 rounded border border-gray-800 bg-gray-900 p-4">
146+
<summary class="cursor-pointer select-none text-sm font-semibold text-gray-400 hover:text-white">
147+
Show Debug Info
148+
</summary>
149+
150+
<div class="mt-4 space-y-1 border-t border-gray-800 pt-4 font-mono text-xs text-gray-500">
148151
<p>Version: 26.5.11</p>
149152
<p>Product: Drivechains Financial Hub</p>
150153
<p>Platform: Web</p>
@@ -154,6 +157,6 @@ function handleSave() {
154157
<p>Sidechains: Thunder · zSide · BitNames · BitAssets · Photon · Truthcoin · CoinShift</p>
155158
<p>BIPs: 300, 301</p>
156159
</div>
157-
</div>
160+
</details>
158161
</div>
159162
</template>

0 commit comments

Comments
 (0)