commit redpack page

ios/Podfile.lock

@@ -290,11 +290,11 @@ PODS:
     - React
   - react-native-cookies (6.2.1):
     - React-Core
-  - react-native-safe-area-context (4.3.3):
+  - react-native-safe-area-context (4.3.1):
     - RCT-Folly
     - RCTRequired
     - RCTTypeSafety
-    - React-Core
+    - React
     - ReactCommon/turbomodule/core
   - react-native-webview (11.23.0):
     - React-Core
@@ -364,9 +364,9 @@ PODS:
     - React-jsi (= 0.69.2)
     - React-logger (= 0.69.2)
     - React-perflogger (= 0.69.2)
-  - RNCAsyncStorage (1.17.10):
+  - RNCAsyncStorage (1.17.9):
     - React-Core
-  - RNScreens (3.17.0):
+  - RNScreens (3.15.0):
     - React-Core
     - React-RCTImage
   - RNSVG (13.0.0):
@@ -578,8 +578,8 @@ SPEC CHECKSUMS:
   React-logger: 9a6c684d5cd56c4129e0c2842dba75c4bfb1e981
   react-native-cookie: dfde9cd819c42c538abc19dc476c9c7ac53cb530
   react-native-cookies: f54fcded06bb0cda05c11d86788020b43528a26c
-  react-native-safe-area-context: deca3b734e6ad82df91bd6e68f3eb48bbb96b758
-  react-native-webview: c09ea739796b91286ae1f581d2db536b48c33911
+  react-native-safe-area-context: 6c12e3859b6f27b25de4fee8201cfb858432d8de
+  react-native-webview: e771bc375f789ebfa02a26939a57dbc6fa897336
   React-perflogger: 281c34e42f13245c7a4d6932364d9182f8655e1a
   React-RCTActionSheet: 92f4292754a1b4a0e42bf9b1489206a06f878929
   React-RCTAnimation: 2a5bb5549758e4e594481633f3db649d11519f75
@@ -592,8 +592,8 @@ SPEC CHECKSUMS:
   React-RCTVibration: 0d07f00705b5f11e88aaaaf9131f5e1785d4bd6e
   React-runtimeexecutor: 8030b9cf9b9e87b878d92da680b55b5e74c58e70
   ReactCommon: a9414b91f0d19de002b55d9f4f6cb176d6dd8452
-  RNCAsyncStorage: 73b194e58ded504eee17b9a3c125651e2507ddde
-  RNScreens: 0df01424e9e0ed7827200d6ed1087ddd06c493f9
+  RNCAsyncStorage: b2489b49e38c85e10ed45a888d13a2a4c7b32ea1
+  RNScreens: 4a1af06327774490d97342c00aee0c2bafb497b7
   RNSVG: 42a0c731b11179ebbd27a3eeeafa7201ebb476ff
   SocketRocket: fccef3f9c5cedea1353a9ef6ada904fde10d6608
   Yoga: 236056dd74cda4d9d76c20306fd8c20bb087614d

src/components/webview.tsx

