PR

.env.example

@@ -12,3 +12,9 @@ BUGSNAG_API_KEY=
 IOS_APP_ID=
 INTERCOM_APP_ID=
 STATUS_PAGE_SCRIPT_URI=
+
+SMARTBANNER_APP_NAME=
+SMARTBANNER_ORG_NAME=
+SMARTBANNER_ICON_URL=
+SMARTBANNER_APPSTORE_URL=
+SMARTBANNER_GOOGLEPLAY_URL=

.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

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

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",
@@ -39,7 +40,7 @@
     "@cosmjs/proto-signing": "^0.32.1",
     "@cosmjs/stargate": "^0.32.1",
     "@cosmjs/tendermint-rpc": "^0.32.1",
-    "@dydxprotocol/v4-abacus": "^1.4.2",
+    "@dydxprotocol/v4-abacus": "^1.4.0",
     "@dydxprotocol/v4-client-js": "^1.0.20",
     "@dydxprotocol/v4-localization": "^1.1.22",
     "@ethersproject/providers": "^5.7.2",

pnpm-lock.yaml

@@ -1,5 +1,9 @@
 lockfileVersion: '6.0'
 
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
 overrides:
   follow-redirects: 1.15.3
 
@@ -26,8 +30,8 @@ dependencies:
     specifier: ^0.32.1
     version: 0.32.2
   '@dydxprotocol/v4-abacus':
-    specifier: ^1.4.2
-    version: 1.4.2
+    specifier: ^1.4.0
+    version: 1.4.0
   '@dydxprotocol/v4-client-js':
     specifier: ^1.0.20
     version: 1.0.20
@@ -1088,8 +1092,8 @@ packages:
     resolution: {integrity: sha512-RpfLEtTlyIxeNPGKcokS+p3BZII/Q3bYxryFRglh5H3A3T8q9fsLYm72VYAMEOOIBLEa8o93kFLiBDUWKrwXZA==}
     dev: true
 
-  /@dydxprotocol/v4-abacus@1.4.2:
-    resolution: {integrity: sha512-+hugk0RulMwMthR2xCMYXohcC3sEYqVW/lmiq0RUuHZ9yrjmgy48xl0aZUmXGUYXyoiHXPS4AULhRKHQ4OOLwg==}
+  /@dydxprotocol/v4-abacus@1.4.0:
+    resolution: {integrity: sha512-mkdkXQXTVF1K6UmZwIwLC9gjsXg+Nt3h5/iW+WriVv1cUMPmHfPyRWL31eDDvkVO5UeECf05kiYXPk1y+7dPuA==}
     dev: false
 
   /@dydxprotocol/v4-client-js@1.0.20:
@@ -14912,7 +14916,3 @@ packages:
   /zwitch@2.0.4:
     resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
     dev: true
-
-settings:
-  autoInstallPeers: true
-  excludeLinksFromLockfile: false

public/configs/env.json

@@ -122,9 +122,6 @@
                "delayBlocks": 900,
                "newMarketsMethodology": "https://docs.google.com/spreadsheets/d/1zjkV9R7R_7KMItuzqzvKGwefSBRfE-ZNAx1LH55OcqY/edit?usp=sharing"
             }
-         },
-         "featureFlags": {
-            "reduceOnlySupported": true
          }
       },
       "dydxprotocol-dev-2": {
@@ -204,9 +201,6 @@
                "delayBlocks": 900,
                "newMarketsMethodology": "https://docs.google.com/spreadsheets/d/1zjkV9R7R_7KMItuzqzvKGwefSBRfE-ZNAx1LH55OcqY/edit?usp=sharing"
             }
-         },
-         "featureFlags": {
-            "reduceOnlySupported": true
          }
       },
       "dydxprotocol-dev-4": {
@@ -287,9 +281,6 @@
                "delayBlocks": 900,
                "newMarketsMethodology": "https://docs.google.com/spreadsheets/d/1zjkV9R7R_7KMItuzqzvKGwefSBRfE-ZNAx1LH55OcqY/edit?usp=sharing"
             }
-         },
-         "featureFlags": {
-            "reduceOnlySupported": true
          }
       },
       "dydxprotocol-dev-5": {
@@ -369,9 +360,6 @@
                "delayBlocks": 900,
                "newMarketsMethodology": "https://docs.google.com/spreadsheets/d/1zjkV9R7R_7KMItuzqzvKGwefSBRfE-ZNAx1LH55OcqY/edit?usp=sharing"
             }
