[APP-925]: Backend Driven Cards (#5198)

* add experimental flag for remote cards (#5196) * [APP-929]: Add `RemoteCardProvider` and react-query calls (#5197) * add card and cardCollection to arc * rm logs * [APP-930]: Add `<RemoteCard />` component (#5203) * start progress on remote card * update remote card * [APP-932]: Add `<RemoteCardCarousel />` component (#5205) * added card carousel to wallet and discover screen * update card and package * tweaks to make carousel fit in * update styles * idkwtfiad * disable scroll when only one card is present and adjust view dimensions size based on card length * . * fix layout issues * remove unused debuglayout * fix card and re-enable check to not show cards again * Apply suggestions from code review * tweak discover page * add some testing edge cases * add remote config stuff * fix graphql schema * code review changes * change to new remote config hook * fix remote config * new design * start with view weekly earnings flow * progress on points breakdown from last week * Delete ios/.xcode.env.local * Update src/components/asset-list/RecyclerAssetList2/core/ViewDimensions.tsx * Update src/components/asset-list/RecyclerAssetList2/core/getLayoutProvider.tsx * Apply suggestions from code review * chore: rm snap carousel * Update shim.js * finish earnings screen * finish spec * adjust gutter size depending on how many cards are in the carousel * clean unused import * fix font weight on android and conditionally wrap remote card if primary button has action * fix recycler list view blank space for watched wallets * adjust card to prev card on dismissal * fix text formatting * fix: lint * change gutter size * fix text truncation * fix ios touch event overlap * fix: disable hiding cards in dev * Update src/components/cards/remote-cards/RemoteCardProvider.tsx * weekly earnings fix and leaderboard diff (#5330) * fix weekly earnings total * leaderboard ranking diff * Update src/screens/points/content/PointsContent.tsx Co-authored-by: Matthew Wall <matthew.wallt@gmail.com> --------- Co-authored-by: Matthew Wall <matthew.wallt@gmail.com> * filter & reduce --------- Co-authored-by: Ben Goldberg <bengoldberg@rainbow.me> Co-authored-by: skylarbarrera <skylar.barrera@gmail.com>
rainbow-me · Jan 18, 2024 · ba091de · ba091de
1 parent 4a5dd3a
commit ba091de
Show file tree

Hide file tree

Showing 32 changed files with 1,330 additions and 108 deletions.
diff --git a/shim.js b/shim.js
@@ -74,7 +74,7 @@ global.storage = storage;
 
 // shimming for reanimated need to happen before importing globalVariables.js
 // eslint-disable-next-line import/no-commonjs
-for (let variable of Object.entries(require('./globalVariables').default)) {
+for (const variable of Object.entries(require('./globalVariables').default)) {
   Object.defineProperty(global, variable[0], {
     get: () => variable[1],
     set: () => {
@@ -119,7 +119,7 @@ if (typeof process === 'undefined') {
   global.process = require('process');
 } else {
   const bProcess = require('process');
-  for (var p in bProcess) {
+  for (const p in bProcess) {
     if (!(p in process)) {
       process[p] = bProcess[p];
     }

diff --git a/src/App.js b/src/App.js
@@ -82,6 +82,7 @@ import { initializeReservoirClient } from '@/resources/reservoir/client';
 import { ReviewPromptAction } from '@/storage/schema';
 import { handleReviewPromptAction } from '@/utils/reviewAlert';
 import { RemotePromoSheetProvider } from '@/components/remote-promo-sheet/RemotePromoSheetProvider';
+import { RemoteCardProvider } from '@/components/cards/remote-cards';
 import { initializeRemoteConfig } from '@/model/remoteConfig';
 
 if (__DEV__) {
@@ -274,13 +275,15 @@ class OldApp extends Component {
         <View style={containerStyle}>
           {this.state.initialRoute && (
             <RemotePromoSheetProvider isWalletReady={this.props.walletReady}>
-              <InitialRouteContext.Provider value={this.state.initialRoute}>
-                <RoutesComponent
-                  onReady={this.handleSentryNavigationIntegration}
-                  ref={this.handleNavigatorRef}
-                />
-                <PortalConsumer />
-              </InitialRouteContext.Provider>
+              <RemoteCardProvider>
+                <InitialRouteContext.Provider value={this.state.initialRoute}>
+                  <RoutesComponent
+                    onReady={this.handleSentryNavigationIntegration}
+                    ref={this.handleNavigatorRef}
+                  />
+                  <PortalConsumer />
+                </InitialRouteContext.Provider>
+              </RemoteCardProvider>
             </RemotePromoSheetProvider>
           )}
           <OfflineToast />

diff --git a/src/analytics/event.ts b/src/analytics/event.ts
@@ -1,7 +1,6 @@
 import { CardType } from '@/components/cards/GenericCard';
 import { LearnCategory } from '@/components/cards/utils/types';
 import { FiatProviderName } from '@/entities/f2c';
-import { Network } from '@/networks/types';
 
 /**
  * All events, used by `analytics.track()`
@@ -99,6 +98,7 @@ export const event = {
   mintsMintingNFT: 'Minting NFT',
   mintsMintedNFT: 'Minted NFT',
   mintsErrorMintingNFT: 'Error Minting NFT',
+  pointsViewedWeeklyEarnings: 'Viewed weekly earnings',
   pointsViewedClaimScreen: 'Viewed claim your points screen',
   pointsViewedReferralScreen: 'Viewed points referral code screen',
   pointsViewedPointsScreen: 'Viewed main points screen',
@@ -118,11 +118,16 @@ export const event = {
     'Pressed continue button on onboarding screen',
   pointsOnboardingScreenPressedDoneButton:
     'Pressed done button on onboarding screen',
+  pointsViewedWeeklyEarningsScreenPressedCloseButton:
+    'Pressed close button on weekly earnings screen',
   pointsReferralCodeDeeplinkOpened: 'Opened points referral code deeplink',
   pointsPointsScreenPressedCopyReferralCodeButton:
     'Pressed copy referral code button on points screen',
   pointsPointsScreenPressedShareReferralLinkButton:
     'Pressed share referral link button on points screen',
+
+  remoteCardPrimaryButtonPressed: 'remote_card.primary_button_pressed',
+  remoteCardDismissed: 'remote_card.dismissed',
 } as const;
 
 /**
@@ -406,6 +411,7 @@ export type EventProperties = {
   [event.pointsViewedReferralScreen]: undefined;
   [event.pointsViewedPointsScreen]: undefined;
   [event.pointsViewedOnboardingSheet]: undefined;
+  [event.pointsViewedWeeklyEarnings]: undefined;
   [event.pointsReferralScreenValidatedReferralCode]: {
     deeplinked: boolean;
   };
@@ -428,7 +434,18 @@ export type EventProperties = {
   [event.pointsOnboardingScreenPressedSkipShareToXButton]: undefined;
   [event.pointsOnboardingScreenPressedContinueButton]: undefined;
   [event.pointsOnboardingScreenPressedDoneButton]: undefined;
+  [event.pointsViewedWeeklyEarningsScreenPressedCloseButton]: undefined;
   [event.pointsReferralCodeDeeplinkOpened]: undefined;
   [event.pointsPointsScreenPressedCopyReferralCodeButton]: undefined;
   [event.pointsPointsScreenPressedShareReferralLinkButton]: undefined;
+
+  [event.remoteCardPrimaryButtonPressed]: {
+    cardKey: string;
+    action: string;
+    props: string;
+  };
+
+  [event.remoteCardDismissed]: {
+    cardKey: string;
+  };
 };
diff --git a/src/components/asset-list/RecyclerAssetList2/core/RawRecyclerList.tsx b/src/components/asset-list/RecyclerAssetList2/core/RawRecyclerList.tsx
@@ -25,12 +25,16 @@ import useLayoutItemAnimator from './useLayoutItemAnimator';
 import { UniqueAsset } from '@/entities';
 import { useRecyclerListViewScrollToTopContext } from '@/navigation/RecyclerListViewScrollToTopContext';
 import {
+  useAccountProfile,
   useAccountSettings,
   useCoinListEdited,
   useCoinListEditOptions,
+  useWallets,
 } from '@/hooks';
 import { useNavigation } from '@/navigation';
 import { useTheme } from '@/theme';
+import { useRemoteCardContext } from '@/components/cards/remote-cards';
+import { useRoute } from '@react-navigation/native';
 
 const dataProvider = new DataProvider((r1, r2) => {
   return r1.uid !== r2.uid;
@@ -71,9 +75,24 @@ const RawMemoRecyclerAssetList = React.memo(function RawRecyclerAssetList({
   const { isCoinListEdited, setIsCoinListEdited } = useCoinListEdited();
   const y = useRecyclerAssetListPosition()!;
 
-  const layoutProvider = useMemoOne(
-    () => getLayoutProvider(briefSectionsData, isCoinListEdited),
-    [briefSectionsData]
+  const { name } = useRoute();
+  const { getCardsForPlacement } = useRemoteCardContext();
+  const { isReadOnlyWallet } = useWallets();
+
+  const cards = useMemo(() => getCardsForPlacement(name as string), [
+    getCardsForPlacement,
+    name,
+  ]);
+
+  const layoutProvider = useMemo(
+    () =>
+      getLayoutProvider(
+        briefSectionsData,
+        isCoinListEdited,
+        cards,
+        isReadOnlyWallet
+      ),
+    [briefSectionsData, isCoinListEdited, cards, isReadOnlyWallet]
   );
 
   const { accountAddress } = useAccountSettings();

diff --git a/src/components/asset-list/RecyclerAssetList2/core/RowRenderer.tsx b/src/components/asset-list/RecyclerAssetList2/core/RowRenderer.tsx
@@ -29,6 +29,8 @@ import { DiscoverMoreButton } from './DiscoverMoreButton';
 import { RotatingLearnCard } from '@/components/cards/RotatingLearnCard';
 import WrappedPosition from '../WrappedPosition';
 import WrappedPositionsListHeader from '../WrappedPositionsListHeader';
+import * as lang from '@/languages';
+import { RemoteCardCarousel } from '@/components/cards/remote-cards';
 import WrappedCollectiblesHeader from '../WrappedCollectiblesHeader';
 
 function rowRenderer(
@@ -91,6 +93,12 @@ function rowRenderer(
       );
     case CellType.PROFILE_STICKY_HEADER:
       return <ProfileStickyHeader />;
+    case CellType.REMOTE_CARD_CAROUSEL:
+      return (
+        <CardRowWrapper>
+          <RemoteCardCarousel />
+        </CardRowWrapper>
+      );
     case CellType.COIN:
       return (
         <FastBalanceCoinRow

diff --git a/src/components/asset-list/RecyclerAssetList2/core/ViewDimensions.tsx b/src/components/asset-list/RecyclerAssetList2/core/ViewDimensions.tsx
@@ -67,6 +67,7 @@ const ViewDimensions: Record<CellType, Dim> = {
     height: 130,
     width: deviceUtils.dimensions.width / 2 - 0.1,
   },
+  [CellType.REMOTE_CARD_CAROUSEL]: { height: 112 },
 };
 
 export default ViewDimensions;
diff --git a/src/components/asset-list/RecyclerAssetList2/core/ViewTypes.ts b/src/components/asset-list/RecyclerAssetList2/core/ViewTypes.ts
@@ -36,6 +36,8 @@ export enum CellType {
   EMPTY_WALLET_SPACER = 'EMPTY_WALLET_SPACER',
   BIG_EMPTY_WALLET_SPACER = 'BIG_EMPTY_WALLET_SPACER',
   EMPTY_ROW = 'EMPTY_ROW',
+
+  REMOTE_CARD_CAROUSEL = 'REMOTE_CARD_CAROUSEL',
 }
 export type RecyclerListViewRef = RecyclerListView<
   RecyclerListViewProps,

diff --git a/src/components/asset-list/RecyclerAssetList2/core/getLayoutProvider.tsx b/src/components/asset-list/RecyclerAssetList2/core/getLayoutProvider.tsx
@@ -7,6 +7,7 @@ import {
 import ViewDimensions from './ViewDimensions';
 import { BaseCellType, CellType } from './ViewTypes';
 import { deviceUtils } from '@/utils';
+import { TrimmedCard } from '@/components/cards/remote-cards';
 
 const getStyleOverridesForIndex = (indices: number[]) => (index: number) => {
   if (indices.includes(index)) {
@@ -51,7 +52,9 @@ class BetterLayoutProvider extends LayoutProvider {
 
 const getLayoutProvider = (
   briefSectionsData: BaseCellType[],
-  isCoinListEdited: boolean
+  isCoinListEdited: boolean,
+  cards: TrimmedCard[],
+  isReadOnlyWallet: boolean
 ) => {
   const indicesToOverride = [];
   for (let i = 0; i < briefSectionsData.length; i++) {
@@ -76,6 +79,13 @@ const getLayoutProvider = (
       if (ViewDimensions[type]) {
         dim.height = ViewDimensions[type].height;
         dim.width = ViewDimensions[type].width || dim.width;
+
+        if (
+          (type === CellType.REMOTE_CARD_CAROUSEL && !cards.length) ||
+          (type === CellType.REMOTE_CARD_CAROUSEL && isReadOnlyWallet)
+        ) {
+          dim.height = 0;
+        }
       }
     },
     indicesToOverride

diff --git a/src/components/cards/CarouselCard.tsx b/src/components/cards/CarouselCard.tsx
@@ -22,7 +22,8 @@ const HORIZONTAL_PADDING = 20;
 
 const LoadingSpinner = IS_ANDROID ? Spinner : ActivityIndicator;
 
-type CarouselItem<T> = {
+export type CarouselItem<T> = {
+  carouselRef?: React.Ref<FlashList<T>>;
   renderItem: ListRenderItem<T>;
   keyExtractor: (item: T, index: number) => string;
   placeholder: React.ReactNode;
@@ -42,10 +43,10 @@ export function CarouselCard<T>({
   canRefresh,
   isRefreshing,
 }: {
-  title: string | React.ReactNode;
+  title?: string | React.ReactNode;
   data: T[] | null | undefined;
   carouselItem: CarouselItem<T>;
-  button: React.ReactNode;
+  button?: React.ReactNode;
   menu?: React.ReactNode;
   refresh?: () => void;
   canRefresh?: boolean;
@@ -60,20 +61,22 @@ export function CarouselCard<T>({
 
   return (
     <Stack space="20px">
-      <Box
-        flexDirection="row"
-        alignItems="center"
-        justifyContent="space-between"
-      >
-        {typeof title === 'string' ? (
-          <Text color="label" weight="heavy" size="20pt">
-            {title}
-          </Text>
-        ) : (
-          <Box width="full">{title}</Box>
-        )}
-        {menu}
-      </Box>
+      {!!title && (
+        <Box
+          flexDirection="row"
+          alignItems="center"
+          justifyContent="space-between"
+        >
+          {typeof title === 'string' ? (
+            <Text color="label" weight="heavy" size="20pt">
+              {title}
+            </Text>
+          ) : (
+            <Box width="full">{title}</Box>
+          )}
+          {menu}
+        </Box>
+      )}
       {/* FlashList vertical visible overflow does not work due to a bug,
       so we need to manually add vertical padding to the recycled component.
       The vertical bleed here is to accommodate the vertical padding w/o affecting the layout. 
@@ -86,12 +89,14 @@ export function CarouselCard<T>({
           {data?.length ? (
             <FlashList
               data={data}
+              scrollEnabled={(data && data.length > 1) ?? true}
               showsHorizontalScrollIndicator={false}
               contentContainerStyle={{
                 paddingHorizontal: HORIZONTAL_PADDING,
               }}
               estimatedItemSize={carouselItem.width}
               horizontal
+              ref={carouselItem.carouselRef}
               estimatedListSize={{
                 height: actualItemHeight,
                 width: deviceWidth * 2,
@@ -116,6 +121,7 @@ export function CarouselCard<T>({
             // need this due to FlashList bug https://github.com/Shopify/flash-list/issues/757
             <ScrollView
               horizontal
+              scrollEnabled={(data && data.length > 1) ?? true}
               showsHorizontalScrollIndicator={false}
               contentContainerStyle={{
                 paddingHorizontal: HORIZONTAL_PADDING,
@@ -132,39 +138,40 @@ export function CarouselCard<T>({
           )}
         </Box>
       </Bleed>
-      <Columns space="10px">
-        <Column>{button}</Column>
-        {!!refresh && (
-          <Column width="content">
-            <Box
-              as={ButtonPressAnimation}
-              // @ts-ignore
-              disabled={!canRefresh}
-              onPress={refresh}
-              justifyContent="center"
-              alignItems="center"
-              borderRadius={18}
-              style={{
-                borderWidth: isRefreshing ? 0 : 1,
-                borderColor,
-                width: 36,
-                height: 36,
-              }}
-            >
-              {isRefreshing ? (
-                <LoadingSpinner
-                  color={colorMode === 'light' ? 'black' : 'white'}
-                  size={20}
-                />
-              ) : (
-                <Text align="center" color="label" size="17pt" weight="bold">
-                  􀅈
-                </Text>
-              )}
-            </Box>
-          </Column>
-        )}
-      </Columns>
+      {!!button && (
+        <Columns space="10px">
+          <Column>{button}</Column>
+          {!!refresh && (
+            <Column width="content">
+              <Box
+                as={ButtonPressAnimation}
+                disabled={!canRefresh}
+                onPress={refresh}
+                justifyContent="center"
+                alignItems="center"
+                borderRadius={18}
+                style={{
+                  borderWidth: isRefreshing ? 0 : 1,
+                  borderColor,
+                  width: 36,
+                  height: 36,
+                }}
+              >
+                {isRefreshing ? (
+                  <LoadingSpinner
+                    color={colorMode === 'light' ? 'black' : 'white'}
+                    size={20}
+                  />
+                ) : (
+                  <Text align="center" color="label" size="17pt" weight="bold">
+                    􀅈
+                  </Text>
+                )}
+              </Box>
+            </Column>
+          )}
+        </Columns>
+      )}
     </Stack>
   );
 }