Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: implement pop window and responsive design #452

Merged
merged 5 commits into from
Apr 8, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions packages/adena-extension/index.css
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,10 @@

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;
Expand Down
14 changes: 14 additions & 0 deletions packages/adena-extension/src/assets/expand.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
@@ -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;
10 changes: 10 additions & 0 deletions packages/adena-extension/src/common/constants/ui.constant.ts
Original file line number Diff line number Diff line change
@@ -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;
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -73,6 +74,8 @@ export const AdenaProvider: React.FC<React.PropsWithChildren<unknown>> = ({ chil

const transactionHistoryService = new TransactionHistoryService(transactionHistoryRepository);

useWindowSize(true);

return (
<AdenaContext.Provider
value={{
Expand Down
22 changes: 22 additions & 0 deletions packages/adena-extension/src/common/utils/browser-utils.ts
Original file line number Diff line number Diff line change
@@ -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;
}
});
});
});
};
Original file line number Diff line number Diff line change
@@ -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) {
Expand All @@ -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;
`;
Original file line number Diff line number Diff line change
Expand Up @@ -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>;
};
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down
Original file line number Diff line number Diff line change
@@ -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: {
Expand All @@ -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'
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
`;
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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} />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
8 changes: 6 additions & 2 deletions packages/adena-extension/src/hooks/use-app-navigate.ts
Original file line number Diff line number Diff line change
@@ -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]
Expand Down Expand Up @@ -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 => {
Expand Down
9 changes: 6 additions & 3 deletions packages/adena-extension/src/hooks/use-balance-input.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -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') {
Expand All @@ -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()} ${
Expand Down Expand Up @@ -118,7 +121,7 @@ export const useBalanceInput = (tokenMetainfo: TokenModel): UseBalanceInputHookR
return {
hasError,
amount,
denom: tokenMetainfo.symbol,
denom: tokenMetainfo?.symbol || '',
description: getDescription(),
networkFee,
setAmount,
Expand Down
3 changes: 0 additions & 3 deletions packages/adena-extension/src/hooks/use-init-wallet.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -27,9 +27,6 @@ export const useInitWallet = (): void => {
break;
default:
initAddressBook();
if (!isApproveLoginPage) {
navigate(RoutePath.Wallet);
}
break;
}
}, [state]);
Expand Down
53 changes: 53 additions & 0 deletions packages/adena-extension/src/hooks/use-session-state.ts
Original file line number Diff line number Diff line change
@@ -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;
35 changes: 35 additions & 0 deletions packages/adena-extension/src/hooks/use-window-size.ts
Original file line number Diff line number Diff line change
@@ -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 };
};
Original file line number Diff line number Diff line change
Expand Up @@ -128,6 +128,6 @@ export const Login = (): JSX.Element => {
</Button>
</Wrapper>
) : (
<div></div>
<React.Fragment />
);
};
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ export const SecurityPrivacy = (): JSX.Element => {

useEffect(() => {
availRemoveAccount().then(setAvailRemove);
}, []);
}, [availRemoveAccount]);

return (
<Wrapper>
Expand Down
Loading
Loading