From 82b9cea941d2062a9a10cb321237fd1fd2ac03aa Mon Sep 17 00:00:00 2001 From: Stanislav Lysak Date: Fri, 13 Dec 2024 14:03:55 +0200 Subject: [PATCH] FET-1721: Implement posthog (hosted) --- package.json | 1 + pnpm-lock.yaml | 136 ++++++++++++++++++++++++++++--- src/components/posthog/config.ts | 15 ++++ src/components/posthog/index.tsx | 13 +++ src/pages/_app.tsx | 5 +- 5 files changed, 158 insertions(+), 12 deletions(-) create mode 100644 src/components/posthog/config.ts create mode 100644 src/components/posthog/index.tsx diff --git a/package.json b/package.json index 924500452..3db92dcd3 100644 --- a/package.json +++ b/package.json @@ -84,6 +84,7 @@ "markdown-to-jsx": "^7.1.7", "next": "13.5.6", "node-fetch": "^3.3.2", + "posthog-js": "^1.199.0", "react": "*", "react-confetti": "^6.1.0", "react-dom": "*", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f5bc20d3f..ca10dd25c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -211,6 +211,9 @@ importers: node-fetch: specifier: ^3.3.2 version: 3.3.2 + posthog-js: + specifier: ^1.199.0 + version: 1.199.0 react: specifier: ^18.2.0 version: 18.3.1 @@ -492,6 +495,78 @@ importers: specifier: ^1.0.0-pre.53 version: 1.0.0-pre.53 + .yalc/@ensdomains/ens-test-env: + dependencies: + '@ethersproject/wallet': + specifier: ^5.6.0 + version: 5.7.0 + ansi-colors: + specifier: ^4.1.1 + version: 4.1.3 + cli-progress: + specifier: ^3.10.0 + version: 3.12.0 + commander: + specifier: ^9.3.0 + version: 9.5.0 + concurrently: + specifier: ^7.1.0 + version: 7.6.0 + docker-compose: + specifier: ^0.24.7 + version: 0.24.8 + dotenv: + specifier: ^16.0.1 + version: 16.4.5 + js-yaml: + specifier: ^4.1.0 + version: 4.1.0 + lz4: + specifier: ^0.6.5 + version: 0.6.5 + progress-stream: + specifier: ^2.0.0 + version: 2.0.0 + tar-fs: + specifier: ^2.1.1 + version: 2.1.1 + wait-on: + specifier: ^6.0.1 + version: 6.0.1 + + .yalc/@ensdomains/thorin: + dependencies: + '@types/jest': + specifier: ^29.5.12 + version: 29.5.12 + clsx: + specifier: ^1.1.1 + version: 1.2.1 + focus-visible: + specifier: ^5.2.0 + version: 5.2.1 + jest-babel: + specifier: ^1.0.1 + version: 1.0.1(babel-core@7.0.0-bridge.0(@babel/core@7.24.6)) + lodash: + specifier: ^4.17.21 + version: 4.17.21 + react: + specifier: ^18.2.0 + version: 18.3.1 + react-dom: + specifier: ^18.2.0 + version: 18.3.1(react@18.3.1) + react-transition-state: + specifier: ^2.1.1 + version: 2.2.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + styled-components: + specifier: ^5.3.6 + version: 5.3.11(@babel/core@7.24.6)(react-dom@18.3.1(react@18.3.1))(react-is@18.3.1)(react@18.3.1) + ts-pattern: + specifier: ^4.3.0 + version: 4.3.0 + packages: '@adobe/css-tools@4.3.3': @@ -2090,6 +2165,7 @@ packages: '@humanwhocodes/config-array@0.11.14': resolution: {integrity: sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==} engines: {node: '>=10.10.0'} + deprecated: Use @eslint/config-array instead '@humanwhocodes/module-importer@1.0.1': resolution: {integrity: sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==} @@ -2097,6 +2173,7 @@ packages: '@humanwhocodes/object-schema@2.0.3': resolution: {integrity: sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==} + deprecated: Use @eslint/object-schema instead '@ianvs/prettier-plugin-sort-imports@4.2.1': resolution: {integrity: sha512-NKN1LVFWUDGDGr3vt+6Ey3qPeN/163uR1pOPAlkWpgvAqgxQ6kSdUf1F0it8aHUtKRUzEGcK38Wxd07O61d7+Q==} @@ -3941,6 +4018,7 @@ packages: '@walletconnect/sign-client@2.11.1': resolution: {integrity: sha512-s3oKSx6/F5X2WmkV1jfJImBFACf9Km5HpTb+n5q+mobJVpUQw/clvoVyIrNNppLhm1V1S/ylHXh0qCrDppDpCA==} + deprecated: Reliability and performance greatly improved - please see https://github.com/WalletConnect/walletconnect-monorepo/releases '@walletconnect/time@1.0.2': resolution: {integrity: sha512-uzdd9woDcJ1AaBZRhqy5rNC9laqWGErfc4dxA9a87mPdKOgWMD85mcFo9dIYIts/Jwocfwn07EC6EzclKubk/g==} @@ -4831,6 +4909,9 @@ packages: core-js-compat@3.38.0: resolution: {integrity: sha512-75LAicdLa4OJVwFxFbQR3NdnZjNgX6ILpVcVzcC4T2smerB5lELMrJQQQoWV6TiuC/vlaFqgU2tKQx9w5s0e0A==} + core-js@3.39.0: + resolution: {integrity: sha512-raM0ew0/jJUqkJ0E6e8UDtl+y/7ktFivgWvqw8dNSQeNWoSDLvQ1H/RN3aPXB9tBd4/FhyR4RDPGhsNIMsAn7g==} + core-util-is@1.0.2: resolution: {integrity: sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ==} @@ -5568,6 +5649,7 @@ packages: ethereum-bloom-filters@1.1.0: resolution: {integrity: sha512-J1gDRkLpuGNvWYzWslBQR9cDV4nd4kfvVTE/Wy4Kkm4yb3EYRSlyi0eB/inTsSTTVyA0+HyzHgbr95Fn/Z1fSw==} + deprecated: do not use this package use package versions above as this can miss some topics ethereum-cryptography@0.1.3: resolution: {integrity: sha512-w8/4x1SGGzc+tO97TASLja6SLd3fRIK2tLVcV2Gx4IB21hE19atll5Cq9o3d0ZmAYC/8aw0ipieTSiekAea4SQ==} @@ -5736,6 +5818,9 @@ packages: resolution: {integrity: sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==} engines: {node: ^12.20 || >= 14.13} + fflate@0.4.8: + resolution: {integrity: sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA==} + figures@3.2.0: resolution: {integrity: sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==} engines: {node: '>=8'} @@ -6517,6 +6602,12 @@ packages: jackspeak@3.4.3: resolution: {integrity: sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==} + jest-babel@1.0.1: + resolution: {integrity: sha512-hZp74w14Rbv9zqkyrVEUBiGpjE3DvG8qmMDI5qblVhDe5TCjDzJYOHGUcousz+tJrTtHB1im29xS3cZUyhLnAg==} + deprecated: jest-babel is outdated and useless now, try to move to babel-jest package + peerDependencies: + babel-core: '>= 5.5.0 < 6' + jest-canvas-mock@2.5.2: resolution: {integrity: sha512-vgnpPupjOL6+L5oJXzxTxFrlGEIbHdZqFU+LFNdtLxZ3lRDCl17FlTMM7IatoRQkrcyOTMlDinjUguqmQ6bR2A==} @@ -7835,8 +7926,8 @@ packages: resolution: {integrity: sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==} engines: {node: ^10 || ^12 || >=14} - preact@10.22.0: - resolution: {integrity: sha512-RRurnSjJPj4rp5K6XoP45Ui33ncb7e4H7WiOHVpjbkvqvA3U+N8Z6Qbo0AE6leGYBV66n8EhEaFixvIu3SkxFw==} + posthog-js@1.199.0: + resolution: {integrity: sha512-59GKQx7I0qdVyNr5Fm534vDnXILPtjNuaxOYTaeYjjP4W6QYnIEA8sjOPMpwXJp+pRCvVXRfAVK6wPdxgxPfAA==} preact@10.23.1: resolution: {integrity: sha512-O5UdRsNh4vdZaTieWe3XOgSpdMAmkIYBCT3VhQDlKrzyCm8lUYsk0fmVEvoQQifoOjFRTaHZO69ylrzTW2BH+A==} @@ -8119,6 +8210,12 @@ packages: react: ^18.2.0 react-dom: ^18.2.0 + react-transition-state@2.2.0: + resolution: {integrity: sha512-D3EyLku1Sdxrxq26Fo4Jh0q1BLEFQfDOxKKiSuyqWH84+hM6y0Guc0hcW2IXMXY5l5gQCgkOQ9y90xx6mNoj5w==} + peerDependencies: + react: ^18.2.0 + react-dom: ^18.2.0 + react-universal-interface@0.6.2: resolution: {integrity: sha512-dg8yXdcQmvgR13RIlZbTRQOoUrDciFVoSBZILwjE2LFISxZZ8loVJKAkuzswl5js8BHda79bIb2b84ehU8IjXw==} peerDependencies: @@ -9593,6 +9690,9 @@ packages: resolution: {integrity: sha512-d2JWLCivmZYTSIoge9MsgFCZrt571BikcWGYkjC1khllbTeDlGqZ2D8vD8E/lJa8WGWbb7Plm8/XJYV7IJHZZw==} engines: {node: '>= 8'} + web-vitals@4.2.4: + resolution: {integrity: sha512-r4DIlprAGwJ7YM11VZp4R884m0Vmgr6EAKe3P+kO0PPj3Unqyvv59rczf6UiGcb9Z8QxZVcqKNwv/g0WNdWwsw==} + web3-bzz@1.10.0: resolution: {integrity: sha512-o9IR59io3pDUsXTsps5pO5hW1D5zBmg46iNc2t4j2DkaYHNdDLwk2IP9ukoM2wg47QILfPEJYzhTfkS/CcX0KA==} engines: {node: '>=8.0.0'} @@ -11440,7 +11540,7 @@ snapshots: clsx: 1.2.1 eventemitter3: 5.0.1 keccak: 3.0.4 - preact: 10.22.0 + preact: 10.23.1 sha.js: 2.4.11 '@cspotcode/source-map-support@0.8.1': @@ -12129,7 +12229,6 @@ snapshots: '@jest/expect-utils@29.7.0': dependencies: jest-get-type: 29.6.3 - optional: true '@jest/fake-timers@29.7.0': dependencies: @@ -13943,7 +14042,6 @@ snapshots: dependencies: expect: 29.7.0 pretty-format: 29.7.0 - optional: true '@types/js-cookie@2.2.7': {} @@ -15627,6 +15725,8 @@ snapshots: dependencies: browserslist: 4.23.3 + core-js@3.39.0: {} + core-util-is@1.0.2: {} core-util-is@1.0.3: {} @@ -15916,8 +16016,7 @@ snapshots: detect-node-es@1.1.0: {} - diff-sequences@29.6.3: - optional: true + diff-sequences@29.6.3: {} diff@4.0.2: {} @@ -16696,7 +16795,6 @@ snapshots: jest-matcher-utils: 29.7.0 jest-message-util: 29.7.0 jest-util: 29.7.0 - optional: true exponential-backoff@3.1.1: {} @@ -16808,6 +16906,8 @@ snapshots: node-domexception: 1.0.0 web-streams-polyfill: 3.3.3 + fflate@0.4.8: {} + figures@3.2.0: dependencies: escape-string-regexp: 1.0.5 @@ -17714,6 +17814,10 @@ snapshots: optionalDependencies: '@pkgjs/parseargs': 0.11.0 + jest-babel@1.0.1(babel-core@7.0.0-bridge.0(@babel/core@7.24.6)): + dependencies: + babel-core: 7.0.0-bridge.0(@babel/core@7.24.6) + jest-canvas-mock@2.5.2: dependencies: cssfontparser: 1.2.1 @@ -17725,7 +17829,6 @@ snapshots: diff-sequences: 29.6.3 jest-get-type: 29.6.3 pretty-format: 29.7.0 - optional: true jest-environment-node@29.7.0: dependencies: @@ -17744,7 +17847,6 @@ snapshots: jest-diff: 29.7.0 jest-get-type: 29.6.3 pretty-format: 29.7.0 - optional: true jest-message-util@29.7.0: dependencies: @@ -19253,7 +19355,12 @@ snapshots: picocolors: 1.0.1 source-map-js: 1.2.0 - preact@10.22.0: {} + posthog-js@1.199.0: + dependencies: + core-js: 3.39.0 + fflate: 0.4.8 + preact: 10.23.1 + web-vitals: 4.2.4 preact@10.23.1: {} @@ -19560,6 +19667,11 @@ snapshots: react: 18.3.1 react-dom: 18.3.1(react@18.3.1) + react-transition-state@2.2.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1): + dependencies: + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + react-universal-interface@0.6.2(react@18.3.1)(tslib@2.6.2): dependencies: react: 18.3.1 @@ -21174,6 +21286,8 @@ snapshots: web-streams-polyfill@3.3.3: {} + web-vitals@4.2.4: {} + web3-bzz@1.10.0(bufferutil@4.0.8)(utf-8-validate@5.0.10): dependencies: '@types/node': 12.20.55 diff --git a/src/components/posthog/config.ts b/src/components/posthog/config.ts new file mode 100644 index 000000000..26e03337d --- /dev/null +++ b/src/components/posthog/config.ts @@ -0,0 +1,15 @@ +/* eslint-disable @typescript-eslint/naming-convention */ + +import { PostHogConfig } from 'posthog-js' + +export const posthogConfig: { + apiKey: string + options: Partial +} = { + apiKey: process.env.NEXT_PUBLIC_POSTHOG_KEY!, + options: { + api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST, + person_profiles: 'identified_only', // or 'always' to create profiles for anonymous users as well + autocapture: true, + }, +} diff --git a/src/components/posthog/index.tsx b/src/components/posthog/index.tsx new file mode 100644 index 000000000..0fd75bca0 --- /dev/null +++ b/src/components/posthog/index.tsx @@ -0,0 +1,13 @@ +'use client' + +import { PostHogProvider } from 'posthog-js/react' + +import { posthogConfig } from './config' + +export function Posthog({ children }: React.PropsWithChildren) { + return ( + + {children} + + ) +} diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 294ed4587..b4a506858 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -13,6 +13,7 @@ import { createGlobalStyle, keyframes, ThemeProvider } from 'styled-components' import { ThorinGlobalStyles, lightTheme as thorinLightTheme } from '@ensdomains/thorin' import { Notifications } from '@app/components/Notifications' +import { Posthog } from '@app/components/posthog' import { TestnetWarning } from '@app/components/TestnetWarning' import { TransactionStoreProvider } from '@app/hooks/transactions/TransactionStoreContext' import { Basic } from '@app/layouts/Basic' @@ -157,7 +158,9 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) { - {getLayout()} + + {getLayout()} +