From 6808536ee67df8ba27a55539a00ab83e1548c998 Mon Sep 17 00:00:00 2001
From: Pete Watters <2938440+pete-watters@users.noreply.github.com>
Date: Fri, 12 Jan 2024 13:45:39 +0000
Subject: [PATCH 1/6] chore: remove unneeded radix styles

---
 theme/global/global.ts       |  2 -
 theme/global/radix-styles.ts | 84 ------------------------------------
 2 files changed, 86 deletions(-)
 delete mode 100644 theme/global/radix-styles.ts

diff --git a/theme/global/global.ts b/theme/global/global.ts
index 9bc8b10ecfa..68e0572069e 100644
--- a/theme/global/global.ts
+++ b/theme/global/global.ts
@@ -3,7 +3,6 @@ import { defineGlobalStyles } from '@pandacss/dev';
 import { fullPageStyles } from './full-page-styles';
 import { popupCenterStyles } from './popup-center-styles';
 import { popupStyles } from './popup-styles';
-import { radixStyles } from './radix-styles';
 import { tippyStyles } from './tippy-styles';
 
 // ts-unused-exports:disable-next-line
@@ -28,5 +27,4 @@ export const globalCss = defineGlobalStyles({
   ...popupStyles,
   ...popupCenterStyles,
   ...tippyStyles,
-  ...radixStyles,
 });
diff --git a/theme/global/radix-styles.ts b/theme/global/radix-styles.ts
deleted file mode 100644
index bd7b305614b..00000000000
--- a/theme/global/radix-styles.ts
+++ /dev/null
@@ -1,84 +0,0 @@
-export const radixStyles = {
-  '.radix-themes': {
-    '--font-size-7': '32px',
-    '--font-size-8': '44px',
-    '--font-size-9': '53px',
-
-    '--default-font-family': '"Diatype", "Helvetica Neue", sans-serif',
-    '--heading-font-family': '"Marche", "Helvetica Neue", sans-serif',
-
-    '--letter-spacing-1': 0,
-    '--letter-spacing-2': 0,
-    '--letter-spacing-3': 0,
-    '--letter-spacing-4': 0,
-    '--letter-spacing-5': 0,
-    '--letter-spacing-6': 0,
-    '--letter-spacing-7': 0,
-    '--letter-spacing-8': 0,
-    '--letter-spacing-9': 0,
-
-    // Configured to Diatype
-    '--font-weight-light': 400,
-    '--font-weight-regular': 400,
-    '--font-weight-medium': 500,
-    '--font-weight-bold': 500,
-
-    '--color-overlay': 'rgba(0, 0, 0, 0.3)', //check this
-  },
-
-  // TODO check if these are being set properly
-  ':root, .light, .light-theme': {
-    '--brown-1': 'brown.1',
-    '--brown-2': 'brown.2',
-    '--brown-3': 'brown.3',
-    '--brown-4': 'brown.4',
-    '--brown-5': 'brown.5',
-    '--brown-6': 'brown.6',
-    '--brown-7': 'brown.7',
-    '--brown-8': 'brown.8',
-    '--brown-9': 'brown.9',
-    '--brown-10': 'brown.10',
-    '--brown-11': 'brown.11',
-    '--brown-12': 'brown.12',
-
-    '--gray-1': 'ink.1',
-    '--gray-2': 'ink.2',
-    '--gray-3': 'ink.3',
-    '--gray-4': 'ink.4',
-    '--gray-5': 'ink.5',
-    '--gray-6': 'ink.6',
-    '--gray-7': 'ink.7',
-    '--gray-8': 'ink.8',
-    '--gray-9': 'ink.9',
-    '--gray-10': 'ink.10',
-    '--gray-11': 'ink.11',
-    '--gray-12': 'ink.12',
-  },
-  '.dark, .dark-theme': {
-    '--brown-1': 'brown.1',
-    '--brown-2': 'brown.2',
-    '--brown-3': 'brown.3',
-    '--brown-4': 'brown.4',
-    '--brown-5': 'brown.5',
-    '--brown-6': 'brown.6',
-    '--brown-7': 'brown.7',
-    '--brown-8': 'brown.8',
-    '--brown-9': 'brown.9',
-    '--brown-10': 'brown.10',
-    '--brown-11': 'brown.11',
-    '--brown-12': 'brown.12',
-
-    '--gray-1': 'ink.1',
-    '--gray-2': 'ink.2',
-    '--gray-3': 'ink.3',
-    '--gray-4': 'ink.4',
-    '--gray-5': 'ink.5',
-    '--gray-6': 'ink.6',
-    '--gray-7': 'ink.7',
-    '--gray-8': 'ink.8',
-    '--gray-9': 'ink.9',
-    '--gray-10': 'ink.10',
-    '--gray-11': 'ink.11',
-    '--gray-12': 'ink.12',
-  },
-};

From 8b96e9a4fbc7262026bee545186694e2e2565733 Mon Sep 17 00:00:00 2001
From: kyranjamie <kyran.burraston@gmail.com>
Date: Fri, 12 Jan 2024 12:25:38 -0300
Subject: [PATCH 2/6] chore: add improved sentry perf tracking

---
 src/shared/utils/analytics.ts | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/src/shared/utils/analytics.ts b/src/shared/utils/analytics.ts
index 8594de257bd..64f77c1f216 100644
--- a/src/shared/utils/analytics.ts
+++ b/src/shared/utils/analytics.ts
@@ -1,3 +1,11 @@
+import React from 'react';
+import {
+  createRoutesFromChildren,
+  matchRoutes,
+  useLocation,
+  useNavigationType,
+} from 'react-router-dom';
+
 import { ripemd160 } from '@noble/hashes/ripemd160';
 import { sha256 } from '@noble/hashes/sha256';
 import { base58 } from '@scure/base';
