diff --git a/packages/adena-extension/index.css b/packages/adena-extension/index.css index 1ddc2bc0a..70f6a6c00 100644 --- a/packages/adena-extension/index.css +++ b/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; diff --git a/packages/adena-extension/src/assets/expand.svg b/packages/adena-extension/src/assets/expand.svg new file mode 100644 index 000000000..b7c4b3d74 --- /dev/null +++ b/packages/adena-extension/src/assets/expand.svg @@ -0,0 +1,14 @@ + + + + + diff --git a/packages/adena-extension/src/common/constants/storage.constant.ts b/packages/adena-extension/src/common/constants/storage.constant.ts index 187e6019c..8ab8d0157 100644 --- a/packages/adena-extension/src/common/constants/storage.constant.ts +++ b/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; diff --git a/packages/adena-extension/src/common/constants/ui.constant.ts b/packages/adena-extension/src/common/constants/ui.constant.ts index e85281235..04e05ad96 100644 --- a/packages/adena-extension/src/common/constants/ui.constant.ts +++ b/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; diff --git a/packages/adena-extension/src/common/provider/adena/adena-provider.tsx b/packages/adena-extension/src/common/provider/adena/adena-provider.tsx index 7e3a93c15..249eebdaf 100644 --- a/packages/adena-extension/src/common/provider/adena/adena-provider.tsx +++ b/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> = ({ chil const transactionHistoryService = new TransactionHistoryService(transactionHistoryRepository); + useWindowSize(true); + return ( => { + 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; + } + }); + }); + }); +}; diff --git a/packages/adena-extension/src/components/atoms/hamburger-menu-button/index.tsx b/packages/adena-extension/src/components/atoms/hamburger-menu-button/index.tsx index 81eaa0786..8db0b78e8 100644 --- a/packages/adena-extension/src/components/atoms/hamburger-menu-button/index.tsx +++ b/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; +`; diff --git a/packages/adena-extension/src/components/molecules/error-container/index.tsx b/packages/adena-extension/src/components/molecules/error-container/index.tsx index e3a0a3b79..e31bd7c8d 100644 --- a/packages/adena-extension/src/components/molecules/error-container/index.tsx +++ b/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 ? :
{children}
; + return isError ? : {children}; }; diff --git a/packages/adena-extension/src/components/pages/approve-establish/wallet-connect/wallet-connect.styles.ts b/packages/adena-extension/src/components/pages/approve-establish/wallet-connect/wallet-connect.styles.ts index a6c629b64..08eb76010 100644 --- a/packages/adena-extension/src/components/pages/approve-establish/wallet-connect/wallet-connect.styles.ts +++ b/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; diff --git a/packages/adena-extension/src/components/pages/main/main-token-balance/main-token-balance.tsx b/packages/adena-extension/src/components/pages/main/main-token-balance/main-token-balance.tsx index e34bc7477..bc27336ed 100644 --- a/packages/adena-extension/src/components/pages/main/main-token-balance/main-token-balance.tsx +++ b/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 = ({ amount }) => { const { value, denom } = amount; + const { windowSizeType } = useWindowSize(); + + const orientation = windowSizeType === 'EXPAND' ? 'HORIZONTAL' : 'VERTICAL'; return ( = ({ {hasBackButton ? ( , onClick: onClickBack, }} /> ) : ( - + )}
- token image + token image
diff --git a/packages/adena-extension/src/components/pages/transfer-ledger-loading/transfer-ledger-loading.styles.ts b/packages/adena-extension/src/components/pages/transfer-ledger-loading/transfer-ledger-loading.styles.ts index 4bb63075a..d4e7225b7 100644 --- a/packages/adena-extension/src/components/pages/transfer-ledger-loading/transfer-ledger-loading.styles.ts +++ b/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 { diff --git a/packages/adena-extension/src/hooks/use-app-navigate.ts b/packages/adena-extension/src/hooks/use-app-navigate.ts index 3d78210ad..0c6652c82 100644 --- a/packages/adena-extension/src/hooks/use-app-navigate.ts +++ b/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 unknown ? null extends RouteParams[key] @@ -43,7 +43,11 @@ const useAppNavigate = (): { }; const goBack = (): void => { - baseNavigate(-1); + if (window?.history?.length > 1) { + baseNavigate(-1); + } else { + navigate(RoutePath.Home, {}); + } }; const reload = (): void => { diff --git a/packages/adena-extension/src/hooks/use-balance-input.ts b/packages/adena-extension/src/hooks/use-balance-input.ts index fc7bcd9bc..6a989fafc 100644 --- a/packages/adena-extension/src/hooks/use-balance-input.ts +++ b/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, diff --git a/packages/adena-extension/src/hooks/use-init-wallet.tsx b/packages/adena-extension/src/hooks/use-init-wallet.tsx index 0ab0cdf79..b017f1f8b 100644 --- a/packages/adena-extension/src/hooks/use-init-wallet.tsx +++ b/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]); diff --git a/packages/adena-extension/src/hooks/use-session-state.ts b/packages/adena-extension/src/hooks/use-session-state.ts new file mode 100644 index 000000000..cd10c10ac --- /dev/null +++ b/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 = (): { + isPopup: boolean | null; + params: RouteParams[RouteName] | null; + isLoading: boolean; +} => { + const { params } = useAppNavigate(); + 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; diff --git a/packages/adena-extension/src/hooks/use-window-size.ts b/packages/adena-extension/src/hooks/use-window-size.ts new file mode 100644 index 000000000..f3e4cdcaf --- /dev/null +++ b/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 }; +}; diff --git a/packages/adena-extension/src/pages/popup/certify/login/index.tsx b/packages/adena-extension/src/pages/popup/certify/login/index.tsx index 5f2d6d794..90ebb52d2 100644 --- a/packages/adena-extension/src/pages/popup/certify/login/index.tsx +++ b/packages/adena-extension/src/pages/popup/certify/login/index.tsx @@ -128,6 +128,6 @@ export const Login = (): JSX.Element => { ) : ( -
+ ); }; diff --git a/packages/adena-extension/src/pages/popup/certify/reset-wallet/index.tsx b/packages/adena-extension/src/pages/popup/certify/reset-wallet/index.tsx index c6c965764..bd7650853 100644 --- a/packages/adena-extension/src/pages/popup/certify/reset-wallet/index.tsx +++ b/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(); diff --git a/packages/adena-extension/src/pages/popup/certify/security-privacy/index.tsx b/packages/adena-extension/src/pages/popup/certify/security-privacy/index.tsx index 272603a48..8163152c9 100644 --- a/packages/adena-extension/src/pages/popup/certify/security-privacy/index.tsx +++ b/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 ( diff --git a/packages/adena-extension/src/pages/popup/wallet/broadcast-transaction-screen/upload.tsx b/packages/adena-extension/src/pages/popup/wallet/broadcast-transaction-screen/upload.tsx index c90df819b..8ea9ab24f 100644 --- a/packages/adena-extension/src/pages/popup/wallet/broadcast-transaction-screen/upload.tsx +++ b/packages/adena-extension/src/pages/popup/wallet/broadcast-transaction-screen/upload.tsx @@ -13,7 +13,7 @@ import BroadcastTransactionUploadResult from '@components/pages/broadcast-transa import IconHelp from '@assets/help.svg'; const StyledWrapper = styled(View)` - width: 360px; + width: 100%; gap: 24px; padding: 24px 20px 120px; `; @@ -86,7 +86,7 @@ const BroadcastTransactionUpload: React.FC = ({ return () => { window.removeEventListener('drop', blockEvent); window.removeEventListener('dragover', blockEvent); - } + }; }, []); return ( @@ -137,8 +137,8 @@ const BroadcastTransactionUpload: React.FC = ({ onClick: onClickBroadcast, }} /> - + ); }; -export default BroadcastTransactionUpload; \ No newline at end of file +export default BroadcastTransactionUpload; diff --git a/packages/adena-extension/src/pages/popup/wallet/deposit/index.tsx b/packages/adena-extension/src/pages/popup/wallet/deposit/index.tsx index 0d31b1ffe..93fc87c22 100644 --- a/packages/adena-extension/src/pages/popup/wallet/deposit/index.tsx +++ b/packages/adena-extension/src/pages/popup/wallet/deposit/index.tsx @@ -10,6 +10,7 @@ import { formatAddress, formatNickname } from '@common/utils/client-utils'; import { useAccountName } from '@hooks/use-account-name'; import mixins from '@styles/mixins'; import useAppNavigate from '@hooks/use-app-navigate'; +import useSessionParams from '@hooks/use-session-state'; const Wrapper = styled.main` ${mixins.flex({ justify: 'stretch' })}; @@ -40,12 +41,11 @@ const CopyInputBox = styled.div` export const Deposit = (): JSX.Element => { const theme = useTheme(); - const { navigate, params, goBack } = useAppNavigate(); + const { navigate, goBack } = useAppNavigate(); + const { params } = useSessionParams(); const [displayAddr, setDisplayAddr] = useState(''); const { currentAddress, currentAccount } = useCurrentAccount(); const { accountNames } = useAccountName(); - const type = params.type; - const tokenMetainfo = params.tokenMetainfo; useEffect(() => { if (currentAddress) { @@ -54,16 +54,16 @@ export const Deposit = (): JSX.Element => { }, [currentAddress]); const closeButtonClick = useCallback(() => { - if (type === 'wallet') { + if (params?.type === 'wallet') { navigate(RoutePath.Wallet); return; } goBack(); - }, [type]); + }, [params?.type]); return ( - {`Deposit ${tokenMetainfo?.symbol || ''}`} + {`Deposit ${params?.tokenMetainfo?.symbol || ''}`} diff --git a/packages/adena-extension/src/pages/popup/wallet/history/index.tsx b/packages/adena-extension/src/pages/popup/wallet/history/index.tsx index d1552a451..f087ab452 100644 --- a/packages/adena-extension/src/pages/popup/wallet/history/index.tsx +++ b/packages/adena-extension/src/pages/popup/wallet/history/index.tsx @@ -19,7 +19,7 @@ import useAppNavigate from '@hooks/use-app-navigate'; const StyledHistoryLayout = styled.div` ${mixins.flex({ align: 'normal', justify: 'normal' })}; width: 100%; - height: auto; + height: 100%; padding: 24px 20px; margin-bottom: 60px; `; diff --git a/packages/adena-extension/src/pages/popup/wallet/manage-token/index.tsx b/packages/adena-extension/src/pages/popup/wallet/manage-token/index.tsx index 205e11123..621298915 100644 --- a/packages/adena-extension/src/pages/popup/wallet/manage-token/index.tsx +++ b/packages/adena-extension/src/pages/popup/wallet/manage-token/index.tsx @@ -26,6 +26,7 @@ const ManageTokenSearchContainer: React.FC = () => { }, [tokenMetainfos, currentAccount]); useEffect(() => { + console.log(loaded, isClose); if (loaded && isClose) { goBack(); } diff --git a/packages/adena-extension/src/pages/popup/wallet/search/index.tsx b/packages/adena-extension/src/pages/popup/wallet/search/index.tsx index 562626d44..71b074c48 100644 --- a/packages/adena-extension/src/pages/popup/wallet/search/index.tsx +++ b/packages/adena-extension/src/pages/popup/wallet/search/index.tsx @@ -17,6 +17,7 @@ import { TokenBalanceType } from '@types'; import mixins from '@styles/mixins'; import { getTheme } from '@styles/theme'; import useAppNavigate from '@hooks/use-app-navigate'; +import useSessionState from '@hooks/use-session-state'; const Wrapper = styled.main` width: 100%; @@ -73,7 +74,8 @@ const ButtonWrap = styled.div` `; export const WalletSearch = (): JSX.Element => { - const { navigate, params } = useAppNavigate(); + const { navigate } = useAppNavigate(); + const { params } = useSessionState(); const { displayTokenBalances } = useTokenBalance(); const { clearHistoryData } = useHistoryData(); @@ -89,7 +91,7 @@ export const WalletSearch = (): JSX.Element => { }; const onClickItem = (tokenBalance: TokenBalanceType): void => { - params.type === 'send' ? moveTransferInput(tokenBalance) : moveDeposit(tokenBalance); + params?.type === 'send' ? moveTransferInput(tokenBalance) : moveDeposit(tokenBalance); }; const moveTransferInput = (tokenBalance: TokenBalanceType): void => { diff --git a/packages/adena-extension/src/pages/popup/wallet/token-details/index.tsx b/packages/adena-extension/src/pages/popup/wallet/token-details/index.tsx index ee48ede79..86b66572f 100644 --- a/packages/adena-extension/src/pages/popup/wallet/token-details/index.tsx +++ b/packages/adena-extension/src/pages/popup/wallet/token-details/index.tsx @@ -26,6 +26,7 @@ import LoadingTokenDetails from './loading-token-details'; import mixins from '@styles/mixins'; import useAppNavigate from '@hooks/use-app-navigate'; import useLink from '@hooks/use-link'; +import useSessionParams from '@hooks/use-session-state'; const Wrapper = styled.main` ${mixins.flex({ align: 'flex-start', justify: 'flex-start' })}; @@ -109,12 +110,12 @@ type TokenHistoriesType = { export const TokenDetails = (): JSX.Element => { const theme = useTheme(); const { openLink } = useLink(); - const { navigate, params } = useAppNavigate(); + const { navigate } = useAppNavigate(); + const { params } = useSessionParams(); const [etcClicked, setEtcClicked] = useState(false); const { currentAccount, currentAddress } = useCurrentAccount(); useNetwork(); - const tokenBalance = params.tokenBalance; - const [balance] = useState(tokenBalance?.amount.value); + const tokenBalance = params?.tokenBalance; const { convertDenom, getTokenImageByDenom } = useTokenMetainfo(); const { updateBalanceAmountByAccount } = useTokenBalance(); const { transactionHistoryService } = useAdenaContext(); @@ -126,7 +127,7 @@ export const TokenDetails = (): JSX.Element => { [ 'history/grc20-token-history', currentAddress, - isGRC20TokenModel(tokenBalance) ? tokenBalance.pkgPath : '', + tokenBalance && isGRC20TokenModel(tokenBalance) ? tokenBalance.pkgPath : '', ], ({ pageParam = 0 }) => fetchTokenHistories(pageParam), { @@ -187,18 +188,19 @@ export const TokenDetails = (): JSX.Element => { }; } const size = 20; - const histories = isGRC20TokenModel(tokenBalance) - ? await transactionHistoryService.fetchGRC20TransactionHistory( - currentAddress, - tokenBalance.pkgPath, - pageParam, - size, - ) - : await transactionHistoryService.fetchNativeTransactionHistory( - currentAddress, - pageParam, - size, - ); + const histories = + tokenBalance && isGRC20TokenModel(tokenBalance) + ? await transactionHistoryService.fetchGRC20TransactionHistory( + currentAddress, + tokenBalance.pkgPath, + pageParam, + size, + ) + : await transactionHistoryService.fetchNativeTransactionHistory( + currentAddress, + pageParam, + size, + ); const txs = histories.txs.map((transaction) => { const { value, denom } = convertDenom( transaction.amount.value, @@ -239,11 +241,15 @@ export const TokenDetails = (): JSX.Element => { ); const handlePrevButtonClick = (): void => navigate(RoutePath.Wallet); - const DepositButtonClick = (): void => + const DepositButtonClick = (): void => { + if (!tokenBalance) { + return; + } navigate(RoutePath.Deposit, { state: { type: 'token', tokenMetainfo: tokenBalance } }); + }; const SendButtonClick = (): void => { - if (!currentAccount) { + if (!currentAccount || !tokenBalance) { return; } clearHistoryData(RoutePath.TransferInput); @@ -264,7 +270,7 @@ export const TokenDetails = (): JSX.Element => { }; const getTokenUri = (): string => { - if (isGRC20TokenModel(tokenBalance)) { + if (tokenBalance && isGRC20TokenModel(tokenBalance)) { return `https://gnoscan.io/tokens/${tokenBalance.pkgPath}`; } return ''; @@ -275,7 +281,7 @@ export const TokenDetails = (): JSX.Element => { tooltipText: 'View on Gnoscan', onClick: () => openLink(getAccountDetailUri()), }; - if (!isGRC20TokenModel(tokenBalance)) { + if (tokenBalance && !isGRC20TokenModel(tokenBalance)) { return [accountDetailItem]; } const realmDetailItem = { @@ -289,7 +295,7 @@ export const TokenDetails = (): JSX.Element => { - {tokenBalance.name} + {tokenBalance?.name} View on Gnoscan @@ -298,7 +304,7 @@ export const TokenDetails = (): JSX.Element => {
{ - const { navigate, params, goBack } = useAppNavigate(); - const [isTokenSearch, setIsTokenSearch] = useState(params.isTokenSearch === true); - const [tokenMetainfo, setTokenMetainfo] = useState(params.tokenBalance); + const { navigate, goBack } = useAppNavigate(); + const { + isPopup, + params, + isLoading: isLoadingSessionState, + } = useSessionParams(); + const [isTokenSearch, setIsTokenSearch] = useState(params?.isTokenSearch === true); + const [tokenMetainfo, setTokenMetainfo] = useState(params?.tokenBalance); const addressBookInput = useAddressBookInput(); const balanceInput = useBalanceInput(tokenMetainfo); const { currentAccount } = useCurrentAccount(); const { getHistoryData, setHistoryData } = useHistoryData(); + const { currentNetwork } = useNetwork(); useEffect(() => { - setIsTokenSearch(params.isTokenSearch === true); - setTokenMetainfo(params.tokenBalance); - addressBookInput.updateAddressBook(); - balanceInput.updateCurrentBalance(); - }, [params, currentAccount]); + if (isLoadingSessionState) { + return; + } + if (isPopup && params) { + setIsTokenSearch(params.isTokenSearch === true); + setTokenMetainfo(params.tokenBalance); + } + }, [isPopup, params, isLoadingSessionState]); + + useEffect(() => { + if (currentAccount && tokenMetainfo) { + addressBookInput.updateAddressBook(); + balanceInput.updateCurrentBalance(); + } + }, [currentAccount, tokenMetainfo, currentNetwork.chainId]); useEffect(() => { const historyData = getHistoryData(); @@ -70,6 +88,9 @@ const TransferInputContainer: React.FC = () => { }, [getHistoryData()]); const saveHistoryData = (): void => { + if (!tokenMetainfo) { + return; + } setHistoryData({ isTokenSearch, tokenMetainfo, @@ -104,6 +125,9 @@ const TransferInputContainer: React.FC = () => { if (!isNext()) { return; } + if (!tokenMetainfo) { + return; + } const validAddress = addressBookInput.validateAddressBookInput() && (isNativeTokenModel(tokenMetainfo) || (await addressBookInput.validateEqualAddress())); @@ -125,20 +149,22 @@ const TransferInputContainer: React.FC = () => { } }, [addressBookInput, balanceInput, isNext()]); + if (isLoadingSessionState) { + return <>; + } + return ( -
- -
+ ); }; diff --git a/packages/adena-extension/src/pages/popup/wallet/transfer-ledger-loading/index.tsx b/packages/adena-extension/src/pages/popup/wallet/transfer-ledger-loading/index.tsx index 564730c29..4b5aec29f 100644 --- a/packages/adena-extension/src/pages/popup/wallet/transfer-ledger-loading/index.tsx +++ b/packages/adena-extension/src/pages/popup/wallet/transfer-ledger-loading/index.tsx @@ -12,7 +12,7 @@ import useAppNavigate from '@hooks/use-app-navigate'; const TransferLedgerLoadingLayout = styled.div` ${mixins.flex({ align: 'normal', justify: 'normal' })}; width: 100%; - height: auto; + height: 100%; padding: 24px 20px 120px 20px; `; diff --git a/packages/adena-extension/src/pages/popup/wallet/transfer-ledger-reject/index.tsx b/packages/adena-extension/src/pages/popup/wallet/transfer-ledger-reject/index.tsx index 99868b6da..63512dfe8 100644 --- a/packages/adena-extension/src/pages/popup/wallet/transfer-ledger-reject/index.tsx +++ b/packages/adena-extension/src/pages/popup/wallet/transfer-ledger-reject/index.tsx @@ -9,7 +9,7 @@ import useAppNavigate from '@hooks/use-app-navigate'; const TransferLedgerRejectLayout = styled.div` ${mixins.flex({ align: 'normal', justify: 'normal' })}; width: 100%; - height: auto; + height: 100%; padding: 24px 20px; margin-bottom: 60px; `; diff --git a/packages/adena-extension/src/pages/popup/wallet/transfer-summary/index.tsx b/packages/adena-extension/src/pages/popup/wallet/transfer-summary/index.tsx index 76f3ddd5e..23f532566 100644 --- a/packages/adena-extension/src/pages/popup/wallet/transfer-summary/index.tsx +++ b/packages/adena-extension/src/pages/popup/wallet/transfer-summary/index.tsx @@ -20,7 +20,7 @@ import useAppNavigate from '@hooks/use-app-navigate'; const TransferSummaryLayout = styled.div` ${mixins.flex({ align: 'normal', justify: 'normal' })}; width: 100%; - height: auto; + height: 100%; padding: 24px 20px; `; @@ -48,8 +48,9 @@ const TransferSummaryContainer: React.FC = () => { if (!isNativeTokenModel(tokenMetainfo)) { return; } - const sendAmount = `${BigNumber(transferAmount.value).shiftedBy(tokenMetainfo.decimals)}${tokenMetainfo.denom - }`; + const sendAmount = `${BigNumber(transferAmount.value).shiftedBy(tokenMetainfo.decimals)}${ + tokenMetainfo.denom + }`; return TransactionMessage.createMessageOfBankSend({ fromAddress: currentAddress || '', toAddress, @@ -99,7 +100,7 @@ const TransferSummaryContainer: React.FC = () => { const walletInstance = wallet.clone(); walletInstance.currentAccountId = currentAccount.id; const { signed } = await transactionService.createTransaction(walletInstance, document); - return transactionService.sendTransaction(walletInstance, currentAccount, signed).catch(e => { + return transactionService.sendTransaction(walletInstance, currentAccount, signed).catch((e) => { console.error(e); return null; }); @@ -166,19 +167,17 @@ const TransferSummaryContainer: React.FC = () => { return ( -
- -
+ ); }; diff --git a/packages/adena-extension/src/pages/popup/wallet/wallet-main/index.tsx b/packages/adena-extension/src/pages/popup/wallet/wallet-main/index.tsx index 41490d0be..a528956ed 100644 --- a/packages/adena-extension/src/pages/popup/wallet/wallet-main/index.tsx +++ b/packages/adena-extension/src/pages/popup/wallet/wallet-main/index.tsx @@ -106,12 +106,12 @@ export const WalletMain = (): JSX.Element => { state: { tokenBalance }, }); }, - [tokens], + [navigate, tokens], ); const onClickManageButton = useCallback(() => { navigate(RoutePath.ManageToken); - }, []); + }, [navigate]); return ( diff --git a/packages/adena-extension/src/router/popup/header/index.tsx b/packages/adena-extension/src/router/popup/header/index.tsx index f1d6efd52..7a8d1b232 100644 --- a/packages/adena-extension/src/router/popup/header/index.tsx +++ b/packages/adena-extension/src/router/popup/header/index.tsx @@ -17,6 +17,8 @@ import { TabMenu } from './tab-menu'; import { CloseTitleMenu } from './close-title-menu'; const Wrapper = styled.header` + display: flex; + flex-shrink: 0; width: 100%; height: 48px; background-color: ${getTheme('neutral', '_8')}; @@ -52,7 +54,6 @@ export const Header = (): JSX.Element => { const approveHardwareWalletConnect = useMatch(RoutePath.WebConnectLedger); const approveHardwareWalletSelectAccount = useMatch(RoutePath.WebConnectLedgerSelectAccount); - const [walletState] = useRecoilState(WalletState.state); const [failedNetwork] = useRecoilState(CommonState.failedNetwork); const { currentNetwork } = useNetwork(); diff --git a/packages/adena-extension/src/router/popup/header/top-menu/index.tsx b/packages/adena-extension/src/router/popup/header/top-menu/index.tsx index 35fcf930f..bef08eab9 100644 --- a/packages/adena-extension/src/router/popup/header/top-menu/index.tsx +++ b/packages/adena-extension/src/router/popup/header/top-menu/index.tsx @@ -2,7 +2,8 @@ import React, { useEffect, useState } from 'react'; import { useLocation } from 'react-router-dom'; import styled, { useTheme } from 'styled-components'; -import { Text, CopyTooltip, StatusDot, HamburgerMenuBtn } from '@components/atoms'; +// eslint-disable-next-line @typescript-eslint/no-unused-vars +import { Text, CopyTooltip, StatusDot, HamburgerMenuBtn, ExpandBtn } from '@components/atoms'; import { getTheme } from '@styles/theme'; import { useCurrentAccount } from '@hooks/use-current-account'; @@ -12,6 +13,8 @@ import { useAccountName } from '@hooks/use-account-name'; import { useNetwork } from '@hooks/use-network'; import { SideMenuLayout } from '@components/pages/router/side-menu-layout'; import mixins from '@styles/mixins'; +import { createPopupWindow } from '@common/utils/browser-utils'; +import useSessionParams from '@hooks/use-session-state'; const Wrapper = styled.div` width: 100%; @@ -32,6 +35,7 @@ const Header = styled.div` export const TopMenu = ({ disabled }: { disabled?: boolean }): JSX.Element => { const theme = useTheme(); + const { isPopup } = useSessionParams(); const { establishService } = useAdenaContext(); const [open, setOpen] = useState(false); const [hostname, setHostname] = useState(''); @@ -39,6 +43,7 @@ export const TopMenu = ({ disabled }: { disabled?: boolean }): JSX.Element => { const [, setUrl] = useState(''); const { currentAccount, currentAddress } = useCurrentAccount(); const toggleMenuHandler = (): void => setOpen(!open); + // eslint-disable-next-line @typescript-eslint/no-unused-vars const [isEstablish, setIsEstablish] = useState(false); const location = useLocation(); const [currentAccountName, setCurrentAccountName] = useState(''); @@ -88,6 +93,7 @@ export const TopMenu = ({ disabled }: { disabled?: boolean }): JSX.Element => { } }; + // eslint-disable-next-line @typescript-eslint/no-unused-vars const tooltipTextMaker = (hostname: string, isEstablish: boolean): string => { let currentHostname = hostname; if (!hostname.includes('.')) { @@ -109,6 +115,10 @@ export const TopMenu = ({ disabled }: { disabled?: boolean }): JSX.Element => { }); }; + const popupWindow = (): void => { + createPopupWindow(location.pathname, location.state); + }; + return !disabled ? (
@@ -121,7 +131,8 @@ export const TopMenu = ({ disabled }: { disabled?: boolean }): JSX.Element => { - + {isPopup ?
: } + {/* */}
diff --git a/packages/adena-extension/src/states/common.ts b/packages/adena-extension/src/states/common.ts index 49b8d0f08..f1e393818 100644 --- a/packages/adena-extension/src/states/common.ts +++ b/packages/adena-extension/src/states/common.ts @@ -1,3 +1,4 @@ +import { WindowSizeType } from '@types'; import { atom } from 'recoil'; interface HistoryPosition { @@ -37,3 +38,8 @@ export const webHeaderIndicatorLength = atom({ key: 'common/webHeaderIndicatorLength', default: 0, }); + +export const windowSizeType = atom({ + key: 'common/windowSizeType', + default: 'DEFAULT', +}); diff --git a/packages/adena-extension/src/styles/global-style.ts b/packages/adena-extension/src/styles/global-style.ts index 0e9961d98..34fe56b75 100644 --- a/packages/adena-extension/src/styles/global-style.ts +++ b/packages/adena-extension/src/styles/global-style.ts @@ -26,6 +26,8 @@ export const GlobalWebStyle = createGlobalStyle` export const GlobalPopupStyle = createGlobalStyle` html, body { + width: 100%; + height: 100%; min-width: 360px; min-height: 540px; width: 100%; @@ -42,15 +44,17 @@ export const GlobalPopupStyle = createGlobalStyle` #popup { ${mixins.flex({ align: 'normal', justify: 'normal' })}; - width: 100%; position: relative; - + width: 100%; + height: 100%; }; main { position: relative; width: 100%; - max-width: 360px; + height: 100%; + min-width: 360px; + min-height: 540px; min-height: 492px; height: 100%; padding: 0px 20px 24px; diff --git a/packages/adena-extension/src/types/states.ts b/packages/adena-extension/src/types/states.ts index bf536ff56..bd6a02bf2 100644 --- a/packages/adena-extension/src/types/states.ts +++ b/packages/adena-extension/src/types/states.ts @@ -58,3 +58,5 @@ export interface GoogleState { } export type CreateAccountState = SeedState | LedgerState | GoogleState; + +export type WindowSizeType = 'EXPAND' | 'DEFAULT';