Use injection script with ENV variables instead manual update

2024-02-06 16:02:33 -08:00
parent 0cbb08e750
commit 9a4ab24f5d
7 changed files with 94 additions and 32 deletions
@@ -39,6 +39,7 @@ jobs:
          pnpm run build:inject-amplitude
          pnpm run build:inject-bugsnag
          pnpm run build:inject-statuspage
+          pnpm run build:inject-smartbanner
          sh scripts/inject-app-deeplinks.sh

      - name: Upload to IPFS via web3.storage
@@ -82,7 +82,7 @@ Set environment variables via `.env`.
 - `IOS_APP_ID` (optional): iOS app ID used for enabling deep linking to the iOS app; used with `pnpm run build:inject-app-deeplinks`.
 - `INTERCOM_APP_ID` (optional): Used for enabling Intercom; utilized with `pnpm run build:inject-intercom`.
 - `STATUS_PAGE_SCRIPT_URI` (optional): Used for enabling the status page; used with `pnpm run build:inject-statuspage`.
-
+- `SMARTBANNER_APP_NAME`, `SMARTBANNER_ORG_NAME`, `SMARTBANNER_ICON_URL`, `SMARTBANNER_APPSTORE_URL` (optional): Used for enabling the smart app banner; used with `pnpm run build:inject-smartbanner`.

 # Deployments

@@ -106,6 +106,9 @@ pnpm run build --mode testnet
 If you wish to incorporate analytics via Amplitude and Bugsnag, you can use our scripts:
 `pnpm run build:inject-amplitude` and `pnpm run build:inject-bugsnag`. You will need to provide your own API keys for these services. In the Environment Variables section, name the variables as `AMPLITUDE_API_KEY` and `BUGSNAG_API_KEY` and provide the respective keys as their values.

+If you wish to incorporate smart banner for iOS and/or Android apps, you can use our scripts:
+`pnpm run build:inject-smartbanner`. You will need to provide your own app configurations for these services. In the Environment Variables section, name the variables as `SMARTBANNER_APP_NAME`, `SMARTBANNER_ORG_NAME`, `SMARTBANNER_ICON_URL` and `SMARTBANNER_APPSTORE_URL` or `SMARTBANNER_GOOGLEPLAY_URL` and provide the respective values.
+
 For more details, check out Vercel's [official documentation](https://vercel.com/docs).

 ## Deploying to IPFS
@@ -18,40 +18,9 @@
    <meta property="og:image:height" content="1260" />
    <meta property="og:locale" content="en_US" />
    <meta property="og:site_name" content="dYdX" />
-    <!-- Smartbanner: Configure the mobile app -->
-    <meta name="smartbanner:title" content="{app_name}">
-    <meta name="smartbanner:author" content="{org_name}">
-    <meta name="smartbanner:icon-apple" content="{icon_url}">
-    <!-- Smartbanner: Configure the iOS app -->
-    <meta name="smartbanner:button-url-apple" content="{ios_app_url}">
-    <!-- Smartbanner: Take out next line "smartbanner:api" after configuration -->
-    <meta name="smartbanner:api" content="true">
-    <!-- Smartbanner: The rest of the configurations can be kept as is -->
-    <meta name="smartbanner:price" content="FREE">
-    <meta name="smartbanner:price-suffix-apple" content=" - On the App Store">
-    <meta name="smartbanner:button" content="VIEW">
-    <meta name="smartbanner:enabled-platforms" content="ios">
-    <meta name="smartbanner:close-label" content="Close">
-    <meta name="smartbanner:exclude-user-agent-regex" content="^.*(Windows NT|Safari).*$">
-    <link rel="stylesheet" href="node_modules/smartbanner.js/dist/smartbanner.min.css">
-    <script src="node_modules/smartbanner.js/dist/smartbanner.min.js"></script>
-    <!-- Smartbanner: End configuration -->
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
-    <script>
-      let onLoadHandlerForConflictTesting = function() {};
-      window.onload = onLoadHandlerForConflictTesting;
-      document.addEventListener('smartbanner.view', function() { console.log('smartbanner.view'); });
-      document.addEventListener('smartbanner.exit', function() { console.log('smartbanner.exit'); });
-      document.addEventListener('smartbanner.clickout', function() { console.log('smartbanner.clickout'); });
-  
-      // Manual smartbanner population:
-      //   1) set smartbanner:api meta tag to true above for manual smartbanner population
-      //   2) Uncomment below
-      //let apiHandler = function() { smartbanner.publish(); };
-      //window.onload = apiHandler;
-    </script>
  </body>
 </html>
@@ -15,6 +15,7 @@
    "build:inject-bugsnag": "node scripts/inject-bugsnag.js",
    "build:inject-intercom": "node scripts/inject-intercom.js",
    "build:inject-statuspage": "node scripts/inject-statuspage.js",
+    "build:inject-smartbanner": "node scripts/inject-smartbanner.js",
    "deploy:ipfs": "node scripts/upload-ipfs.js --verbose",
    "deploy:update-ipns": "node scripts/update-ipns.js",
    "deploy:update-dnslink": "node scripts/update-dnslink.js",
@@ -36,3 +36,17 @@ Customize Intercom Messenger by adding logo and brand colors
 3. Add API key in Github > Secrets and Variables > Actions as `INTERCOM_APP_ID`
 4. In your deploy scripts add `pnpm run build:inject-intercom` after your pnpm build / vite build command.
 5. If you are using with the Amplitude deployment scripts, your build command may look like the following: `pnpm build && pnpm run build:inject-amplitude && pnpm run build:inject-intercom`
