chore: migrate more stacks-ui dependancies, remove stacks/ui-utils

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

@@ -1,11 +1,11 @@
-import { truncateMiddle } from '@stacks/ui-utils';
 import { getAddressInfo } from 'bitcoin-address-validation';
 
 import { BitcoinTransactionVectorOutput } from '@shared/models/transactions/bitcoin-transaction.model';
 import { BitcoinTx } from '@shared/models/transactions/bitcoin-transaction.model';
 
 import { sumNumbers } from '@app/common/math/helpers';
 import { satToBtc } from '@app/common/money/unit-conversion';
+import { truncateMiddle } from '@app/common/utils/stacks-ui/truncateMiddle';
 
 import { BtcSizeFeeEstimator } from './fees/btc-size-fee-estimator';
 

src/app/common/transactions/stacks/transaction.utils.ts

@@ -14,12 +14,13 @@ import {
   addressHashModeToVersion,
   addressToString,
 } from '@stacks/transactions';
-import { getContractName, truncateMiddle } from '@stacks/ui-utils';
 import { BigNumber } from 'bignumber.js';
 
 import { StacksTx, StacksTxStatus } from '@shared/models/transactions/stacks-transaction.model';
 
 import { stacksValue } from '@app/common/stacks-utils';
+import { getContractName } from '@app/common/utils/stacks-ui/getContractName';
+import { truncateMiddle } from '@app/common/utils/stacks-ui/truncateMiddle';
 
 export const statusFromTx = (tx: StacksTx): StacksTxStatus => {
   const { tx_status } = tx;

src/app/common/utils/stacks-ui/README.md

@@ -0,0 +1,48 @@
+# Stacks UI Utils
+
+Legacy utils taken from [Stacks UI](https://github.com/hirosystems/ui). Moved here initially but can be moved to monorepo
+
+## Transactions
+
+### getContractName
+
+This will parse a string and return the contract name.
+
+```ts
+const contract =
+  'ST12EY99GS4YKP0CP2CFW6SEPWQ2CGVRWK5GHKDRV.market' ||
+  'ST12EY99GS4YKP0CP2CFW6SEPWQ2CGVRWK5GHKDRV.market::asset-name';
+
+const name = getContractName(contract);
+
+// market
+```
+
+## Strings
+
+### truncateHex
+
+This will truncate a hex, keeping the 0x out of the offset amount.
+
+```ts
+const hex = `0x33cc9a437e704e790958f7bb66492f5ad3a863ab3bcbef47138069725549a353`;
+
+const shortened = truncateHex(hex, 4);
+// 0x33cc...a353
+```
+
+### truncateMiddle
+
+This will truncate any string in the middle, given an offset amount.
+
+```ts
+const hex = `0x33cc9a437e704e790958f7bb66492f5ad3a863ab3bcbef47138069725549a353`;
+
+const shortened = truncateHex(hex, 4);
+// 0x33cc...a353
+
+const contract = 'ST12EY99GS4YKP0CP2CFW6SEPWQ2CGVRWK5GHKDRV.market';
+
+const shortenedContract = truncateHex(contract, 4);
+// ST12...KDRV.market
+```

src/app/common/utils/stacks-ui/getContractName.ts

@@ -0,0 +1,20 @@
+/**
+ * getContractName
+ *
+ * Gets the contract name of a string: contract_id or fully qualified asset name.
+ *
+ * @param value - the source string: [principal].[contract-name] or [principal].[contract-name]::[asset-name]
+ */
+export const getContractName = (value: string): string => {
+  if (value.includes('.')) {
+    const parts = value?.split('.');
+    if (value.includes('::')) {
+      return parts[1].split('::')[0];
+    }
+    return parts[1];
+  }
+  //   console.warn('getContractName: does not contain a period, does not appear to be a contract_id.', {
+  //     value,
+  //   });
+  return value;
+};

src/app/common/utils/stacks-ui/truncateMiddle.ts

@@ -0,0 +1,40 @@
+/**
+ * truncateHex
+ *
+ * Truncates hex while keeping the 0x prefix.
+ *
+ * @param {string} hex - the hex to truncate
+ * @param {number} offset - the number of chars to keep
+ */
+function truncateHex(hex: string, offset = 5): string {
+  return `${hex.substring(0, offset + 2)}…${hex.substring(hex.length - offset)}`;
+}
+
+/**
+ * truncateMiddle
+ *
+ * If contract_id, it will truncate the principal, while keeping the contract name untouched.
+ * If prefixed with '0x', will truncate everything after prefix.
+ *
+ * @param {string} input - the string to truncate
+ * @param {number} offset - the number of chars to keep on either end
+ */
+export function truncateMiddle(input: string, offset = 5): string {
+  if (!input) return '';
+  // hex
+  if (input.startsWith('0x')) {
+    return truncateHex(input, offset);
+  }
+  // for contracts
+  if (input.includes('.')) {
+    const parts = input.split('.');
+    const start = parts[0]?.substr(0, offset);
+    const end = parts[0]?.substr(parts[0].length - offset, parts[0].length);
+    return `${start}…${end}.${parts[1]}`;
+  } else {
+    // everything else
+    const start = input?.substr(0, offset);
+    const end = input?.substr(input.length - offset, input.length);
+    return `${start}…${end}`;
+  }
+}

src/app/components/account/account-list-item-layout.tsx

@@ -1,10 +1,10 @@
 import { Spinner } from '@stacks/ui';
-import { truncateMiddle } from '@stacks/ui-utils';
 import { SettingsSelectors } from '@tests/selectors/settings.selectors';
 import { Flex, HStack, Stack, StackProps, styled } from 'leather-styles/jsx';
 import { token } from 'leather-styles/tokens';
 
 import { useViewportMinWidth } from '@app/common/hooks/use-media-query';
+import { truncateMiddle } from '@app/common/utils/stacks-ui/truncateMiddle';
 
 import { CaptionDotSeparator } from '../caption-dot-separator';
 import { CheckmarkIcon } from '../icons/checkmark-icon';

src/app/components/crypto-assets/crypto-currency-asset/asset-copy-icon.tsx

@@ -7,6 +7,7 @@ interface AssetItemCopyIconProps {
 }
 
 export function AssetItemCopyIcon({ hasCopied }: AssetItemCopyIconProps) {
+  // TODO - test this
   // FIXME - refactor this, so many elements for just an icon!
   return (
     <Flex alignItems="center" justifyContent="center" width="36px" height="36px">

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

@@ -1,6 +1,5 @@
 import { Flex } from '@stacks/ui';
 import { forwardRefWithAs } from '@stacks/ui-core';
-import { truncateMiddle } from '@stacks/ui-utils';
 import { CryptoAssetSelectors } from '@tests/selectors/crypto-asset.selectors';
 import { styled } from 'leather-styles/jsx';
 
@@ -9,6 +8,7 @@ import { Money } from '@shared/models/money.model';
 
 import { formatBalance } from '@app/common/format-balance';
 import { ftDecimals } from '@app/common/stacks-utils';
+import { truncateMiddle } from '@app/common/utils/stacks-ui/truncateMiddle';
 import { usePressable } from '@app/components/item-hover';
 import { Flag } from '@app/components/layout/flag';
 import { Tooltip } from '@app/components/tooltip';

src/app/features/psbt-signer/components/psbt-inputs-and-outputs/components/psbt-input-list/components/psbt-input-item.tsx

@@ -1,8 +1,7 @@
-import { truncateMiddle } from '@stacks/ui-utils';
-
 import { createMoney } from '@shared/models/money.model';
 
 import { formatMoney } from '@app/common/money/format-money';
+import { truncateMiddle } from '@app/common/utils/stacks-ui/truncateMiddle';
 import { Pill } from '@app/components/pill';
 import { PsbtInput } from '@app/features/psbt-signer/hooks/use-parsed-inputs';
 

src/app/features/psbt-signer/components/psbt-inputs-and-outputs/components/psbt-output-list/components/psbt-output-item.tsx

@@ -1,8 +1,7 @@
-import { truncateMiddle } from '@stacks/ui-utils';
-
 import { createMoney } from '@shared/models/money.model';
 
 import { formatMoney } from '@app/common/money/format-money';
+import { truncateMiddle } from '@app/common/utils/stacks-ui/truncateMiddle';
 import { Pill } from '@app/components/pill';
 import { PsbtOutput } from '@app/features/psbt-signer/hooks/use-parsed-outputs';
 

src/app/features/psbt-signer/components/psbt-inputs-outputs-totals/components/psbt-address-receive-totals.tsx

@@ -1,7 +1,6 @@
-import { truncateMiddle } from '@stacks/ui-utils';
-
 import { formatMoney, i18nFormatCurrency } from '@app/common/money/format-money';
 import { removeMinusSign } from '@app/common/utils';
+import { truncateMiddle } from '@app/common/utils/stacks-ui/truncateMiddle';
 import { usePsbtSignerContext } from '@app/features/psbt-signer/psbt-signer.context';
 import { useCalculateBitcoinFiatValue } from '@app/query/common/market-data/market-data.hooks';
 

src/app/features/psbt-signer/components/psbt-inputs-outputs-totals/components/psbt-address-transfer-totals.tsx

@@ -1,6 +1,5 @@
-import { truncateMiddle } from '@stacks/ui-utils';
-
 import { formatMoney, i18nFormatCurrency } from '@app/common/money/format-money';
+import { truncateMiddle } from '@app/common/utils/stacks-ui/truncateMiddle';
 import { usePsbtSignerContext } from '@app/features/psbt-signer/psbt-signer.context';
 import { useCalculateBitcoinFiatValue } from '@app/query/common/market-data/market-data.hooks';
 

src/app/features/retrieve-taproot-to-native-segwit/retrieve-taproot-to-native-segwit.tsx

@@ -2,13 +2,13 @@ import toast from 'react-hot-toast';
 import { useNavigate } from 'react-router-dom';
 
 import { Stack } from '@stacks/ui';
-import { truncateMiddle } from '@stacks/ui-utils';
 
 import { RouteUrls } from '@shared/route-urls';
 
 import { useAnalytics } from '@app/common/hooks/analytics/use-analytics';
 import { formatMoneyPadded } from '@app/common/money/format-money';
 import { delay } from '@app/common/utils';
+import { truncateMiddle } from '@app/common/utils/stacks-ui/truncateMiddle';
 import { FormAddressDisplayer } from '@app/components/address-displayer/form-address-displayer';
 import { ExternalLink } from '@app/components/external-link';
 import { InfoCard, InfoCardRow, InfoCardSeparator } from '@app/components/info-card/info-card';

src/app/features/stacks-transaction-request/contract-preview.tsx

@@ -1,7 +1,7 @@
 import { DynamicColorCircle, Stack, StackProps, color } from '@stacks/ui';
-import { truncateMiddle } from '@stacks/ui-utils';
 
 import { formatContractId } from '@app/common/utils';
+import { truncateMiddle } from '@app/common/utils/stacks-ui/truncateMiddle';
 import { Caption, Title } from '@app/components/typography';
 
 interface ContractPreviewLayoutProps extends StackProps {

src/app/features/stacks-transaction-request/post-conditions/fungible-post-condition-item.tsx

@@ -2,7 +2,6 @@ import { Suspense } from 'react';
 
 import { TransactionTypes } from '@stacks/connect';
 import { FungiblePostCondition, addressToString } from '@stacks/transactions';
-import { truncateMiddle } from '@stacks/ui-utils';
 
 import { getImageCanonicalUri } from '@app/common/crypto-assets/stacks-crypto-asset.utils';
 import { ftDecimals } from '@app/common/stacks-utils';
@@ -14,6 +13,7 @@ import {
   getPostConditionTitle,
   getSymbolFromPostCondition,
 } from '@app/common/transactions/stacks/post-condition.utils';
+import { truncateMiddle } from '@app/common/utils/stacks-ui/truncateMiddle';
 import { EventCard } from '@app/components/event-card';
 import { LoadingSpinner } from '@app/components/loading-spinner';
 import { useCurrentStacksAccount } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks';

src/app/features/stacks-transaction-request/post-conditions/post-condition-item.tsx

@@ -2,7 +2,6 @@ import { Suspense } from 'react';
 
 import { TransactionTypes } from '@stacks/connect';
 import { NonFungiblePostCondition, STXPostCondition, addressToString } from '@stacks/transactions';
-import { truncateMiddle } from '@stacks/ui-utils';
 
 import {
   getAmountFromPostCondition,
@@ -12,6 +11,7 @@ import {
   getPostConditionTitle,
   getSymbolFromPostCondition,
 } from '@app/common/transactions/stacks/post-condition.utils';
+import { truncateMiddle } from '@app/common/utils/stacks-ui/truncateMiddle';
 import { EventCard } from '@app/components/event-card';
 import { LoadingSpinner } from '@app/components/loading-spinner';
 import { useCurrentStacksAccount } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks';

src/app/features/stacks-transaction-request/post-conditions/stx-post-condition.tsx

@@ -1,7 +1,7 @@
 import { TransactionTypes } from '@stacks/connect';
-import { truncateMiddle } from '@stacks/ui-utils';
 
 import { stacksValue } from '@app/common/stacks-utils';
+import { truncateMiddle } from '@app/common/utils/stacks-ui/truncateMiddle';
 import { EventCard } from '@app/components/event-card';
 import { useTransactionRequestState } from '@app/store/transactions/requests.hooks';
 

src/app/features/stacks-transaction-request/transaction-error/error-messages.tsx

@@ -3,7 +3,6 @@ import { Navigate } from 'react-router-dom';
 
 import { STXTransferPayload, TransactionTypes } from '@stacks/connect';
 import { Fade, Flex, Stack, color } from '@stacks/ui';
-import { truncateMiddle } from '@stacks/ui-utils';
 import { HStack } from 'leather-styles/jsx';
 
 import { RouteUrls } from '@shared/route-urls';
@@ -13,6 +12,7 @@ import { useAnalytics } from '@app/common/hooks/analytics/use-analytics';
 import { useDrawers } from '@app/common/hooks/use-drawers';
 import { useScrollLock } from '@app/common/hooks/use-scroll-lock';
 import { stacksValue } from '@app/common/stacks-utils';
+import { truncateMiddle } from '@app/common/utils/stacks-ui/truncateMiddle';
 import { LeatherButton } from '@app/components/button/button';
 import { Caption } from '@app/components/typography';
 import { ErrorMessage } from '@app/features/stacks-transaction-request/transaction-error/error-message';

src/app/pages/bitcoin-contract-list/bitcoin-contract-list.tsx

@@ -1,11 +1,11 @@
 import { useState } from 'react';
 
-import { truncateMiddle } from '@stacks/ui-utils';
 import { Flex } from 'leather-styles/jsx';
 
 import { useBitcoinContracts } from '@app/common/hooks/use-bitcoin-contracts';
 import { BitcoinContractListItem } from '@app/common/hooks/use-bitcoin-contracts';
 import { useOnMount } from '@app/common/hooks/use-on-mount';
+import { truncateMiddle } from '@app/common/utils/stacks-ui/truncateMiddle';
 import { FullPageLoadingSpinner } from '@app/components/loading-spinner';
 import { Text } from '@app/components/typography';
 

src/app/pages/bitcoin-contract-request/components/bitcoin-contract-offer/bitcoin-contract-offer-input.tsx

@@ -1,11 +1,11 @@
 import { Stack, Text } from '@stacks/ui';
-import { truncateMiddle } from '@stacks/ui-utils';
 
 import { createMoneyFromDecimal } from '@shared/models/money.model';
 
 import { SimplifiedBitcoinContract } from '@app/common/hooks/use-bitcoin-contracts';
 import { formatMoney, i18nFormatCurrency } from '@app/common/money/format-money';
 import { satToBtc } from '@app/common/money/unit-conversion';
+import { truncateMiddle } from '@app/common/utils/stacks-ui/truncateMiddle';
 import { useCalculateBitcoinFiatValue } from '@app/query/common/market-data/market-data.hooks';
 
 import { BitcoinContractLockAmount } from './bitcoin-contract-lock-amount';

src/app/pages/receive/components/receive-item.tsx

@@ -1,6 +1,6 @@
-import { truncateMiddle } from '@stacks/ui-utils';
 import { Flex, HStack, Stack, styled } from 'leather-styles/jsx';
 
+import { truncateMiddle } from '@app/common/utils/stacks-ui/truncateMiddle';
 import { LeatherButton } from '@app/components/button/button';
 import { CopyIcon } from '@app/components/icons/copy-icon';
 import { QrCodeIcon } from '@app/components/icons/qr-code-icon';

src/app/pages/rpc-send-transfer/components/send-transfer-details.tsx

@@ -1,6 +1,7 @@
-import { truncateMiddle } from '@stacks/ui-utils';
 import { HStack, Stack, styled } from 'leather-styles/jsx';
 
+import { truncateMiddle } from '@app/common/utils/stacks-ui/truncateMiddle';
+
 interface SendTransferDetailsProps {
   address: string;
   amount: string;

src/app/pages/rpc-send-transfer/rpc-send-transfer-confirmation.tsx

@@ -1,6 +1,5 @@
 import { useLocation, useNavigate } from 'react-router-dom';
 
-import { truncateMiddle } from '@stacks/ui-utils';
 import get from 'lodash.get';
 
 import { decodeBitcoinTx } from '@shared/crypto/bitcoin/bitcoin.utils';
@@ -14,6 +13,7 @@ import { useAnalytics } from '@app/common/hooks/analytics/use-analytics';
 import { baseCurrencyAmountInQuote } from '@app/common/money/calculate-money';
 import { formatMoney, formatMoneyPadded, i18nFormatCurrency } from '@app/common/money/format-money';
 import { satToBtc } from '@app/common/money/unit-conversion';
+import { truncateMiddle } from '@app/common/utils/stacks-ui/truncateMiddle';
 import { useCurrentNativeSegwitUtxos } from '@app/query/bitcoin/address/utxos-by-address.hooks';
 import { useBitcoinBroadcastTransaction } from '@app/query/bitcoin/transaction/use-bitcoin-broadcast-transaction';
 import { useCryptoCurrencyMarketData } from '@app/query/common/market-data/market-data.hooks';

src/app/pages/rpc-sign-bip322-message/rpc-sign-bip322-message.tsx

@@ -1,9 +1,8 @@
-import { truncateMiddle } from '@stacks/ui-utils';
-
 import { closeWindow } from '@shared/utils';
 
 import { useRouteHeader } from '@app/common/hooks/use-route-header';
 import { useRejectIfLedgerWallet } from '@app/common/rpc-helpers';
+import { truncateMiddle } from '@app/common/utils/stacks-ui/truncateMiddle';
 import { Disclaimer } from '@app/components/disclaimer';
 import { NoFeesWarningRow } from '@app/components/no-fees-warning-row';
 import { PopupHeader } from '@app/features/current-account/popup-header';