New tab experiment

src/background/Wallet/GlobalPreferences.ts

@@ -27,6 +27,7 @@ export interface State {
   providerInjection?: ProviderInjection;
   autoLockTimeout?: number | 'none';
   walletNameFlags?: Record<string, WalletNameFlag[] | undefined>;
+  enableNewTabOverride?: boolean | null;
 }
 
 export function getWalletNameFlagsChange(state: State, prevState: State) {
@@ -59,6 +60,7 @@ export class GlobalPreferences extends PersistentStore<State> {
     providerInjection: {},
     walletNameFlags: {},
     autoLockTimeout: HALF_DAY,
+    enableNewTabOverride: null,
   };
 
   private async fetchDefaultWalletNameFlags() {

src/background/index.ts

@@ -6,6 +6,7 @@ import { SessionCacheService } from 'src/background/resource/sessionCacheService
 import { openOnboarding } from 'src/shared/openOnboarding';
 import { userLifecycleStore } from 'src/shared/analytics/shared/UserLifecycle';
 import { UrlContextParam } from 'src/shared/types/UrlContext';
+import { openNewTabOverride } from 'src/shared/openNewTabOverride';
 import { initialize } from './initialize';
 import { PortRegistry } from './messaging/PortRegistry';
 import { createWalletMessageHandler } from './messaging/port-message-handlers/createWalletMessageHandler';
@@ -20,6 +21,7 @@ import { emitter } from './events';
 import * as userActivity from './user-activity';
 import { ContentScriptManager } from './ContentScriptManager';
 import { TransactionService } from './transactions/TransactionService';
+import { globalPreferences } from './Wallet/GlobalPreferences';
 
 Object.assign(globalThis, { ethers });
 
@@ -203,3 +205,28 @@ browser.runtime.onInstalled.addListener(({ reason }) => {
     openOnboarding();
   }
 });
+
+function overrideTabListener(
+  tabId: number,
+  _changes: unknown,
+  tab: browser.Tabs.Tab
+) {
+  if (tab.url?.endsWith('://newtab/')) {
+    openNewTabOverride(tabId);
+  }
+}
+
+function overrideNewTab(override: boolean) {
+  if (override) {
+    browser.tabs.onUpdated.addListener(overrideTabListener);
+  } else {
+    browser.tabs.onUpdated.removeListener(overrideTabListener);
+  }
+}
+
+globalPreferences.getPreferences().then((preferences) => {
+  overrideNewTab(Boolean(preferences.enableNewTabOverride));
+});
+globalPreferences.on('change', (state) => {
+  overrideNewTab(Boolean(state.enableNewTabOverride));
+});

src/manifest.json

@@ -45,7 +45,8 @@
     "alarms",
     "scripting",
     "storage",
-    "unlimitedStorage"
+    "unlimitedStorage",
+    "tabs"
   ],
   "host_permissions": ["http://*/*", "https://*/*"]
 }

src/modules/zerion-api/requests/explore-info.ts

@@ -0,0 +1,132 @@
+export interface Payload {
+  addresses: string[];
+  currency: string;
+}
+
+interface Collection {
+  id: string;
+  name: string | null;
+  iconUrl: string | null;
+  chain: string | null;
+  slug: string;
+  description: string | null;
+  bannerImageUrl: string | null;
+  category: string | null;
+  paymentTokenSymbol: string | null;
+  marketplaceData: {
+    floorPrice: number | null;
+    nftsCount: number | null;
+    ownersCount: number | null;
+    oneDayVolume: number | null;
+    oneDayChange: number | null;
+    totalVolume: number | null;
+  } | null;
+}
+
+export interface TrandingNFTs {
+  id: 'trending_nfts';
+  collections: Collection[];
+}
+
+interface Dapp {
+  name: string;
+  iconUrl: string;
+  url: string;
+}
+
+export interface FeaturedDapps {
+  id: 'featured_dapps';
+  dapps: Dapp[];
+}
+
+interface Fungible {
+  id: string;
+  name: string;
+  symbol: string;
+  iconUrl: string | null;
+  meta: {
+    price: number | null;
+    marketCap: number | null;
+    relativeChange1d: number | null;
+    relativeChange30d: number | null;
+    relativeChange90d: number | null;
+  };
+}
+
+export interface TopMovers {
+  id: 'top_movers';
+  fungibles: Fungible[];
+}
+
+export interface TopTokens {
+  id: 'top_tokens';
+  fungibles: Fungible[];
+}
+
+interface Mint {
+  id: string;
+  title: string;
+  type: 'opened' | 'hidden' | 'completed';
+  isExclusive: boolean;
+  reason: {
+    title: string;
+    subtitle: string;
+    type:
+      | 'allowlist'
+      | 'tokengate'
+      | 'influencer'
+      | 'trending'
+      | 'creator'
+      | 'minted-from-creator-before'
+      | 'trending-in-community';
+    wallets: {
+      name: string;
+      iconUrl: string | null;
+      address: string;
+      premium: boolean;
+    }[];
+  };
+  description: string;
+  openedAt: string | null;
+  imageUrl: string;
+  action: string;
+  chain: string | null;
+  contract: string | null;
+}
+
+export interface MintsForYou {
+  id: 'mints_for_you';
+  mints: Mint[];
+}
+
+interface Wallet {
+  name: string;
+  iconUrl: string | null;
+  address: string;
+  premium: boolean;
+}
+
+export interface PopularWallets {
+  id: 'popular_wallets';
+  wallets: Wallet[];
+}
+
+interface Data {
+  sections: ({
+    title: string;
+    order: number;
+    isSearchEnabled: boolean;
+  } & (
+    | TrandingNFTs
+    | FeaturedDapps
+    | TopMovers
+    | TopTokens
+    | MintsForYou
+    | PopularWallets
+  ))[];
+}
+
+export interface Response {
+  data: Data;
+  errors?: { title: string; detail: string }[];
+}

