be-components 3.5.7 → 3.5.9

package/src/CompetitionManager/index.tsx

@@ -1,9 +1,7 @@
 import React, { useEffect, useState } from 'react';
-import { ScrollView, View, ActivityIndicator, Image } from "react-native"
-import { view_styles } from '../constants/styles';
+import { ScrollView, ActivityIndicator, Image } from "react-native"
 import CompetitionInfoForm from './components/CompetitionInfoForm';
 import type { AthleteProps, CompetitionMatchMarketProps, CompetitionMatchProps, CompetitionPayoutTypeProps, CompetitionProps, CompetitionResultTypeProps, CompetitionSummaryProps, CompetitionTypeProps, EventProps, LeagueProps, MarketProps, MatchProps, MyPlayerProps, TeamProps, TournamentProps, TradeProps } from '../types';
-import Colors from '../constants/colors';
 import { ManageCompetitionApi, ManageCompetitionHelpers, ManageCompetitionMarketApi, ManageCompetitionMatchApi } from './api';
 import CompetitionSettingsForm from './components/CompetitionSettingsForm';
 import CompetitionContestsForm from './components/CompetitionContestsForm';
@@ -12,16 +10,19 @@ import MarketSelector from './components/MarketSelector';
 import AthleteSelector from './components/AthleteSelector';
 import ContestSettingsForm from './components/ContestSettingsForm';
 import CompetitionHeader from './components/CompetitionHeader';
-import { Button, Text } from '../Components';
 import PlayerSelector from './components/PlayerSelector';
+import { Button, Text, View } from '../Components/Themed';
+import { useColors } from '../constants/useColors';
 
 type CompetitionManagerProps = {
     player_id?:string,
     competition_id:string,
+    insets?:{top:number, bottom:number, left:number, right:number},
     onClose:() => void
 }
 
