Merge pull request #526 from bounswe/mobile-main-updated-portfolio

Portfolio Screen & Asset Details
bounswe · Dec 15, 2024 · 8036eff · 8036eff
2 parents 16b7085 + 73c01a9
commit 8036eff
Show file tree

Hide file tree

Showing 12 changed files with 172 additions and 100 deletions.
diff --git a/mobile/tradeverse/auth/context/auth-context.jsx b/mobile/tradeverse/auth/context/auth-context.jsx
@@ -1,5 +1,24 @@
-import { createContext } from 'react'
+import React, { createContext, useState } from 'react';
 
-const AuthContext = createContext()
+const AuthContext = createContext();
+
+export const AuthProvider = ({ children }) => {
+  const [user, setUser] = useState(null); // Current user state
+  const [portfolioRefreshTrigger, setPortfolioRefreshTrigger] = useState(0); // Trigger state for portfolio updates
+
+  const value = {
+    user,
+    setUser,
+    portfolioRefreshTrigger,
+    setPortfolioRefreshTrigger,
+  };
+
+  return (
+    <AuthContext.Provider value={value}>
+      {children}
+    </AuthContext.Provider>
+  );
+};
+
+export default AuthContext;
 
-export default AuthContext
diff --git a/mobile/tradeverse/components/ui/global-screen.jsx b/mobile/tradeverse/components/ui/global-screen.jsx
@@ -15,6 +15,7 @@ export default function GlobalScreen({
       <PaddedContainer
         style={[
           { paddingTop: platform == 'android' ? 72 : paddingTop },
+
           containerStyle,
         ]}
       >

diff --git a/mobile/tradeverse/screens/add-asset/_components/AssetSuggestion.jsx b/mobile/tradeverse/screens/add-asset/_components/AssetSuggestion.jsx
@@ -148,6 +148,7 @@ const AutoSuggestInput = ({ debounceDelay = 300, onSelect = () => {} }) => {
                     </View>
 
                     <AssetLink asset={item}>
+
                       <IconInfoCircleFilled
                         fill={COLORS.primary500}
                         strokeWidth={0}

diff --git a/mobile/tradeverse/screens/add-asset/index.jsx b/mobile/tradeverse/screens/add-asset/index.jsx
@@ -22,25 +22,27 @@ export default function AddAssetScreen() {
   const [amount, setAmount] = useState('')
   const [filteredAssets, setFilteredAssets] = useState([])
   const [loading, setLoading] = useState(false)
-  const { user } = useContext(AuthContext)
+  const { user, setPortfolioRefreshTrigger } = useContext(AuthContext)
   const dispatch = useDispatch()
 
   const handleAddToPortfolio = async () => {
     if (!asset || !amount) {
-      Alert.alert('Error', 'Please enter asset and amount')
-      return
+      Alert.alert('Error', 'Please enter asset and amount');
+      return;
     }
     const res = await addAsset({
       username: user?.username,
       assetId: asset?.id,
       amount,
-    })
+    });
     if (res.successful) {
-      dispatch(showToast({ text: res?.message }))
-      router.back()
+      dispatch(showToast({ text: res?.message }));
+      setPortfolioRefreshTrigger((prev) => prev + 1); // Increment the trigger
+      router.back();
+    } else {
+      console.error('Add Asset Error:', res.message);
     }
-    console.log(res)
-  }
+  };
 
   return (
     <GlobalScreen>

diff --git a/mobile/tradeverse/screens/asset-detail/_components/AssetInfoView.jsx b/mobile/tradeverse/screens/asset-detail/_components/AssetInfoView.jsx
@@ -4,25 +4,40 @@ import { WebView } from 'react-native-webview'
 export default function AssetInfoView({ symbol }) {
   return (
     <WebView
-      style={{}}
+      style={{ flex: 1 }}
+      scalesPageToFit={true}
+      javaScriptEnabled={true}
+      domStorageEnabled={true}
       source={{
-        html: `<!-- TradingView Widget BEGIN -->
-      <div class="tradingview-widget-container" style="border:none;">
-        <div class="tradingview-widget-container__widget"></div>
-        <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-symbol-profile.js" async>
-        {
-        "width": "100%",
-        "height": "100%",
-        "autosize": true,
-        "isTransparent": true,
-        "colorTheme": "light",
-        "symbol": "${symbol}",
-        "locale": "en"
-      }
-        </script>
-      </div>
-      <!-- TradingView Widget END -->`,
+        html: `
+        <html>
+          <head>
+            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+          </head>
+          <body>
+            <!-- TradingView Widget BEGIN -->
+            <div class="tradingview-widget-container" style="border:none;">
+              <div class="tradingview-widget-container__widget"></div>
+              <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-symbol-profile.js" async>
+              {
+                "width": "100%",
+                "height": "100%",
+                "autosize": true,
+                "isTransparent": true,
+                "colorTheme": "light",
+                "symbol": "${symbol}",
+                "locale": "en"
+              }
+              </script>
+            </div>
+            <!-- TradingView Widget END -->
+          </body>
+        </html>
+        `,
       }}
+      originWhitelist={['*']}
     />
   )
 }
+
+
diff --git a/mobile/tradeverse/screens/asset-detail/_components/ChartView.jsx b/mobile/tradeverse/screens/asset-detail/_components/ChartView.jsx
@@ -2,34 +2,42 @@ import React from 'react'
 import { WebView } from 'react-native-webview'
 
 export default function ChartView({ symbol, dateRange }) {
-  const uri = `https://www.tradingview.com/symbols/${symbol}/`
   return (
     <WebView
-      style={{}}
+      style={{ flex: 1 }}
+      scalesPageToFit={true}
+      javaScriptEnabled={true}
+      domStorageEnabled={true}
       source={{
         html: `
-        
-      <!-- TradingView Widget BEGIN -->
-<div class="tradingview-widget-container" style="pointer-events:none;">
-  <div class="tradingview-widget-container__widget"></div>
-  <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-mini-symbol-overview.js" async>
-  {
-  "symbol": "${symbol}",
-  "width": "100%",
-  "height": "100%",
-  "locale": "en",
-  "dateRange": "${dateRange}",
-  "colorTheme": "light",
-  "isTransparent": true,
-  "autosize": true,
-  "largeChartUrl": ""
-}
-  </script>
-</div>
-<!-- TradingView Widget END -->
-        
+        <html>
+          <head>
+            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+          </head>
+          <body>
+            <!-- TradingView Widget BEGIN -->
+            <div class="tradingview-widget-container" style="pointer-events:none;">
+              <div class="tradingview-widget-container__widget"></div>
+              <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-mini-symbol-overview.js" async>
+              {
+                "symbol": "${symbol}",
+                "width": "100%",
+                "height": "100%",
+                "locale": "en",
+                "dateRange": "${dateRange}",
+                "colorTheme": "light",
+                "isTransparent": true,
+                "autosize": true,
+                "largeChartUrl": ""
+              }
+              </script>
+            </div>
+            <!-- TradingView Widget END -->
+          </body>
+        </html>
         `,
       }}
+      originWhitelist={['*']}
     />
   )
 }
diff --git a/mobile/tradeverse/screens/asset-detail/_components/NewsView.jsx b/mobile/tradeverse/screens/asset-detail/_components/NewsView.jsx
@@ -4,27 +4,44 @@ import { WebView } from 'react-native-webview'
 export default function NewsView({ symbol }) {
   return (
     <WebView
-      style={{}}
+      style={{ flex: 1 }}
+      scalesPageToFit={true}
+      javaScriptEnabled={true}
+      domStorageEnabled={true}
       source={{
-        html: `<!-- TradingView Widget BEGIN -->
-<div class="tradingview-widget-container">
-  <div class="tradingview-widget-container__widget"></div>
-  <div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/" rel="noopener nofollow" target="_blank"><span class="blue-text">Track all markets on TradingView</span></a></div>
-  <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-timeline.js" async>
-  {
-  "feedMode": "symbol",
-  "symbol": "${symbol}",
-  "isTransparent": false,
-  "displayMode": "regular",
-  "width": "100%",
-  "height": "100%",
-  "colorTheme": "light",
-  "locale": "en"
-}
-  </script>
-</div>
-<!-- TradingView Widget END -->`,
+        html: `
+        <html>
+          <head>
+            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+          </head>
+          <body>
+            <!-- TradingView Widget BEGIN -->
+            <div class="tradingview-widget-container">
+              <div class="tradingview-widget-container__widget"></div>
+              <div class="tradingview-widget-copyright">
+                <a href="https://www.tradingview.com/" rel="noopener nofollow" target="_blank">
+                  <span class="blue-text">Track all markets on TradingView</span>
+                </a>
+              </div>
+              <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-timeline.js" async>
+              {
+                "feedMode": "symbol",
+                "symbol": "${symbol}",
+                "isTransparent": false,
+                "displayMode": "regular",
+                "width": "100%",
+                "height": "100%",
+                "colorTheme": "light",
+                "locale": "en"
+              }
+              </script>
+            </div>
+            <!-- TradingView Widget END -->
+          </body>
+        </html>
+        `,
       }}
+      originWhitelist={['*']}
     />
   )
 }
diff --git a/mobile/tradeverse/screens/asset-detail/index.jsx b/mobile/tradeverse/screens/asset-detail/index.jsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react'
-import { View, Text, StyleSheet, Image } from 'react-native'
-import { IconCaretDownFilled } from '@tabler/icons-react-native'
-import { Stack, useLocalSearchParams } from 'expo-router'
+import { View, Text, StyleSheet, Image, TouchableOpacity } from 'react-native'
+import { IconCaretDownFilled, IconArrowLeft } from '@tabler/icons-react-native'
+import { Stack, useLocalSearchParams, router } from 'expo-router'
 import GlobalScreen from '../../components/ui/global-screen'
 import { COLORS, SIZE_CONSTANT, SIZES } from '../../constants/theme'
 import { getAssetDetail } from '../../services/asset'
@@ -11,7 +11,9 @@ import PaddedContainer from '../../components/ui/padded-container'
 import DateRange from './_components/DateRange'
 import AssetInfoView from './_components/AssetInfoView'
 import NewsView from './_components/NewsView'
-import Header from '../../components/ui/header'
+
+import FullScrollView from '../../components/ui/full-scroll-view';
+
 
 const AssetDisplay = () => {
   const [asset, setAsset] = useState(null)
@@ -26,35 +28,37 @@ const AssetDisplay = () => {
   }, [assetId, symbol])
 
   return (
+
     <GlobalScreen containerStyle={{ paddingHorizontal: 0 }}>
       <Header title={symbol} />
 
-      <PaddedContainer style={{ paddingHorizontal: 12 }}>
-        <View style={styles.row}>
-          <View style={styles.rowInfo}>
-            <View>
-              <Text style={styles.assetSymbol}>{symbol}</Text>
-              <Text style={styles.assetName}>{name}</Text>
+          <PaddedContainer style={{ paddingHorizontal: 12 }}>
+            <View style={styles.row}>
+              <View style={styles.rowInfo}>
+                <View>
+                  <Text style={styles.assetSymbol}>{symbol}</Text>
+                  <Text style={styles.assetName}>{name}</Text>
+                </View>
+              </View>
+              <DateRange
+                dateRange={dateRange}
+                onSelect={(r) => {
+                  setDateRange(r)
+                }}
+              />
             </View>
+          </PaddedContainer>
+          <View style={{ width: '100%', height: 190, zIndex: -1 }}>
+            <ChartView symbol={symbol} dateRange={dateRange} />
+          </View>
+          <View style={{ width: '100%', height: 210, zIndex: -1 }}>
+            <AssetInfoView symbol={symbol} />
+          </View>
+          <View style={{ width: '100%', height: 250, zIndex: -1 }}>
+            <NewsView symbol={symbol} />
           </View>
-          <DateRange
-            dateRange={dateRange}
-            onSelect={(r) => {
-              setDateRange(r)
-            }}
-          />
-        </View>
-      </PaddedContainer>
-      <View style={{ width: '100%', height: 200, zIndex: -1 }}>
-        <ChartView symbol={symbol} dateRange={dateRange} />
-      </View>
-      <View style={{ width: '100%', height: 200, zIndex: -1 }}>
-        <AssetInfoView symbol={symbol} />
-      </View>
-      <View style={{ width: '100%', height: 200, zIndex: -1 }}>
-        <NewsView symbol={symbol} />
-      </View>
-      <View style={styles.container}></View>
+          <View style={styles.container}></View>
+      </FullScrollView>
     </GlobalScreen>
   )
 }

diff --git a/mobile/tradeverse/screens/portfolio/index.jsx b/mobile/tradeverse/screens/portfolio/index.jsx
@@ -20,6 +20,7 @@ import AssetCard from './_components/asset-card'
 const PortfolioScreen = () => {
   const [data, setData] = useState([])
   const [loading, setLoading] = useState(true)
+
   const [refreshCount, setRefreshCount] = useState(0)
   const { user } = useContext(AuthContext)
 

diff --git a/mobile/tradeverse/screens/profile/index.jsx b/mobile/tradeverse/screens/profile/index.jsx
@@ -24,6 +24,7 @@ const ProfileHeader = () => {
 
   useEffect(() => {
 
+
     const fetchUserData = async () => {
       const profileResult = await getUserByUsername(username); // Ensure this fetches fresh data
       const postsResult = await getPostsByUser(username);
@@ -81,7 +82,7 @@ const ProfileHeader = () => {
               <Text style={styles.statLabel}>Followers</Text>
             </View>
             <View style={styles.stat}>
-              <Text style={styles.statNumber}>
+              xt style={styles.statNumber}>
                 {profile?.totalPosts ?? profile?.posts?.length}
               </Text>
               <Text style={styles.statLabel}>Posts</Text>

diff --git a/mobile/tradeverse/services/asset.js b/mobile/tradeverse/services/asset.js
@@ -4,13 +4,14 @@ import api from './_axios'
 export async function getAssetDetail({ id }) {
   try {
     const response = await api({
-      url: `/asset/detail/${id}`,
+      url: `/asset/details/${id}`,
       method: 'GET',
     })
 
     return response.data
   } catch (error) {
     console.log('Get Asset Detail Failed', error)
+    console.log('----------------------------------')
   }
   return null
 }