From d355b63b01d186eb98da55e33d938cbd2cfbb476 Mon Sep 17 00:00:00 2001
From: Roza Eisenberg <45665959+rozanagy@users.noreply.github.com>
Date: Tue, 22 Oct 2024 13:51:02 +0200
Subject: [PATCH] feat: add Warning Text for Bitcoin Wallet Connection Modal
 (#198)

---
 .../update-bitcoin-wallet-message.tsx         | 33 +++++++++++++++++++
 .../select-bitcoin-wallet-modal.tsx           |  2 ++
 src/styles/modal-theme.ts                     |  2 +-
 3 files changed, 36 insertions(+), 1 deletion(-)
 create mode 100644 src/app/components/modals/select-bitcoin-wallet-modal/components/update-bitcoin-wallet-message.tsx

diff --git a/src/app/components/modals/select-bitcoin-wallet-modal/components/update-bitcoin-wallet-message.tsx b/src/app/components/modals/select-bitcoin-wallet-modal/components/update-bitcoin-wallet-message.tsx
new file mode 100644
index 00000000..debe56df
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/app/components/modals/select-bitcoin-wallet-modal/select-bitcoin-wallet-modal.tsx b/src/app/components/modals/select-bitcoin-wallet-modal/select-bitcoin-wallet-modal.tsx
index 48991ca2..6e7899db 100644
--- a/src/app/components/modals/select-bitcoin-wallet-modal/select-bitcoin-wallet-modal.tsx
+++ b/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>
   );
diff --git a/src/styles/modal-theme.ts b/src/styles/modal-theme.ts
index 04be30e7..97e04200 100644
--- a/src/styles/modal-theme.ts
+++ b/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',