hook up some logic to claim signing

rainbow-me · Nov 30, 2023 · 95b6ff4 · 95b6ff4
1 parent d814c74
commit 95b6ff4
Show file tree

Hide file tree

Showing 7 changed files with 143 additions and 48 deletions.
diff --git a/src/graphql/queries/metadata.graphql b/src/graphql/queries/metadata.graphql
@@ -121,6 +121,10 @@ query getdApp($shortName: String!, $url: String!, $status: Boolean!) {
 
 query getPointsDataForWallet($address: String!) {
   points(address: $address) {
+    error {
+      message
+      type
+    }
     meta {
       distribution {
         next

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';
@@ -82,6 +83,7 @@ import { PositionSheet } from '@/screens/positions/PositionSheet';
 import MintSheet from '@/screens/mints/MintSheet';
 import { MintsSheet } from '@/screens/MintsSheet/MintsSheet';
 import { RemotePromoSheet } from '@/components/remote-promo-sheet/RemotePromoSheet';
+import { ConsoleSheet } from '@/screens/points/ConsoleSheet';
 
 const Stack = createStackNavigator();
 const OuterStack = createStackNavigator();
@@ -386,6 +388,11 @@ function BSNavigator() {
         name={Routes.CONFIRM_REQUEST}
         options={walletconnectBottomSheetPreset}
       />
+      <BSStack.Screen
+        component={ConsoleSheet}
+        name={Routes.CONSOLE_SHEET}
+        options={consoleSheetPreset}
+      />
     </BSStack.Navigator>
   );
 }

diff --git a/src/navigation/Routes.ios.tsx b/src/navigation/Routes.ios.tsx
@@ -96,7 +96,7 @@ import { NFTSingleOfferSheet } from '@/screens/NFTSingleOfferSheet';
 import MintSheet from '@/screens/mints/MintSheet';
 import { MintsSheet } from '@/screens/MintsSheet/MintsSheet';
 import { RemotePromoSheet } from '@/components/remote-promo-sheet/RemotePromoSheet';
-import { ConsoleSheet } from '@/screens/ConsoleSheet';
+import { ConsoleSheet } from '@/screens/points/ConsoleSheet';
 
 type StackNavigatorParams = {
   [Routes.SEND_SHEET]: unknown;

diff --git a/src/navigation/effects.tsx b/src/navigation/effects.tsx
@@ -463,6 +463,11 @@ export const walletconnectBottomSheetPreset: BottomSheetNavigationOptions = {
   backdropOpacity: 1,
 };
 
+export const consoleSheetPreset: BottomSheetNavigationOptions = {
+  backdropColor: 'black',
+  backdropOpacity: 1,
+};
+
 export const expandedPresetWithSmallGestureResponseDistance: StackNavigationOptions &
   BottomSheetNavigationOptions = {
   ...expandedPreset,

diff --git a/src/screens/ConsoleSheet.tsx → src/screens/points/ConsoleSheet.tsx b/src/screens/ConsoleSheet.tsx → src/screens/points/ConsoleSheet.tsx
@@ -35,18 +35,36 @@ import {
 } from '@/design-system';
 import { alignHorizontalToFlexAlign } from '@/design-system/layout/alignment';
 import { IS_DEV } from '@/env';
-import { useDimensions } from '@/hooks';
+import { useAccountProfile, useDimensions } from '@/hooks';
 import { fonts } from '@/styles';
 import { useTheme } from '@/theme';
 import { safeAreaInsetValues } from '@/utils';
 import { HapticFeedbackType } from '@/utils/haptics';
+import { metadataClient } from '@/graphql';
+import { signPersonalMessage } from '@/model/wallet';
+import { RouteProp, useRoute } from '@react-navigation/native';
+import { WrappedAlert as Alert } from '@/helpers/alert';
+import { RainbowError, logger } from '@/logger';
+import { PointsErrorType } from '@/graphql/__generated__/metadata';
+import { pointsQueryKey } from '@/resources/points';
+import { queryClient } from '@/react-query';
 
 const SCREEN_BOTTOM_INSET = safeAreaInsetValues.bottom + 20;
 const CHARACTER_WIDTH = 9.2725;
 
+type ConsoleSheetParams = {
+  ConsoleSheet: {
+    referralCode?: string;
+  };
+};
+
 export const ConsoleSheet = () => {
+  const { params } = useRoute<RouteProp<ConsoleSheetParams, 'ConsoleSheet'>>();
+  const referralCode = params?.referralCode;
+
   const [didConfirmOwnership, setDidConfirmOwnership] = useState(false);
   const [showSignInButton, setShowSignInButton] = useState(false);
+  const { accountAddress } = useAccountProfile();
 
   useEffect(() => {
     if (IS_DEV) {
@@ -55,6 +73,54 @@ export const ConsoleSheet = () => {
     }
   }, []);
 
+  const signIn = useCallback(async () => {
+    let points;
+    let signature;
+    let challenge;
+    const challengeResponse = await metadataClient.getPointsOnboardChallenge({
+      address: accountAddress,
+      referral: referralCode,
+    });
+    challenge = challengeResponse?.pointsOnboardChallenge;
+    if (challenge) {
+      const signatureResponse = await signPersonalMessage(challenge);
+      signature = signatureResponse?.result;
+      if (signature) {
+        points = await metadataClient.onboardPoints({
+          address: accountAddress,
+          signature,
+          referral: referralCode,
+        });
+      }
+    }
+    if (!points) {
+      logger.error(
+        new RainbowError(
+          `Error onboarding points user - accountAddress: ${accountAddress}, referralCode: ${referralCode}, challenge: ${challenge}, signature: ${signature}`
+        )
+      );
+      Alert.alert('Something went wrong, please try again.');
+    } else {
+      if (points.onboardPoints?.error) {
+        const errorType = points.onboardPoints?.error?.type;
+        if (errorType === PointsErrorType.ExistingUser) {
+          Alert.alert('Points already claimed. Please restart the app.');
+        } else if (errorType === PointsErrorType.InvalidReferralCode) {
+          Alert.alert(
+            'Invalid referral code. Please check your code and try again.'
+          );
+        }
+      } else {
+        setDidConfirmOwnership(true);
+        queryClient.setQueryData(
+          pointsQueryKey({ address: accountAddress }),
+          points
+        );
+        console.log(points);
+      }
+    }
+  }, [accountAddress, referralCode]);
+
   return (
     <Inset bottom={{ custom: SCREEN_BOTTOM_INSET }}>
       <Box
@@ -88,7 +154,8 @@ export const ConsoleSheet = () => {
       >
         <NeonButton
           label="􀎽 Sign In"
-          onPress={() => setTimeout(() => setDidConfirmOwnership(true), 1000)}
+          // onPress={() => setTimeout(() => setDidConfirmOwnership(true), 1000)}
+          onPress={signIn}
         />
       </AnimatePresence>
     </Inset>
@@ -109,55 +176,65 @@ const NeonButton = ({
   const green = useForegroundColor('green');
 
   return (
-    <ButtonPressAnimation
-      hapticType="impactHeavy"
-      onPress={onPress}
-      scaleTo={0.94}
-      style={styles.neonButtonWrapper}
-      transformOrigin="top"
+    <Box
+      alignItems="center"
+      width="full"
+      justifyContent="center"
+      position="absolute"
+      bottom={{ custom: 16 }}
     >
-      <Animated.View
-        style={[
-          styles.neonButton,
-          {
-            borderColor: color || green,
-            shadowColor: color || green,
-            width: deviceWidth - 64,
-          },
-        ]}
+      <ButtonPressAnimation
+        hapticType="impactHeavy"
+        onPress={onPress}
+        scaleTo={0.94}
+        style={styles.neonButtonWrapper}
+        transformOrigin="top"
       >
-        <Cover>
-          <Box
-            borderRadius={11}
-            height={{ custom: 46 }}
-            style={[
-              styles.neonButtonFill,
-              {
-                backgroundColor: colors.alpha(color || green, 0.1),
-              },
-            ]}
-            width={{ custom: deviceWidth - 66 }}
-          />
-        </Cover>
-        <RNText
+        <Animated.View
           style={[
-            styles.neonButtonText,
+            styles.neonButton,
             {
-              textShadowColor: colors.alpha(color || green, 0.6),
+              alignItems: 'center',
+              justifyContent: 'center',
+              borderColor: color || green,
+              shadowColor: color || green,
+              width: deviceWidth - 64,
             },
           ]}
         >
-          <Text
-            align="center"
-            color={color ? { custom: color } : 'green'}
-            size="20pt"
-            weight="heavy"
+          <Cover>
+            <Box
+              borderRadius={11}
+              height={{ custom: 46 }}
+              style={[
+                styles.neonButtonFill,
+                {
+                  backgroundColor: colors.alpha(color || green, 0.1),
+                },
+              ]}
+              width={{ custom: deviceWidth - 66 }}
+            />
+          </Cover>
+          <RNText
+            style={[
+              styles.neonButtonText,
+              {
+                textShadowColor: colors.alpha(color || green, 0.6),
+              },
+            ]}
           >
-            {label}
-          </Text>
-        </RNText>
-      </Animated.View>
-    </ButtonPressAnimation>
+            <Text
+              align="center"
+              color={color ? { custom: color } : 'green'}
+              size="20pt"
+              weight="heavy"
+            >
+              {label}
+            </Text>
+          </RNText>
+        </Animated.View>
+      </ButtonPressAnimation>
+    </Box>
   );
 };
 
@@ -773,8 +850,6 @@ const triggerHapticFeedback = (hapticType: HapticFeedbackType) =>
 const styles = StyleSheet.create({
   neonButtonWrapper: {
     alignSelf: 'center',
-    bottom: 16,
-    position: 'absolute',
   },
   neonButton: {
     alignContent: 'center',
@@ -809,7 +884,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: 30,
     paddingVertical: 45,
     width: '100%',
-    zIndex: 2,
+    zIndex: -1,
   },
   text: {
     fontFamily: fonts.family.SFMono,

diff --git a/src/screens/points/PointsScreen.tsx b/src/screens/points/PointsScreen.tsx
@@ -18,6 +18,7 @@ import { createMaterialTopTabNavigator } from '@react-navigation/material-top-ta
 import { deviceUtils } from '@/utils';
 import ClaimContent from './content/ClaimContent';
 import ReferralContent from './content/ReferralContent';
+import { PointsErrorType } from '@/graphql/__generated__/metadata';
 
 const Swipe = createMaterialTopTabNavigator();
 
@@ -35,7 +36,8 @@ export default function PointsScreen() {
     walletAddress: accountAddress,
   });
 
-  const isOnboarded = !!data?.points?.user?.referralCode;
+  const isOnboarded =
+    data?.points?.error?.type !== PointsErrorType.NonExistingUser;
 
   return (
     <Box as={Page} flex={1} height="full" testID="points-screen" width="full">

diff --git a/src/screens/points/content/ClaimContent.tsx b/src/screens/points/content/ClaimContent.tsx
@@ -13,6 +13,7 @@ import { TAB_BAR_HEIGHT } from '@/navigation/SwipeNavigator';
 import React from 'react';
 import Svg, { Path } from 'react-native-svg';
 import * as i18n from '@/languages';
+import Routes from '@/navigation/routesNames';
 
 export default function ClaimContent() {
   const { accentColor } = useAccountAccentColor();
@@ -70,6 +71,7 @@ export default function ClaimContent() {
               alignItems: 'center',
               justifyContent: 'center',
             }}
+            onPress={() => navigate(Routes.CONSOLE_SHEET)}
           >
             <Text
               size="20pt"
-Original file line number
+Diff line change
@@ Expand Up @@
     query getPointsDataForWallet($address: String!) {
       points(address: $address) {
+        error {
+          message
+          type
+        }
         meta {
           distribution {
             next
@@ Expand Down @@