diff --git a/src/languages/en_US.json b/src/languages/en_US.json index b303c69a3e5..b46c89418eb 100644 --- a/src/languages/en_US.json +++ b/src/languages/en_US.json @@ -1277,6 +1277,10 @@ "registration_complete": "Registration complete", "account": "Account", "points_earned": "Points Earned", + "share_bonus": "Share Bonus", + "share_bonus_paragraph_one": "You're all set!", + "share_bonus_paragraph_two": "Keep earning points by swapping, bridging, minting, referring friends, and more", + "share_bonus_paragraph_three": "The more you use Rainbow, the more you'll be rewarded", "calculation_complete": "Calculation complete", "metamask_swaps": "MetaMask Swaps", "wallet_balance": "Wallet Balance", @@ -1287,6 +1291,7 @@ "sign_in_with_wallet": "Sign in with your wallet", "auth_required": "Authorization required", "proceed_to_share": "Claim points", + "skip_referral": "Skip", "sign_in": "Sign In", "try_a_swap": "Try a Swap", "get_some_eth": "Get Some ETH", @@ -1295,7 +1300,8 @@ "invalid_referral_code_alert": "Invalid referral code. Please double check your code and try again.", "referral_link_is_ready": "Your referral link is ready", "referral_link_bonus_text": "Tweet your referral link and get an extra 250 points", - "referral_link_bonus_text_extended": "Plus you’ll earn 10% of the points earned by anyone you refer" + "referral_link_bonus_text_extended": "Plus you'll earn 10% of the points earned by anyone you refer", + "complete_onboarding": "Done" } }, "pools": { diff --git a/src/screens/points/ConsoleSheet.tsx b/src/screens/points/ConsoleSheet.tsx index 1d3bf23ff88..8d32d9fd06d 100644 --- a/src/screens/points/ConsoleSheet.tsx +++ b/src/screens/points/ConsoleSheet.tsx @@ -8,7 +8,7 @@ import React, { useRef, useState, } from 'react'; -import { StyleSheet, Text as RNText, View } from 'react-native'; +import { StyleSheet, Text as RNText, View, Linking } from 'react-native'; import ReactNativeHapticFeedback from 'react-native-haptic-feedback'; import Animated, { Easing, @@ -26,6 +26,7 @@ import { Bleed, Box, Cover, + Inline, Inset, Stack, Text, @@ -33,16 +34,11 @@ import { useForegroundColor, } from '@/design-system'; import { alignHorizontalToFlexAlign } from '@/design-system/layout/alignment'; -import { - useAccountProfile, - useDimensions, - useSwapCurrencyHandlers, -} 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 { getNativeAssetForNetwork } from '@/utils/ethereumUtils'; import { metadataPOSTClient } from '@/graphql'; import { signPersonalMessage } from '@/model/wallet'; import { RouteProp, useRoute } from '@react-navigation/native'; @@ -54,20 +50,19 @@ import { } from '@/graphql/__generated__/metadata'; import { pointsQueryKey } from '@/resources/points'; import { queryClient } from '@/react-query'; -import { Network } from '@/networks/types'; -import { useNavigation } from '@/navigation'; -import Routes from '@/navigation/routesNames'; -import { CurrencySelectionTypes, ExchangeModalTypes } from '@/helpers'; import * as i18n from '@/languages'; import { abbreviateNumber } from '@/helpers/utilities'; +import Routes from '@/navigation/routesNames'; import { address as formatAddress, abbreviateEnsForDisplay, } from '@/utils/abbreviations'; import { usePointsTweetIntentQuery } from '@/resources/pointsTweetIntent/pointsTweetIntentQuery'; +import { useNavigation } from '@/navigation'; const SCREEN_BOTTOM_INSET = safeAreaInsetValues.bottom + 20; const CHARACTER_WIDTH = 9.2725; +const POINTS_TWEET_INTENT_ID = '3ttGOpIsbJg3aa00FScp3I'; type ConsoleSheetParams = { ConsoleSheet: { @@ -79,12 +74,16 @@ export const ConsoleSheet = () => { const { params } = useRoute>(); const referralCode = params?.referralCode; + const { navigate } = useNavigation(); + const [didConfirmOwnership, setDidConfirmOwnership] = useState(false); const [showSignInButton, setShowSignInButton] = useState(false); const [animationPhase, setAnimationPhase] = useState(0); const [isCalculationComplete, setIsCalculationComplete] = useState(false); const [showShareButtons, setShowShareButtons] = useState(false); const [tweetIntent, setTweetIntent] = useState(''); + const [didShare, setDidShare] = useState(false); + const [showDoneButton, setShowDoneButton] = useState(false); const [pointsProfile, setPointsProfile] = useState(); @@ -93,19 +92,25 @@ export const ConsoleSheet = () => { useEffect(() => { setDidConfirmOwnership(false); setShowSignInButton(false); + setAnimationPhase(0); + setIsCalculationComplete(false); + setShowShareButtons(false); + setTweetIntent(''); + setDidShare(false); + setShowDoneButton(false); }, []); const signIn = useCallback(async () => { let points; let signature; - let challenge; const challengeResponse = await metadataPOSTClient.getPointsOnboardChallenge( { address: accountAddress, referral: referralCode, } ); - challenge = challengeResponse?.pointsOnboardChallenge; + + const challenge = challengeResponse?.pointsOnboardChallenge; if (challenge) { const signatureResponse = await signPersonalMessage(challenge); signature = signatureResponse?.result; @@ -176,6 +181,8 @@ export const ConsoleSheet = () => { setIsCalculationComplete={setIsCalculationComplete} setShowShareButtons={setShowShareButtons} setTweetIntent={setTweetIntent} + didShare={didShare} + setShowDoneButton={setShowDoneButton} /> @@ -203,11 +210,34 @@ export const ConsoleSheet = () => { animationPhase === 2 && showShareButtons && !!tweetIntent.length } duration={300} + > + + setAnimationPhase(3)} + /> + + { + Linking.openURL(tweetIntent); + setDidShare(true); + setAnimationPhase(3); + }} + /> + + + + setAnimationPhase(2)} + label={`􀖅 ${i18n.t(i18n.l.points.console.complete_onboarding)}`} + onPress={() => navigate(Routes.POINTS_SCREEN)} /> @@ -300,6 +330,8 @@ const ClaimRetroactivePointsFlow = ({ setIsCalculationComplete, setShowShareButtons, setTweetIntent, + didShare, + setShowDoneButton, }: { pointsProfile?: OnboardPointsMutation; animationPhase: number; @@ -310,6 +342,8 @@ const ClaimRetroactivePointsFlow = ({ setIsCalculationComplete: React.Dispatch>; setShowShareButtons: React.Dispatch>; setTweetIntent: React.Dispatch>; + didShare: boolean; + setShowDoneButton: React.Dispatch>; }) => { const { accountENS, accountAddress } = useAccountProfile(); const [animationKey, setAnimationKey] = useState(0); @@ -319,16 +353,11 @@ const ClaimRetroactivePointsFlow = ({ useEffect(() => { setAnimationKey(prevKey => prevKey + 1); - setIsCalculationComplete(false); - setShowShareButtons(false); - setShowSignInButton(false); - setTweetIntent(''); - setAnimationPhase(0); }, []); usePointsTweetIntentQuery( { - id: '3ttGOpIsbJg3aa00FScp3I', + id: POINTS_TWEET_INTENT_ID, }, { enabled: animationPhase === 2, @@ -337,36 +366,42 @@ const ClaimRetroactivePointsFlow = ({ return; } - const tweetIntent = data.pointsTweetIntent; - const pointsValue = - pointsProfile?.onboardPoints?.user.onboarding.earnings.total; - if (!pointsValue) { - // TODO: Fallback to some default msg - return; - } + try { + const tweetIntent = data.pointsTweetIntent; + const pointsValue = + pointsProfile?.onboardPoints?.user.onboarding.earnings.total; + if (!pointsValue) { + // TODO: Fallback to some default msg + return; + } - // do a string replace to replace {POINTS_VALUE} with their points value - let text = tweetIntent.text?.replace( - '{POINTS_VALUE}', - pointsValue?.toString() - ); - if (Number(metamaskSwaps?.earnings.total) > 0) { - text += `, including ${metamaskSwaps?.earnings.total} points because I switched from Metamask`; - } + // do a string replace to replace {POINTS_VALUE} with their points value + let text = tweetIntent.text?.replace( + '{POINTS_VALUE}', + pointsValue?.toString() + ); + if (Number(metamaskSwaps?.earnings.total) > 0) { + text += `, including ${metamaskSwaps?.earnings.total} points because I switched from Metamask`; + } - // build the tweet intent url - let intent = `https://twitter.com/intent/tweet?text=${encodeURIComponent( - text ?? '' - )}`; - if (tweetIntent.url) { - intent += `&url=${encodeURIComponent(tweetIntent.url)}`; - } + // build the tweet intent url + let intent = `https://twitter.com/intent/tweet?text=${encodeURIComponent( + text ?? '' + )}`; + if (tweetIntent.url) { + intent += `&url=${encodeURIComponent(tweetIntent.url)}`; + } - if (tweetIntent.via) { - intent += `&via=${encodeURIComponent(tweetIntent.via)}`; - } + if (tweetIntent.via) { + intent += `&via=${encodeURIComponent(tweetIntent.via)}`; + } - setTweetIntent(intent); + console.log({ intent }); + setTweetIntent(intent); + } catch (e) { + console.log(e); + // TODO: add logging + } }, } ); @@ -622,7 +657,10 @@ const ClaimRetroactivePointsFlow = ({ color={rainbowColors.purple} delayStart={1000} enableHapticTyping - onComplete={() => setIsCalculationComplete(true)} + onComplete={() => { + setAnimationKey(prevKey => prevKey + 1); + setIsCalculationComplete(true); + }} textAlign="right" textContent={`+ ${bonus?.earnings?.total}`} typingSpeed={100} @@ -679,9 +717,9 @@ const ClaimRetroactivePointsFlow = ({ /> ${i18n.t( - i18n.l.points.console.registration_complete + i18n.l.points.console.calculating_points )}`} /> @@ -704,7 +742,10 @@ const ClaimRetroactivePointsFlow = ({ setIsCalculationComplete(true)} + onComplete={() => { + setAnimationKey(prevKey => prevKey + 1); + setIsCalculationComplete(true); + }} weight="normal" multiline textContent={i18n.t(i18n.l.points.console.claim_bonus_paragraph)} @@ -713,6 +754,55 @@ const ClaimRetroactivePointsFlow = ({ ))} {animationPhase === 2 && ( + }> + + + + + + ${i18n.t( + i18n.l.points.console.referral_link_is_ready + )}`} + /> + + + { + setAnimationKey(prevKey => prevKey + 1); + setShowShareButtons(true); + }} + weight="normal" + multiline + textContent={i18n.t( + i18n.l.points.console.referral_link_bonus_text_extended + )} + /> + + )} + + {animationPhase === 3 && ( }> @@ -736,33 +826,49 @@ const ClaimRetroactivePointsFlow = ({ )}`} /> - + {didShare && ( + + + + + )} + ${i18n.t( + i18n.l.points.console.share_bonus_paragraph_two )}`} + weight="normal" /> - - setShowShareButtons(true)} - weight="normal" - multiline - textContent={i18n.t(i18n.l.points.console.claim_bonus_paragraph)} - /> + setShowDoneButton(true)} + textContent={`> ${i18n.t( + i18n.l.points.console.share_bonus_paragraph_three + )}`} + weight="normal" + /> + )}