[Issue-1068]: Add banner crowdloan unlock in Crowdloan tab

src/assets/index.ts

@@ -41,4 +41,6 @@ export const Images = {
   avatarPlaceholder: require('./avatar-placeholder.png'),
   browserBanner: require('./browser-banner.png'),
   circleRobot: require('./circle-robot.png'),
+  crowdloanBanner: require('./crowdloan-banner.png'),
+  crowdloanAdvertisingBanner: require('./crowdloan-advertising-banner.png'),
 };

src/components/design-system-ui/modal/ModalBaseV2.tsx

@@ -20,6 +20,7 @@ export interface SWModalProps {
   level?: number;
   onChangeModalVisible?: () => void;
   isUseForceHidden?: boolean;
+  disabledOnPressBackDrop?: boolean;
 }
 
 export type SWModalRefProps = {
@@ -43,6 +44,7 @@ const ModalBaseV2 = React.forwardRef<SWModalRefProps, SWModalProps>(
       onChangeModalVisible,
       isUseForceHidden,
       isAllowSwipeDown = true,
+      disabledOnPressBackDrop = false,
     },
     ref,
   ) => {
@@ -146,7 +148,12 @@ const ModalBaseV2 = React.forwardRef<SWModalRefProps, SWModalProps>(
       <>
         {!isForcedHidden && isVisible && (
           <>
-            <TouchableOpacity activeOpacity={0.8} style={_styles.backDropButton} onPress={onClose} />
+            <TouchableOpacity
+              activeOpacity={0.8}
+              style={_styles.backDropButton}
+              onPress={onClose}
+              disabled={disabledOnPressBackDrop}
+            />
             <GestureDetector gesture={gesture}>
               {
                 // @ts-ignore

src/components/design-system-ui/modal/SwModal.tsx

@@ -29,6 +29,7 @@ export interface SWModalProps {
   modalBaseV2Ref?: React.RefObject<SWModalRefProps>;
   level?: number;
   isUseSafeAreaView?: boolean;
+  disabledOnPressBackDrop?: boolean;
   renderHeader?: React.ReactNode;
 }
 
@@ -83,6 +84,7 @@ const SwModal = React.forwardRef<ModalRefProps, SWModalProps>(
       level,
       isUseSafeAreaView = true,
       renderHeader,
+      disabledOnPressBackDrop,
     },
     ref,
   ) => {
@@ -136,6 +138,7 @@ const SwModal = React.forwardRef<ModalRefProps, SWModalProps>(
               setVisible={setVisible}
               height={childrenHeight}
               ref={modalBaseV2Ref}
+              disabledOnPressBackDrop={disabledOnPressBackDrop}
               isUseForceHidden={Platform.OS === 'android'}
               onChangeModalVisible={onChangeModalVisible}
               isAllowSwipeDown={isAllowSwipeDown}

src/hooks/campaign/useGetBannerByScreen.ts

@@ -0,0 +1,14 @@
+import { useMemo } from 'react';
+
+import { RootState } from 'stores/index';
+import { useSelector } from 'react-redux';
+
+const useGetBannerByScreen = (screen: string) => {
+  const { banners } = useSelector((state: RootState) => state.campaign);
+
+  return useMemo(() => {
+    return banners.filter(item => item.data.position.includes(screen));
+  }, [banners, screen]);
+};
+
+export default useGetBannerByScreen;

src/hooks/screen/Home/Crypto/useBuyToken.ts

@@ -11,11 +11,10 @@ import { AccountType } from 'types/ui-types';
 import { TokenItemType } from 'components/Modal/common/TokenSelector';
 import { ModalRef } from 'types/modalRef';
 import { InAppBrowser } from 'react-native-inappbrowser-reborn';
-import { ColorMap } from 'styles/color';
 import { Linking, Platform } from 'react-native';
 import { ServiceItem, baseServiceItems } from 'screens/Home/Crypto/ServiceModal';
 import { BuyServiceInfo, CreateBuyOrderFunction, SupportService } from 'types/buy';
-import { createBanxaOrder, createCoinbaseOrder, createTransakOrder } from 'utils/buy';
+import { BrowserOptions, createBanxaOrder, createCoinbaseOrder, createTransakOrder } from 'utils/buy';
 import { isEthereumAddress } from '@polkadot/util-crypto';
 import { isAccountAll } from 'utils/accountAll';
 import useAppLock from 'hooks/useAppLock';
@@ -201,7 +200,7 @@ export default function useBuyToken(currentSymbol?: string) {
   }, []);
 
   const onBuyToken = useCallback(
-    async (currentUrl?: string, animated = true) => {
+    async (currentUrl?: string) => {
       if (!selectedBuyAccount || !selectedBuyToken || !selectedService) {
         console.warn(
           'no: selectedBuyAccount || selectedBuyToken || selectedService',
@@ -243,39 +242,7 @@ export default function useBuyToken(currentSymbol?: string) {
         if (await InAppBrowser.isAvailable()) {
           // A delay to change the StatusBar when the browser is opened
           isOpenInAppBrowser.current = true;
-          await InAppBrowser.open(currentUrl || url, {
-            // iOS Properties
-            dismissButtonStyle: 'done',
-            preferredBarTintColor: ColorMap.dark1,
-            preferredControlTintColor: ColorMap.light,
-            animated,
-            modalEnabled: true,
-            enableBarCollapsing: false,
-            // Android Properties
-            showTitle: true,
-            toolbarColor: ColorMap.dark1,
-            secondaryToolbarColor: ColorMap.dark1,
-            navigationBarColor: ColorMap.dark1,
-            navigationBarDividerColor: 'white',
-            enableUrlBarHiding: true,
-            enableDefaultShare: true,
-            forceCloseOnRedirection: false,
-            // Specify full animation resource identifier(package:anim/name)
-            // or only resource name(in case of animation bundled with app).
-            animations: {
-              startEnter: 'slide_in_right',
-              startExit: 'slide_out_left',
-              endEnter: 'slide_in_left',
-              endExit: 'slide_out_right',
-            },
-            headers: {
-              'my-custom-header': 'my custom header value',
-            },
-            hasBackButton: true,
-            browserPackage: undefined,
-            showInRecents: true,
-            includeReferrer: true,
-          });
+          await InAppBrowser.open(currentUrl || url, BrowserOptions);
 
           isOpenInAppBrowser.current = false;
         } else {

src/messaging/index.ts

@@ -63,6 +63,7 @@ import {
   RequestAuthorizationBlock,
   RequestAuthorizationPerSite,
   RequestBondingSubmit,
+  RequestCampaignBannerComplete,
   RequestChangeMasterPassword,
   RequestConnectWalletConnect,
   RequestCronAndSubscriptionAction,
@@ -1447,3 +1448,7 @@ export async function getMetadata(genesisHash?: string | null, isPartial = false
 
   return null;
 }
+
+export async function completeBannerCampaign(request: RequestCampaignBannerComplete): Promise<boolean> {
+  return sendMessage('pri(campaign.banner.complete)', request);
+}

src/providers/DataContext.tsx

@@ -32,6 +32,7 @@ import {
   subscribeXcmRefMap,
   subscribeConnectWCRequests,
   subscribeWalletConnectSessions,
+  subscribeProcessingCampaign,
 } from 'stores/utils';
 import React, { useContext, useEffect, useRef } from 'react';
 import { Provider } from 'react-redux';
@@ -304,6 +305,12 @@ export const DataContextProvider = ({ children }: DataContextProviderProps) => {
         });
 
         // Features
+        _DataContext.addHandler({
+          ...subscribeProcessingCampaign,
+          name: 'subscribeProcessingCampaign',
+          relatedStores: ['campaign'],
+          isStartImmediately: true,
+        });
         _DataContext.addHandler({
           ...subscribePrice,
           name: 'subscribePrice',

src/screens/Home/Crowdloans/CampaignBannerModal/index.tsx

@@ -0,0 +1,103 @@
+import React, { useCallback, useRef } from 'react';
+import { Button, Icon, SwModal } from 'components/design-system-ui';
+import { useSubWalletTheme } from 'hooks/useSubWalletTheme';
+import ModalStyle from './style';
+import { Linking, View } from 'react-native';
+import { ArrowCircleRight, XCircle } from 'phosphor-react-native';
+import FastImage from 'react-native-fast-image';
+import { InAppBrowser } from 'react-native-inappbrowser-reborn';
+import { BrowserOptions } from 'utils/buy';
+import { CampaignBanner, CampaignButton } from '@subwallet/extension-base/background/KoniTypes';
+import { completeBannerCampaign } from 'messaging/index';
+
+interface Props {
+  visible: boolean;
+  setVisible: (value: boolean) => void;
+  banner: CampaignBanner;
+}
+
+export type ButtonSchema = 'primary' | 'secondary' | 'warning' | 'danger' | 'ghost';
+
+enum ButtonIcon {
+  // @ts-ignore
+  xCircle = XCircle,
+  // @ts-ignore
+  arrowCircleRight = ArrowCircleRight,
+}
+
+const CampaignBannerModal = ({ visible, banner, setVisible }: Props) => {
+  const theme = useSubWalletTheme().swThemes;
+  const _style = ModalStyle(theme);
+  const isOpenInAppBrowser = useRef(false);
+
+  const onPressJoinNow = async (url?: string) => {
+    if (url) {
+      if (await InAppBrowser.isAvailable()) {
+        isOpenInAppBrowser.current = true;
+        await InAppBrowser.open(url, BrowserOptions);
+
+        isOpenInAppBrowser.current = false;
+      } else {
+        Linking.openURL(url);
+      }
+    }
+  };
+
+  const onCloseBanner = useCallback(() => {
+    setVisible(false);
+    completeBannerCampaign({
+      slug: banner.slug,
+    }).catch(console.error);
+  }, [banner.slug, setVisible]);
+
+  const onPressBtn = (item: CampaignButton) => {
+    return () => {
+      if (item.type === 'open_url') {
+        const url = item.metadata?.url as string | undefined;
+
+        if (url) {
+          onPressJoinNow(url);
+        }
+      }
+
+      if (item.metadata?.doneOnClick) {
+        onCloseBanner();
+      }
+    };
+  };
+
+  return (
+    <SwModal
+      isUseModalV2={true}
+      setVisible={setVisible}
+      modalVisible={visible}
+      disabledOnPressBackDrop
+      isAllowSwipeDown={false}>
+      <View style={{ width: '100%' }}>
+        <FastImage
+          style={{
+            height: 144,
+            borderRadius: theme.borderRadiusLG,
+            marginBottom: theme.margin,
+          }}
+          resizeMode="cover"
+          source={{ uri: banner.data.media }}
+        />
+
+        <View style={_style.footerAreaStyle}>
+          {banner.buttons.map(item => (
+            <Button
+              type={item.color as ButtonSchema}
+              style={{ flex: 1 }}
+              onPress={onPressBtn(item)}
+              icon={<Icon phosphorIcon={item.icon ? ButtonIcon[item.icon] : undefined} size={'lg'} weight={'fill'} />}>
+              {item.name}
+            </Button>
+          ))}
+        </View>
+      </View>
+    </SwModal>
+  );
+};
+
+export default CampaignBannerModal;

src/screens/Home/Crowdloans/CampaignBannerModal/style/index.ts

@@ -0,0 +1,24 @@
+import { StyleSheet, TextStyle, ViewStyle } from 'react-native';
+import { ThemeTypes } from 'styles/themes';
+import { FontMedium } from 'styles/sharedStyles';
+
+export interface CreateMasterPasswordStyle {
+  textStyle: TextStyle;
+  footerAreaStyle: ViewStyle;
+}
+
+export default (theme: ThemeTypes) =>
+  StyleSheet.create<CreateMasterPasswordStyle>({
+    textStyle: {
+      fontSize: theme.fontSize,
+      lineHeight: theme.fontSize * theme.lineHeight,
+      color: theme.colorTextLight4,
+      textAlign: 'center',
+      ...FontMedium,
+    },
+
+    footerAreaStyle: {
+      flexDirection: 'row',
+      gap: 16,
+    },
+  });

src/screens/Home/Crowdloans/index.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import i18n from 'utils/i18n/i18n';
 
 import { RocketLaunch } from 'phosphor-react-native';
@@ -11,8 +11,15 @@ import { useIsFocused } from '@react-navigation/native';
 import { CrowdloanItemType } from 'types/index';
 import { useSelector } from 'react-redux';
 import { RootState } from 'stores/index';
-import { ListRenderItemInfo } from 'react-native';
+import { Linking, ListRenderItemInfo, TouchableOpacity } from 'react-native';
 import { CrowdloanItem } from 'screens/Home/Crowdloans/CrowdloanItem';
+import FastImage from 'react-native-fast-image';
+import { Images } from 'assets/index';
+import { BUTTON_ACTIVE_OPACITY } from 'constants/index';
+import { InAppBrowser } from 'react-native-inappbrowser-reborn';
+import { BrowserOptions } from 'utils/buy';
+import useGetBannerByScreen from 'hooks/campaign/useGetBannerByScreen';
+import { CampaignBanner } from '@subwallet/extension-base/background/KoniTypes';
 
 const renderListEmptyComponent = () => {
   return (
@@ -43,11 +50,35 @@ export const CrowdloansScreen = () => {
     { label: i18n.filterOptions.win, value: FilterValue.WINNER },
     { label: i18n.filterOptions.fail, value: FilterValue.FAIL },
   ];
-
+  const banners = useGetBannerByScreen('crowdloan');
+  const isOpenInAppBrowser = useRef(false);
   const renderItem = ({ item }: ListRenderItemInfo<CrowdloanItemType>) => {
     return <CrowdloanItem item={item} isShowBalance={isShowBalance} />;
   };
 
+  const openBanner = async (url: string) => {
+    if (await InAppBrowser.isAvailable()) {
+      isOpenInAppBrowser.current = true;
+      await InAppBrowser.open(url, BrowserOptions);
+
+      isOpenInAppBrowser.current = false;
+    } else {
+      Linking.openURL(url);
+    }
+  };
+
+  const onPressBanner = useCallback((item: CampaignBanner) => {
+    return () => {
+      if (item.data.action === 'open_url') {
+        const url = item.data.metadata?.url as string | undefined;
+
+        if (url) {
+          openBanner(url);
+        }
+      }
+    };
+  }, []);
+
   const crowdloanData = useMemo(() => {
     const result = items.sort(
       // @ts-ignore
@@ -104,6 +135,26 @@ export const CrowdloansScreen = () => {
         filterFunction={getListByFilterOpt}
         isShowMainHeader
         placeholder={i18n.placeholder.searchProject}
+        beforeListItem={
+          <>
+            {banners.map(item => (
+              <TouchableOpacity
+                onPress={onPressBanner(item)}
+                activeOpacity={BUTTON_ACTIVE_OPACITY}
+                style={{ marginHorizontal: theme.margin }}>
+                <FastImage
+                  style={{
+                    height: 88,
+                    borderRadius: theme.borderRadiusLG,
+                    marginVertical: theme.marginXS,
+                  }}
+                  resizeMode="cover"
+                  source={{ uri: item.data.media }}
+                />
+              </TouchableOpacity>
+            ))}
+          </>
+        }
       />
     </>
   );