Revert styling and add utms to browser

tonkeeper · Jan 29, 2024 · ce3a33b · ce3a33b
1 parent 824b684
commit ce3a33b
Show file tree

Hide file tree

Showing 9 changed files with 44 additions and 18 deletions.
diff --git a/packages/core/src/service/urlService.ts b/packages/core/src/service/urlService.ts
@@ -0,0 +1,19 @@
+import queryString from 'query-string';
+
+export type DAppSource = 'recommendation' | 'featured';
+export type DAppTrack = 'desktop' | 'extension';
+
+export const formatBrowserUrl = (source: string, camp: DAppSource, track: DAppTrack): string => {
+    const date = new Date();
+    const stringified = queryString.stringify({
+        utm_source: 'tonkeeper',
+        utm_campaign:
+            camp === 'recommendation'
+                ? 'recom'
+                : `feat-${date.getMonth() + 1}-${date.getFullYear()}`,
+        utm_medium: track
+    });
+
+    const startChar = source.includes('?') ? '&' : '?';
+    return `${source}${startChar}${stringified}`;
+};
diff --git a/packages/core/src/tonkeeperApi/tonendpoint.ts b/packages/core/src/tonkeeperApi/tonendpoint.ts
@@ -1,7 +1,8 @@
+import { TargetEnv } from '../AppSdk';
 import { intlLocale } from '../entries/language';
 import { Network } from '../entries/network';
+import { DAppTrack } from '../service/urlService';
 import { FetchAPI } from '../tonApiV2';
-import { TargetEnv } from '../AppSdk';
 
 interface BootParams {
     platform: 'ios' | 'android' | 'web';
@@ -157,11 +158,11 @@ export class Tonendpoint {
     };
 
     getAppsPopular = (countryCode?: string | null | undefined): Promise<Recommendations> => {
-        return this.GET(
-            '/apps/popular',
-            { countryCode },
-            { track: this.targetEnv === 'extension' ? 'extension' : 'desktop' }
-        );
+        return this.GET('/apps/popular', { countryCode }, { track: this.getTrack() });
+    };
+
+    getTrack = (): DAppTrack => {
+        return this.targetEnv === 'extension' ? 'extension' : 'desktop';
     };
 }
 

diff --git a/packages/uikit/src/components/connect/EstimationLayout.tsx b/packages/uikit/src/components/connect/EstimationLayout.tsx
@@ -78,7 +78,7 @@ export const EmulationList: FC<{ isError: boolean; estimate: EstimateData | unde
     if (estimate) {
         return (
             <>
-                <ListBlock nouserselect="true" fullWidth margin={false}>
+                <ListBlock noUserSelect fullWidth margin={false}>
                     <TonActivityEvents
                         hover={false}
                         event={estimate.accountEvent.event}

diff --git a/packages/uikit/src/components/home/Jettons.tsx b/packages/uikit/src/components/home/Jettons.tsx
@@ -102,12 +102,12 @@ export const JettonList: FC<AssetProps> = ({
 }) => {
     return (
         <>
-            <ListBlock nouserselect="true">
+            <ListBlock noUserSelect>
                 <TonAsset info={info} />
                 {/* TODO: ENABLE TRON */}
                 {/* <TronAssets tokens={tron} /> */}
             </ListBlock>
-            <ListBlock nouserselect="true">
+            <ListBlock noUserSelect>
                 {jettons.balances.map(jetton => (
                     <JettonAsset key={jetton.jetton.address} jetton={jetton} />
                 ))}

diff --git a/packages/uikit/src/components/transfer/SuggestionList.tsx b/packages/uikit/src/components/transfer/SuggestionList.tsx
@@ -254,7 +254,7 @@ export const SuggestionList: FC<{
             {data.length > 0 ? (
                 <Label>{t('send_screen_steps_address_suggests_label')}</Label>
             ) : undefined}
-            <ListBlock margin={false} fullWidth nouserselect="true">
+            <ListBlock margin={false} fullWidth noUserSelect>
                 {data.map(item => {
                     if (item.isFavorite) {
                         return (

diff --git a/packages/uikit/src/hooks/useAreaClick.ts b/packages/uikit/src/hooks/useAreaClick.ts
@@ -1,3 +1,4 @@
+import { DAppSource, DAppTrack, formatBrowserUrl } from '@tonkeeper/core/dist/service/urlService';
 import { useCallback, useRef } from 'react';
 import { useClickBrowser } from './amplitude';
 import { useAppSdk } from './appSdk';
@@ -47,15 +48,17 @@ export function useAreaClick<T extends HTMLElement = HTMLDivElement>({
 
 export function useOpenLinkOnAreaClick<T extends HTMLElement = HTMLDivElement>(
     url: string,
-    source: string
+    source: DAppSource,
+    track: DAppTrack
 ) {
     const sdk = useAppSdk();
-    const track = useClickBrowser();
+    const event = useClickBrowser();
 
     const callback = useCallback(() => {
-        track(url, source);
-        sdk.openPage(url);
-    }, [url, sdk, track]);
+        event(url, source);
+        console.log(formatBrowserUrl(url, source, track));
+        sdk.openPage(formatBrowserUrl(url, source, track));
+    }, [url, sdk, event]);
 
     return useAreaClick<T>({ callback });
 }
diff --git a/packages/uikit/src/pages/browser/CategoryBlock.tsx b/packages/uikit/src/pages/browser/CategoryBlock.tsx
@@ -6,6 +6,7 @@ import { ChevronRightIcon } from '../../components/Icon';
 import { ListBlock, ListItem } from '../../components/List';
 import { Body3, H3, Label1, Label2 } from '../../components/Text';
 import { Carousel } from '../../components/shared';
+import { useAppContext } from '../../hooks/appContext';
 import { useOpenLinkOnAreaClick } from '../../hooks/useAreaClick';
 import { useElementSize } from '../../hooks/useElementSize';
 import { BrowserRoute } from '../../libs/routes';
@@ -123,7 +124,8 @@ export const CategoryBlock: FC<{ category: PromotionCategory; className?: string
 };
 
 export const CategoryGroupItem: FC<{ item: PromotedApp }> = ({ item }) => {
-    const ref = useOpenLinkOnAreaClick(item.url, 'recommendation');
+    const { tonendpoint } = useAppContext();
+    const ref = useOpenLinkOnAreaClick(item.url, 'recommendation', tonendpoint.getTrack());
 
     return (
         <ListItemStyled key={item.url} ref={ref}>

diff --git a/packages/uikit/src/pages/browser/PromotionsCarousel.tsx b/packages/uikit/src/pages/browser/PromotionsCarousel.tsx
@@ -47,7 +47,8 @@ export const PromotionsCarousel: FC<{ apps: CarouselApp[]; className?: string }>
 };
 
 const CarouselItem: FC<{ item: CarouselApp }> = ({ item }) => {
-    const ref = useOpenLinkOnAreaClick(item.url, 'featured');
+    const { tonendpoint } = useAppContext();
+    const ref = useOpenLinkOnAreaClick(item.url, 'featured', tonendpoint.getTrack());
 
     return (
         <CarouselCard img={item.poster} ref={ref}>

diff --git a/packages/uikit/src/pages/settings/Jettons.tsx b/packages/uikit/src/pages/settings/Jettons.tsx
@@ -139,7 +139,7 @@ export const JettonsSettings = () => {
                             <ListBlock
                                 {...provided.droppableProps}
                                 ref={provided.innerRef}
-                                nouserselect="true"
+                                noUserSelect
                             >
                                 {jettons.map((jetton, index) => (
                                     <Draggable