feat(idea/frontend): google tag manager (#1581)

Co-authored-by: sergey filyanin <[email protected]>

.github/workflows/CI-CD-k8s-release-deploy.yml

@@ -64,6 +64,7 @@ jobs:
             VITE_DEFAULT_TRANSFER_BALANCE_VALUE=${{ secrets.REACT_APP_DEFAULT_TRANSFER_BALANCE_VALUE }}
             VITE_HCAPTCHA_SITE_KEY=${{ secrets.REACT_APP_HCAPTCHA_SITE_KEY }}
             VITE_NODES_API_URL=${{ secrets.REACT_APP_DEFAULT_NODES_URL }}
+            VITE_GTM_ID=${{ secrets.VITE_GTM_ID}}
             VITE_MAINNET_VOUCHERS_API_URL=${{ secrets.VITE_MAINNET_VOUCHERS_API_URL }}
             VITE_TESTNET_VOUCHERS_API_URL=${{ secrets.VITE_TESTNET_VOUCHERS_API_URL }}
 

idea/frontend/.env.example

@@ -4,4 +4,5 @@ VITE_TESTNET_VOUCHERS_API_URL=
 VITE_NODES_API_URL=
 VITE_NODE_ADDRESS=
 VITE_HCAPTCHA_SITE_KEY=
+VITE_GTM_ID=
 VITE_DEFAULT_TRANSFER_BALANCE_VALUE=

idea/frontend/Dockerfile

@@ -19,6 +19,7 @@ ARG VITE_NODE_ADDRESS \
     VITE_NODES_API_URL \
     VITE_DEFAULT_TRANSFER_BALANCE_VALUE \
     VITE_HCAPTCHA_SITE_KEY \
+    VITE_GTM_ID \
     VITE_MAINNET_VOUCHERS_API_URL \
     VITE_TESTNET_VOUCHERS_API_URL
 ENV VITE_NODE_ADDRESS=${VITE_NODE_ADDRESS} \
@@ -27,6 +28,7 @@ ENV VITE_NODE_ADDRESS=${VITE_NODE_ADDRESS} \
     VITE_NODES_API_URL=${VITE_NODES_API_URL} \
     VITE_DEFAULT_TRANSFER_BALANCE_VALUE=${VITE_DEFAULT_TRANSFER_BALANCE_VALUE} \
     VITE_HCAPTCHA_SITE_KEY=${VITE_HCAPTCHA_SITE_KEY} \
+    VITE_GTM_ID=${VITE_GTM_ID} \
     VITE_MAINNET_VOUCHERS_API_URL=${VITE_MAINNET_VOUCHERS_API_URL} \
     VITE_TESTNET_VOUCHERS_API_URL=${VITE_TESTNET_VOUCHERS_API_URL}
 

idea/frontend/package.json

@@ -34,6 +34,7 @@
     "react-dnd-html5-backend": "16.0.1",
     "react-dom": "18.2.0",
     "react-error-boundary": "4.0.11",
+    "react-gtm-module": "2.0.11",
     "react-hook-form": "7.48.2",
     "react-number-format": "5.3.1",
     "react-router-dom": "6.16.0",
@@ -50,6 +51,7 @@
     "@types/node": "20.8.4",
     "@types/react": "18.2.36",
     "@types/react-dom": "18.2.14",
+    "@types/react-gtm-module": "2.0.3",
     "@types/react-transition-group": "4.4.7",
     "@typescript-eslint/eslint-plugin": "6.7.5",
     "@typescript-eslint/parser": "6.7.5",

idea/frontend/src/features/uploadMetadata/ui/uploadMetadata/UploadMetadata.tsx

@@ -61,17 +61,13 @@ const UploadMetadata = ({ metadata, isInputDisabled, isLoading, onReset, onMetad
     if (!value) return onReset();
 
     const extension = getFileExtension(value);
-    if (![FILE_EXTENSION.TXT, FILE_EXTENSION.IDL].includes(extension)) return alert.error('Invalid file extension');
+    if (![FILE_EXTENSION.TXT].includes(extension)) return alert.error('Invalid file extension');
 
     setFile(value);
 
     const text = await value.text();
 
-    if (extension === FILE_EXTENSION.TXT) return onMetadataUpload?.(isHex(text) ? text : (`0x${text}` as const));
-
-    if (extension === FILE_EXTENSION.IDL) {
-      console.log('idl');
-    }
+    onMetadataUpload(isHex(text) ? text : (`0x${text}` as const));
   };
 
   return (
@@ -84,7 +80,7 @@ const UploadMetadata = ({ metadata, isInputDisabled, isLoading, onReset, onMetad
           direction="y"
           className={cx(formStyles.field, formStyles.gap16)}
           onChange={handleFileInputChange}
-          accept={[FileTypes.Text, FileTypes.Idl]}
+          accept={[FileTypes.Text]}
         />
       )}
 

idea/frontend/src/index.tsx

@@ -1,8 +1,13 @@
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
+import TagManager from 'react-gtm-module';
 
 import { App } from '@/app/App';
 
+import { GTM_ID } from './shared/config';
+
+if (GTM_ID) TagManager.initialize({ gtmId: GTM_ID });
+
 const container = document.getElementById('root');
 const root = createRoot(container as HTMLElement);
 

idea/frontend/src/shared/config/consts.ts

@@ -2,6 +2,7 @@ const API_URL = import.meta.env.VITE_API_URL as string;
 const NODES_API_URL = import.meta.env.VITE_NODES_API_URL as string;
 const NODE_ADDRESS = import.meta.env.VITE_NODE_ADDRESS as string;
 const HCAPTCHA_SITE_KEY = import.meta.env.VITE_HCAPTCHA_SITE_KEY as string;
+const GTM_ID = import.meta.env.GTM_ID as string | undefined;
 
 const GENESIS = {
   MAINNET: '0xfe1b4c55fd4d668101126434206571a7838a8b6b93a6d1b95d607e78e6c53763',
@@ -108,6 +109,7 @@ export {
   NODES_API_URL,
   NODE_ADDRESS,
   HCAPTCHA_SITE_KEY,
+  GTM_ID,
   NODE_ADRESS_URL_PARAM,
   EXAMPLES_HREF,
   DEFAULT_LIMIT,

yarn.lock

@@ -2505,6 +2505,7 @@ __metadata:
     "@types/node": 20.8.4
     "@types/react": 18.2.36
     "@types/react-dom": 18.2.14
+    "@types/react-gtm-module": 2.0.3
     "@types/react-transition-group": 4.4.7
     "@typescript-eslint/eslint-plugin": 6.7.5
     "@typescript-eslint/parser": 6.7.5
@@ -2530,6 +2531,7 @@ __metadata:
     react-dnd-html5-backend: 16.0.1
     react-dom: 18.2.0
     react-error-boundary: 4.0.11
+    react-gtm-module: 2.0.11
     react-hook-form: 7.48.2
     react-number-format: 5.3.1
     react-router-dom: 6.16.0
@@ -6313,6 +6315,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/react-gtm-module@npm:2.0.3":
+  version: 2.0.3
+  resolution: "@types/react-gtm-module@npm:2.0.3"
+  checksum: b4b892c9efe93f6f624a42ffe5de37ef7615139191eccc127f7dc2006a70b0540aacb0dc882e3452c344498fdc7f2d4eafc53fe3a33696c1e60fc6852ac650f5
+  languageName: node
+  linkType: hard
+
 "@types/react-transition-group@npm:4.4.7":
   version: 4.4.7
   resolution: "@types/react-transition-group@npm:4.4.7"
@@ -15975,6 +15984,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-gtm-module@npm:2.0.11":
+  version: 2.0.11
+  resolution: "react-gtm-module@npm:2.0.11"
+  checksum: 93b4659f0d10248f59113a3eb488ea8848712cab2e28b7c45d080b373d6736a96b9855d637c4447819493366bf25185c3f88e6b4107a8f06d8ab2a39f7a725b9
+  languageName: node
+  linkType: hard
+
 "react-hook-form@npm:7.48.2":
   version: 7.48.2
   resolution: "react-hook-form@npm:7.48.2"