From 4f4ff65222683f0bd408ab47e8793c1f414422db Mon Sep 17 00:00:00 2001
From: Swiss Bitcoin Pay <hello@swiss-bitcoin-pay.ch>
Date: Sat, 27 Sep 2025 15:54:25 +0200
Subject: [PATCH] Added hardware wallet links

---
 src/assets/translations/en.json               |   5 +-
 src/components/Button/Button.tsx              |  37 ++++--
 src/components/Button/styled.ts               |  26 ++--
 .../components/Empty/Empty.tsx                | 123 +++++++++++-------
 .../components/Empty/styled.ts                |  26 +++-
 .../BitcoinSettings/BitcoinSettings.tsx       |  15 ++-
 6 files changed, 149 insertions(+), 83 deletions(-)

diff --git a/src/assets/translations/en.json b/src/assets/translations/en.json
index d1662aeb..88f26bd9 100644
--- a/src/assets/translations/en.json
+++ b/src/assets/translations/en.json
@@ -81,7 +81,8 @@
       "instruction": "Enter BitBox02 password to unlock it"
     },
     "empty": {
-      "title": "Select your hardware wallet"
+      "title": "Select your hardware wallet",
+      "buyHardware": "Buy a {{hardwareName}}"
     },
     "pairing": {
       "title": "Verify pairing code",
@@ -640,4 +641,4 @@
     "instructions2": "Never make a copy in a cloud, on your phone, or computer. Any device connected to the internet is vulnerable!",
     "instructions3": "Never share your {{backup}} to anyone. Any person that access your {{backup}} will be able to steal all of your funds."
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index 23169237..2bf14f2c 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -11,6 +11,7 @@ type RootButtonProps = StyledComponentComponentProps<typeof S.Button>;
 
 type ButtonProps = {
   title?: string;
+  subTitle?: string;
   icon?: IconProp;
   type?: "primary" | "success" | "error" | "bitcoin";
   isLoading?: boolean;
@@ -29,6 +30,7 @@ type ButtonProps = {
 
 export const Button = ({
   title,
+  subTitle,
   type,
   mode = "normal",
   size = "medium",
@@ -131,17 +133,30 @@ export const Button = ({
             color={secondaryColor}
           />
         )}
-        {title && (
-          <S.ButtonText
-            numberOfLines={1}
-            weight={700}
-            buttonSize={size}
-            color={!isLoading ? secondaryColor : "transparent"}
-            hasIcon={!!icon}
-          >
-            {title}
-          </S.ButtonText>
-        )}
+        <S.ButtonTitleContainer buttonSize={size} hasIcon={!!icon}>
+          {title && (
+            <S.ButtonTitle
+              numberOfLines={1}
+              weight={700}
+              color={!isLoading ? secondaryColor : "transparent"}
+              buttonSize={size}
+              hasIcon={!!icon}
+            >
+              {title}
+            </S.ButtonTitle>
+          )}
+          {subTitle && (
+            <S.ButtonSubTitle
+              numberOfLines={1}
+              h6
+              weight={600}
+              color={!isLoading ? secondaryColor : "transparent"}
+            >
+              {subTitle}
+            </S.ButtonSubTitle>
+          )}
+        </S.ButtonTitleContainer>
+
         {isLoading && <S.ButtonLoader size={loaderSize} />}
       </S.ButtonContent>
     </S.Button>
diff --git a/src/components/Button/styled.ts b/src/components/Button/styled.ts
index 3d04fc43..d8f1d001 100644
--- a/src/components/Button/styled.ts
+++ b/src/components/Button/styled.ts
@@ -121,14 +121,10 @@ type ButtonTextProps = {
 
 const TEXT_MARGIN = 6;
 
-export const ButtonText = styled(Text).attrs(
-  ({ buttonSize }: ButtonTextProps) => {
-    return {
-      h4: buttonSize === "medium" || buttonSize === "large",
-      h5: buttonSize === "small"
-    };
-  }
-)<ButtonTextProps>`
+export const ButtonTitleContainer = styled(View)<ButtonTextProps>`
+  flex: 1;
+  align-items: center;
+
   ${({ hasIcon, buttonSize }) => {
     const iconPlusMarginSize = hasIcon
       ? getIconSize(buttonSize) + TEXT_MARGIN
@@ -142,9 +138,21 @@ export const ButtonText = styled(Text).attrs(
       }
     `;
   }}
+`;
 
+export const ButtonTitle = styled(Text).attrs(
+  ({ buttonSize }: ButtonTextProps) => {
+    return {
+      h4: buttonSize === "medium" || buttonSize === "large",
+      h5: buttonSize === "small"
+    };
+  }
+)<ButtonTextProps>`
   position: relative;
-  text-align: center;
+`;
+
+export const ButtonSubTitle = styled(Text)`
+  margin-top: -5px;
 `;
 
 export const ButtonLoader = styled(Loader)`
diff --git a/src/components/ConnectWalletModal/components/Empty/Empty.tsx b/src/components/ConnectWalletModal/components/Empty/Empty.tsx
index 05425dba..c41d1596 100644
--- a/src/components/ConnectWalletModal/components/Empty/Empty.tsx
+++ b/src/components/ConnectWalletModal/components/Empty/Empty.tsx
@@ -1,6 +1,6 @@
 import { useContext, useMemo } from "react";
 import { useTranslation } from "react-i18next";
-import { ComponentStack } from "@components";
+import { ComponentStack, Url } from "@components";
 import * as ConnectStyled from "../../styled";
 import * as S from "./styled";
 import {
@@ -10,6 +10,7 @@ import {
   SBPHardwareWalletContext
 } from "@config/SBPHardwareWallet";
 import { useIsScreenSizeMin } from "@hooks";
+import { hardwareNames } from "@utils";
 
 export const Empty = () => {
   const isLarge = useIsScreenSizeMin("large");
@@ -27,61 +28,83 @@ export const Empty = () => {
       <ConnectStyled.Title>{t("title")}</ConnectStyled.Title>
       <S.SelectHardwareContainer
         direction={isLarge ? "horizontal" : "vertical"}
+        gapSize={26}
       >
-        <S.HardwareContainer
-          disabled={!IS_LEDGER_SUPPORTED}
-          onPress={() => {
-            setHardwareType("ledger");
-          }}
-        >
-          <S.HardwareImage
-            source={require("@assets/images/ledger.png")}
-            style={{ aspectRatio: "3/1", transform: [{ scale: imageRatio }] }}
+        <S.HardwareContainerWrapper>
+          <S.HardwareContainer
+            disabled={!IS_LEDGER_SUPPORTED}
+            onPress={() => {
+              setHardwareType("ledger");
+            }}
+          >
+            <S.HardwareImage
+              source={require("@assets/images/ledger.png")}
+              style={{ aspectRatio: "3/1", transform: [{ scale: imageRatio }] }}
+            />
+            {!IS_LEDGER_SUPPORTED && (
+              <S.NotSupportedText>
+                {tRoot("common.notSupported")}
+              </S.NotSupportedText>
+            )}
+          </S.HardwareContainer>
+          <Url
+            as={S.BuyHardwareText}
+            title={`${t("buyHardware", { hardwareName: hardwareNames["ledger"] })} 🇫🇷`}
+            href="https://shop.ledger.com/?r=1fbe532b2688&tracker=sbp-signup"
           />
-          {!IS_LEDGER_SUPPORTED && (
-            <S.NotSupportedText>
-              {tRoot("common.notSupported")}
-            </S.NotSupportedText>
-          )}
-        </S.HardwareContainer>
-        <S.HardwareContainer
-          disabled={!IS_BITBOX_SUPPORTED}
-          onPress={() => {
-            setHardwareType("bitbox02");
-          }}
-        >
-          <S.HardwareImage
-            source={require("@assets/images/bitbox.png")}
-            style={{
-              aspectRatio: "337/83",
-              transform: [{ scale: imageRatio * 0.8 }]
+        </S.HardwareContainerWrapper>
+        <S.HardwareContainerWrapper>
+          <S.HardwareContainer
+            disabled={!IS_BITBOX_SUPPORTED}
+            onPress={() => {
+              setHardwareType("bitbox02");
             }}
+          >
+            <S.HardwareImage
+              source={require("@assets/images/bitbox.png")}
+              style={{
+                aspectRatio: "337/83",
+                transform: [{ scale: imageRatio * 0.8 }]
+              }}
+            />
+            {!IS_BITBOX_SUPPORTED && (
+              <S.NotSupportedText>
+                {tRoot("common.notSupported")}
+              </S.NotSupportedText>
+            )}
+          </S.HardwareContainer>
+          <Url
+            as={S.BuyHardwareText}
+            title={`${t("buyHardware", { hardwareName: hardwareNames["bitbox02"] })} 🇨🇭`}
+            href="https://shop.bitbox.swiss/?ref=KerwHOKfOK"
           />
-          {!IS_BITBOX_SUPPORTED && (
-            <S.NotSupportedText>
-              {tRoot("common.notSupported")}
-            </S.NotSupportedText>
-          )}
-        </S.HardwareContainer>
-        <S.HardwareContainer
-          disabled={!IS_TREZOR_SUPPORTED}
-          onPress={() => {
-            setHardwareType("trezor");
-          }}
-        >
-          <S.HardwareImage
-            source={require("@assets/images/trezor.png")}
-            style={{
-              aspectRatio: "192/49",
-              transform: [{ scale: imageRatio * 0.82 }]
+        </S.HardwareContainerWrapper>
+        <S.HardwareContainerWrapper>
+          <S.HardwareContainer
+            disabled={!IS_TREZOR_SUPPORTED}
+            onPress={() => {
+              setHardwareType("trezor");
             }}
+          >
+            <S.HardwareImage
+              source={require("@assets/images/trezor.png")}
+              style={{
+                aspectRatio: "192/49",
+                transform: [{ scale: imageRatio * 0.82 }]
+              }}
+            />
+            {!IS_TREZOR_SUPPORTED && (
+              <S.NotSupportedText>
+                {tRoot("common.notSupported")}
+              </S.NotSupportedText>
+            )}
+          </S.HardwareContainer>
+          <Url
+            as={S.BuyHardwareText}
+            title={`${t("buyHardware", { hardwareName: hardwareNames["trezor"] })} 🇨🇿`}
+            href="https://affil.trezor.io/aff_c?offer_id=235&aff_id=36313&source=sbp-signup"
           />
-          {!IS_TREZOR_SUPPORTED && (
-            <S.NotSupportedText>
-              {tRoot("common.notSupported")}
-            </S.NotSupportedText>
-          )}
-        </S.HardwareContainer>
+        </S.HardwareContainerWrapper>
       </S.SelectHardwareContainer>
     </ComponentStack>
   );
diff --git a/src/components/ConnectWalletModal/components/Empty/styled.ts b/src/components/ConnectWalletModal/components/Empty/styled.ts
index 4caeac53..e144f3a6 100644
--- a/src/components/ConnectWalletModal/components/Empty/styled.ts
+++ b/src/components/ConnectWalletModal/components/Empty/styled.ts
@@ -1,4 +1,11 @@
-import { ComponentStack, Image, Pressable, Text } from "@components";
+import {
+  ComponentStack,
+  Image,
+  Link,
+  Pressable,
+  Text,
+  View
+} from "@components";
 import styled from "styled-components";
 
 export const SelectHardwareContainer = styled(ComponentStack)`
@@ -6,16 +13,27 @@ export const SelectHardwareContainer = styled(ComponentStack)`
   align-items: center;
 `;
 
-export const HardwareContainer = styled(Pressable)`
-  height: 80px;
-  flex-shrink: 1;
+export const HardwareContainerWrapper = styled(View)`
   width: 200px;
   max-width: 100%;
+  flex-shrink: 1;
+  align-items: center;
+`;
+
+export const BuyHardwareText = styled(Text).attrs(() => ({
+  h6: true,
+  weight: 600
+}))``;
+
+export const HardwareContainer = styled(Pressable)`
+  height: 80px;
+  width: 100%;
   border: 2px solid ${({ theme }) => theme.colors.white};
   border-radius: 16px;
   align-items: center;
   justify-content: center;
   opacity: ${({ disabled }) => (!disabled ? 1 : 0.3)};
+  margin-bottom: 3px;
 `;
 
 export const HardwareImage = styled(Image)`
diff --git a/src/components/PayoutConfig/components/BitcoinSettings/BitcoinSettings.tsx b/src/components/PayoutConfig/components/BitcoinSettings/BitcoinSettings.tsx
index 2c0acf91..2a60dd9a 100644
--- a/src/components/PayoutConfig/components/BitcoinSettings/BitcoinSettings.tsx
+++ b/src/components/PayoutConfig/components/BitcoinSettings/BitcoinSettings.tsx
@@ -59,7 +59,7 @@ import { useToast } from "react-native-toast-notifications";
 import { useIsScreenSizeMin } from "@hooks";
 import { WalletConfig } from "@components/ConnectWalletModal/ConnectWalletModal";
 
-const { isIos } = platform;
+const { isNative } = platform;
 
 export type SignatureData = {
   zPub: string;
@@ -598,18 +598,19 @@ export const BitcoinSettings = ({
             direction={isLarge ? "horizontal" : "vertical"}
           >
             <Button
-              title={t("createWallet")}
+              title={tRoot("connectWalletModal.title")}
+              subTitle={t("recommended")}
               type="bitcoin"
+              icon={isNative ? faBluetooth : faUsb}
+              onPress={onPressConnectWallet}
+            />
+            <Button
+              title={t("createWallet")}
               icon={faAdd}
               onPress={() => {
                 setIsCreateWalletModalOpen(true);
               }}
             />
-            <Button
-              title={tRoot("connectWalletModal.title")}
-              icon={isIos ? faBluetooth : faUsb}
-              onPress={onPressConnectWallet}
-            />
           </ComponentStack>
           {!walletType && walletTypeInfoComponent}
           {!walletType && btcAddressTypes.xpub === true && (