diff --git a/packages/connect-wallet-modal/src/components/Ledger/LedgerConnectionScreen.tsx b/packages/connect-wallet-modal/src/components/Ledger/LedgerConnectionScreen.tsx index 24a7f5cc..864e2967 100644 --- 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 = ({ const { isLoadingLedgerLibs } = useLedgerContext(); const message = isLoadingLedgerLibs ? ( - + + +
Loading connector...
+
) : ( '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 index ddd88800..d2c18787 100644 --- 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; +`;