diff --git a/package.json b/package.json
index 8bcbf82b9f7..247a2139e42 100644
--- a/package.json
+++ b/package.json
@@ -147,7 +147,6 @@
"@noble/secp256k1": "2.1.0",
"@octokit/types": "12.4.0",
"@radix-ui/colors": "3.0.0",
- "@radix-ui/react-avatar": "1.0.4",
"@radix-ui/react-dialog": "1.0.5",
"@radix-ui/react-dropdown-menu": "2.0.6",
"@radix-ui/react-tabs": "1.0.4",
@@ -255,7 +254,7 @@
"@leather-wallet/panda-preset": "0.2.0",
"@leather-wallet/prettier-config": "0.4.1",
"@leather-wallet/rpc": "1.0.3",
- "@leather-wallet/ui": "1.4.4",
+ "@leather-wallet/ui": "1.4.5",
"@ls-lint/ls-lint": "2.2.3",
"@mdx-js/loader": "3.0.0",
"@pandacss/dev": "0.40.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0c42fb18b51..e40ecab19fc 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -71,9 +71,6 @@ importers:
'@radix-ui/colors':
specifier: 3.0.0
version: 3.0.0
- '@radix-ui/react-avatar':
- specifier: 1.0.4
- version: 1.0.4(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
'@radix-ui/react-dialog':
specifier: 1.0.5
version: 1.0.5(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -391,8 +388,8 @@ importers:
specifier: 1.0.3
version: 1.0.3
'@leather-wallet/ui':
- specifier: 1.4.4
- version: 1.4.4(@babel/core@7.24.4)(@babel/preset-env@7.24.6(@babel/core@7.24.4))(@swc/core@1.4.8)(@types/react-dom@18.3.0)(@types/react@18.3.3)(encoding@0.1.13)(expo-modules-autolinking@1.11.1)(postcss@8.4.38)(ts-node@10.9.2(@swc/core@1.4.8)(@types/node@20.12.12)(typescript@5.4.5))(typescript@5.4.5)
+ specifier: 1.4.5
+ version: 1.4.5(@babel/core@7.24.4)(@babel/preset-env@7.24.6(@babel/core@7.24.4))(@swc/core@1.4.8)(@types/react-dom@18.3.0)(@types/react@18.3.3)(encoding@0.1.13)(expo-modules-autolinking@1.11.1)(postcss@8.4.38)(ts-node@10.9.2(@swc/core@1.4.8)(@types/node@20.12.12)(typescript@5.4.5))(typescript@5.4.5)
'@ls-lint/ls-lint':
specifier: 2.2.3
version: 2.2.3
@@ -2925,8 +2922,8 @@ packages:
'@leather-wallet/tokens@0.5.2':
resolution: {integrity: sha512-+/1dM24D/d7lyW8f4WFDmAgtsRZmUu+PhmFELa2nD4esYcP4zehVNh+rJN+xfW9U6JgSNXuii2xRjdD+XkSGdg==}
- '@leather-wallet/ui@1.4.4':
- resolution: {integrity: sha512-5kP7882wb30PfySleC28fB2+5imJnlXzBcJWm3zOcUdLk1HPHJARCaWs4mBTzZo2Z0eoH2bPMacIjWSeCOODNw==}
+ '@leather-wallet/ui@1.4.5':
+ resolution: {integrity: sha512-wG2RfZslnGJivN++xNkK8SYmGG89cK4QLbSeTCXdj2r+0iCw31PMS6hQJsjtUiOxhNODpHScYPYhh0wpxSpU0w==}
'@leather-wallet/utils@0.8.2':
resolution: {integrity: sha512-P24T7J1JN7k+vXhrLgGi37Pai4XzFBm0IgYfGjg80AQwhFBtCV1KAju6IPEpNcUHggjKIniP5V1kxJtU1rIh4g==}
@@ -12802,6 +12799,7 @@ packages:
react-remove-scroll-bar@2.3.5:
resolution: {integrity: sha512-3cqjOqg6s0XbOjWvmasmqHch+RLxIEk2r/70rzGXuz3iIGQsQheEQyqYCBb5EECoD01Vo2SIbDqW4paLeLTASw==}
engines: {node: '>=10'}
+ deprecated: please update to the following version as this contains a bug (https://github.com/theKashey/react-remove-scroll-bar/issues/57)
peerDependencies:
'@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
react: ^16.8.0 || ^17.0.0 || ^18.0.0
@@ -17203,7 +17201,7 @@ snapshots:
'@babel/runtime': 7.24.4
'@expo/code-signing-certificates': 0.0.5
'@expo/config': 9.0.2
- '@expo/config-plugins': 8.0.4
+ '@expo/config-plugins': 8.0.5
'@expo/devcert': 1.1.2
'@expo/env': 0.3.0
'@expo/image-utils': 0.5.1(encoding@0.1.13)
@@ -17333,7 +17331,7 @@ snapshots:
'@expo/config@9.0.2':
dependencies:
'@babel/code-frame': 7.10.4
- '@expo/config-plugins': 8.0.4
+ '@expo/config-plugins': 8.0.5
'@expo/config-types': 51.0.1
'@expo/json-file': 8.3.3
getenv: 1.0.0
@@ -17465,7 +17463,7 @@ snapshots:
'@expo/prebuild-config@7.0.4(encoding@0.1.13)(expo-modules-autolinking@1.11.1)':
dependencies:
'@expo/config': 9.0.2
- '@expo/config-plugins': 8.0.4
+ '@expo/config-plugins': 8.0.5
'@expo/config-types': 51.0.1
'@expo/image-utils': 0.5.1(encoding@0.1.13)
'@expo/json-file': 8.3.3
@@ -17787,7 +17785,7 @@ snapshots:
'@leather-wallet/tokens@0.5.2': {}
- '@leather-wallet/ui@1.4.4(@babel/core@7.24.4)(@babel/preset-env@7.24.6(@babel/core@7.24.4))(@swc/core@1.4.8)(@types/react-dom@18.3.0)(@types/react@18.3.3)(encoding@0.1.13)(expo-modules-autolinking@1.11.1)(postcss@8.4.38)(ts-node@10.9.2(@swc/core@1.4.8)(@types/node@20.12.12)(typescript@5.4.5))(typescript@5.4.5)':
+ '@leather-wallet/ui@1.4.5(@babel/core@7.24.4)(@babel/preset-env@7.24.6(@babel/core@7.24.4))(@swc/core@1.4.8)(@types/react-dom@18.3.0)(@types/react@18.3.3)(encoding@0.1.13)(expo-modules-autolinking@1.11.1)(postcss@8.4.38)(ts-node@10.9.2(@swc/core@1.4.8)(@types/node@20.12.12)(typescript@5.4.5))(typescript@5.4.5)':
dependencies:
'@expo/vector-icons': 14.0.0
'@leather-wallet/tokens': 0.5.2
@@ -18402,7 +18400,7 @@ snapshots:
'@radix-ui/number@1.0.1':
dependencies:
- '@babel/runtime': 7.23.9
+ '@babel/runtime': 7.24.4
'@radix-ui/primitive@1.0.1':
dependencies:
@@ -18410,7 +18408,7 @@ snapshots:
'@radix-ui/react-accessible-icon@1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
dependencies:
- '@babel/runtime': 7.23.9
+ '@babel/runtime': 7.24.4
'@radix-ui/react-visually-hidden': 1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
react: 18.2.0
react-dom: 18.2.0(react@18.2.0)
@@ -18420,7 +18418,7 @@ snapshots:
'@radix-ui/react-accessible-icon@1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
dependencies:
- '@babel/runtime': 7.23.9
+ '@babel/runtime': 7.24.4
'@radix-ui/react-visually-hidden': 1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
react: 18.3.1
react-dom: 18.3.1(react@18.3.1)
@@ -18682,7 +18680,7 @@ snapshots:
'@radix-ui/react-dismissable-layer@1.0.5(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
dependencies:
- '@babel/runtime': 7.23.9
+ '@babel/runtime': 7.24.4
'@radix-ui/primitive': 1.0.1
'@radix-ui/react-compose-refs': 1.0.1(@types/react@18.3.3)(react@18.2.0)
'@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -18696,7 +18694,7 @@ snapshots:
'@radix-ui/react-dismissable-layer@1.0.5(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
dependencies:
- '@babel/runtime': 7.23.9
+ '@babel/runtime': 7.24.4
'@radix-ui/primitive': 1.0.1
'@radix-ui/react-compose-refs': 1.0.1(@types/react@18.3.3)(react@18.3.1)
'@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -18742,21 +18740,21 @@ snapshots:
'@radix-ui/react-focus-guards@1.0.1(@types/react@18.3.3)(react@18.2.0)':
dependencies:
- '@babel/runtime': 7.23.9
+ '@babel/runtime': 7.24.4
react: 18.2.0
optionalDependencies:
'@types/react': 18.3.3
'@radix-ui/react-focus-guards@1.0.1(@types/react@18.3.3)(react@18.3.1)':
dependencies:
- '@babel/runtime': 7.23.9
+ '@babel/runtime': 7.24.4
react: 18.3.1
optionalDependencies:
'@types/react': 18.3.3
'@radix-ui/react-focus-scope@1.0.4(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
dependencies:
- '@babel/runtime': 7.23.9
+ '@babel/runtime': 7.24.4
'@radix-ui/react-compose-refs': 1.0.1(@types/react@18.3.3)(react@18.2.0)
'@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
'@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.3.3)(react@18.2.0)
@@ -18768,7 +18766,7 @@ snapshots:
'@radix-ui/react-focus-scope@1.0.4(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
dependencies:
- '@babel/runtime': 7.23.9
+ '@babel/runtime': 7.24.4
'@radix-ui/react-compose-refs': 1.0.1(@types/react@18.3.3)(react@18.3.1)
'@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
'@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.3.3)(react@18.3.1)
@@ -18917,7 +18915,7 @@ snapshots:
'@radix-ui/react-popper@1.1.3(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
dependencies:
- '@babel/runtime': 7.23.9
+ '@babel/runtime': 7.24.4
'@floating-ui/react-dom': 2.0.8(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
'@radix-ui/react-arrow': 1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
'@radix-ui/react-compose-refs': 1.0.1(@types/react@18.3.3)(react@18.2.0)
@@ -18936,7 +18934,7 @@ snapshots:
'@radix-ui/react-popper@1.1.3(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
dependencies:
- '@babel/runtime': 7.23.9
+ '@babel/runtime': 7.24.4
'@floating-ui/react-dom': 2.0.8(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
'@radix-ui/react-arrow': 1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
'@radix-ui/react-compose-refs': 1.0.1(@types/react@18.3.3)(react@18.3.1)
@@ -18955,7 +18953,7 @@ snapshots:
'@radix-ui/react-portal@1.0.4(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
dependencies:
- '@babel/runtime': 7.23.9
+ '@babel/runtime': 7.24.4
'@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
react: 18.2.0
react-dom: 18.2.0(react@18.2.0)
@@ -18965,7 +18963,7 @@ snapshots:
'@radix-ui/react-portal@1.0.4(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
dependencies:
- '@babel/runtime': 7.23.9
+ '@babel/runtime': 7.24.4
'@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
react: 18.3.1
react-dom: 18.3.1(react@18.3.1)
@@ -19090,7 +19088,7 @@ snapshots:
'@radix-ui/react-select@2.0.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
dependencies:
- '@babel/runtime': 7.23.9
+ '@babel/runtime': 7.24.4
'@radix-ui/number': 1.0.1
'@radix-ui/primitive': 1.0.1
'@radix-ui/react-collection': 1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -19120,7 +19118,7 @@ snapshots:
'@radix-ui/react-select@2.0.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
dependencies:
- '@babel/runtime': 7.23.9
+ '@babel/runtime': 7.24.4
'@radix-ui/number': 1.0.1
'@radix-ui/primitive': 1.0.1
'@radix-ui/react-collection': 1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -19180,7 +19178,7 @@ snapshots:
'@radix-ui/react-slot@1.0.2(@types/react@18.3.3)(react@18.2.0)':
dependencies:
- '@babel/runtime': 7.23.9
+ '@babel/runtime': 7.24.4
'@radix-ui/react-compose-refs': 1.0.1(@types/react@18.3.3)(react@18.2.0)
react: 18.2.0
optionalDependencies:
@@ -19188,7 +19186,7 @@ snapshots:
'@radix-ui/react-slot@1.0.2(@types/react@18.3.3)(react@18.3.1)':
dependencies:
- '@babel/runtime': 7.23.9
+ '@babel/runtime': 7.24.4
'@radix-ui/react-compose-refs': 1.0.1(@types/react@18.3.3)(react@18.3.1)
react: 18.3.1
optionalDependencies:
@@ -19330,14 +19328,14 @@ snapshots:
'@radix-ui/react-use-callback-ref@1.0.1(@types/react@18.3.3)(react@18.2.0)':
dependencies:
- '@babel/runtime': 7.23.9
+ '@babel/runtime': 7.24.4
react: 18.2.0
optionalDependencies:
'@types/react': 18.3.3
'@radix-ui/react-use-callback-ref@1.0.1(@types/react@18.3.3)(react@18.3.1)':
dependencies:
- '@babel/runtime': 7.23.9
+ '@babel/runtime': 7.24.4
react: 18.3.1
optionalDependencies:
'@types/react': 18.3.3
@@ -19376,28 +19374,28 @@ snapshots:
'@radix-ui/react-use-layout-effect@1.0.1(@types/react@18.3.3)(react@18.2.0)':
dependencies:
- '@babel/runtime': 7.23.9
+ '@babel/runtime': 7.24.4
react: 18.2.0
optionalDependencies:
'@types/react': 18.3.3
'@radix-ui/react-use-layout-effect@1.0.1(@types/react@18.3.3)(react@18.3.1)':
dependencies:
- '@babel/runtime': 7.23.9
+ '@babel/runtime': 7.24.4
react: 18.3.1
optionalDependencies:
'@types/react': 18.3.3
'@radix-ui/react-use-previous@1.0.1(@types/react@18.3.3)(react@18.2.0)':
dependencies:
- '@babel/runtime': 7.23.9
+ '@babel/runtime': 7.24.4
react: 18.2.0
optionalDependencies:
'@types/react': 18.3.3
'@radix-ui/react-use-previous@1.0.1(@types/react@18.3.3)(react@18.3.1)':
dependencies:
- '@babel/runtime': 7.23.9
+ '@babel/runtime': 7.24.4
react: 18.3.1
optionalDependencies:
'@types/react': 18.3.3
@@ -19436,7 +19434,7 @@ snapshots:
'@radix-ui/react-visually-hidden@1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
dependencies:
- '@babel/runtime': 7.23.9
+ '@babel/runtime': 7.24.4
'@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
react: 18.2.0
react-dom: 18.2.0(react@18.2.0)
@@ -19446,7 +19444,7 @@ snapshots:
'@radix-ui/react-visually-hidden@1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
dependencies:
- '@babel/runtime': 7.23.9
+ '@babel/runtime': 7.24.4
'@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
react: 18.3.1
react-dom: 18.3.1(react@18.3.1)
diff --git a/src/app/components/address-displayer/form-address-displayer.tsx b/src/app/components/address-displayer/form-address-displayer.tsx
index e75e82cfa30..fb87a1137ea 100644
--- a/src/app/components/address-displayer/form-address-displayer.tsx
+++ b/src/app/components/address-displayer/form-address-displayer.tsx
@@ -1,7 +1,7 @@
import { SharedComponentsSelectors } from '@tests/selectors/shared-component.selectors';
import { Box, BoxProps } from 'leather-styles/jsx';
-import { AddressDisplayer } from '@app/ui/components/address-displayer/address-displayer';
+import { AddressDisplayer } from '@leather-wallet/ui';
interface FormAddressDisplayerProps extends BoxProps {
address: string;
diff --git a/src/app/components/bitcoin-transaction-item/bitcoin-transaction-inscription-icon.tsx b/src/app/components/bitcoin-transaction-item/bitcoin-transaction-inscription-icon.tsx
index 0b028f51dae..aaa34a0cfd8 100644
--- a/src/app/components/bitcoin-transaction-item/bitcoin-transaction-inscription-icon.tsx
+++ b/src/app/components/bitcoin-transaction-item/bitcoin-transaction-inscription-icon.tsx
@@ -1,8 +1,7 @@
import { Circle } from 'leather-styles/jsx';
import type { Inscription } from '@leather-wallet/models';
-
-import { OrdinalAvatarIcon } from '@app/ui/components/avatar/ordinal-avatar-icon';
+import { OrdinalAvatarIcon } from '@leather-wallet/ui';
export function InscriptionIcon({ inscription, ...rest }: { inscription: Inscription }) {
switch (inscription.mimeType) {
diff --git a/src/app/components/bitcoin-transaction-item/bitcoin-transaction-item.tsx b/src/app/components/bitcoin-transaction-item/bitcoin-transaction-item.tsx
index 59dffbdec23..dbe8ba3a23f 100644
--- a/src/app/components/bitcoin-transaction-item/bitcoin-transaction-item.tsx
+++ b/src/app/components/bitcoin-transaction-item/bitcoin-transaction-item.tsx
@@ -5,7 +5,7 @@ import { HStack } from 'leather-styles/jsx';
import type { BitcoinTx } from '@leather-wallet/models';
import { useInscriptionByOutput } from '@leather-wallet/query';
-import { BulletSeparator, Caption } from '@leather-wallet/ui';
+import { BtcAvatarIcon, BulletSeparator, Caption } from '@leather-wallet/ui';
import { RouteUrls } from '@shared/route-urls';
import { analytics } from '@shared/utils/analytics';
@@ -21,7 +21,6 @@ import { openInNewTab } from '@app/common/utils/open-in-new-tab';
import { IncreaseFeeButton } from '@app/components/stacks-transaction-item/increase-fee-button';
import { TransactionTitle } from '@app/components/transaction/transaction-title';
import { useCurrentAccountNativeSegwitAddressIndexZero } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks';
-import { BtcAvatarIcon } from '@app/ui/components/avatar/btc-avatar-icon';
import { TransactionItemLayout } from '../transaction-item/transaction-item.layout';
import { BitcoinTransactionIcon } from './bitcoin-transaction-icon';
diff --git a/src/app/components/inscription-preview-card/components/inscription-preview.tsx b/src/app/components/inscription-preview-card/components/inscription-preview.tsx
index 1cd3238f473..209d0780d89 100644
--- a/src/app/components/inscription-preview-card/components/inscription-preview.tsx
+++ b/src/app/components/inscription-preview-card/components/inscription-preview.tsx
@@ -1,8 +1,7 @@
import { BoxProps, Flex } from 'leather-styles/jsx';
import type { Inscription } from '@leather-wallet/models';
-
-import { OrdinalAvatarIcon } from '@app/ui/components/avatar/ordinal-avatar-icon';
+import { OrdinalAvatarIcon } from '@leather-wallet/ui';
import { InscriptionImage } from './inscription-image';
import { InscriptionPreviewContainer } from './inscription-preview-container';
diff --git a/src/app/components/loaders/btc-balance-loader.tsx b/src/app/components/loaders/btc-balance-loader.tsx
index 7ded71407d9..df47e89cbb8 100644
--- a/src/app/components/loaders/btc-balance-loader.tsx
+++ b/src/app/components/loaders/btc-balance-loader.tsx
@@ -1,8 +1,8 @@
import type { BtcCryptoAssetBalance } from '@leather-wallet/models';
import { isFetchedWithSuccess, isInitializingData } from '@leather-wallet/query';
+import { BtcAvatarIcon } from '@leather-wallet/ui';
import { useBtcCryptoAssetBalanceNativeSegwit } from '@app/query/bitcoin/balance/btc-balance-native-segwit.hooks';
-import { BtcAvatarIcon } from '@app/ui/components/avatar/btc-avatar-icon';
import { CryptoAssetItemError } from '../crypto-asset-item/crypto-asset-item-error';
import { CryptoAssetItemPlaceholder } from '../crypto-asset-item/crypto-asset-item-placeholder';
diff --git a/src/app/components/loaders/stx-balance-loader.tsx b/src/app/components/loaders/stx-balance-loader.tsx
index 60880b6221d..6204d7967e6 100644
--- a/src/app/components/loaders/stx-balance-loader.tsx
+++ b/src/app/components/loaders/stx-balance-loader.tsx
@@ -5,8 +5,7 @@ import {
isInitializingData,
useStxCryptoAssetBalance,
} from '@leather-wallet/query';
-
-import { StxAvatarIcon } from '@app/ui/components/avatar/stx-avatar-icon';
+import { StxAvatarIcon } from '@leather-wallet/ui';
import { CryptoAssetItemError } from '../crypto-asset-item/crypto-asset-item-error';
import { CryptoAssetItemPlaceholder } from '../crypto-asset-item/crypto-asset-item-placeholder';
diff --git a/src/app/components/stacks-asset-avatar.tsx b/src/app/components/stacks-asset-avatar.tsx
index e7a82df5ef6..18acc76c31b 100644
--- a/src/app/components/stacks-asset-avatar.tsx
+++ b/src/app/components/stacks-asset-avatar.tsx
@@ -1,9 +1,11 @@
import { Box, BoxProps } from 'leather-styles/jsx';
-import { DynamicColorCircle } from '@leather-wallet/ui';
-
-import { Avatar, defaultFallbackDelay } from '@app/ui/components/avatar/avatar';
-import { StxAvatarIcon } from '@app/ui/components/avatar/stx-avatar-icon';
+import {
+ Avatar,
+ DynamicColorCircle,
+ StxAvatarIcon,
+ defaultFallbackDelay,
+} from '@leather-wallet/ui';
interface StacksAssetAvatarProps extends BoxProps {
gradientString?: string;
diff --git a/src/app/components/stacks-transaction-item/stacks-transaction-icon.tsx b/src/app/components/stacks-transaction-item/stacks-transaction-icon.tsx
index 17807341e7d..17500d73689 100644
--- a/src/app/components/stacks-transaction-item/stacks-transaction-icon.tsx
+++ b/src/app/components/stacks-transaction-item/stacks-transaction-icon.tsx
@@ -1,9 +1,7 @@
import { BoxProps } from 'leather-styles/jsx';
import { StacksTx } from '@leather-wallet/models';
-import { DynamicColorCircle, ErrorCircleIcon, ListIcon } from '@leather-wallet/ui';
-
-import { StxAvatarIcon } from '@app/ui/components/avatar/stx-avatar-icon';
+import { DynamicColorCircle, ErrorCircleIcon, ListIcon, StxAvatarIcon } from '@leather-wallet/ui';
import { TransactionIconWrapper } from '../transaction/transaction-icon-wrapper';
import { TransactionTypeIcon } from '../transaction/transaction-type-icon';
diff --git a/src/app/features/activity-list/components/submitted-transaction-list/submitted-transaction-icon.tsx b/src/app/features/activity-list/components/submitted-transaction-list/submitted-transaction-icon.tsx
index d9e10e86313..d6721c28536 100644
--- a/src/app/features/activity-list/components/submitted-transaction-list/submitted-transaction-icon.tsx
+++ b/src/app/features/activity-list/components/submitted-transaction-list/submitted-transaction-icon.tsx
@@ -2,12 +2,11 @@ import { PayloadType, StacksTransaction, addressToString } from '@stacks/transac
import { CircleProps } from 'leather-styles/jsx';
import { StacksTx } from '@leather-wallet/models';
-import { DynamicColorCircle } from '@leather-wallet/ui';
+import { DynamicColorCircle, StxAvatarIcon } from '@leather-wallet/ui';
import { getTxSenderAddress } from '@app/common/transactions/stacks/transaction.utils';
import { TransactionIconWrapper } from '@app/components/transaction/transaction-icon-wrapper';
import { TransactionTypeIcon } from '@app/components/transaction/transaction-type-icon';
-import { StxAvatarIcon } from '@app/ui/components/avatar/stx-avatar-icon';
interface SubmittedTransactionIconProps extends CircleProps {
transaction: StacksTransaction;
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 7be01e8bd78..99d39879976 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
@@ -2,8 +2,9 @@ import { type ReactNode } from 'react';
import { Circle } from 'leather-styles/jsx';
+import { StxAvatarIcon } from '@leather-wallet/ui';
+
import { TransactionTypeIconWrapper } from '@app/components/transaction/transaction-type-icon-wrapper';
-import { StxAvatarIcon } from '@app/ui/components/avatar/stx-avatar-icon';
interface TxTransferIconWrapperProps {
icon: ReactNode;
diff --git a/src/app/features/asset-list/asset-list.tsx b/src/app/features/asset-list/asset-list.tsx
index ff8c8b188e5..5e07f7a9a42 100644
--- a/src/app/features/asset-list/asset-list.tsx
+++ b/src/app/features/asset-list/asset-list.tsx
@@ -1,5 +1,7 @@
import { Stack } from 'leather-styles/jsx';
+import { BtcAvatarIcon, StxAvatarIcon } from '@leather-wallet/ui';
+
import { useWalletType } from '@app/common/use-wallet-type';
import { BitcoinContractEntryPoint } from '@app/components/bitcoin-contract-entry-point/bitcoin-contract-entry-point';
import {
@@ -20,8 +22,6 @@ import { Src20TokenAssetList } from '@app/features/asset-list/bitcoin/src20-toke
import { Stx20TokenAssetList } from '@app/features/asset-list/stacks/stx20-token-asset-list/stx20-token-asset-list';
import { StxCryptoAssetItem } from '@app/features/asset-list/stacks/stx-crypo-asset-item/stx-crypto-asset-item';
import { useCurrentNetwork } from '@app/store/networks/networks.selectors';
-import { BtcAvatarIcon } from '@app/ui/components/avatar/btc-avatar-icon';
-import { StxAvatarIcon } from '@app/ui/components/avatar/stx-avatar-icon';
import { ConnectLedgerAssetItemFallback } from './_components/connect-ledger-asset-item-fallback';
import { BtcCryptoAssetItem } from './bitcoin/btc-crypto-asset-item/btc-crypto-asset-item';
diff --git a/src/app/features/asset-list/bitcoin/brc20-token-asset-list/brc20-token-asset-list.tsx b/src/app/features/asset-list/bitcoin/brc20-token-asset-list/brc20-token-asset-list.tsx
index d98229891dc..467c1637643 100644
--- a/src/app/features/asset-list/bitcoin/brc20-token-asset-list/brc20-token-asset-list.tsx
+++ b/src/app/features/asset-list/bitcoin/brc20-token-asset-list/brc20-token-asset-list.tsx
@@ -4,13 +4,13 @@ import { CryptoAssetSelectors } from '@tests/selectors/crypto-asset.selectors';
import { Stack } from 'leather-styles/jsx';
import type { Brc20CryptoAssetInfo, CryptoAssetBalance, MarketData } from '@leather-wallet/models';
+import { Brc20AvatarIcon } from '@leather-wallet/ui';
import { RouteUrls } from '@shared/route-urls';
import { CryptoAssetItemLayout } from '@app/components/crypto-asset-item/crypto-asset-item.layout';
import type { AssetListVariant } from '@app/features/asset-list/asset-list';
import { useCurrentBtcCryptoAssetBalanceNativeSegwit } from '@app/query/bitcoin/balance/btc-balance-native-segwit.hooks';
-import { Brc20AvatarIcon } from '@app/ui/components/avatar/brc20-avatar-icon';
interface Brc20TokenAssetDetails {
balance: CryptoAssetBalance;
diff --git a/src/app/features/asset-list/bitcoin/btc-crypto-asset-item/btc-crypto-asset-item.tsx b/src/app/features/asset-list/bitcoin/btc-crypto-asset-item/btc-crypto-asset-item.tsx
index e963d8b9069..e6ab0497b78 100644
--- a/src/app/features/asset-list/bitcoin/btc-crypto-asset-item/btc-crypto-asset-item.tsx
+++ b/src/app/features/asset-list/bitcoin/btc-crypto-asset-item/btc-crypto-asset-item.tsx
@@ -1,9 +1,9 @@
import type { BtcCryptoAssetBalance } from '@leather-wallet/models';
import { useCryptoCurrencyMarketDataMeanAverage } from '@leather-wallet/query';
+import { BtcAvatarIcon } from '@leather-wallet/ui';
import { baseCurrencyAmountInQuote, i18nFormatCurrency } from '@leather-wallet/utils';
import { CryptoAssetItemLayout } from '@app/components/crypto-asset-item/crypto-asset-item.layout';
-import { BtcAvatarIcon } from '@app/ui/components/avatar/btc-avatar-icon';
interface BtcCryptoAssetItemProps {
balance: BtcCryptoAssetBalance;
diff --git a/src/app/features/asset-list/bitcoin/runes-asset-list/runes-asset-list.tsx b/src/app/features/asset-list/bitcoin/runes-asset-list/runes-asset-list.tsx
index ddebdbb22f6..c6c37f40298 100644
--- a/src/app/features/asset-list/bitcoin/runes-asset-list/runes-asset-list.tsx
+++ b/src/app/features/asset-list/bitcoin/runes-asset-list/runes-asset-list.tsx
@@ -1,8 +1,8 @@
import type { CryptoAssetBalance, RuneCryptoAssetInfo } from '@leather-wallet/models';
+import { RunesAvatarIcon } from '@leather-wallet/ui';
import { convertAmountToBaseUnit, createMoneyFromDecimal } from '@leather-wallet/utils';
import { CryptoAssetItemLayout } from '@app/components/crypto-asset-item/crypto-asset-item.layout';
-import { RunesAvatarIcon } from '@app/ui/components/avatar/runes-avatar-icon';
interface RuneTokenAssetDetails {
balance: CryptoAssetBalance;
diff --git a/src/app/features/asset-list/bitcoin/src20-token-asset-list/src20-token-asset-list.tsx b/src/app/features/asset-list/bitcoin/src20-token-asset-list/src20-token-asset-list.tsx
index 3a5b0788716..8841287fbe3 100644
--- a/src/app/features/asset-list/bitcoin/src20-token-asset-list/src20-token-asset-list.tsx
+++ b/src/app/features/asset-list/bitcoin/src20-token-asset-list/src20-token-asset-list.tsx
@@ -1,6 +1,7 @@
+import { Src20AvatarIcon } from '@leather-wallet/ui';
+
import { CryptoAssetItemLayout } from '@app/components/crypto-asset-item/crypto-asset-item.layout';
import type { Src20TokenAssetDetails } from '@app/components/loaders/src20-tokens-loader';
-import { Src20AvatarIcon } from '@app/ui/components/avatar/src20-avatar-icon';
interface Src20TokenAssetListProps {
tokens: Src20TokenAssetDetails[];
diff --git a/src/app/features/asset-list/stacks/stx-crypo-asset-item/stx-crypto-asset-item.tsx b/src/app/features/asset-list/stacks/stx-crypo-asset-item/stx-crypto-asset-item.tsx
index 6c47bddf95e..e84d711c1c8 100644
--- a/src/app/features/asset-list/stacks/stx-crypo-asset-item/stx-crypto-asset-item.tsx
+++ b/src/app/features/asset-list/stacks/stx-crypo-asset-item/stx-crypto-asset-item.tsx
@@ -2,7 +2,7 @@ import { styled } from 'leather-styles/jsx';
import type { StxCryptoAssetBalance } from '@leather-wallet/models';
import { useCryptoCurrencyMarketDataMeanAverage } from '@leather-wallet/query';
-import { Caption } from '@leather-wallet/ui';
+import { Caption, StxAvatarIcon } from '@leather-wallet/ui';
import {
baseCurrencyAmountInQuote,
formatMoneyWithoutSymbol,
@@ -10,7 +10,6 @@ import {
} from '@leather-wallet/utils';
import { CryptoAssetItemLayout } from '@app/components/crypto-asset-item/crypto-asset-item.layout';
-import { StxAvatarIcon } from '@app/ui/components/avatar/stx-avatar-icon';
interface StxCryptoAssetItemProps {
balance: StxCryptoAssetBalance;
diff --git a/src/app/features/bitcoin-choose-fee/components/choose-fee-tabs.tsx b/src/app/features/bitcoin-choose-fee/components/choose-fee-tabs.tsx
index 396cb9bd277..0a2f4e463c9 100644
--- a/src/app/features/bitcoin-choose-fee/components/choose-fee-tabs.tsx
+++ b/src/app/features/bitcoin-choose-fee/components/choose-fee-tabs.tsx
@@ -1,8 +1,9 @@
import { Suspense } from 'react';
-import { Tabs } from '@leather-wallet/ui';
import { Box, Stack, StackProps } from 'leather-styles/jsx';
+import { Tabs } from '@leather-wallet/ui';
+
import { analytics } from '@shared/utils/analytics';
import { LoadingSpinner } from '@app/components/loading-spinner';
diff --git a/src/app/features/collectibles/components/bitcoin/inscription-text.tsx b/src/app/features/collectibles/components/bitcoin/inscription-text.tsx
index 15fc469ba58..3c571b9ed4f 100644
--- a/src/app/features/collectibles/components/bitcoin/inscription-text.tsx
+++ b/src/app/features/collectibles/components/bitcoin/inscription-text.tsx
@@ -1,7 +1,7 @@
import { useInscriptionTextContentQuery } from '@leather-wallet/query';
+import { OrdinalAvatarIcon } from '@leather-wallet/ui';
import { parseJson } from '@app/components/json';
-import { OrdinalAvatarIcon } from '@app/ui/components/avatar/ordinal-avatar-icon';
import { CollectibleText } from '../_collectible-types/collectible-text';
diff --git a/src/app/features/collectibles/components/bitcoin/inscription.tsx b/src/app/features/collectibles/components/bitcoin/inscription.tsx
index fd5db492fbc..7908356dd73 100644
--- a/src/app/features/collectibles/components/bitcoin/inscription.tsx
+++ b/src/app/features/collectibles/components/bitcoin/inscription.tsx
@@ -1,12 +1,12 @@
import { useLocation, useNavigate } from 'react-router-dom';
import { type Inscription } from '@leather-wallet/models';
+import { OrdinalAvatarIcon } from '@leather-wallet/ui';
import { ORD_IO_URL } from '@shared/constants';
import { RouteUrls } from '@shared/route-urls';
import { openInNewTab } from '@app/common/utils/open-in-new-tab';
-import { OrdinalAvatarIcon } from '@app/ui/components/avatar/ordinal-avatar-icon';
import { CollectibleAudio } from '../_collectible-types/collectible-audio';
import { CollectibleIframe } from '../_collectible-types/collectible-iframe';
diff --git a/src/app/features/collectibles/components/stacks/stacks-bns-name.tsx b/src/app/features/collectibles/components/stacks/stacks-bns-name.tsx
index 0fddbfc96c0..ec45d4bd2de 100644
--- a/src/app/features/collectibles/components/stacks/stacks-bns-name.tsx
+++ b/src/app/features/collectibles/components/stacks/stacks-bns-name.tsx
@@ -1,6 +1,6 @@
import StacksNftBns from '@assets/images/stacks-nft-bns.png';
-import { StxAvatarIcon } from '@app/ui/components/avatar/stx-avatar-icon';
+import { StxAvatarIcon } from '@leather-wallet/ui';
import { CollectibleItemLayout } from '../collectible-item.layout';
diff --git a/src/app/features/collectibles/components/stacks/stacks-non-fungible-tokens.tsx b/src/app/features/collectibles/components/stacks/stacks-non-fungible-tokens.tsx
index 1bd48e3aabc..6e42a2f3c86 100644
--- a/src/app/features/collectibles/components/stacks/stacks-non-fungible-tokens.tsx
+++ b/src/app/features/collectibles/components/stacks/stacks-non-fungible-tokens.tsx
@@ -1,8 +1,8 @@
import { Metadata as StacksNftMetadata } from '@hirosystems/token-metadata-api-client';
-import { isValidUrl } from '@shared/utils/validate-url';
+import { StxAvatarIcon } from '@leather-wallet/ui';
-import { StxAvatarIcon } from '@app/ui/components/avatar/stx-avatar-icon';
+import { isValidUrl } from '@shared/utils/validate-url';
import { CollectibleImage } from '../_collectible-types/collectible-image';
import { ImageUnavailable } from '../image-unavailable';
diff --git a/src/app/features/psbt-signer/components/psbt-inputs-outputs-totals/components/psbt-address-total-item.tsx b/src/app/features/psbt-signer/components/psbt-inputs-outputs-totals/components/psbt-address-total-item.tsx
index 02687975058..c279b592a08 100644
--- a/src/app/features/psbt-signer/components/psbt-inputs-outputs-totals/components/psbt-address-total-item.tsx
+++ b/src/app/features/psbt-signer/components/psbt-inputs-outputs-totals/components/psbt-address-total-item.tsx
@@ -1,9 +1,8 @@
import { Box, HStack, styled } from 'leather-styles/jsx';
-import { CopyIcon, Flag, Link } from '@leather-wallet/ui';
+import { BtcAvatarIcon, CopyIcon, Flag, Link } from '@leather-wallet/ui';
import { useClipboard } from '@app/common/hooks/use-copy-to-clipboard';
-import { BtcAvatarIcon } from '@app/ui/components/avatar/btc-avatar-icon';
import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip';
interface PsbtAddressTotalItemProps {
diff --git a/src/app/features/psbt-signer/components/psbt-inputs-outputs-totals/components/psbt-inscription.tsx b/src/app/features/psbt-signer/components/psbt-inputs-outputs-totals/components/psbt-inscription.tsx
index c2c500d71b0..f1757635ae7 100644
--- a/src/app/features/psbt-signer/components/psbt-inputs-outputs-totals/components/psbt-inscription.tsx
+++ b/src/app/features/psbt-signer/components/psbt-inputs-outputs-totals/components/psbt-inscription.tsx
@@ -1,10 +1,10 @@
import type { Inscription } from '@leather-wallet/models';
import { useInscription } from '@leather-wallet/query';
+import { OrdinalAvatarIcon } from '@leather-wallet/ui';
import { isUndefined } from '@leather-wallet/utils';
import { openInNewTab } from '@app/common/utils/open-in-new-tab';
import { InscriptionPreview } from '@app/components/inscription-preview-card/components/inscription-preview';
-import { OrdinalAvatarIcon } from '@app/ui/components/avatar/ordinal-avatar-icon';
import { PsbtAddressTotalItem } from './psbt-address-total-item';
diff --git a/src/app/features/retrieve-taproot-to-native-segwit/components/retrieve-taproot-to-native-segwit.layout.tsx b/src/app/features/retrieve-taproot-to-native-segwit/components/retrieve-taproot-to-native-segwit.layout.tsx
index e59409a342e..84cef18e895 100644
--- a/src/app/features/retrieve-taproot-to-native-segwit/components/retrieve-taproot-to-native-segwit.layout.tsx
+++ b/src/app/features/retrieve-taproot-to-native-segwit/components/retrieve-taproot-to-native-segwit.layout.tsx
@@ -1,8 +1,7 @@
import { Flex, styled } from 'leather-styles/jsx';
-import { Button, Callout } from '@leather-wallet/ui';
+import { BtcAvatarIcon, Button, Callout } from '@leather-wallet/ui';
-import { BtcAvatarIcon } from '@app/ui/components/avatar/btc-avatar-icon';
import { Dialog } from '@app/ui/components/containers/dialog/dialog';
import { Footer } from '@app/ui/components/containers/footers/footer';
import { DialogHeader } from '@app/ui/components/containers/headers/dialog-header';
diff --git a/src/app/pages/bitcoin-contract-request/components/bitcoin-contract-offer/bitcoin-contract-lock-amount.tsx b/src/app/pages/bitcoin-contract-request/components/bitcoin-contract-offer/bitcoin-contract-lock-amount.tsx
index 2d67e1e612c..f2b46fcdb7e 100644
--- a/src/app/pages/bitcoin-contract-request/components/bitcoin-contract-offer/bitcoin-contract-lock-amount.tsx
+++ b/src/app/pages/bitcoin-contract-request/components/bitcoin-contract-offer/bitcoin-contract-lock-amount.tsx
@@ -4,10 +4,9 @@ import { BitcoinContractRequestSelectors } from '@tests/selectors/bitcoin-contra
import { HStack, styled } from 'leather-styles/jsx';
import { token } from 'leather-styles/tokens';
-import { ArrowUpIcon, CopyIcon, Flag, Link } from '@leather-wallet/ui';
+import { ArrowUpIcon, BtcAvatarIcon, CopyIcon, Flag, Link } from '@leather-wallet/ui';
import { useClipboard } from '@app/common/hooks/use-copy-to-clipboard';
-import { BtcAvatarIcon } from '@app/ui/components/avatar/btc-avatar-icon';
import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip';
interface BitcoinContractLockAmountProps {
diff --git a/src/app/pages/fund/components/icon-components.tsx b/src/app/pages/fund/components/icon-components.tsx
index c8cf0505a03..1473a298a4f 100644
--- a/src/app/pages/fund/components/icon-components.tsx
+++ b/src/app/pages/fund/components/icon-components.tsx
@@ -1,8 +1,7 @@
import ReceiveFundsEllipses from '@assets/images/fund/receive-funds-ellipses.png';
import { Box } from 'leather-styles/jsx';
-import { BtcAvatarIcon } from '@app/ui/components/avatar/btc-avatar-icon';
-import { StxAvatarIcon } from '@app/ui/components/avatar/stx-avatar-icon';
+import { BtcAvatarIcon, StxAvatarIcon } from '@leather-wallet/ui';
export function StacksIconComponent() {
return (
diff --git a/src/app/pages/home/components/home-tabs.tsx b/src/app/pages/home/components/home-tabs.tsx
index a67490a825f..a0ba8b8d8fd 100644
--- a/src/app/pages/home/components/home-tabs.tsx
+++ b/src/app/pages/home/components/home-tabs.tsx
@@ -1,9 +1,10 @@
import { Suspense } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
-import { Tabs } from '@leather-wallet/ui';
import { Box, Stack } from 'leather-styles/jsx';
+import { Tabs } from '@leather-wallet/ui';
+
import { RouteUrls } from '@shared/route-urls';
import { LoadingSpinner } from '@app/components/loading-spinner';
diff --git a/src/app/pages/receive/components/receive-collectibles.tsx b/src/app/pages/receive/components/receive-collectibles.tsx
index f21c7c7a438..6efe5e51cd5 100644
--- a/src/app/pages/receive/components/receive-collectibles.tsx
+++ b/src/app/pages/receive/components/receive-collectibles.tsx
@@ -2,11 +2,11 @@ import { HomePageSelectors } from '@tests/selectors/home.selectors';
import { css } from 'leather-styles/css';
import { Stack } from 'leather-styles/jsx';
+import { OrdinalAvatarIcon, StxAvatarIcon } from '@leather-wallet/ui';
+
import { copyToClipboard } from '@app/common/utils/copy-to-clipboard';
import { useToast } from '@app/features/toasts/use-toast';
-import { OrdinalAvatarIcon } from '@app/ui/components/avatar/ordinal-avatar-icon';
import { StampsAvatarIcon } from '@app/ui/components/avatar/stamps-avatar-icon';
-import { StxAvatarIcon } from '@app/ui/components/avatar/stx-avatar-icon';
import { receiveTabStyle } from '../receive-dialog';
import { ReceiveItem } from './receive-item';
diff --git a/src/app/pages/receive/components/receive-tokens.layout.tsx b/src/app/pages/receive/components/receive-tokens.layout.tsx
index ba3a5449da6..6b44fe8c66e 100644
--- a/src/app/pages/receive/components/receive-tokens.layout.tsx
+++ b/src/app/pages/receive/components/receive-tokens.layout.tsx
@@ -5,11 +5,10 @@ import { SharedComponentsSelectors } from '@tests/selectors/shared-component.sel
import { Box, Flex, styled } from 'leather-styles/jsx';
import { token } from 'leather-styles/tokens';
-import { Button } from '@leather-wallet/ui';
+import { AddressDisplayer, Button } from '@leather-wallet/ui';
import { useLocationState } from '@app/common/hooks/use-location-state';
import { useBackgroundLocationRedirect } from '@app/routes/hooks/use-background-location-redirect';
-import { AddressDisplayer } from '@app/ui/components/address-displayer/address-displayer';
import { Dialog } from '@app/ui/components/containers/dialog/dialog';
import { Footer } from '@app/ui/components/containers/footers/footer';
import { Header } from '@app/ui/components/containers/headers/header';
diff --git a/src/app/pages/receive/components/receive-tokens.tsx b/src/app/pages/receive/components/receive-tokens.tsx
index 595a06a32fd..f5f33e1cd78 100644
--- a/src/app/pages/receive/components/receive-tokens.tsx
+++ b/src/app/pages/receive/components/receive-tokens.tsx
@@ -5,17 +5,20 @@ import { css } from 'leather-styles/css';
import { Stack } from 'leather-styles/jsx';
import { useAlexSwappableAssets } from '@leather-wallet/query';
+import {
+ Avatar,
+ Brc20AvatarIcon,
+ BtcAvatarIcon,
+ RunesAvatarIcon,
+ Src20AvatarIcon,
+ StxAvatarIcon,
+ defaultFallbackDelay,
+} from '@leather-wallet/ui';
import { copyToClipboard } from '@app/common/utils/copy-to-clipboard';
import { useToast } from '@app/features/toasts/use-toast';
import { useConfigRunesEnabled } from '@app/query/common/remote-config/remote-config.query';
import { useCurrentNetwork } from '@app/store/networks/networks.selectors';
-import { Avatar, defaultFallbackDelay } from '@app/ui/components/avatar/avatar';
-import { Brc20AvatarIcon } from '@app/ui/components/avatar/brc20-avatar-icon';
-import { BtcAvatarIcon } from '@app/ui/components/avatar/btc-avatar-icon';
-import { RunesAvatarIcon } from '@app/ui/components/avatar/runes-avatar-icon';
-import { Src20AvatarIcon } from '@app/ui/components/avatar/src20-avatar-icon';
-import { StxAvatarIcon } from '@app/ui/components/avatar/stx-avatar-icon';
import { receiveTabStyle } from '../receive-dialog';
import { ReceiveItem } from './receive-item';
diff --git a/src/app/pages/receive/receive-dialog.tsx b/src/app/pages/receive/receive-dialog.tsx
index ab6e67240b2..02c4c97ced6 100644
--- a/src/app/pages/receive/receive-dialog.tsx
+++ b/src/app/pages/receive/receive-dialog.tsx
@@ -1,10 +1,11 @@
import { useLocation, useNavigate } from 'react-router-dom';
-import { Tabs } from '@leather-wallet/ui';
import { HomePageSelectors } from '@tests/selectors/home.selectors';
import { Box } from 'leather-styles/jsx';
import get from 'lodash.get';
+import { Tabs } from '@leather-wallet/ui';
+
import { RouteUrls } from '@shared/route-urls';
import { analytics } from '@shared/utils/analytics';
diff --git a/src/app/pages/send/ordinal-inscription/send-inscription-form.tsx b/src/app/pages/send/ordinal-inscription/send-inscription-form.tsx
index baae40ce42c..cd2b9cff00b 100644
--- a/src/app/pages/send/ordinal-inscription/send-inscription-form.tsx
+++ b/src/app/pages/send/ordinal-inscription/send-inscription-form.tsx
@@ -3,14 +3,13 @@ import { useNavigate } from 'react-router-dom';
import { Form, Formik } from 'formik';
import { Box, Flex } from 'leather-styles/jsx';
-import { Button } from '@leather-wallet/ui';
+import { Button, OrdinalAvatarIcon } from '@leather-wallet/ui';
import { RouteUrls } from '@shared/route-urls';
import { ErrorLabel } from '@app/components/error-label';
import { InscriptionPreview } from '@app/components/inscription-preview-card/components/inscription-preview';
import { InscriptionPreviewCard } from '@app/components/inscription-preview-card/inscription-preview-card';
-import { OrdinalAvatarIcon } from '@app/ui/components/avatar/ordinal-avatar-icon';
import { Dialog } from '@app/ui/components/containers/dialog/dialog';
import { Footer } from '@app/ui/components/containers/footers/footer';
import { DialogHeader } from '@app/ui/components/containers/headers/dialog-header';
diff --git a/src/app/pages/send/send-crypto-asset-form/form/brc20/brc20-send-form.tsx b/src/app/pages/send/send-crypto-asset-form/form/brc20/brc20-send-form.tsx
index 563c8ab2d41..0c7847d6e74 100644
--- a/src/app/pages/send/send-crypto-asset-form/form/brc20/brc20-send-form.tsx
+++ b/src/app/pages/send/send-crypto-asset-form/form/brc20/brc20-send-form.tsx
@@ -6,11 +6,10 @@ import { Box, styled } from 'leather-styles/jsx';
import get from 'lodash.get';
import type { MarketData, Money } from '@leather-wallet/models';
-import { Button, Callout, Link } from '@leather-wallet/ui';
+import { Brc20AvatarIcon, Button, Callout, Link } from '@leather-wallet/ui';
import { convertAmountToBaseUnit, formatMoney } from '@leather-wallet/utils';
import { openInNewTab } from '@app/common/utils/open-in-new-tab';
-import { Brc20AvatarIcon } from '@app/ui/components/avatar/brc20-avatar-icon';
import { AvailableBalance } from '@app/ui/components/containers/footers/available-balance';
import { Footer } from '@app/ui/components/containers/footers/footer';
import { Card } from '@app/ui/layout/card/card';
diff --git a/src/app/pages/send/send-crypto-asset-form/form/btc/btc-send-form.tsx b/src/app/pages/send/send-crypto-asset-form/form/btc/btc-send-form.tsx
index 22357dace80..eb79ad31167 100644
--- a/src/app/pages/send/send-crypto-asset-form/form/btc/btc-send-form.tsx
+++ b/src/app/pages/send/send-crypto-asset-form/form/btc/btc-send-form.tsx
@@ -1,15 +1,13 @@
import { Outlet } from 'react-router-dom';
-import { SendCryptoAssetSelectors } from '@tests/selectors/send.selectors';
-import { Form, Formik } from 'formik';
-import { Box } from 'leather-styles/jsx';
-
import type { CryptoCurrencies } from '@leather-wallet/models';
import { useCryptoCurrencyMarketDataMeanAverage } from '@leather-wallet/query';
-import { Button, Callout, Link } from '@leather-wallet/ui';
+import { BtcAvatarIcon, Button, Callout, Link } from '@leather-wallet/ui';
import { formatMoney } from '@leather-wallet/utils';
+import { SendCryptoAssetSelectors } from '@tests/selectors/send.selectors';
+import { Form, Formik } from 'formik';
+import { Box } from 'leather-styles/jsx';
-import { BtcAvatarIcon } from '@app/ui/components/avatar/btc-avatar-icon';
import { AvailableBalance } from '@app/ui/components/containers/footers/available-balance';
import { Footer } from '@app/ui/components/containers/footers/footer';
import { Card } from '@app/ui/layout/card/card';
diff --git a/src/app/pages/send/send-crypto-asset-form/form/sip10/sip10-token-send-form-container.tsx b/src/app/pages/send/send-crypto-asset-form/form/sip10/sip10-token-send-form-container.tsx
index 657596792cc..e57528a5dc0 100644
--- a/src/app/pages/send/send-crypto-asset-form/form/sip10/sip10-token-send-form-container.tsx
+++ b/src/app/pages/send/send-crypto-asset-form/form/sip10/sip10-token-send-form-container.tsx
@@ -1,7 +1,7 @@
import type { CryptoAssetBalance, MarketData, Sip10CryptoAssetInfo } from '@leather-wallet/models';
+import { StxAvatarIcon } from '@leather-wallet/ui';
import { StacksAssetAvatar } from '@app/components/stacks-asset-avatar';
-import { StxAvatarIcon } from '@app/ui/components/avatar/stx-avatar-icon';
import { AmountField } from '../../components/amount-field';
import { SelectedAssetField } from '../../components/selected-asset-field';
diff --git a/src/app/pages/send/send-crypto-asset-form/form/stx/stx-send-form.tsx b/src/app/pages/send/send-crypto-asset-form/form/stx/stx-send-form.tsx
index bbaea3b6cfa..5ae1cf4ec87 100644
--- a/src/app/pages/send/send-crypto-asset-form/form/stx/stx-send-form.tsx
+++ b/src/app/pages/send/send-crypto-asset-form/form/stx/stx-send-form.tsx
@@ -1,7 +1,6 @@
import type { CryptoCurrencies } from '@leather-wallet/models';
import { useCryptoCurrencyMarketDataMeanAverage } from '@leather-wallet/query';
-
-import { StxAvatarIcon } from '@app/ui/components/avatar/stx-avatar-icon';
+import { StxAvatarIcon } from '@leather-wallet/ui';
import { AmountField } from '../../components/amount-field';
import { SelectedAssetField } from '../../components/selected-asset-field';
diff --git a/src/app/pages/swap/components/swap-asset-dialog/components/swap-asset-item.tsx b/src/app/pages/swap/components/swap-asset-dialog/components/swap-asset-item.tsx
index 1ca60d87d8e..656d4d42947 100644
--- a/src/app/pages/swap/components/swap-asset-dialog/components/swap-asset-item.tsx
+++ b/src/app/pages/swap/components/swap-asset-dialog/components/swap-asset-item.tsx
@@ -1,11 +1,16 @@
import { SwapSelectors } from '@tests/selectors/swap.selectors';
import { type SwapAsset, isFtAsset, useGetFungibleTokenMetadataQuery } from '@leather-wallet/query';
-import { ItemLayout, Pressable } from '@leather-wallet/ui';
+import {
+ Avatar,
+ ItemLayout,
+ Pressable,
+ defaultFallbackDelay,
+ getAvatarFallback,
+} from '@leather-wallet/ui';
import { formatMoneyWithoutSymbol } from '@leather-wallet/utils';
import { convertAssetBalanceToFiat } from '@app/common/asset-utils';
-import { Avatar, defaultFallbackDelay, getAvatarFallback } from '@app/ui/components/avatar/avatar';
interface SwapAssetItemProps {
asset: SwapAsset;
diff --git a/src/app/pages/swap/components/swap-asset-select/components/select-asset-trigger-button.tsx b/src/app/pages/swap/components/swap-asset-select/components/select-asset-trigger-button.tsx
index 621c6f19fc3..f60651a301f 100644
--- a/src/app/pages/swap/components/swap-asset-select/components/select-asset-trigger-button.tsx
+++ b/src/app/pages/swap/components/swap-asset-select/components/select-asset-trigger-button.tsx
@@ -2,9 +2,13 @@ import { SwapSelectors } from '@tests/selectors/swap.selectors';
import { useField } from 'formik';
import { HStack, styled } from 'leather-styles/jsx';
-import { Button, ChevronDownIcon } from '@leather-wallet/ui';
-
-import { Avatar, defaultFallbackDelay, getAvatarFallback } from '@app/ui/components/avatar/avatar';
+import {
+ Avatar,
+ Button,
+ ChevronDownIcon,
+ defaultFallbackDelay,
+ getAvatarFallback,
+} from '@leather-wallet/ui';
interface SelectAssetTriggerButtonProps {
icon?: string;
diff --git a/src/app/ui/components/address-displayer/address-displayer.layout.tsx b/src/app/ui/components/address-displayer/address-displayer.layout.tsx
deleted file mode 100644
index 151842aa23a..00000000000
--- a/src/app/ui/components/address-displayer/address-displayer.layout.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { type HTMLStyledProps, styled } from 'leather-styles/jsx';
-
-interface AddressDisplayerLayoutProps extends HTMLStyledProps<'span'> {
- isEven: boolean;
- children: React.ReactNode;
-}
-export function AddressDisplayerLayout({ isEven, ...props }: AddressDisplayerLayoutProps) {
- return (
-
- );
-}
diff --git a/src/app/ui/components/address-displayer/address-displayer.stories.tsx b/src/app/ui/components/address-displayer/address-displayer.stories.tsx
deleted file mode 100644
index 18db079c7a2..00000000000
--- a/src/app/ui/components/address-displayer/address-displayer.stories.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Flex } from 'leather-styles/jsx';
-
-import { Flag } from '@leather-wallet/ui';
-
-import { BtcAvatarIcon } from '../avatar/btc-avatar-icon';
-import { StxAvatarIcon } from '../avatar/stx-avatar-icon';
-import { AddressDisplayer as Component } from './address-displayer';
-
-const meta: Meta = {
- component: Component,
- tags: ['autodocs'],
- title: 'AddressDisplayer',
- parameters: {
- controls: { include: ['address'] },
- },
-};
-
-export default meta;
-type Story = StoryObj;
-
-export const Bitcoin: Story = {
- args: {
- address: 'bc1pmzfrwwndsqmk5yh69yjr5lfgfg4ev8c0tsc06e',
- },
-};
-
-export const Stacks: Story = {
- args: {
- address: 'SP3XKZE32KZ925AAAGWPG1W66YP5BM2RD73T6AJHS',
- },
-};
-
-export const WithBTCIcon: Story = {
- args: {
- address: 'bc1pmzfrwwndsqmk5yh69yjr5lfgfg4ev8c0tsc06e',
- },
- render: args => (
- }>
-
-
-
-
- ),
-};
-
-export const WithSTXIcon: Story = {
- args: {
- address: 'SP3XKZE32KZ925AAAGWPG1W66YP5BM2RD73T6AJHS',
- },
- render: args => (
- }>
-
-
-
-
- ),
-};
diff --git a/src/app/ui/components/address-displayer/address-displayer.tsx b/src/app/ui/components/address-displayer/address-displayer.tsx
deleted file mode 100644
index dc16dee2979..00000000000
--- a/src/app/ui/components/address-displayer/address-displayer.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import type { HTMLStyledProps } from 'leather-styles/types';
-
-import { isEven } from '@leather-wallet/utils';
-
-import { AddressDisplayerLayout } from './address-displayer.layout';
-import { groupByFour } from './address-displayer.utils';
-
-interface AddressDisplayerProps extends HTMLStyledProps<'span'> {
- address: string;
-}
-export function AddressDisplayer({ address, ...props }: AddressDisplayerProps) {
- return (
- <>
- {groupByFour(address).map((letterGroup, index) => (
-
- {letterGroup}
-
- ))}
- >
- );
-}
diff --git a/src/app/ui/components/address-displayer/address-displayer.utils.ts b/src/app/ui/components/address-displayer/address-displayer.utils.ts
deleted file mode 100644
index 9dc09d07e41..00000000000
--- a/src/app/ui/components/address-displayer/address-displayer.utils.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export function groupByFour(text: string) {
- const result = [];
- for (let i = 0; i < text.length; i += 4) {
- result.push(text.slice(i, i + 4));
- }
- return result;
-}
diff --git a/src/app/ui/components/avatar/avatar.stories.tsx b/src/app/ui/components/avatar/avatar.stories.tsx
deleted file mode 100644
index 19047dfe928..00000000000
--- a/src/app/ui/components/avatar/avatar.stories.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-import StampsAvatarIconSrc from '@assets/avatars/stamps-avatar-icon.png';
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { PlaceholderIcon } from '@leather-wallet/ui';
-
-import { Avatar as Component } from './avatar';
-
-const meta: Meta = {
- component: Component.Root,
- tags: ['autodocs'],
- title: 'Avatar',
- argTypes: {
- size: {
- options: ['sm', 'md', 'lg', 'xl', 'xxl'],
- control: { type: 'radio' },
- defaultValue: 'lg',
- },
- },
-};
-
-export default meta;
-type Story = StoryObj;
-
-export const Avatar: Story = {
- parameters: {
- controls: { include: ['size'] },
- },
- args: {
- children: (
- <>
-
- ST
- >
- ),
- size: 'lg',
- variant: 'circle',
- },
-};
-
-export const Thumbnail: Story = {
- parameters: {
- controls: { include: ['size'] },
- },
- args: {
- children: (
- <>
- B
- >
- ),
- size: 'lg',
- variant: 'square',
- },
-};
-
-export const WithSvg: Story = {
- parameters: {
- controls: { include: ['size'] },
- },
- args: {
- children: (
-
-
-
-
- ),
- size: 'lg',
- variant: 'circle',
- },
-};
-
-export const WithDefaultIcon: Story = {
- parameters: {
- controls: { include: [] },
- },
- args: {
- children: (
-
-
-
- ),
- size: 'lg',
- variant: 'circle',
- },
-};
-
-export const WithSmallIcon: Story = {
- parameters: {
- controls: { include: [] },
- },
- args: {
- children: (
-
-
-
- ),
- size: 'md',
- variant: 'circle',
- },
-};
diff --git a/src/app/ui/components/avatar/avatar.tsx b/src/app/ui/components/avatar/avatar.tsx
deleted file mode 100644
index 8a917d7df50..00000000000
--- a/src/app/ui/components/avatar/avatar.tsx
+++ /dev/null
@@ -1,110 +0,0 @@
-import { forwardRef } from 'react';
-
-import * as RadixAvatar from '@radix-ui/react-avatar';
-import { type RecipeVariantProps, css, cva } from 'leather-styles/css';
-import { type HTMLStyledProps, styled } from 'leather-styles/jsx';
-
-export const defaultFallbackDelay = 600;
-export function getAvatarFallback(val: string) {
- return val.slice(0, 2);
-}
-
-const avatarRecipe = cva({
- base: {
- alignItems: 'center',
- bg: 'ink.background-secondary',
- display: 'inline-flex',
- justifyContent: 'center',
- overflow: 'hidden',
- userSelect: 'none',
- verticalAlign: 'middle',
- },
- variants: {
- size: {
- sm: { width: 'sm', height: 'sm' },
- md: { width: 'md', height: 'md' },
- lg: { width: 'lg', height: 'lg' },
- xl: { width: 'xl', height: 'xl' },
- xxl: { width: 'xxl', height: 'xxl' },
- },
- variant: {
- circle: { rounded: '100%' },
- square: { rounded: 'xs' },
- },
- },
- defaultVariants: {
- size: 'xl',
- variant: 'circle',
- },
-});
-
-type AvatarVariants = RecipeVariantProps;
-export type AvatarProps = RadixAvatar.AvatarProps & AvatarVariants;
-
-function Root({ size, variant, ...props }: AvatarProps) {
- return ;
-}
-
-const avatarImageStyles = css({
- aspectRatio: '1 / 1',
- height: '100%',
- objectFit: 'cover',
- rounded: 'inherit',
- width: '100%',
-});
-const Image: typeof RadixAvatar.Image = forwardRef((props, ref) => (
-
-));
-
-const avatarFallbackStyles = css({
- alignItems: 'center',
- bg: 'inherit',
- border: '1px solid',
- borderColor: 'ink.border-default',
- color: 'ink.text-primary',
- display: 'flex',
- fontWeight: 500,
- height: '100%',
- justifyContent: 'center',
- rounded: 'inherit',
- textStyle: 'label.02',
- width: '100%',
-});
-const Fallback: typeof RadixAvatar.Fallback = forwardRef((props, ref) => (
-
-));
-
-const avatarIconStyles = css({
- alignItems: 'center',
- bg: 'inherit',
- border: '1px solid',
- borderColor: 'ink.border-default',
- display: 'flex',
- height: '100%',
- justifyContent: 'center',
- rounded: 'inherit',
- width: '100%',
-});
-function Icon(props: HTMLStyledProps<'span'>) {
- return ;
-}
-
-const avatarSvgStyles = css({
- alignItems: 'center',
- display: 'flex',
- height: '100%',
- justifyContent: 'center',
- rounded: 'inherit',
- width: '100%',
-});
-function Svg({ children, ...props }: HTMLStyledProps<'span'>) {
- return (
-
-
- {children}
-
-
- );
-}
-
-export const Avatar = { Root, Image, Fallback, Icon, Svg };
diff --git a/src/app/ui/components/avatar/brc20-avatar-icon.tsx b/src/app/ui/components/avatar/brc20-avatar-icon.tsx
deleted file mode 100644
index 0af42f83810..00000000000
--- a/src/app/ui/components/avatar/brc20-avatar-icon.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import { Avatar, type AvatarProps } from './avatar';
-
-export function Brc20AvatarIcon(props: AvatarProps) {
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
diff --git a/src/app/ui/components/avatar/btc-avatar-icon.tsx b/src/app/ui/components/avatar/btc-avatar-icon.tsx
deleted file mode 100644
index 4557e69a799..00000000000
--- a/src/app/ui/components/avatar/btc-avatar-icon.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Avatar, type AvatarProps } from './avatar';
-
-export function BtcAvatarIcon(props: AvatarProps) {
- return (
-
-
-
-
-
-
- );
-}
diff --git a/src/app/ui/components/avatar/ordinal-avatar-icon.tsx b/src/app/ui/components/avatar/ordinal-avatar-icon.tsx
deleted file mode 100644
index 72445d61cd6..00000000000
--- a/src/app/ui/components/avatar/ordinal-avatar-icon.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Avatar, type AvatarProps } from './avatar';
-
-export function OrdinalAvatarIcon(props: AvatarProps) {
- return (
-
-
-
-
-
-
-
- );
-}
diff --git a/src/app/ui/components/avatar/runes-avatar-icon.tsx b/src/app/ui/components/avatar/runes-avatar-icon.tsx
deleted file mode 100644
index 138eaf33cd2..00000000000
--- a/src/app/ui/components/avatar/runes-avatar-icon.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { token } from 'leather-styles/tokens';
-
-import { Avatar, type AvatarProps } from './avatar';
-
-export function RunesAvatarIcon(props: AvatarProps) {
- return (
-
-
-
-
-
-
-
-
- );
-}
diff --git a/src/app/ui/components/avatar/src20-avatar-icon.tsx b/src/app/ui/components/avatar/src20-avatar-icon.tsx
deleted file mode 100644
index cd192e09db4..00000000000
--- a/src/app/ui/components/avatar/src20-avatar-icon.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { Avatar, type AvatarProps } from './avatar';
-
-// Leaving for use with SRC-20 tokens
-// ts-unused-exports:disable-next-line
-export function Src20AvatarIcon(props: AvatarProps) {
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
diff --git a/src/app/ui/components/avatar/stamps-avatar-icon.tsx b/src/app/ui/components/avatar/stamps-avatar-icon.tsx
index 0f2ce28fdc3..58ddec5d546 100644
--- a/src/app/ui/components/avatar/stamps-avatar-icon.tsx
+++ b/src/app/ui/components/avatar/stamps-avatar-icon.tsx
@@ -1,6 +1,6 @@
import StampsAvatarIconSrc from '@assets/avatars/stamps-avatar-icon.png';
-import { Avatar, type AvatarProps } from './avatar';
+import { Avatar, type AvatarProps } from '@leather-wallet/ui';
const fallback = 'ST';
diff --git a/src/app/ui/components/avatar/stx-avatar-icon.tsx b/src/app/ui/components/avatar/stx-avatar-icon.tsx
deleted file mode 100644
index 3feab7da594..00000000000
--- a/src/app/ui/components/avatar/stx-avatar-icon.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { Avatar, type AvatarProps } from './avatar';
-
-export function StxAvatarIcon(props: AvatarProps) {
- return (
-
-
-
-
-
-
- );
-}
diff --git a/src/app/ui/components/avatar/stx20-avatar-icon.tsx b/src/app/ui/components/avatar/stx20-avatar-icon.tsx
index 05e6aefe9e6..555d54757e7 100644
--- a/src/app/ui/components/avatar/stx20-avatar-icon.tsx
+++ b/src/app/ui/components/avatar/stx20-avatar-icon.tsx
@@ -1,6 +1,6 @@
import Stx20AvatarIconSrc from '@assets/avatars/stx20-avatar-icon.png';
-import { Avatar, type AvatarProps } from './avatar';
+import { Avatar, type AvatarProps } from '@leather-wallet/ui';
const fallback = 'ST';
diff --git a/src/app/ui/pages/home.layout.stories.tsx b/src/app/ui/pages/home.layout.stories.tsx
index 1fee191617c..fa828e71cd6 100644
--- a/src/app/ui/pages/home.layout.stories.tsx
+++ b/src/app/ui/pages/home.layout.stories.tsx
@@ -1,8 +1,15 @@
-import { ArrowDownIcon, ArrowUpIcon, IconButton, PlusIcon, SwapIcon } from '@leather-wallet/ui';
-import { Tabs } from '@leather-wallet/ui';
import type { Meta } from '@storybook/react';
import { Box, Flex, Stack } from 'leather-styles/jsx';
+import {
+ ArrowDownIcon,
+ ArrowUpIcon,
+ IconButton,
+ PlusIcon,
+ SwapIcon,
+ Tabs,
+} from '@leather-wallet/ui';
+
import { RouteUrls } from '@shared/route-urls';
import { HomeLayout as Component } from './home.layout';