feat: support open in tab

src/background/controller/wallet.ts

@@ -1506,6 +1506,9 @@ export class WalletController extends BaseController {
     sessionService.broadcastEvent('accountsChanged', []);
     sessionService.broadcastEvent('lock');
     setPopupIcon('locked');
+    eventBus.emit(EVENTS.broadcastToUI, {
+      method: EVENTS.LOCK_WALLET,
+    });
   };
 
   setAutoLockTime = (time: number) => {
@@ -5138,9 +5141,6 @@ export class WalletController extends BaseController {
 const wallet = new WalletController();
 autoLockService.onAutoLock = async () => {
   await wallet.lockWallet();
-  eventBus.emit(EVENTS.broadcastToUI, {
-    method: EVENTS.LOCK_WALLET,
-  });
 };
 // check if wallet needs to lock after sw re-active
 autoLockService.syncAutoLockAt();

src/ui/component/AuthenticationModal/index.tsx

@@ -1,4 +1,4 @@
-import { Button, Form, Input } from 'antd';
+import { Button, DrawerProps, Form, Input } from 'antd';
 import styled from 'styled-components';
 import clsx from 'clsx';
 import React, {
@@ -39,6 +39,7 @@ interface AuthenticationModalProps extends WrappedComponentProps {
   description?: string;
   checklist?: string[];
   placeholder?: string;
+  getContainer?: DrawerProps['getContainer'];
 }
 
 const Description = styled.div`
@@ -129,6 +130,7 @@ const AuthenticationModal = ({
   confirmText = 'Confirm',
   title = 'Enter Password',
   placeholder,
+  getContainer,
 }: AuthenticationModalProps) => {
   const [visible, setVisible] = useState(false);
   const [form] = Form.useForm();
@@ -187,6 +189,9 @@ const AuthenticationModal = ({
       onCancel={handleCancel}
       height={height}
       isSupportDarkMode
+      getContainer={getContainer}
+      push={false}
+      key={String(visible)}
     >
       {description && <Description>{description}</Description>}
       {checklist.length > 0 && (

src/ui/component/ChainSelector/InForm.tsx

@@ -11,6 +11,7 @@ import { ReactComponent as RcImgArrowDownCC } from '@/ui/assets/swap/arrow-down-
 import { useWallet } from '@/ui/utils';
 import { findChain } from '@/utils/chain';
 import { useTranslation } from 'react-i18next';
+import { DrawerProps } from 'antd';
 
 const ChainWrapper = styled.div`
   /* height: 40px; */
@@ -184,6 +185,7 @@ interface ChainSelectorProps {
   drawerHeight?: number;
   showClosableIcon?: boolean;
   swap?: boolean;
+  getContainer?: DrawerProps['getContainer'];
 }
 export default function ChainSelectorInForm({
   value,
@@ -201,6 +203,7 @@ export default function ChainSelectorInForm({
   drawerHeight,
   showClosableIcon,
   swap,
+  getContainer,
 }: ChainSelectorProps) {
   const [showSelectorModal, setShowSelectorModal] = useState(showModal);
 
@@ -245,6 +248,7 @@ export default function ChainSelectorInForm({
           title={title}
           showClosableIcon={showClosableIcon}
           showRPCStatus
+          getContainer={getContainer}
         />
       )}
     </>

src/ui/component/ChainSelector/Modal.tsx

@@ -1,6 +1,6 @@
 /* eslint "react-hooks/exhaustive-deps": ["error"] */
 /* eslint-enable react-hooks/exhaustive-deps */
-import { Button, Drawer, Input } from 'antd';
+import { Button, Drawer, DrawerProps, Input } from 'antd';
 import React, { ReactNode, useEffect, useMemo, useState } from 'react';
 
 import { useRabbyDispatch, useRabbyGetter, useRabbySelector } from '@/ui/store';
@@ -46,6 +46,7 @@ interface ChainSelectorModalProps {
   zIndex?: number;
   excludeChains?: CHAINS_ENUM[];
   showClosableIcon?: boolean;
+  getContainer?: DrawerProps['getContainer'];
 }
 
 const useChainSeletorList = ({
@@ -145,6 +146,7 @@ const ChainSelectorModal = ({
   zIndex,
   excludeChains,
   showClosableIcon = false,
+  getContainer,
 }: ChainSelectorModalProps) => {
   const handleCancel = () => {
     onCancel();
@@ -226,6 +228,7 @@ const ChainSelectorModal = ({
         closeIcon={
           <RcIconCloseCC className="w-[20px] h-[20px] text-r-neutral-foot" />
         }
+        getContainer={getContainer}
       >
         <header className={title ? 'pt-[8px]' : 'pt-[20px]'}>
           {isShowTestnet && !hideMainnetTab && (

src/ui/component/Contact/EditModal.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Drawer, Input, Button, Form } from 'antd';
+import { Drawer, Input, Button, Form, DrawerProps } from 'antd';
 import { useWallet } from 'ui/utils';
 import { UIContactBookItem } from 'background/service/contactBook';
 import { Divide } from '@/ui/views/Approval/components/Divide';
@@ -13,9 +13,16 @@ interface EditModalProps {
   onOk(data: UIContactBookItem): void;
   onCancel(): void;
   isEdit: boolean;
+  getContainer?: DrawerProps['getContainer'];
 }
 
-const EditModal = ({ address, visible, onOk, onCancel }: EditModalProps) => {
+const EditModal = ({
+  address,
+  visible,
+  onOk,
+  onCancel,
+  getContainer,
+}: EditModalProps) => {
   const { t } = useTranslation();
   const wallet = useWallet();
   const [name, setName] = useState<string | undefined>('');
@@ -80,6 +87,7 @@ const EditModal = ({ address, visible, onOk, onCancel }: EditModalProps) => {
       placement="bottom"
       height="224px"
       destroyOnClose
+      getContainer={getContainer}
     >
       <Form onFinish={handleConfirm} className="mt-[8px] mb-[28px]">
         <Input

src/ui/component/Contact/EditWhitelist.tsx

@@ -11,8 +11,8 @@ const EditWhitelistWrapper = styled.div`
   position: fixed;
   left: 0;
   top: 0;
-  width: 100vw;
-  height: 100vh;
+  width: 100%;
+  height: 100%;
   background: var(--r-neutral-bg-1, #3d4251);
   z-index: 100;
   padding: 0 12px 80px 20px;
@@ -131,7 +131,7 @@ const EditWhitelist = ({
 
   return (
     <EditWhitelistWrapper>
-      <PageHeader onBack={handleClickBack}>
+      <PageHeader onBack={handleClickBack} forceShowBack>
         {t('component.Contact.EditWhitelist.title')}
       </PageHeader>
       <p className="text-r-neutral-body text-14 mb-20 text-center">

src/ui/component/Contact/ListModal.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import { Button, message } from 'antd';
+import { Button, DrawerProps, message } from 'antd';
 import styled from 'styled-components';
 import { useRabbyDispatch, useRabbySelector, connectStore } from 'ui/store';
 import { IDisplayedAccountWithBalance } from 'ui/models/accountToDisplay';
@@ -19,6 +19,7 @@ interface ListModalProps {
   visible: boolean;
   onOk(account: UIContactBookItem): void;
   onCancel(): void;
+  getContainer?: DrawerProps['getContainer'];
 }
 
 const ListScrollWrapper = styled.div`
@@ -31,13 +32,18 @@ const ListFooterWrapper = styled.div`
   padding: 20px;
   display: flex;
   justify-content: center;
-  position: fixed;
+  position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
 `;
 
-const ListModal = ({ visible, onOk, onCancel }: ListModalProps) => {
+const ListModal = ({
+  visible,
+  onOk,
+  onCancel,
+  getContainer,
+}: ListModalProps) => {
   const [editWhitelistVisible, setEditWhitelistVisible] = useState(false);
   const dispatch = useRabbyDispatch();
   const wallet = useWallet();
@@ -112,6 +118,7 @@ const ListModal = ({ visible, onOk, onCancel }: ListModalProps) => {
         // do nothing
       },
       wallet,
+      getContainer: getContainer,
     });
   };
 
@@ -129,6 +136,8 @@ const ListModal = ({ visible, onOk, onCancel }: ListModalProps) => {
       height={580}
       closable
       isSupportDarkMode
+      getContainer={getContainer}
+      push={false}
     >
       <div
         className={clsx('flex flex-col pb-80 h-full', {

src/ui/component/FullscreenContainer/index.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+
+import { useThemeMode } from '@/ui/hooks/usePreference';
+import { getUiType } from '@/ui/utils';
+import clsx from 'clsx';
+import styled from 'styled-components';
+
+const Container = styled.div<{ $isDarkTheme?: boolean }>`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background: ${(props) =>
+    props.$isDarkTheme
+      ? 'linear-gradient(0deg, rgba(0, 0, 0, 0.50) 0%, rgba(0, 0, 0, 0.50) 100%), var(--r-blue-default, #7084FF)'
+      : 'var(--r-blue-default, #7084FF)'};
+`;
+
+const Main = styled.div`
+  width: 400px !important;
+  height: 600px;
+  border-radius: 16px;
+  position: relative;
+  overflow: hidden;
+  transform: translateX(0);
+
+  .ant-drawer-bottom {
+    position: absolute;
+  }
+  .ant-drawer-mask {
+    border-radius: 16px;
+  }
+  .custom-popup {
+    .ant-drawer-content {
+      border-radius: 16px;
+    }
+  }
+`;
+
+interface Props {
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+const isTab = getUiType().isTab;
+export const FullscreenContainer: React.FC<Props> = ({
+  children,
+  className,
+  style,
+}) => {
+  const { isDarkTheme } = useThemeMode();
+  if (isTab) {
+    return (
+      <Container $isDarkTheme={isDarkTheme}>
+        <Main
+          className={clsx('js-rabby-popup-container', className)}
+          style={style}
+        >
+          {children}
+        </Main>
+      </Container>
+    );
+  }
+  return <>{children}</>;
+};

src/ui/component/TokenAmountInput/index.tsx

@@ -2,7 +2,7 @@ import { useSearchTestnetToken } from '@/ui/hooks/useSearchTestnetToken';
 import { useRabbySelector } from '@/ui/store';
 import { useTokens } from '@/ui/utils/portfolio/token';
 import { findChain } from '@/utils/chain';
-import { Input } from 'antd';
+import { DrawerProps, Input } from 'antd';
 import { TokenItem } from 'background/service/openapi';
 import clsx from 'clsx';
 import uniqBy from 'lodash/uniqBy';
@@ -35,6 +35,7 @@ interface TokenAmountInputProps {
   className?: string;
   type?: TokenSelectorProps['type'];
   placeholder?: string;
+  getContainer?: DrawerProps['getContainer'];
 }
 
 const TokenAmountInput = ({
@@ -49,6 +50,7 @@ const TokenAmountInput = ({
   className,
   type = 'default',
   placeholder,
+  getContainer,
 }: TokenAmountInputProps) => {
   const tokenInputRef = useRef<Input>(null);
   const [updateNonce, setUpdateNonce] = useState(0);
@@ -226,6 +228,7 @@ const TokenAmountInput = ({
         type={type}
         placeholder={placeholder}
         chainId={chainServerId}
+        getContainer={getContainer}
       />
     </div>
   );

src/ui/component/TokenSelect/index.tsx

@@ -6,7 +6,7 @@ import React, {
   forwardRef,
   useImperativeHandle,
 } from 'react';
-import { Input, Skeleton } from 'antd';
+import { DrawerProps, Input, Skeleton } from 'antd';
 import { TokenItem } from 'background/service/openapi';
 import { abstractTokenToTokenItem, getTokenSymbol } from 'ui/utils/token';
 import TokenWithChain from '../TokenWithChain';
@@ -81,6 +81,7 @@ interface CommonProps {
   disabledTips?: React.ReactNode;
   drawerHeight?: string | number;
   supportChains?: CHAINS_ENUM[];
+  getContainer?: DrawerProps['getContainer'];
 }
 
 interface BridgeFromProps extends CommonProps {
@@ -118,6 +119,7 @@ const TokenSelect = forwardRef<
       disabledTips = 'Not supported',
       drawerHeight,
       supportChains,
+      getContainer,
     },
     ref
   ) => {
@@ -281,6 +283,7 @@ const TokenSelect = forwardRef<
               disabledTips={disabledTips}
               supportChains={supportChains}
               excludeTokens={excludeTokens}
+              getContainer={getContainer}
             />
           )}
         </>