Feature: Add remote promo sheet

src/components/PromoSheet.tsx

@@ -1,5 +1,10 @@
 import React, { useCallback, useEffect, useReducer } from 'react';
-import { ImageSourcePropType, StatusBar, ImageBackground } from 'react-native';
+import {
+  ImageSourcePropType,
+  StatusBar,
+  ImageBackground,
+  ImageURISource,
+} from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 import MaskedView from '@react-native-masked-view/masked-view';
 import { SheetActionButton, SheetHandle, SlackSheet } from '@/components/sheet';
@@ -38,7 +43,7 @@ type PromoSheetProps = {
   backgroundColor: string;
   accentColor: string;
   sheetHandleColor?: string;
-  campaignKey: CampaignKey;
+  campaignKey: CampaignKey | string;
   header: string;
   subHeader: string;
   primaryButtonProps: SheetActionButtonProps;
@@ -117,7 +122,12 @@ export function PromoSheet({
           testID={campaignKey}
         >
           {/* @ts-ignore */}
-          <Box as={ImageBackground} height="full" source={backgroundImage}>
+          <Box
+            as={ImageBackground}
+            height="full"
+            src={(backgroundImage as ImageURISource).uri}
+            source={backgroundImage}
+          >
             <Rows>
               <Row>
                 <Stack space={{ custom: isSmallPhone ? 46 : 54 }}>

src/components/remote-promo-sheet/RemotePromoSheet.tsx

@@ -0,0 +1,131 @@
+import React, { useEffect } from 'react';
+import { useRoute, RouteProp } from '@react-navigation/native';
+import { noop, get } from 'lodash';
+import { MMKV } from 'react-native-mmkv';
+
+import { useNavigation } from '@/navigation/Navigation';
+import { PromoSheet } from '@/components/PromoSheet';
+import { useTheme } from '@/theme';
+import { CampaignCheckResult } from './useRunCampaignChecks';
+import { usePromoSheetQuery } from '@/resources/promoSheet/promoSheetQuery';
+import { STORAGE_IDS } from '@/model/mmkv';
+import { maybeSignUri } from '@/handlers/imgix';
+
+const HEADER_HEIGHT = 285;
+const HEADER_WIDTH = 390;
+
+type RootStackParamList = {
+  RemotePromoSheet: CampaignCheckResult;
+};
+
+const mmkv = new MMKV();
+
+export function RemotePromoSheet() {
+  const { colors } = useTheme();
+  const { goBack } = useNavigation();
+  const { params } = useRoute<
+    RouteProp<RootStackParamList, 'RemotePromoSheet'>
+  >();
+  const { campaignId, campaignKey } = params;
+
+  useEffect(() => {
+    mmkv.set(STORAGE_IDS.PROMO_CURRENTLY_SHOWN, true);
+    mmkv.set(STORAGE_IDS.LAST_PROMO_SHEET_TIMESTAMP, Date.now());
+
+    return () => {
+      mmkv.set(STORAGE_IDS.PROMO_CURRENTLY_SHOWN, false);
+    };
+  }, []);
+
+  const { data, error } = usePromoSheetQuery(
+    {
+      id: campaignId,
+    },
+    {
+      enabled: !!campaignId,
+    }
+  );
+
+  if (!data?.promoSheet || error) {
+    return null;
+  }
+
+  const {
+    accentColor: accentColorString,
+    backgroundColor: backgroundColorString,
+    sheetHandleColor: sheetHandleColorString,
+    backgroundImage,
+    headerImage,
+    headerImageAspectRatio,
+    header,
+    items,
+    primaryButtonProps,
+    secondaryButtonProps,
+    subHeader,
+  } = data.promoSheet;
+
+  const accentColor =
+    (colors as { [key: string]: any })[accentColorString as string] ??
+    colors.whiteLabel;
+
+  const backgroundColor =
+    (colors as { [key: string]: any })[backgroundColorString as string] ??
+    colors.trueBlack;
+
+  const sheetHandleColor =
+    (colors as { [key: string]: any })[sheetHandleColorString as string] ??
+    colors.trueBlack;
+
+  const backgroundSignedImageUrl = backgroundImage?.url
+    ? maybeSignUri(backgroundImage.url)
+    : undefined;
+
+  const headerSignedImageUrl = headerImage?.url
+    ? maybeSignUri(headerImage.url)
+    : undefined;
+
+  return (
+    <PromoSheet
+      accentColor={accentColor}
+      backgroundColor={backgroundColor}
+      backgroundImage={{ uri: backgroundSignedImageUrl }}
+      campaignKey={campaignKey}
+      headerImage={{ uri: headerSignedImageUrl }}
+      headerImageAspectRatio={
+        headerImageAspectRatio ?? HEADER_WIDTH / HEADER_HEIGHT
+      }
+      sheetHandleColor={sheetHandleColor}
+      header={header ?? ''} // TODO: Probably should have a default header here
+      subHeader={subHeader ?? ''} // TODO: Probably should have a default subHeader here
+      primaryButtonProps={{
+        ...primaryButtonProps,
+        onPress: noop, // TODO: Primary action should be passed
+      }}
+      secondaryButtonProps={{
+        ...secondaryButtonProps,
+        onPress: goBack,
+      }}
+      items={items.map((item: any) => {
+        if (item.gradient) {
+          if (item.gradient.includes('.')) {
+            const gradient = get(colors, item.gradient);
+
+            return {
+              ...item,
+              gradient,
+            };
+          }
+
+          const gradient = colors.gradients[item.gradient] ?? undefined;
+
+          return {
+            ...item,
+            gradient,
+          };
+        }
+
+        return item;
+      })}
+    />
+  );
+}

src/components/remote-promo-sheet/check-fns/hasNonZeroAssetBalance.ts

@@ -0,0 +1,34 @@
+import store from '@/redux/store';
+import { RainbowNetworks } from '@/networks';
+import { ethereumUtils } from '@/utils';
+import { EthereumAddress } from '@/entities';
+
+export const hasNonZeroAssetBalance = async (
+  assetAddress: EthereumAddress
+): Promise<boolean> => {
+  const { selected } = store.getState().wallets;
+  if (!selected) return false;
+
+  const { accountAddress } = store.getState().settings;
+
+  const networks = RainbowNetworks.map(network => network.value);
+
+  // check native asset balances on networks
+  const balancePromises = networks.map(network =>
+    ethereumUtils
+      .getNativeAssetForNetwork(network, accountAddress)
+      .then(nativeAsset => Number(nativeAsset?.balance?.amount) > 0)
+      .catch(() => {
+        return false;
+      })
+  );
+
+  for (const balancePromise of balancePromises) {
+    // eslint-disable-next-line no-await-in-loop
+    if (await balancePromise) {
+      return true;
+    }
+  }
+
+  return false;
+};

src/components/remote-promo-sheet/check-fns/hasNonZeroTotalBalance.ts

@@ -0,0 +1,27 @@
+import store from '@/redux/store';
+import { EthereumAddress } from '@/entities';
+import { Network } from '@/helpers/networkTypes';
+import { RainbowNetworks } from '@/networks';
+import { ethereumUtils } from '@/utils';
+
+export const hasNonZeroTotalBalance = async (): Promise<boolean> => {
+  const {
+    accountAddress,
+  }: {
+    accountAddress: EthereumAddress;
+    network: Network;
+  } = store.getState().settings;
+
+  const networks: Network[] = RainbowNetworks.map(network => network.value);
+  const balances = await Promise.all(
+    networks.map(async network => {
+      const nativeAsset = await ethereumUtils.getNativeAssetForNetwork(
+        network,
+        accountAddress
+      );
+      return Number(nativeAsset?.balance?.amount);
+    })
+  );
+
+  return balances.some(balance => balance > 0);
+};

src/components/remote-promo-sheet/check-fns/hasSelectedWallet.ts

@@ -0,0 +1,6 @@
+import store from '@/redux/store';
+
+export const hasSelectedWallet = (): boolean => {
+  const { selected } = store.getState().wallets;
+  return !!selected;
+};

src/components/remote-promo-sheet/check-fns/index.ts

@@ -0,0 +1,6 @@
+export * from './hasNonZeroAssetBalance';
+export * from './hasNonZeroTotalBalance';
+export * from './hasSelectedWallet';
+export * from './isAfterCampaignLaunch';
+export * from './isFirstLaunch';
+export * from './isSelectedWalletReadOnly';

src/components/remote-promo-sheet/check-fns/isAfterCampaignLaunch.ts

@@ -0,0 +1,5 @@
+import { PromoSheet } from '@/graphql/__generated__/arc';
+
+export const isAfterCampaignLaunch = ({ launchDate }: PromoSheet): boolean => {
+  return new Date() > launchDate;
+};

src/components/remote-promo-sheet/check-fns/isFirstLaunch.ts

@@ -0,0 +1,6 @@
+import { STORAGE_IDS } from '@/model/mmkv';
+import { MMKV } from 'react-native-mmkv';
+
+export const isFirstLaunch = (mmkv: MMKV): boolean => {
+  return mmkv.getBoolean(STORAGE_IDS.FIRST_APP_LAUNCH) ?? false;
+};

src/components/remote-promo-sheet/check-fns/isSelectedWalletReadOnly.ts

@@ -0,0 +1,13 @@
+import store from '@/redux/store';
+import WalletTypes from '@/helpers/walletTypes';
+
+export const isSelectedWalletReadyOnly = (): boolean => {
+  const { selected } = store.getState().wallets;
+
+  // if no selected wallet, we will treat it as a read-only wallet
+  if (!selected || selected.type === WalletTypes.readOnly) {
+    return true;
+  }
+
+  return false;
+};