Merge branch 'frontend-unlock-software-keystore'

Author: thisconnect

CHANGELOG.md

@@ -7,6 +7,7 @@
 - Replace sidebar with bottom navigation bar for mobile devices
 - Introduce full screen selector for mobile in place of dropdown
 - Fix wrong estimated confirmation time for ERC20 tokens.
+- Enable unlock test wallet in testnet
 
 # v4.47.2
 - Linux: fix compatiblity with some versions of Mesa that are incompatible with the bundled wayland libraries

frontends/web/src/components/sidebar/sidebar.tsx

@@ -221,7 +221,7 @@ const Sidebar = ({
                 <Device />
               </div>
               <span className={style.sidebarLabel}>
-                Software keystore
+                {t('testWallet.connect.title')}
               </span>
             </SkipForTesting>
           </div>
@@ -233,7 +233,7 @@ const Sidebar = ({
                 <Eject alt={t('sidebar.leave')} />
               </div>
               <span className={style.sidebarLabel}>
-                Eject software keystore
+                {t('testWallet.disconnect.title')}
               </span>
             </Button>
           </div>

frontends/web/src/locales/en/app.json

@@ -1829,6 +1829,21 @@
       "title": "Success"
     }
   },
+  "testWallet": {
+    "connect": {
+      "description": "A software test wallet to test without a device in Testnet.",
+      "title": "Test wallet"
+    },
+    "disconnect": {
+      "description": "Removes the software test wallet.",
+      "title": "Disconnect test wallet"
+    },
+    "prompt": {
+      "button": "Unlock",
+      "passwordLabel": "Test Password",
+      "title": "Unlock test wallet"
+    }
+  },
   "transaction": {
     "confirmation": "Confirmations",
     "details": {

frontends/web/src/routes/device/components/skipfortesting.tsx

@@ -1,6 +1,6 @@
 /**
  * Copyright 2018 Shift Devices AG
- * Copyright 2024 Shift Crypto AG
+ * Copyright 2024-2025 Shift Crypto AG
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -16,12 +16,12 @@
  */
 
 import React, { ReactNode, useContext, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { AppContext } from '@/contexts/AppContext';
 import { registerTest } from '@/api/keystores';
 import { Button } from '@/components/forms';
 import { PasswordSingleInput } from '@/components/password';
 import { Dialog, DialogButtons } from '@/components/dialog/dialog';
-import { debug, runningInIOS } from '@/utils/env';
 
 type TProps = {
   children?: ReactNode;
@@ -32,38 +32,40 @@ export const SkipForTesting = ({
   children,
   className,
 }: TProps) => {
+  const { t } = useTranslation();
   const { isTesting } = useContext(AppContext);
   const [dialog, setDialog] = useState(false);
-  const show = (debug || runningInIOS()) && isTesting;
   const [testPIN, setTestPIN] = useState('');
   const registerTestingDevice = async (e: React.SyntheticEvent) => {
     e.preventDefault();
     await registerTest(testPIN);
     setDialog(false);
   };
 
-  if (!show) {
+  if (!isTesting) {
     return null;
   }
-  const title = 'Unlock software keystore';
   return (
     <>
       <Button
         className={className}
         onClick={() => setDialog(true)}
         primary
       >
-        {children ? children : title}
+        {children ? children : t('testWallet.prompt.title')}
       </Button>
-      <Dialog open={dialog} title={title} onClose={() => setDialog(false)}>
+      <Dialog
+        open={dialog}
+        title={t('testWallet.prompt.title')}
+        onClose={() => setDialog(false)}>
         <form onSubmit={registerTestingDevice}>
           <PasswordSingleInput
             autoFocus
-            label="Test Password"
-            onValidPassword={(pw) => pw ? setTestPIN(pw) : setTestPIN('')}/>
+            label={t('testWallet.prompt.passwordLabel')}
+            onValidPassword={(pw) => setTestPIN(pw ? pw : '')}/>
           <DialogButtons>
             <Button primary type="submit">
-              Unlock
+              {t('testWallet.prompt.button')}
             </Button>
           </DialogButtons>
         </form>

frontends/web/src/routes/settings/advanced-settings.tsx

@@ -25,6 +25,7 @@ import { EnableCustomFeesToggleSetting } from './components/advanced-settings/en
 import { EnableCoinControlSetting } from './components/advanced-settings/enable-coin-control-setting';
 import { ConnectFullNodeSetting } from './components/advanced-settings/connect-full-node-setting';
 import { EnableTorProxySetting } from './components/advanced-settings/enable-tor-proxy-setting';
+import { UnlockSoftwareKeystore } from './components/advanced-settings/unlock-software-keystore';
 import { RestartInTestnetSetting } from './components/advanced-settings/restart-in-testnet-setting';
 import { ExportLogSetting } from './components/advanced-settings/export-log-setting';
 import { getConfig } from '@/utils/config';
@@ -69,6 +70,8 @@ export const AdvancedSettings = ({ devices, hasAccounts }: TPagePropsWithSetting
     setConfig(fetchedConfig);
   }, [fetchedConfig]);
 
+  const deviceIDs = Object.keys(devices);
+
   return (
     <GuideWrapper>
       <GuidedContent>
@@ -96,6 +99,7 @@ export const AdvancedSettings = ({ devices, hasAccounts }: TPagePropsWithSetting
                 <EnableAuthSetting backendConfig={backendConfig} onChangeConfig={setConfig} />
                 <EnableTorProxySetting proxyConfig={proxyConfig} onChangeConfig={setConfig} />
                 <RestartInTestnetSetting backendConfig={backendConfig} onChangeConfig={setConfig} />
+                <UnlockSoftwareKeystore deviceIDs={deviceIDs}/>
                 <ConnectFullNodeSetting />
                 <ExportLogSetting />
               </WithSettingsTabs>

frontends/web/src/routes/settings/bb02-settings.module.css

@@ -7,11 +7,11 @@
 }
 
 .skeletonWrapper {
-    margin-bottom: var(--size-default);
+    margin-bottom: var(--space-half);
 }
 
 
-@media (max-width: 768px) { 
+@media (max-width: 768px) {
     .skeletonWrapper {
          margin-bottom: 2px;
     }

frontends/web/src/routes/settings/components/advanced-settings/unlock-software-keystore.module.css

@@ -0,0 +1,35 @@
+.settingsItemButton {
+  background-color: transparent !important;
+  border: none;
+  display: flex;
+  margin-bottom: var(--space-half);
+  height: auto;
+  padding: 0;
+  width: 100%;
+}
+
+@media (max-width: 768px) {
+  .settingsItemButton {
+    margin-bottom: 5px;
+  }
+}
+
+.settingsItemButton > * {
+  margin-bottom: 0;
+}
+
+.chevronRight {
+  bottom: 0;
+  margin: auto;
+  position: absolute;
+  right: var(--space-quarter);
+  top: 3px;
+}
+
+.ejectIconRight {
+  bottom: 0;
+  margin: auto;
+  position: absolute;
+  right: var(--space-half);
+  top: 3px;
+}

frontends/web/src/routes/settings/components/advanced-settings/unlock-software-keystore.tsx

@@ -0,0 +1,75 @@
+/**
+ * Copyright 2025 Shift Crypto AG
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useTranslation } from 'react-i18next';
+import { useDefault } from '@/hooks/default';
+import { useLoad } from '@/hooks/api';
+import { useKeystores } from '@/hooks/backend';
+import { getTesting } from '@/api/backend';
+import { deregisterTest } from '@/api/keystores';
+import { SettingsItem } from '@/routes/settings/components/settingsItem/settingsItem';
+import { SkipForTesting } from '@/routes/device/components/skipfortesting';
+import { ChevronRightDark, Eject } from '@/components/icon';
+import styles from './unlock-software-keystore.module.css';
+
+type TProps = {
+  deviceIDs: string[];
+};
+
+export const UnlockSoftwareKeystore = ({
+  deviceIDs,
+}: TProps) => {
+  const { t } = useTranslation();
+  const isTesting = useDefault(useLoad(getTesting), false);
+  const keystores = useKeystores();
+
+  if (!isTesting || deviceIDs.length) {
+    return null;
+  }
+  if (keystores?.some(({ type }) => type === 'software')) {
+    return (
+      <SettingsItem
+        settingName={t('testWallet.disconnect.title')}
+        secondaryText={t('testWallet.disconnect.description')}
+        onClick={() => deregisterTest()}
+        extraComponent={
+          <Eject
+            className={styles.ejectIconRight}
+            width={18}
+            height={18}
+            alt={t('sidebar.leave')}
+          />
+        }
+      />
+    );
+  }
+  return (
+    <SkipForTesting className={styles.settingsItemButton}>
+      <SettingsItem
+        settingName={t('testWallet.connect.title')}
+        secondaryText={t('testWallet.connect.description')}
+        hideChevron
+        extraComponent={
+          <ChevronRightDark
+            className={styles.chevronRight}
+            width={24}
+            height={24}
+          />
+        }
+      />
+    </SkipForTesting>
+  );
+};

frontends/web/src/routes/settings/components/settingsItem/settingsItem.module.css

@@ -14,7 +14,7 @@
     font-weight: 400;
     padding: 16px 24px;
     color: var(--color-dark);
-    margin-bottom: var(--size-default);
+    margin-bottom: var(--space-half);
 }
 
 .chevronRight {

frontends/web/src/routes/settings/components/settingsItem/settingsItem.tsx

@@ -24,6 +24,7 @@ type TProps = {
   collapseOnSmall?: boolean;
   displayedValue?: string | ReactNode;
   extraComponent?: ReactNode;
+  hideChevron?: boolean;
   hideDisplayedValueOnSmall?: boolean;
   onClick?: () => void;
   secondaryText?: string;
@@ -37,6 +38,7 @@ export const SettingsItem = ({
   collapseOnSmall = false,
   displayedValue = '',
   extraComponent,
+  hideChevron = false,
   hideDisplayedValueOnSmall = false,
   onClick,
   secondaryText,
@@ -62,8 +64,8 @@ export const SettingsItem = ({
     </div>
   );
 
-  const content =
-    (<>
+  const content = (
+    <>
       <span className={styles.content} title={title}>
         <div className={styles.primaryText}>{settingName}</div>
         { secondaryText ? (
@@ -72,7 +74,7 @@ export const SettingsItem = ({
       </span>
       {rightContent}
     </>
-    );
+  );
 
   // render as div when it's notButton
   // otherwise, render as button
@@ -92,11 +94,13 @@ export const SettingsItem = ({
           ${collapseOnSmall ? styles.collapse : ''}`}
           onClick={onClick}>
           {content}
-          <ChevronRightDark
-            className={styles.chevronRight}
-            width={24}
-            height={24}
-          />
+          {!hideChevron && (
+            <ChevronRightDark
+              className={styles.chevronRight}
+              width={24}
+              height={24}
+            />
+          )}
         </button>
       )}
     </>