Points: hook up points tab ui to metadata api (#5176)

* points hook * some error state + pull to refresh * fix copy haptic + pull to refresh * fix * Points: introductory flow (#5201) * refactor * claim logic * mutation * claim content * referral screen * referral ui * temp * fix android input and tabs * fix animation + back button android * layout fixes * final fixes + i18n * Points: signing up (#5210) * Add SF Mono, SF Pro Rounded Black * Add AnimatePresence * Update green/red colors * Add ConsoleSheet * Hook up iOS fonts * Hook up to PointsScreen * Style fixes * hook up some logic to claim signing * no retroactive points ui * fix points content layout * fix * i18n * fix error logging --------- Co-authored-by: Christian Baroni <[email protected]> * remove obsolete useFocusEffect * ImgixImage * simulationClient -> metadataPOSTClient --------- Co-authored-by: Christian Baroni <[email protected]> --------- Co-authored-by: Christian Baroni <[email protected]>
rainbow-me · Dec 1, 2023 · 8665907 · 8665907
1 parent 51e3347
commit 8665907
Show file tree

Hide file tree

Showing 33 changed files with 3,096 additions and 917 deletions.
diff --git a/android/app/src/main/AndroidManifest.xml b/android/app/src/main/AndroidManifest.xml
@@ -46,7 +46,7 @@
         android:exported="true"
         android:configChanges="keyboard|keyboardHidden|orientation|screenSize|smallestScreenSize|uiMode"
         android:launchMode="singleTask"
-        android:windowSoftInputMode="adjustResize">
+        android:windowSoftInputMode="adjustPan">
         <intent-filter>
             <category android:name="android.intent.category.LAUNCHER" />
             <action android:name="android.intent.action.DOWNLOAD_COMPLETE"/>

diff --git a/ios/Rainbow.xcodeproj/project.pbxproj b/ios/Rainbow.xcodeproj/project.pbxproj
@@ -41,7 +41,9 @@
 		A4277DA323CFE85F0042BAF4 /* Theme.swift in Sources */ = {isa = PBXBuildFile; fileRef = A4277DA223CFE85F0042BAF4 /* Theme.swift */; };
 		A4D04BA923D12F99008C1DEC /* Button.swift in Sources */ = {isa = PBXBuildFile; fileRef = A4D04BA823D12F99008C1DEC /* Button.swift */; };
 		A4D04BAC23D12FD5008C1DEC /* ButtonManager.m in Sources */ = {isa = PBXBuildFile; fileRef = A4D04BAB23D12FD5008C1DEC /* ButtonManager.m */; };
-		A9F312A50F28216E0C2FC393 /* libPods-PriceWidgetExtension.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 73790DA1833435B55F6617C8 /* libPods-PriceWidgetExtension.a */; };
+		AA0B1CBB2B00C5E100EAF77D /* SF-Mono-Semibold.otf in Resources */ = {isa = PBXBuildFile; fileRef = AA0B1CB82B00C5E100EAF77D /* SF-Mono-Semibold.otf */; };
+		AA0B1CBD2B00C5E100EAF77D /* SF-Mono-Bold.otf in Resources */ = {isa = PBXBuildFile; fileRef = AA0B1CB92B00C5E100EAF77D /* SF-Mono-Bold.otf */; };
+		AA0B1CBF2B00C5E100EAF77D /* SF-Pro-Rounded-Black.otf in Resources */ = {isa = PBXBuildFile; fileRef = AA0B1CBA2B00C5E100EAF77D /* SF-Pro-Rounded-Black.otf */; };
 		AA6228EF24272F510078BDAA /* SF-Pro-Rounded-Bold.otf in Resources */ = {isa = PBXBuildFile; fileRef = AA6228EB24272B200078BDAA /* SF-Pro-Rounded-Bold.otf */; };
 		AA6228F024272F510078BDAA /* SF-Pro-Rounded-Heavy.otf in Resources */ = {isa = PBXBuildFile; fileRef = AA6228EC24272B200078BDAA /* SF-Pro-Rounded-Heavy.otf */; };
 		AA6228F124272F510078BDAA /* SF-Pro-Rounded-Medium.otf in Resources */ = {isa = PBXBuildFile; fileRef = AA6228ED24272B200078BDAA /* SF-Pro-Rounded-Medium.otf */; };
@@ -259,14 +261,14 @@
 		A4277DA223CFE85F0042BAF4 /* Theme.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Theme.swift; sourceTree = "<group>"; };
 		A4D04BA823D12F99008C1DEC /* Button.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Button.swift; sourceTree = "<group>"; };
 		A4D04BAB23D12FD5008C1DEC /* ButtonManager.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = ButtonManager.m; sourceTree = "<group>"; };
-		A56EC7992F140DBE3A0BC44D /* Pods-PriceWidgetExtension.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-PriceWidgetExtension.debug.xcconfig"; path = "Target Support Files/Pods-PriceWidgetExtension/Pods-PriceWidgetExtension.debug.xcconfig"; sourceTree = "<group>"; };
-		A873FCD38CDC7FEB5E93833F /* Pods-Rainbow.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Rainbow.debug.xcconfig"; path = "Target Support Files/Pods-Rainbow/Pods-Rainbow.debug.xcconfig"; sourceTree = "<group>"; };
+		AA0B1CB82B00C5E100EAF77D /* SF-Mono-Semibold.otf */ = {isa = PBXFileReference; lastKnownFileType = file; name = "SF-Mono-Semibold.otf"; path = "../src/assets/fonts/SF-Mono-Semibold.otf"; sourceTree = "<group>"; };
+		AA0B1CB92B00C5E100EAF77D /* SF-Mono-Bold.otf */ = {isa = PBXFileReference; lastKnownFileType = file; name = "SF-Mono-Bold.otf"; path = "../src/assets/fonts/SF-Mono-Bold.otf"; sourceTree = "<group>"; };
+		AA0B1CBA2B00C5E100EAF77D /* SF-Pro-Rounded-Black.otf */ = {isa = PBXFileReference; lastKnownFileType = file; name = "SF-Pro-Rounded-Black.otf"; path = "../src/assets/fonts/SF-Pro-Rounded-Black.otf"; sourceTree = "<group>"; };
 		AA6228EA24272B200078BDAA /* SF-Pro-Rounded-Semibold.otf */ = {isa = PBXFileReference; lastKnownFileType = file; name = "SF-Pro-Rounded-Semibold.otf"; path = "../src/assets/fonts/SF-Pro-Rounded-Semibold.otf"; sourceTree = "<group>"; };
 		AA6228EB24272B200078BDAA /* SF-Pro-Rounded-Bold.otf */ = {isa = PBXFileReference; lastKnownFileType = file; name = "SF-Pro-Rounded-Bold.otf"; path = "../src/assets/fonts/SF-Pro-Rounded-Bold.otf"; sourceTree = "<group>"; };
 		AA6228EC24272B200078BDAA /* SF-Pro-Rounded-Heavy.otf */ = {isa = PBXFileReference; lastKnownFileType = file; name = "SF-Pro-Rounded-Heavy.otf"; path = "../src/assets/fonts/SF-Pro-Rounded-Heavy.otf"; sourceTree = "<group>"; };
 		AA6228ED24272B200078BDAA /* SF-Pro-Rounded-Medium.otf */ = {isa = PBXFileReference; lastKnownFileType = file; name = "SF-Pro-Rounded-Medium.otf"; path = "../src/assets/fonts/SF-Pro-Rounded-Medium.otf"; sourceTree = "<group>"; };
 		AA6228EE24272B200078BDAA /* SF-Pro-Rounded-Regular.otf */ = {isa = PBXFileReference; lastKnownFileType = file; name = "SF-Pro-Rounded-Regular.otf"; path = "../src/assets/fonts/SF-Pro-Rounded-Regular.otf"; sourceTree = "<group>"; };
-		AD490CBDAC6554605BF1847A /* Pods-PriceWidgetExtension.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-PriceWidgetExtension.release.xcconfig"; path = "Target Support Files/Pods-PriceWidgetExtension/Pods-PriceWidgetExtension.release.xcconfig"; sourceTree = "<group>"; };
 		B0C692B061D7430D8194DC98 /* ToolTipMenuTests.xctest */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = wrapper.cfbundle; path = ToolTipMenuTests.xctest; sourceTree = "<group>"; };
 		B50C9AE92A9D18DC00EB0019 /* [email protected] */ = {isa = PBXFileReference; lastKnownFileType = image.png; path = "[email protected]"; sourceTree = "<group>"; };
 		B50C9AEA2A9D18DC00EB0019 /* [email protected] */ = {isa = PBXFileReference; lastKnownFileType = image.png; path = "[email protected]"; sourceTree = "<group>"; };