src/modules/zerion-api/zerion-api.ts

@@ -27,6 +27,10 @@ import type {
   Payload as GetGasPricesPayload,
   Response as GetGasPricesResponse,
 } from './requests/get-gas-prices';
+import type {
+  Payload as ExploreSectionsPayload,
+  Response as ExportSectionsResponse,
+} from './requests/explore-info';
 
 export type NetworksSource = 'mainnet' | 'testnet';
 
@@ -138,4 +142,16 @@ export class ZerionAPI {
       `/paymaster/check-eligibility/v1?${params}`
     );
   }
+
+  static getExploreSections(payload: ExploreSectionsPayload) {
+    return ky
+      .get(new URL('explore/get-sections/v1', ZERION_API_URL), {
+        searchParams: {
+          addresses: payload.addresses.join(','),
+          currency: payload.currency,
+        },
+        headers: getZpiHeaders(),
+      })
+      .json<ExportSectionsResponse>();
+  }
 }

src/shared/openNewTabOverride.ts

@@ -0,0 +1,15 @@
+import browser from 'webextension-polyfill';
+import { getPopupUrl } from './getPopupUrl';
+import { setUrlContext } from './setUrlContext';
+
+export function openNewTabOverride(tabId: number) {
+  const popupUrl = getPopupUrl();
+  setUrlContext(popupUrl.searchParams, {
+    appMode: 'newTab',
+    windowType: 'tab',
+    windowLayout: 'page',
+  });
+  browser.tabs.update(tabId, {
+    url: popupUrl.toString(),
+  });
+}

src/shared/types/UrlContext.ts

@@ -1,4 +1,4 @@
-export type AppMode = 'onboarding' | 'wallet';
+export type AppMode = 'onboarding' | 'wallet' | 'newTab';
 export type WindowLayout = 'column' | 'page';
 export type WindowType = 'popup' | 'tab' | 'dialog';
 

src/ui/App/App.tsx

@@ -78,6 +78,7 @@ import { Onboarding } from '../features/onboarding';
 import { RevealPrivateKey } from '../pages/RevealPrivateKey';
 import { urlContext } from '../../shared/UrlContext';
 import { BackupPage } from '../pages/Backup/Backup';
+import { NewTab } from '../NewTab';
 import { RouteRestoration, registerPersistentRoute } from './RouteRestoration';
 
 const isProd = process.env.NODE_ENV === 'production';
@@ -445,6 +446,7 @@ export interface AppProps {
 export function App({ initialView, inspect }: AppProps) {
   const isOnboardingMode = urlContext.appMode === 'onboarding';
   const isPageLayout = urlContext.windowLayout === 'page';
+  const isNewTabView = urlContext.appMode === 'newTab';
 
   const bodyClassList = useMemo(() => {
     const result = [];
@@ -495,12 +497,14 @@ export function App({ initialView, inspect }: AppProps) {
               ) : null}
               <GlobalKeyboardShortcuts />
               <VersionUpgrade>
-                {!isOnboardingView && !isPageLayout ? (
+                {!isOnboardingView && !isPageLayout && !isNewTabView ? (
                   // Render above <ViewSuspense /> so that it doesn't flicker
                   <MaybeTestModeDecoration />
                 ) : null}
                 <ViewSuspense logDelays={true}>
-                  {isOnboardingView ? (
+                  {isNewTabView ? (
+                    <NewTab />
+                  ) : isOnboardingView ? (
                     <Onboarding />
                   ) : isPageLayout ? (
                     <PageLayoutViews />