Merge branch 'develop' into feat/swaps

ignaciosantise · ignaciosantise · commit 46f0731de61b · 2024-12-04T16:25:53.000-03:00
diff --git a/packages/core/src/controllers/ConnectionController.ts b/packages/core/src/controllers/ConnectionController.ts
@@ -49,6 +49,7 @@ export interface ConnectionControllerState {
   wcError?: boolean;
   pressedWallet?: WcWallet;
   recentWallets?: WcWallet[];
+  selectedSocialProvider?: SocialProvider;
   connectedWalletImageUrl?: string;
   connectedSocialProvider?: SocialProvider;
 }
@@ -123,6 +124,10 @@ export const ConnectionController = {
     state.recentWallets = wallets;
   },
 
+  setSelectedSocialProvider(provider: ConnectionControllerState['selectedSocialProvider']) {
+    state.selectedSocialProvider = provider;
+  },
+
   async setConnectedWalletImageUrl(url: ConnectionControllerState['connectedWalletImageUrl']) {
     state.connectedWalletImageUrl = url;
 
@@ -180,7 +185,7 @@ export const ConnectionController = {
   resetWcConnection() {
     this.clearUri();
     state.pressedWallet = undefined;
-    ConnectionController.setConnectedSocialProvider(undefined);
+    state.selectedSocialProvider = undefined;
     ConnectionController.setConnectedWalletImageUrl(undefined);
     ConnectorController.setConnectedConnector(undefined);
     StorageUtil.removeWalletConnectDeepLink();
diff --git a/packages/core/src/controllers/RouterController.ts b/packages/core/src/controllers/RouterController.ts
@@ -1,6 +1,5 @@
 import { proxy } from 'valtio';
 import type { WcWallet, CaipNetwork, Connector, SwapInputTarget } from '../utils/TypeUtil';
-import type { SocialProvider } from '@reown/appkit-common-react-native';
 
 // -- Types --------------------------------------------- //
 type TransactionAction = {
@@ -54,7 +53,6 @@ export interface RouterControllerState {
     network?: CaipNetwork;
     email?: string;
     newEmail?: string;
-    socialProvider?: SocialProvider;
     swapTarget?: SwapInputTarget;
   };
   transactionStack: TransactionAction[];
diff --git a/packages/core/src/utils/TypeUtil.ts b/packages/core/src/utils/TypeUtil.ts
@@ -620,6 +620,20 @@ export type Event =
         provider: SocialProvider;
       };
     }
+  | {
+      type: 'track';
+      event: 'SOCIAL_LOGIN_REQUEST_USER_DATA';
+      properties: {
+        provider: SocialProvider;
+      };
+    }
+  | {
+      type: 'track';
+      event: 'SOCIAL_LOGIN_CANCELED';
+      properties: {
+        provider: SocialProvider;
+      };
+    }
   | {
       type: 'track';
       event: 'SOCIAL_LOGIN_ERROR';
diff --git a/packages/scaffold/src/partials/w3m-header/index.tsx b/packages/scaffold/src/partials/w3m-header/index.tsx
@@ -3,7 +3,8 @@ import {
   RouterController,
   ModalController,
   EventsController,
-  type RouterControllerState
+  type RouterControllerState,
+  ConnectionController
 } from '@reown/appkit-core-react-native';
 import { IconLink, Text, FlexView } from '@reown/appkit-ui-react-native';
 import { StringUtil } from '@reown/appkit-common-react-native';
@@ -21,8 +22,8 @@ export function Header() {
     const connectorName = _data?.connector?.name;
     const walletName = _data?.wallet?.name;
     const networkName = _data?.network?.name;
-    const socialName = _data?.socialProvider
-      ? StringUtil.capitalize(_data?.socialProvider)
+    const socialName = ConnectionController.state.selectedSocialProvider
+      ? StringUtil.capitalize(ConnectionController.state.selectedSocialProvider)
       : undefined;
 
     return {
@@ -64,6 +65,29 @@ export function Header() {
 
   const header = headings(data, view);
 
+  const checkSocial = () => {
+    if (
+      RouterController.state.view === 'ConnectingFarcaster' ||
+      RouterController.state.view === 'ConnectingSocial'
+    ) {
+      EventsController.sendEvent({
+        type: 'track',
+        event: 'SOCIAL_LOGIN_CANCELED',
+        properties: { provider: ConnectionController.state.selectedSocialProvider! }
+      });
+    }
+  };
+
+  const handleGoBack = () => {
+    checkSocial();
+    RouterController.goBack();
+  };
+
+  const handleClose = () => {
+    checkSocial();
+    ModalController.close();
+  };
+
   const dynamicButtonTemplate = () => {
     const noButtonViews = ['ConnectingSiwe'];
 
@@ -74,12 +98,7 @@ export function Header() {
     const showBack = RouterController.state.history.length > 1;
 
     return showBack ? (
-      <IconLink
-        icon="chevronLeft"
-        size="md"
-        onPress={RouterController.goBack}
-        testID="button-back"
-      />
+      <IconLink icon="chevronLeft" size="md" onPress={handleGoBack} testID="button-back" />
     ) : (
       <IconLink icon="helpCircle" size="md" onPress={onHelpPress} testID="button-help" />
     );
@@ -100,7 +119,7 @@ export function Header() {
       <Text variant="paragraph-600" numberOfLines={1}>
         {header}
       </Text>
-      <IconLink icon="close" size="md" onPress={ModalController.close} testID="button-close" />
+      <IconLink icon="close" size="md" onPress={handleClose} testID="button-close" />
     </FlexView>
   );
 }
diff --git a/packages/scaffold/src/views/w3m-connect-socials-view/index.tsx b/packages/scaffold/src/views/w3m-connect-socials-view/index.tsx
@@ -3,6 +3,7 @@ import { useSnapshot } from 'valtio';
 import { ScrollView } from 'react-native';
 import { StringUtil, type SocialProvider } from '@reown/appkit-common-react-native';
 import {
+  ConnectionController,
   EventsController,
   OptionsController,
   RouterController,
@@ -19,15 +20,16 @@ export function ConnectSocialsView() {
   const socialProviders = (features?.socials ?? []) as SocialProvider[];
 
   const onItemPress = (provider: SocialProvider) => {
+    ConnectionController.setSelectedSocialProvider(provider);
     EventsController.sendEvent({
       type: 'track',
       event: 'SOCIAL_LOGIN_STARTED',
       properties: { provider }
     });
     if (provider === 'farcaster') {
-      RouterController.push('ConnectingFarcaster', { socialProvider: provider });
+      RouterController.push('ConnectingFarcaster');
     } else {
-      RouterController.push('ConnectingSocial', { socialProvider: provider });
+      RouterController.push('ConnectingSocial');
     }
   };
 
diff --git a/packages/scaffold/src/views/w3m-connect-view/components/social-login-list.tsx b/packages/scaffold/src/views/w3m-connect-view/components/social-login-list.tsx
@@ -2,6 +2,7 @@ import { StyleSheet } from 'react-native';
 import { FlexView, ListSocial, LogoSelect, Spacing, Text } from '@reown/appkit-ui-react-native';
 import { type SocialProvider, StringUtil } from '@reown/appkit-common-react-native';
 import {
+  ConnectionController,
   EventsController,
   RouterController,
   WebviewController
@@ -21,18 +22,19 @@ export function SocialLoginList({ options, disabled }: SocialLoginListProps) {
   let bottomSocials = showBigSocial ? options.slice(1) : options;
   bottomSocials = showMoreButton ? bottomSocials.slice(0, MAX_OPTIONS - 2) : bottomSocials;
 
-  const onItemPress = (social: SocialProvider) => {
+  const onItemPress = (provider: SocialProvider) => {
+    ConnectionController.setSelectedSocialProvider(provider);
     EventsController.sendEvent({
       type: 'track',
       event: 'SOCIAL_LOGIN_STARTED',
-      properties: { provider: social }
+      properties: { provider }
     });
     WebviewController.setConnecting(false);
 
-    if (social === 'farcaster') {
-      RouterController.push('ConnectingFarcaster', { socialProvider: social });
+    if (provider === 'farcaster') {
+      RouterController.push('ConnectingFarcaster');
     } else {
-      RouterController.push('ConnectingSocial', { socialProvider: social });
+      RouterController.push('ConnectingSocial');
     }
   };
 
diff --git a/packages/scaffold/src/views/w3m-connecting-farcaster-view/index.tsx b/packages/scaffold/src/views/w3m-connecting-farcaster-view/index.tsx
@@ -6,9 +6,7 @@ import {
   EventsController,
   ModalController,
   OptionsController,
-  RouterController,
   SnackController,
-  WebviewController,
   type AppKitFrameProvider
 } from '@reown/appkit-core-react-native';
 import {
@@ -24,47 +22,51 @@ import { useCustomDimensions } from '../../hooks/useCustomDimensions';
 import styles from './styles';
 
 export function ConnectingFarcasterView() {
-  const { data } = RouterController.state;
   const { maxWidth: width } = useCustomDimensions();
   const authConnector = ConnectorController.getAuthConnector();
   const [error, setError] = useState(false);
   const [processing, setProcessing] = useState(false);
   const [url, setUrl] = useState<string | undefined>();
   const showCopy = OptionsController.isClipboardAvailable();
-  const socialProvider = data?.socialProvider;
   const provider = authConnector?.provider as AppKitFrameProvider;
 
   const onConnect = useCallback(async () => {
     try {
-      if (!WebviewController.state.connecting && provider && socialProvider && authConnector) {
+      if (provider && authConnector) {
         setError(false);
         const { url: farcasterUrl } = await provider.getFarcasterUri();
         setUrl(farcasterUrl);
         Linking.openURL(farcasterUrl);
+
         await provider.connectFarcaster();
+        EventsController.sendEvent({
+          type: 'track',
+          event: 'SOCIAL_LOGIN_REQUEST_USER_DATA',
+          properties: { provider: 'farcaster' }
+        });
         setProcessing(true);
         await ConnectionController.connectExternal(authConnector);
-        ConnectionController.setConnectedSocialProvider(socialProvider);
+        ConnectionController.setConnectedSocialProvider('farcaster');
         EventsController.sendEvent({
           type: 'track',
           event: 'SOCIAL_LOGIN_SUCCESS',
-          properties: { provider: socialProvider }
+          properties: { provider: 'farcaster' }
         });
-        WebviewController.setConnecting(false);
+
         setProcessing(false);
         ModalController.close();
       }
     } catch (e) {
       EventsController.sendEvent({
         type: 'track',
         event: 'SOCIAL_LOGIN_ERROR',
-        properties: { provider: socialProvider! }
+        properties: { provider: 'farcaster' }
       });
       SnackController.showError('Something went wrong');
       setError(true);
       setProcessing(false);
     }
-  }, [provider, socialProvider, authConnector]);
+  }, [provider, authConnector]);
 
   const onCopyUrl = () => {
     if (url) {
diff --git a/packages/scaffold/src/views/w3m-connecting-social-view/index.tsx b/packages/scaffold/src/views/w3m-connecting-social-view/index.tsx
@@ -18,27 +18,31 @@ import { useCustomDimensions } from '../../hooks/useCustomDimensions';
 import styles from './styles';
 
 export function ConnectingSocialView() {
-  const { data } = RouterController.state;
   const { maxWidth: width } = useCustomDimensions();
   const { processingAuth } = useSnapshot(WebviewController.state);
+  const { selectedSocialProvider } = useSnapshot(ConnectionController.state);
   const authConnector = ConnectorController.getAuthConnector();
   const [error, setError] = useState(false);
-  const socialProvider = data?.socialProvider;
   const provider = authConnector?.provider as AppKitFrameProvider;
 
   const onConnect = useCallback(async () => {
     try {
-      if (!WebviewController.state.connecting && provider && socialProvider) {
+      if (
+        !WebviewController.state.connecting &&
+        provider &&
+        ConnectionController.state.selectedSocialProvider
+      ) {
         const { uri } = await provider.getSocialRedirectUri({
-          provider: socialProvider
+          provider: ConnectionController.state.selectedSocialProvider
         });
         WebviewController.setWebviewUrl(uri);
 
-        const isNativeApple = socialProvider === 'apple' && Platform.OS === 'ios';
+        const isNativeApple =
+          ConnectionController.state.selectedSocialProvider === 'apple' && Platform.OS === 'ios';
 
         WebviewController.setWebviewVisible(!isNativeApple);
         WebviewController.setConnecting(true);
-        WebviewController.setConnectingProvider(socialProvider);
+        WebviewController.setConnectingProvider(ConnectionController.state.selectedSocialProvider);
       }
     } catch (e) {
       WebviewController.setWebviewVisible(false);
@@ -48,29 +52,38 @@ export function ConnectingSocialView() {
       SnackController.showError('Something went wrong');
       setError(true);
     }
-  }, [provider, socialProvider]);
+  }, [provider]);
 
   const socialMessageHandler = useCallback(
     async (url: string) => {
       try {
         if (
           url.includes('/sdk/oauth') &&
-          socialProvider &&
+          ConnectionController.state.selectedSocialProvider &&
           authConnector &&
           !WebviewController.state.processingAuth
         ) {
           WebviewController.setProcessingAuth(true);
           WebviewController.setWebviewVisible(false);
           const parsedUrl = new URL(url);
+
+          EventsController.sendEvent({
+            type: 'track',
+            event: 'SOCIAL_LOGIN_REQUEST_USER_DATA',
+            properties: { provider: ConnectionController.state.selectedSocialProvider }
+          });
+
           await provider?.connectSocial(parsedUrl.search);
           await ConnectionController.connectExternal(authConnector);
-          ConnectionController.setConnectedSocialProvider(socialProvider);
+          ConnectionController.setConnectedSocialProvider(
+            ConnectionController.state.selectedSocialProvider
+          );
           WebviewController.setConnecting(false);
 
           EventsController.sendEvent({
             type: 'track',
             event: 'SOCIAL_LOGIN_SUCCESS',
-            properties: { provider: socialProvider }
+            properties: { provider: ConnectionController.state.selectedSocialProvider }
           });
 
           ModalController.close();
@@ -80,14 +93,14 @@ export function ConnectingSocialView() {
         EventsController.sendEvent({
           type: 'track',
           event: 'SOCIAL_LOGIN_ERROR',
-          properties: { provider: socialProvider! }
+          properties: { provider: ConnectionController.state.selectedSocialProvider! }
         });
         WebviewController.reset();
         RouterController.goBack();
         SnackController.showError('Something went wrong');
       }
     },
-    [socialProvider, authConnector, provider]
+    [authConnector, provider]
   );
 
   useEffect(() => {
@@ -112,7 +125,7 @@ export function ConnectingSocialView() {
       style={{ width }}
     >
       <LoadingThumbnail paused={!!error}>
-        <Logo logo={socialProvider ?? 'more'} height={72} width={72} />
+        <Logo logo={selectedSocialProvider ?? 'more'} height={72} width={72} />
         {error && (
           <IconBox
             icon={'close'}
@@ -128,7 +141,7 @@ export function ConnectingSocialView() {
       <Text style={styles.continueText} variant="paragraph-500">
         {processingAuth
           ? 'Loading user data'
-          : `Continue with ${StringUtil.capitalize(socialProvider)}`}
+          : `Continue with ${StringUtil.capitalize(selectedSocialProvider)}`}
       </Text>
       <Text variant="small-400" color="fg-200">
         {processingAuth
diff --git a/packages/wallet/src/AppKitWebview.tsx b/packages/wallet/src/AppKitWebview.tsx
