feat(onboarding): add geoblock footnote (#2403)

Author: pwltr

src/screens/Onboarding/Slideshow.tsx

@@ -23,16 +23,17 @@ import Animated, {
 } from 'react-native-reanimated';
 import Carousel, { ICarouselInstance } from 'react-native-reanimated-carousel';
 
+import { IThemeColors } from '../../styles/themes';
+import { View as ThemedView } from '../../styles/components';
+import { BodyM, BodyMB, Display, Footnote } from '../../styles/text';
 import SafeAreaInset from '../../components/SafeAreaInset';
 import Dot from '../../components/SliderDots';
 import Button from '../../components/buttons/Button';
 import ButtonTertiary from '../../components/buttons/ButtonTertiary';
-import { useAppDispatch } from '../../hooks/redux';
+import { useAppDispatch, useAppSelector } from '../../hooks/redux';
 import type { OnboardingStackScreenProps } from '../../navigation/types';
 import { updateUser } from '../../store/slices/user';
-import { View as ThemedView } from '../../styles/components';
-import { BodyM, BodyMB, Display } from '../../styles/text';
-import { IThemeColors } from '../../styles/themes';
+import { isGeoBlockedSelector } from '../../store/reselect/user';
 
 type Slide = {
 	color: keyof IThemeColors;
@@ -68,6 +69,7 @@ const Slide = ({
 }: SlideProps): ReactElement => {
 	const { t } = useTranslation('onboarding');
 	const dimensions = useWindowDimensions();
+	const isGeoBlocked = useAppSelector(isGeoBlockedSelector);
 
 	// because we can't properly scala image inside the <Swiper let's calculate with by hand
 	const imageStyles = useMemo(
@@ -93,14 +95,20 @@ const Slide = ({
 				parent={Display}
 				components={{ accent: <Display color={color} /> }}
 			/>
-			<Trans
-				style={styles.text}
-				t={t}
-				i18nKey={`slide${index}_text`}
-				parent={BodyM}
-				color="secondary"
-				components={{ accent: <BodyMB color="primary" /> }}
-			/>
+
+			<View style={styles.text}>
+				<Trans
+					t={t}
+					i18nKey={`slide${index}_text`}
+					parent={BodyM}
+					color="secondary"
+					components={{ accent: <BodyMB color="primary" /> }}
+				/>
+
+				{index === 1 && isGeoBlocked && (
+					<Footnote style={styles.note}>{t('slide1_note')}</Footnote>
+				)}
+			</View>
 
 			{isLast ? (
 				<View style={styles.buttonsContainer}>
@@ -276,7 +284,10 @@ const styles = StyleSheet.create({
 	},
 	text: {
 		marginTop: 4,
-		minHeight: 90,
+		minHeight: 110,
+	},
+	note: {
+		marginTop: 6,
 	},
 	buttonsContainer: {
 		flexDirection: 'row',

src/screens/Onboarding/Welcome.tsx

@@ -8,6 +8,7 @@ import { Display, BodyM } from '../../styles/text';
 import SafeAreaInset from '../../components/SafeAreaInset';
 import Button from '../../components/buttons/Button';
 import DetectSwipe from '../../components/DetectSwipe';
+import { setGeoBlock } from '../../store/utils/user';
 import type { OnboardingStackScreenProps } from '../../navigation/types';
 
 const backgroundSrc = require('../../assets/illustrations/figures.png');
@@ -19,6 +20,7 @@ const OnboardingWelcomeScreen = ({
 	const { t } = useTranslation('onboarding');
 
 	const onGetStarted = (): void => {
+		setGeoBlock();
 		navigation.navigate('Slideshow');
 	};
 

src/store/utils/user.ts

@@ -3,7 +3,7 @@ import { updateUser } from '../slices/user';
 import { isGeoBlocked } from '../../utils/blocktank';
 
 export const setGeoBlock = async (): Promise<boolean> => {
-	const response = await isGeoBlocked();
-	dispatch(updateUser({ isGeoBlocked: response }));
-	return response;
+	const isBlocked = await isGeoBlocked();
+	dispatch(updateUser({ isGeoBlocked: isBlocked }));
+	return isBlocked;
 };

src/styles/text.ts

@@ -148,3 +148,11 @@ export const Caption13Up = styled.Text<TextProps>(({ theme, color }) => ({
 	color: theme.colors[color ?? 'primary'],
 	letterSpacing: Platform.OS === 'ios' ? 0.8 : undefined,
 }));
+
+export const Footnote = styled.Text<TextProps>(({ theme, color }) => ({
+	...theme.fonts.medium,
+	fontSize: '12px',
+	lineHeight: '16px',
+	color: theme.colors[color ?? 'white32'],
+	letterSpacing: Platform.OS === 'ios' ? 0.4 : undefined,
+}));

src/utils/blocktank/index.ts

@@ -350,7 +350,7 @@ export const isGeoBlocked = async (fromStorage = false): Promise<boolean> => {
 	try {
 		let geoBlocked: boolean | undefined;
 		if (fromStorage) {
-			geoBlocked = getUserStore()?.isGeoBlocked;
+			geoBlocked = getUserStore().isGeoBlocked;
 			if (geoBlocked !== undefined) {
 				return geoBlocked;
 			}

src/utils/i18n/locales/en/lightning.json

@@ -21,10 +21,10 @@
 			"string": "You can use your Bitkit savings or send bitcoin from a different wallet."
 		},
 		"text_blocked": {
-			"string": "At this time, Bitkit cannot provide automatic Lightning connections to residents of the United States and Canada."
+			"string": "Bitkit does not currently provide Lightning services in your country, but you can still connect to other nodes directly."
 		},
 		"text_blocked_cjit": {
-			"string": "Bitkit does not currently provide Lightning services to the USA or Canada, but you can still connect to other nodes directly."
+			"string": "Bitkit does not currently provide Lightning services in your country, but you can still connect to other nodes directly."
 		},
 		"button1": {
 			"string": "Transfer from Savings"

src/utils/i18n/locales/en/onboarding.json

@@ -41,6 +41,9 @@
   "slide1_text": {
     "string": "Spend bitcoin faster than ever. Enjoy instant and cheap payments with friends, family, and merchants."
   },
+  "slide1_note": {
+    "string": "*Bitkit does not currently provide Lightning services in your country, but you can still connect to other nodes."
+  },
   "slide2_header": {
     "string": "Bitcoiners,\n<accent>borderless</accent>"
   },