feat(contacts): show own contact and added nearby share option

apps/game/client/cl_contacts.ts

@@ -1,8 +1,16 @@
 import { ContactEvents } from '@typings/contact';
 import { RegisterNuiProxy } from './cl_utils';
+import { sendContactsEvent } from "../utils/messages";
 
 RegisterNuiProxy(ContactEvents.PAY_CONTACT);
 RegisterNuiProxy(ContactEvents.GET_CONTACTS);
 RegisterNuiProxy(ContactEvents.ADD_CONTACT);
 RegisterNuiProxy(ContactEvents.DELETE_CONTACT);
 RegisterNuiProxy(ContactEvents.UPDATE_CONTACT);
+RegisterNuiProxy(ContactEvents.LOCAL_SHARE)
+
+const exp = global.exports
+
+onNet("npwd:contacts:receiveContact", (data: unknown) => {
+  sendContactsEvent(ContactEvents.ADD_CONTACT_EXPORT, data);
+})

apps/game/server/contacts/contacts.controller.ts

@@ -4,6 +4,7 @@ import PlayerService from '../players/player.service';
 import ContactService from './contacts.service';
 import { contactsLogger } from './contacts.utils';
 import { onNetPromise } from '../lib/PromiseNetEvents/onNetPromise';
+import { distanceBetweenCoords } from "../utils/miscUtils";
 const exps = global.exports;
 
 onNetPromise<ContactPay, Contact>(ContactEvents.PAY_CONTACT, (reqObj, resp) => {
@@ -60,3 +61,9 @@ onNetPromise<ContactDeleteDTO, void>(ContactEvents.DELETE_CONTACT, (reqObj, resp
     resp({ status: 'error', errorMsg: 'INTERNAL_ERROR' });
   });
 });
+
+onNetPromise(ContactEvents.LOCAL_SHARE, (reqObj, resp) => {
+  ContactService.handleLocalShare(reqObj, resp).catch((e) => {
+    resp({status: 'error', errorMsg: 'INTERNAL_ERROR'})
+  })
+})

apps/game/server/contacts/contacts.service.ts

@@ -4,6 +4,8 @@ import { Contact, ContactDeleteDTO, ContactResp, PreDBContact } from '@typings/c
 import { PromiseEventResp, PromiseRequest } from '../lib/PromiseNetEvents/promise.types';
 import { checkAndFilterImage } from './../utils/imageFiltering';
 import { _ContactsDB, ContactsDB } from './contacts.database';
+import { distanceBetweenCoords } from "../utils/miscUtils";
+import { generateProfileName } from "../utils/generateProfileName";
 
 class _ContactService {
   private readonly contactsDB: _ContactsDB;
@@ -76,6 +78,29 @@ class _ContactService {
       contactsLogger.error(`Error in handleFetchContact (${identifier}), ${e.message}`);
     }
   }
+
+  async handleLocalShare(
+    reqObj: PromiseRequest,
+    resp: PromiseEventResp<void>
+  ): Promise<void> {
+    const source = reqObj.source.toString()
+    const sourceCoords = GetEntityCoords(GetPlayerPed(source))
+
+    const player = PlayerService.getPlayer(reqObj.source)
+    const name = player.getName()
+    const number = player.getPhoneNumber()
+
+    getPlayers()?.forEach(src => {
+      if (src === source) return;
+
+      const dist = distanceBetweenCoords(sourceCoords, GetEntityCoords(GetPlayerPed(src)))
+      if (dist <=3 ){
+        emitNet('npwd:contacts:receiveContact', src, {name, number})
+      }
+    })
+
+    resp({status: "ok"})
+  }
 }
 
 const ContactService = new _ContactService();

apps/game/server/utils/miscUtils.ts

@@ -18,3 +18,13 @@ export const emitNetTyped = <T = any>(eventName: string, data: T, src?: number)
 
   emitNet(eventName, data);
 };
+
+export const distanceBetweenCoords = (coords1: number[], coords2: number[]): number => {
+  const [x1,y1] = coords1
+  const [x2, y2] = coords2
+
+  return Math.sqrt(
+    Math.pow((x2-x1), 2) +
+    Math.pow((y2-y1), 2)
+  )
+}

apps/phone/src/apps/contacts/components/List/ContactList.tsx

@@ -2,16 +2,22 @@ import React from 'react';
 import { SearchContacts } from './SearchContacts';
 import { Link, useHistory, useLocation } from 'react-router-dom';
 import { useFilteredContacts } from '../../hooks/state';
