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 (
-
+