@@ -699,6 +701,9 @@
 		DCAC1D8CC45E468FBB7E1395 /* Resources */ = {
 			isa = PBXGroup;
 			children = (
+				AA0B1CB92B00C5E100EAF77D /* SF-Mono-Bold.otf */,
+				AA0B1CB82B00C5E100EAF77D /* SF-Mono-Semibold.otf */,
+				AA0B1CBA2B00C5E100EAF77D /* SF-Pro-Rounded-Black.otf */,
 				AA6228EB24272B200078BDAA /* SF-Pro-Rounded-Bold.otf */,
 				AA6228EC24272B200078BDAA /* SF-Pro-Rounded-Heavy.otf */,
 				AA6228ED24272B200078BDAA /* SF-Pro-Rounded-Medium.otf */,
@@ -871,6 +876,7 @@
 				13B07FBD1A68108700A75B9A /* LaunchScreen.xib in Resources */,
 				B5D7F2F129E8D41E003D6A54 /* [email protected] in Resources */,
 				B54C1D1029358946007560D9 /* [email protected] in Resources */,
+				AA0B1CBD2B00C5E100EAF77D /* SF-Mono-Bold.otf in Resources */,
 				24979E8920F84250007EB0DA /* GoogleService-Info.plist in Resources */,
 				B54C1D162935A54F007560D9 /* [email protected] in Resources */,
 				B5CE8FFE29A5758100EB1EFA /* [email protected] in Resources */,
@@ -879,9 +885,11 @@
 				15CF49BD2889AF7C005F92C9 /* [email protected] in Resources */,
 				1539422824C7C7E200E4A9D1 /* Settings.bundle in Resources */,
 				15C398832880EDFF006033AC /* [email protected] in Resources */,
+				AA0B1CBB2B00C5E100EAF77D /* SF-Mono-Semibold.otf in Resources */,
 				B50C9AEC2A9D18DC00EB0019 /* [email protected] in Resources */,
 				B54C1D1129358946007560D9 /* [email protected] in Resources */,
 				B54C1D1229358946007560D9 /* [email protected] in Resources */,
+				AA0B1CBF2B00C5E100EAF77D /* SF-Pro-Rounded-Black.otf in Resources */,
 				15CF49C12889AFAD005F92C9 /* [email protected] in Resources */,
 				C04D10F025AFC8C1003BEF7A /* Extras.json in Resources */,
 				B5CC6D3A2A7873300037D5A3 /* [email protected] in Resources */,
@@ -910,6 +918,7 @@
 			files = (
 				C1AA308F27338F2B00136A9A /* SF-Pro-Rounded-Bold.otf in Resources */,
 				C1AA309027338F2B00136A9A /* SF-Pro-Rounded-Regular.otf in Resources */,
+				AA0B1CC02B00C5E100EAF77D /* SF-Pro-Rounded-Black.otf in Resources */,
 				C1C61A83272CBDA100E5C0B3 /* Images.xcassets in Resources */,
 				C1AA309227338F2B00136A9A /* SF-Pro-Rounded-Medium.otf in Resources */,
 				C1AA309527338F2B00136A9A /* SF-Pro-Rounded-Heavy.otf in Resources */,

diff --git a/ios/Rainbow/Info.plist b/ios/Rainbow/Info.plist
@@ -215,6 +215,9 @@
 	</array>
 	<key>UIAppFonts</key>
 	<array>
+		<string>SF-Mono-Bold.otf</string>
+		<string>SF-Mono-Semibold.otf</string>
+		<string>SF-Pro-Rounded-Black.otf</string>
 		<string>SF-Pro-Rounded-Bold.otf</string>
 		<string>SF-Pro-Rounded-Heavy.otf</string>
 		<string>SF-Pro-Rounded-Medium.otf</string>

diff --git a/ios/SF-Mono-Bold.otf b/ios/SF-Mono-Bold.otf
diff --git a/ios/SF-Mono-Semibold.otf b/ios/SF-Mono-Semibold.otf
diff --git a/ios/SF-Pro-Rounded-Black.otf b/ios/SF-Pro-Rounded-Black.otf
diff --git a/src/assets/fonts/SF-Mono-Bold.otf b/src/assets/fonts/SF-Mono-Bold.otf
diff --git a/src/assets/fonts/SF-Mono-Semibold.otf b/src/assets/fonts/SF-Mono-Semibold.otf
diff --git a/src/assets/fonts/SF-Pro-Rounded-Black.otf b/src/assets/fonts/SF-Pro-Rounded-Black.otf
diff --git a/src/assets/fonts/SFMono-Medium.otf b/src/assets/fonts/SFMono-Medium.otf
diff --git a/src/assets/fonts/SFMono-Regular.otf b/src/assets/fonts/SFMono-Regular.otf
diff --git a/src/components/animations/AnimatePresence.tsx b/src/components/animations/AnimatePresence.tsx
@@ -0,0 +1,73 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import Animated, {
+  Easing,
+  EasingFunctionFactory,
+  FadeIn,
+  useAnimatedStyle,
+  withTiming,
+} from 'react-native-reanimated';
+
+interface AnimatePresenceProps {
+  children: React.ReactNode;
+  condition: boolean | null | undefined;
+  duration?: number;
+  easing?: EasingFunctionFactory;
+  exitDuration?: number;
+  exitEasing?: EasingFunctionFactory;
+  enterAnimation?: typeof FadeIn;
+}
+
+const defaultTimingConfig = {
+  duration: 225,
+  easing: Easing.bezier(0.2, 0, 0, 1),
+};
+
+const exitTimingConfig = {
+  duration: 125,
+  easing: Easing.bezier(0.3, 0, 1, 1),
+};
+
+export const AnimatePresence = ({
+  children,
+  condition,
+  duration = defaultTimingConfig.duration,
+  easing = defaultTimingConfig.easing,
+  exitEasing = exitTimingConfig.easing,
+  exitDuration = exitTimingConfig.duration,
+  enterAnimation = FadeIn,
+}: AnimatePresenceProps) => {
+  const [isMounted, setIsMounted] = useState(condition);
+  const [isExiting, setIsExiting] = useState(false);
+
+  const enterAnimationStyle = useMemo(() => {
+    return enterAnimation.duration(duration).easing(easing.factory());
+  }, [enterAnimation, duration, easing]);
+
+  useEffect(() => {
+    if (condition) {
+      setIsExiting(false);
+      setIsMounted(true);
+    } else {
+      setIsExiting(true);
+      // Wait for exit animation completion
+      setTimeout(() => {
+        setIsMounted(false);
+      }, exitDuration || duration);
+    }
+  }, [condition, duration, exitDuration]);
+
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      opacity: withTiming(isExiting ? 0 : 1, {
+        duration: exitDuration,
+        easing: exitEasing,
+      }),
+    };
+  }, [isExiting, duration, easing]);
+
+  return isMounted ? (
+    <Animated.View entering={enterAnimationStyle} style={animatedStyle}>
+      {children}
+    </Animated.View>
+  ) : null;
+};
diff --git a/src/graphql/config.js b/src/graphql/config.js
@@ -12,8 +12,8 @@ exports.config = {
     document: './queries/metadata.graphql',
     schema: { method: 'GET', url: 'https://metadata.p.rainbow.me/v1/graph' },
   },