-         },
-         "featureFlags": {
-            "reduceOnlySupported": true
          }
       },
       "dydxprotocol-staging": {
@@ -453,9 +441,6 @@
                "delayBlocks": 900,
                "newMarketsMethodology": "https://docs.google.com/spreadsheets/d/1zjkV9R7R_7KMItuzqzvKGwefSBRfE-ZNAx1LH55OcqY/edit?usp=sharing"
             }
-         },
-         "featureFlags": {
-            "reduceOnlySupported": true
          }
       },
       "dydxprotocol-staging-forced-update": {
@@ -536,9 +521,6 @@
                "delayBlocks": 900,
                "newMarketsMethodology": "https://docs.google.com/spreadsheets/d/1zjkV9R7R_7KMItuzqzvKGwefSBRfE-ZNAx1LH55OcqY/edit?usp=sharing"
             }
-         },
-         "featureFlags": {
-            "reduceOnlySupported": true
          }
       },
       "dydxprotocol-staging-west": {
@@ -620,9 +602,6 @@
                "delayBlocks": 900,
                "newMarketsMethodology": "https://docs.google.com/spreadsheets/d/1zjkV9R7R_7KMItuzqzvKGwefSBRfE-ZNAx1LH55OcqY/edit?usp=sharing"
             }
-         },
-         "featureFlags": {
-            "reduceOnlySupported": true
          }
       },
       "dydxprotocol-testnet": {
@@ -708,9 +687,6 @@
                "delayBlocks": 900,
                "newMarketsMethodology": "https://docs.google.com/spreadsheets/d/1zjkV9R7R_7KMItuzqzvKGwefSBRfE-ZNAx1LH55OcqY/edit?usp=sharing"
             }
-         },
-         "featureFlags": {
-            "reduceOnlySupported": false
          }
       },
       "dydxprotocol-testnet-dydx": {
@@ -793,9 +769,6 @@
                "delayBlocks": 900,
                "newMarketsMethodology": "https://docs.google.com/spreadsheets/d/1zjkV9R7R_7KMItuzqzvKGwefSBRfE-ZNAx1LH55OcqY/edit?usp=sharing"
             }
-         },
-         "featureFlags": {
-            "reduceOnlySupported": false
          }
       },
       "dydxprotocol-testnet-nodefleet": {
@@ -878,9 +851,6 @@
                "delayBlocks": 900,
                "newMarketsMethodology": "https://docs.google.com/spreadsheets/d/1zjkV9R7R_7KMItuzqzvKGwefSBRfE-ZNAx1LH55OcqY/edit?usp=sharing"
             }
-         },
-         "featureFlags": {
-            "reduceOnlySupported": false
          }
       },
       "dydxprotocol-testnet-kingnodes": {
@@ -963,9 +933,6 @@
                "delayBlocks": 900,
                "newMarketsMethodology": "https://docs.google.com/spreadsheets/d/1zjkV9R7R_7KMItuzqzvKGwefSBRfE-ZNAx1LH55OcqY/edit?usp=sharing"
             }
-         },
-         "featureFlags": {
-            "reduceOnlySupported": false
          }
       },
       "dydxprotocol-testnet-liquify": {
@@ -1048,9 +1015,6 @@
                "delayBlocks": 900,
                "newMarketsMethodology": "https://docs.google.com/spreadsheets/d/1zjkV9R7R_7KMItuzqzvKGwefSBRfE-ZNAx1LH55OcqY/edit?usp=sharing"
             }
-         },
-         "featureFlags": {
-            "reduceOnlySupported": false
          }
       },
       "dydxprotocol-testnet-polkachu": {
@@ -1125,9 +1089,6 @@
                "delayBlocks": 900,
                "newMarketsMethodology": "https://docs.google.com/spreadsheets/d/1zjkV9R7R_7KMItuzqzvKGwefSBRfE-ZNAx1LH55OcqY/edit?usp=sharing"
             }
-         },
-         "featureFlags": {
-            "reduceOnlySupported": false
          }
       },
       "dydxprotocol-testnet-bware": {
@@ -1210,9 +1171,6 @@
                "delayBlocks": 900,
                "newMarketsMethodology": "https://docs.google.com/spreadsheets/d/1zjkV9R7R_7KMItuzqzvKGwefSBRfE-ZNAx1LH55OcqY/edit?usp=sharing"
             }