-import { Contact } from '@typings/contact';
+import { Contact, ContactEvents } from "@typings/contact";
 import { useCall } from '@os/call/hooks/useCall';
 import useMessages from '@apps/messages/hooks/useMessages';
 import LogDebugEvent from '@os/debug/LogDebugEvents';
 import { useContactActions } from '@apps/contacts/hooks/useContactActions';
 import { useMyPhoneNumber } from '@os/simcard/hooks/useMyPhoneNumber';
-import { Phone, MessageSquare, Plus } from 'lucide-react';
+import { Phone, MessageSquare, Plus, Clipboard, UsersRound } from 'lucide-react';
 import { List, ListItem, NPWDButton } from '@npwd/keyos';
 import { initials } from '@utils/misc';
 import { useQueryParams } from '@common/hooks/useQueryParams';
+import { Tooltip } from '@ui/components/Tooltip';
+import { useTwitterProfileValue } from "@apps/twitter/hooks/state";
+import { useTranslation } from "react-i18next";
+import { setClipboard } from "@os/phone/hooks";
+import { useSnackbar } from '@os/snackbar/hooks/useSnackbar';
+import fetchNui from "@utils/fetchNui";
 
 export const ContactList: React.FC = () => {
   const filteredContacts = useFilteredContacts();
@@ -26,6 +32,9 @@ export const ContactList: React.FC = () => {
     return r;
   }, []);
 
+  const myNumber = useMyPhoneNumber()
+  const {avatar_url} = useTwitterProfileValue()
+
   return (
     <div className="relative">
       <div className="sticky top-0 z-50">
@@ -44,6 +53,12 @@ export const ContactList: React.FC = () => {
 
       <div className="mt-4 overflow-y-auto px-4">
         <nav className="space-y-2 overflow-y-auto" aria-label="Directory">
+          <div key="self" className="relative">
+            <List>
+                <SelfContact key="self" number={myNumber} avatar={avatar_url} />
+            </List>
+          </div>
+
           {Object.keys(groupedContacts)
             .sort()
             .map((letter) => (
@@ -68,6 +83,68 @@ interface ContactItemProps extends Contact {
   onClick?: () => void;
 }
 
+const SelfContact = ({number, avatar}: {number: string, avatar:string}) => {
+  const [t] = useTranslation();
+  const {addAlert} = useSnackbar()
+  const copyNumber = () => {
+    setClipboard(number);
+    addAlert({
+      message: t('GENERIC.WRITE_TO_CLIPBOARD_MESSAGE', {
+        content: 'Number',
+      }),
+      type: 'success',
+    });
+  }
+
+  const shareLocal = () => {
+    fetchNui(ContactEvents.LOCAL_SHARE)
+  }
+
+  return (
+    <ListItem>
+      <div className="min-w-0 flex-1">
+        <div
+          className="flex items-center justify-between focus:outline-none"
+        >
+          <div className="flex items-center space-x-2">
+            {avatar && avatar.length > 0 ? (
+              <img src={avatar} className="inline-block h-10 w-10 rounded-full" alt={'avatar'} />
+            ) : (
+              <div className="flex h-10 w-10 items-center justify-center rounded-full">
+                <span className="text-gray-600 dark:text-gray-300">Me</span>
+              </div>
+            )}
+            <div>
+              <p className="text-base font-medium text-neutral-900 dark:text-neutral-100">
+                My Number
+              </p>
+              <p className="text-sm text-neutral-400">{number}</p>
+            </div>
+          </div>
+          <div className="space-x-3">
+            <Tooltip title={t('GENERIC.WRITE_TO_CLIPBOARD_TOOLTIP', {content: 'Number'}) as string}>
+              <button
+                onClick={copyNumber}
+                className="rounded-full bg-neutral-100 p-3 text-neutral-300 hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-700"
+              >
+                <Clipboard size={20} />
+              </button>
+            </Tooltip>
+            <Tooltip title={"Nearby Share"} >
+              <button
+                onClick={shareLocal}
+                className="rounded-full bg-neutral-100 p-3 text-neutral-300 hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-700"
+              >
+                <UsersRound size={20} />
+              </button>
+            </Tooltip>
+          </div>
+        </div>
+      </div>
+    </ListItem>
+  );
+}
+
 const ContactItem = ({ number, avatar, id, display }: ContactItemProps) => {
   const query = useQueryParams<{ referal: string }>();
   const { referal } = query;

typings/contact.ts

@@ -45,6 +45,7 @@ export enum ContactEvents {
   DELETE_CONTACT = 'npwd:deleteContact',
   // Used to fill in information through an export event
   ADD_CONTACT_EXPORT = 'npwd:addContactExport',
+  LOCAL_SHARE = 'npwd:localShareContact'
 }
 
 export interface AddContactExportData {