feat: implement pop window and responsive design (#452)

packages/adena-extension/index.css

@@ -143,8 +143,10 @@ table {
 
 html,
 body {
-  width: 360px;
-  height: 540px;
+  width: 100%;
+  height: 100%;
+  min-width: 360px;
+  min-height: 540px;
   padding: 0;
   margin: 0;
   font-family: 'Poppins', sans-serif;

packages/adena-extension/src/common/constants/storage.constant.ts

@@ -1,3 +1,4 @@
 export const WALLET_EXPORT_TYPE_STORAGE_KEY = 'WALLET_EXPORT_TYPE' as const;
 export const WALLET_EXPORT_ACCOUNT_ID = 'WALLET_EXPORT_ACCOUNT_ID' as const;
 export const QUESTIONNAIRE_EXPIRATION_MIN = 30 * 24 * 60;
+export const POPUP_SESSION_DATA_KEY = 'POPUP_SESSION_DATA' as const;

packages/adena-extension/src/common/constants/ui.constant.ts

@@ -1,3 +1,13 @@
+// Web Constants
 export const WEB_CONTENT_WIDTH = 552 as const;
 export const WEB_TOP_SPACING = 272 as const;
 export const WEB_TOP_SPACING_RESPONSIVE = 150 as const;
+
+// Responsive Sizes
+export const RESPONSIVE_EXTENSION_WIDTH = 650 as const;
+
+// Popup Constants
+export const POPUP_WIDTH = 380 as const;
+export const POPUP_HEIGHT = 590 as const;
+
+export const WINDOW_EXPAND_SIZE = 650 as const;

packages/adena-extension/src/common/provider/adena/adena-provider.tsx

@@ -19,6 +19,7 @@ import { ChainRepository } from '@repositories/common';
 import { TransactionHistoryService, TransactionService } from '@services/transaction';
 import { TokenRepository } from '@repositories/common/token';
 import { TransactionHistoryRepository } from '@repositories/transaction';
+import { useWindowSize } from '@hooks/use-window-size';
 
 export interface AdenaContextProps {
   walletService: WalletService;
@@ -73,6 +74,8 @@ export const AdenaProvider: React.FC<React.PropsWithChildren<unknown>> = ({ chil
 
   const transactionHistoryService = new TransactionHistoryService(transactionHistoryRepository);
 
+  useWindowSize(true);
+
   return (
     <AdenaContext.Provider
       value={{

packages/adena-extension/src/common/utils/browser-utils.ts

@@ -0,0 +1,22 @@
+import { POPUP_SESSION_DATA_KEY } from '@common/constants/storage.constant';
+import { POPUP_HEIGHT, POPUP_WIDTH } from '@common/constants/ui.constant';
+import { ChromeSessionStorage } from '@common/storage/chrome-session-storage';
+
+export const createPopupWindow = async (popupPath: string, state: object = {}): Promise<void> => {
+  const popupOption: chrome.windows.CreateData = {
+    url: chrome.runtime.getURL(`popup.html#${popupPath}`),
+    type: 'popup',
+    width: POPUP_WIDTH,
+    height: POPUP_HEIGHT,
+  };
+  new ChromeSessionStorage().set(POPUP_SESSION_DATA_KEY, JSON.stringify(state)).then(() => {
+    chrome.windows.create(popupOption, async (windowResponse) => {
+      window?.close();
+      chrome.tabs.onUpdated.addListener(() => {
+        if (!windowResponse) {
+          return;
+        }
+      });
+    });
+  });
+};

packages/adena-extension/src/components/atoms/hamburger-menu-button/index.tsx

@@ -1,5 +1,7 @@
 import styled from 'styled-components';
+
 import menu from '@assets/menu.svg';
+import IconExpand from '@assets/expand.svg';
 
 let op;
 if (window.location.hash.indexOf('approve') === -1) {
@@ -14,3 +16,10 @@ export const HamburgerMenuBtn = styled.button`
   height: 24px;
   background: url(${menu}) no-repeat center center;
 `;
+
+export const ExpandBtn = styled.button`
+  opacity: ${op};
+  width: 24px;
+  height: 24px;
+  background: url(${IconExpand}) no-repeat center center;
+`;

packages/adena-extension/src/components/molecules/error-container/index.tsx

@@ -19,5 +19,5 @@ export const ErrorContainer = ({ children }: Props): JSX.Element => {
     return failedNetwork[currentNetwork.id] === true;
   }, [failedNetwork, currentNetwork, currentAccount]);
 
-  return isError ? <ErrorNetwork /> : <div>{children}</div>;
+  return isError ? <ErrorNetwork /> : <React.Fragment>{children}</React.Fragment>;
 };

packages/adena-extension/src/components/pages/approve-establish/wallet-connect/wallet-connect.styles.ts

@@ -6,7 +6,7 @@ import { fonts, getTheme } from '@styles/theme';
 
 export const WalletConnectWrapper = styled.div`
   ${mixins.flex({ justify: 'flex-start' })};
-  width: 100vw;
+  width: 100%;
   padding: 0 20px;
   align-self: center;
 

packages/adena-extension/src/components/pages/main/main-token-balance/main-token-balance.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { TokenBalance } from '@components/molecules';
 import { MainTokenBalanceWrapper } from './main-token-balance.styles';
+import { useWindowSize } from '@hooks/use-window-size';
 
 export interface MainTokenBalanceProps {
   amount: {
@@ -11,13 +12,16 @@ export interface MainTokenBalanceProps {
 
 const MainTokenBalance: React.FC<MainTokenBalanceProps> = ({ amount }) => {
   const { value, denom } = amount;
+  const { windowSizeType } = useWindowSize();
+
+  const orientation = windowSizeType === 'EXPAND' ? 'HORIZONTAL' : 'VERTICAL';
 
   return (
     <MainTokenBalanceWrapper>
       <TokenBalance
         value={value}
         denom={denom}
-        orientation='VERTICAL'
+        orientation={orientation}
         fontColor='white'
         fontStyleKey='header2'
         minimumFontSize='24px'

packages/adena-extension/src/components/pages/manage-token-layout/index.ts

@@ -4,6 +4,6 @@ import styled from 'styled-components';
 export const ManageTokenLayout = styled.div`
   ${mixins.flex({ align: 'normal', justify: 'normal' })};
   width: 100%;
-  height: 490px;
+  height: 100%;
   padding: 24px 20px;
 `;

packages/adena-extension/src/components/pages/manage-token/manage-token/manage-token.styles.ts

@@ -20,7 +20,7 @@ export const ManageTokenSearchWrapper = styled.div`
     display: flex;
     left: 0;
     bottom: 0;
-    width: 100vw;
+    width: 100%;
     height: 96px;
     padding: 24px 20px;
     box-shadow: 0px -4px 4px rgba(0, 0, 0, 0.4);

packages/adena-extension/src/components/pages/transfer-input/transfer-input/transfer-input.styles.ts

@@ -6,6 +6,7 @@ export const TransferInputWrapper = styled.div`
   ${mixins.flex({ align: 'normal', justify: 'normal' })};
   position: relative;
   width: 100%;
+  height: 100%;
   min-height: 444px;
   padding-top: 5px;
 

packages/adena-extension/src/components/pages/transfer-input/transfer-input/transfer-input.tsx

@@ -10,7 +10,7 @@ import ArrowLeftIcon from '@assets/arrowL-left.svg';
 import { TokenModel } from '@types';
 
 export interface TransferInputProps {
-  tokenMetainfo: TokenModel;
+  tokenMetainfo?: TokenModel;
   addressInput: {
     opened: boolean;
     hasError: boolean;
@@ -57,17 +57,17 @@ const TransferInput: React.FC<TransferInputProps> = ({
     <TransferInputWrapper>
       {hasBackButton ? (
         <SubHeader
-          title={`Send ${tokenMetainfo.symbol}`}
+          title={`Send ${tokenMetainfo?.symbol || ''}`}
           leftElement={{
             element: <img src={`${ArrowLeftIcon}`} alt={'back image'} />,
             onClick: onClickBack,
           }}
         />
       ) : (
-        <SubHeader title={`Send ${tokenMetainfo.symbol}`} />
+        <SubHeader title={`Send ${tokenMetainfo?.symbol || ''}`} />
       )}
       <div className='logo-wrapper'>
-        <img className='logo' src={tokenMetainfo.image || UnknownTokenIcon} alt='token image' />
+        <img className='logo' src={tokenMetainfo?.image || UnknownTokenIcon} alt='token image' />
       </div>
       <div className='address-input-wrapper'>
         <AddressInput {...addressInput} />

packages/adena-extension/src/components/pages/transfer-ledger-loading/transfer-ledger-loading.styles.ts

@@ -5,7 +5,7 @@ export const TransferLedgerLoadingWrapper = styled.div`
   ${mixins.flex({ align: 'normal', justify: 'flex-start' })};
   position: relative;
   width: 100%;
-  height: auto;
+  height: 100%;
   min-height: 444px;
 
   @keyframes rotate {

packages/adena-extension/src/hooks/use-app-navigate.ts

@@ -1,5 +1,5 @@
 import { NavigateOptions, useLocation, useNavigate } from 'react-router-dom';
-import { RouteParams } from 'src/types/router';
+import { RouteParams, RoutePath } from '@types';
 
 type NavigateProps<key extends keyof RouteParams> = key extends unknown
   ? null extends RouteParams[key]
@@ -43,7 +43,11 @@ const useAppNavigate = <RouteName extends keyof RouteParams>(): {
   };
 
   const goBack = (): void => {
-    baseNavigate(-1);
+    if (window?.history?.length > 1) {
+      baseNavigate(-1);
+    } else {
+      navigate(RoutePath.Home, {});
+    }
   };
 
   const reload = (): void => {

packages/adena-extension/src/hooks/use-balance-input.ts

@@ -25,7 +25,7 @@ export type UseBalanceInputHookReturn = {
   validateBalanceInput: () => boolean;
 };
 
-export const useBalanceInput = (tokenMetainfo: TokenModel): UseBalanceInputHookReturn => {
+export const useBalanceInput = (tokenMetainfo?: TokenModel): UseBalanceInputHookReturn => {
   const { balanceService } = useAdenaContext();
   const { wallet } = useWalletContext();
   const { currentAccount } = useCurrentAccount();
@@ -45,6 +45,9 @@ export const useBalanceInput = (tokenMetainfo: TokenModel): UseBalanceInputHookR
     if (!currentAccount) {
       return false;
     }
+    if (!tokenMetainfo) {
+      return false;
+    }
     const currentBalance = await fetchBalanceBy(currentAccount, tokenMetainfo);
     setCurrentBalance(currentBalance);
     if (currentBalance.type === 'gno-native') {
@@ -71,7 +74,7 @@ export const useBalanceInput = (tokenMetainfo: TokenModel): UseBalanceInputHookR
   }, []);
 
   const getDescription = useCallback(() => {
-    if (hasError) {
+    if (hasError || !tokenMetainfo) {
       return errorMessage;
     }
     return `Balance: ${BigNumber(currentBalance?.amount.value || 0).toFormat()} ${
@@ -118,7 +121,7 @@ export const useBalanceInput = (tokenMetainfo: TokenModel): UseBalanceInputHookR
   return {
     hasError,
     amount,
-    denom: tokenMetainfo.symbol,
+    denom: tokenMetainfo?.symbol || '',
     description: getDescription(),
     networkFee,
     setAmount,

packages/adena-extension/src/hooks/use-init-wallet.tsx

@@ -27,9 +27,6 @@ export const useInitWallet = (): void => {
         break;
       default:
         initAddressBook();
-        if (!isApproveLoginPage) {
-          navigate(RoutePath.Wallet);
-        }
         break;
     }
   }, [state]);

packages/adena-extension/src/hooks/use-session-state.ts

@@ -0,0 +1,53 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { ChromeSessionStorage } from '@common/storage/chrome-session-storage';
+import { POPUP_SESSION_DATA_KEY } from '@common/constants/storage.constant';
+import { RouteParams } from '@types';
+import useAppNavigate from './use-app-navigate';
+
+const useSessionParams = <RouteName extends keyof RouteParams>(): {
+  isPopup: boolean | null;
+  params: RouteParams[RouteName] | null;
+  isLoading: boolean;
+} => {
+  const { params } = useAppNavigate<RouteName>();
+  const { data: isPopup = null } = useQuery(
+    ['popup/isPopup', chrome.windows],
+    async () => {
+      try {
+        const isPopup = (await chrome.windows.getCurrent()).type === 'popup';
+        return isPopup;
+      } catch {
+        return null;
+      }
+    },
+    {},
+  );
+
+  const { data = null, isLoading } = useQuery(
+    ['popup/popupState', params, isPopup],
+    async () => {
+      if (params) {
+        return params;
+      }
+      if (!isPopup) {
+        return null;
+      }
+      try {
+        const sessionState = await new ChromeSessionStorage().get(POPUP_SESSION_DATA_KEY);
+        return JSON.parse(sessionState) as RouteParams[RouteName];
+      } catch {
+        return null;
+      }
+    },
+    {},
+  );
+
+  return {
+    isPopup,
+    params: data,
+    isLoading,
+  };
+};
+
+export default useSessionParams;

packages/adena-extension/src/hooks/use-window-size.ts

@@ -0,0 +1,35 @@
+import { WINDOW_EXPAND_SIZE } from '@common/constants/ui.constant';
+import { CommonState } from '@states';
+import { WindowSizeType } from '@types';
+import { useEffect } from 'react';
+import { useRecoilState } from 'recoil';
+
+export type UseWindowSizeReturn = {
+  windowSizeType: WindowSizeType;
+};
+
+export const useWindowSize = (init = false): UseWindowSizeReturn => {
+  const [windowSizeType, setWindowSizeType] = useRecoilState(CommonState.windowSizeType);
+
+  useEffect(() => {
+    if (!init) {
+      return;
+    }
+    if (typeof window !== 'undefined') {
+      const handleResize = (): void => {
+        const windowSizeType = window.innerWidth > WINDOW_EXPAND_SIZE ? 'EXPAND' : 'DEFAULT';
+        setWindowSizeType(windowSizeType);
+      };
+      window.addEventListener('resize', handleResize);
+      handleResize();
+      return () => window.removeEventListener('resize', handleResize);
+    } else {
+      return () =>
+        window.removeEventListener('resize', () => {
+          return null;
+        });
+    }
+  }, []);
+
+  return { windowSizeType };
+};

packages/adena-extension/src/pages/popup/certify/login/index.tsx

@@ -128,6 +128,6 @@ export const Login = (): JSX.Element => {
       </Button>
     </Wrapper>
   ) : (
-    <div></div>
+    <React.Fragment />
   );
 };

packages/adena-extension/src/pages/popup/certify/reset-wallet/index.tsx

@@ -10,10 +10,10 @@ import mixins from '@styles/mixins';
 import useAppNavigate from '@hooks/use-app-navigate';
 
 const content =
-  'Only proceed if you wish to remove all existing accounts and replace them with new ones. Make sure to back up your seed phrase and keys first.';
+  'This will remove all accounts from this wallet. As your seed phrase and keys are only stored on this device, Adena cannot recover them once reset.';
 
 const forgotPasswordContent =
-  'This will remove all accounts from this wallet. As your seed phrase and keys are only stored on this device, Adena cannot recover them once reset.';
+  'Adena cannot recover your password for you. You can only reset your password with your seed phrase.';
 
 export const ResetWallet = (): JSX.Element => {
   const theme = useTheme();

packages/adena-extension/src/pages/popup/certify/security-privacy/index.tsx

@@ -88,7 +88,7 @@ export const SecurityPrivacy = (): JSX.Element => {
 
   useEffect(() => {
     availRemoveAccount().then(setAvailRemove);
-  }, []);
+  }, [availRemoveAccount]);
 
   return (
     <Wrapper>