diff --git a/packages/adena-extension/src/common/constants/resource.constant.ts b/packages/adena-extension/src/common/constants/resource.constant.ts index 2bd6a921..a93d9bf9 100644 --- a/packages/adena-extension/src/common/constants/resource.constant.ts +++ b/packages/adena-extension/src/common/constants/resource.constant.ts @@ -1,3 +1,4 @@ export const ADENA_TERMS_PAGE = 'https://adena.app/terms' as const; export const ADENA_DOCS_PAGE = 'https://docs.adena.app' as const; +export const HARDWARE_WALLET_LEARN_PAGE = 'https://docs.adena.app/user-guide/sign-in/connect-hardware-wallet' as const; export const GNO_CLI_HELP_PAGE = 'https://docs.onbloc.xyz/docs/cli' as const; diff --git a/packages/adena-extension/src/pages/web/select-hard-wallet-screen/index.tsx b/packages/adena-extension/src/pages/web/select-hard-wallet-screen/index.tsx index c1c246f6..1b8df5b8 100644 --- a/packages/adena-extension/src/pages/web/select-hard-wallet-screen/index.tsx +++ b/packages/adena-extension/src/pages/web/select-hard-wallet-screen/index.tsx @@ -1,19 +1,38 @@ -import { ReactElement } from 'react'; +import { ReactElement, useCallback } from 'react'; -import { Row, View, WebImg, WebMain } from '@components/atoms'; +import { Pressable, Row, View, WebImg, WebMain, WebText } from '@components/atoms'; import useAppNavigate from '@hooks/use-app-navigate'; import { RoutePath } from '@types'; import IconWallet from '@assets/web/hard-wallet-rounded.svg'; import IconLedger from '@assets/web/ledger-xs.svg'; import IconKeystone from '@assets/web/keystone-xs.svg'; +import IconLink from '@assets/web/link.svg'; import WebMainButton from '@components/atoms/web-main-button'; import { WebTitleWithDescription } from '@components/molecules'; import { WebMainHeader } from '@components/pages/web/main-header'; +import useLink from '@hooks/use-link'; +import { HARDWARE_WALLET_LEARN_PAGE } from '@common/constants/resource.constant'; +import styled, { useTheme } from 'styled-components'; + +const StyledLinkWrapper = styled(Row)` + gap: 6px; + align-items: flex-start; + + & > * { + color: #6c717a; + } +`; const SelectHardWalletScreen = (): ReactElement => { + const theme = useTheme(); const { navigate } = useAppNavigate(); + const { openLink } = useLink(); + + const moveLearnMore = useCallback(() => { + openLink(HARDWARE_WALLET_LEARN_PAGE); + }, [openLink]); return ( @@ -28,6 +47,7 @@ const SelectHardWalletScreen = (): ReactElement => { @@ -51,6 +71,14 @@ const SelectHardWalletScreen = (): ReactElement => { }} /> + + + + Learn More + + + + ); }; diff --git a/packages/adena-extension/src/pages/web/wallet-create-screen/get-mnemonic-step.tsx b/packages/adena-extension/src/pages/web/wallet-create-screen/get-mnemonic-step.tsx index 26f5e6f8..59b9c7df 100644 --- a/packages/adena-extension/src/pages/web/wallet-create-screen/get-mnemonic-step.tsx +++ b/packages/adena-extension/src/pages/web/wallet-create-screen/get-mnemonic-step.tsx @@ -58,7 +58,7 @@ const GetMnemonicStep = ({ {ableToReveal ? ( <> - + diff --git a/packages/adena-extension/src/pages/web/wallet-export-screen/index.tsx b/packages/adena-extension/src/pages/web/wallet-export-screen/index.tsx index 6fe3d70a..ffd6c2a6 100644 --- a/packages/adena-extension/src/pages/web/wallet-export-screen/index.tsx +++ b/packages/adena-extension/src/pages/web/wallet-export-screen/index.tsx @@ -23,11 +23,8 @@ const WalletExportScreen: React.FC = () => { } = useWalletExportScreen(); const spacing = useMemo(() => { - if (exportData && exportData.split(' ').length > 12) { - return null; - } - return 272 - }, [exportData]) + return null; + }, []) const description = useMemo(() => { if (exportType === 'PRIVATE_KEY') { diff --git a/packages/adena-extension/src/pages/web/wallet-import-screen/index.tsx b/packages/adena-extension/src/pages/web/wallet-import-screen/index.tsx index d0afbf0b..fdbd7a0c 100644 --- a/packages/adena-extension/src/pages/web/wallet-import-screen/index.tsx +++ b/packages/adena-extension/src/pages/web/wallet-import-screen/index.tsx @@ -11,7 +11,7 @@ import WebLoadingAccounts from '@components/pages/web/loading-accounts'; const WalletImportScreen = (): ReactElement => { const useWalletImportScreenReturn = useWalletImportScreen(); - const { extended, step, onClickGoBack, indicatorInfo, onClickNext } = useWalletImportScreenReturn; + const { step, onClickGoBack, indicatorInfo, onClickNext } = useWalletImportScreenReturn; if (step === 'LOADING') { return ( @@ -22,7 +22,7 @@ const WalletImportScreen = (): ReactElement => { } return ( - +