Points v0 (#5134)

* Add points tab, speed up tab switching * Fix wallet screen scroll to top * Fix type error, remove old code * e2e fixes * Fix remote config --------- Co-authored-by: Christian Baroni <[email protected]> Co-authored-by: skylarbarrera <[email protected]>
rainbow-me · Oct 20, 2023 · 087aec8 · 087aec8
1 parent 0c2ce01
commit 087aec8
Show file tree

Hide file tree

Showing 15 changed files with 440 additions and 157 deletions.
diff --git a/e2e/discoverSheetFlow.spec.js b/e2e/discoverSheetFlow.spec.js
@@ -45,14 +45,24 @@ describe('Discover Screen Flow', () => {
     await Helpers.enableSynchronization();
   });
 
-  it('Should navigate to the Profile screen after swiping right', async () => {
-    await Helpers.swipe('wallet-screen', 'right', 'slow');
+  it('Should navigate to Discover screen after swiping left', async () => {
+    await Helpers.swipe('wallet-screen', 'left', 'slow');
+    await Helpers.checkIfVisible('discover-header');
+  });
+
+  it('Should navigate to the Profile screen after swiping left', async () => {
+    await Helpers.swipe('discover-home', 'left', 'slow');
     await Helpers.checkIfVisible('profile-screen');
   });
 
-  it('Should navigate to Discover screen after swiping left twice', async () => {
+  it('Should navigate to the Points screen after swiping left', async () => {
     await Helpers.swipe('profile-screen', 'left', 'slow');
-    await Helpers.swipe('wallet-screen', 'left', 'slow');
+    await Helpers.checkIfVisible('points-screen');
+  });
+
+  it('Should navigate back to Discover screen after swiping right twice', async () => {
+    await Helpers.swipe('points-screen', 'right', 'slow');
+    await Helpers.swipe('profile-screen', 'right', 'slow');
     await Helpers.checkIfVisible('discover-header');
   });
 

diff --git a/e2e/walletAvatarOptions.disabled.js b/e2e/walletAvatarOptions.disabled.js
@@ -22,7 +22,8 @@ describe('Wallet avatar options', () => {
     await Helpers.waitAndTap('import-sheet-button');
     await Helpers.waitAndTap('wallet-info-submit-button');
     await Helpers.checkIfVisible('wallet-screen', 40000);
-    await Helpers.swipe('wallet-screen', 'right', 'slow');
+    await Helpers.swipe('wallet-screen', 'left', 'slow');
+    await Helpers.swipe('discover-home', 'left', 'slow');
     await Helpers.checkIfVisible('profile-screen', 40000);
   });
 
@@ -55,7 +56,8 @@ describe('Wallet avatar options', () => {
     }
     // Remove this once https://github.com/rainbow-me/rainbow/pull/4115 is merged.
     await Helpers.relaunchApp();
-    await Helpers.swipe('wallet-screen', 'right', 'slow');
+    await Helpers.swipe('wallet-screen', 'left', 'slow');
+    await Helpers.swipe('discover-home', 'left', 'slow');
     await Helpers.checkIfVisible('profile-screen', 40000);
 
     // TODO: check that wallet has different address (otherwise it means that creating wallet failed!).

diff --git a/src/components/floating-emojis/CopyFloatingEmojis.js b/src/components/floating-emojis/CopyFloatingEmojis.js
@@ -8,6 +8,7 @@ const CopyFloatingEmojis = ({
   children,
   disabled,
   onPress,
+  scaleTo,
   textToCopy,
   ...props
 }) => {
@@ -30,10 +31,13 @@ const CopyFloatingEmojis = ({
             onPress?.(textToCopy);
             if (!disabled) {
               onNewEmoji();
-              setClipboard(textToCopy);
+              if (textToCopy) {
+                setClipboard(textToCopy);
+              }
             }
           }}
           radiusAndroid={24}
+          scaleTo={scaleTo}
           wrapperProps={{
             containerStyle: {
               padding: 10,

diff --git a/src/components/icons/Icon.js b/src/components/icons/Icon.js
@@ -76,6 +76,9 @@ import TabDiscoverInnerFill from './svg/TabDiscoverInnerFill';
 import TabHome from './svg/TabHome';
 import TabHomeInner from './svg/TabHomeInner';
 import TabHomeInnerFill from './svg/TabHomeInnerFill';
+import TabPoints from './svg/TabPoints';
+import TabPointsInner from './svg/TabPointsInner';
+import TabPointsInnerFill from './svg/TabPointsInnerFill';
 import TelegramIcon from './svg/TelegramIcon';
 import ThreeDotsIcon from './svg/ThreeDotsIcon';
 import TouchIdIcon from './svg/TouchIdIcon';
@@ -166,6 +169,9 @@ const IconTypes = {
   tabHome: TabHome,
   tabHomeInner: TabHomeInner,
   tabHomeInnerFill: TabHomeInnerFill,
+  tabPoints: TabPoints,
+  tabPointsInner: TabPointsInner,
+  tabPointsInnerFill: TabPointsInnerFill,
   telegram: TelegramIcon,
   threeDots: ThreeDotsIcon,
   touchid: TouchIdIcon,

diff --git a/src/components/icons/TabBarIcon.tsx b/src/components/icons/TabBarIcon.tsx
@@ -16,16 +16,25 @@ type TabBarIconProps = {
   icon: string;
   index: number;
   reanimatedPosition: SharedValue<number>;
+  hideShadow?: boolean;
+  tintBackdrop?: string;
+  tintOpacity?: number;
 };
 
 export function TabBarIcon({
   accentColor,
+  hideShadow,
   icon,
   index,
   reanimatedPosition,
+  tintBackdrop,
+  tintOpacity,
 }: TabBarIconProps) {
   const { colors, isDarkMode } = useTheme();
 
+  const hasTransparentInnerFill =
+    icon === 'tabDiscover' || icon === 'tabPoints';
+
   const outlineColor = isDarkMode
     ? globalColors.blueGrey60
     : globalColors.blueGrey70;
@@ -78,21 +87,24 @@ export function TabBarIcon({
       [index - 0.7, index - 0.3, index, index + 0.3, index + 0.7],
       [
         isDarkMode ? outlineColor : '#FEFEFE',
-        icon === 'tabDiscover'
-          ? isDarkMode
-            ? '#171819'
-            : '#FEFEFE'
-          : accentColor,
-        icon === 'tabDiscover'
-          ? isDarkMode
-            ? '#171819'
-            : '#FEFEFE'
-          : accentColor,
-        icon === 'tabDiscover'
-          ? isDarkMode
-            ? '#171819'
-            : '#FEFEFE'
-          : accentColor,
+        tintBackdrop ||
+          (hasTransparentInnerFill
+            ? isDarkMode
+              ? '#171819'
+              : '#FEFEFE'
+            : accentColor),
+        tintBackdrop ||
+          (hasTransparentInnerFill
+            ? isDarkMode
+              ? '#171819'
+              : '#FEFEFE'
+            : accentColor),
+        tintBackdrop ||
+          (hasTransparentInnerFill
+            ? isDarkMode
+              ? '#171819'
+              : '#FEFEFE'
+            : accentColor),
         isDarkMode ? outlineColor : '#FEFEFE',
       ]
     );
@@ -117,7 +129,7 @@ export function TabBarIcon({
     const opacity = interpolate(
       reanimatedPosition.value,
       [index - 0.7, index - 0.3, index, index + 0.3, index + 0.7],
-      [0, 0.25, 0.25, 0.25, 0]
+      [0, tintOpacity ?? 0.25, tintOpacity ?? 0.25, tintOpacity ?? 0.25, 0]
     );
 
     return {
@@ -157,8 +169,8 @@ export function TabBarIcon({
   });
 
   return (
-    <Animated.View style={iconShadowBlack}>
-      <Animated.View style={iconShadow}>
+    <Animated.View style={hideShadow ? undefined : iconShadowBlack}>
+      <Animated.View style={hideShadow ? undefined : iconShadow}>
         <Box height={{ custom: 28 }} width={{ custom: 28 }}>
           <Cover alignHorizontal="center" alignVertical="center">
             <MaskedView maskElement={<Icon name={icon + 'InnerFill'} />}>
@@ -168,7 +180,7 @@ export function TabBarIcon({
                 style={innerFillColor}
                 width={{ custom: 28 }}
               >
-                {icon === 'tabDiscover' && (
+                {hasTransparentInnerFill && (
                   <Box
                     as={Animated.View}
                     height="full"
@@ -189,7 +201,7 @@ export function TabBarIcon({
               />
             </MaskedView>
           </Cover>
-          {icon !== 'tabDiscover' && (
+          {!hasTransparentInnerFill && (
             <Cover alignHorizontal="center" alignVertical="center">
               <MaskedView maskElement={<Icon name={icon + 'Inner'} />}>
                 <Box

diff --git a/src/components/icons/svg/TabPoints.js b/src/components/icons/svg/TabPoints.js
diff --git a/src/components/icons/svg/TabPointsInner.js b/src/components/icons/svg/TabPointsInner.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import { Path } from 'react-native-svg';
+import Svg from '../Svg';
+
+const TabPointsInner = ({ colors = undefined, color = colors.white }) => {
+  return (
+    <Svg height="28" viewBox="0 0 28 28" width="28">
+      <Path
+        clipRule="evenodd"
+        d="M14.5888 6.29531C15.2565 5.44128 15.6535 5.40555 15.8185 5.44063C15.9835 5.4757 16.3317 5.66983 16.5942 6.72156C16.8401 7.70641 16.8935 9.03945 16.8291 10.4531C16.7656 11.8461 16.5927 13.2275 16.4336 14.2679C16.3913 14.5447 16.3502 14.7961 16.3127 15.0157C15.498 15.0451 14.6657 14.976 13.8299 14.7983C12.9938 14.6206 12.2051 14.3451 11.4726 13.9867C11.5276 13.7708 11.5923 13.5245 11.6662 13.2546C11.9441 12.2394 12.348 10.9071 12.8565 9.60872C13.3727 8.29108 13.9637 7.09502 14.5888 6.29531ZM21.166 16.3577C20.3121 16.1762 19.5077 15.8927 18.7621 15.523C18.8058 15.2702 18.8546 14.9747 18.9049 14.6457C19.0716 13.5552 19.2576 12.0794 19.3265 10.5669C19.3831 9.32375 19.3644 7.99114 19.1632 6.8068C22.251 8.77626 24.1021 12.3276 23.8248 16.0892C23.804 16.3712 23.5765 16.5812 23.2977 16.5816C22.596 16.5824 21.8825 16.51 21.166 16.3577ZM9.25489 12.5945C9.16699 12.9156 9.09134 13.2055 9.02844 13.4543C8.19724 13.4887 7.34737 13.4204 6.49381 13.239C5.77736 13.0867 5.09609 12.8627 4.45538 12.5765C4.20076 12.4628 4.07835 12.1784 4.17408 11.9123C5.45064 8.36345 8.58567 5.87224 12.2071 5.32861C11.5416 6.32866 10.9826 7.5383 10.5288 8.69692C9.97657 10.1066 9.54615 11.5305 9.25489 12.5945Z"
+        fill={color}
+        fillRule="evenodd"
+      />
+    </Svg>
+  );
+};
+
+export default TabPointsInner;
diff --git a/src/components/icons/svg/TabPointsInnerFill.js b/src/components/icons/svg/TabPointsInnerFill.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import { Path } from 'react-native-svg';
+import Svg from '../Svg';
+
+const TabPointsInnerFill = ({ colors = undefined, color = colors.black }) => {
+  return (
+    <Svg height="28" viewBox="0 0 28 28" width="28">
+      <Path
+        d="M13.5702 16.021C14.8553 16.2942 16.1359 16.3389 17.3696 16.1827C18.4332 16.8272 19.6212 17.3072 20.9063 17.5803C21.7092 17.751 22.5104 17.8325 23.2994 17.8315C24.2344 17.8304 25.0029 17.1135 25.0716 16.1811C25.4837 10.5913 21.7149 5.41595 16.079 4.21801C10.4432 3.02007 4.89522 6.21504 2.99806 11.4892C2.68159 12.369 3.09209 13.3365 3.94576 13.7178C4.66619 14.0396 5.4312 14.291 6.23411 14.4617C7.51923 14.7348 8.79978 14.7796 10.0335 14.6233C11.0971 15.2679 12.2851 15.7478 13.5702 16.021Z"
+        fill={color}
+      />
+    </Svg>
+  );
+};
+
+export default TabPointsInnerFill;
diff --git a/src/languages/en_US.json b/src/languages/en_US.json
@@ -22,6 +22,7 @@
       "tab_investments": "Pools",
       "tab_savings": "Savings",
       "tab_showcase": "Showcase",
+      "tab_points": "Points",
       "tab_positions": "Positions",
       "tab_transactions": "Transactions",
       "tab_transactions_tooltip": "Transactions and Token Transfers",
@@ -1228,6 +1229,10 @@
         "address_copied_to_clipboard": "Address copied to clipboard"
       }
     },
+    "points": {
+      "coming_soon_title": "Coming Soon",
+      "coming_soon_description": "Points are just around the corner.\nStart earning today."
+    },
     "pools": {
       "deposit": "Deposit",
       "pools_title": "Pools",

diff --git a/src/model/config.ts b/src/model/config.ts
@@ -68,6 +68,7 @@ export interface RainbowConfig
 
   base_swaps_enabled: boolean;
   mints_enabled: boolean;
+  points_enabled: boolean;
 }
 
 const DEFAULT_CONFIG: RainbowConfig = {
@@ -127,6 +128,7 @@ const DEFAULT_CONFIG: RainbowConfig = {
 
   base_swaps_enabled: false,
   mints_enabled: true,
+  points_enabled: true,
 };
 
 // Initialize with defaults in case firebase doesn't respond
@@ -180,7 +182,8 @@ const init = async () => {
         key === 'op_chains_enabled' ||
         key === 'goerli_enabled' ||
         key === 'base_swaps_enabled' ||
-        key === 'mints_enabled'
+        key === 'mints_enabled' ||
+        key === 'points_enabled'
       ) {
         config[key] = entry.asBoolean();
       } else {

diff --git a/src/navigation/RecyclerListViewScrollToTopContext.tsx b/src/navigation/RecyclerListViewScrollToTopContext.tsx
@@ -1,5 +1,6 @@
 import { RecyclerListViewRef } from '@/components/asset-list/RecyclerAssetList2/core/ViewTypes';
 import React, { createContext, useState } from 'react';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 export const RecyclerListViewScrollToTopContext = createContext<{
   scrollToTop: () => void;
@@ -16,13 +17,15 @@ type ScrollToTopProviderProps = {
 const RecyclerListViewScrollToTopProvider: React.FC<ScrollToTopProviderProps> = ({
   children,
 }) => {
+  const insets = useSafeAreaInsets();
+
   const [
     scrollToTopRef,
     setScrollToTopRef,
   ] = useState<RecyclerListViewRef | null>(null);
 
   const scrollToTop = () => {
-    scrollToTopRef?.scrollToTop(true);
+    scrollToTopRef?.scrollToOffset(0, -insets.top, true);
   };
 
   return (