Change instruction text for transport selection

vacuumlabs · Jun 8, 2021 · 3398c5a · 3398c5a
1 parent 531e7c4
commit 3398c5a
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 8 deletions.
diff --git a/app/frontend/actions/loading.ts b/app/frontend/actions/loading.ts
@@ -1,7 +1,7 @@
 import {Store, State} from '../state'
 
 export default ({setState}: Store) => {
-  const loadingAction = (state: State, message: string) => {
+  const loadingAction = (state: State, message: string | string[]) => {
     return setState({
       loading: true,
       loadingMessage: message,

diff --git a/app/frontend/actions/wallet.ts b/app/frontend/actions/wallet.ts
@@ -84,11 +84,17 @@ export default (store: Store) => {
       shouldExportPubKeyBulk,
       ledgerTransportType,
     }
+
     try {
-      loadingAction(
-        state,
-        'Please allow access to your device. Select your device in dropdown and then click Connect.'
-      )
+      if (
+        ledgerTransportType === LedgerTransportType.WEB_HID ||
+        ledgerTransportType === LedgerTransportType.WEB_USB
+      ) {
+        loadingAction(state, [
+          'Loading wallet data...',
+          'If a prompt appears, click on the Ledger device, then click "Connect."',
+        ])
+      }
       const cryptoProvider = await ShelleyCryptoProviderFactory.getCryptoProvider(
         cryptoProviderType,
         {

diff --git a/app/frontend/components/common/loadingOverlay.tsx b/app/frontend/components/common/loadingOverlay.tsx
@@ -2,16 +2,24 @@ import {h} from 'preact'
 import {useSelector} from '../../helpers/connect'
 
 const LoadingOverlay = () => {
+  const toArray = (message: string | string[]) =>
+    message ? (Array.isArray(message) ? message : [message]) : ['']
+
   const {loading, loadingMessage} = useSelector((state) => ({
-    loadingMessage: state.loadingMessage,
+    loadingMessage: toArray(state.loadingMessage),
     loading: state.loading,
   }))
+
   return loading ? (
     <div className="loading">
       <div className="spinner">
         <span />
       </div>
-      {loadingMessage ? <p className="loading-message">{loadingMessage}</p> : ''}
+      {loadingMessage.map((line: string, i: number) => (
+        <p className="loading-message" key={i}>
+          {line}
+        </p>
+      ))}
     </div>
   ) : null
 }

diff --git a/app/frontend/state.ts b/app/frontend/state.ts
@@ -19,7 +19,7 @@ import {
 export interface State {
   // general
   loading: boolean
-  loadingMessage: string
+  loadingMessage: string | string[]
   alert: any // TODO
   sendSentry: {
     event?: any