Skip to content

Commit 61a9322

Browse files
committed
frontend/receive: fix receive screen for software keystore
In the receive screen of accounts using the software keystore, the address and QR code have been show upfront without needing to click a verify button. In watch-only, we don't know for sure which kind of keystore is behind the account until it is connected. So we always let the user click the verify button and react accordingly if it is a software keystore. The label on the button says 'Verify on BitBox02' - we leave that even for the software keystore as changing it requires re-translation of that i18n key in all languages. The software keystore is not used in production, so we can live with this for developers for the time being. The BitBox01 has its own receive-bb01.tsx component independent of this change.
1 parent 2d7726c commit 61a9322

File tree

2 files changed

+30
-23
lines changed

2 files changed

+30
-23
lines changed

frontends/web/src/routes/account/receive/index.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,6 @@ export const Receive = (props: TProps) => {
4444
default: // software keystore
4545
return (
4646
<ReceiveBB02
47-
deviceID={deviceID}
4847
{...props} />
4948
);
5049
}

frontends/web/src/routes/account/receive/receive.tsx

Lines changed: 30 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,6 @@ import style from './receive.module.css';
3535
type TProps = {
3636
accounts: accountApi.IAccount[];
3737
code: string;
38-
deviceID?: string;
3938
};
4039

4140
type AddressDialog = { addressType: number } | undefined;
@@ -58,10 +57,9 @@ const getIndexOfMatchingScriptType = (
5857
export const Receive = ({
5958
accounts,
6059
code,
61-
deviceID,
6260
}: TProps) => {
6361
const { t } = useTranslation();
64-
const [verifying, setVerifying] = useState<boolean>(false);
62+
const [verifying, setVerifying] = useState<false | 'secure' | 'insecure'>(false);
6563
const [activeIndex, setActiveIndex] = useState<number>(0);
6664
// index into `availableScriptTypes`, or 0 if none are available.
6765
const [addressType, setAddressType] = useState<number>(0);
@@ -110,18 +108,26 @@ export const Receive = ({
110108
};
111109

112110
const verifyAddress = async (addressesIndex: number) => {
113-
if (receiveAddresses) {
114-
if (code === undefined) {
115-
return;
116-
}
111+
if (!receiveAddresses || code === undefined) {
112+
return;
113+
}
114+
const connectResult = await accountApi.connectKeystore(code);
115+
if (!connectResult.success) {
116+
return;
117+
}
117118

118-
const connectResult = await accountApi.connectKeystore(code);
119-
if (!connectResult.success) {
120-
return;
121-
}
119+
const hasSecureOutput = await accountApi.hasSecureOutput(code)();
120+
if (!hasSecureOutput.hasSecureOutput) {
121+
setVerifying('insecure');
122+
// For the software keystore, the dialog is dismissed manually.
123+
return;
124+
}
122125

123-
setVerifying(true);
126+
// For devices with a display, the dialog is dismissed by tapping the device.
127+
setVerifying('secure');
128+
try {
124129
await accountApi.verifyAddress(code, receiveAddresses[addressesIndex].addresses[activeIndex].addressID);
130+
} finally {
125131
setVerifying(false);
126132
}
127133
};
@@ -140,10 +146,6 @@ export const Receive = ({
140146
}
141147
};
142148

143-
// TODO change label on verify button, make it work w/ software keystore
144-
const hasDevice = true || deviceID !== undefined;
145-
const enableCopy = hasDevice ? false : true;
146-
147149
let uriPrefix = '';
148150
if (account) {
149151
if (account.coinCode === 'btc' || account.coinCode === 'tbtc') {
@@ -156,7 +158,7 @@ export const Receive = ({
156158
let address = '';
157159
if (currentAddresses) {
158160
address = currentAddresses[activeIndex].address;
159-
if (hasDevice && !verifying) {
161+
if (!verifying) {
160162
address = address.substring(0, 8) + '...';
161163
}
162164
}
@@ -171,7 +173,7 @@ export const Receive = ({
171173
{ currentAddresses && (
172174
<div style={{ position: 'relative' }}>
173175
<div className={style.qrCodeContainer}>
174-
<QRCode data={enableCopy ? uriPrefix + address : undefined} />
176+
<QRCode data={undefined} />
175177
</div>
176178
<div className={style.labels}>
177179
{ currentAddresses.length > 1 && (
@@ -200,7 +202,7 @@ export const Receive = ({
200202
</button>
201203
)}
202204
</div>
203-
<CopyableInput disabled={!enableCopy} value={address} flexibleHeight />
205+
<CopyableInput disabled={true} value={address} flexibleHeight />
204206
{ hasManyScriptTypes && (
205207
<button
206208
className={style.changeType}
@@ -239,8 +241,7 @@ export const Receive = ({
239241
</form>
240242
<div className="buttons">
241243
<Button
242-
disabled={verifying}
243-
hidden={!hasDevice}
244+
disabled={verifying !== false}
244245
onClick={() => verifyAddress(currentAddressIndex)}
245246
primary>
246247
{t('receive.verifyBitBox02')}
@@ -257,7 +258,14 @@ export const Receive = ({
257258
<Dialog
258259
open={!!(account && verifying)}
259260
title={t('receive.verifyBitBox02')}
260-
disableEscape={true}
261+
// disable escape for secure outputs like the BitBox02, where the dialog is
262+
// dimissed by tapping the device
263+
disableEscape={verifying === 'secure'}
264+
onClose={() => {
265+
if (verifying === 'insecure') {
266+
setVerifying(false);
267+
}
268+
}}
261269
medium centered>
262270
{account && <>
263271
<div className="text-center">

0 commit comments

Comments
 (0)