Merge branch 'dev' into fix/nested-button-tooltip-error

.eslintrc.js

@@ -30,6 +30,7 @@ module.exports = {
     // methods, such as implicit use of signed transactions
     'deprecation/deprecation': 'warn',
     'no-console': ['error'],
+    'no-duplicate-imports': ['error'],
     'prefer-const': [
       'error',
       {

src/app/common/account-restoration/legacy-gaia-config-lookup.ts

@@ -1,5 +1,9 @@
-import { fetchWalletConfig, generateWallet } from '@stacks/wallet-sdk';
-import { connectToGaiaHubWithConfig, getHubInfo } from '@stacks/wallet-sdk';
+import {
+  connectToGaiaHubWithConfig,
+  fetchWalletConfig,
+  generateWallet,
+  getHubInfo,
+} from '@stacks/wallet-sdk';
 
 import { gaiaUrl as gaiaHubUrl } from '@shared/constants';
 

src/app/common/hooks/use-bitcoin-contracts.ts

@@ -11,8 +11,7 @@ import {
 import { Money, createMoneyFromDecimal } from '@shared/models/money.model';
 import { RouteUrls } from '@shared/route-urls';
 import { BitcoinContractResponseStatus } from '@shared/rpc/methods/accept-bitcoin-contract';
-import { makeRpcSuccessResponse } from '@shared/rpc/rpc-methods';
-import { makeRpcErrorResponse } from '@shared/rpc/rpc-methods';
+import { makeRpcErrorResponse, makeRpcSuccessResponse } from '@shared/rpc/rpc-methods';
 
 import { sendAcceptedBitcoinContractOfferToProtocolWallet } from '@app/query/bitcoin/contract/send-accepted-bitcoin-contract-offer';
 import {

src/app/common/hooks/use-event-listener.ts

@@ -43,32 +43,32 @@ const isBrowser = checkIsBrowser();
  *
  * @param event the event name
  * @param handler the event handler function to execute
- * @param doc the dom environment to execute against (defaults to `document`)
+ * @param element the dom environment to execute against (defaults to `document`)
  * @param options the event listener options
  */
 export function useEventListener(
   event: keyof WindowEventMap,
   handler: (event: any) => void,
-  doc: Document | null = isBrowser ? document : null,
+  element: Document | null = isBrowser ? document : null,
   options?: AddEventListener[2]
 ) {
   const savedHandler = useLatestRef(handler);
 
   useEffect(() => {
-    if (!doc) return;
+    if (!element) return;
 
     const listener = (event: any) => {
       savedHandler.current(event);
     };
 
-    doc.addEventListener(event, listener, options);
+    element.addEventListener(event, listener, options);
 
     return () => {
-      doc.removeEventListener(event, listener, options);
+      element.removeEventListener(event, listener, options);
     };
-  }, [event, doc, options, savedHandler]);
+  }, [event, element, options, savedHandler]);
 
   return () => {
-    doc?.removeEventListener(event, savedHandler.current, options);
+    element?.removeEventListener(event, savedHandler.current, options);
   };
 }

src/app/common/transactions/bitcoin/utils.ts

@@ -2,8 +2,10 @@ import BigNumber from 'bignumber.js';
 import { getAddressInfo, validate } from 'bitcoin-address-validation';
 
 import { BTC_P2WPKH_DUST_AMOUNT } from '@shared/constants';
-import { BitcoinTransactionVectorOutput } from '@shared/models/transactions/bitcoin-transaction.model';
-import { BitcoinTx } from '@shared/models/transactions/bitcoin-transaction.model';
+import {
+  BitcoinTransactionVectorOutput,
+  BitcoinTx,
+} from '@shared/models/transactions/bitcoin-transaction.model';
 
 import { sumNumbers } from '@app/common/math/helpers';
 import { satToBtc } from '@app/common/money/unit-conversion';

src/app/common/utils.spec.ts

@@ -1,5 +1,4 @@
-import { getTicker } from '@app/common/utils';
-import { extractPhraseFromString } from '@app/common/utils';
+import { extractPhraseFromString, getTicker } from '@app/common/utils';
 
 import { countDecimals } from './math/helpers';
 

src/app/common/utils.ts

@@ -8,6 +8,7 @@ import {
 import { toUnicode } from 'punycode';
 
 import { BitcoinChainConfig, BitcoinNetworkModes, KEBAB_REGEX } from '@shared/constants';
+import { isBoolean } from '@shared/utils';
 
 export function createNullArrayOfLength(length: number) {
   return new Array(length).fill(null);
@@ -314,3 +315,7 @@ export function removeTrailingNullCharacters(s: string) {
 export function removeMinusSign(value: string) {
   return value.replace('-', '');
 }
+
+export function propIfDefined(prop: string, value: any) {
+  return isBoolean(value) ? { [prop]: value } : {};
+}

src/app/components/app-version.tsx

@@ -1,5 +1,4 @@
-import { useMemo } from 'react';
-import { forwardRef } from 'react';
+import { forwardRef, useMemo } from 'react';
 
 import { HTMLStyledProps, styled } from 'leather-styles/jsx';
 

src/app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item.layout.tsx

@@ -1,6 +1,5 @@
 import { CryptoAssetSelectors } from '@tests/selectors/crypto-asset.selectors';
-import { Flex } from 'leather-styles/jsx';
-import { styled } from 'leather-styles/jsx';
+import { Flex, styled } from 'leather-styles/jsx';
 
 import { CryptoCurrencies } from '@shared/models/currencies.model';
 import { Money } from '@shared/models/money.model';

src/app/components/fees-row/components/fees-row.layout.tsx

@@ -1,6 +1,5 @@
 import { useField } from 'formik';
-import { HstackProps, styled } from 'leather-styles/jsx';
-import { HStack } from 'leather-styles/jsx';
+import { HStack, HstackProps, styled } from 'leather-styles/jsx';
 
 import { openInNewTab } from '@app/common/utils/open-in-new-tab';
 import { SponsoredLabel } from '@app/components/sponsored-label';

src/app/components/secret-key/mnemonic-key/mnemonic-word-input.tsx

@@ -1,8 +1,10 @@
-import { wordlist } from '@scure/bip39/wordlists/english';
+import { useState } from 'react';
 
-import { extractPhraseFromString } from '@app/common/utils';
+import { useField } from 'formik';
 
-import { InputField } from './mnemonic-input-field';
+import { useIsFieldDirty } from '@app/common/form-utils';
+import { extractPhraseFromString } from '@app/common/utils';
+import { Input } from '@app/ui/components/input/input';
 
 interface MnemonicWordInputProps {
   fieldNumber: number;
@@ -16,28 +18,41 @@ export function MnemonicWordInput({
   onUpdateWord,
   onPasteEntireKey,
 }: MnemonicWordInputProps) {
+  const name = `${fieldNumber}`;
+  const [field, meta] = useField(name);
+  const [isFocused, setIsFocused] = useState(false);
+  const isDirty = useIsFieldDirty(name);
   return (
-    <InputField
-      name={`${fieldNumber}`}
-      autoCapitalize="off"
-      spellCheck={false}
-      dataTestId={`mnemonic-input-${fieldNumber}`}
-      onUpdateWord={onUpdateWord}
-      onPaste={e => {
-        const pasteValue = extractPhraseFromString(e.clipboardData.getData('text'));
-        if (pasteValue.includes(' ')) {
+    <Input.Root hasError={isDirty && !!meta.error} shrink>
+      <Input.Field
+        // Limitation of the animated label is that we cannot detect
+        // programatically updated inputs. Here we add an empty place holder to
+        // trigger the repositioning of the label
+        autoCapitalize="off"
+        autoComplete="off"
+        spellCheck={false}
+        data-testid={`mnemonic-input-${fieldNumber}`}
+        id={name}
+        type={isFocused ? 'text' : 'password'}
+        onFocus={() => setIsFocused(!isFocused)}
+        {...field}
+        value={value || field.value || ''}
+        // using onChangeCapture + onBlurCapture to keep Formik validation
+        onChangeCapture={(e: any) => {
           e.preventDefault();
-          //assume its a full key
-          onPasteEntireKey(pasteValue);
-        }
-      }}
-      onChange={(e: any) => {
-        e.preventDefault();
-        onUpdateWord(e.target.value);
-      }}
-      wordlist={wordlist}
-      value={value}
-      height="3rem"
-    />
+          onUpdateWord(e.target.value);
+        }}
+        onBlurCapture={() => setIsFocused(!isFocused)}
+        onPaste={e => {
+          const pasteValue = extractPhraseFromString(e.clipboardData.getData('text'));
+          if (pasteValue.includes(' ')) {
+            e.preventDefault();
+            //assume its a full key
+            onPasteEntireKey(pasteValue);
+          }
+        }}
+      />
+      <Input.Label>Word {fieldNumber}</Input.Label>
+    </Input.Root>
   );
 }