refactor: remove stacks ui

package.json

@@ -153,10 +153,6 @@
     "@stacks/rpc-client": "1.0.3",
     "@stacks/storage": "6.9.0",
     "@stacks/transactions": "6.9.0",
-    "@stacks/ui": "7.10.0",
-    "@stacks/ui-core": "7.3.0",
-    "@stacks/ui-theme": "7.5.0",
-    "@stacks/ui-utils": "7.5.0",
     "@stacks/wallet-sdk": "6.9.0",
     "@stitches/react": "1.2.8",
     "@styled-system/theme-get": "5.1.2",
@@ -203,6 +199,7 @@
     "observable-hooks": "4.2.3",
     "pino": "8.15.4",
     "postcss-preset-env": "9.1.4",
+    "prism-react-renderer": "2.2.0",
     "prismjs": "1.29.0",
     "promise-memoize": "1.2.1",
     "punycode": "2.3.0",
@@ -328,6 +325,7 @@
     "webpack-shell-plugin": "0.5.0"
   },
   "resolutions": {
+    "nanoid": "3.3.4",
     "socket.io-parser": "4.2.4",
     "**/**/bn.js": "5.2.1"
   },

public/assets/base.css

@@ -29,15 +29,17 @@
 
 @font-face {
   font-family: 'Fira Code';
-  src: url('/assets/fonts/fira-code/woff2/FiraCode-Light.woff2') format('woff2'),
+  src:
+    url('/assets/fonts/fira-code/woff2/FiraCode-Light.woff2') format('woff2'),
     url('/assets/fonts/fira-code/woff/FiraCode-Light.woff') format('woff');
   font-weight: 300;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'Fira Code';
-  src: url('/assets/fonts/fira-code/woff2/FiraCode-Regular.woff2') format('woff2'),
+  src:
+    url('/assets/fonts/fira-code/woff2/FiraCode-Regular.woff2') format('woff2'),
     url('/assets/fonts/fira-code/woff/FiraCode-Regular.woff') format('woff');
   font-weight: 400;
   font-style: normal;

src/app/app.tsx

@@ -2,12 +2,11 @@ import { Suspense } from 'react';
 import { Provider as ReduxProvider } from 'react-redux';
 
 import { radixBaseCSS } from '@radix-ui/themes/styles.css';
-import { ThemeProvider } from '@stacks/ui';
 import { QueryClientProvider } from '@tanstack/react-query';
+import { styled } from 'leather-styles/jsx';
 import { PersistGate } from 'redux-persist/integration/react';
 
 import { queryClient } from '@app/common/persistence';
-import { theme } from '@app/common/theme';
 import { FullPageLoadingSpinner } from '@app/components/loading-spinner';
 import { Devtools } from '@app/features/devtool/devtools';
 import { AppErrorBoundary } from '@app/features/errors/app-error-boundary';
@@ -26,8 +25,8 @@ export function App() {
       <PersistGate loading={<FullPageLoadingSpinner />} persistor={persistor}>
         <HeadProvider />
         {/* TODO: this works but investigate importing radixBaseCSS in panda layer config */}
-        <ThemeProvider theme={theme} css={radixBaseCSS}>
-          <ThemeSwitcherProvider>
+        <ThemeSwitcherProvider>
+          <styled.div css={radixBaseCSS}>
             <QueryClientProvider client={queryClient}>
               <Suspense fallback={<FullPageLoadingSpinner />}>
                 <AppErrorBoundary>
@@ -36,8 +35,8 @@ export function App() {
                 {reactQueryDevToolsEnabled && <Devtools />}
               </Suspense>
             </QueryClientProvider>
-          </ThemeSwitcherProvider>
-        </ThemeProvider>
+          </styled.div>
+        </ThemeSwitcherProvider>
       </PersistGate>
     </ReduxProvider>
   );

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

@@ -0,0 +1,74 @@
+import { useEffect } from 'react';
+
+import { useLatestRef } from './use-latest-ref';
+
+// eslint-disable-next-line @typescript-eslint/ban-types
+type FunctionArguments<T extends Function> = T extends (...args: infer R) => any ? R : never;
+type AddEventListener = FunctionArguments<typeof document.addEventListener>;
+
+let _window: Window | undefined = undefined;
+
+// Note: Accessing "window" in IE11 is somewhat expensive, and calling "typeof window"
+// hits a memory leak, whereas aliasing it and calling "typeof _window" does not.
+// Caching the window value at the file scope lets us minimize the impact.
+try {
+  _window = window;
+} catch (e) {
+  /* no-op */
+}
+
+/**
+ * Helper to get the window object. The helper will make sure to use a cached variable
+ * of "window", to avoid overhead and memory leaks in IE11.
+ */
+function getWindow(node?: HTMLElement | null): Window | undefined {
+  return node?.ownerDocument?.defaultView ?? _window;
+}
+
+/**
+ * Check if we can use the DOM. Useful for SSR purposes
+ */
+function checkIsBrowser() {
+  const _window = getWindow();
+  return Boolean(
+    // eslint-disable-next-line @typescript-eslint/unbound-method, deprecation/deprecation
+    typeof _window !== 'undefined' && _window.document && _window.document.createElement
+  );
+}
+
+const isBrowser = checkIsBrowser();
+
+/**
+ * React hook to manage browser event listeners
+ *
+ * @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 options the event listener options
+ */
+export function useEventListener(
+  event: keyof WindowEventMap,
+  handler: (event: any) => void,
+  doc: Document | null = isBrowser ? document : null,
+  options?: AddEventListener[2]
+) {
+  const savedHandler = useLatestRef(handler);
+
+  useEffect(() => {
+    if (!doc) return;
+
+    const listener = (event: any) => {
+      savedHandler.current(event);
+    };
+
+    doc.addEventListener(event, listener, options);
+
+    return () => {
+      doc.removeEventListener(event, listener, options);
+    };
+  }, [event, doc, options, savedHandler]);
+
+  return () => {
+    doc?.removeEventListener(event, savedHandler.current, options);
+  };
+}

src/app/common/hooks/use-latest-ref.ts

@@ -0,0 +1,17 @@
+import { useEffect, useRef } from 'react';
+
+/**
+ * React hook to persist any value between renders,
+ * but keeps it up-to-date if it changes.
+ *
+ * @param value the value or function to persist
+ */
+export function useLatestRef<T>(value: T) {
+  const ref = useRef(value);
+
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+
+  return ref;
+}

src/app/common/hooks/use-modifier-key.ts

@@ -1,5 +1,13 @@
 import { useCallback, useEffect, useState } from 'react';
 
+export function buildEnterKeyEvent(onClick: () => void) {
+  return (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Enter' && onClick) {
+      onClick();
+    }
+  };
+}
+
 let timer = 0;
 
 export function useModifierKey(key: 'alt' | 'control', delay = 0) {

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

@@ -1,14 +1,35 @@
-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/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');
+}
+
 export function getSizeInfo(payload: {
   inputLength: number;
   recipient: string;

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/ui/utils/get-contract-name';
+import { truncateMiddle } from '@app/ui/utils/truncate-middle';
 
 export const statusFromTx = (tx: StacksTx): StacksTxStatus => {
   const { tx_status } = tx;
@@ -140,3 +141,7 @@ export function getEstimatedConfirmationTime(
 
   return `~${arrivesIn / 60} min`;
 }
+
+export function isPendingTx(tx: StacksTx) {
+  return tx.tx_status === 'pending';
+}

src/app/common/utils/safe-await.ts

@@ -0,0 +1,35 @@
+// TypeScript port of https://github.com/DavidWells/safe-await/
+
+// Native Error types https://mzl.la/2Veh3TR
+const nativeExceptions = [
+  EvalError,
+  RangeError,
+  ReferenceError,
+  SyntaxError,
+  TypeError,
+  URIError,
+].filter(except => typeof except === 'function');
+
+function throwNative(error: Error) {
+  for (const Exception of nativeExceptions) {
+    if (error instanceof Exception) throw error;
+  }
+}
+
+export async function safeAwait<T>(promise: Promise<T>, finallyFn?: () => void) {
+  return promise
+    .then(data => {
+      if (data instanceof Error) {
+        throwNative(data);
+        return [data] as readonly [Error];
+      }
+      return [undefined, data] as const;
+    })
+    .catch((error: Error) => {
+      throwNative(error);
+      return [error] as const;
+    })
+    .finally(() => {
+      if (finallyFn) finallyFn();
+    });
+}

src/app/components/account/account-avatar.tsx

@@ -1,14 +1,12 @@
 import { memo } from 'react';
 
-import { BoxProps } from '@stacks/ui';
-
 import { AccountAvatar } from '@app/components/account/account-avatar/account-avatar';
 
-interface AccountAvatarItemProps extends BoxProps {
+interface AccountAvatarItemProps {
   publicKey: string;
   index: number;
   name: string;
 }
 export const AccountAvatarItem = memo(({ name, publicKey, index }: AccountAvatarItemProps) => {
-  return <AccountAvatar name={name} publicKey={publicKey} index={index} />;
+  return <AccountAvatar index={index} name={name} publicKey={publicKey} />;
 });