-  simulation: {
-    __name: 'simulation',
+  metadataPOST: {
+    __name: 'metadataPOST',
     document: './queries/metadata.graphql',
     schema: { method: 'POST', url: 'https://metadata.p.rainbow.me/v1/graph' },
   },

diff --git a/src/graphql/index.ts b/src/graphql/index.ts
@@ -9,8 +9,8 @@ export const ensClient = getEnsSdk(getFetchRequester(config.ens));
 export const metadataClient = getMetadataSdk(
   getFetchRequester(config.metadata)
 );
-export const simulationClient = getMetadataSdk(
-  getFetchRequester(config.simulation)
+export const metadataPOSTClient = getMetadataSdk(
+  getFetchRequester(config.metadataPOST)
 );
 export const arcClient = getArcSdk(getFetchRequester(config.arc));
 export const arcDevClient = getArcDevSdk(getFetchRequester(config.arcDev));
diff --git a/src/graphql/queries/metadata.graphql b/src/graphql/queries/metadata.graphql
@@ -251,3 +251,99 @@ query simulateMessage(
     }
   }
 }
+
+query getPointsDataForWallet($address: String!) {
+  points(address: $address) {
+    error {
+      message
+      type
+    }
+    meta {
+      distribution {
+        next
+      }
+      status
+    }
+    leaderboard {
+      accounts {
+        address
+        earnings {
+          total
+        }
+        ens
+        avatarURL
+      }
+    }
+    user {
+      referralCode
+      earnings {
+        total
+      }
+      stats {
+        position {
+          current
+        }
+      }
+    }
+  }
+}
+
+query getPointsOnboardChallenge($address: String!, $referral: String) {
+  pointsOnboardChallenge(address: $address, referral: $referral)
+}
+
+mutation onboardPoints(
+  $address: String!
+  $signature: String!
+  $referral: String
+) {
+  onboardPoints(address: $address, signature: $signature, referral: $referral) {
+    meta {
+      distribution {
+        next
+      }
+      status
+    }
+    leaderboard {
+      accounts {
+        address
+        earnings {
+          total
+        }
+        ens
+        avatarURL
+      }
+    }
+    user {
+      earnings {
+        total
+      }
+      stats {
+        position {
+          current
+        }
+      }
+      onboarding {
+        earnings {
+          total
+        }
+        categories {
+          data {
+            usd_amount
+            total_collections
+            owned_collections
+          }
+          type
+          display_type
+          earnings {
+            total
+          }
+        }
+      }
+    }
+    error {
+      message
+      type
+    }
+  }
+}
diff --git a/src/languages/en_US.json b/src/languages/en_US.json
@@ -1230,17 +1230,66 @@
       }
     },
     "points": {
-      "coming_soon_title": "Coming Soon",
-      "coming_soon_description": "Points are just around the corner.\nStart earning today.",
-      "referral_link": "Referral Link",
-      "share": "Share",
-      "next_reward": "Next Reward",
-      "referrals": "Referrals",
-      "streak": "Streak",
-      "longest_yet": "Longest yet",
-      "day": "day",
-      "days": "days",
-      "leaderboard": "Leaderboard"
+      "placeholder": {
+        "coming_soon_title": "Coming Soon",
+        "coming_soon_description": "Points are just around the corner.\nStart earning today."
+      },
+      "claim": {
+        "title": "Claim your points",
+        "subtitle": "Points are here. Find out how many you've been awarded.",
+        "get_started": "Get Started",
+        "use_referral_code": "Use Referral Code"
+      },
+      "referral": {
+        "title": "Enter your referral code",
+        "subtitle": "Enter a referral code below to claim your bonus reward.",
+        "back": "Back",
+        "error": "Something went wrong. Please restart the app and try again.",
+        "get_started": "Get Started"
+      },
+      "points": {
+        "referral_link": "Referral Link",
+        "share": "Share",
+        "next_reward": "Next Reward",
+        "referrals": "Referrals",
+        "streak": "Streak",
+        "longest_yet": "Longest yet",
+        "day": "day",
+        "days": "days",
+        "leaderboard": "Leaderboard",
+        "sunday": "Sunday",
+        "monday": "Monday",
+        "tuesday": "Tuesday",
+        "wednesday": "Wednesday",
+        "thursday": "Thursday",
+        "friday": "Friday",
+        "saturday": "Saturday",
+        "error": "Oops!\nPlease pull to refresh.",
+        "points": "points",
+        "link_copied": "Link copied"
+      },
+      "console": {
+        "claim_bonus_paragraph": "To claim the rest of your bonus points, swap at least $100 through Rainbow.",
+        "bonus_points": "Bonus Points",
+        "registration_complete": "Registration complete",
+        "account": "Account",
+        "points_earned": "Points Earned",
+        "calculation_complete": "Calculation complete",
+        "metamask_swaps": "MetaMask Swaps",
+        "wallet_balance": "Wallet Balance",
+        "rainbow_nfts_owned": "Rainbow NFTs Owned",
+        "rainbow_swaps": "Rainbow Swaps",
+        "calculating_points": "Calculating points",
+        "access_granted": "Access granted",
+        "sign_in_with_wallet": "Sign in with your wallet",
+        "auth_required": "Authorization required",
+        "sign_in": "Sign In",
+        "try_a_swap": "Try a Swap",
+        "get_some_eth": "Get Some ETH",
+        "generic_alert": "Something went wrong, please try again.",
+        "existing_user_alert": "Points already claimed. Please restart the app to refresh.",
+        "invalid_referral_code_alert": "Invalid referral code. Please double check your code and try again."
+      }
     },
     "pools": {
       "deposit": "Deposit",

diff --git a/src/navigation/Routes.android.tsx b/src/navigation/Routes.android.tsx
@@ -54,6 +54,7 @@ import {
   addCashSheet,
   nftSingleOfferSheetPreset,
   walletconnectBottomSheetPreset,
+  consoleSheetPreset,
 } from './effects';
 import { InitialRouteContext } from './initialRoute';
 import { onNavigationStateChange } from './onNavigationStateChange';
@@ -83,6 +84,7 @@ import MintSheet from '@/screens/mints/MintSheet';
 import { MintsSheet } from '@/screens/MintsSheet/MintsSheet';
 import { SignTransactionSheet } from '@/screens/SignTransactionSheet';
 import { RemotePromoSheet } from '@/components/remote-promo-sheet/RemotePromoSheet';
+import { ConsoleSheet } from '@/screens/points/ConsoleSheet';
 
 const Stack = createStackNavigator();
 const OuterStack = createStackNavigator();
@@ -387,6 +389,11 @@ function BSNavigator() {
         name={Routes.CONFIRM_REQUEST}
         options={walletconnectBottomSheetPreset}
       />
+      <BSStack.Screen
+        component={ConsoleSheet}
+        name={Routes.CONSOLE_SHEET}
+        options={consoleSheetPreset}
+      />
     </BSStack.Navigator>
   );
 }