text: ledger loading screen

lidofinance · Nov 28, 2024 · 4a389fe · 4a389fe
1 parent 70ab6f3
commit 4a389fe
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
diff --git a/packages/connect-wallet-modal/src/components/Ledger/LedgerConnectionScreen.tsx b/packages/connect-wallet-modal/src/components/Ledger/LedgerConnectionScreen.tsx
@@ -3,6 +3,7 @@ import { Loader } from '@lidofinance/lido-ui';
 import { useLedgerContext } from './hooks';
 import { LedgerModalScreen } from './LedgerModalScreen';
 import { LedgerImageDefaultAdaptive } from './icons/LedgerImageDefaultAdaptive';
+import { LedgerScreenLoadingContainer } from './styles';
 
 type LedgerConnectionScreenProps = {
   showConnectButton?: boolean;
@@ -16,7 +17,10 @@ export const LedgerConnectionScreen: FC<LedgerConnectionScreenProps> = ({
   const { isLoadingLedgerLibs } = useLedgerContext();
 
   const message = isLoadingLedgerLibs ? (
-    <Loader size="medium" color="secondary" />
+    <LedgerScreenLoadingContainer>
+      <Loader size="medium" color="secondary" />
+      <div>Loading connector...</div>
+    </LedgerScreenLoadingContainer>
   ) : (
     'Please connect your Ledger and launch Ethereum app on your device'
   );

diff --git a/packages/connect-wallet-modal/src/components/Ledger/styles.tsx b/packages/connect-wallet-modal/src/components/Ledger/styles.tsx
@@ -13,3 +13,10 @@ export const LedgerScreenContainerStyled = styled.div`
   margin: 0 auto;
   padding: 12px 12px 40px;
 `;
+
+export const LedgerScreenLoadingContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+`;