Merge pull request #4641 from leather-wallet/release/ui-refactor-fixes

Release/UI refactor fixes

.eslintrc.js

@@ -81,6 +81,7 @@ module.exports = {
     '@typescript-eslint/no-unnecessary-condition': 'off',
     '@typescript-eslint/consistent-type-definitions': ['error', 'interface'],
     '@typescript-eslint/array-type': ['error'],
+    '@typescript-eslint/method-signature-style': ['error', 'method'],
     'no-warning-comments': [0],
 
     'react-hooks/rules-of-hooks': 'error',

package.json

@@ -232,6 +232,7 @@
     "@actions/core": "1.10.1",
     "@btckit/types": "0.0.19",
     "@leather-wallet/prettier-config": "0.0.1",
+    "@leather-wallet/tokens": "0.0.2",
     "@ls-lint/ls-lint": "2.1.0",
     "@pandacss/dev": "0.18.3",
     "@playwright/test": "1.38.1",

src/app/common/authentication/use-legacy-auth-bitcoin-addresses.ts

@@ -30,6 +30,10 @@ export function useGetLegacyAuthBitcoinAddresses() {
         p2tr: bytesToHex(taprootAccount?.mainnet?.keychain.publicKey!),
         p2wpkh: bytesToHex(nativeSegwitAccount?.mainnet?.keychain.publicKey!),
       },
+      btcPublicKeyTestnet: {
+        p2tr: bytesToHex(taprootAccount?.testnet?.keychain.publicKey!),
+        p2wpkh: bytesToHex(nativeSegwitAccount?.testnet?.keychain.publicKey!),
+      },
     };
   };
 }

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