+
+### Smartbanner
+Smartbanner to show download links to iOS and/or Android native apps on mobile devices.
+
+<b>To use with dydxprotocol/v4-web:</b>
+1. iOS app App Store link or Android app Google Play link.
+2. Add configurations in Github > Secrets and Variables > Actions as 
+    `SMARTBANNER_APP_NAME` for app name
+    `SMARTBANNER_ORG_NAME` for organization name
+    `SMARTBANNER_ICON_URL` for icon image
+    `SMARTBANNER_APPSTORE_URL` for iOS App Store link
+    `SMARTBANNER_GOOGLEPLAY_URL` for Android Google Play link
+3. In your deploy scripts add `pnpm run build:inject-smartbanner` after your pnpm build / vite build command.
+4. If you are using with the Amplitude deployment scripts, your build command may look like the following: `pnpm build && pnpm run build:inject-smartbanner`
@@ -0,0 +1,59 @@
+/* eslint-disable no-console */
+import fs from 'fs/promises';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const SMARTBANNER_APP_NAME = process.env.SMARTBANNER_APP_NAME;
+const SMARTBANNER_ORG_NAME = process.env.SMARTBANNER_ORG_NAME;
+const SMARTBANNER_ICON_URL = process.env.SMARTBANNER_ICON_URL;
+const SMARTBANNER_APPSTORE_URL = process.env.SMARTBANNER_APPSTORE_URL;
+const SMARTBANNER_GOOGLEPLAY_URL = process.env.SMARTBANNER_GOOGLEPLAY_URL;
+
+const currentPath = fileURLToPath(import.meta.url);
+const projectRoot = path.dirname(currentPath);
+const htmlFilePath = path.resolve(projectRoot, '../dist/index.html');
+const smartbannerFilePath = path.resolve(projectRoot, '../dist/smartbanner.html');
+
+if (
+  SMARTBANNER_APP_NAME &&
+  SMARTBANNER_ORG_NAME &&
+  SMARTBANNER_ICON_URL &&
+  (SMARTBANNER_APPSTORE_URL || SMARTBANNER_GOOGLEPLAY_URL)
+) {
+  try {
+    const html = await fs.readFile(htmlFilePath, 'utf-8');
+    let smartbanner = await fs.readFile(smartbannerFilePath, 'utf-8');
+    smartbanner = smartbanner
+      .replace('SMARTBANNER_APP_NAME', SMARTBANNER_APP_NAME)
+      .replace('SMARTBANNER_ORG_NAME', SMARTBANNER_ORG_NAME)
+      .replace('SMARTBANNER_ICON_URL', SMARTBANNER_ICON_URL);
+
+    /* hardcoded injection depending on whether the app is available on App Store and/or Google Play */
+
+    if (SMARTBANNER_APPSTORE_URL) {
+      smartbanner += `\n<meta name="smartbanner:button-url-apple" content="${SMARTBANNER_APPSTORE_URL}">`;
+    }
+    if (SMARTBANNER_GOOGLEPLAY_URL) {
+      smartbanner += `\n<meta name="smartbanner:button-url-google" content="${SMARTBANNER_GOOGLEPLAY_URL}">`;
+    }
+    if (SMARTBANNER_APPSTORE_URL) {
+      if (SMARTBANNER_GOOGLEPLAY_URL) {
+        smartbanner += `\n<meta name="smartbanner:enabled-platforms" content="android,ios">`;
+      } else {
+        smartbanner += `\n<meta name="smartbanner:enabled-platforms" content="ios">`;
+      }
+    } else {
+      if (SMARTBANNER_GOOGLEPLAY_URL) {
+        smartbanner += `\n<meta name="smartbanner:enabled-platforms" content="android">`;
+      }
+    }
+
+    const injectedHtml = html.replace('</head>', `${smartbanner}\n</head>`);
+
+    await fs.writeFile(htmlFilePath, injectedHtml, 'utf-8');
+
+    console.log('Smartbanner scripts successfully injected.');
+  } catch (err) {
+    console.error('Error injecting Smartbanner scripts:', err);
+  }
+}
@@ -0,0 +1,15 @@
+    <!-- Smartbanner: Configure the mobile app -->
+    <meta name="smartbanner:title" content="SMARTBANNER_APP_NAME">
+    <meta name="smartbanner:author" content="SMARTBANNER_ORG_NAME">
+    <meta name="smartbanner:icon-apple" content="SMARTBANNER_ICON_URL">
+    <meta name="smartbanner:icon-google" content="SMARTBANNER_ICON_URL">
+    <!-- Smartbanner: The rest of the configurations can be kept as is -->
+    <meta name="smartbanner:price" content="FREE">
+    <meta name="smartbanner:price-suffix-apple" content=" - On the App Store">
+    <meta name="smartbanner:price-suffix-google" content=" - In Google Play">
+    <meta name="smartbanner:button" content="VIEW">
+    <meta name="smartbanner:close-label" content="Close">
+    <meta name="smartbanner:exclude-user-agent-regex" content="^.*(Windows NT|Safari).*$">
+    <link rel="stylesheet" href="node_modules/smartbanner.js/dist/smartbanner.min.css">
+    <script src="node_modules/smartbanner.js/dist/smartbanner.min.js"></script>
+    <!-- Smartbanner: End configuration -->