commit env

.env

@@ -0,0 +1,2 @@
+REACT_APP_FETCH_LANDPAGE_API_HOST = https://testapi.denetme.net
+REACT_APP_FETCH_EXTENSION_API_HOST = https://testapi.denetme.net

App.tsx

@@ -16,7 +16,7 @@ class App extends Component {
 				<NavigationContainer>
 					<stackNavigator.Navigator>
 						<stackNavigator.Screen
-							name="Home"
+							name="HomeTab"
 							component={NavTabScreen}
 							options={{
 								headerShown: false,

babel.config.js

@@ -24,5 +24,13 @@ module.exports = {
 				extensions: ['.svg'],
 			},
 		],
+		[
+			'module:react-native-dotenv',
+			{
+				envName: 'APP_ENV',
+				moduleName: '@env',
+				path: '.env',
+			},
+		],
 	],
 };

index.js

@@ -5,5 +5,6 @@
 import { AppRegistry } from 'react-native';
 import App from './App';
 import { name as appName } from './app.json';
+console.log('NODE_ENV ===== ', process.env.NODE_ENV);
 
 AppRegistry.registerComponent(appName, () => App);

package.json

@@ -17,9 +17,11 @@
     "@react-navigation/native-stack": "^6.7.0",
     "axios": "^0.27.2",
     "babel-plugin-inline-import": "^3.0.0",
+    "cross-env": "^7.0.3",
     "react": "18.0.0",
     "react-native": "0.69.2",
     "react-native-cookie": "^0.3.0",
+    "react-native-dotenv": "^3.3.1",
     "react-native-eventemitter": "^0.0.1",
     "react-native-linear-gradient": "^2.6.2",
     "react-native-safe-area-context": "^4.3.1",

src/components/nftGroupCard.tsx

@@ -0,0 +1,67 @@
+/**
+ * 首页 NFT Group 卡片
+ */
+import React, { useState, useEffect } from 'react';
+import { postRequest } from '@/netWork/index';
+import { getStorageData, setStorageData } from '@/storage/index';
+import { Alert, Image, StyleSheet, Text, View } from 'react-native';
+
+export const NftGroupCard = (props: any) => {
+	return (
+		<View style={styles.groupCard}>
+			{props.nftData.length > 0 && (
+				<Text style={styles.title}>NFT Group</Text>
+			)}
+			<View style={styles.groupList}>
+				{props.nftData.map(
+					(item: {
+						nftGroupId: any;
+						nftGroupIcon: any;
+						nftGroupName: String;
+					}) => (
+						<View style={styles.groupItem} key={item.nftGroupId}>
+							<Image
+								style={styles.groupIcon}
+								source={{ uri: item.nftGroupIcon }}
+							/>
+							<Text style={styles.groupName}>
+								{item.nftGroupName}
+							</Text>
+						</View>
+					),
+				)}
+			</View>
+		</View>
+	);
+};
+const styles = StyleSheet.create({
+	groupCard: {
+		flex: 1,
+		paddingLeft: 16,
+		paddingRight: 16,
+	},
+	groupList: {
+		backgroundColor: '#fff',
+		borderRadius: 10,
+	},
+	groupItem: {
+		paddingTop: 17,
+		paddingBottom: 17,
+		paddingLeft: 20,
+		paddingRight: 20,
+		flexDirection: 'row',
+	},
+	title: {
+		marginTop: 25,
+		marginBottom: 8,
+	},
+	groupIcon: {
+		width: 30,
+		height: 30,
+		marginRight: 20,
+	},
+	groupName: {
+		height: 30,
+		lineHeight: 30,
+	},
+});

src/components/useLogin.tsx

