Skip to content

Commit 9825cb4

Browse files
SwissBitcoinPaySwissBitcoinPay
authored
Merge pull request #343 from SwissBitcoinPay/add-hardware-links
Added hardware wallet links
2 parents 2286958 + 4f4ff65 commit 9825cb4

6 files changed

Lines changed: 149 additions & 83 deletions

File tree

‎src/assets/translations/en.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,8 @@
8181
"instruction": "Enter BitBox02 password to unlock it"
8282
},
8383
"empty": {
84-
"title": "Select your hardware wallet"
84+
"title": "Select your hardware wallet",
85+
"buyHardware": "Buy a {{hardwareName}}"
8586
},
8687
"pairing": {
8788
"title": "Verify pairing code",
@@ -640,4 +641,4 @@
640641
"instructions2": "Never make a copy in a cloud, on your phone, or computer. Any device connected to the internet is vulnerable!",
641642
"instructions3": "Never share your {{backup}} to anyone. Any person that access your {{backup}} will be able to steal all of your funds."
642643
}
643-
}
644+
}

‎src/components/Button/Button.tsx‎

Lines changed: 26 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ type RootButtonProps = StyledComponentComponentProps<typeof S.Button>;
1111

1212
type ButtonProps = {
1313
title?: string;
14+
subTitle?: string;
1415
icon?: IconProp;
1516
type?: "primary" | "success" | "error" | "bitcoin";
1617
isLoading?: boolean;
@@ -29,6 +30,7 @@ type ButtonProps = {
2930

3031
export const Button = ({
3132
title,
33+
subTitle,
3234
type,
3335
mode = "normal",
3436
size = "medium",
@@ -131,17 +133,30 @@ export const Button = ({
131133
color={secondaryColor}
132134
/>
133135
)}
134-
{title && (
135-
<S.ButtonText
136-
numberOfLines={1}
137-
weight={700}
138-
buttonSize={size}
139-
color={!isLoading ? secondaryColor : "transparent"}
140-
hasIcon={!!icon}
141-
>
142-
{title}
143-
</S.ButtonText>
144-
)}
136+
<S.ButtonTitleContainer buttonSize={size} hasIcon={!!icon}>
137+
{title && (
138+
<S.ButtonTitle
139+
numberOfLines={1}
140+
weight={700}
141+
color={!isLoading ? secondaryColor : "transparent"}
142+
buttonSize={size}
143+
hasIcon={!!icon}
144+
>
145+
{title}
146+
</S.ButtonTitle>
147+
)}
148+
{subTitle && (
149+
<S.ButtonSubTitle
150+
numberOfLines={1}
151+
h6
152+
weight={600}
153+
color={!isLoading ? secondaryColor : "transparent"}
154+
>
155+
{subTitle}
156+
</S.ButtonSubTitle>
157+
)}
158+
</S.ButtonTitleContainer>
159+
145160
{isLoading && <S.ButtonLoader size={loaderSize} />}
146161
</S.ButtonContent>
147162
</S.Button>

‎src/components/Button/styled.ts‎

Lines changed: 17 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -121,14 +121,10 @@ type ButtonTextProps = {
121121

122122
const TEXT_MARGIN = 6;
123123

124-
export const ButtonText = styled(Text).attrs(
125-
({ buttonSize }: ButtonTextProps) => {
126-
return {
127-
h4: buttonSize === "medium" || buttonSize === "large",
128-
h5: buttonSize === "small"
129-
};
130-
}
131-
)<ButtonTextProps>`
124+
export const ButtonTitleContainer = styled(View)<ButtonTextProps>`
125+
flex: 1;
126+
align-items: center;
127+
132128
${({ hasIcon, buttonSize }) => {
133129
const iconPlusMarginSize = hasIcon
134130
? getIconSize(buttonSize) + TEXT_MARGIN
@@ -142,9 +138,21 @@ export const ButtonText = styled(Text).attrs(
142138
}
143139
`;
144140
}}
141+
`;
145142

143+
export const ButtonTitle = styled(Text).attrs(
144+
({ buttonSize }: ButtonTextProps) => {
145+
return {
146+
h4: buttonSize === "medium" || buttonSize === "large",
147+
h5: buttonSize === "small"
148+
};
149+
}
150+
)<ButtonTextProps>`
146151
position: relative;
147-
text-align: center;
152+
`;
153+
154+
export const ButtonSubTitle = styled(Text)`
155+
margin-top: -5px;
148156
`;
149157

150158
export const ButtonLoader = styled(Loader)`

‎src/components/ConnectWalletModal/components/Empty/Empty.tsx‎

Lines changed: 73 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { useContext, useMemo } from "react";
22
import { useTranslation } from "react-i18next";
3-
import { ComponentStack } from "@components";
3+
import { ComponentStack, Url } from "@components";
44
import * as ConnectStyled from "../../styled";
55
import * as S from "./styled";
66
import {
@@ -10,6 +10,7 @@ import {
1010
SBPHardwareWalletContext
1111
} from "@config/SBPHardwareWallet";
1212
import { useIsScreenSizeMin } from "@hooks";
13+
import { hardwareNames } from "@utils";
1314

1415
export const Empty = () => {
1516
const isLarge = useIsScreenSizeMin("large");
@@ -27,61 +28,83 @@ export const Empty = () => {
2728
<ConnectStyled.Title>{t("title")}</ConnectStyled.Title>
2829
<S.SelectHardwareContainer
2930
direction={isLarge ? "horizontal" : "vertical"}
31+
gapSize={26}
3032
>
31-
<S.HardwareContainer
32-
disabled={!IS_LEDGER_SUPPORTED}
33-
onPress={() => {
34-
setHardwareType("ledger");
35-
}}
36-
>
37-
<S.HardwareImage
38-
source={require("@assets/images/ledger.png")}
39-
style={{ aspectRatio: "3/1", transform: [{ scale: imageRatio }] }}
33+
<S.HardwareContainerWrapper>
34+
<S.HardwareContainer
35+
disabled={!IS_LEDGER_SUPPORTED}
36+
onPress={() => {
37+
setHardwareType("ledger");
38+
}}
39+
>
40+
<S.HardwareImage
41+
source={require("@assets/images/ledger.png")}
42+
style={{ aspectRatio: "3/1", transform: [{ scale: imageRatio }] }}
43+
/>
44+
{!IS_LEDGER_SUPPORTED && (
45+
<S.NotSupportedText>
46+
{tRoot("common.notSupported")}
47+
</S.NotSupportedText>
48+
)}
49+
</S.HardwareContainer>
50+
<Url
51+
as={S.BuyHardwareText}
52+
title={`${t("buyHardware", { hardwareName: hardwareNames["ledger"] })} 🇫🇷`}
53+
href="https://shop.ledger.com/?r=1fbe532b2688&tracker=sbp-signup"
4054
/>
41-
{!IS_LEDGER_SUPPORTED && (
42-
<S.NotSupportedText>
43-
{tRoot("common.notSupported")}
44-
</S.NotSupportedText>
45-
)}
46-
</S.HardwareContainer>
47-
<S.HardwareContainer
48-
disabled={!IS_BITBOX_SUPPORTED}
49-
onPress={() => {
50-
setHardwareType("bitbox02");
51-
}}
52-
>
53-
<S.HardwareImage
54-
source={require("@assets/images/bitbox.png")}
55-
style={{
56-
aspectRatio: "337/83",
57-
transform: [{ scale: imageRatio * 0.8 }]
55+
</S.HardwareContainerWrapper>
56+
<S.HardwareContainerWrapper>
57+
<S.HardwareContainer
58+
disabled={!IS_BITBOX_SUPPORTED}
59+
onPress={() => {
60+
setHardwareType("bitbox02");
5861
}}
62+
>
63+
<S.HardwareImage
64+
source={require("@assets/images/bitbox.png")}
65+
style={{
66+
aspectRatio: "337/83",
67+
transform: [{ scale: imageRatio * 0.8 }]
68+
}}
69+
/>
70+
{!IS_BITBOX_SUPPORTED && (
71+
<S.NotSupportedText>
72+
{tRoot("common.notSupported")}
73+
</S.NotSupportedText>
74+
)}
75+
</S.HardwareContainer>
76+
<Url
77+
as={S.BuyHardwareText}
78+
title={`${t("buyHardware", { hardwareName: hardwareNames["bitbox02"] })} 🇨🇭`}
79+
href="https://shop.bitbox.swiss/?ref=KerwHOKfOK"
5980
/>
60-
{!IS_BITBOX_SUPPORTED && (
61-
<S.NotSupportedText>
62-
{tRoot("common.notSupported")}
63-
</S.NotSupportedText>
64-
)}
65-
</S.HardwareContainer>
66-
<S.HardwareContainer
67-
disabled={!IS_TREZOR_SUPPORTED}
68-
onPress={() => {
69-
setHardwareType("trezor");
70-
}}
71-
>
72-
<S.HardwareImage
73-
source={require("@assets/images/trezor.png")}
74-
style={{
75-
aspectRatio: "192/49",
76-
transform: [{ scale: imageRatio * 0.82 }]
81+
</S.HardwareContainerWrapper>
82+
<S.HardwareContainerWrapper>
83+
<S.HardwareContainer
84+
disabled={!IS_TREZOR_SUPPORTED}
85+
onPress={() => {
86+
setHardwareType("trezor");
7787
}}
88+
>
89+
<S.HardwareImage
90+
source={require("@assets/images/trezor.png")}
91+
style={{
92+
aspectRatio: "192/49",
93+
transform: [{ scale: imageRatio * 0.82 }]
94+
}}
95+
/>
96+
{!IS_TREZOR_SUPPORTED && (
97+
<S.NotSupportedText>
98+
{tRoot("common.notSupported")}
99+
</S.NotSupportedText>
100+
)}
101+
</S.HardwareContainer>
102+
<Url
103+
as={S.BuyHardwareText}
104+
title={`${t("buyHardware", { hardwareName: hardwareNames["trezor"] })} 🇨🇿`}
105+
href="https://affil.trezor.io/aff_c?offer_id=235&aff_id=36313&source=sbp-signup"
78106
/>
79-
{!IS_TREZOR_SUPPORTED && (
80-
<S.NotSupportedText>
81-
{tRoot("common.notSupported")}
82-
</S.NotSupportedText>
83-
)}
84-
</S.HardwareContainer>
107+
</S.HardwareContainerWrapper>
85108
</S.SelectHardwareContainer>
86109
</ComponentStack>
87110
);

‎src/components/ConnectWalletModal/components/Empty/styled.ts‎

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,39 @@
1-
import { ComponentStack, Image, Pressable, Text } from "@components";
1+
import {
2+
ComponentStack,
3+
Image,
4+
Link,
5+
Pressable,
6+
Text,
7+
View
8+
} from "@components";
29
import styled from "styled-components";
310

411
export const SelectHardwareContainer = styled(ComponentStack)`
512
max-width: 100%;
613
align-items: center;
714
`;
815

9-
export const HardwareContainer = styled(Pressable)`
10-
height: 80px;
11-
flex-shrink: 1;
16+
export const HardwareContainerWrapper = styled(View)`
1217
width: 200px;
1318
max-width: 100%;
19+
flex-shrink: 1;
20+
align-items: center;
21+
`;
22+
23+
export const BuyHardwareText = styled(Text).attrs(() => ({
24+
h6: true,
25+
weight: 600
26+
}))``;
27+
28+
export const HardwareContainer = styled(Pressable)`
29+
height: 80px;
30+
width: 100%;
1431
border: 2px solid ${({ theme }) => theme.colors.white};
1532
border-radius: 16px;
1633
align-items: center;
1734
justify-content: center;
1835
opacity: ${({ disabled }) => (!disabled ? 1 : 0.3)};
36+
margin-bottom: 3px;
1937
`;
2038

2139
export const HardwareImage = styled(Image)`

‎src/components/PayoutConfig/components/BitcoinSettings/BitcoinSettings.tsx‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ import { useToast } from "react-native-toast-notifications";
5959
import { useIsScreenSizeMin } from "@hooks";
6060
import { WalletConfig } from "@components/ConnectWalletModal/ConnectWalletModal";
6161

62-
const { isIos } = platform;
62+
const { isNative } = platform;
6363

6464
export type SignatureData = {
6565
zPub: string;
@@ -598,18 +598,19 @@ export const BitcoinSettings = ({
598598
direction={isLarge ? "horizontal" : "vertical"}
599599
>
600600
<Button
601-
title={t("createWallet")}
601+
title={tRoot("connectWalletModal.title")}
602+
subTitle={t("recommended")}
602603
type="bitcoin"
604+
icon={isNative ? faBluetooth : faUsb}
605+
onPress={onPressConnectWallet}
606+
/>
607+
<Button
608+
title={t("createWallet")}
603609
icon={faAdd}
604610
onPress={() => {
605611
setIsCreateWalletModalOpen(true);
606612
}}
607613
/>
608-
<Button
609-
title={tRoot("connectWalletModal.title")}
610-
icon={isIos ? faBluetooth : faUsb}
611-
onPress={onPressConnectWallet}
612-
/>
613614
</ComponentStack>
614615
{!walletType && walletTypeInfoComponent}
615616
{!walletType && btcAddressTypes.xpub === true && (

0 commit comments

Comments
 (0)