diff --git a/.github/workflows/deploy-testnet.yml b/.github/workflows/deploy-testnet.yml index f2edc93..10f4c0f 100644 --- a/.github/workflows/deploy-testnet.yml +++ b/.github/workflows/deploy-testnet.yml @@ -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 diff --git a/README.md b/README.md index 983ebc4..80b7f5a 100644 --- a/README.md +++ b/README.md @@ -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 diff --git a/index.html b/index.html index 6d8a426..bcb21eb 100644 --- a/index.html +++ b/index.html @@ -18,40 +18,9 @@ - - - - - - - - - - - - - - - - - -
- diff --git a/package.json b/package.json index 0bef911..d89e979 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/scripts/README.md b/scripts/README.md index dea4d27..242dc6f 100644 --- a/scripts/README.md +++ b/scripts/README.md @@ -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. + +To use with dydxprotocol/v4-web: +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` diff --git a/scripts/inject-smartbanner.js b/scripts/inject-smartbanner.js new file mode 100644 index 0000000..7bfa0b4 --- /dev/null +++ b/scripts/inject-smartbanner.js @@ -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`; + } + if (SMARTBANNER_GOOGLEPLAY_URL) { + smartbanner += `\n`; + } + if (SMARTBANNER_APPSTORE_URL) { + if (SMARTBANNER_GOOGLEPLAY_URL) { + smartbanner += `\n`; + } else { + smartbanner += `\n`; + } + } else { + if (SMARTBANNER_GOOGLEPLAY_URL) { + smartbanner += `\n`; + } + } + + const injectedHtml = html.replace('', `${smartbanner}\n`); + + await fs.writeFile(htmlFilePath, injectedHtml, 'utf-8'); + + console.log('Smartbanner scripts successfully injected.'); + } catch (err) { + console.error('Error injecting Smartbanner scripts:', err); + } +} diff --git a/smartbanner.html b/smartbanner.html new file mode 100644 index 0000000..9ae649b --- /dev/null +++ b/smartbanner.html @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + \ No newline at end of file