add more controlled pagination to table

.env.example

@@ -12,9 +12,3 @@ 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,7 +39,6 @@ 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,9 +106,6 @@ 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,7 +15,6 @@
     "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",

pnpm-lock.yaml

@@ -1,9 +1,5 @@
 lockfileVersion: '6.0'
 
-settings:
-  autoInstallPeers: true
-  excludeLinksFromLockfile: false
-
 overrides:
   follow-redirects: 1.15.3
 
@@ -14916,3 +14912,7 @@ packages:
   /zwitch@2.0.4:
     resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
     dev: true
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false

public/smartbanner.html

@@ -1,15 +0,0 @@
-    <!-- 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,17 +36,3 @@ 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

@@ -1,60 +0,0 @@
-/* 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/components/Table.tsx

@@ -95,7 +95,10 @@ export type ElementProps<TableRowData extends object | CustomRowConfig, TableRow
   selectionBehavior?: 'replace' | 'toggle';
   onRowAction?: (key: TableRowKey, row: TableRowData) => void;
   slotEmpty?: React.ReactNode;
-  initialNumRowsToShow?: number;
+  viewMoreConfig?: {
+    initialNumRowsToShow: number;
+    numRowsPerPage?: number;
+  };
   // collection: TableCollection<string>;
   // children: React.ReactNode;
 };
@@ -125,7 +128,7 @@ export const Table = <TableRowData extends object, TableRowKey extends Key>({
   selectionMode = 'single',
   selectionBehavior = 'toggle',
   slotEmpty,
-  initialNumRowsToShow,
+  viewMoreConfig,
   // shouldRowRender,
 
   // collection,
@@ -141,8 +144,18 @@ export const Table = <TableRowData extends object, TableRowKey extends Key>({
   style,
 }: ElementProps<TableRowData, TableRowKey> & StyleProps) => {
   const [selectedKeys, setSelectedKeys] = useState(new Set<TableRowKey>());
-  const [numRowsToShow, setNumRowsToShow] = useState(initialNumRowsToShow);
-  const enableViewMore = numRowsToShow !== undefined;
+  const [numRowsToShow, setNumRowsToShow] = useState(viewMoreConfig?.initialNumRowsToShow);
+  const enableViewMore = viewMoreConfig !== undefined;
+
+  const onViewMoreClick = () => {
+    if (!viewMoreConfig) return;
+    const { numRowsPerPage } = viewMoreConfig;
+    if (numRowsPerPage) {
+      setNumRowsToShow((prev) => (prev ?? 0) + numRowsPerPage);
+    } else {
+      setNumRowsToShow(data.length);
+    }
+  };
 
   const currentBreakpoints = useBreakpoints();
   const shownColumns = columns.filter(
@@ -218,9 +231,7 @@ export const Table = <TableRowData extends object, TableRowKey extends Key>({
           }
           numColumns={shownColumns.length}
           onViewMoreClick={
-            enableViewMore && numRowsToShow < data.length
-              ? () => setNumRowsToShow(data.length)
-              : undefined
+            enableViewMore && numRowsToShow! < data.length ? onViewMoreClick : undefined
           }
           // shouldRowRender={shouldRowRender}
           hideHeader={hideHeader}

src/views/tables/TradingRewardHistoryTable.tsx

@@ -121,7 +121,7 @@ export const TradingRewardHistoryTable = ({
       selectionBehavior="replace"
       withOuterBorder={withOuterBorder}
       withInnerBorders={withInnerBorders}
-      initialNumRowsToShow={5}
+      viewMoreConfig={{ initialNumRowsToShow: 5, numRowsPerPage: 10 }}
       withScrollSnapColumns
       withScrollSnapRows
     />