Ref: show Archax banner for UK location

Author: cmgustavo

src/Root.tsx

@@ -29,6 +29,7 @@ import {DeviceEmitterEvents} from './constants/device-emitter-events';
 import {baseNavigatorOptions} from './constants/NavigationOptions';
 import {LOCK_AUTHORIZED_TIME} from './constants/Lock';
 import BiometricModal from './components/modal/biometric/BiometricModal';
+import ArchaxBanner from './components/archax/archax-banner';
 import {AppEffects, AppActions} from './store/app';
 import {BitPayDarkTheme, BitPayLightTheme} from './themes/bitpay';
 import {LogActions} from './store/log';
@@ -285,6 +286,7 @@ export default () => {
     ({WALLET}) => WALLET.accountEvmCreationMigrationComplete,
   );
   const notificationsState = useAppSelector(selectSettingsNotificationState);
+  const showArchaxBanner = useAppSelector(({APP}) => APP.showArchaxBanner);
 
   const blurScreenList: string[] = [
     OnboardingScreens.IMPORT,
@@ -564,6 +566,7 @@ export default () => {
       <ThemeProvider theme={theme}>
         <GestureHandlerRootView style={{flex: 1}}>
           <BottomSheetModalProvider>
+            {showArchaxBanner && <ArchaxBanner />}
             <NavigationContainer
               ref={navigationRef}
               theme={theme}

src/components/amount/Amount.tsx

@@ -25,6 +25,7 @@ import CurrencySymbol from '../icons/currency-symbol/CurrencySymbol';
 import {useLogger} from '../../utils/hooks/useLogger';
 import {getBuyCryptoFiatLimits} from '../../store/buy-crypto/buy-crypto.effects';
 import KeyEvent from 'react-native-keyevent';
+import ArchaxFooter from '../archax/archax-footer';
 
 const AmountContainer = styled.SafeAreaView`
   flex: 1;
@@ -150,6 +151,7 @@ const Amount: React.FC<AmountProps> = ({
   const defaultAltCurrency = useAppSelector(({APP}) => APP.defaultAltCurrency);
   const allRates = useAppSelector(({RATE}) => RATE.rates);
   const curValRef = useRef('');
+  const showArchaxBanner = useAppSelector(({APP}) => APP.showArchaxBanner);
 
   const fiatCurrency = useMemo(() => {
     if (fiatCurrencyAbbreviation) {
@@ -519,6 +521,7 @@ const Amount: React.FC<AmountProps> = ({
               {t('Continue')}
             </Button>
           </ButtonContainer>
+          {showArchaxBanner && <ArchaxFooter />}
         </ActionContainer>
       </ViewContainer>
     </AmountContainer>

src/components/amount/AmountModal.tsx

@@ -10,6 +10,8 @@ import SheetModal from '../modal/base/sheet/SheetModal';
 import Amount, {AmountProps, LimitsOpts} from './Amount';
 import {Platform} from 'react-native';
 import {TouchableOpacity} from 'react-native-gesture-handler';
+import {useAppSelector} from '../../utils/hooks';
+import ArchaxBanner from '../archax/archax-banner';
 
 const ModalHeaderText = styled(BaseText)`
   font-size: 18px;
@@ -39,7 +41,7 @@ const ModalHeaderRight = styled(BaseText)`
 const StyledAmountModalContainer = styled.SafeAreaView<{platform: string}>`
   background-color: ${({theme}) => (theme.dark ? Black : White)};
   flex: 1;
-  margin-bottom: ${({platform}) => platform === 'ios' ? 25 : 10}px;
+  margin-bottom: ${({platform}) => (platform === 'ios' ? 25 : 10)}px;
 `;
 
 type AmountModalProps = AmountProps & {
@@ -52,7 +54,9 @@ type AmountModalProps = AmountProps & {
 
 const AmountModalContainerHOC = gestureHandlerRootHOC(props => {
   return (
-    <StyledAmountModalContainer platform={Platform.OS}>{props.children}</StyledAmountModalContainer>
+    <StyledAmountModalContainer platform={Platform.OS}>
+      {props.children}
+    </StyledAmountModalContainer>
   );
 });
 
@@ -66,6 +70,7 @@ const AmountModal: React.VFC<AmountModalProps> = props => {
     ...amountProps
   } = props;
   const theme = useTheme();
+  const showArchaxBanner = useAppSelector(({APP}) => APP.showArchaxBanner);
 
   return (
     <SheetModal
@@ -74,6 +79,7 @@ const AmountModal: React.VFC<AmountModalProps> = props => {
       onBackdropPress={onClose}
       fullscreen>
       <AmountModalContainerHOC>
+        {showArchaxBanner && <ArchaxBanner removeMarginTop={true} />}
         <ModalHeader>
           <CloseModalButton
             onPress={() => {

src/components/archax/archax-banner.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import {useSafeAreaInsets} from 'react-native-safe-area-context';
+import {SubText, UnderlineLink} from '../styled/Text';
+import {openUrlWithInAppBrowser} from '../../store/app/app.effects';
+import {useAppDispatch} from '../../utils/hooks';
+import {ArchaxBannerContainer} from '../../components/styled/Containers';
+
+const ArchaxBanner: React.FC<{removeMarginTop?: boolean}> = ({
+  removeMarginTop,
+}) => {
+  const dispatch = useAppDispatch();
+  const insets = useSafeAreaInsets();
+  return (
+    <ArchaxBannerContainer removeMarginTop={removeMarginTop} inset={insets}>
+      <SubText>
+        Don't invest unless you're prepared to lose all the money you invest.
+        This is a high-risk investment and you should not expect to be protected
+        if something goes worng.
+        <UnderlineLink
+          onPress={() => {
+            dispatch(openUrlWithInAppBrowser('http://localhost:8080')); // TODO: Update URL
+          }}>
+          Take 2 mins to learn more.
+        </UnderlineLink>
+      </SubText>
+    </ArchaxBannerContainer>
+  );
+};
+
+export default ArchaxBanner;

src/components/archax/archax-footer.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import styled from 'styled-components/native';
+import {LinkBlue} from '../../styles/colors';
+import {SubText} from '../styled/Text';
+
+const Container = styled.View`
+  border: 1px solid ${LinkBlue};
+  border-radius: 30px;
+  padding: 15px;
+  margin: 15px 15px 20px 15px;
+`;
+
+const ArchaxFooter = () => {
+  return (
+    <Container>
+      <SubText style={{textAlign: 'center'}}>
+        This Financial Promotion has been approved by Archax LTD on November 28,
+        2024.
+      </SubText>
+    </Container>
+  );
+};
+
+export default ArchaxFooter;

src/components/styled/Containers.tsx

@@ -16,6 +16,7 @@ import {
 import {BaseText} from './Text';
 import {TouchableOpacity} from '@components/base/TouchableOpacity';
 export {ActiveOpacity} from '@components/base/TouchableOpacity';
+import {useSafeAreaInsets} from 'react-native-safe-area-context';
 
 export const {height: HEIGHT, width: WIDTH} = Dimensions.get('window');
 export const isNotMobile = HEIGHT / WIDTH < 1.6;
@@ -115,7 +116,9 @@ export const RowContainer = styled(TouchableOpacity)<RowContainerProps>`
     isLast || noBorder ? 0 : 1}px;
 `;
 
-export const RowContainerWithoutBorders = styled(TouchableOpacity)<RowContainerProps>`
+export const RowContainerWithoutBorders = styled(
+  TouchableOpacity,
+)<RowContainerProps>`
   flex-direction: row;
   align-items: center;
   padding: 10px 0px;
@@ -532,4 +535,15 @@ export const CloseButtonContainer = styled(TouchableOpacity)`
   display: flex;
   justify-content: center;
   align-items: center;
-`;
+`;
+
+export const ArchaxBannerContainer = styled.View<{
+  removeMarginTop?: boolean;
+  inset: any;
+}>`
+  background: ${({theme}) => (theme.dark ? '#a25718' : '#ffedc9')};
+  overflow: hidden;
+  padding: 20px;
+  margin-top: ${({removeMarginTop}) =>
+    !removeMarginTop ? ({inset}) => inset.top : 0}px;
+`;

src/components/virtual-keyboard/VirtualKeyboard.tsx

@@ -5,15 +5,14 @@ import {BaseText} from '../styled/Text';
 import DeleteIcon from '../icons/delete/Delete';
 import {PixelRatio} from 'react-native';
 import VirtualKeyboardButtonAnimation from './VirtualKeyboardButtonAnimation';
+import useAppSelector from '../../utils/hooks/useAppSelector';
 const PIXEL_DENSITY_LIMIT = 3;
-export const VIRTUAL_KEYBOARD_BUTTON_SIZE =
-  PixelRatio.get() < PIXEL_DENSITY_LIMIT ? 65 : 85;
 
 interface SymbolContainerProps {
   showLetters?: boolean;
 }
 
-const KeyboardContainer = styled.View<{isSmallScreen?: boolean;}>`
+const KeyboardContainer = styled.View<{isSmallScreen?: boolean}>`
   margin: ${({isSmallScreen}) => (isSmallScreen ? 7 : 10)}px 0;
 `;
 
@@ -79,16 +78,19 @@ const Cell: React.FC<CellProps> = ({
   backgroundColor,
   darkModeOnly,
 }) => {
+  const showArchaxBanner = useAppSelector(({APP}) => APP.showArchaxBanner);
+  const _isSmallScreen = showArchaxBanner
+    ? true
+    : PixelRatio.get() < PIXEL_DENSITY_LIMIT;
   const accessibilityLabel = `${value}-button`;
   return (
     <CellContainer accessibilityLabel={accessibilityLabel}>
       <VirtualKeyboardButtonAnimation
+        isSmallScreen={_isSmallScreen}
         onPress={() => onCellPress?.(value)}
         backgroundColor={backgroundColor}>
         <>
-          <CellValue
-            darkModeOnly={darkModeOnly}
-            isSmallScreen={PixelRatio.get() < PIXEL_DENSITY_LIMIT}>
+          <CellValue darkModeOnly={darkModeOnly} isSmallScreen={_isSmallScreen}>
             {value}
           </CellValue>
           {letters ? <CellLetter>{letters}</CellLetter> : null}
@@ -142,8 +144,12 @@ const VirtualKeyboard: React.FC<VirtualKeyboardProps> = ({
       ? 'rgba(255, 255, 255, 0.2)'
       : 'rgba(0, 0, 0, 0.1)';
   const bgColor = darkModeOnly || theme.dark ? White : '#4A4A4A';
+  const showArchaxBanner = useAppSelector(({APP}) => APP.showArchaxBanner);
+  const _isSmallScreen = showArchaxBanner
+    ? true
+    : PixelRatio.get() < PIXEL_DENSITY_LIMIT;
   return (
-    <KeyboardContainer isSmallScreen={PixelRatio.get() < PIXEL_DENSITY_LIMIT}>
+    <KeyboardContainer isSmallScreen={_isSmallScreen}>
       <Row
         numArray={[
           {

src/components/virtual-keyboard/VirtualKeyboardButtonAnimation.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {View} from 'react-native';
+import {PixelRatio, View} from 'react-native';
 import {
   LongPressGestureHandler,
   TapGestureHandler,
@@ -13,21 +13,23 @@ import Animated, {
   useSharedValue,
   withTiming,
 } from 'react-native-reanimated';
-import {VIRTUAL_KEYBOARD_BUTTON_SIZE} from './VirtualKeyboard';
 
 interface RippleProps {
   onPress: () => void;
   backgroundColor?: string;
   onLongPress?: () => void;
+  isSmallScreen?: boolean;
   children: React.ReactNode;
 }
 
 const VirtualKeyboardButtonAnimation: React.FC<RippleProps> = ({
   onPress,
   backgroundColor,
   onLongPress,
+  isSmallScreen,
   children,
 }) => {
+  const virtualKeyboardButtonSize = isSmallScreen ? 65 : 85;
   onLongPress = onLongPress || onPress;
   const centerX = useSharedValue(0);
   const centerY = useSharedValue(0);
@@ -38,8 +40,8 @@ const VirtualKeyboardButtonAnimation: React.FC<RippleProps> = ({
   const tapGestureEvent =
     useAnimatedGestureHandler<TapGestureHandlerGestureEvent>({
       onStart: tapEvent => {
-        centerX.value = VIRTUAL_KEYBOARD_BUTTON_SIZE / 2;
-        centerY.value = VIRTUAL_KEYBOARD_BUTTON_SIZE / 2;
+        centerX.value = virtualKeyboardButtonSize / 2;
+        centerY.value = virtualKeyboardButtonSize / 2;
 
         rippleOpacity.value = 1;
         scale.value = 0;
@@ -56,7 +58,7 @@ const VirtualKeyboardButtonAnimation: React.FC<RippleProps> = ({
     });
 
   const rStyle = useAnimatedStyle(() => {
-    const circleRadius = Math.sqrt(VIRTUAL_KEYBOARD_BUTTON_SIZE ** 3.2 * 2);
+    const circleRadius = Math.sqrt(virtualKeyboardButtonSize ** 3.2 * 2);
 
     const translateX = centerX.value - circleRadius;
     const translateY = centerY.value - circleRadius;
@@ -94,8 +96,8 @@ const VirtualKeyboardButtonAnimation: React.FC<RippleProps> = ({
             style={[
               {
                 overflow: 'hidden',
-                height: VIRTUAL_KEYBOARD_BUTTON_SIZE,
-                width: VIRTUAL_KEYBOARD_BUTTON_SIZE,
+                height: virtualKeyboardButtonSize,
+                width: virtualKeyboardButtonSize,
                 borderRadius: 50,
                 alignItems: 'center',
                 justifyContent: 'center',