@@ -26,9 +26,7 @@ export const useLoginCom = (props: any) => {
 		let params = {
 			oauthCallback: 'https://testh5.denetme.net/authloginApp',
 		};
-		postRequest('/denet/user/twitterRequestToken', {
-			params,
-		})
+		postRequest('/denet/user/twitterRequestToken', params)
 			.then((res: any) => {
 				setLoginParamsData(res.data);
 				if (res.code === 0) {
@@ -49,11 +47,9 @@ export const useLoginCom = (props: any) => {
 		setLoading(true);
 		if (verifier) {
 			postRequest('/denet/user/twitterLogin', {
-				params: {
-					consumerKey: loginParams.consumerKey,
-					oauthToken: loginParams.authToken,
-					oauthVerifier: verifier,
-				},
+				consumerKey: loginParams.consumerKey,
+				oauthToken: loginParams.authToken,
+				oauthVerifier: verifier,
 			})
 				.then(({ code, data }) => {
 					if (code === 0) {
@@ -94,7 +90,6 @@ export const useLoginCom = (props: any) => {
 	useEffect(() => {
 		const unsubscribe = props.navigation.addListener('focus', async () => {
 			const user = await getStorageData('userInfo');
-			console.log('userInfo', user);
 			if (user.verifier) {
 				setIsLogin(false);
 				twitterLogin(user.verifier);

src/netWork/index.ts

@@ -2,9 +2,10 @@
 import axios from 'axios';
 import { getMid } from '@/utils/';
 import { getStorageData } from '../storage';
+import { REACT_APP_FETCH_LANDPAGE_API_HOST } from '@env';
 
 const instance = axios.create({
-	baseURL: 'https://testapi.denetme.net',
+	baseURL: REACT_APP_FETCH_LANDPAGE_API_HOST,
 	timeout: 240000,
 	headers: {
 		'content-type': 'application/json',
@@ -38,7 +39,9 @@ export const postRequest = async (url: any, params = {}, config = null) => {
 				appType: 3,
 			},
 		},
-		params,
+		{
+			params,
+		},
 	);
 
 	return instance

src/netWork/nft.tsx

@@ -1,5 +1,5 @@
-import { postRequest } from '@/netWork/';
+import { postRequest } from '@/netWork';
 
 export const listJoinNftGroup = (params: {}) => {
-	return postRequest('/nft/group/listJoinNftGroup', params);
+	return postRequest('/denet/nft/group/listJoinNftGroup', params);
 };

src/netWork/request.ts

@@ -0,0 +1,54 @@
+// import {APPTYPE} from '@/utils';
+import axios from 'axios';
+import { getMid } from '@/utils/';
+import { getStorageData } from '../storage';
+import { REACT_APP_FETCH_EXTENSION_API_HOST } from '@env';
+
+console.log('REACT_APP_FETCH_HOST==', REACT_APP_FETCH_EXTENSION_API_HOST);
+const instance = axios.create({
+	baseURL: REACT_APP_FETCH_EXTENSION_API_HOST,
+	timeout: 240000,
+	headers: {
+		'content-type': 'application/json',
+		Accept: 'application/json',
+	},
+});
+
+instance.interceptors.response.use(
+	res => {
+		return res.data;
+	},
+	function (err) {
+		return Promise.reject(err);
+	},
+);
+
+export const postRequest = async (url: any, params = {}, config = null) => {
+	const mid = await getMid();
+	const userInfo = await getStorageData('userInfo');
+	const myConfig = {};
+	if (config) {
+		Object.assign(myConfig, config);
+	}
+	params = Object.assign(
+		{
+			baseInfo: {
+				mid: mid,
+				machineCode: mid,
+				loginUid: userInfo?.uid || '',
+				token: userInfo?.accessToken || '',
+				appType: 3,
+			},
+		},
+		params,
+	);
+
+	return instance
+		.post(url, params, myConfig)
+		.then(res => {
+			return res;
+		})
+		.catch(err => {
+			return err;
+		});
+};

src/pages/navigations/NFTs.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import {Text, View} from 'react-native';
+import { Text, View } from 'react-native';
 
 const NFTs = () => {
 	return (
-		<View style={{flex: 1}}>
+		<View style={{ flex: 1 }}>
 			<Text>NFTs page</Text>
 		</View>
 	);

src/pages/navigations/home.tsx

@@ -1,19 +1,20 @@
-import React, {useEffect, useState} from 'react';
-import {Alert, Button, StyleSheet, View} from 'react-native';
-import {SafeAreaView} from 'react-native-safe-area-context';
+import React, { useEffect, useState } from 'react';
+import { Alert, Button, StyleSheet, View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import LinearGradient from 'react-native-linear-gradient';
-import {postRequest} from '@/netWork/';
-import {getStorageData, setStorageData} from '@/storage/';
-import {useLoginCom} from '@/components/useLogin';
-import {listJoinNftGroup} from '@/netWork/nft';
+import { postRequest } from '@/netWork/';
+import { getStorageData, setStorageData } from '@/storage/';
+import { useLoginCom } from '@/components/useLogin';
+import { NftGroupCard } from '@/components/nftGroupCard';
 
 interface Props {
 	navigation: any;
 }
 
 const Home = (props: Props) => {
-	const {isLogin, loading, userInfo, goTwitterAuthorize} = useLoginCom(props);
-	const [nftData, setNftData] = useState({});
+	const { isLogin, loading, userInfo, goTwitterAuthorize } =
+		useLoginCom(props);
+	const [nftData, setNftData] = useState([]);
 
 	const goTwitter = () => {
 		if (isLogin) {
@@ -24,19 +25,21 @@ const Home = (props: Props) => {
 	};
 
 	useEffect(() => {
-		isLogin &&
-			listJoinNftGroup({
+		if (isLogin) {
+			postRequest('/denet/nft/group/listJoinNftGroup', {
 				pageNum: 1,
 				pageSize: 100,
 			}).then((res: any) => {
 				console.log('nftData', res);
+				setNftData(res.data);
 			});
-	}, []);
+		}
+	}, [props.navigation, isLogin]);
 
 	return (
 		<LinearGradient
 			colors={['#91CAFF', '#ECF6FF', '#FFFFFF']}
-			style={{flex: 1}}>
+			style={{ flex: 1 }}>
 			<SafeAreaView style={styles.container}>
 				<View style={styles.TwitterBtnWrap}>
 					<Button
@@ -46,6 +49,9 @@ const Home = (props: Props) => {
 						accessibilityLabel="go Web3 Twitter"
 					/>
 				</View>
+				<View style={{ flexDirection: 'row' }}>
+					<NftGroupCard nftData={nftData} />
+				</View>
 			</SafeAreaView>
 		</LinearGradient>
 	);

src/pages/navigations/me.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import {Button, Image, StyleSheet, Text, View} from 'react-native';
-import {useLoginCom} from '@/components/useLogin';
+import { Button, Image, StyleSheet, Text, View } from 'react-native';
+import { useLoginCom } from '@/components/useLogin';
 
 const Me = (props: any) => {
-	const {isLogin, loading, userInfo, goTwitterAuthorize, logOut} =
+	const { isLogin, loading, userInfo, goTwitterAuthorize, logOut } =
 		useLoginCom(props);
 	return (
 		<>

src/pages/navigations/message.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import {Text, View} from 'react-native';
+import { Text, View } from 'react-native';
 
 const Message = () => {
 	return (
-		<View style={{flex: 1}}>
+		<View style={{ flex: 1 }}>
 			<Text>Message page</Text>
 		</View>
 	);

src/pages/navigations/wallet.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import {Text, View} from 'react-native';
+import { Text, View } from 'react-native';
 
 const Wallet = () => {
 	return (
-		<View style={{flex: 1}}>
+		<View style={{ flex: 1 }}>
 			<Text>Wallet page</Text>
 		</View>
 	);

src/router/index.tsx

@@ -38,7 +38,7 @@ export const NavTabScreen = () => {
 						);
 					},
 				}}
-				name="HomeTab"
+				name="Home"
 				component={Home}
 			/>
 			<Tab.Screen

yarn.lock

@@ -2600,6 +2600,13 @@ cosmiconfig@^5.0.5, cosmiconfig@^5.1.0:
     js-yaml "^3.13.1"
     parse-json "^4.0.0"
 
+cross-env@^7.0.3:
+  version "7.0.3"
+  resolved "https://registry.npmmirror.com/cross-env/-/cross-env-7.0.3.tgz#865264b29677dc015ba8418918965dd232fc54cf"
+  integrity sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==
+  dependencies:
+    cross-spawn "^7.0.1"
+
 cross-spawn@^6.0.0:
   version "6.0.5"
   resolved "https://registry.npmmirror.com/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4"
@@ -2611,7 +2618,7 @@ cross-spawn@^6.0.0:
     shebang-command "^1.2.0"
     which "^1.2.9"
 
-cross-spawn@^7.0.0, cross-spawn@^7.0.2:
+cross-spawn@^7.0.0, cross-spawn@^7.0.1, cross-spawn@^7.0.2:
   version "7.0.3"
   resolved "https://registry.npmmirror.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
   integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==
@@ -2849,6 +2856,11 @@ domutils@^3.0.1:
     domelementtype "^2.3.0"
     domhandler "^5.0.1"
 
+dotenv@^10.0.0:
+  version "10.0.0"
+  resolved "https://registry.npmmirror.com/dotenv/-/dotenv-10.0.0.tgz#3d4227b8fb95f81096cdd2b66653fb2c7085ba81"
+  integrity sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q==
+
 ee-first@1.1.1:
   version "1.1.1"
   resolved "https://registry.npmmirror.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
@@ -6107,6 +6119,13 @@ react-native-cookie@^0.3.0:
   dependencies:
     cookie "^0.3.1"
 
+react-native-dotenv@^3.3.1:
+  version "3.3.1"
+  resolved "https://registry.npmmirror.com/react-native-dotenv/-/react-native-dotenv-3.3.1.tgz#8f399cf28ca77d860d8e7f7323e439fa60a8ca0b"
+  integrity sha512-gAKXout1XCwCqJ3QPGoQAF2eRzOHgOnwg3x19z+ssow8bDIksJeKBqvoHDyGziVilAIP1J0bEC9Jf+VF8nFang==
+  dependencies:
+    dotenv "^10.0.0"
+
 react-native-eventemitter@^0.0.1:
   version "0.0.1"
   resolved "https://registry.npmmirror.com/react-native-eventemitter/-/react-native-eventemitter-0.0.1.tgz#c9250a1ae2c61a44fe731ffe1463f506294b80be"