feat: add Warning Text for Bitcoin Wallet Connection Modal (#198)

src/app/components/modals/select-bitcoin-wallet-modal/components/update-bitcoin-wallet-message.tsx

@@ -0,0 +1,33 @@
+import { Link, Text, VStack } from '@chakra-ui/react';
+
+export function UpdateBitcoinWalletMessage(): React.JSX.Element {
+  return (
+    <VStack
+      alignItems={'end'}
+      p={'15px'}
+      w={'100%'}
+      border={'1px dashed'}
+      borderRadius={'md'}
+      borderColor={'orange.01'}
+    >
+      <Text color={'white'} fontSize={'12px'}>
+        Before proceeding, please make sure your Bitcoin Wallet is up to date.
+      </Text>
+      <Text color={'white'} fontSize={'12px'}>
+        If you are using Ledger, ensure both the device firmware and Bitcoin App are updated to
+        avoid errors.
+      </Text>
+      <Text color={'white'} fontSize={'12px'}>
+        Use{' '}
+        <Link
+          color={'orange.01'}
+          href="https://support.ledger.com/article/8458939792669-zd"
+          isExternal
+        >
+          Ledger Live
+        </Link>{' '}
+        to update both firmware and the app easily.
+      </Text>
+    </VStack>
+  );
+}

src/app/components/modals/select-bitcoin-wallet-modal/select-bitcoin-wallet-modal.tsx

@@ -9,6 +9,7 @@ import { BitcoinWalletType, bitcoinWallets } from '@models/wallet';
 import { modalActions } from '@store/slices/modal/modal.actions';
 
 import { SelectBitcoinWalletMenu } from './components/select-bitcoin-wallet-modal-menu';
+import { UpdateBitcoinWalletMessage } from './components/update-bitcoin-wallet-message';
 
 export function SelectBitcoinWalletModal({
   isOpen,
@@ -79,6 +80,7 @@ export function SelectBitcoinWalletModal({
             handleClick={() => handleLogin(wallet.id)}
           />
         ))}
+        <UpdateBitcoinWalletMessage />
       </VStack>
     </ModalLayout>
   );

src/styles/modal-theme.ts

@@ -5,7 +5,7 @@ const { definePartsStyle, defineMultiStyleConfig } = createMultiStyleConfigHelpe
 
 const baseStyle = definePartsStyle({
   dialogContainer: {
-    top: '19.5%',
+    top: '10.5%',
   },
   dialog: {
     padding: '15px',