+)
diff --git a/packages/providers/inpage-providers-hub/src/floatingButton/index.tsx b/packages/providers/inpage-providers-hub/src/floatingButton/index.tsx
new file mode 100644
index 00000000..f804e776
--- /dev/null
+++ b/packages/providers/inpage-providers-hub/src/floatingButton/index.tsx
@@ -0,0 +1,746 @@
+import { render } from 'preact';
+import { useEffect, useMemo, useCallback, useRef, useState } from 'preact/hooks';
+import {
+ IHostSecurity,
+ EHostSecurityLevel,
+} from './type'
+import { Logo } from './images';
+
+let isInjected = false;
+interface i18nText {
+ title: string;
+ description: string;
+ continueMessage: string;
+ continueLink: string;
+ addToWhiteListLink: string;
+ sourceMessage: string;
+ fetchingDAppInfo: string;
+ dappListedBy: string;
+ riskDetection: string;
+ maliciousDappWarningSourceMessage: string;
+ verifiedSite: string;
+ unknown: string;
+ maliciousSiteWarning: string;
+ suspectedMaliciousBehavior: string;
+ lastVerifiedAt: string;
+ disable: string;
+ hideOnThisSite: string;
+ canBeReEnabledInSettings: string;
+}
+
+let i18n: i18nText = {} as i18nText
+
+const logoStyle = {
+ width: '28px',
+ height: '28px',
+};
+
+const textStyle = {
+ color: 'rgba(0, 0, 0, 0.61)',
+ fontSize: '13px',
+ marginLeft: '8px',
+};
+
+const containerId = 'onekey-floating-widget';
+
+const removeApp = () => {
+ document.getElementById(containerId)?.remove();
+}
+
+const useOutsideClick = (
+ ref: { current?: HTMLDivElement | null },
+ callback: () => void,
+) => {
+ useEffect(() => {
+ const handleClickOutside = (event: MouseEvent) => {
+ if (
+ ref.current &&
+ !ref.current.contains(event.target as HTMLElement)
+ ) {
+ callback();
+ }
+ };
+ document.addEventListener('mousedown', handleClickOutside);
+ return () => {
+ document.removeEventListener('mousedown', handleClickOutside);
+ };
+ }, [callback, ref]);
+};
+function CloseDialog({ onClose }: { onClose: () => void }) {
+ const dialogRef = useRef
+
+ );
+}
+
+function IconButton({
+ isExpanded,
+ onClick,
+ dataLoaded,
+ isShowCloseDialog,
+ showCloseDialog,
+}: {
+ isExpanded: boolean;
+ isShowCloseDialog: boolean;
+ onClick: () => void;
+ dataLoaded: boolean;
+ showCloseDialog: () => void;
+}) {
+ const [showCloseButton, setIsShowCloseButton] = useState(false);
+ return (
+
+ {i18n.hideOnThisSite}
+
+
+ {i18n.disable}
+
+
+ {i18n.canBeReEnabledInSettings}
+
+ {
+ if (isExpanded || isShowCloseDialog) {
+ return;
+ }
+ setIsShowCloseButton(true);
+ }}
+ onMouseLeave={() => setIsShowCloseButton(false)}
+ onClick={() => {
+ if (isShowCloseDialog) {
+ return;
+ }
+ setIsShowCloseButton(false);
+ onClick();
+ }}
+ >
+
+ );
+}
+
+function SecurityInfoRow({
+ title,
+ children,
+}: {
+ title: string;
+ children: any;
+}) {
+ return (
+ {
+ event.stopPropagation();
+ setIsShowCloseButton(false);
+ showCloseDialog();
+ }}
+ >
+
+
+
+
+ {title}
+
+ {children}
+
+ );
+}
+
+function SecurityRiskDetectionRow({
+ securityInfo,
+}: {
+ securityInfo: IHostSecurity;
+}) {
+ const { securityElement, securityStatus } = useMemo(() => {
+ const security =
+ securityInfo?.checkSources
+ .filter((item) => item.riskLevel === EHostSecurityLevel.Security)
+ .map((item) => item.name)
+ .join(' & ') || '';
+ if (security) {
+ return {
+ securityStatus: EHostSecurityLevel.Security,
+ securityElement: (
+ <>
+
+ {i18n.verifiedSite}
+
+
+
+ ),
+ };
+ }
+ const highSecurity =
+ securityInfo?.checkSources
+ .filter((item) => item.riskLevel === EHostSecurityLevel.High)
+ .map((item) => item.name)
+ .join(' & ') || '';
+
+ if (highSecurity) {
+ return {
+ securityStatus: EHostSecurityLevel.High,
+ securityElement: (
+ <>
+
+ {i18n.maliciousSiteWarning}
+
+
+
+ ),
+ };
+ }
+
+ const mediumSecurity =
+ securityInfo?.checkSources
+ .filter((item) =>
+ EHostSecurityLevel.Medium == item.riskLevel,
+ )
+ .map((item) => item.name)
+ .join(' & ') || '';
+ if (mediumSecurity) {
+ return {
+ securityStatus: EHostSecurityLevel.Medium,
+ securityElement: (
+ <>
+
+ {i18n.suspectedMaliciousBehavior}
+
+
+
+ ),
+ };
+ }
+ return {
+ securityStatus: EHostSecurityLevel.Unknown,
+ securityElement: (
+
+ {i18n.unknown}
+
+ ),
+ };
+ }, [securityInfo?.checkSources]);
+ return (
+
+ {securityElement}
+
+
+
+ );
+}
+
+function App() {
+ const [isExpanded, setIsExpanded] = useState(false);
+ const [showSecurityInfo, setIsShowSecurityInfo] = useState(false);
+ const [securityInfo, setSecurityInfo] = useState
+
+
+ ) : null}
+
+
+ {securityInfo.updatedAt}
+
+
+ ) : null}
+
+
+
+
+ {securityInfo?.dapp?.origins.length ? (
+
+ {securityInfo?.dapp?.logo ? (
+ 
+ ) : (
+
+ )}
+ {securityInfo?.dapp?.name || securityInfo?.host}
+
+ {
+ onClose();
+ setTimeout(() => {
+ showCloseDialog();
+ }, 200)
+ }}
+ >
+
+
+
+ {securityInfo?.dapp?.origins.map((item) => (
+ 
+ ))}
+
+
+
+ Powered by
+
+
+
+ {showSecurityInfo && securityInfo ? (
+ {
+ setIsExpanded(false);
+ setIsShowSecurityInfo(false);
+ }}
+ />
+ ) : (
+ {
+ setIsShowCloseDialog(false);
+ }}
+ />
+ )}
+
+ );
+}
+
+export async function injectFloatingButton() {
+ const { isShow, i18n: i18nResponse } = await (globalThis as unknown as {
+ $onekey: {
+ $private: {
+ request: (
+ arg: { method: string; params: { url: string } }
+ ) => Promise<{
+ isShow: boolean,
+ i18n: i18nText
+ }>
+ }
+ }
+ }).$onekey.$private.request({
+ method: 'wallet_isShowFloatingButton',
+ params: { url: window.location.origin },
+ });
+ i18n = i18nResponse
+ if (!isShow) {
+ return;
+ }
+
+ if (isInjected) {
+ return;
+ }
+
+ if (!document.body) {
+ return;
+ }
+ isInjected = true;
+ const div = document.createElement('div');
+ document.body.appendChild(div);
+ render(