feat: improve banner style in Earn module & fix webpack building on Desktop & add webviewDebuggingEnabled into Dev Settings.

apps/desktop/src-electron/app.ts

@@ -4,8 +4,8 @@
 import { format as formatUrl } from 'url';
 
 import {
   attachTitlebarToWindow,
   setupTitlebar,
 } from 'custom-electron-titlebar/main';
 import {
   BrowserWindow,
@@ -74,7 +74,7 @@
 const isWin = process.platform === 'win32';
 
 if (!isMac) {
   setupTitlebar();
 }
 
 let systemIdleInterval: NodeJS.Timeout;
@@ -428,7 +428,7 @@
   });
 
   if (!isMac) {
     attachTitlebarToWindow(browserWindow);
   }
   const getSafelyBrowserWindow = () => {
     if (browserWindow && !browserWindow.isDestroyed()) {
@@ -637,6 +637,11 @@
     safelyBrowserWindow?.setBackgroundColor(getBackgroundColor(themeKey));
   });
 
+  ipcMain.on(ipcMessageKeys.APP_IS_FOCUSED, (event) => {
+    const safelyBrowserWindow = getSafelyBrowserWindow();
+    event.returnValue = safelyBrowserWindow?.isFocused();
+  });
+
   ipcMain.on(ipcMessageKeys.TOUCH_ID_PROMPT, async (event, msg: string) => {
     if (isWin) {
       logger.info(

apps/desktop/src-electron/config.ts

@@ -56,6 +56,7 @@ export const ipcMessageKeys = {
   APP_OPEN_LOGGER_FILE: 'app/openLoggerFile',
   APP_TEST_CRASH: 'app/testCrash',
   APP_UPDATE_DISABLE_SHORTCUTS: 'app/updateDisableShortcuts',
+  APP_IS_FOCUSED: 'app/isFocused',
 
   // Theme
   THEME_UPDATE: 'theme/update',

apps/desktop/src-electron/preload.ts

@@ -54,6 +54,7 @@ export type IDesktopAPI = {
   onAppState: (cb: (state: IDesktopAppState) => void) => () => void;
   canPromptTouchID: () => boolean;
   getEnvPath: () => { [key: string]: string };
+  isFocused: () => boolean;
   changeDevTools: (isOpen: boolean) => void;
   changeTheme: (theme: string) => void;
   changeLanguage: (theme: string) => void;
@@ -277,6 +278,7 @@ const desktopApi = Object.freeze({
     },
   getBundleInfo: () =>
     ipcRenderer.sendSync(ipcMessageKeys.APP_GET_BUNDLE_INFO) as IMacBundleInfo,
+  isFocused: () => ipcRenderer.sendSync(ipcMessageKeys.APP_IS_FOCUSED),
   openLoggerFile: () => ipcRenderer.send(ipcMessageKeys.APP_OPEN_LOGGER_FILE),
   testCrash: () => ipcRenderer.send(ipcMessageKeys.APP_TEST_CRASH),
   promptTouchID: async (

development/webpack/utils.js

@@ -40,3 +40,9 @@ exports.createResolveExtensions = function ({ platform, configName }) {
     '.d.ts',
   ]);
 };
+
+exports.getOutputFolder = function ({ isManifestV3 }) {
+  // isManifestV3 ? `${buildTargetBrowser}_v3` : buildTargetBrowser,
+  const buildTargetBrowser = TARGET_BROWSER;
+  return isManifestV3 ? `${buildTargetBrowser}_v3` : buildTargetBrowser;
+};

development/webpack/webpack.ext.config.js

@@ -13,24 +13,16 @@ const {
   isDev,
   isManifestV2,
   ENABLE_ANALYZER,
-  TARGET_BROWSER,
 } = require('./constant');
 const devUtils = require('./ext/devUtils');
+const utils = require('./utils');
 const codeSplit = require('./ext/codeSplit');
 const pluginsHtml = require('./ext/pluginsHtml');
 const pluginsCopy = require('./ext/pluginsCopy');
 // const htmlLazyScript = require('./ext/htmlLazyScript');
 
 const IS_DEV = isDev;
 
-function getOutputFolder() {
-  // isManifestV3 ? `${buildTargetBrowser}_v3` : buildTargetBrowser,
-  const buildTargetBrowser = TARGET_BROWSER;
-  return isManifestV3 ? `${buildTargetBrowser}_v3` : buildTargetBrowser;
-}
-
-module.exports.getOutputFolder = getOutputFolder;
-
 module.exports = ({
   basePath,
   platform = babelTools.developmentConsts.platforms.ext,
@@ -52,7 +44,7 @@ module.exports = ({
     plugins: baseConfig.basePlugins,
     output: {
       clean: false,
-      path: path.resolve(basePath, 'build', getOutputFolder()),
+      path: path.resolve(basePath, 'build', utils.getOutputFolder()),
       // do not include [hash] here, as `content-script.bundle.js` filename should be stable
       filename: '[name].bundle.js',
       chunkFilename: isDev

development/webpack/webpack.prod.config.js

@@ -2,7 +2,7 @@ const TerserPlugin = require('terser-webpack-plugin');
 const path = require('path');
 const { sentryWebpackPlugin } = require('@sentry/webpack-plugin');
 const babelTools = require('../babelTools');
-const extConfig = require('./webpack.ext.config');
+const utils = require('./utils');
 
 const FILES_TO_DELETE_AFTER_UPLOAD = [
   '**/*.js.map',
@@ -13,7 +13,7 @@ const FILES_TO_DELETE_AFTER_UPLOAD = [
 module.exports = ({ platform, basePath }) => {
   const isExt = platform === babelTools.developmentConsts.platforms.ext;
   const rootPath = isExt
-    ? path.join(basePath, 'build', extConfig.getOutputFolder())
+    ? path.join(basePath, 'build', utils.getOutputFolder())
     : path.join(basePath, 'web-build');
   const filesToDeleteAfterUpload = FILES_TO_DELETE_AFTER_UPLOAD.map((file) =>
     path.join(rootPath, file),

packages/components/src/composite/Banner/index.tsx

@@ -142,7 +142,7 @@ export function Banner<T extends IBannerData>({
               <IconButton
                 position="absolute"
                 left="$10"
-                top="50%"
+                bottom="50%"
                 transform={platformEnv.isNative ? '' : 'translateY(-50%)'}
                 icon="ChevronLeftOutline"
                 variant="tertiary"
@@ -163,7 +163,7 @@ export function Banner<T extends IBannerData>({
                 variant="tertiary"
                 position="absolute"
                 right="$10"
-                top="50%"
+                bottom="50%"
                 transform={platformEnv.isNative ? '' : 'translateY(-50%)'}
                 iconProps={{
                   color:

packages/components/src/hooks/useVisibilityChange.ts

@@ -10,6 +10,9 @@ export const getCurrentVisibilityState = () => {
     // https://reactnative.dev/docs/appstate
     return AppState.currentState === 'active' || AppState.currentState === null;
   }
+  if (platformEnv.isDesktop) {
+    return globalThis.desktopApi.isFocused();
+  }
   return document.visibilityState === 'visible';
 };
 export const onVisibilityStateChange = (
@@ -23,6 +26,13 @@ export const onVisibilityStateChange = (
       subscription.remove();
     };
   }
+
+  if (platformEnv.isDesktop) {
+    const removeSubscription = globalThis.desktopApi.onAppState((state) => {
+      callback(state === 'active');
+    });
+    return removeSubscription;
+  }
   const handleVisibilityStateChange = () => {
     callback(document.visibilityState === 'visible');
   };

packages/kit-bg/src/states/jotai/atoms/devSettings.ts

@@ -21,6 +21,7 @@ export interface IDevSettings {
   disableSolanaPriorityFee?: boolean;
   disableNumberShortcuts?: boolean;
   disableSearchAndAccountSelectorShortcuts?: boolean;
+  webviewDebuggingEnabled?: boolean;
 }
 
 export type IDevSettingsKeys = keyof IDevSettings;
@@ -43,6 +44,7 @@ export const {
       disableSolanaPriorityFee: false,
       disableNumberShortcuts: false,
       disableSearchAndAccountSelectorShortcuts: false,
+      webviewDebuggingEnabled: false,
     },
   },
 });

packages/kit/src/components/WebView/InpageProviderWebView.native.tsx

@@ -33,6 +33,7 @@ const InpageProviderWebView: FC<IInpageProviderWebViewProps> = forwardRef(
       androidLayerType,
       displayProgressBar,
       onProgress,
+      webviewDebuggingEnabled,
     }: IInpageProviderWebViewProps,
     ref: any,
   ) => {
@@ -120,6 +121,7 @@ const InpageProviderWebView: FC<IInpageProviderWebViewProps> = forwardRef(
       <Stack flex={1}>
         {progressLoading}
         <NativeWebView
+          webviewDebuggingEnabled={webviewDebuggingEnabled}
           ref={setWebViewRef}
           src={src}
           onSrcChange={onSrcChange}

packages/kit/src/components/WebView/NativeWebView.tsx

@@ -15,6 +15,7 @@ import { WebView } from 'react-native-webview';
 // import debugLogger from '@onekeyhq/shared/src/logger/debugLogger';
 
 import { Stack } from '@onekeyhq/components';
+import { useDevSettingsPersistAtom } from '@onekeyhq/kit-bg/src/states/jotai/atoms';
 import platformEnv from '@onekeyhq/shared/src/platformEnv';
 import { openUrlExternal } from '@onekeyhq/shared/src/utils/openUrlUtils';
 import { checkOneKeyCardGoogleOauthUrl } from '@onekeyhq/shared/src/utils/uriUtils';
@@ -49,6 +50,7 @@ const NativeWebView = forwardRef(
       onLoadEnd,
       onScroll,
       pullToRefreshEnabled = true,
+      webviewDebuggingEnabled,
       ...props
     }: INativeWebViewProps,
     ref,
@@ -139,8 +141,29 @@ const NativeWebView = forwardRef(
       [src],
     );
 
+    const [devSettings] = useDevSettingsPersistAtom();
+
     const renderLoading = useCallback(() => <Stack />, []);
 
+    const debuggingEnabled = useMemo(() => {
+      if (__DEV__) {
+        return true;
+      }
+
+      if (
+        devSettings.enabled &&
+        devSettings.settings?.webviewDebuggingEnabled
+      ) {
+        return true;
+      }
+
+      return webviewDebuggingEnabled;
+    }, [
+      devSettings.enabled,
+      devSettings.settings?.webviewDebuggingEnabled,
+      webviewDebuggingEnabled,
+    ]);
+
     const renderWebView = (
       <WebView
         style={styles.container}
@@ -188,7 +211,7 @@ const NativeWebView = forwardRef(
           void onScroll?.(e);
         }}
         scrollEventThrottle={16}
-        webviewDebuggingEnabled={__DEV__}
+        webviewDebuggingEnabled={debuggingEnabled}
         {...props}
       />
     );

packages/kit/src/components/WebView/index.tsx

@@ -42,6 +42,7 @@ interface IWebViewProps extends IElectronWebViewEvents {
   onScroll?: IWebViewOnScroll;
   displayProgressBar?: boolean;
   onProgress?: (progress: number) => void;
+  webviewDebuggingEnabled?: boolean;
 }
 
 const WebView: FC<IWebViewProps> = ({
@@ -51,6 +52,7 @@ const WebView: FC<IWebViewProps> = ({
   onWebViewRef = () => {},
   customReceiveHandler,
   containerProps,
+  webviewDebuggingEnabled,
   ...rest
 }) => {
   const receiveHandler = useCallback<IJsBridgeReceiveHandler>(
@@ -81,6 +83,7 @@ const WebView: FC<IWebViewProps> = ({
     <Stack flex={1} bg="background-default" {...containerProps}>
       <InpageProviderWebView
         ref={onWebViewRef}
+        webviewDebuggingEnabled={webviewDebuggingEnabled}
         src={src}
         allowpopups={allowpopups}
         receiveHandler={receiveHandler}

packages/kit/src/components/WebView/types.ts

@@ -44,6 +44,11 @@ export interface IInpageProviderWebViewProps
   onScroll?: IWebViewOnScroll;
   displayProgressBar?: boolean;
   onProgress?: (progress: number) => void;
+  /**
+   * Enables WebView remote debugging using Chrome (Android) or Safari (iOS).
+   * Only works in iOS and Android devices.
+   */
+  webviewDebuggingEnabled?: boolean;
 }
 
 export type IElectronWebView = {

packages/kit/src/provider/Container/NetworkReachabilityTracker.tsx

@@ -19,8 +19,8 @@ const checkNetInfo = async (devSettings: IDevSettingsPersistAtom) => {
     reachabilityLongTimeout: REACHABILITY_LONG_TIMEOUT,
     reachabilityShortTimeout: REACHABILITY_SHORT_TIMEOUT,
     reachabilityRequestTimeout: REACHABILITY_REQUEST_TIMEOUT,
-    reachabilityShouldRun: () => getCurrentVisibilityState(),
-    // met iOS requirements to get SSID. Will leak memory if set to true without meeting requirements.
+    // TODO: Rewrite to periodically check reachability
+    reachabilityShouldRun: () => true,
     shouldFetchWiFiSSID: false,
     useNativeReachability: false,
   });

packages/kit/src/views/Earn/EarnHome.tsx

@@ -799,22 +799,26 @@ function BasicEarnHome() {
           onItemPress={onBannerPress}
           isLoading={false}
           leftIconButtonStyle={{
-            left: '$1.5',
+            left: '$3.5',
+            bottom: '$2.5',
             size: 'small',
           }}
           rightIconButtonStyle={{
-            right: '$1.5',
+            right: '$3.5',
+            bottom: '$2.5',
             size: 'small',
           }}
           indicatorContainerStyle={{
-            right: '$2.5',
+            right: 0,
+            width: '100%',
+            jc: 'center',
             bottom: '$3',
           }}
           itemTitleContainerStyle={{
             top: 0,
             bottom: 0,
-            right: '$10',
-            left: '$10',
+            right: '$3.5',
+            left: '$3.5',
             justifyContent: 'center',
           }}
         />

packages/kit/src/views/Setting/pages/FloatingIcon/index.tsx

@@ -11,6 +11,7 @@ import {
 import backgroundApiProxy from '@onekeyhq/kit/src/background/instance/backgroundApiProxy';
 import { useSettingsPersistAtom } from '@onekeyhq/kit-bg/src/states/jotai/atoms/settings';
 import { ETranslations } from '@onekeyhq/shared/src/locale';
+import { defaultLogger } from '@onekeyhq/shared/src/logger/logger';
 
 function FloatingIconModal() {
   const intl = useIntl();
@@ -35,6 +36,9 @@ function FloatingIconModal() {
                 await backgroundApiProxy.serviceSetting.setIsShowFloatingButton(
                   value,
                 );
+                defaultLogger.discovery.dapp.enableFloatingIcon({
+                  enable: value,
+                });
               }}
             />
           </XStack>

packages/kit/src/views/Setting/pages/List/DevSettingsSection/index.tsx

@@ -217,6 +217,19 @@ export const DevSettingsSection = () => {
       >
         <Switch size={ESwitchSize.small} />
       </SectionFieldItem>
+      {platformEnv.isNative ? (
+        <SectionFieldItem
+          name="webviewDebuggingEnabled"
+          title="Enable WebviewDebugging"
+          onValueChange={() => {
+            setTimeout(() => {
+              backgroundApiProxy.serviceApp.restartApp();
+            }, 300);
+          }}
+        >
+          <Switch size={ESwitchSize.small} />
+        </SectionFieldItem>
+      ) : null}
       <SectionFieldItem
         name="disableSolanaPriorityFee"
         title="禁用 Solana 交易优先费"

packages/shared/src/logger/scopes/discovery/scenes/dapp.ts

@@ -73,6 +73,12 @@ export class DappScene extends BaseScene {
     return params;
   }
 
+  @LogToServer()
+  @LogToLocal()
+  public enableFloatingIcon(params: { enable: boolean }) {
+    return params;
+  }
+
   @LogToLocal()
   public dappRiskDetect(params: {
     riskLevel: EHostSecurityLevel;