be-components 3.4.4 → 3.4.6

package/src/Share/index.tsx

@@ -1,19 +1,17 @@
 import React, { useEffect, useState } from 'react';
-import Text from '../Components/Text';
-import { View, TouchableOpacity, FlatList, ActivityIndicator, Clipboard, ScrollView, Platform } from 'react-native';
+import { FlatList, ActivityIndicator, ScrollView, Platform } from 'react-native';
+import * as Clipboard from 'expo-clipboard';
 import { view_styles } from '../constants/styles';
-import { Button, Icons, TextInput } from '../Components';
-import Colors from '../constants/colors';
+import { Icons } from '../Components';
 import { ShareApi, ShareHelpers } from './api';
-import type { BEEventProps, GeneratedLinkProps } from '../types';
+import type { BEEventProps, GeneratedLinkProps, PublicPlayerProps } from '../types';
 import EmbedPreview from './components/EmbedPreview';
+import { useColors } from '../constants/useColors';
+import { Button, Text, TextInput, View } from '../Components/Themed';
+import { useContacts } from '../SocialComponents/Contacts/useContacts';
+import * as SMS from 'expo-sms';
+
 
-const native_share_options = [
-    { name: 'twitter', getIcon: () => <Icons.TwitterXIcon size={18}/> },
-    { name: 'instagram', getIcon: () => <Icons.InstagramIcon size={18}/> },
-    { name: 'facebook', getIcon:() => <Icons.FacebookIcon size={18} /> },
-    { name: 'moare', getIcon:() => <Icons.MoreIcon size={18} color={Colors.brand.midnight} /> }
-]
 
 type ShareWidgetProps = {
     redirect_url?:string,
@@ -39,6 +37,8 @@ type ShareWidgetProps = {
 }
 
 const ShareWidget = ({ generated_link_id, title, body, redirect_url, maxWidth, maxHeight, generator, allow_edit, player_id, link_type, link_sub_type, type_id, embed, onCancel, onShare }:ShareWidgetProps) => {
+    const Colors = useColors();
+    const Contacts = useContacts({});
     const [ preview_embed, setPreviewEmbed ] = useState(false);
     const [ link_height, setLinkHeight ] = useState(0);
     const [ active_tab, setActiveTab ] = useState('link');
@@ -62,6 +62,13 @@ const ShareWidget = ({ generated_link_id, title, body, redirect_url, maxWidth, m
     });
     const { loading, editing, generated_link, draft_generated_link, url, visible_id_valid, update_loading, native_share_allowed } = link_status;
 
+    const native_share_options = [
+        { name: 'twitter', getIcon: () => <Icons.TwitterXIcon size={18}/> },
+        { name: 'instagram', getIcon: () => <Icons.InstagramIcon size={18}/> },
+        { name: 'facebook', getIcon:() => <Icons.FacebookIcon size={18} /> },
+        { name: 'more', getIcon:() => <Icons.MoreIcon size={18} color={Colors.text.h1} /> }
+    ]
+
     useEffect(() => {
         if(!redirect_url && !generated_link_id){ return }//Unable to get redirect link
         ShareApi.setEnvironment();
@@ -111,6 +118,26 @@ const ShareWidget = ({ generated_link_id, title, body, redirect_url, maxWidth, m
         });
     }
 
+    const handleSelectContact = async():Promise<{ player:PublicPlayerProps, number:string, sms_result:string } | undefined> => {
+        if(!Contacts.is_available){ return undefined }
+        if(!Contacts.permission){ return undefined }
+        if(!Contacts.permission.granted){
+            if(Contacts.permission.canAskAgain){ 
+                Contacts.requestPermissions();
+                return undefined
+            }
+            return //We dont have access!!
+        }
+
+        //Ok! Contacts is granted.  Lets select a user
+        const response = await Contacts.getContact();
+        if(!response){ return undefined } // Sorry we failed
+        let avail = await SMS.isAvailableAsync()
+        if(!avail){ return undefined } 
+        const { player, number } = response;
+        const { result } = await SMS.sendSMSAsync(response.number, `${title} ${url}`, {}) 
+        return { player, number, sms_result: result }
+    }
 
 
     const renderNativeOptions = (data:{ item:any, index:number }) => {
@@ -125,24 +152,21 @@ const ShareWidget = ({ generated_link_id, title, body, redirect_url, maxWidth, m
     const needs_verification = link_is_changed && !visible_id_valid
     return (
         <View style={{ ...view_styles.section, minWidth:250, maxWidth, maxHeight }}>
-            <View style={{ ...view_styles.section_header, borderBottomWidth:1, borderColor:Colors.shades.shade600 }}>
+            <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
                 <View style={{ flex:1 }}>
-                    <Text theme='header'>Share Modal</Text>
-                    <Text style={{ marginTop:3 }} theme='body'>{title}</Text>
+                    <Text theme='h1'>Share Modal</Text>
+                    <Text style={{ marginTop:3 }} theme='description'>{title}</Text>
                 </View>
                 <Button
                     title='X'
-                    title_weight='regular'
-                    borderRadius={100}
-                    backgroundColor={Colors.shades.shade100}
-                    padding={5}
+                    type='close'
                     onPress={() => onCancel()}
                 />
             </View>
             <ScrollView>
                 {loading || !generated_link ?
                 <View>
-                    <ActivityIndicator style={{ padding:20, alignSelf:'center' }} color={Colors.brand.midnight} size={'large'} />
+                    <ActivityIndicator style={{ padding:20, alignSelf:'center' }} color={Colors.text.h1} size={'large'} />
                 </View>
                 : active_tab == 'link' ?
                 <View>
@@ -150,16 +174,16 @@ const ShareWidget = ({ generated_link_id, title, body, redirect_url, maxWidth, m
                     <View style={{ ...view_styles.section_body }}>
                         <View style={{ ...view_styles.body_row }}>
                             <View style={{ flex:1 }}>
-                                <Text size={16} color={Colors.brand.midnight} weight='regular'>Edit This Link</Text>
-                                <Text style={{ marginTop:3 }} theme='body'>Edit the visible Id and query parameters below</Text>
+                                <Text size={16} theme='description' weight='regular'>Edit This Link</Text>
+                                <Text style={{ marginTop:3 }} theme='description'>Edit the visible Id and query parameters below</Text>
                             </View>
                         </View>
-                        <View style={{ backgroundColor:Colors.shades.shade100, padding:10 }}>
+                        <View style={{ padding:10 }}>
                             <View style={{ ...view_styles.body_row }}>
                                 <View style={{ flex:1 }}>
-                                    <Text theme='header_2'>Short Link</Text>
+                                    <Text theme='h2'>Short Link</Text>
                                     <View style={{ flexDirection:'row', alignItems:'center' }}>
-                                        <Text style={{ marginTop:3 }} theme='body'>https://share.mybe.app/id/</Text>
+                                        <Text style={{ marginTop:3 }} theme='description'>https://share.mybe.app/id/</Text>
                                         <TextInput
                                             value={draft_generated_link.visible_id}
                                             style={{ ...view_styles.input, flex:1, maxWidth:150 }}
@@ -176,7 +200,7 @@ const ShareWidget = ({ generated_link_id, title, body, redirect_url, maxWidth, m
                             </View>
                             <View style={{ ...view_styles.body_row }}>
                                 <View style={{ flex:1 }}>
-                                    <Text theme='header_2'>Link Destination</Text>
+                                    <Text theme='h1'>Link Destination</Text>
                                     <TextInput
                                         value={draft_generated_link.redirect_url}
                                         multiline={true}
@@ -203,20 +227,16 @@ const ShareWidget = ({ generated_link_id, title, body, redirect_url, maxWidth, m
                         <View style={{ ...view_styles.section_footer }}>
                             <Button
                                 title='Cancel'
-                                title_color={Colors.shades.white}
-                                borderRadius={4}
-                                backgroundColor={Colors.utility.error}
+                                type='error'
                                 onPress={() => setLinkStatus({ ...link_status, editing: false, draft_generated_link: generated_link })}
                             />
                             <View style={{ flex:1 }}/>
                             {needs_verification ?
                             <Button
                                 title='Check Link Availability'
-                                title_color={Colors.shades.white}
                                 style={{ opacity:update_loading?0.5:1 }}
-                                borderRadius={4}
                                 loading={update_loading}
-                                backgroundColor={Colors.brand.electric}
+                                type='info'
                                 onPress={async() => {
                                     setLinkStatus({ ...link_status, update_loading: true })
                                     const is_available = await ShareApi.isGeneratedLinkAvailable(draft_generated_link);
@@ -237,9 +257,7 @@ const ShareWidget = ({ generated_link_id, title, body, redirect_url, maxWidth, m
                                 style={{ opacity:link_is_changed && !update_loading?1:0.5 }}
                                 disabled={!link_is_changed}
                                 loading={update_loading}
-                                title_color={Colors.shades.white}
-                                borderRadius={4}
-                                backgroundColor={Colors.utility.success}
+                                type='success'
                                 onPress={async() => {
                                     setLinkStatus({ ...link_status, update_loading: true });
                                     const new_link = await ShareApi.updateGeneratedLink(draft_generated_link);
@@ -261,16 +279,17 @@ const ShareWidget = ({ generated_link_id, title, body, redirect_url, maxWidth, m
                     <View style={{ ...view_styles.section_body }}>
                         <View style={{ paddingBottom:0 }}>
                             <View style={{ ...view_styles.body_row }}>
-                                <Text size={16} color={Colors.brand.midnight} weight='regular'>Share this link via</Text>
+                                <Text size={16} color={Colors.text.h1} weight='regular'>Share this link via</Text>
                             </View>
+                            <View style={{ flexDirection:'row', alignItems:'center' }}>
                             {native_share_allowed ? 
-                            <TouchableOpacity style={{ ...view_styles.body_row }} onPress={async() => {
+                            <Button style={{ flex:1, flexDirection:'row' }} onPress={async() => {
                                 const share_event = await ShareApi.share(title, body, link_status.url, generated_link.generated_link_id);
                                 if(onShare && share_event){ onShare(share_event) }
                             }}>
-                                <View style={{ flexDirection:'row', alignItems:'center', padding:3, paddingRight:10, borderWidth:1, borderRadius:22, borderColor:Colors.highlights.highlight400Faded, backgroundColor: Colors.shades.white, ...view_styles.float }}>
-                                    <View style={{ height:36, width:36, marginRight:10, backgroundColor:Colors.brand.electric, borderRadius:100, justifyContent:'center', alignItems:'center' }}>
-                                        <Icons.ShareIcon size={14} color={Colors.shades.white} />
+                                <View float style={{ flexDirection:'row', alignItems:'center', padding:3, paddingRight:10, borderWidth:1, borderRadius:22 }}>
+                                    <View style={{ height:36, width:36, marginRight:10, borderRadius:100, justifyContent:'center', alignItems:'center' }}>
+                                        <Icons.ShareIcon size={14} color={Colors.text.h1} />
                                     </View>
                                     <FlatList
                                         horizontal
@@ -279,25 +298,31 @@ const ShareWidget = ({ generated_link_id, title, body, redirect_url, maxWidth, m
                                         renderItem={renderNativeOptions}
                                     />
                                 </View>
-                            </TouchableOpacity>
+                            </Button>
+                            :<></>}
+                            {Platform.OS != 'web' && Contacts.is_available ?
+                            <Button onPress={() => handleSelectContact()}>
+                                <Text>Contacts!</Text>
+                            </Button>
                             :<></>}
+                            </View>
                         </View>
                         <View style={{ paddingTop:0, }}>
                             <View style={{ ...view_styles.body_row }}>
-                                <Text selectable size={16} color={Colors.brand.midnight} weight='regular'>Copy link</Text>
+                                <Text selectable size={16} color={Colors.text.h1} weight='regular'>Copy link</Text>
                             </View>
-                            <View style={{ ...view_styles.body_row, padding:10, borderRadius:4, borderWidth:1, borderColor:Colors.shades.shade600 }}>
+                            <View type='row' style={{ padding:10 }}>
                                 {url ?
-                                <TouchableOpacity style={{ flexDirection:'row', alignItems:'center', backgroundColor:Colors.brand.electric, padding:10, borderRadius:4 }} onPress={() =>  Clipboard.setString(url)}>
-                                    <Icons.LinkIcon size={18} color={Colors.shades.white} />
-                                    <Text style={{ marginLeft:4 }} size={12} color={Colors.shades.white} textAlign='left'>Copy</Text>
-                                </TouchableOpacity>
+                                <Button style={{ flexDirection:'row', alignItems:'center', padding:10, borderRadius:4 }} onPress={() => Clipboard.setStringAsync(url)}>
+                                    <Icons.LinkIcon size={18} color={Colors.text.h1} />
+                                    <Text style={{ marginLeft:4 }} size={12} color={Colors.text.h1} textAlign='left'>Copy</Text>
+                                </Button>
                                 :<></>}
-                                <Text style={{ marginLeft:5, flex:1 }} theme='body'>{url}</Text>
+                                <Text style={{ marginLeft:5, flex:1 }} theme='description'>{url}</Text>
                                 {allow_edit ?
-                                <TouchableOpacity style={{ flexDirection:'row', alignItems:'center', backgroundColor:Colors.brand.electric, padding:10, borderRadius:4 }} onPress={() => setLinkStatus({ ...link_status, editing: true })}>
-                                    <Icons.EditIcon size={18} color={Colors.shades.white} />
-                                </TouchableOpacity>
+                                <Button style={{ flexDirection:'row', alignItems:'center', padding:10, borderRadius:4 }} onPress={() => setLinkStatus({ ...link_status, editing: true })}>
+                                    <Icons.EditIcon size={18} color={Colors.text.h1} />
+                                </Button>
                                 :<></>}
                             </View>
                         </View>
@@ -308,27 +333,25 @@ const ShareWidget = ({ generated_link_id, title, body, redirect_url, maxWidth, m
                 <View style={{ ...view_styles.section_body, paddingTop:0 }}>
                     <View style={{ ...view_styles.body_row }}>
                         <View style={{ flex:1 }}>
-                            <Text size={16} color={Colors.brand.midnight} weight='regular'>Embed this in your website</Text>
-                            <Text style={{ marginTop:3 }} theme='body_2'>Copy and past the code snippet below into the 'body' tag</Text>
+                            <Text size={16} theme='description'>Embed this in your website</Text>
+                            <Text style={{ marginTop:3 }} theme='light'>Copy and past the code snippet below into the 'body' tag</Text>
                         </View>
                     </View>
-                    <View style={{ backgroundColor:Colors.shades.shade100, padding:10 }}>
-                        <Text selectable size={14} color={Colors.brand.midnight}>{embed.embed_code}</Text>
+                    <View style={{ padding:10 }}>
+                        <Text selectable size={14} theme='description'>{embed.embed_code}</Text>
                         <View style={{ ...view_styles.body_row }}>
-                            <TouchableOpacity style={{ flexDirection:'row', alignItems:'center', backgroundColor:Colors.brand.electric, padding:10, borderRadius:4 }}
-                            onPress={() => Clipboard.setString(embed.embed_code)}>
-                                <Icons.LinkIcon size={18} color={Colors.shades.white} />
-                                <Text style={{ marginLeft:4 }} size={12} color={Colors.shades.white} textAlign='left'>Copy</Text>
-                            </TouchableOpacity>
+                            <Button style={{ flexDirection:'row', alignItems:'center', padding:10, borderRadius:4 }}
+                            onPress={() => Clipboard.setStringAsync(embed.embed_code)}>
+                                <Icons.LinkIcon size={18} color={Colors.text.h1} />
+                                <Text style={{ marginLeft:4 }} size={12} color={Colors.text.h1} textAlign='left'>Copy</Text>
+                            </Button>
                             <View style={{ flex:1 }} />
                             {embed.widget_element && embed.script_source && embed.div_id && Platform.OS == 'web' ?
                             <Button
                                 title={preview_embed ? 'Hide Preview' : 'Show Preview'}
-                                title_color={Colors.shades.white}
-                                borderRadius={4}
-                                padding={10}
+                                title_color={Colors.text.white}
                                 disabled={Platform.OS != 'web' ? true : false}
-                                backgroundColor={preview_embed ? Colors.utility.error : Colors.brand.cyan}
+                                backgroundColor={preview_embed ? Colors.text.error : Colors.text.action}
                                 onPress={() => setPreviewEmbed(!preview_embed)}
                             />
                             :<></>}
@@ -336,7 +359,7 @@ const ShareWidget = ({ generated_link_id, title, body, redirect_url, maxWidth, m
                     </View>
                     
                     {preview_embed && embed.widget_element && embed.script_source && embed.div_id ?
-                    <View style={{ borderWidth:1, borderRadius:4, borderColor:Colors.brand.slate }}>
+                    <View style={{ borderWidth:1, borderRadius:4 }}>
                         <EmbedPreview
                             script_source={embed.script_source}
                             widget_element={embed.widget_element}
@@ -348,25 +371,25 @@ const ShareWidget = ({ generated_link_id, title, body, redirect_url, maxWidth, m
                 </View>
                 :<></>}
                 {active_tab == 'embed' ?
-                <TouchableOpacity style={{ ...view_styles.section_footer }} onPress={() => setActiveTab('link')}>
+                <Button style={{ ...view_styles.section_footer }} onPress={() => setActiveTab('link')}>
                     <View style={{ flex:1, marginRight:10 }}>
-                        <Text theme='header'>Share Link Options</Text>
-                        <Text style={{ marginTop:3 }} theme='body'>Customize the link and share</Text>
+                        <Text theme='h1'>Share Link Options</Text>
+                        <Text style={{ marginTop:3 }} theme='description'>Customize the link and share</Text>
                     </View>
-                    <View style={{ height:30, width:30, borderRadius:100, backgroundColor:Colors.shades.white, justifyContent:'center', alignItems:'center' }}>
-                        <Icons.LinkIcon color={Colors.brand.midnight} size={18}/>
+                    <View style={{ height:30, width:30, borderRadius:100, justifyContent:'center', alignItems:'center' }}>
+                        <Icons.LinkIcon color={Colors.text.h1} size={18}/>
                     </View>
-                </TouchableOpacity>
+                </Button>
                 : active_tab == 'link' && embed?.embed_code ?
-                <TouchableOpacity style={{ ...view_styles.section_footer }} onPress={() => setActiveTab('embed')}>
+                <Button style={{ ...view_styles.section_footer }} onPress={() => setActiveTab('embed')}>
                     <View style={{ flex:1, marginRight:10 }}>
-                        <Text theme='header'>Available For Embed</Text>
-                        <Text style={{ marginTop:3 }} theme='body'>Copy code snippet and paste into the html of your website</Text>
+                        <Text theme='h1'>Available For Embed</Text>
+                        <Text style={{ marginTop:3 }} theme='description'>Copy code snippet and paste into the html of your website</Text>
                     </View>
-                    <View style={{ height:30, width:30, borderRadius:100, backgroundColor:Colors.shades.white, justifyContent:'center', alignItems:'center' }}>
-                        <Icons.EmbedIcon color={Colors.brand.midnight} size={18}/>
+                    <View style={{ height:30, width:30, borderRadius:100, justifyContent:'center', alignItems:'center' }}>
+                        <Icons.EmbedIcon color={Colors.text.h1} size={18}/>
                     </View>
-                </TouchableOpacity>
+                </Button>
                 :<></>}
             </ScrollView>
         </View>

package/src/SocialComponents/Contacts/api/index.tsx

@@ -0,0 +1,75 @@
+import axios from "axios";
+import { APIOverrides } from "../../../ApiOverrides";
+import type { PublicPlayerProps } from "../../../types";
+import type { Contact } from "expo-contacts";
+
+let AUTH_SVC_API = '';
+
+
+export { ContactsApi, ContactsHelpers }
+
+const ContactsApi = {
+    setEnvironment: () => {
+        const endpoints = APIOverrides.getEndpoints();
+        AUTH_SVC_API = endpoints['AUTH_SVC_API'] as string;
+    },
+    getPlayerByPhone: async(phone:string):Promise<PublicPlayerProps | undefined> => {
+        try {
+            console.log('getting playerby phone now!!!')
+            const resp = await axios.post(`${AUTH_SVC_API}/v1/players/player/search/phone`, { phone });
+            console.log(resp.data)
+            return resp.data.player
+        } catch (e) {
+            console.log('WE HIT AN ERROR!!!!!')
+            return undefined
+        }
+    },
+    generatePlayerByPhone: async( phone:string, referral_code?:string ):Promise<{ player_id:string } | undefined> => {
+        try {
+            const resp = await axios.post(`${AUTH_SVC_API}/v1/players/player/phone/authenticate`, { phone, silent:true, referral_code });
+            return resp.data.player_id
+        } catch (e) {
+            return undefined
+        }
+    },
+    getPlayerById: async(player_id:string):Promise<PublicPlayerProps | undefined> => {
+        try {
+            const resp = await axios.get(`${AUTH_SVC_API}/v1/players/player/${player_id}`);
+            return resp.data.player
+        } catch (e) {
+            return undefined
+        }
+    }
+}
+
+
+const ContactsHelpers = {
+    formatContactPhoneNumber: (contact:Contact):string | undefined => {
+        if(!contact.phoneNumbers){ return undefined }
+        let us_phone_numbers = contact.phoneNumbers.filter(p => p.countryCode?.toLowerCase() == 'us');
+        if(us_phone_numbers.length == 0){ return undefined }
+        //Ok, we have some US numbers!.  Lets format them
+        let us_phone_number = us_phone_numbers.find(n => n.isPrimary);
+        if(!us_phone_number){
+            us_phone_number = us_phone_numbers.find(n => n.label?.toLowerCase() == 'mobile');
+        }
+        if(!us_phone_number){
+            us_phone_number = us_phone_numbers[0]
+        }
+        if(!us_phone_number){ return undefined }
+        if(!us_phone_number.digits){ return undefined }
+        let split_num = us_phone_number.digits.split('+')
+        //Now check the split for the number
+        let number = ''
+        if(split_num.length == 1){ if(split_num[0]){ number = split_num[0] } }
+        if(split_num[1]){ number = split_num[1] }
+
+        //If it is ten digits - lets add to array
+        if(number.length == 11){
+            //Drop the first 1
+            number = number.substring(1);
+        }
+        if(number.length != 10){ return undefined }
+        return number       
+    }
+}

package/src/SocialComponents/Contacts/useContacts.tsx

@@ -0,0 +1,113 @@
+import { useEffect, useState } from 'react';
+import * as Contacts from 'expo-contacts';
+import type { PublicPlayerProps } from '../../types';
+import { ContactsApi, ContactsHelpers } from './api';
+
+type UseContactProps = {
+    referral_code?:string
+}
+
+const useContacts = ({ referral_code }:UseContactProps) => {
+    const [ permission_state, setPermissionState ] = useState<{
+        permission_checked:boolean,
+        permission?:Contacts.PermissionResponse
+    }>({
+        permission_checked:false
+    });
+    const [ contact_loading, setContactLoading ] = useState(false);
+    const { permission_checked, permission } = permission_state;
+    const [ available_state, setAvailableState ] = useState<{
+        is_available_checked:boolean,
+        is_available: boolean
+    }>({
+        is_available_checked: false,
+        is_available: false
+    });
+    const { is_available_checked, is_available } = available_state;
+
+    useEffect(() => {
+        ContactsApi.setEnvironment()
+        launch()
+    },[]);
+
+    const launch = async() => {
+        if(is_available_checked){ return } //Already checked!
+        let avail = await checkAvailable();
+        if(!avail){ return }
+        await checkPermissions();
+    }
+
+    const checkAvailable = async():Promise<boolean> => {
+        try {
+            const available = await Contacts.isAvailableAsync();
+            setAvailableState({
+                is_available_checked: true,
+                is_available: available
+            })
+            return available
+        } catch (e) {
+            setAvailableState({ is_available_checked:false, is_available: false });
+            return false
+        }
+    }
+
+    const checkPermissions = async():Promise<Contacts.PermissionResponse | undefined> => {
+        try {
+            const response = await Contacts.getPermissionsAsync();
+            setPermissionState({
+                permission_checked:true,
+                permission: response
+            });
+            return response
+        } catch (e) {
+            setPermissionState({ permission_checked: true });
+            return undefined
+        }
+    }
+
+    const requestPermissions = async():Promise<Contacts.PermissionResponse | undefined> => {
+        try {
+            const response = await Contacts.requestPermissionsAsync();
+            setPermissionState({
+                permission_checked: true,
+                permission: response
+            });
+            return response
+        } catch (e) {
+            return undefined
+        }
+    }
+
+    const getContact = async():Promise<{ player:PublicPlayerProps, number:string } | undefined> => {
+        try {
+            if(!permission?.granted){ return undefined } //We do not have permission
+            setContactLoading(true);
+            const contact = await Contacts.presentContactPickerAsync();
+            if(!contact){ 
+                setContactLoading(false);
+                return undefined 
+            }
+            let number = ContactsHelpers.formatContactPhoneNumber(contact);
+
+            if(!number){ return undefined }
+            //Lets check for the player by phone!
+            let player = await ContactsApi.getPlayerByPhone(number);
+            if(!player){
+                //ok we need to save the number so we can grab a player id for it
+                const gen_response = await ContactsApi.generatePlayerByPhone(number, referral_code);
+                if(!gen_response){ return undefined } //We failed!
+                player = await ContactsApi.getPlayerById(gen_response.player_id);
+                if(!player){ return undefined }
+            }
+            return { player, number }
+            
+        } catch (e) {
+            return undefined
+        }
+    }
+
+    return { is_available_checked, is_available, permission_checked, permission, contact_loading, checkPermissions, checkAvailable, requestPermissions, getContact }
+
+}
+
+export { useContacts }

package/src/SocialComponents/index.tsx

@@ -4,11 +4,13 @@ import PlayerProfile from "./PlayerProfile";
 import CompanyProfile from './CompanyProfile';
 import PodcastModule from './PodcastModule';
 import AudioPlayer from "./AudioPlayer";
+import { useContacts } from "./Contacts/useContacts";
 export {
     PlayerCard,
     PlayerList,
     PlayerProfile,
     CompanyProfile,
     PodcastModule,
-    AudioPlayer
+    AudioPlayer,
+    useContacts
 }

package/src/Squares/components/SquareCard.tsx

@@ -23,7 +23,7 @@ type SquareCardProps = {
 const SquareCard = ({ player_id, square, player_square, event, event_status, market_type, draft_player_square, square_offer, draft_square_offer, outbid_player_square, square_state_override, onSquareSelect }:SquareCardProps) => {
 
     const cl = market_type == 'FOR_MONEY' ? '$' : 'E';
-
+    if(square.square_score_x == 0 && square.square_score_y == 0){ console.log('Hey this is updating') }
     const getStateOfSquare = ():SquareStateProps => {
         if(square_state_override){ return square_state_override }
         if(event_status === 'not_started'){
@@ -189,4 +189,45 @@ const SquareCard = ({ player_id, square, player_square, event, event_status, mar
     )
 }
 
-export default SquareCard
+export default React.memo(SquareCard, (left, right) => {
+    if(JSON.stringify(left) != JSON.stringify(right)){ return false }
+    /*
+    if(left.square.last_update_datetime != right.square.last_update_datetime){ console.log('sqare'); return false }
+    if(left.player_square?.last_update_datetime != right.player_square?.last_update_datetime){ console.log('playersquare'); return false }
+    if(left.player_id != right.player_id){ console.log('player_id'); return false }
+    if(left.event_status != right.event_status){ console.log('event_status'); return false }
+    if(left.market_type != right.market_type){ console.log('market_type'); return false }
+    if(left.square_result?.squares_result_id != right.square_result?.squares_result_id){ console.log('result'); return false }
+    if(left.draft_player_square?.purchase_price != right.draft_player_square?.purchase_price){ 
+        return false }
+    if(left.square_offer?.last_update_datetime != right.square_offer?.last_update_datetime){
+        
+        return false
+    }
+    if(left.draft_square_offer?.amount != right.draft_square_offer?.amount){ 
+        if(left.square.square_score_x == 0 && left.square.square_score_y == 0){
+            console.log('draft offer!')
+        }
+        return false 
+    }
+    if(left.outbid_player_square?.sq_player_square_id != right.outbid_player_square?.sq_player_square_id){
+        if(left.square.square_score_x == 0 && left.square.square_score_y == 0){
+            console.log('outbid square!')
+        } 
+        return false
+    }
+    if(left.square_state_override != right.square_state_override){ 
+        if(left.square.square_score_x == 0 && left.square.square_score_y == 0){
+            console.log('square state override!')
+        }
+        return false 
+    }
+    if(left.ip_result != right.ip_result){ 
+        return false 
+    }
+    */
+    
+    return true
+    //if(left.draft_player_square?.purchase_price != right?.draft_player_square?.purchase_price){ return false }
+    //return true
+})

package/src/Squares/components/SquaresBoard.tsx

@@ -4,7 +4,7 @@ import { FlatList, Image, ScrollView, Platform } from 'react-native';
 import SquareCard from "./SquareCard";
 import Countdown from './Countdown';
 import { SqauresHelpers } from "../api";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import moment from "moment-mini";
 import { Button, Text, View } from "../../Components/Themed";
 import { useColors } from "../../constants/useColors";
@@ -32,6 +32,12 @@ const SquaresBoard = ({
     const [ expanded, setExpanded ] = useState(true);
     const [ times_up, setTimesUp ] = useState(false);
     const [ refresh_allowed, setRefreshAllowed ] = useState(false);
+    const [ square_bid, setSquareBid ] = useState<{square?:SquareProps, action?:'remove'|'add'}>({});
+
+    useEffect(() => {
+        if(!square_bid.square || !square_bid.action){ return }
+        handleSquareSelect(square_bid.square, square_bid.action)
+    },[square_bid.action, square_bid.square])
 
     const comp_status = SqauresHelpers.getCompStatus(event, squares_competition);
     const unique_score_y = [ ...new Set(squares.map(s => s.square_score_y)) ].sort((a,b) => a - b)
@@ -70,7 +76,7 @@ const SquaresBoard = ({
                     square_offer={square_offer}
                     event={event}
                     event_status={event_status}
-                    onSquareSelect={(square, action) => handleSquareSelect(square, action)}
+                    onSquareSelect={(square, action) => setSquareBid({square, action})}
                 />
             </View>
         )

package/src/Squares/index.tsx

@@ -88,8 +88,7 @@ const SquaresModule = ({ sq_comp_id, insets, player_id, distinct_id, onRequestAu
     const my_squares = player_squares.filter(ps => ps.status == 'active' && ps.player_id == player_id);
     const home_abbr = event?.home?.abbr??squares_competition?.event_backup?.home?.abbr
     const away_abbr = event?.away?.abbr??squares_competition?.event_backup?.away?.abbr
-    const joined = SqauresHelpers.amIParticipating(player_squares, player_square_history, player_id);
-    console.log(joined)
+    //const joined = SqauresHelpers.amIParticipating(player_squares, player_square_history, player_id);
     useEffect(() => {
         if(!sq_comp_id){ return }
         if(!loaded){ SquaresApi.setEnvironment(); }
@@ -408,7 +407,6 @@ const SquaresModule = ({ sq_comp_id, insets, player_id, distinct_id, onRequestAu
                 )
             case 'my_squares':
                 if(my_squares.length == 0){ return <></> }
-                console.log(squares.length)
                 return (
                     <MySquaresCard
                         player_squares={my_squares}