feat: add warning to btc onboarding re:inscriptions (#1922)

Author: vetalcore

apps/browser-extension-wallet/src/views/bitcoin-mode/features/multi-wallet/Home.tsx

@@ -58,7 +58,8 @@ export const Home = (): JSX.Element => {
           )
         }}
       />
-    )
+    ),
+    infoMessage: translate('core.walletSetupOptionsStep.infoMessage')
   };
 
   return (
@@ -77,6 +78,7 @@ export const Home = (): JSX.Element => {
       }}
       translations={walletSetupOptionsStepTranslations}
       withHardwareWallet={false}
+      withInfoMessage
     />
   );
 };

apps/browser-extension-wallet/src/views/bitcoin-mode/features/multi-wallet/MultiWallet.module.scss

@@ -25,6 +25,16 @@ $container-width: 840px;
   :global(.ant-modal-close-x) {
     display: none;
   }
+
+  &.flex {
+    :global(.ant-modal-content) {
+      min-height: fit-content;
+    }
+
+    :global(.ant-modal-body) {
+      height: auto;
+    }
+  }
 }
 
 .container {

apps/browser-extension-wallet/src/views/bitcoin-mode/features/multi-wallet/MultiWallet.tsx

@@ -1,11 +1,12 @@
 /* eslint-disable unicorn/no-null */
 import { NavigationButton } from '@lace/common';
+import cn from 'classnames';
 import { WalletSetupConfirmationDialogProvider, WalletSetupFlow, WalletSetupFlowProvider } from '@lace/core';
 import { useBackgroundPage } from '@providers/BackgroundPageProvider';
 import { walletRoutePaths } from '@routes';
 import { Modal } from 'antd';
 import React, { useCallback } from 'react';
-import { useHistory } from 'react-router-dom';
+import { useHistory, useLocation } from 'react-router-dom';
 import styles from './MultiWallet.module.scss';
 import { WalletOnboardingFlows } from './WalletOnboardingFlows';
 import { postHogMultiWalletActions } from '@providers/AnalyticsProvider/analyticsTracker';
@@ -14,6 +15,7 @@ import { usePostHogClientContext } from '@providers/PostHogClientProvider';
 
 export const MultiWallet = (): JSX.Element => {
   const history = useHistory();
+  const location = useLocation();
   const posthogClient = usePostHogClientContext();
   const { page, setBackgroundPage } = useBackgroundPage();
 
@@ -28,6 +30,8 @@ export const MultiWallet = (): JSX.Element => {
     [history, page, setBackgroundPage]
   );
 
+  const isBitcoinModeRootPath = location.pathname === walletRoutePaths.newBitcoinWallet.root;
+
   return (
     <WalletSetupFlowProvider flow={WalletSetupFlow.ADD_WALLET}>
       <WalletSetupConfirmationDialogProvider>
@@ -38,7 +42,7 @@ export const MultiWallet = (): JSX.Element => {
             footer={null}
             open={!isDialogOpen}
             width="100%"
-            className={styles.modal}
+            className={cn(styles.modal, { [styles.flex]: isBitcoinModeRootPath })}
             onCancel={() => handleOnCancel(withConfirmationDialog)}
           >
             <div className={styles.closeButton}>

packages/core/src/ui/components/WalletSetup/WalletSetupOptionsStep.tsx

@@ -7,6 +7,7 @@ import { ReactComponent as HardwareWalletDisabledIcon } from '../../assets/icons
 import { ReactComponent as RestoreWalletIcon } from '../../assets/icons/onboarding/restore-wallet.component.svg';
 import { WalletSetupOption } from './WalletSetupOption';
 import { TranslationsFor } from '@ui/utils/types';
+import { Box, InfoBar, InfoComponent } from '@input-output-hk/lace-ui-toolkit';
 
 type SetupOptionTranslations = TranslationsFor<'title' | 'description' | 'button'>;
 
@@ -21,7 +22,9 @@ export interface WalletSetupOptionsStepProps {
     hardwareWallet: SetupOptionTranslations & TranslationsFor<'tooltip'>;
     restoreWallet: SetupOptionTranslations;
     agreementText: ReactNode;
+    infoMessage?: string;
   };
+  withInfoMessage?: boolean;
   withAgreement?: boolean;
   withHardwareWallet?: boolean;
 }
@@ -34,7 +37,8 @@ export const WalletSetupOptionsStep = ({
   onRestoreWalletRequest,
   translations,
   withAgreement,
-  withHardwareWallet
+  withHardwareWallet,
+  withInfoMessage
 }: WalletSetupOptionsStepProps): React.ReactElement => (
   <div className={styles.walletSetupOptionsStep} data-testid="wallet-setup-options-container">
     <div className={styles.content} data-testid="wallet-setup-options-content">
@@ -75,6 +79,11 @@ export const WalletSetupOptionsStep = ({
         />
       </div>
     </div>
+    {withInfoMessage && (
+      <Box mt="$32">
+        <InfoBar icon={<InfoComponent />} message={translations.infoMessage} />
+      </Box>
+    )}
     {withAgreement && (
       <div className={styles.legal} data-testid="agreement-text">
         {translations.agreementText}

packages/translation/src/lib/translations/core/en.json

@@ -617,6 +617,7 @@
   "core.walletSetupOptionsStep.restoreWallet.title": "Restore wallet",
   "core.walletSetupOptionsStep.subTitle": "Choose an option to get started",
   "core.walletSetupOptionsStep.agreementText": "By clicking the Create, Connect or Restore button above, you agree with Lace’s <a1>Terms of Service</a1> and <a2>Privacy Policy</a2>",
+  "core.walletSetupOptionsStep.infoMessage": "Do not import Bitcoin accounts that contain inscriptions (such as Ordinals or Runes) or receive inscriptions in an account created within Lace. Lace currently does not support inscriptions, and ignoring this advice may result in loss of assets.",
   "core.walletSetupOptionsStep.title": "Let's explore Web3 together",
   "core.walletSetupRecoveryPhraseLengthStep.description": "Choose your recovery phrase length of either 12, 15 or 24 words to restore your wallet.",
   "core.walletSetupRecoveryPhraseLengthStep.title": "Recovery phrase length",