@@ -59,6 +67,13 @@ export function initSentry() {
         startTransactionOnLocationChange: false,
         startTransactionOnPageLoad: false,
         markBackgroundTransactions: false,
+        routingInstrumentation: Sentry.reactRouterV6Instrumentation(
+          React.useEffect,
+          useLocation,
+          useNavigationType,
+          createRoutesFromChildren,
+          matchRoutes
+        ),
       }),
       new Sentry.Feedback({
         colorScheme: 'system',

From e67b61d5c27cd4129415aa63e1fa49e30efdb5ae Mon Sep 17 00:00:00 2001
From: Fara Woolf <fara@trustmachines.co>
Date: Fri, 12 Jan 2024 11:00:45 -0600
Subject: [PATCH 3/6] refactor: token radii and keyframe, ref #4637

---
 package.json                                  |   2 +-
 src/app/common/utils/figma-theme.ts           | 161 ------------------
 .../account/account-list-item-layout.tsx      |   2 +-
 .../components/fees-list-item.tsx             |   6 +-
 .../choose-asset-container.tsx                |   2 +-
 src/app/components/event-card.tsx             |  17 +-
 .../fees-row/components/fee-estimate-item.tsx |   2 +-
 src/app/components/info-card/info-card.tsx    |   2 +-
 .../inscription-preview-card.tsx              |   2 +-
 src/app/components/item-hover.tsx             |   2 +-
 src/app/components/network-mode-badge.tsx     |   2 +-
 src/app/components/pill.tsx                   |   5 +-
 .../mnemonic-key/mnemonic-input-field.tsx     |   6 +-
 src/app/components/text-input-field.tsx       |   2 +-
 .../tx-transfer-icon-wrapper.tsx              |   7 +-
 src/app/features/add-network/add-network.tsx  |   6 +-
 .../collectibles/components/bitcoin/stamp.tsx |   2 +-
 .../components/collectible-hover.tsx          |   2 +-
 .../components/collectible-item.layout.tsx    |   6 +-
 .../message-signer/message-preview-box.tsx    |   5 +-
 .../psbt-request-details-header.tsx           |   2 +-
 .../psbt-request-details-section.layout.tsx   |   2 +-
 .../components/nested-tuple-displayer.tsx     |   4 +-
 .../components/structured-data-box.tsx        |   5 +-
 .../contract-call-details.tsx                 |   5 +-
 .../contract-deploy-details.tsx               |   9 +-
 .../contract-preview.tsx                      |   5 +-
 .../post-conditions/post-conditions.tsx       |   9 +-
 .../stx-transfer-details.tsx                  |   5 +-
 .../transaction-error/error-message.tsx       |   6 +-
 .../fund/components/fast-checkout-badge.tsx   |   2 +-
 .../fund/components/fund-account-tile.tsx     |   4 +-
 .../components/zero-percent-fees-badge.tsx    |   2 +-
 .../home/components/account-info-card.tsx     |   2 +-
 .../set-password/components/password-bars.tsx |   2 +-
 .../receive/components/address-qr-code.tsx    |   6 +-
 .../send-transfer-confirmation-details.tsx    |   9 +-
 .../components/send-transfer-details.tsx      |   9 +-
 .../recipient-accounts-drawer.tsx             |  15 +-
 .../components/recipient-dropdown-item.tsx    |   2 +-
 .../swap-assets-pair.layout.tsx               |   2 +-
 .../components/profile-box.tsx                |  22 ++-
 .../update-profile-request.layout.tsx         |   2 +-
 .../dowpdown-menu/dropdown-menu.tsx           |   4 +-
 .../ui/components/icons/ellipses-h-icon.tsx   |  38 -----
 src/app/ui/components/select/select.tsx       |   4 +-
 theme/global/tippy-styles.ts                  |   2 +-
 theme/keyframes.ts                            |  10 --
 yarn.lock                                     |   8 +-
 49 files changed, 85 insertions(+), 353 deletions(-)
 delete mode 100644 src/app/common/utils/figma-theme.ts
 delete mode 100644 src/app/ui/components/icons/ellipses-h-icon.tsx

diff --git a/package.json b/package.json
index 0f9d82a22a0..2bebb3df159 100644
--- a/package.json
+++ b/package.json
@@ -240,7 +240,7 @@
     "@actions/core": "1.10.1",
     "@btckit/types": "0.0.19",
     "@leather-wallet/prettier-config": "0.0.1",
-    "@leather-wallet/tokens": "0.0.2",
+    "@leather-wallet/tokens": "0.0.3",
     "@ls-lint/ls-lint": "2.2.2",
     "@pandacss/dev": "0.26.2",
     "@playwright/test": "1.40.1",
diff --git a/src/app/common/utils/figma-theme.ts b/src/app/common/utils/figma-theme.ts
deleted file mode 100644
index adcdcaf6eae..00000000000
--- a/src/app/common/utils/figma-theme.ts
+++ /dev/null
@@ -1,161 +0,0 @@
-// See
-// https://www.figma.com/file/Li7qK8ZIG9c5dKSNOPO4iCtv/%E2%9D%96-Design-System?node-id=1909-4136&t=GGTMJo3PyBf2gns5-0
-// for a detailed description of the palette and the theme.
-
-const palette = {
-  white: '#ffffff',
-  black: '#ococod',
-
-  blue050: '#f7f8fd',
-  blue100: '#eef2fb',
-  blue200: '#e5ebfa',
-  blue300: '#cedafa',
-  blue400: '#7f97f1',
-  blue500: '#5c6cf2',
-  blue600: '#5546ff',
-  blue700: '#2323c7',
-  blue800: '#ofofa9',
-  blue900: '#oboa63',
-
-  green100: '#f2f9f1',
-  green300: '#d9edd4',
-  green500: '#23a978',
-  green600: '#008051',
-
-  gray050: '#fafafa',
-  gray100: '#f5f5f5',
-  gray200: '#efefef',
-  gray300: '#dddddd',
-  gray400: '#9a9a9a',
-  gray500: '#777777',
-  gray600: '#666666',
-  gray700: '#333333',
-  gray800: '#262626',
-  gray900: '#171717',
-
-  orange100: '#fff5eb',
-  orange300: '#ffeoc2',
-  orange500: '#ffbd7a',
-  orange600: '#f59300',
-
-  red100: '#fceeed',
-  red300: '#f7cdca',
-  red500: '#e76c6a',
-  red600: '#c83532',
-
-  slate050: '#f9f9fa',
-  slate100: '#f5f5f7',
-  slate200: '#efeff2',
-  slate300: '#dcdde2',
-  slate400: '#989ca3',
-  slate500: '#74777D',
-  slate600: '#62676e',
-  slate700: '#303236',
-  slate800: '#242629',
-  slate900: '#151619',
-};
-
-export const figmaTheme = {
-  // Background
-
-  background: palette.white,
-  backgroundSubdued: palette.slate100,
-
-  // Surface
-
-  surface: palette.white,
-  surfaceHovered: palette.slate050,
-  surfacePressed: palette.slate200,
-  surfacedisabled: palette.slate100,
-  surfaceSelected: palette.blue050,
-  surfaceSubdued: palette.slate100,
-  surfaceContrast: palette.black,
-  overlay: `${palette.black}80`,
-
-  // Border
-
-  border: palette.slate300,
-  borderSubdued: palette.slate200,
-  borderDisabled: palette.slate200,
-  borderFocused: palette.blue300,
-
-  // Icon
-
-  icon: palette.slate800,
-  iconSubdued: palette.slate500,
-  iconDisabled: palette.slate400,
-  iconOnPrimary: palette.white,
-  iconOnCritical: palette.white,
-  iconOnWarning: palette.white,
-  iconOnSuccess: palette.white,
-
-  // Text
-
-  text: palette.slate800,
-  textSubdued: palette.slate500,
-  textFaint: palette.slate400,
-  textDisabled: palette.slate400,
-  textOnPrimary: palette.white,
-  textOnCritical: palette.white,
-  textOnWarning: palette.white,
-  textOnSuccess: palette.white,
-  textOnContrast: palette.white,
-
-  // Primary
-
-  actionPrimary: palette.blue600,
-  actionPrimaryHovered: palette.blue500,
-  actionPrimaryPressed: palette.blue700,
-  actionPrimaryDisabled: palette.blue400,
-  actionSubdued: palette.blue100,
-  actionSubduedHovered: palette.blue200,
-  actionSubduedPressed: palette.blue300,
-  actionSubduedDisabled: palette.gray100,
-  iconOnPrimarySubdued: palette.blue600,
-  textOnPrimarySubdued: palette.blue600,
-
-  // Secondary
-
-  secondary: palette.white,
-  secondarySubdued: palette.slate100,
-  surfaceSecondary: palette.slate200,
-  actionSecondary: palette.white,
-  actionSecondaryHovered: palette.slate050,
-  actionSecondaryDisabled: palette.slate050,
-
-  // Interactive
-
-  interactive: palette.blue600,
-  interactiveHovered: palette.blue500,
-  interactivePressed: palette.blue700,
-  interactiveDisabled: palette.slate300,
-
-  // Success
-
-  textSuccess: palette.green600,
-  iconSuccess: palette.green600,
-  borderSuccess: palette.green300,
-  surfaceSuccess: palette.green300,
-
-  // Warning
-
-  iconWarning: palette.orange600,
-  actionWarning: palette.orange600,
-  borderWarning: palette.orange300,
-  surfaceWarning: palette.orange300,
-
-  // Critical
-
-  textCritical: palette.red600,
-  iconCritical: palette.red600,
-  actionCritical: palette.red600,
-  borderCritical: palette.red300,
-  surfaceCritical: palette.red300,
-
-  // Accent
-
-  accent: palette.blue600,
-  iconAccent: palette.blue600,
-  surfaceAccent: palette.blue050,
-  borderAccent: palette.blue600,
-} as const;
diff --git a/src/app/components/account/account-list-item-layout.tsx b/src/app/components/account/account-list-item-layout.tsx
index ece5f388f52..91aae1cba45 100644
--- a/src/app/components/account/account-list-item-layout.tsx
+++ b/src/app/components/account/account-list-item-layout.tsx
@@ -45,7 +45,7 @@ export function AccountListItemLayout(props: AccountListItemLayoutProps) {
       onClick={onSelectAccount}
       {...rest}
     >
-      <Flag align="middle" img={avatar} spacing="space.04" width="100%" mr="space.04">
+      <Flag align="middle" img={avatar} spacing="space.04" width="100%" mx="space.04">
         <Stack gap="space.01">
           <HStack alignItems="center" justifyContent="space-between">
             <HStack alignItems="center" gap="space.02">
diff --git a/src/app/components/bitcoin-fees-list/components/fees-list-item.tsx b/src/app/components/bitcoin-fees-list/components/fees-list-item.tsx
index a4369fe7c4a..6088fb2cc8c 100644
--- a/src/app/components/bitcoin-fees-list/components/fees-list-item.tsx
+++ b/src/app/components/bitcoin-fees-list/components/fees-list-item.tsx
@@ -22,10 +22,8 @@ export function FeesListItem({
   return (
     <styled.button
       _hover={{ background: 'accent.component-background-hover' }}
-      border={isSelected ? '4px solid' : '1px solid'}
-      borderColor="accent.action-primary-default"
-      borderRadius="lg"
-      // #4476 TODO add tokens for boxShadow
+      border={isSelected ? 'focus' : 'default'}
+      borderRadius="xs"
       boxShadow="0px 1px 2px rgba(0, 0, 0, 0.04)"
       data-testid={SharedComponentsSelectors.FeesListItem}
       px="space.04"
diff --git a/src/app/components/crypto-assets/choose-crypto-asset/choose-asset-container.tsx b/src/app/components/crypto-assets/choose-crypto-asset/choose-asset-container.tsx
index 920d00f30ce..cce24adc239 100644
--- a/src/app/components/crypto-assets/choose-crypto-asset/choose-asset-container.tsx
+++ b/src/app/components/crypto-assets/choose-crypto-asset/choose-asset-container.tsx
@@ -7,7 +7,7 @@ export function ChooseAssetContainer({ children }: HasChildren) {
   return whenPageMode({
     full: (
       <Flex
-        borderRadius={['unset', '16px']}
+        borderRadius={['unset', 'lg']}
         height="fit-content"
         maxWidth={['100%', 'centeredPageFullWidth']}
         minWidth={['100%', 'centeredPageFullWidth']}
diff --git a/src/app/components/event-card.tsx b/src/app/components/event-card.tsx
index adb07838a9c..76f720e5eb6 100644
--- a/src/app/components/event-card.tsx
+++ b/src/app/components/event-card.tsx
@@ -1,6 +1,5 @@
 import { Box, HStack, Stack, styled } from 'leather-styles/jsx';
 
-import { EllipsesHorizontalIcon } from '@app/ui/components/icons/ellipses-h-icon';
 import { Caption } from '@app/ui/components/typography/caption';
 
 import { TxAssetItem } from './tx-asset-item';
@@ -17,19 +16,13 @@ interface EventCardProps {
   title: string;
 }
 export function EventCard(props: EventCardProps): React.JSX.Element {
-  const { actions, amount, icon, isLast, left, message, right, ticker, title } = props;
+  const { amount, icon, isLast, left, message, right, ticker, title } = props;
 
   return (
     <>
       <Stack gap="space.05" p="space.05">
         <HStack alignItems="center" justifyContent="space-between" position="relative">
           <styled.span textStyle="label.01">{title}</styled.span>
-          {/* TODO: What does this do? */}
-          {actions && (
-            <styled.button width="24px" position="absolute" right={0} type="button">
-              <EllipsesHorizontalIcon />
-            </styled.button>
-          )}
         </HStack>
         <TxAssetItem iconString={icon} amount={amount} ticker={ticker} />
         {left || right ? (
@@ -40,13 +33,7 @@ export function EventCard(props: EventCardProps): React.JSX.Element {
         ) : null}
       </Stack>
       {message && (
-        <Box
-          p="space.05"
-          borderTop="1px solid"
-          borderColor="accent.border-default"
-          borderBottom={!isLast ? '4px solid' : 'unset'}
-          borderBottomColor="accent.border-default"
-        >
+        <Box p="space.05" borderTop="default" borderBottom={!isLast ? 'active' : 'unset'}>
           <Caption>{message}</Caption>
         </Box>
       )}
diff --git a/src/app/components/fees-row/components/fee-estimate-item.tsx b/src/app/components/fees-row/components/fee-estimate-item.tsx
index f2f21e8f218..a2147b54228 100644
--- a/src/app/components/fees-row/components/fee-estimate-item.tsx
+++ b/src/app/components/fees-row/components/fee-estimate-item.tsx
@@ -32,7 +32,7 @@ export function FeeEstimateItem({
     <LeatherButton
       _hover={{
         bg: isVisible ? 'accent.component-background-hover' : 'accent.background-primary',
-        borderRadius: '8px',
+        borderRadius: 'xs',
         color: 'accent.text-primary',
       }}
       alignItems="center"
diff --git a/src/app/components/info-card/info-card.tsx b/src/app/components/info-card/info-card.tsx
index b63f8868b7b..d8309f1a61e 100644
--- a/src/app/components/info-card/info-card.tsx
+++ b/src/app/components/info-card/info-card.tsx
@@ -31,7 +31,7 @@ export function InfoCardRow({ title, value, titleAdditionalElement, ...props }:
   return (
     <HStack alignItems="start" fontSize="14px" justifyContent="space-between" {...props}>
       <Flex alignItems="center">
-        <styled.span textStyle="body.02" color="accent.text-subdued">
+        <styled.span color="accent.text-subdued" mr="space.01" textStyle="body.02">
           {title}
         </styled.span>
         {titleAdditionalElement && titleAdditionalElement}
diff --git a/src/app/components/inscription-preview-card/inscription-preview-card.tsx b/src/app/components/inscription-preview-card/inscription-preview-card.tsx
index 4d9e34c47f5..d0895f041db 100644
--- a/src/app/components/inscription-preview-card/inscription-preview-card.tsx
+++ b/src/app/components/inscription-preview-card/inscription-preview-card.tsx
@@ -23,7 +23,7 @@ export function InscriptionPreviewCard({
     <Flag
       align="middle"
       border={hideBorder ? 'unset' : 'default'}
-      borderRadius={hideBorder ? 'unset' : '10px'}
+      borderRadius={hideBorder ? 'unset' : 'sm'}
       img={image}
       p={hideBorder ? 'unset' : 'space.04'}
       spacing="space.04"
diff --git a/src/app/components/item-hover.tsx b/src/app/components/item-hover.tsx
index 95d6a196409..e89cd046a9e 100644
--- a/src/app/components/item-hover.tsx
+++ b/src/app/components/item-hover.tsx
@@ -13,7 +13,7 @@ function ItemHover({
     <Square
       opacity={isFocused || isHovered ? 1 : 0}
       transition="transition"
-      borderRadius="lg"
+      borderRadius="xs"
       position="absolute"
       size="calc(100% + 24px)"
       left="-12px"
diff --git a/src/app/components/network-mode-badge.tsx b/src/app/components/network-mode-badge.tsx
index cab9d0517bf..473bb021934 100644
--- a/src/app/components/network-mode-badge.tsx
+++ b/src/app/components/network-mode-badge.tsx
@@ -23,7 +23,7 @@ export const NetworkModeBadge = memo((props: FlexProps) => {
       _hover={{ cursor: 'pointer' }}
       alignItems="center"
       border="subdued"
-      borderRadius="md"
+      borderRadius="xs"
       height="24px"
       onClick={() => navigate(RouteUrls.SelectNetwork, { relative: 'path' })}
       px="space.03"
diff --git a/src/app/components/pill.tsx b/src/app/components/pill.tsx
index 21ed394b13f..a9dbe753726 100644
--- a/src/app/components/pill.tsx
+++ b/src/app/components/pill.tsx
@@ -10,9 +10,8 @@ export function Pill({ hoverLabel, label, ...props }: PillProps) {
   return (
     <Tooltip disabled={!hoverLabel} label={hoverLabel} maxWidth="200px" placement="bottom">
       <Box
-        border="1px solid"
-        borderRadius="xxl"
-        borderColor="#DCDDE2"
+        border="default"
+        borderRadius="xs"
         lineHeight="16px"
         ml="space.03"
         px="space.02"
diff --git a/src/app/components/secret-key/mnemonic-key/mnemonic-input-field.tsx b/src/app/components/secret-key/mnemonic-key/mnemonic-input-field.tsx
index 5d2ba8e05c7..c5e799cc02a 100644
--- a/src/app/components/secret-key/mnemonic-key/mnemonic-input-field.tsx
+++ b/src/app/components/secret-key/mnemonic-key/mnemonic-input-field.tsx
@@ -27,7 +27,7 @@ const psuedoBorderStyles = {
   background: 'transparent',
   position: 'absolute',
   border: '1px solid',
-  borderRadius: '4px',
+  borderRadius: 'sm',
 };
 
 export function InputField({ dataTestId, name, onPaste, onChange, value }: InputFieldProps) {
@@ -47,6 +47,7 @@ export function InputField({ dataTestId, name, onPaste, onChange, value }: Input
       color="brown"
       data-state={isDirty && meta.error ? 'error' : undefined}
       className={css({
+        borderRadius: 'sm',
         display: 'flex',
         alignSelf: 'stretch',
         height: '48px',
@@ -68,8 +69,7 @@ export function InputField({ dataTestId, name, onPaste, onChange, value }: Input
       })}
     >
       <TextField.Slot className={css({ padding: 'space.00', marginRight: 'space.01' })}>
-        {/* // FIXME #4130: - update this color when available in design system */}
-        <styled.span textStyle="label.01" color="GrayText">{`${name}.`}</styled.span>
+        <styled.span textStyle="label.01" color="accent.text-subdued">{`${name}.`}</styled.span>
       </TextField.Slot>
       <TextField.Input
         autoCapitalize="off"
diff --git a/src/app/components/text-input-field.tsx b/src/app/components/text-input-field.tsx
index c7232938c6e..a8acd2abefb 100644
--- a/src/app/components/text-input-field.tsx
+++ b/src/app/components/text-input-field.tsx
@@ -49,7 +49,7 @@ export function TextInputField({
           content: '""',
           position: 'absolute',
           border: showError ? 'error' : 'unset',
-          borderRadius: '10px',
+          borderRadius: 'sm',
           left: '-1px',
           right: '-1px',
           top: '-1px',
diff --git a/src/app/features/activity-list/components/transaction-list/stacks-transaction/tx-transfer-icon-wrapper.tsx b/src/app/features/activity-list/components/transaction-list/stacks-transaction/tx-transfer-icon-wrapper.tsx
index 34e8f316f48..22b54ade28d 100644
--- a/src/app/features/activity-list/components/transaction-list/stacks-transaction/tx-transfer-icon-wrapper.tsx
+++ b/src/app/features/activity-list/components/transaction-list/stacks-transaction/tx-transfer-icon-wrapper.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Box } from 'leather-styles/jsx';
+import { Circle } from 'leather-styles/jsx';
 
 import { TransactionTypeIconWrapper } from '@app/components/transaction/transaction-type-icon-wrapper';
 import { StxIcon } from '@app/ui/components/icons/stx-icon';
@@ -10,9 +10,8 @@ interface TxTransferIconWrapperProps {
 }
 export function TxTransferIconWrapper({ icon }: TxTransferIconWrapperProps) {
   return (
-    <Box
+    <Circle
       bg="stacks"
-      borderRadius="lg"
       color="accent.background-primary"
       flexShrink={0}
       height="36px"
@@ -21,6 +20,6 @@ export function TxTransferIconWrapper({ icon }: TxTransferIconWrapperProps) {
     >
       <StxIcon />
       <TransactionTypeIconWrapper icon={icon} />
-    </Box>
+    </Circle>
   );
 }
diff --git a/src/app/features/add-network/add-network.tsx b/src/app/features/add-network/add-network.tsx
index 3353dd3b8f4..a67a021d2a4 100644
--- a/src/app/features/add-network/add-network.tsx
+++ b/src/app/features/add-network/add-network.tsx
@@ -231,20 +231,22 @@ export function AddNetwork() {
                 data-testid={NetworkSelectors.NetworkName}
               />
               <Title>Bitcoin API</Title>
+              {/* TODO: Replace with new Select */}
               <SelectRoot onValueChange={handleApiChange} defaultValue="mainnet">
                 <SelectTrigger
                   className={css({
                     backgroundColor: 'accent.background-primary',
-                    borderRadius: '6px',
+                    borderRadius: 'sm',
                     border: '1px solid accent.border-primary',
                   })}
                 ></SelectTrigger>
                 <SelectContent
                   className={css({
                     backgroundColor: 'accent.background-primary',
-                    borderRadius: '6px',
+                    borderRadius: 'sm',
                     border: '1px solid accent.border-primary',
                     dropShadow: 'lg',
+                    height: 'fit-content',
                   })}
                 >
                   <SelectItem key="mainnet" value="mainnet">
diff --git a/src/app/features/collectibles/components/bitcoin/stamp.tsx b/src/app/features/collectibles/components/bitcoin/stamp.tsx
index 38ed35fd264..8ef9712b0d5 100644
--- a/src/app/features/collectibles/components/bitcoin/stamp.tsx
+++ b/src/app/features/collectibles/components/bitcoin/stamp.tsx
@@ -11,7 +11,7 @@ export function Stamp(props: { bitcoinStamp: BitcoinStamp }) {
 
   return (
     <CollectibleImage
-      icon={<StampsIcon size="lg" />}
+      icon={<StampsIcon size="xl" />}
       key={bitcoinStamp.stamp}
       onClickCallToAction={() => openInNewTab(`${stampChainAssetUrl}${bitcoinStamp.stamp}`)}
       src={bitcoinStamp.stamp_url}
diff --git a/src/app/features/collectibles/components/collectible-hover.tsx b/src/app/features/collectibles/components/collectible-hover.tsx
index bccbd5501e8..19cc9d35567 100644
--- a/src/app/features/collectibles/components/collectible-hover.tsx
+++ b/src/app/features/collectibles/components/collectible-hover.tsx
@@ -43,7 +43,7 @@ export function CollectibleHover({
           _hover={{ bg: 'accent.component-background-hover' }}
           alignItems="center"
           bg="accent.background-primary"
-          borderRadius="lg"
+          borderRadius="50%"
           display="flex"
           height="30px"
           justifyContent="center"
diff --git a/src/app/features/collectibles/components/collectible-item.layout.tsx b/src/app/features/collectibles/components/collectible-item.layout.tsx
index e9fba20bc5a..08deeb3b935 100644
--- a/src/app/features/collectibles/components/collectible-item.layout.tsx
+++ b/src/app/features/collectibles/components/collectible-item.layout.tsx
@@ -36,7 +36,7 @@ export function CollectibleItemLayout({
         outlineOffset: onClickLayout ? '-4px' : 'unset',
       }}
       _hover={{ bg: 'accent.background-secondary' }}
-      borderRadius="xl"
+      borderRadius="xs"
       cursor={onClickLayout ? 'pointer' : 'default'}
       onClick={onClickLayout}
       p="space.01"
@@ -52,7 +52,7 @@ export function CollectibleItemLayout({
         />
         <Box
           alignItems="center"
-          borderRadius="lg"
+          borderRadius="xs"
           display="flex"
           height="100%"
           justifyContent="center"
@@ -91,7 +91,7 @@ export function CollectibleItemLayout({
             _focus={{ clipPath: 'none', outline: 'focus' }}
             _hover={{ bg: 'accent.background-primary' }}
             bg="accent.background-primary"
-            borderRadius="sm"
+            borderRadius="xs"
             clipPath={isHovered ? 'none' : 'circle(0%)'}
             fontWeight={500}
             onClick={e => {
diff --git a/src/app/features/message-signer/message-preview-box.tsx b/src/app/features/message-signer/message-preview-box.tsx
index ea764c8ebdd..6eb65039d44 100644
--- a/src/app/features/message-signer/message-preview-box.tsx
+++ b/src/app/features/message-signer/message-preview-box.tsx
@@ -11,9 +11,8 @@ export function MessagePreviewBox({ message, hash }: MessageBoxProps) {
   return (
     <Stack
       bg="accent.background-primary"
-      border="4px solid"
-      borderColor="accent.background-primary"
-      borderRadius="xl"
+      border="active"
+      borderRadius="sm"
       paddingBottom={hash ? 'space.02' : 0}
     >
       <Stack
diff --git a/src/app/features/psbt-signer/components/psbt-request-details-header.tsx b/src/app/features/psbt-signer/components/psbt-request-details-header.tsx
index 9132c34c33c..c1f10121b22 100644
--- a/src/app/features/psbt-signer/components/psbt-request-details-header.tsx
+++ b/src/app/features/psbt-signer/components/psbt-request-details-header.tsx
@@ -28,7 +28,7 @@ export function PsbtRequestDetailsHeader() {
         <HStack
           alignItems="center"
           border={isPsbtMutable ? 'warning' : 'subdued'}
-          borderRadius="xxl"
+          borderRadius="xs"
           gap="space.01"
           px="space.02"
           py="space.01"
diff --git a/src/app/features/psbt-signer/components/psbt-request-details-section.layout.tsx b/src/app/features/psbt-signer/components/psbt-request-details-section.layout.tsx
index 8de37340302..7bfb7a99d9b 100644
--- a/src/app/features/psbt-signer/components/psbt-request-details-section.layout.tsx
+++ b/src/app/features/psbt-signer/components/psbt-request-details-section.layout.tsx
@@ -4,7 +4,7 @@ import { HasChildren } from '@app/common/has-children';
 
 export function PsbtRequestDetailsSectionLayout({ children, ...props }: HasChildren & StackProps) {
   return (
-    <Stack border="default" borderRadius="lg" gap="space.01" p="space.05" width="100%" {...props}>
+    <Stack border="default" borderRadius="sm" gap="space.01" p="space.05" width="100%" {...props}>
       {children}
     </Stack>
   );
diff --git a/src/app/features/stacks-message-signer/components/nested-tuple-displayer.tsx b/src/app/features/stacks-message-signer/components/nested-tuple-displayer.tsx
index 99885ef234b..8c3c7ed2f96 100644
--- a/src/app/features/stacks-message-signer/components/nested-tuple-displayer.tsx
+++ b/src/app/features/stacks-message-signer/components/nested-tuple-displayer.tsx
@@ -1,8 +1,6 @@
 import { ClarityType } from '@stacks/transactions';
 import { Box, BoxProps, Flex, FlexProps } from 'leather-styles/jsx';
 
-import { figmaTheme } from '@app/common/utils/figma-theme';
-
 interface TupleDisplayerProps extends BoxProps {
   isRoot: boolean;
 }
@@ -26,7 +24,7 @@ export function TupleNodeDisplayer({ clarityType, ...props }: TupleNodeDisplayer
   return clarityType === ClarityType.Tuple ? <Box {...props} /> : <Flex {...props} />;
 }
 export function TupleNodeLabelDisplayer(props: BoxProps) {
-  return <Box mr="space.04" color={figmaTheme.textSubdued} {...props} />;
+  return <Box mr="space.04" color="accent.text-subdued" {...props} />;
 }
 
 export function TupleNodeValueDisplayer(props: FlexProps) {
diff --git a/src/app/features/stacks-message-signer/components/structured-data-box.tsx b/src/app/features/stacks-message-signer/components/structured-data-box.tsx
index 0dad0d7764e..f1a2eb28e12 100644
--- a/src/app/features/stacks-message-signer/components/structured-data-box.tsx
+++ b/src/app/features/stacks-message-signer/components/structured-data-box.tsx
@@ -40,11 +40,10 @@ export function StructuredDataBox(props: {
   return (
     <Box minHeight="260px">
       <Stack
-        border="4px solid"
+        border="active"
         paddingBottom="space.02"
         borderColor="accent.border-default"
-        borderRadius="xl"
-        backgroundColor="accent.border-default"
+        borderRadius="sm"
       >
         <Box background="white" borderRadius="lg" overflowX="scroll" py="space.05">
           <Box fontSize="14px" lineHeight="1.7" px="space.05">
diff --git a/src/app/features/stacks-transaction-request/contract-call-details/contract-call-details.tsx b/src/app/features/stacks-transaction-request/contract-call-details/contract-call-details.tsx
index cf639af48f3..cd36cc7e396 100644
--- a/src/app/features/stacks-transaction-request/contract-call-details/contract-call-details.tsx
+++ b/src/app/features/stacks-transaction-request/contract-call-details/contract-call-details.tsx
@@ -20,9 +20,8 @@ function ContractCallDetailsSuspense() {
 
   return (
     <Stack
-      border="4px solid"
-      borderColor="accent.border-default"
-      borderRadius="md"
+      border="active"
+      borderRadius="sm"
       mb="space.05"
       px="space.04"
       py="32px"
diff --git a/src/app/features/stacks-transaction-request/contract-deploy-details/contract-deploy-details.tsx b/src/app/features/stacks-transaction-request/contract-deploy-details/contract-deploy-details.tsx
index c0140dacf5b..3adf85f38e1 100644
--- a/src/app/features/stacks-transaction-request/contract-deploy-details/contract-deploy-details.tsx
+++ b/src/app/features/stacks-transaction-request/contract-deploy-details/contract-deploy-details.tsx
@@ -86,14 +86,7 @@ export function ContractDeployDetails() {
         </TabButton>
       </HStack>
       {tab === 'details' ? (
-        <Stack
-          gap="space.05"
-          border="4px solid"
-          borderColor="accent.border-default"
-          borderRadius="md"
-          py="space.06"
-          px="space.04"
-        >
+        <Stack gap="space.05" border="active" borderRadius="sm" py="space.06" px="space.04">
           <Title>Contract deploy details</Title>
           <ContractPreviewLayout
             contractAddress={currentAccountStxAddress}
diff --git a/src/app/features/stacks-transaction-request/contract-preview.tsx b/src/app/features/stacks-transaction-request/contract-preview.tsx
index 0ecec7542f5..22c81e253e3 100644
--- a/src/app/features/stacks-transaction-request/contract-preview.tsx
+++ b/src/app/features/stacks-transaction-request/contract-preview.tsx
@@ -22,11 +22,10 @@ export function ContractPreviewLayout({
   return (
     <HStack
       p="space.04"
-      borderRadius="md"
+      borderRadius="sm"
       gap="space.04"
       alignItems="center"
-      border="1px solid"
-      borderColor="accent.border-default"
+      border="default"
       _hover={
         onClick
           ? {
diff --git a/src/app/features/stacks-transaction-request/post-conditions/post-conditions.tsx b/src/app/features/stacks-transaction-request/post-conditions/post-conditions.tsx
index 7d693ecb057..1da366a06de 100644
--- a/src/app/features/stacks-transaction-request/post-conditions/post-conditions.tsx
+++ b/src/app/features/stacks-transaction-request/post-conditions/post-conditions.tsx
@@ -29,14 +29,7 @@ function PostConditionsSuspense(): React.JSX.Element | null {
   if (!IS_TEST_ENV && mode === PostConditionMode.Allow) return null;
 
   return (
-    <Flex
-      border="4px solid"
-      borderColor="accent.border-default"
-      borderRadius="md"
-      flexDirection="column"
-      mb="space.05"
-      width="100%"
-    >
+    <Flex border="active" borderRadius="sm" flexDirection="column" mb="space.05" width="100%">
       {hasPostConditions ? (
         <PostConditionsList />
       ) : isStxTransfer ? (
diff --git a/src/app/features/stacks-transaction-request/stx-transfer-details/stx-transfer-details.tsx b/src/app/features/stacks-transaction-request/stx-transfer-details/stx-transfer-details.tsx
index d22e45167e2..de5bd459b24 100644
--- a/src/app/features/stacks-transaction-request/stx-transfer-details/stx-transfer-details.tsx
+++ b/src/app/features/stacks-transaction-request/stx-transfer-details/stx-transfer-details.tsx
@@ -14,9 +14,8 @@ export function StxTransferDetails(): React.JSX.Element | null {
 
   return (
     <Stack
-      border="4px solid"
-      borderColor="accent.border-default"
-      borderRadius="md"
+      border="active"
+      borderRadius="sm"
       mb="space.05"
       px="space.04"
       py="space.06"
diff --git a/src/app/features/stacks-transaction-request/transaction-error/error-message.tsx b/src/app/features/stacks-transaction-request/transaction-error/error-message.tsx
index b2ff0f0b258..d9ef13c48e2 100644
--- a/src/app/features/stacks-transaction-request/transaction-error/error-message.tsx
+++ b/src/app/features/stacks-transaction-request/transaction-error/error-message.tsx
@@ -8,7 +8,6 @@ interface ErrorMessageProps {
   title: string;
   body: string | React.JSX.Element;
   actions?: React.JSX.Element;
-  // #4476 FIXME share borders better colour
   border?: string;
   borderColor?: string;
 }
@@ -16,9 +15,8 @@ export const ErrorMessage = memo(({ border, title, body, actions }: ErrorMessage
   return (
     <Stack
       bg="accent.background-primary"
-      // #4476 TODO change this colour
-      border={border ? border : '4px solid #FCEEED'}
-      borderRadius="md"
+      border={border ? border : 'active'}
+      borderRadius="sm"
       gap="space.06"
       mb="space.05"
       p="space.05"
diff --git a/src/app/pages/fund/components/fast-checkout-badge.tsx b/src/app/pages/fund/components/fast-checkout-badge.tsx
index cbea061d684..4e20eb7771e 100644
--- a/src/app/pages/fund/components/fast-checkout-badge.tsx
+++ b/src/app/pages/fund/components/fast-checkout-badge.tsx
@@ -7,7 +7,7 @@ export function FastCheckoutBadge() {
     <HStack
       alignItems="center"
       border="default"
-      borderRadius="xxl"
+      borderRadius="xs"
       height="24px"
       justifyContent="center"
       paddingX="space.02"
diff --git a/src/app/pages/fund/components/fund-account-tile.tsx b/src/app/pages/fund/components/fund-account-tile.tsx
index c6ae4490219..557ef6015a2 100644
--- a/src/app/pages/fund/components/fund-account-tile.tsx
+++ b/src/app/pages/fund/components/fund-account-tile.tsx
@@ -26,7 +26,7 @@ export function FundAccountTile(props: FundAccountTileProps) {
       }}
       border="default"
       backgroundColor="accent.background-primary"
-      borderRadius="lg"
+      borderRadius="xs"
       boxShadow="0px 1px 2px rgba(0, 0, 0, 0.04)"
       data-testid={testId}
       display="flex"
@@ -43,7 +43,7 @@ export function FundAccountTile(props: FundAccountTileProps) {
           <Box
             alignItems="center"
             border="default"
-            borderRadius="sm"
+            borderRadius="xs"
             display="inline-flex"
             height="40px"
             justifyContent="center"
diff --git a/src/app/pages/fund/components/zero-percent-fees-badge.tsx b/src/app/pages/fund/components/zero-percent-fees-badge.tsx
index 70e5f9f4e0e..29ed93a3aab 100644
--- a/src/app/pages/fund/components/zero-percent-fees-badge.tsx
+++ b/src/app/pages/fund/components/zero-percent-fees-badge.tsx
@@ -7,7 +7,7 @@ export function ZeroPercentFeesBadge() {
     <HStack
       alignItems="center"
       border="default"
-      borderRadius="xxl"
+      borderRadius="xs"
       height="24px"
       justifyContent="center"
       paddingX="space.02"
diff --git a/src/app/pages/home/components/account-info-card.tsx b/src/app/pages/home/components/account-info-card.tsx
index 1b2ee7d7d8b..8e89090a3e7 100644
--- a/src/app/pages/home/components/account-info-card.tsx
+++ b/src/app/pages/home/components/account-info-card.tsx
@@ -24,7 +24,7 @@ export function AccountInfoCard() {
     <Flex
       direction="column"
       bgColor={{ base: 'brown.2', sm: 'unset' }}
-      rounded="10px"
+      rounded="sm"
       px={{ base: 'space.05', sm: '0' }}
       pt={{ base: 'space.05', sm: 'space.06' }}
       pb={{ base: 'space.02', sm: 'space.06' }}
diff --git a/src/app/pages/onboarding/set-password/components/password-bars.tsx b/src/app/pages/onboarding/set-password/components/password-bars.tsx
index a0190e4d5e1..afa5cc44e98 100644
--- a/src/app/pages/onboarding/set-password/components/password-bars.tsx
+++ b/src/app/pages/onboarding/set-password/components/password-bars.tsx
@@ -9,7 +9,7 @@ export function PasswordStrengthBars({ bars }: PasswordStrengthBarsProps) {
       {bars.map((bar: string, index: number) => {
         return (
           <Box
-            borderRadius="2px"
+            borderRadius="xs"
             flexGrow={1}
             key={index}
             marginBottom="0"
diff --git a/src/app/pages/receive/components/address-qr-code.tsx b/src/app/pages/receive/components/address-qr-code.tsx
index 61d70fb7dd2..ca271545199 100644
--- a/src/app/pages/receive/components/address-qr-code.tsx
+++ b/src/app/pages/receive/components/address-qr-code.tsx
@@ -21,13 +21,9 @@ export const QrCode = memo(({ principal, ...rest }: { principal: string }) => {
   return (
     <Flex
       alignItems="center"
-      border="1px solid"
-      borderColor="accent.border-default"
-      borderRadius="lg"
-      boxShadow="low"
       justifyContent="center"
       mx="auto"
-      p="space.05"
+      p="space.03"
       position="relative"
       {...rest}
     >
diff --git a/src/app/pages/rpc-send-transfer/components/send-transfer-confirmation-details.tsx b/src/app/pages/rpc-send-transfer/components/send-transfer-confirmation-details.tsx
index e84b29b1bb9..205fdb8f62f 100644
--- a/src/app/pages/rpc-send-transfer/components/send-transfer-confirmation-details.tsx
+++ b/src/app/pages/rpc-send-transfer/components/send-transfer-confirmation-details.tsx
@@ -15,14 +15,7 @@ export function SendTransferConfirmationDetails({
   feeRowValue,
 }: SendTransferConfirmationDetailsProps) {
   return (
-    <Stack
-      border="4px solid"
-      borderColor="accent.border-default"
-      borderRadius="lg"
-      p="space.05"
-      gap="space.04"
-      width="100%"
-    >
+    <Stack border="active" borderRadius="sm" p="space.05" gap="space.04" width="100%">
       <HStack alignItems="center" gap="space.04" justifyContent="space-between">
         <styled.span color="accent.styled.span-subdued">From</styled.span>
         <styled.span>{currentAddress}</styled.span>
diff --git a/src/app/pages/rpc-send-transfer/components/send-transfer-details.tsx b/src/app/pages/rpc-send-transfer/components/send-transfer-details.tsx
index 7611268b90a..a50d7a13cc9 100644
--- a/src/app/pages/rpc-send-transfer/components/send-transfer-details.tsx
+++ b/src/app/pages/rpc-send-transfer/components/send-transfer-details.tsx
@@ -9,14 +9,7 @@ interface SendTransferDetailsProps {
 }
 export function SendTransferDetails({ address, amount, currentAddress }: SendTransferDetailsProps) {
   return (
-    <Stack
-      border="4px solid"
-      borderColor="accent.border-default !important"
-      borderRadius="lg"
-      gap="space.04"
-      p="space.05"
-      width="100%"
-    >
+    <Stack border="active" borderRadius="sm" gap="space.04" p="space.05" width="100%">
       <HStack alignItems="center" gap="space.04" justifyContent="space-between">
         <styled.span textStyle="caption.01">From</styled.span>
         <styled.span textStyle="label.01">{truncateMiddle(currentAddress)}</styled.span>
diff --git a/src/app/pages/send/send-crypto-asset-form/components/recipient-accounts-drawer/recipient-accounts-drawer.tsx b/src/app/pages/send/send-crypto-asset-form/components/recipient-accounts-drawer/recipient-accounts-drawer.tsx
index 0972c44c5bf..c930445bef1 100644
--- a/src/app/pages/send/send-crypto-asset-form/components/recipient-accounts-drawer/recipient-accounts-drawer.tsx
+++ b/src/app/pages/send/send-crypto-asset-form/components/recipient-accounts-drawer/recipient-accounts-drawer.tsx
@@ -23,17 +23,16 @@ export const RecipientAccountsDrawer = memo(() => {
 
   return (
     <BaseDrawer title="My accounts" isShowing onClose={onGoBack}>
-      <Box mb="space.05" mx={['space.04', 'space.06']}>
+      <Box mb="space.05" mx="space.04">
         <Virtuoso
           height="72px"
           itemContent={index => (
-            <Box mx={['space.05', 'space.06']} key={index}>
-              <AccountListItem
-                stacksAccount={stacksAccounts[index]}
-                onClose={onGoBack}
-                index={index}
-              />
-            </Box>
+            <AccountListItem
+              key={index}
+              stacksAccount={stacksAccounts[index]}
+              onClose={onGoBack}
+              index={index}
+            />
           )}
           style={{ paddingTop: '24px', height: '70vh' }}
           totalCount={stacksAddressesNum || btcAddressesNum}
diff --git a/src/app/pages/send/send-crypto-asset-form/components/recipient-type-dropdown/components/recipient-dropdown-item.tsx b/src/app/pages/send/send-crypto-asset-form/components/recipient-type-dropdown/components/recipient-dropdown-item.tsx
index c3fa440b693..79b02db151b 100644
--- a/src/app/pages/send/send-crypto-asset-form/components/recipient-type-dropdown/components/recipient-dropdown-item.tsx
+++ b/src/app/pages/send/send-crypto-asset-form/components/recipient-type-dropdown/components/recipient-dropdown-item.tsx
@@ -20,7 +20,7 @@ export function RecipientDropdownItem({
     <LeatherButton
       _hover={{
         bg: isVisible ? 'accent.component-background-hover' : 'accent.background-primary',
-        borderRadius: '8px',
+        borderRadius: 'xs',
         color: 'accent.text-primary',
       }}
       alignItems="center"
diff --git a/src/app/pages/swap/components/swap-assets-pair/swap-assets-pair.layout.tsx b/src/app/pages/swap/components/swap-assets-pair/swap-assets-pair.layout.tsx
index 0f8088303f2..217dcc9c8b3 100644
--- a/src/app/pages/swap/components/swap-assets-pair/swap-assets-pair.layout.tsx
+++ b/src/app/pages/swap/components/swap-assets-pair/swap-assets-pair.layout.tsx
@@ -10,7 +10,7 @@ export function SwapAssetsPairLayout({ swapAssetFrom, swapAssetTo }: SwapAssetsP
   return (
     <Stack
       border="default"
-      borderRadius="md"
+      borderRadius="sm"
       gap="space.01"
       mb="space.05"
       mt="space.04"
diff --git a/src/app/pages/update-profile-request/components/profile-box.tsx b/src/app/pages/update-profile-request/components/profile-box.tsx
index 776eb631905..c9672cb3c64 100644
--- a/src/app/pages/update-profile-request/components/profile-box.tsx
+++ b/src/app/pages/update-profile-request/components/profile-box.tsx
@@ -51,19 +51,17 @@ function Properties({ p }: { p: any }) {
 export function ProfileBox({ profile }: { profile: Profile }): React.JSX.Element | null {
   return (
     <Box minHeight="260px">
-      <Stack
-        bg="accent.background-secondary"
-        border="4px solid"
-        paddingBottom="space.02"
-        borderColor="accent.border-default"
-        borderRadius="xl"
+      <Box
+        bg="accent.background-primary"
+        border="active"
+        borderRadius="sm"
+        px="space.05"
+        py="space.05"
       >
-        <Box bg="accent.background-primary" borderRadius="lg" px="space.05" py="space.05">
-          <Stack gap="space.03">
-            <Properties p={profile._profile} />
-          </Stack>
-        </Box>
-      </Stack>
+        <Stack gap="space.03">
+          <Properties p={profile._profile} />
+        </Stack>
+      </Box>
     </Box>
   );
 }
diff --git a/src/app/pages/update-profile-request/components/update-profile-request.layout.tsx b/src/app/pages/update-profile-request/components/update-profile-request.layout.tsx
index 497691e1420..13415723fa8 100644
--- a/src/app/pages/update-profile-request/components/update-profile-request.layout.tsx
+++ b/src/app/pages/update-profile-request/components/update-profile-request.layout.tsx
@@ -7,7 +7,7 @@ interface ProfileUpdateRequestLayoutProps {
 }
 export function ProfileUpdateRequestLayout({ children }: ProfileUpdateRequestLayoutProps) {
   return (
-    <Stack px={['space.05', 'unset']} gap="space.05" width="100%">
+    <Stack px={['space.05', 'space.05', 'unset']} gap="space.05" width="100%">
       <PageTop />
       {children}
     </Stack>
diff --git a/src/app/ui/components/dowpdown-menu/dropdown-menu.tsx b/src/app/ui/components/dowpdown-menu/dropdown-menu.tsx
index a6e92839e1d..169d56ed1c7 100644
--- a/src/app/ui/components/dowpdown-menu/dropdown-menu.tsx
+++ b/src/app/ui/components/dowpdown-menu/dropdown-menu.tsx
@@ -13,7 +13,7 @@ const Root = RadixDropdownMenu.Root;
 
 const dropdownTriggerStyles = css({
   bg: 'accent.background-primary',
-  borderRadius: '2px',
+  borderRadius: 'xs',
   fontWeight: 500,
   maxWidth: 'fit-content',
   maxHeight: 'fit-content',
@@ -37,7 +37,7 @@ const dropdownContentStyles = css({
   animationTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',
   '--base-menu-padding': '0px',
   bg: 'accent.background-primary',
-  borderRadius: '2px',
+  borderRadius: 'xs',
   boxShadow:
     '0px 12px 24px 0px rgba(18, 16, 15, 0.08), 0px 4px 8px 0px rgba(18, 16, 15, 0.08), 0px 0px 2px 0px rgba(18, 16, 15, 0.08)',
   minWidth: '256px',
diff --git a/src/app/ui/components/icons/ellipses-h-icon.tsx b/src/app/ui/components/icons/ellipses-h-icon.tsx
deleted file mode 100644
index 4aa228940e5..00000000000
--- a/src/app/ui/components/icons/ellipses-h-icon.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { styled } from 'leather-styles/jsx';
-
-import { SvgProps } from '@app/ui/ui-types';
-
-export function EllipsesHorizontalIcon({ size = 'sm', ...props }: SvgProps) {
-  return (
-    <styled.svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={size}
-      height={size}
-      viewBox="0 0 16 16"
-      fill="none"
-      {...props}
-    >
-      <path
-        d="M8.00004 8.66659C8.36823 8.66659 8.66671 8.36811 8.66671 7.99992C8.66671 7.63173 8.36823 7.33325 8.00004 7.33325C7.63185 7.33325 7.33337 7.63173 7.33337 7.99992C7.33337 8.36811 7.63185 8.66659 8.00004 8.66659Z"
-        fill="currentColor"
-        stroke="currentColor"
-        strokeWidth="1.8"
-        strokeLinecap="square"
-      />
-      <path
-        d="M12.6667 8.66659C13.0349 8.66659 13.3333 8.36811 13.3333 7.99992C13.3333 7.63173 13.0349 7.33325 12.6667 7.33325C12.2985 7.33325 12 7.63173 12 7.99992C12 8.36811 12.2985 8.66659 12.6667 8.66659Z"
-        fill="currentColor"
-        stroke="currentColor"
-        strokeWidth="1.8"
-        strokeLinecap="square"
-      />
-      <path
-        d="M3.33329 8.66659C3.70148 8.66659 3.99996 8.36811 3.99996 7.99992C3.99996 7.63173 3.70148 7.33325 3.33329 7.33325C2.9651 7.33325 2.66663 7.63173 2.66663 7.99992C2.66663 8.36811 2.9651 8.66659 3.33329 8.66659Z"
-        fill="currentColor"
-        stroke="currentColor"
-        strokeWidth="1.8"
-        strokeLinecap="square"
-      />
-    </styled.svg>
-  );
-}
diff --git a/src/app/ui/components/select/select.tsx b/src/app/ui/components/select/select.tsx
index ae870b60dea..9953bdce076 100644
--- a/src/app/ui/components/select/select.tsx
+++ b/src/app/ui/components/select/select.tsx
@@ -14,7 +14,7 @@ const Root = RadixSelect.Root;
 const selectTriggerStyles = css({
   alignItems: 'center',
   bg: 'accent.background-primary',
-  borderRadius: '2px',
+  borderRadius: 'xs',
   display: 'flex',
   fontWeight: 500,
   gap: 'space.02',
@@ -42,7 +42,7 @@ const selectContentStyles = css({
   animationTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',
   '--base-menu-padding': '0px',
   bg: 'accent.background-primary',
-  borderRadius: '2px',
+  borderRadius: 'xs',
   boxShadow:
     '0px 12px 24px 0px rgba(18, 16, 15, 0.08), 0px 4px 8px 0px rgba(18, 16, 15, 0.08), 0px 0px 2px 0px rgba(18, 16, 15, 0.08)',
   minWidth: '256px',
diff --git a/theme/global/tippy-styles.ts b/theme/global/tippy-styles.ts
index 774596783ea..e37d9436650 100644
--- a/theme/global/tippy-styles.ts
+++ b/theme/global/tippy-styles.ts
@@ -9,7 +9,7 @@ export const tippyStyles = {
     position: 'relative',
     backgroundColor: ' #333',
     color: '#fff',
-    borderRadius: '4px',
+    borderRadius: 'sm',
     fontSize: '14px',
     lineHeight: 1.4,
     outline: 0,
diff --git a/theme/keyframes.ts b/theme/keyframes.ts
index bb8c6c59859..d82a4737e3d 100644
--- a/theme/keyframes.ts
+++ b/theme/keyframes.ts
@@ -4,14 +4,4 @@ import { CssKeyframes } from 'leather-styles/types/system-types';
 // ts-unused-exports:disable-next-line
 export const keyframes: CssKeyframes = {
   ...leatherKeyframes,
-  slideUpAndFade: {
-    from: {
-      opacity: 0,
-      transform: 'translateY(2px)',
-    },
-    to: {
-      opacity: 1,
-      transform: 'translateY(0)',
-    },
-  },
 };
diff --git a/yarn.lock b/yarn.lock
index a8e0785a8eb..88f14d0b5af 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2484,10 +2484,10 @@
     "@trivago/prettier-plugin-sort-imports" "^4.2.0"
     prettier "^3.0.3"
 
-"@leather-wallet/tokens@0.0.2":
-  version "0.0.2"
-  resolved "https://registry.yarnpkg.com/@leather-wallet/tokens/-/tokens-0.0.2.tgz#6e93cb34be0f63562e4031db0e06b721fa48b2de"
-  integrity sha512-y4kISkpHirC+1OonyIHhLbu8eBMS8GkASE09Ay330RMjdCnkprhuVVHYCzEZgzKN0+szyCzFzrz1foYf9Tpe6A==
+"@leather-wallet/tokens@0.0.3":
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/@leather-wallet/tokens/-/tokens-0.0.3.tgz#c120820e51a0af3df2a62dccb9149b99b739d358"
+  integrity sha512-ga2gLj17dGLEZKK59J/T12w/p2ibdO23yj5tGwSL8e6Nu7sWid06xTVwGixS3JdYZnW1531wEBm4rsX+I4pl+w==
 
 "@ledgerhq/devices@^8.0.7", "@ledgerhq/devices@^8.2.0":
   version "8.2.0"

From 227f6ee10b06f420e4061551a284202ff5c059fe Mon Sep 17 00:00:00 2001
From: kyranjamie <kyran.burraston@gmail.com>
Date: Mon, 15 Jan 2024 13:00:25 -0300
Subject: [PATCH 4/6] fix: track error codes

---
 package.json                                  |  2 +-
 src/app/common/api/fetch-wrapper.ts           | 42 ++++++-------
 src/app/query/bitcoin/bitcoin-client.ts       | 59 ++++++++-----------
 .../bitcoin/ordinals/inscriptions.query.ts    | 11 ++--
 src/app/query/stacks/fees/fees.query.ts       | 16 +++--
 src/app/query/stacks/network/network.query.ts |  6 +-
 src/app/query/utils.ts                        | 14 -----
 tests/specs/onboarding/onboarding.spec.ts     |  5 +-
 yarn.lock                                     |  8 +--
 9 files changed, 68 insertions(+), 95 deletions(-)
 delete mode 100644 src/app/query/utils.ts

diff --git a/package.json b/package.json
index 2bebb3df159..df573416dab 100644
--- a/package.json
+++ b/package.json
@@ -130,7 +130,7 @@
     "@coinbase/cbpay-js": "1.0.2",
     "@dlc-link/dlc-tools": "1.1.1",
     "@fungible-systems/zone-file": "2.0.0",
-    "@hirosystems/token-metadata-api-client": "1.1.0",
+    "@hirosystems/token-metadata-api-client": "1.2.0",
     "@ledgerhq/hw-transport-webusb": "6.27.19",
     "@noble/hashes": "1.3.2",
     "@noble/secp256k1": "2.0.0",
diff --git a/src/app/common/api/fetch-wrapper.ts b/src/app/common/api/fetch-wrapper.ts
index 4fa0bda3a5b..11b3a4bc1b9 100644
--- a/src/app/common/api/fetch-wrapper.ts
+++ b/src/app/common/api/fetch-wrapper.ts
@@ -1,34 +1,36 @@
+import axios from 'axios';
+
+import { analytics } from '@shared/utils/analytics';
+
 const leatherHeaders: HeadersInit = {
   'x-leather-version': VERSION,
 };
 
+function isErrorCode(statusCode: number) {
+  return statusCode >= 400;
+}
+
+function trackApiError(url: string, statusCode: number) {
+  void analytics.track('api_error', { origin: new URL(url).origin, statusCode, url });
+}
+
 /**
- * @deprecated Use `axios` directly instead
+ * @deprecated Use `axios` directly instead. Fetch only needed for interation
+ * with generated stacks blockchain api library
  */
-export function wrappedFetch(input: RequestInfo, init: RequestInit = {}) {
+export async function wrappedFetch(input: RequestInfo, init: RequestInit = {}) {
   const initHeaders = init.headers || {};
   // eslint-disable-next-line no-restricted-globals
-  return fetch(input, {
-    credentials: 'omit',
+  const resp = await fetch(input, {
     ...init,
+    credentials: 'omit',
     headers: { ...initHeaders, ...leatherHeaders },
   });
+  if (isErrorCode(resp.status)) trackApiError(resp.url, resp.status);
+  return resp;
 }
 
-export async function fetchWithTimeout(
-  input: RequestInfo,
-  init: RequestInit & { timeout?: number } = {}
-) {
-  const { timeout = 8000, ...options } = init;
-
-  const controller = new AbortController();
-  const id = setTimeout(() => controller.abort(), timeout);
-
-  const response = await wrappedFetch(input, {
-    ...options,
-    signal: controller.signal,
-  });
-  clearTimeout(id);
-
+axios.interceptors.response.use(response => {
+  if (isErrorCode(response.status)) trackApiError(response.config.url ?? '', response.status);
   return response;
-}
+});
diff --git a/src/app/query/bitcoin/bitcoin-client.ts b/src/app/query/bitcoin/bitcoin-client.ts
index e11a141655d..0d536727b8e 100644
--- a/src/app/query/bitcoin/bitcoin-client.ts
+++ b/src/app/query/bitcoin/bitcoin-client.ts
@@ -1,7 +1,5 @@
 import axios from 'axios';
 
-import { fetchData } from '../utils';
-
 class Configuration {
   constructor(public baseUrl: string) {}
 }
@@ -26,20 +24,15 @@ class AddressApi {
   constructor(public configuration: Configuration) {}
 
   async getTransactionsByAddress(address: string) {
-    return fetchData({
-      errorMsg: 'No transactions fetched',
-      url: `${this.configuration.baseUrl}/address/${address}/txs`,
-    });
+    const resp = await axios.get(`${this.configuration.baseUrl}/address/${address}/txs`);
+    return resp.data;
   }
 
   async getUtxosByAddress(address: string): Promise<UtxoResponseItem[]> {
-    return fetchData({
-      errorMsg: 'No UTXOs fetched',
-      url: `${this.configuration.baseUrl}/address/${address}/utxo`,
-    }).then((utxos: UtxoResponseItem[]) =>
-      // Sort by vout as blockstream API returns them inconsistently
-      utxos.sort((a, b) => a.vout - b.vout)
+    const resp = await axios.get<UtxoResponseItem[]>(
+      `${this.configuration.baseUrl}/address/${address}/utxo`
     );
+    return resp.data.sort((a, b) => a.vout - b.vout);
   }
 }
 
@@ -77,32 +70,28 @@ class FeeEstimatesApi {
   constructor(public configuration: Configuration) {}
 
   async getFeeEstimatesFromBlockcypherApi(network: string): Promise<FeeResult> {
-    return fetchData({
-      errorMsg: 'No fee estimates fetched',
-      url: `https://api.blockcypher.com/v1/btc/${network}`,
-    }).then((resp: FeeEstimateEarnApiResponse) => {
-      const { low_fee_per_kb, medium_fee_per_kb, high_fee_per_kb } = resp;
-      // These fees are in satoshis per kb
-      return {
-        slow: low_fee_per_kb / 1000,
-        medium: medium_fee_per_kb / 1000,
-        fast: high_fee_per_kb / 1000,
-      };
-    });
+    const resp = await axios.get<FeeEstimateEarnApiResponse>(
+      `https://api.blockcypher.com/v1/btc/${network}`
+    );
+    const { low_fee_per_kb, medium_fee_per_kb, high_fee_per_kb } = resp.data;
+    // These fees are in satoshis per kb
+    return {
+      slow: low_fee_per_kb / 1000,
+      medium: medium_fee_per_kb / 1000,
+      fast: high_fee_per_kb / 1000,
+    };
   }
 
   async getFeeEstimatesFromMempoolSpaceApi(): Promise<FeeResult> {
-    return fetchData({
-      errorMsg: 'No fee estimates fetched',
-      url: ` https://mempool.space/api/v1/fees/recommended`,
-    }).then((resp: FeeEstimateMempoolSpaceApiResponse) => {
-      const { fastestFee, halfHourFee, hourFee } = resp;
-      return {
-        slow: hourFee,
-        medium: halfHourFee,
-        fast: fastestFee,
-      };
-    });
+    const resp = await axios.get<FeeEstimateMempoolSpaceApiResponse>(
+      `https://mempool.space/api/v1/fees/recommended`
+    );
+    const { fastestFee, halfHourFee, hourFee } = resp.data;
+    return {
+      slow: hourFee,
+      medium: halfHourFee,
+      fast: fastestFee,
+    };
   }
 }
 
diff --git a/src/app/query/bitcoin/ordinals/inscriptions.query.ts b/src/app/query/bitcoin/ordinals/inscriptions.query.ts
index 7d91fdfe325..16b05dd3edf 100644
--- a/src/app/query/bitcoin/ordinals/inscriptions.query.ts
+++ b/src/app/query/bitcoin/ordinals/inscriptions.query.ts
@@ -1,13 +1,13 @@
 import { useCallback, useEffect } from 'react';
 
 import { useInfiniteQuery } from '@tanstack/react-query';
+import axios from 'axios';
 
 import { HIRO_INSCRIPTIONS_API_URL } from '@shared/constants';
 import { getTaprootAddress } from '@shared/crypto/bitcoin/bitcoin.utils';
 import { InscriptionResponseItem } from '@shared/models/inscription.model';
 import { ensureArray } from '@shared/utils';
 
-import { wrappedFetch } from '@app/common/api/fetch-wrapper';
 import { createNumArrayOfRange } from '@app/common/utils';
 import { QueryPrefixes } from '@app/query/query-prefixes';
 import { useCurrentAccountNativeSegwitIndexZeroSigner } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks';
@@ -41,11 +41,10 @@ async function fetchInscriptions(addresses: string | string[], offset = 0, limit
   ensureArray(addresses).forEach(address => params.append('address', address));
   params.append('limit', limit.toString());
   params.append('offset', offset.toString());
-
-  const res = await wrappedFetch(`${HIRO_INSCRIPTIONS_API_URL}?${params.toString()}`);
-  if (!res.ok) throw new Error('Error retrieving inscription metadata');
-  const data = await res.json();
-  return data as InscriptionsQueryResponse;
+  const res = await axios.get<InscriptionsQueryResponse>(
+    `${HIRO_INSCRIPTIONS_API_URL}?${params.toString()}`
+  );
+  return res.data;
 }
 
 /**
diff --git a/src/app/query/stacks/fees/fees.query.ts b/src/app/query/stacks/fees/fees.query.ts
index e0e0d540308..6cda35fc37d 100644
--- a/src/app/query/stacks/fees/fees.query.ts
+++ b/src/app/query/stacks/fees/fees.query.ts
@@ -1,8 +1,8 @@
 import { useQuery } from '@tanstack/react-query';
+import axios from 'axios';
 
 import { StacksTxFeeEstimation } from '@shared/models/fees/stacks-fees.model';
 
-import { wrappedFetch } from '@app/common/api/fetch-wrapper';
 import { AppUseQueryConfig } from '@app/query/query-config';
 import { useCurrentNetworkState } from '@app/store/networks/networks.hooks';
 
@@ -11,16 +11,14 @@ import { RateLimiter, useHiroApiRateLimiter } from '../rate-limiter';
 function fetchTransactionFeeEstimation(currentNetwork: any, limiter: RateLimiter) {
   return async (estimatedLen: number | null, transactionPayload: string) => {
     await limiter.removeTokens(1);
-    const resp = await wrappedFetch(currentNetwork.chain.stacks.url + '/v2/fees/transaction', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({
+    const resp = await axios.post<StacksTxFeeEstimation>(
+      currentNetwork.chain.stacks.url + '/v2/fees/transaction',
+      {
         estimated_len: estimatedLen,
         transaction_payload: transactionPayload,
-      }),
-    });
-    const data = await resp.json();
-    return data as StacksTxFeeEstimation;
+      }
+    );
+    return resp.data;
   };
 }
 
diff --git a/src/app/query/stacks/network/network.query.ts b/src/app/query/stacks/network/network.query.ts
index 1e0af93804c..405b54edef4 100644
--- a/src/app/query/stacks/network/network.query.ts
+++ b/src/app/query/stacks/network/network.query.ts
@@ -1,6 +1,5 @@
 import { useQuery } from '@tanstack/react-query';
-
-import { fetchWithTimeout } from '@app/common/api/fetch-wrapper';
+import axios from 'axios';
 
 import { RateLimiter, useHiroApiRateLimiter } from '../rate-limiter';
 
@@ -16,7 +15,8 @@ const networkStatusQueryOptions = {
 
 async function getNetworkStatusFetcher(url: string, limiter: RateLimiter) {
   await limiter.removeTokens(1);
-  return fetchWithTimeout(url, { timeout: 4500 });
+  const resp = await axios.get(url, { timeout: 4500 });
+  return resp.data;
 }
 
 export function useGetNetworkStatus(url: string) {
diff --git a/src/app/query/utils.ts b/src/app/query/utils.ts
deleted file mode 100644
index 02827bf384e..00000000000
--- a/src/app/query/utils.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { wrappedFetch } from '@app/common/api/fetch-wrapper';
-
-interface FetchDataArgs {
-  errorMsg: string;
-  url: string;
-}
-
-export async function fetchData({ errorMsg, url }: FetchDataArgs) {
-  const response = await wrappedFetch(url);
-  if (!response.ok) {
-    throw new Error(errorMsg);
-  }
-  return response.json();
-}
diff --git a/tests/specs/onboarding/onboarding.spec.ts b/tests/specs/onboarding/onboarding.spec.ts
index 0dd20301c1f..036c5bcf109 100644
--- a/tests/specs/onboarding/onboarding.spec.ts
+++ b/tests/specs/onboarding/onboarding.spec.ts
@@ -47,6 +47,7 @@ test.describe('Onboarding an existing user', () => {
     await test.expect(error).toBeVisible();
     await test.expect(signInButton).toBeDisabled();
   });
+
   test('mnemonic key validation: should not show error  for valid mnemonic key words', async ({
     extensionId,
     globalPage,
@@ -56,9 +57,7 @@ test.describe('Onboarding an existing user', () => {
     // enter some key partial
     const validPartialKey = 'shoulder any pencil';
     await onboardingPage.signInMnemonicKey(validPartialKey);
-    const signInSeedError = await onboardingPage.page.getByTestId(
-      OnboardingSelectors.SignInSeedError
-    );
+    const signInSeedError = onboardingPage.page.getByTestId(OnboardingSelectors.SignInSeedError);
     await test.expect(signInSeedError).not.toBeVisible();
   });
 
diff --git a/yarn.lock b/yarn.lock
index 88f14d0b5af..c4bb00e5dc4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2313,10 +2313,10 @@
   resolved "https://registry.yarnpkg.com/@graphql-typed-document-node/core/-/core-3.2.0.tgz#5f3d96ec6b2354ad6d8a28bf216a1d97b5426861"
   integrity sha512-mB9oAsNCm9aM3/SOv4YtBMqZbYj10R7dkq8byBqxGY/ncFwhf2oQzMV+LCRlWoDSEBJ3COiR1yeDvMtsoOsuFQ==
 
-"@hirosystems/token-metadata-api-client@1.1.0":
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/@hirosystems/token-metadata-api-client/-/token-metadata-api-client-1.1.0.tgz#ba61900fef6f9d3348b50540341ed3d3d2960ca5"
-  integrity sha512-1IWfthAvxJzIqpbcBmZlavEVGS/bxh2gOsO+SuSsBOp95CGpKAuTjUv7BS5Y6LBfniKrok/FEKlR+Wh8+zBwhQ==
+"@hirosystems/token-metadata-api-client@1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@hirosystems/token-metadata-api-client/-/token-metadata-api-client-1.2.0.tgz#a10af1061f1556ca454182471f42af76093e1ede"
+  integrity sha512-voIhvGV4yCOEE2BWbQeGV4S395OLTKg5VsV4HJBM4Ekf/hiu5fktF8R0T24JcZc06resf94hH6L9ybiLz6tpGQ==
   dependencies:
     isomorphic-fetch "^3.0.0"
 

From 84a10dcc2d84fc3c1ac17c16dae7e2c67415f03c Mon Sep 17 00:00:00 2001
From: kyranjamie <kyran.burraston@gmail.com>
Date: Mon, 15 Jan 2024 15:21:25 -0300
Subject: [PATCH 5/6] fix: add remote config to recover feature

---
 config/wallet-config.json                            |  3 ++-
 config/wallet-config.schema.json                     |  4 ++++
 src/app/debug.ts                                     |  8 ++++++--
 .../components/taproot-balance-displayer.tsx         |  3 +++
 .../retrieve-taproot-to-native-segwit.tsx            |  4 +---
 .../query/bitcoin/address/utxos-by-address.query.ts  | 12 +++++-------
 .../bitcoin/balance/btc-taproot-balance.hooks.ts     |  1 +
 .../common/remote-config/remote-config.query.ts      |  5 +++++
 8 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/config/wallet-config.json b/config/wallet-config.json
index 93a77535644..59003569c28 100644
--- a/config/wallet-config.json
+++ b/config/wallet-config.json
@@ -88,5 +88,6 @@
     "integrationEnabled": true,
     "mainnetApiUrl": "https://api2.ordinalsbot.com",
     "signetApiUrl": "https://signet.ordinalsbot.com"
-  }
+  },
+  "recoverUninscribedTaprootUtxosFeatureEnabled": false
 }
diff --git a/config/wallet-config.schema.json b/config/wallet-config.schema.json
index 68e506e82d2..07f3a5ae28b 100644
--- a/config/wallet-config.schema.json
+++ b/config/wallet-config.schema.json
@@ -137,6 +137,10 @@
         "mainnetApiUrl": { "type": "string" },
         "signetApiUrl": { "type": "string" }
       }
+    },
+    "recoverUninscribedTaprootUtxosFeatureEnabled": {
+      "type": "boolean",
+      "description": "Determines whether or not the recover uninscribed taproot utxos feature is enabled"
     }
   },
   "$defs": {
diff --git a/src/app/debug.ts b/src/app/debug.ts
index eec3a7a9b07..04ef5d35621 100644
--- a/src/app/debug.ts
+++ b/src/app/debug.ts
@@ -5,6 +5,7 @@ import * as reduxPersist from 'redux-persist';
 import { getLogsFromBrowserStorage } from '@shared/logger-storage';
 import { persistConfig } from '@shared/storage/redux-pesist';
 
+import { queryClient } from './common/persistence';
 import { store } from './store';
 import { stxChainSlice } from './store/chains/stx-chain.slice';
 import { settingsSlice } from './store/settings/settings.slice';
@@ -34,8 +35,11 @@ const debug = {
   resetMessages() {
     store.dispatch(settingsSlice.actions.resetMessages());
   },
-  resetHasApprovedNewBrand() {
-    store.dispatch(settingsSlice.actions.resetHasApprovedNewBrand());
+  clearReactQueryCache() {
+    queryClient.clear();
+  },
+  clearChromeStorage() {
+    chrome.storage.local.clear();
   },
 };
 
diff --git a/src/app/features/collectibles/components/taproot-balance-displayer.tsx b/src/app/features/collectibles/components/taproot-balance-displayer.tsx
index f42caa1882c..5ee6d482e0b 100644
--- a/src/app/features/collectibles/components/taproot-balance-displayer.tsx
+++ b/src/app/features/collectibles/components/taproot-balance-displayer.tsx
@@ -1,6 +1,7 @@
 import { formatMoney } from '@app/common/money/format-money';
 import { Tooltip } from '@app/components/tooltip';
 import { useCurrentTaprootAccountBalance } from '@app/query/bitcoin/balance/btc-taproot-balance.hooks';
+import { useRecoverUninscribedTaprootUtxosFeatureEnabled } from '@app/query/common/remote-config/remote-config.query';
 import { LeatherButton } from '@app/ui/components/button';
 
 const taprootSpendNotSupportedYetMsg = `
@@ -13,6 +14,8 @@ interface TaprootBalanceDisplayerProps {
 }
 export function TaprootBalanceDisplayer({ onSelectRetrieveBalance }: TaprootBalanceDisplayerProps) {
   const balance = useCurrentTaprootAccountBalance();
+  const isRecoverFeatureEnabled = useRecoverUninscribedTaprootUtxosFeatureEnabled();
+  if (!isRecoverFeatureEnabled) return null;
   if (balance.amount.isLessThanOrEqualTo(0)) return null;
   return (
     <Tooltip label={taprootSpendNotSupportedYetMsg}>
diff --git a/src/app/features/retrieve-taproot-to-native-segwit/retrieve-taproot-to-native-segwit.tsx b/src/app/features/retrieve-taproot-to-native-segwit/retrieve-taproot-to-native-segwit.tsx
index 0b30c95d8c5..82b862cf530 100644
--- a/src/app/features/retrieve-taproot-to-native-segwit/retrieve-taproot-to-native-segwit.tsx
+++ b/src/app/features/retrieve-taproot-to-native-segwit/retrieve-taproot-to-native-segwit.tsx
@@ -66,9 +66,7 @@ export function RetrieveTaprootToNativeSegwit() {
               key={utxo.txid}
               title={`Uninscribed UTXO #${i}`}
               value={
-                <ExternalLink
-                  href={`https://ordinals-explorer.generative.xyz/output/${utxo.txid}:${utxo.vout}`}
-                >
+                <ExternalLink href={`https://ordinals.com/output/${utxo.txid}:${utxo.vout}`}>
                   {`${truncateMiddle(utxo.txid, 4)}:${utxo.vout}`} ↗
                 </ExternalLink>
               }
diff --git a/src/app/query/bitcoin/address/utxos-by-address.query.ts b/src/app/query/bitcoin/address/utxos-by-address.query.ts
index 61ac9a4da4d..d20f2d6577d 100644
--- a/src/app/query/bitcoin/address/utxos-by-address.query.ts
+++ b/src/app/query/bitcoin/address/utxos-by-address.query.ts
@@ -31,7 +31,7 @@ export function useGetUtxosByAddressQuery<T extends unknown = UtxoResponseItem[]
   });
 }
 
-const stopSearchAfterNumberAddressesWithoutOrdinals = 20;
+const stopSearchAfterNumberAddressesWithoutUtxos = 20;
 
 /**
  * Returns all utxos for the user's current taproot account. The search for
@@ -48,12 +48,10 @@ export function useTaprootAccountUtxosQuery() {
   return useQuery(
     [QueryPrefixes.TaprootAddressUtxos, currentAccountIndex, network.id],
     async () => {
-      let currentNumberOfAddressesWithoutOrdinals = 0;
+      let currentNumberOfAddressesWithoutUtxos = 0;
       const addressIndexCounter = createCounter(0);
       let foundUnspentTransactions: TaprootUtxo[] = [];
-      while (
-        currentNumberOfAddressesWithoutOrdinals < stopSearchAfterNumberAddressesWithoutOrdinals
-      ) {
+      while (currentNumberOfAddressesWithoutUtxos < stopSearchAfterNumberAddressesWithoutUtxos) {
         const address = getTaprootAddress({
           index: addressIndexCounter.getValue(),
           keychain: account?.keychain,
@@ -63,7 +61,7 @@ export function useTaprootAccountUtxosQuery() {
         const unspentTransactions = await client.addressApi.getUtxosByAddress(address);
 
         if (!hasInscriptions(unspentTransactions)) {
-          currentNumberOfAddressesWithoutOrdinals += 1;
+          currentNumberOfAddressesWithoutUtxos += 1;
           addressIndexCounter.increment();
           continue;
         }
@@ -77,7 +75,7 @@ export function useTaprootAccountUtxosQuery() {
           ...foundUnspentTransactions,
         ];
 
-        currentNumberOfAddressesWithoutOrdinals = 0;
+        currentNumberOfAddressesWithoutUtxos = 0;
         addressIndexCounter.increment();
       }
       return foundUnspentTransactions;
diff --git a/src/app/query/bitcoin/balance/btc-taproot-balance.hooks.ts b/src/app/query/bitcoin/balance/btc-taproot-balance.hooks.ts
index 9453ee5dde2..6210775f3ed 100644
--- a/src/app/query/bitcoin/balance/btc-taproot-balance.hooks.ts
+++ b/src/app/query/bitcoin/balance/btc-taproot-balance.hooks.ts
@@ -11,6 +11,7 @@ import { useGetInscriptionsInfiniteQuery } from '../ordinals/inscriptions.query'
 
 export function useCurrentTaprootAccountUninscribedUtxos() {
   const { data: utxos = [] } = useTaprootAccountUtxosQuery();
+
   const query = useGetInscriptionsInfiniteQuery();
 
   return useMemo(() => {
diff --git a/src/app/query/common/remote-config/remote-config.query.ts b/src/app/query/common/remote-config/remote-config.query.ts
index f17993f0acb..48cac341073 100644
--- a/src/app/query/common/remote-config/remote-config.query.ts
+++ b/src/app/query/common/remote-config/remote-config.query.ts
@@ -128,6 +128,11 @@ export function useConfigBitcoinSendEnabled() {
   });
 }
 
+export function useRecoverUninscribedTaprootUtxosFeatureEnabled() {
+  const config = useRemoteConfig();
+  return get(config, 'recoverUninscribedTaprootUtxosFeatureEnabled', false);
+}
+
 export function useConfigFeeEstimationsMaxEnabled() {
   const config = useRemoteConfig();
   if (isUndefined(config) || isUndefined(config?.feeEstimationsMinMax)) return;

From 7ceabd10961fef1cf3d0b465ef6b411d58ce9fad Mon Sep 17 00:00:00 2001
From: semantic-release-bot <semantic-release-bot@martynus.net>
Date: Tue, 16 Jan 2024 14:32:26 +0000
Subject: [PATCH 6/6] chore(release): 6.23.0

## [6.23.0](https://github.com/leather-wallet/extension/compare/v6.22.0...v6.23.0) (2024-01-16)

### Features

* improve error handling in ledger, surface incorrect app error ([5bff514](https://github.com/leather-wallet/extension/commit/5bff514db064ce145b52d72eadc8bbf6d24e519b))
* prompt user to open the app ([f672bec](https://github.com/leather-wallet/extension/commit/f672becf668fe2f67b2a55c02e3d6dfdad55ccd4))

### Bug Fixes

* add remote config to recover feature ([84a10dc](https://github.com/leather-wallet/extension/commit/84a10dcc2d84fc3c1ac17c16dae7e2c67415f03c))
* duplicate keys error ([77dc018](https://github.com/leather-wallet/extension/commit/77dc018286402c3f2ff7de369d92840d91bba602))
* lint for deps ([42179de](https://github.com/leather-wallet/extension/commit/42179de5e4bf82cfe821bc0e1d080cad7a7e7eed))
* remove fee title in increase fee form ([0de3900](https://github.com/leather-wallet/extension/commit/0de39009995aca8e6b809c759e9005f09b8ff970))
* track error codes ([227f6ee](https://github.com/leather-wallet/extension/commit/227f6ee10b06f420e4061551a284202ff5c059fe))
* **ui:** rebuild tabs with radix primitives, ref [#4309](https://github.com/leather-wallet/extension/issues/4309) ([3b0488e](https://github.com/leather-wallet/extension/commit/3b0488e7ba694216f92013c13e9d7a0cb7880e80))
* unused exports ([3fff31d](https://github.com/leather-wallet/extension/commit/3fff31d783722aa96131897105d18307289b4127))

### Internal

* add improved sentry perf tracking ([8b96e9a](https://github.com/leather-wallet/extension/commit/8b96e9a4fbc7262026bee545186694e2e2565733))
* check instance of error before passing it to checkLockedDeviceError ([e342642](https://github.com/leather-wallet/extension/commit/e3426422e535601d5ae7d38d49b1e8c6f58cc4f5))
* post-release merge back ([2eaa09f](https://github.com/leather-wallet/extension/commit/2eaa09f7797e01f358a78d96f7498851270f1199))
* quit app ourselves instead of prompting user to do it ([35c2ff1](https://github.com/leather-wallet/extension/commit/35c2ff13a87c4b35037fdbadc5e9dd0b4a8cdb15))
* remove unneeded radix styles ([6808536](https://github.com/leather-wallet/extension/commit/6808536ee67df8ba27a55539a00ab83e1548c998))
* reuse getAppAndVersion from bitcoin app instance method ([e894808](https://github.com/leather-wallet/extension/commit/e8948085fa176dde7960212ce97d962604de2128))
* select and dropdown, ref [#4798](https://github.com/leather-wallet/extension/issues/4798) ([a82457d](https://github.com/leather-wallet/extension/commit/a82457d8f04e94b696fe4b54edbd8981f311c353))
* token radii and keyframe, ref [#4637](https://github.com/leather-wallet/extension/issues/4637) ([e67b61d](https://github.com/leather-wallet/extension/commit/e67b61d5c27cd4129415aa63e1fa49e30efdb5ae))
* update panda ([2418a1c](https://github.com/leather-wallet/extension/commit/2418a1c9cb4a1310b588c673a76f7aa549ad35d2))
---
 CHANGELOG.md | 32 ++++++++++++++++++++++++++++++++
 package.json |  2 +-
 2 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index fd797a2a210..76e2d64832d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,35 @@
+## [6.23.0](https://github.com/leather-wallet/extension/compare/v6.22.0...v6.23.0) (2024-01-16)
+
+
+### Features
+
+* improve error handling in ledger, surface incorrect app error ([5bff514](https://github.com/leather-wallet/extension/commit/5bff514db064ce145b52d72eadc8bbf6d24e519b))
+* prompt user to open the app ([f672bec](https://github.com/leather-wallet/extension/commit/f672becf668fe2f67b2a55c02e3d6dfdad55ccd4))
+
+
+### Bug Fixes
+
+* add remote config to recover feature ([84a10dc](https://github.com/leather-wallet/extension/commit/84a10dcc2d84fc3c1ac17c16dae7e2c67415f03c))
+* duplicate keys error ([77dc018](https://github.com/leather-wallet/extension/commit/77dc018286402c3f2ff7de369d92840d91bba602))
+* lint for deps ([42179de](https://github.com/leather-wallet/extension/commit/42179de5e4bf82cfe821bc0e1d080cad7a7e7eed))
+* remove fee title in increase fee form ([0de3900](https://github.com/leather-wallet/extension/commit/0de39009995aca8e6b809c759e9005f09b8ff970))
+* track error codes ([227f6ee](https://github.com/leather-wallet/extension/commit/227f6ee10b06f420e4061551a284202ff5c059fe))
+* **ui:** rebuild tabs with radix primitives, ref [#4309](https://github.com/leather-wallet/extension/issues/4309) ([3b0488e](https://github.com/leather-wallet/extension/commit/3b0488e7ba694216f92013c13e9d7a0cb7880e80))
+* unused exports ([3fff31d](https://github.com/leather-wallet/extension/commit/3fff31d783722aa96131897105d18307289b4127))
+
+
+### Internal
+
+* add improved sentry perf tracking ([8b96e9a](https://github.com/leather-wallet/extension/commit/8b96e9a4fbc7262026bee545186694e2e2565733))
+* check instance of error before passing it to checkLockedDeviceError ([e342642](https://github.com/leather-wallet/extension/commit/e3426422e535601d5ae7d38d49b1e8c6f58cc4f5))
+* post-release merge back ([2eaa09f](https://github.com/leather-wallet/extension/commit/2eaa09f7797e01f358a78d96f7498851270f1199))
+* quit app ourselves instead of prompting user to do it ([35c2ff1](https://github.com/leather-wallet/extension/commit/35c2ff13a87c4b35037fdbadc5e9dd0b4a8cdb15))
+* remove unneeded radix styles ([6808536](https://github.com/leather-wallet/extension/commit/6808536ee67df8ba27a55539a00ab83e1548c998))
+* reuse getAppAndVersion from bitcoin app instance method ([e894808](https://github.com/leather-wallet/extension/commit/e8948085fa176dde7960212ce97d962604de2128))
+* select and dropdown, ref [#4798](https://github.com/leather-wallet/extension/issues/4798) ([a82457d](https://github.com/leather-wallet/extension/commit/a82457d8f04e94b696fe4b54edbd8981f311c353))
+* token radii and keyframe, ref [#4637](https://github.com/leather-wallet/extension/issues/4637) ([e67b61d](https://github.com/leather-wallet/extension/commit/e67b61d5c27cd4129415aa63e1fa49e30efdb5ae))
+* update panda ([2418a1c](https://github.com/leather-wallet/extension/commit/2418a1c9cb4a1310b588c673a76f7aa549ad35d2))
+
 ## [6.22.0](https://github.com/leather-wallet/extension/compare/v6.21.2...v6.22.0) (2024-01-09)
 
 
diff --git a/package.json b/package.json
index df573416dab..4ad53146b72 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "@leather-wallet/extension",
   "description": "Leather is a browser extension for interacting with Stacks apps",
   "private": true,
-  "version": "6.22.0",
+  "version": "6.23.0",
   "author": {
     "name": "Leather Wallet LLC"
   },