@@ -10,6 +10,7 @@ interface Props {
 	handleWebViewNavigationStateChange?: (newNavState: { url: any }) => void;
 	onMessageHandle?: (e: any) => void;
 	refHandle?: (r: any) => any;
+	style?: any;
 }
 export const DenetWebview = (props: Props) => {
 	return (
@@ -20,7 +21,7 @@ export const DenetWebview = (props: Props) => {
 			javaScriptEnabled={true}
 			startInLoadingState={true}
 			originWhitelist={['*']}
-			cacheEnabled={false}
+			cacheEnabled={true}
 			javaScriptCanOpenWindowsAutomatically={true}
 			allowUniversalAccessFromFileURLs={true}
 			allowFileAccessFromFileURLs={true}
@@ -28,6 +29,7 @@ export const DenetWebview = (props: Props) => {
 			ref={props.refHandle}
 			onMessage={props.onMessageHandle}
 			onNavigationStateChange={props.handleWebViewNavigationStateChange}
+			style={props.style}
 			source={{
 				uri: props.uri,
 			}}

src/pages/navigations/home.tsx

@@ -1,5 +1,13 @@
 import React, { useEffect, useState, useRef } from 'react';
-import { Text, StyleSheet, Image, View, ImageBackground, Pressable, Animated } from 'react-native';
+import {
+	Text,
+	StyleSheet,
+	Image,
+	View,
+	ImageBackground,
+	Pressable,
+	Animated,
+} from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import LinearGradient from 'react-native-linear-gradient';
 import { postRequest } from '@/netWork/';
@@ -16,7 +24,9 @@ const Home = (props: Props) => {
 	const [nftData, setNftData] = useState([]);
 	const goTwitter = () => {
 		if (isLogin) {
-			props.navigation.navigate('Twitter');
+			props.navigation.navigate('Twitter', {
+				webUrl: 'https://mobile.twitter.com/home',
+			});
 		} else {
 			goTwitterAuthorize();
 		}
@@ -42,18 +52,17 @@ const Home = (props: Props) => {
 				<View style={styles.denetWrap}>
 					<Image
 						style={styles.denet}
-						source={ require('../../static/img/home/welcome.png') }
+						source={require('../../static/img/home/welcome.png')}
 					/>
 					<ImageBackground
 						style={styles.goods}
-						source={ require('../../static/img/home/goods.png') }>
-					</ImageBackground>
+						source={require('../../static/img/home/goods.png')}></ImageBackground>
 				</View>
 				<Pressable style={styles.TwitterBtnWrap} onPress={goTwitter}>
 					<View style={styles.TwitterLayer}>
 						<Image
 							style={styles.twitterIcon}
-							source={ require('../../static/img/home/twritter.png') }
+							source={require('../../static/img/home/twritter.png')}
 						/>
 						<Text style={styles.twitterFont}>Web3 Twitter</Text>
 					</View>

src/pages/screens/redpack.tsx

@@ -1,16 +1,37 @@
 /* eslint-disable react-native/no-inline-styles */
 import React, { Component } from 'react';
-import { View, Text, DeviceEventEmitter, Button } from 'react-native';
+import {
+	View,
+	Text,
+	DeviceEventEmitter,
+	Button,
+	StyleSheet,
+} from 'react-native';
 // import EventEmitter from 'react-native-eventemitter';
 import { DenetWebview } from '@/components/webview';
 import { guid } from '@/utils/';
 import messageCenter from '@/utils/messageCenter';
+import {
+	Modal,
+	BottomModal,
+	ModalContent,
+	ModalFooter,
+	ModalButton,
+	SlideAnimation,
+} from 'react-native-modals';
 
 interface Props {
 	route: any;
 }
-class Redpack extends Component<Props> {
+
+type State = {
+	isShoCommentPop: boolean;
+};
+class Redpack extends Component<Props, State> {
 	webref = {} as any;
+	state = {
+		isShoCommentPop: false,
+	};
 	favoriteTweet = () => {
 		const idArray = this.props.route.params.tweet_Id.split('');
 		console.log(idArray);
@@ -29,7 +50,19 @@ class Redpack extends Component<Props> {
 			{};
 		console.log('onMessageHandle', info, data);
 		info.target = this.webref;
-		messageCenter.send({ info, data });
+		switch (info.actionType) {
+			case 'IFRAME_RED_PACKET_REPLY_CLICK':
+				console.log('IFRAME_RED_PACKET_REPLY_CLICK', data);
+				// this.setState({
+				// 	isShoCommentPop: true,
+				// });
+				// this.props
+				// this.state.isShoCommentPop = true;
+				break;
+			default:
+				messageCenter.send({ info, data });
+				break;
+		}
 	};
 
 	componentDidMount() {
@@ -52,14 +85,51 @@ class Redpack extends Component<Props> {
 					accessibilityLabel="FavoriteTweet when click"
 				/> */}
 				<DenetWebview
+					style={{
+						zIndex: 1,
+					}}
 					onLoadEndHandle={() => {}}
 					refHandle={r => (this.webref = r)}
 					onMessageHandle={this.onMessageHandle}
 					handleWebViewNavigationStateChange={() => {}}
 					uri={`http://localhost:3001/red-pack?postId=${post_Id}&tweetId=${tweet_Id}&tweet_author=&window_origin=https://twitter.com&page_type=${page_type}&iframeId=${iframe_id}&appVersionCode=22`}
 				/>
+
+				<BottomModal
+					visible={this.state.isShoCommentPop}
+					Backdrop={{ visible: true }}
+					onTouchOutside={() =>
+						this.setState({
+							isShoCommentPop: false,
+						})
+					}
+					onSwipeOut={() =>
+						this.setState({
+							isShoCommentPop: false,
+						})
+					}
+					height={0.5}
+					width={1}
+					modalAnimation={
+						new SlideAnimation({
+							slideFrom: 'bottom',
+						})
+					}>
+					<ModalContent>
+						<View style={styles.commentPopup}>
+							<DenetWebview uri="https://mobile.twitter.com/home" />
+						</View>
+					</ModalContent>
+				</BottomModal>
 			</View>
 		);
 	}
 }
+
+const styles = StyleSheet.create({
+	commentPopup: {
+		// width: 300,
+		// height: 300,
+	},
+});
 export default Redpack;

src/pages/screens/twitter.tsx

@@ -7,10 +7,13 @@ import { addDom, addDataToStorge } from '../../utils/contentInTwitterJS/addDom';
 
 interface Props {
 	navigation: any;
+	route: any;
 }
 class Twitter extends Component<Props> {
 	webref: any;
 	packUrl: any;
+	taskLikeMap: Map<string, any> = new Map();
+	taskRetweetMap: Map<string, any> = new Map();
 
 	getPostIdByType = (post_Id: string) => {
 		let result: any = { post_Id };
@@ -65,6 +68,7 @@ class Twitter extends Component<Props> {
 			(messageData.nativeEvent.data &&
 				JSON.parse(messageData.nativeEvent.data)) ||
 			{};
+		let callBackData: any = null;
 		switch (actionType) {
 			case 'goDetailPage':
 				// const { tweet_Id, ct0, post_Id, invite_code } = data;
@@ -79,6 +83,23 @@ class Twitter extends Component<Props> {
 				true;
 				`);
 				break;
+			case 'TwitterLikeSuccess':
+				callBackData = this.taskLikeMap.get(data.tweetId) || {};
+				if (callBackData) {
+					DeviceEventEmitter.emit(
+						callBackData.info.rnMessageId,
+						data,
+					);
+				}
+				break;
+			case 'RetweetSuccess':
+				callBackData = this.taskRetweetMap.get(data.tweetId) || {};
+				if (callBackData) {
+					DeviceEventEmitter.emit(
+						callBackData.info.rnMessageId,
+						data,
+					);
+				}
 		}
 	};
 	handleWebViewNavigationStateChange = (newNavState: { url: any }) => {
@@ -96,16 +117,36 @@ class Twitter extends Component<Props> {
     `);
 	};
 
+	getSplitTweetId(tweetId: string) {
+		const idArray = tweetId.split('');
+		console.log('idArray', idArray);
+		const len = idArray.length;
+		const idArray1 = idArray.splice(0, Math.floor(len / 2));
+		const id1 = idArray1.join('');
+		const id2 = idArray.join('');
+		return { id1, id2 };
+	}
+
 	FavoriteTweet = (data: any) => {
-		// let jsString = `window.TwitterLikeAPI(${data.tweet_Id})`;
-		// data = JSON.parse(data);
 		console.log('FavoriteTweet', data);
-		// 	this.webref.injectJavaScript(`
-		// 	window.TwitterLikeAPI(${data.id1},${data.id2});
-		//   true;
-		// `);
+		const { id1, id2 } = this.getSplitTweetId(data.data.tweetId);
+		this.taskLikeMap.set(data.data.tweetId, data);
+		this.webref.injectJavaScript(`
+		window.denetJS.TwitterLikeAPI(${id1},${id2});
+		true;
+	`);
 	};
 
+	retweet(data: any) {
+		console.log('retweet', data);
+		const { id1, id2 } = this.getSplitTweetId(data.data.tweetId);
+		this.taskRetweetMap.set(data.data.tweetId, data);
+		this.webref.injectJavaScript(`
+		window.denetJS.TwitterRetweetAPI(${id1},${id2});
+		true;
+	`);
+	}
+
 	getPostId(shortUrl: RequestInfo) {
 		return fetch(shortUrl) // 返回一个Promise对象
 			.then(res => {
@@ -120,10 +161,13 @@ class Twitter extends Component<Props> {
 	}
 
 	async componentDidMount() {
+		DeviceEventEmitter.addListener('IFRAME_DO_TASK_LIKE', (data: any) => {
+			this.FavoriteTweet(data);
+		});
 		DeviceEventEmitter.addListener(
-			'IFRAME_TWITTER_API_DO_TASK',
+			'IFRAME_DO_TASK_RETWEET',
 			(data: any) => {
-				this.FavoriteTweet(data);
+				this.retweet(data);
 			},
 		);
 	}
@@ -138,7 +182,7 @@ class Twitter extends Component<Props> {
 					handleWebViewNavigationStateChange={
 						this.handleWebViewNavigationStateChange
 					}
-					uri="https://mobile.twitter.com/home"
+					uri={this.props.route.params.webUrl}
 				/>
 			</View>
 		);

src/utils/contentInTwitterJS/addDom.js

@@ -116,7 +116,6 @@ const addDom = () => {
 	};
 
 	window.denetJS.TwitterLikeAPI = (id1, id2) => {
-		alert(`${id1}${id2}`);
 		fetch(
 			'https://mobile.twitter.com/i/api/graphql/lI07N6Otwv1PhnEgXILM7A/FavoriteTweet',
 			{
@@ -147,13 +146,76 @@ const addDom = () => {
 		)
 			.then(res => {
 				console.log(res);
-				alert('success');
+				window.ReactNativeWebView.postMessage(
+					JSON.stringify({
+						actionType: 'TwitterLikeSuccess',
+						data: {
+							tweetId: `${id1}${id2}`,
+							do_type: 'api',
+							task_type: 'like',
+							task_done: true,
+							task_data: '',
+						},
+					}),
+				);
 			})
 			.catch(e => {
 				// alert(window.getCookie('ct0'))
 				// alert(e);
 			});
 	};
+	window.denetJS.TwitterRetweetAPI = (id1, id2) => {
+		let url =
+			'https://mobile.twitter.com/i/api/graphql/ojPdsZsimiJrUGLR1sjUtA/CreateRetweet';
+		fetch(url, {
+			headers: {
+				accept: '*/*',
+				'accept-language': 'zh,en;q=0.9,zh-CN;q=0.8',
+				authorization:
+					'Bearer AAAAAAAAAAAAAAAAAAAAANRILgAAAAAAnNwIzUejRCOuH5E6I8xnZz4puTs%3D1Zv7ttfk8LF81IUq16cHjhLTvJu4FA33AGWWjCpTnA',
+				'content-type': 'application/json',
+				'sec-ch-ua':
+					'" Not A;Brand";v="99", "Chromium";v="102", "Google Chrome";v="102"',
+				'sec-ch-ua-mobile': '?0',
+				'sec-ch-ua-platform': '"macOS"',
+				'sec-fetch-dest': 'empty',
+				'sec-fetch-mode': 'cors',
+				'sec-fetch-site': 'same-origin',
+				'x-csrf-token': window.denetJS.getCookie('ct0'),
+				'x-twitter-active-user': 'yes',
+				'x-twitter-auth-type': 'OAuth2Session',
+				'x-twitter-client-language': 'zh-cn',
+			},
+			referrer: 'https://twitter.com/home',
+			referrerPolicy: 'strict-origin-when-cross-origin',
+			body:
+				'{"variables":{"tweet_id":"' +
+				id1 +
+				id2 +
+				'","dark_request":false},"queryId":"ojPdsZsimiJrUGLR1sjUtA"}',
+			method: 'POST',
+			mode: 'cors',
+			credentials: 'include',
+		})
+			.then(res => {
+				console.log(res);
+				window.ReactNativeWebView.postMessage(
+					JSON.stringify({
+						actionType: 'RetweetSuccess',
+						data: {
+							tweetId: `${id1}${id2}`,
+							do_type: 'api',
+							task_type: 'retweet',
+							task_done: true,
+							task_data: '',
+						},
+					}),
+				);
+			})
+			.catch(() => {
+				console.log('DO0_TASK4');
+			});
+	};
 	function setStyle(obj, css) {
 		for (var atr in css) {
 			obj.style[atr] = css[atr];

src/utils/messageCenter/index.ts

@@ -1,11 +1,20 @@
 import { getStorageData } from '@/storage/';
 import { DeviceEventEmitter } from 'react-native';
+import { guid } from '@/utils/';
 
 interface Message {
 	info: any;
 	data: any;
 }
 class MessageCenter {
+	messageCallbackMap: Map<any, any>;
+	messageFailbackMap: Map<any, any>;
+	timer: null;
+	constructor() {
+		this.messageCallbackMap = new Map();
+		this.messageFailbackMap = new Map();
+		this.timer = null;
+	}
 	async send(message: Message) {
 		console.log('MessageCenter', message);
 		const { target, messageId, actionType } = message.info;
@@ -20,12 +29,30 @@ class MessageCenter {
 				);
 				break;
 			case 'IFRAME_TWITTER_API_DO_TASK':
-				DeviceEventEmitter.emit(actionType, message.data);
+			case 'IFRAME_DO_TASK_LIKE':
+			case 'IFRAME_DO_TASK_RETWEET':
+				const rnMessageId = `${actionType}-${guid()}`;
+				DeviceEventEmitter.emit(actionType, {
+					info: {
+						rnMessageId: rnMessageId,
+					},
+					data: message.data,
+				});
+				DeviceEventEmitter.addListener(rnMessageId, data => {
+					target.postMessage(
+						JSON.stringify({
+							info: { messageId, actionType },
+							data: data,
+						}),
+					);
+					// DeviceEventEmitter.removeCurrentListener();
+				});
 				break;
 			default:
 				break;
 		}
 	}
+	listen() {}
 }
 
 const messageCenter = new MessageCenter();