Ref: show Archax banner for UK location

Author: cmgustavo

src/Root.tsx

@@ -28,6 +28,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';
@@ -286,6 +287,7 @@ export default () => {
     ({WALLET}) => WALLET.accountEvmCreationMigrationComplete,
   );
   const notificationsState = useAppSelector(selectSettingsNotificationState);
+  const showArchaxBanner = useAppSelector(({APP}) => APP.showArchaxBanner);
 
   const blurScreenList: string[] = [
     OnboardingScreens.IMPORT,
@@ -565,7 +567,8 @@ export default () => {
       <ThemeProvider theme={theme}>
         <GestureHandlerRootView style={{flex: 1}}>
           <BottomSheetModalProvider>
-            <SafeAreaView style={{ flex: 1}} >
+            <SafeAreaView style={{flex: 1}}>
+              {showArchaxBanner && <ArchaxBanner />}
               {/* https://github.com/react-navigation/react-navigation/issues/11353#issuecomment-1548114655 */}
               <HeaderShownContext.Provider value>
                 <NavigationContainer

src/components/amount/Amount.tsx

@@ -9,7 +9,9 @@ import SwapButton, {
   ButtonText,
   SwapButtonContainer,
 } from '../../components/swap-button/SwapButton';
-import VirtualKeyboard from '../../components/virtual-keyboard/VirtualKeyboard';
+import VirtualKeyboard, {
+  PIXEL_DENSITY_LIMIT,
+} from '../../components/virtual-keyboard/VirtualKeyboard';
 import {getAvailableFiatCurrencies} from '../../navigation/services/buy-crypto/utils/buy-crypto-utils';
 import {getAvailableSellCryptoFiatCurrencies} from '../../navigation/services/sell-crypto/utils/sell-crypto-utils';
 import {ParseAmount} from '../../store/wallet/effects/amount/amount';
@@ -25,22 +27,24 @@ 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';
+import {PixelRatio, View} from 'react-native';
 
 const AmountContainer = styled.SafeAreaView`
   flex: 1;
 `;
 
-const CtaContainer = styled.View`
+const CtaContainer = styled.View<{isSmallScreen?: boolean}>`
   width: 100%;
-  margin-top: 20px;
+  margin-top: ${({isSmallScreen}) => (isSmallScreen ? 0 : '20px')};
   flex-direction: row;
   justify-content: space-between;
 `;
 
-export const AmountHeroContainer = styled.View`
+export const AmountHeroContainer = styled.View<{isSmallScreen: boolean}>`
   flex-direction: column;
   align-items: center;
-  margin-top: 20px;
+  margin-top: ${({isSmallScreen}) => (isSmallScreen ? 0 : '20px')};
   padding: 0 ${ScreenGutter};
 `;
 
@@ -95,9 +99,8 @@ const CurrencySuperScript = styled.View`
   top: 10px;
   right: -20px;
 `;
-
-const CurrencyText = styled(BaseText)`
-  font-size: 20px;
+const CurrencyText = styled(BaseText)<{bigAmount?: boolean}>`
+  font-size: ${({bigAmount}) => (bigAmount ? '12px' : '20px')};
   color: ${({theme}) => theme.colors.text};
   position: absolute;
 `;
@@ -150,6 +153,10 @@ 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 _isSmallScreen = showArchaxBanner
+    ? true
+    : PixelRatio.get() < PIXEL_DENSITY_LIMIT;
 
   const fiatCurrency = useMemo(() => {
     if (fiatCurrencyAbbreviation) {
@@ -440,16 +447,17 @@ const Amount: React.FC<AmountProps> = ({
   return (
     <AmountContainer>
       <ViewContainer>
-        <AmountHeroContainer>
+        <AmountHeroContainer isSmallScreen={_isSmallScreen}>
           <Row>
             <AmountText
               numberOfLines={1}
               ellipsizeMode={'tail'}
-              bigAmount={displayAmount?.length > 8}>
+              bigAmount={_isSmallScreen ? true : displayAmount?.length > 8}>
               {displayAmount || 0}
             </AmountText>
             <CurrencySuperScript>
-              <CurrencyText>
+              <CurrencyText
+                bigAmount={_isSmallScreen ? true : displayAmount?.length > 8}>
                 {formatCurrencyAbbreviation(currency) || 'USD'}
               </CurrencyText>
             </CurrencySuperScript>
@@ -465,14 +473,18 @@ const Amount: React.FC<AmountProps> = ({
               </AmountEquivText>
             </Row>
           ) : null}
-          <Row>{getWarnMsg}</Row>
-          <CtaContainer>
+          <View style={{position: 'absolute', top: _isSmallScreen ? 70 : 100}}>
+            {getWarnMsg}
+          </View>
+          <CtaContainer isSmallScreen={_isSmallScreen}>
             {context &&
             ['sellCrypto', 'swapCrypto'].includes(context) &&
             limitsOpts?.maxWalletAmount ? (
-              <SwapButtonContainer onPress={() => swapCryptoSendMax()}>
+              <SwapButtonContainer
+                isSmallScreen={_isSmallScreen}
+                onPress={() => swapCryptoSendMax()}>
                 <CurrencySymbol />
-                <ButtonText>MAX</ButtonText>
+                <ButtonText isSmallScreen={_isSmallScreen}>MAX</ButtonText>
               </SwapButtonContainer>
             ) : (
               <Row />
@@ -519,6 +531,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 />}
         <ModalHeader>
           <CloseModalButton
             onPress={() => {
@@ -87,7 +93,9 @@ const AmountModal: React.VFC<AmountModalProps> = props => {
               }}
             />
           </CloseModalButton>
-          {modalTitle ? <ModalHeaderText>{modalTitle}</ModalHeaderText> : null}
+          {modalTitle && !showArchaxBanner ? (
+            <ModalHeaderText>{modalTitle}</ModalHeaderText>
+          ) : null}
           {onSendMaxPressed &&
           (!props.context ||
             !['sellCrypto', 'swapCrypto'].includes(props.context)) ? (

src/components/archax/archax-banner.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import {useSafeAreaInsets} from 'react-native-safe-area-context';
+import {ArchaxBannerText, ArchaxBannerLink} 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 = () => {
+  const dispatch = useAppDispatch();
+  const insets = useSafeAreaInsets();
+  return (
+    <ArchaxBannerContainer inset={insets}>
+      <ArchaxBannerText>
+        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.
+        <ArchaxBannerLink
+          onPress={() => {
+            dispatch(openUrlWithInAppBrowser('http://localhost:8080')); // TODO: Update URL
+          }}>
+          Take 2 mins to learn more.
+        </ArchaxBannerLink>
+      </ArchaxBannerText>
+    </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/icons/currency-symbol/CurrencySymbol.tsx

@@ -2,14 +2,23 @@ import React from 'react';
 import {useTheme} from 'styled-components/native';
 import {Path, Svg, G} from 'react-native-svg';
 import {NotificationPrimary, White} from '../../../styles/colors';
+import useAppSelector from '../../../utils/hooks/useAppSelector';
+import {PixelRatio} from 'react-native';
+import {PIXEL_DENSITY_LIMIT} from '../../virtual-keyboard/VirtualKeyboard';
 
 interface CurrencySymbolProps {
   isDark: boolean;
+  isSmallScreen?: boolean;
 }
 
-const CurrencySymbolSvg: React.FC<CurrencySymbolProps> = ({isDark}) => {
+const CurrencySymbolSvg: React.FC<CurrencySymbolProps> = ({
+  isDark,
+  isSmallScreen,
+}) => {
+  const width = isSmallScreen ? 12 : 20;
+  const height = isSmallScreen ? 12 : 20;
   return (
-    <Svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+    <Svg width={width} height={height} viewBox="0 0 20 20" fill="none">
       <G opacity="0.5">
         <Path
           fill-rule="evenodd"
@@ -23,8 +32,14 @@ const CurrencySymbolSvg: React.FC<CurrencySymbolProps> = ({isDark}) => {
 };
 const CurrencySymbol = () => {
   const theme = useTheme();
+  const showArchaxBanner = useAppSelector(({APP}) => APP.showArchaxBanner);
+  const _isSmallScreen = showArchaxBanner
+    ? true
+    : PixelRatio.get() < PIXEL_DENSITY_LIMIT;
 
-  return <CurrencySymbolSvg isDark={theme.dark} />;
+  return (
+    <CurrencySymbolSvg isDark={theme.dark} isSmallScreen={_isSmallScreen} />
+  );
 };
 
 export default CurrencySymbol;

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;
@@ -533,3 +536,9 @@ export const CloseButtonContainer = styled(TouchableOpacity)`
   justify-content: center;
   align-items: center;
 `;
+
+export const ArchaxBannerContainer = styled.View<{inset: any}>`
+  background: ${({theme}) => (theme.dark ? '#a25718' : '#ffedc9')};
+  overflow: hidden;
+  padding: 20px;
+`;

src/components/styled/Text.tsx

@@ -258,3 +258,13 @@ export const CopyToClipboardText = styled(BaseText)`
   color: ${({theme: {dark}}) => (dark ? NeutralSlate : '#6F7782')};
   padding: 0 20px 0 10px;
 `;
+
+export const ArchaxBannerText = styled(H7)`
+  color: ${({theme}) => theme.colors.text};
+`;
+
+export const ArchaxBannerLink = styled(BaseText)`
+  color: ${({theme}) => theme.colors.link};
+  text-decoration: underline;
+  text-decoration-color: ${({theme}) => theme.colors.link};
+`;

src/components/swap-button/SwapButton.tsx

@@ -5,19 +5,24 @@ import {LightBlack, NotificationPrimary, White} from '../../styles/colors';
 import haptic from '../haptic-feedback/haptic';
 import SwapHorizontal from '../icons/swap-horizontal/SwapHorizontal';
 import {TouchableOpacity} from '@components/base/TouchableOpacity';
+import useAppSelector from '../../utils/hooks/useAppSelector';
+import {PixelRatio} from 'react-native';
+import {PIXEL_DENSITY_LIMIT} from '../virtual-keyboard/VirtualKeyboard';
 
-export const SwapButtonContainer = styled(TouchableOpacity)`
+export const SwapButtonContainer = styled(TouchableOpacity)<{
+  isSmallScreen?: boolean;
+}>`
   flex-direction: row;
   align-items: center;
   background-color: ${({theme: {dark}}) => (dark ? LightBlack : '#edf1fe')};
-  height: 39px;
+  height: ${({isSmallScreen}) => (isSmallScreen ? 30 : 39)}px;
   padding: 0 15px;
   border-radius: 19.09px;
 `;
 
-export const ButtonText = styled(BaseText)`
+export const ButtonText = styled(BaseText)<{isSmallScreen?: boolean}>`
   margin-left: 10px;
-  font-size: 18px;
+  font-size: ${({isSmallScreen}) => (isSmallScreen ? 12 : 18)}px;
   font-weight: 500;
   color: ${({theme: {dark}}) => (dark ? White : NotificationPrimary)};
 `;
@@ -30,6 +35,10 @@ export interface SwapButtonProps {
 const SwapButton = ({swapList, onChange}: SwapButtonProps) => {
   const initText = swapList[0];
   const [text, setText] = useState(initText);
+  const showArchaxBanner = useAppSelector(({APP}) => APP.showArchaxBanner);
+  const _isSmallScreen = showArchaxBanner
+    ? true
+    : PixelRatio.get() < PIXEL_DENSITY_LIMIT;
 
   const swapText = (val: string) => {
     if (swapList.length === 1) {
@@ -42,9 +51,11 @@ const SwapButton = ({swapList, onChange}: SwapButtonProps) => {
   };
 
   return (
-    <SwapButtonContainer onPress={() => swapText(text)}>
+    <SwapButtonContainer
+      isSmallScreen={_isSmallScreen}
+      onPress={() => swapText(text)}>
       <SwapHorizontal />
-      <ButtonText>{text}</ButtonText>
+      <ButtonText isSmallScreen={_isSmallScreen}>{text}</ButtonText>
     </SwapButtonContainer>
   );
 };