@@ -224,7 +224,7 @@ export function useBitcoinContracts() {
     const txMoney = createMoneyFromDecimal(bitcoinValue, 'BTC');
     const txFiatValue = i18nFormatCurrency(calculateFiatValue(txMoney)).toString();
     const txFiatValueSymbol = bitcoinMarketData.price.symbol;
-    const txLink = { blockchain: 'bitcoin', txId };
+    const txLink = { blockchain: 'bitcoin', txid: txId };
 
     return {
       txId,

src/app/common/hooks/use-bitcoin-explorer-link.ts

@@ -0,0 +1,25 @@
+import { useCallback } from 'react';
+
+import { makeBitcoinTxExplorerLink } from '@app/common/utils';
+import { useCurrentNetworkState } from '@app/store/networks/networks.hooks';
+
+import { openInNewTab } from '../utils/open-in-new-tab';
+
+interface HandleOpenBitcoinTxLinkArgs {
+  txid: string;
+}
+
+export function useBitcoinExplorerLink() {
+  const { chain } = useCurrentNetworkState();
+  const { bitcoin } = chain;
+  const handleOpenBitcoinTxLink = useCallback(
+    ({ txid }: HandleOpenBitcoinTxLinkArgs) => {
+      openInNewTab(makeBitcoinTxExplorerLink({ txid, bitcoin }));
+    },
+    [bitcoin]
+  );
+
+  return {
+    handleOpenBitcoinTxLink,
+  };
+}

src/app/common/hooks/use-copy-to-clipboard.ts

@@ -2,7 +2,7 @@ import { useEffect, useRef, useState } from 'react';
 
 interface UiClipboard {
   value: string;
-  onCopy: () => void;
+  onCopy(): void;
   hasCopied: boolean;
 }
 

src/app/common/hooks/use-stacks-explorer-link.ts

@@ -0,0 +1,25 @@
+import { useCallback } from 'react';
+
+import { makeStacksTxExplorerLink } from '@app/common/utils';
+import { useCurrentNetworkState } from '@app/store/networks/networks.hooks';
+
+import { openInNewTab } from '../utils/open-in-new-tab';
+
+export interface HandleOpenStacksTxLinkArgs {
+  suffix?: string;
+  txid: string;
+}
+export function useStacksExplorerLink() {
+  const { mode } = useCurrentNetworkState();
+
+  const handleOpenStacksTxLink = useCallback(
+    ({ suffix, txid }: HandleOpenStacksTxLinkArgs) => {
+      openInNewTab(makeStacksTxExplorerLink({ mode, suffix, txid }));
+    },
+    [mode]
+  );
+
+  return {
+    handleOpenStacksTxLink,
+  };
+}

src/app/common/psbt/use-psbt-request-params.ts

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 
-import { ensureArray, undefinedIfLengthZero } from '@shared/utils';
+import { ensureArray, isDefined, undefinedIfLengthZero } from '@shared/utils';
 
 import { useDefaultRequestParams } from '../hooks/use-default-request-search-params';
 import { initialSearchParams } from '../initial-search-params';
@@ -20,7 +20,7 @@ export function usePsbtRequestSearchParams() {
       origin,
       payload,
       requestToken,
-      signAtIndex: payload?.signAtIndex
+      signAtIndex: isDefined(payload?.signAtIndex)
         ? undefinedIfLengthZero(ensureArray(payload?.signAtIndex).map(h => Number(h)))
         : undefined,
       tabId: tabId ?? 1,

src/app/common/theme-provider.tsx

@@ -24,7 +24,7 @@ export const getThemeLabel = (theme: UserSelectedTheme) => {
 const ThemeContext = createContext<{
   theme: ComputedTheme;
   userSelectedTheme: UserSelectedTheme;
-  setUserSelectedTheme: (theme: UserSelectedTheme) => void;
+  setUserSelectedTheme(theme: UserSelectedTheme): void;
 }>({
   // These values are not used, but are set to satisfy the context's value type.
   theme: 'light',

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

@@ -9,23 +9,6 @@ import { truncateMiddle } from '@app/ui/utils/truncate-middle';
 
 import { BtcSizeFeeEstimator } from './fees/btc-size-fee-estimator';
 
-type BtcTxStatus = 'pending' | 'success';
-type BtcStatusColorMap = Record<BtcTxStatus, string>;
-
-const statusFromBitcoinTx = (tx: BitcoinTx): BtcTxStatus => {
-  if (tx.status.confirmed) return 'success';
-  return 'pending';
-};
-
-export const getColorFromBitcoinTx = (tx: BitcoinTx) => {
-  const colorMap: BtcStatusColorMap = {
-    pending: 'warning.label',
-    success: 'stacks',
-  };
-
-  return colorMap[statusFromBitcoinTx(tx)] ?? 'feedback-error';
-};
-
 export function containsTaprootInput(tx: BitcoinTx) {
   return tx.vin.some(input => input.prevout.scriptpubkey_type === 'v1_p2tr');
 }

src/app/common/utils.ts

@@ -7,8 +7,7 @@ import {
 } from '@stacks/transactions';
 import { toUnicode } from 'punycode';
 
-import { BitcoinNetworkModes, KEBAB_REGEX } from '@shared/constants';
-import type { Blockchains } from '@shared/models/blockchain.model';
+import { BitcoinChainConfig, BitcoinNetworkModes, KEBAB_REGEX } from '@shared/constants';
 
 export function createNullArrayOfLength(length: number) {
   return new Array(length).fill(null);
@@ -39,23 +38,37 @@ export function extractPhraseFromString(value: string) {
   }
 }
 
-interface MakeTxExplorerLinkArgs {
-  blockchain: Blockchains;
+interface MakeBitcoinTxExplorerLinkArgs {
+  txid: string;
+  bitcoin: BitcoinChainConfig;
+}
+
+interface MakeStacksTxExplorerLinkArgs {
   mode: BitcoinNetworkModes;
   suffix?: string;
   txid: string;
 }
-export function makeTxExplorerLink({
-  blockchain,
+
+export function makeStacksTxExplorerLink({
   mode,
   suffix = '',
   txid,
-}: MakeTxExplorerLinkArgs) {
-  switch (blockchain) {
-    case 'bitcoin':
-      return `https://mempool.space/${mode !== 'mainnet' ? mode + '/' : ''}tx/${txid}`;
-    case 'stacks':
-      return `https://explorer.hiro.so/txid/${txid}?chain=${mode}${suffix}`;
+}: MakeStacksTxExplorerLinkArgs) {
+  return `https://explorer.hiro.so/txid/${txid}?chain=${mode}${suffix}`;
+}
+
+export function makeBitcoinTxExplorerLink({
+  txid,
+  bitcoin: { bitcoinUrl, bitcoinNetwork },
+}: MakeBitcoinTxExplorerLinkArgs) {
+  switch (bitcoinNetwork) {
+    case 'mainnet':
+    case 'testnet':
+      return `https://mempool.space/${
+        bitcoinNetwork !== 'mainnet' ? bitcoinNetwork + '/' : ''
+      }tx/${txid}`;
+    case 'regtest':
+      return `${bitcoinUrl}/tx/${txid}`;
     default:
       return '';
   }

src/app/common/validation/forms/fee-validators.ts

@@ -14,8 +14,8 @@ import { btcToSat, moneyToBaseUnit, stxToMicroStx } from '../../money/unit-conve
 
 interface FeeValidatorFactoryArgs {
   availableBalance?: Money;
-  unitConverter: (unit: string | number | BigNumber) => BigNumber;
-  validator: (errorMsg: string) => NumberSchema<number | undefined, AnyObject>;
+  unitConverter(unit: string | number | BigNumber): BigNumber;
+  validator(errorMsg: string): NumberSchema<number | undefined, AnyObject>;
 }
 function feeValidatorFactory({
   availableBalance,

src/app/components/bitcoin-contract-entry-point/bitcoin-contract-entry-point-layout.tsx

@@ -16,7 +16,7 @@ interface BitcoinContractEntryPointLayoutProps {
   usdBalance?: string;
   isLoading?: boolean;
   cursor?: 'pointer' | 'default';
-  onClick: () => void;
+  onClick(): void;
 }
 export function BitcoinContractEntryPointLayout(props: BitcoinContractEntryPointLayoutProps) {
   const { balance, caption, icon, usdBalance, isLoading, cursor, onClick } = props;

src/app/components/bitcoin-fees-list/components/fees-list-item.tsx

@@ -8,7 +8,7 @@ interface FeesListItemProps {
   feeRate: number;
   feeType: string;
   isSelected?: boolean;
-  onClick: () => void;
+  onClick(): void;
 }
 export function FeesListItem({
   arrivesIn,

src/app/components/bitcoin-transaction-item/bitcoin-transaction-icon.tsx

@@ -2,12 +2,11 @@ import { Circle, CircleProps, Flex } from 'leather-styles/jsx';
 
 import { BitcoinTx } from '@shared/models/transactions/bitcoin-transaction.model';
 
-import { getColorFromBitcoinTx, isBitcoinTxInbound } from '@app/common/transactions/bitcoin/utils';
+import { isBitcoinTxInbound } from '@app/common/transactions/bitcoin/utils';
 import { ArrowDownIcon } from '@app/ui/components/icons/arrow-down-icon';
 import { ArrowUpIcon } from '@app/ui/components/icons/arrow-up-icon';
-import { BtcIcon } from '@app/ui/components/icons/btc-icon';
 
-export function TxStatusIcon(props: { address: string; tx: BitcoinTx }) {
+function TxStatusIcon(props: { address: string; tx: BitcoinTx }) {
   const { address, tx } = props;
   if (isBitcoinTxInbound(address, tx)) return <ArrowDownIcon size="xs" />;
   return <ArrowUpIcon size="xs" />;
@@ -16,21 +15,23 @@ export function TxStatusIcon(props: { address: string; tx: BitcoinTx }) {
 interface TransactionIconProps extends CircleProps {
   transaction: BitcoinTx;
   btcAddress: string;
+  icon: React.ReactNode;
 }
 export function BitcoinTransactionIcon({
   transaction,
   btcAddress,
+  icon,
   ...props
 }: TransactionIconProps) {
   return (
     <Flex position="relative">
-      <BtcIcon />
+      {icon}
       <Circle
         bottom="-2px"
         right="-9px"
         position="absolute"
         size="21px"
-        bg={getColorFromBitcoinTx(transaction)}
+        bg={transaction.status.confirmed ? 'stacks' : 'warning.label'}
         color="accent.background-primary"
         border="background"
         {...props}

src/app/components/bitcoin-transaction-item/bitcoin-transaction-inscription-icon.tsx

@@ -1,20 +1,10 @@
-import { Box, Circle, Flex } from 'leather-styles/jsx';
+import { Circle } from 'leather-styles/jsx';
 
 import { SupportedInscription } from '@shared/models/inscription.model';
-import { BitcoinTx } from '@shared/models/transactions/bitcoin-transaction.model';
 
-import { getColorFromBitcoinTx } from '@app/common/transactions/bitcoin/utils';
 import { OrdinalIcon } from '@app/ui/components/icons/ordinal-icon';
 
-import { TxStatusIcon } from './bitcoin-transaction-icon';
-
-interface BitcoinTransactionInscriptionIconProps {
-  inscription: SupportedInscription;
-  transaction: BitcoinTx;
-  btcAddress: string;
-}
-
-function InscriptionIcon({ inscription, ...rest }: { inscription: SupportedInscription }) {
+export function InscriptionIcon({ inscription, ...rest }: { inscription: SupportedInscription }) {
   switch (inscription.type) {
     case 'image':
       return (
@@ -42,30 +32,3 @@ function InscriptionIcon({ inscription, ...rest }: { inscription: SupportedInscr
       return <OrdinalIcon />;
   }
 }
-
-export function BitcoinTransactionInscriptionIcon({
-  inscription,
-  transaction,
-  btcAddress,
-  ...rest
-}: BitcoinTransactionInscriptionIconProps) {
-  return (
-    <Flex position="relative">
-      <InscriptionIcon inscription={inscription} />
-      <Circle
-        bottom="-2px"
-        right="-9px"
-        position="absolute"
-        size="21px"
-        bg={getColorFromBitcoinTx(transaction)}
-        color="accent.background-primary"
-        border="background"
-        {...rest}
-      >
-        <Box height="13px" width="13px">
-          <TxStatusIcon address={btcAddress} tx={transaction} />
-        </Box>
-      </Circle>
-    </Flex>
-  );
-}