-const CompetitionManager = ({ player_id, competition_id, onClose }:CompetitionManagerProps) => {
+const CompetitionManager = ({ player_id, competition_id, onClose, insets }:CompetitionManagerProps) => {
+    const Colors = useColors();
     const [ module_size, setModuleSize ] = useState({ height:0, width:0 });
     const [ action_loading, setActionLoading ] = useState(false);
     const [ show_athletes, setShowAthletes ] = useState<{
@@ -408,7 +409,7 @@ const CompetitionManager = ({ player_id, competition_id, onClose }:CompetitionMa
     if(!competition || !draft_competition || player_id != competition.admin_id){
         return (
             <View style={{flex:1}}>
-                <ActivityIndicator size='large' color={Colors.brand.midnight} style={{ padding:20, alignSelf:'center' }} />
+                <ActivityIndicator size='large' color={Colors.text.h1} style={{ padding:20, alignSelf:'center' }} />
             </View>
         )
     }
@@ -419,7 +420,7 @@ const CompetitionManager = ({ player_id, competition_id, onClose }:CompetitionMa
                 const { width, height } = ev.nativeEvent.layout;
                 setModuleSize({ height, width })
             }}>
-                <View style={{ ...view_styles.wrapper }}>
+                <View>
                     <CompetitionHeader
                         action_loading={action_loading}
                         width={module_size.width}
@@ -522,19 +523,17 @@ const CompetitionManager = ({ player_id, competition_id, onClose }:CompetitionMa
                     />
                 </View>
             </ScrollView>
-            <View style={{ ...view_styles.section_footer }}>
+            <View type='footer' style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
                 <Button
                     title='CLOSE'
                     style={{ flex:1 }}
-                    title_color={Colors.shades.white}
-                    backgroundColor={Colors.utility.error}
-                    padding={15}
+                    type='close'
                     onPress={() => onClose()}
 
                 />
             </View>
             {show_contests.visible ?
-            <View style={{ position:'absolute', top:0, left:0, right:0, bottom:0, backgroundColor:Colors.shades.black_faded, justifyContent:'flex-end' }}>
+            <View type='blur' style={{ position:'absolute', top:0, left:0, right:0, bottom:0, justifyContent:'flex-end', paddingBottom:insets?.bottom }}>
                 <ContestSelector
                     action_loading={action_loading}
                     height={module_size.height}
@@ -549,7 +548,7 @@ const CompetitionManager = ({ player_id, competition_id, onClose }:CompetitionMa
             </View>
             :<></>}
             {show_athletes.contest_id ? 
-            <View style={{ position:'absolute', top:0, left:0, right:0, bottom:0, backgroundColor:Colors.shades.black_faded, justifyContent:'flex-end' }}>
+            <View style={{ position:'absolute', top:0, left:0, right:0, bottom:0, justifyContent:'flex-end' }}>
                 <AthleteSelector
                     width={module_size.width}
                     height={module_size.height}
@@ -564,7 +563,7 @@ const CompetitionManager = ({ player_id, competition_id, onClose }:CompetitionMa
             </View>
             :<></>}
             {show_pacers ?
-             <View style={{ position:'absolute', top:0, left:0, right:0, bottom:0, backgroundColor:Colors.shades.black_faded, justifyContent:'flex-end' }}>
+             <View style={{ position:'absolute', top:0, left:0, right:0, bottom:0, justifyContent:'flex-end' }}>
              <PlayerSelector
                  height={module_size.height}
                  width={module_size.width}
@@ -583,7 +582,7 @@ const CompetitionManager = ({ player_id, competition_id, onClose }:CompetitionMa
          </View>
             :<></>}
             {show_markets.contest_id && show_markets.contest_type && showing_market_event ?
-            <View style={{ position:'absolute', top:0, left:0, right:0, bottom:0, backgroundColor:Colors.shades.black_faded, justifyContent:'flex-end' }}>
+            <View type='blur' style={{ position:'absolute', top:0, left:0, right:0, bottom:0, justifyContent:'flex-end', paddingBottom:insets?.bottom }}>
                 <MarketSelector
                     height={module_size.height}
                     width={module_size.width}
@@ -596,26 +595,24 @@ const CompetitionManager = ({ player_id, competition_id, onClose }:CompetitionMa
             </View>
             :<></>}
             {competition.status == 'inactive' ?
-            <View style={{ position:'absolute', top:0, left:0, right:0, bottom:0, backgroundColor:Colors.shades.black_faded, justifyContent:'center', alignItems:'center' }}>
-                <View style={{ ...view_styles.section, width: '70%', backgroundColor:Colors.shades.white }}>
-                    <View style={{ ...view_styles.section_header, justifyContent:'center', alignItems:'center', backgroundColor:Colors.shades.shade100 }}>
-                        <Text theme='header'>Competition Has Been Deleted</Text>
+            <View type='blur' style={{ position:'absolute', top:0, left:0, right:0, bottom:0, justifyContent:'center', alignItems:'center' }}>
+                <View float style={{ width: '70%' }}>
+                    <View type='header' style={{ justifyContent:'center', alignItems:'center' }}>
+                        <Text theme='h1'>Competition Has Been Deleted</Text>
                     </View>
-                    <View style={{ ...view_styles.section_body, justifyContent:'center', alignItems:'center' }}>
+                    <View type='body' style={{ justifyContent:'center', alignItems:'center' }}>
                         <Image
                             source={{ uri: competition.image?.url }}
                             style={{ height:75, width: 75 }}
                             resizeMode='cover'
                         />
-                        <Text theme='header_2'>{competition.competition_name}</Text>
+                        <Text theme='h2'>{competition.competition_name}</Text>
                     </View>
-                    <View style={{ ...view_styles.section_footer }}>
+                    <View type='footer' style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
                         <Button
                             title='CLOSE'
                             style={{ flex:1 }}
-                            title_color={Colors.shades.white}
-                            backgroundColor={Colors.utility.error}
-                            padding={15}
+                            type='error'
                             onPress={() => onClose()}
                         />
                     </View>

package/src/MarketComponents/components/OrderBook.tsx

@@ -28,6 +28,7 @@ const OrderBookCard = ({ player_id, orders, market, show_orders, show_grades, on
             buy_sell_ind: 'buy',
             h2h:false,
             h2h_id:undefined,
+            draft_liquidity: order.open_amt,
             open_amt: 10,
             fund_id:undefined,
             expire_datetime: moment().add(1, 'minute')

package/src/ProfileManager/Components/VouchCard.tsx

@@ -1,7 +1,10 @@
 import React, { useEffect, useState } from 'react';
 import { Platform, TouchableOpacity, Image, ScrollView } from 'react-native';
+import { useCameraPermissions } from 'expo-camera';
+import vouchHtml from './Vouchhtml';
 import { Icons } from '../../Components';
 import Colors from '../../constants/colors';
+import { WebView } from "react-native-webview";
 import { ProfileApi, ProfileHelpers } from '../api';
 import moment from 'moment-mini';
 import type { CodeRequestProps, MyPlayerProps, PlayerReferralProps, PromoProps, PublicPlayerProps } from '../../types';
@@ -25,6 +28,7 @@ type VouchCardProps = {
 
 const VouchCard = ({ player, walkthrough, code_details, onVouching, onPlayerUpdate, onClaimGift, onClose }:VouchCardProps) => {
     const C = useColors();
+    const [permission, requestPermission] = useCameraPermissions();
     const [ vouching, setVouching ] = useState(false);
     const [ view_height, setViewHeight ] = useState(0);
     const [ job_complete, setJobComplete ] = useState(false);
@@ -32,7 +36,13 @@ const VouchCard = ({ player, walkthrough, code_details, onVouching, onPlayerUpda
     const [ disclaimer_confirmed, setDisclaimerConfirmed ] = useState(false);
     const [ id_disclaimer_confirmed, setIDDisclaimerConfirmed ] = useState(false);
     const [ info_visible, setInfoVisible ] = useState(false);
-    
+
+    const VOUCH_ID = ProfileApi.getVouchKeys().VOUCH_ID
+    const VOUCHED_CALLBACK_URL = ProfileApi.getVouchKeys().VOUCHED_CALLBACK_URL
+    const VOUCHED_SANDBOX = ProfileApi.getVouchKeys().VOUCHED_SANDBOX
+    const VOUCHED_HTML = vouchHtml({VOUCH_ID, VOUCHED_CALLBACK_URL, VOUCHED_SANDBOX, player})
+
+
     const { code_request, promo } = code_details;
     useEffect(() => {
         getPlayerFromServer()
@@ -88,6 +98,17 @@ const VouchCard = ({ player, walkthrough, code_details, onVouching, onPlayerUpda
     }
 
     const startVouchingPlayer = async() => {
+        if(Platform.OS != 'web'){ 
+            console.log(permission)
+            if(!permission?.granted){
+                await requestPermission();
+                return
+            }
+            //First check for camera permissions
+            
+
+            return setVouching(true); 
+        }
         if(vouching || !player){ return }
         //1) Lets make sure vouched js script has been initialized
         if(!window.Vouched){ return alert('not ready') }
@@ -147,7 +168,30 @@ const VouchCard = ({ player, walkthrough, code_details, onVouching, onPlayerUpda
           }));
     }
 
-    //if(Platform.OS != 'web'){ return <></> }
+    const onMessage = (data:any) => {
+        console.log(data)
+    }
+
+    if(vouching){
+        if(Platform.OS != 'web'){
+            console.log('Rendering Webvewi!!!')
+            return (
+                <View style={{ position:'absolute', top:0, left:0, right:0, bottom:0 }}>
+                    <WebView
+                        source={{ html: VOUCHED_HTML }}
+                        style={{ marginTop: 20, flex:1 }}
+                        originWhitelist={['*']}
+                        //mediaCapturePermissionGrantType='grant'
+                        geolocationEnabled={true}
+                        mediaPlaybackRequiresUserAction={false}
+                        allowsInlineMediaPlayback
+                        javaScriptEnabled={true}
+                        onMessage={m => onMessage(m.nativeEvent.data)}
+                    />
+                </View>
+            )
+        }
+    }
 
     if(vouched){
         return (

package/src/ProfileManager/Components/Vouchhtml.ts

@@ -0,0 +1,87 @@
+import type { MyPlayerProps } from "../../types";
+
+type VouchHtmlProps = {
+  VOUCH_ID:string,
+  VOUCHED_CALLBACK_URL:string,
+  VOUCHED_SANDBOX:boolean,
+  player:MyPlayerProps
+
+}
+const VouchHtml = ({ VOUCH_ID, VOUCHED_CALLBACK_URL, VOUCHED_SANDBOX, player }:VouchHtmlProps) => {
+
+  return (
+    `
+     <!DOCTYPE html>
+      <html>
+      <head>
+          <!-- utf-8 is required for JS Plugin default fonts -->
+          <!-- VOUCHED BALANCED SECURITY SETTINGS -->
+        <meta charset="utf-8" />
+        <meta name=“viewport” content=“width=device-width, initial-scale=1.0">
+        <script src="https://static.vouched.id/plugin/releases/latest/index.js"></script>
+        <script type='text/javascript'>
+          (function() {
+            var vouched = Vouched({
+            // Optional verification properties.
+              verification: {
+                // verify the user's information 
+                firstName: '${player.first_name}',
+                lastName: '${player.last_name}',
+                // used for the crosscheck feature
+                email: '${player.email}',
+                phone: '${player.phone}',
+                enableIPAddress: ${true}
+              },
+              liveness: 'mouth',
+              id: 'camera',
+              includeBarcode: 'true',
+              manualCaptureTimeout: 20000,
+              cameraScreenLabelBackId: 'Please turn ID over to capture back',
+              showTermsAndPrivacy: true,
+              appId:'${VOUCH_ID}',
+            // your webhook for POST verification processing
+              callbackURL: '${VOUCHED_CALLBACK_URL}',
+              sandbox: ${VOUCHED_SANDBOX},
+              // mobile handoff
+              crossDevice: true,
+              crossDeviceQRCode: true,
+              crossDeviceSMS: true,
+              
+              // called when the verification is completed.
+              onDone: (job) => {
+                // token used to query jobs
+                console.log("Scanning complete", { token: job.token });
+      
+                // An alternative way to update your system based on the 
+                // results of the job. Your backend could perform the following:
+                // 1. query jobs with the token
+                // 2. store relevant job information such as the id and 
+                //    success property into the user's profile
+                fetch();
+      
+                // Redirect to the next page based on the job success
+                if( job.result.success){
+                  window.location.replace("");
+                }else{
+                  window.location.replace("");
+                }
+              },
+              
+              // theme
+              theme: {
+                name: 'verbose',
+              },
+            });
+            vouched.mount("#vouched-element");
+          })();
+          </script>
+      </head>
+      <body>
+        <div id='vouched-element' style="height: 100%"/>
+      </body>
+      </html> 
+    `
+  )
+}
+
+export default VouchHtml;