-         },
-         "featureFlags": {
-            "reduceOnlySupported": false
          }
       },
       "dydxprotocol-mainnet": {
@@ -1295,9 +1253,6 @@
                "delayBlocks": 0,
                "newMarketsMethodology": "[URL to spreadsheet or document that explains methodology]"
             }
-         },
-         "featureFlags": {
-            "reduceOnlySupported": false
          }
       }
    }

public/smartbanner.html

@@ -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|Intel Mac OS X).*$">
+    <script src="https://cdn.jsdelivr.net/npm/smartbanner.js@1.22.0/dist/smartbanner.min.js"></script>
+    <link href="https://cdn.jsdelivr.net/npm/smartbanner.js@1.22.0/dist/smartbanner.min.css" rel="stylesheet">
+    <!-- Smartbanner: End configuration -->

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.
+
+<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`

scripts/inject-smartbanner.js

@@ -0,0 +1,60 @@
+/* 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)
+      .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 = `\t<meta name="smartbanner:button-url-apple" content="${SMARTBANNER_APPSTORE_URL}">\n` + smartbanner;
+    }
+    if (SMARTBANNER_GOOGLEPLAY_URL) {
+      smartbanner = `\t<meta name="smartbanner:button-url-google" content="${SMARTBANNER_GOOGLEPLAY_URL}">\n` + smartbanner;
+    }
+    if (SMARTBANNER_APPSTORE_URL) {
+      if (SMARTBANNER_GOOGLEPLAY_URL) {
+        smartbanner = `\t<meta name="smartbanner:enabled-platforms" content="android,ios">\n` + smartbanner;
+      } else {
+        smartbanner = `\t<meta name="smartbanner:enabled-platforms" content="ios">\n` + smartbanner;
+      }
+    } else {
+      if (SMARTBANNER_GOOGLEPLAY_URL) {
+        smartbanner = `\t<meta name="smartbanner:enabled-platforms" content="android">\n` + smartbanner;
+      }
+    }
+
+    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);
+  }
+}

src/lib/testFlags.ts

@@ -19,6 +19,10 @@ class TestFlags {
     return !!this.queryParams.displayinitializingmarkets;
   }
 
+  get showMobileSignInOption() {
+    return !!this.queryParams.mobilesignin;
+  }
+
   get addressOverride():string {
     return this.queryParams.address;
   }

src/views/menus/AccountMenu.tsx

@@ -7,6 +7,7 @@ import { OnboardingState } from '@/constants/account';
 import { ButtonAction, ButtonShape, ButtonSize, ButtonType } from '@/constants/buttons';
 import { DialogTypes } from '@/constants/dialogs';
 import { STRING_KEYS, StringGetterFunction, TOOLTIP_STRING_KEYS } from '@/constants/localization';
+import { isMainnet } from '@/constants/networks';
 import { DydxChainAsset, wallets } from '@/constants/wallets';
 
 import { layoutMixins } from '@/styles/layoutMixins';
@@ -40,6 +41,7 @@ import { getAppTheme } from '@/state/configsSelectors';
 import { isTruthy } from '@/lib/isTruthy';
 import { truncateAddress } from '@/lib/wallet';
 import { MustBigNumber } from '@/lib/numbers';
+import { testFlags } from '@/lib/testFlags';
 
 export const AccountMenu = () => {
   const stringGetter = useStringGetter();
@@ -191,7 +193,7 @@ export const AccountMenu = () => {
         },
         ...(onboardingState === OnboardingState.AccountConnected && hdKey
           ? [
-              {
+              (!isMainnet || testFlags.showMobileSignInOption) && {
                 value: 'MobileQrSignIn',
                 icon: <Icon iconName={IconName.Qr} />,
                 label: stringGetter({ key: STRING_KEYS.TITLE_SIGN_INTO_MOBILE }),
@@ -204,7 +206,7 @@ export const AccountMenu = () => {
                 highlightColor: 'destroy',
                 onSelect: () => dispatch(openDialog({ type: DialogTypes.MnemonicExport })),
               },
-            ]
+            ].filter(isTruthy)
           : []),
         {
           value: 'Disconnect',