Ref: show Archax banner for UK location

Author: cmgustavo

src/Root.tsx

@@ -8,7 +8,7 @@ import {createNativeStackNavigator} from '@react-navigation/native-stack';
 import {BottomSheetModalProvider} from '@gorhom/bottom-sheet';
 import debounce from 'lodash.debounce';
 import Braze from '@braze/react-native-sdk';
-import React, {useEffect, useMemo, useState} from 'react';
+import React, {useEffect, useMemo, useState, useCallback} from 'react';
 import {
   Appearance,
   AppState,
@@ -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';
@@ -70,9 +71,11 @@ import AboutGroup, {
 } from './navigation/tabs/settings/about/AboutGroup';
 import AuthGroup, {AuthGroupParamList} from './navigation/auth/AuthGroup';
 import BuyCryptoGroup, {
+  BuyCryptoScreens,
   BuyCryptoGroupParamList,
 } from './navigation/services/buy-crypto/BuyCryptoGroup';
 import SellCryptoGroup, {
+  SellCryptoScreens,
   SellCryptoGroupParamList,
 } from './navigation/services/sell-crypto/SellCryptoGroup';
 import SwapCryptoGroup, {
@@ -285,6 +288,9 @@ export default () => {
     ({WALLET}) => WALLET.accountEvmCreationMigrationComplete,
   );
   const notificationsState = useAppSelector(selectSettingsNotificationState);
+  const showArchaxBanner = useAppSelector(({APP}) => APP.showArchaxBanner);
+  const [archaxBannerVisible, setArchaxBannerVisible] =
+    useState(showArchaxBanner);
 
   const blurScreenList: string[] = [
     OnboardingScreens.IMPORT,
@@ -303,6 +309,38 @@ export default () => {
     WalletScreens.WALLET_DETAILS,
   ];
 
+  const _showArchaxBanner = useCallback(() => {
+    const archaxScreenList: string[] = [
+      TabsScreens.HOME,
+      WalletScreens.PRICE_CHARTS,
+      WalletScreens.KEY_OVERVIEW,
+      WalletScreens.WALLET_DETAILS,
+      BuyCryptoScreens.ROOT,
+      BuyCryptoScreens.OFFERS,
+      SellCryptoScreens.ROOT,
+    ];
+    if (showArchaxBanner) {
+      if (navigationRef.isReady()) {
+        const currentNavState = navigationRef.getState()?.routes?.slice(-1)[0];
+        const currentScreen: string | undefined =
+          currentNavState?.name ?? navigationRef.getCurrentRoute()?.name;
+        const currentTab: number | undefined = currentNavState?.state?.index;
+        if (
+          (currentScreen && archaxScreenList.includes(currentScreen)) ||
+          (currentScreen === 'Tabs' && (!currentTab || currentTab === 0))
+        ) {
+          setArchaxBannerVisible(true);
+        } else {
+          setArchaxBannerVisible(false);
+        }
+      }
+    }
+  }, [showArchaxBanner]);
+
+  useEffect(() => {
+    setArchaxBannerVisible(showArchaxBanner);
+  }, [showArchaxBanner]);
+
   const debouncedOnStateChange = useMemo(
     () =>
       debounce((state: NavigationState | undefined) => {
@@ -335,6 +373,8 @@ export default () => {
               dispatch(Analytics.screen(stackName, {screen: screenName || ''}));
             }
           }
+          // Show Archax Banner if enabled
+          _showArchaxBanner();
         }
       }, 300),
     [dispatch],
@@ -564,6 +604,7 @@ export default () => {
       <ThemeProvider theme={theme}>
         <GestureHandlerRootView style={{flex: 1}}>
           <BottomSheetModalProvider>
+            {archaxBannerVisible && <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,35 @@
+import React, {useMemo} from 'react';
+import {useSafeAreaInsets} from 'react-native-safe-area-context';
+import styled from 'styled-components/native';
+import {Black} from '../../styles/colors';
+import {H7, Link} from '../styled/Text';
+import {ActiveOpacity} from '../styled/Containers';
+import {TouchableOpacity} from 'react-native';
+
+const ArchaxBanner: React.FC<{removeMarginTop?: boolean}> = ({
+  removeMarginTop,
+}) => {
+  const insets = useSafeAreaInsets();
+  const Container = useMemo(
+    () => styled.View`
+      background-color: #ffedc9;
+      padding: 20px;
+      margin-top: ${!removeMarginTop ? insets.top : 0}px;
+    `,
+    [insets.top, removeMarginTop],
+  );
+  return (
+    <Container>
+      <H7 style={{color: Black}}>
+        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.
+        <TouchableOpacity activeOpacity={ActiveOpacity} onPress={() => {}}>
+          <Link>Take 2 mins to learn more.</Link>
+        </TouchableOpacity>
+      </H7>
+    </Container>
+  );
+};
+
+export default ArchaxBanner;

src/components/archax/archax-footer.tsx

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

src/navigation/services/buy-crypto/screens/BuyCryptoOffers.tsx

@@ -121,7 +121,11 @@ import RampTerms from '../components/terms/RampTerms';
 import SardineTerms from '../components/terms/SardineTerms';
 import SimplexTerms from '../components/terms/SimplexTerms';
 import TransakTerms from '../components/terms/TransakTerms';
-import {TermsContainer, TermsText} from '../styled/BuyCryptoTerms';
+import {
+  TermsContainer,
+  TermsContainerOffer,
+  TermsText,
+} from '../styled/BuyCryptoTerms';
 import {BuyCryptoConfig} from '../../../../store/external-services/external-services.types';
 import {Analytics} from '../../../../store/analytics/analytics.effects';
 import {AppActions} from '../../../../store/app';
@@ -147,6 +151,7 @@ import {
   getTransakSelectedPaymentMethodData,
   transakEnv,
 } from '../utils/transak-utils';
+import ArchaxFooter from '../../../../components/archax/archax-footer';
 
 export type BuyCryptoOffersScreenParams = {
   amount: number;
@@ -201,6 +206,11 @@ const SummaryRow = styled.View`
   padding: 0px 14px;
 `;
 
+const SummaryNote = styled.View`
+  margin-top: 5px;
+  padding: 0 14px;
+`;
+
 const SummaryItemContainer = styled.View`
   display: flex;
   flex-direction: column;
@@ -448,6 +458,7 @@ const BuyCryptoOffers: React.FC = () => {
   const logger = useLogger();
   const navigation = useNavigation();
   const dispatch = useAppDispatch();
+  const showArchaxBanner = useAppSelector(({APP}) => APP.showArchaxBanner);
   const createdOn = useAppSelector(({WALLET}: RootState) => WALLET.createdOn);
   const user = useAppSelector(
     ({APP, BITPAY_ID}) => BITPAY_ID.user[APP.network],
@@ -2433,6 +2444,11 @@ const BuyCryptoOffers: React.FC = () => {
             </Button>
           </SummaryCtaContainer>
         </SummaryRow>
+        {showArchaxBanner && (
+          <SummaryNote>
+            <SummaryTitle>Additional third-party fees may apply</SummaryTitle>
+          </SummaryNote>
+        )}
 
         {Object.values(offers)
           .sort(
@@ -2476,7 +2492,7 @@ const BuyCryptoOffers: React.FC = () => {
                           <BestOfferTagContainer>
                             <BestOfferTag>
                               <BestOfferTagText>
-                                {t('Best Offer')}
+                                {t('Our Best Offer')}
                               </BestOfferTagText>
                             </BestOfferTag>
                           </BestOfferTagContainer>
@@ -2606,18 +2622,30 @@ const BuyCryptoOffers: React.FC = () => {
                     ) : null}
                   </>
                 ) : null}
+                {showArchaxBanner && (
+                  <TermsContainerOffer>
+                    <TermsText>
+                      {t(
+                        'The final crypto amount you receive when the transaction is complete may differ because it is based on the exchange rates of the providers.',
+                      )}
+                    </TermsText>
+                  </TermsContainerOffer>
+                )}
               </BuyCryptoExpandibleCard>
             ) : null;
           })}
 
-        <TermsContainer>
-          <TermsText>
-            {t(
-              'The final crypto amount you receive when the transaction is complete may differ because it is based on the exchange rates of the providers.',
-            )}
-          </TermsText>
-          <TermsText>{t('Additional third-party fees may apply.')}</TermsText>
-        </TermsContainer>
+        {!showArchaxBanner && (
+          <TermsContainer>
+            <TermsText>
+              {t(
+                'The final crypto amount you receive when the transaction is complete may differ because it is based on the exchange rates of the providers.',
+              )}
+            </TermsText>
+            <TermsText>{t('Additional third-party fees may apply.')}</TermsText>
+          </TermsContainer>
+        )}
+        {showArchaxBanner && <ArchaxFooter />}
       </ScrollView>
     </BuyCryptoOffersContainer>
   );

src/navigation/services/buy-crypto/screens/BuyCryptoRoot.tsx

@@ -91,6 +91,7 @@ import {
 } from '../../../../components/styled/Containers';
 import {H5, H7, ListItemSubText} from '../../../../components/styled/Text';
 import Blockie from '../../../../components/blockie/Blockie';
+import ArchaxFooter from '../../../../components/archax/archax-footer';
 
 export type BuyCryptoRootScreenParams =
   | {
@@ -129,6 +130,7 @@ const BuyCryptoRoot = ({
   const dispatch = useAppDispatch();
   const theme = useTheme();
   const logger = useLogger();
+  const showArchaxBanner = useAppSelector(({APP}) => APP.showArchaxBanner);
   const allKeys = useAppSelector(({WALLET}: RootState) => WALLET.keys);
   const tokenDataByAddress = useAppSelector(
     ({WALLET}: RootState) => WALLET.tokenDataByAddress,
@@ -1035,6 +1037,7 @@ const BuyCryptoRoot = ({
           </Button>
         </CtaContainer>
       </ScrollView>
+      {showArchaxBanner && <ArchaxFooter />}
 
       <AmountModal
         isVisible={amountModalVisible}

src/navigation/services/buy-crypto/styled/BuyCryptoTerms.tsx

@@ -8,6 +8,10 @@ export const TermsContainer = styled.View`
   margin-bottom: 40px;
 `;
 
+export const TermsContainerOffer = styled.View`
+  margin-top: 20px;
+`;
+
 export const ExchangeTermsContainer = styled.View`
   padding: 0 0 10px 0;
 `;