refactor: new icons using icon gallery

.dependency-cruiser.js

@@ -37,7 +37,10 @@ module.exports = {
     {
       name: 'no-orphans',
       severity: 'error',
-      from: { orphan: true, pathNot: ['^src/shared/models/global-types.ts'] },
+      from: {
+        orphan: true,
+        pathNot: ['^src/shared/models/global-types.ts', '^src/app/ui/icons/docs/icons-list.ts'],
+      },
       to: {},
     },
     {

.eslintrc.js

@@ -126,5 +126,9 @@ module.exports = {
         ],
       },
     },
+    {
+      files: ['*.mdx'],
+      extends: 'plugin:mdx/recommended',
+    },
   ],
 };

.storybook/main.ts

@@ -7,6 +7,14 @@ const config: StorybookConfig = {
     '@storybook/addon-essentials',
     '@storybook/addon-onboarding',
     '@storybook/addon-interactions',
+    {
+      name: '@storybook/addon-docs',
+      options: {
+        csfPluginOptions: null,
+        mdxPluginOptions: {},
+        transcludeMarkdown: true,
+      },
+    },
     {
       name: '@storybook/addon-styling-webpack',
       options: {

.vscode/settings.json

@@ -2,5 +2,8 @@
   "prettier.documentSelectors": ["src/**/*.{ts,tsx}", "*.{js,json}"],
   "vitest.include": ["src/**/*.spec.ts"],
   "githubPullRequests.ignoredPullRequestBranches": ["dev"],
-  "typescript.preferences.preferTypeOnlyAutoImports": true
+  "typescript.preferences.preferTypeOnlyAutoImports": true,
+  "files.associations": {
+    "*.mdx": "markdown"
+  }
 }

package.json

@@ -26,7 +26,7 @@
     "lint:fix": "eslint \"src/**/*.{ts,tsx}\" --fix",
     "lint:prettier": "prettier --check \"{src,tests}/**/*.{ts,tsx}\" \"*.{js,json}\"",
     "lint:prettier:fix": "prettier --write \"{src,tests}/**/*.{ts,tsx}\" *.js",
-    "lint:unused-exports": "ts-unused-exports tsconfig.json --ignoreFiles=leather-styles --ignoreFiles=tests --excludePathsFromReport=.*stories",
+    "lint:unused-exports": "ts-unused-exports tsconfig.json --ignoreFiles=icons --ignoreFiles=leather-styles --ignoreFiles=tests --excludePathsFromReport=.*stories",
     "lint:remote-wallet-config": "npx ajv-cli validate -s config/wallet-config.schema.json -d config/wallet-config.json",
     "lint:deps": "dependency-cruise  --config .dependency-cruiser.js \"src/**/*.{ts,tsx}\"",
     "prod:ext": "yarn build",
@@ -242,6 +242,7 @@
     "@btckit/types": "0.0.19",
     "@leather-wallet/prettier-config": "0.0.1",
     "@ls-lint/ls-lint": "2.2.2",
+    "@mdx-js/loader": "3.0.0",
     "@pandacss/dev": "0.26.2",
     "@playwright/test": "1.40.1",
     "@pmmmwh/react-refresh-webpack-plugin": "0.5.11",
@@ -251,6 +252,7 @@
     "@sentry/webpack-plugin": "2.10.2",
     "@stacks/connect-react": "22.2.0",
     "@stacks/stacks-blockchain-api-types": "6.3.4",
+    "@storybook/addon-docs": "7.6.13",
     "@storybook/addon-essentials": "7.6.10",
     "@storybook/addon-interactions": "7.6.10",
     "@storybook/addon-links": "7.6.10",
@@ -303,6 +305,7 @@
     "esbuild": "0.19.11",
     "esbuild-loader": "4.0.2",
     "eslint-plugin-deprecation": "2.0.0",
+    "eslint-plugin-mdx": "3.1.5",
     "eslint-plugin-react": "7.33.2",
     "eslint-plugin-react-hooks": "4.6.0",
     "eslint-plugin-storybook": "0.6.15",

src/app/components/available-balance.tsx

@@ -3,8 +3,8 @@ import { Box, Flex, HStack, styled } from 'leather-styles/jsx';
 import { Money } from '@shared/models/money.model';
 
 import { formatMoney } from '@app/common/money/format-money';
-import { InfoIcon } from '@app/ui/components/icons/info-icon';
 import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip';
+import { InfoCircleIcon } from '@app/ui/icons/info-circle-icon';
 
 export function AvailableBalance(props: { balance: Money; balanceTooltipLabel?: string }) {
   const {
@@ -20,7 +20,7 @@ export function AvailableBalance(props: { balance: Money; balanceTooltipLabel?:
         </styled.span>
         <BasicTooltip label={balanceTooltipLabel} side="top">
           <Box>
-            <InfoIcon color="accent.text-subdued" size="xs" />
+            <InfoCircleIcon color="accent.text-subdued" width="xs" />
           </Box>
         </BasicTooltip>
       </HStack>

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

@@ -3,7 +3,7 @@ import { useNavigate } from 'react-router-dom';
 import { RouteUrls } from '@shared/route-urls';
 
 import { useGetBitcoinContractsBalance } from '@app/query/bitcoin/balance/bitcoin-contracts-balance.hooks';
-import { BitcoinContractIcon } from '@app/ui/components/icons/bitcoin-contract-icon';
+import { BitcoinContractIcon } from '@app/ui/icons/bitcoin-contract-icon';
 
 import { BitcoinContractEntryPointLayout } from './bitcoin-contract-entry-point-layout';
 

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

@@ -3,13 +3,13 @@ import { Circle, CircleProps, Flex } from 'leather-styles/jsx';
 import { BitcoinTx } from '@shared/models/transactions/bitcoin-transaction.model';
 
 import { isBitcoinTxInbound } from '@app/common/transactions/bitcoin/utils';
-import { ArrowDownIcon } from '@app/ui/components/icons/arrow-down-icon';
-import { ArrowUpIcon } from '@app/ui/components/icons/arrow-up-icon';
+import { ArrowDownIcon } from '@app/ui/icons/arrow-down-icon';
+import { ArrowUpIcon } from '@app/ui/icons/arrow-up-icon';
 
 function TxStatusIcon(props: { address: string; tx: BitcoinTx }) {
   const { address, tx } = props;
-  if (isBitcoinTxInbound(address, tx)) return <ArrowDownIcon size="xs" />;
-  return <ArrowUpIcon size="xs" />;
+  if (isBitcoinTxInbound(address, tx)) return <ArrowDownIcon width="xs" />;
+  return <ArrowUpIcon width="xs" />;
 }
 
 interface TransactionIconProps extends CircleProps {

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

@@ -2,7 +2,7 @@ import { Circle } from 'leather-styles/jsx';
 
 import { SupportedInscription } from '@shared/models/inscription.model';
 
-import { OrdinalIcon } from '@app/ui/components/icons/ordinal-icon';
+import { OrdinalIcon } from '@app/ui/components/avatar-icon/ordinal-icon';
 
 export function InscriptionIcon({ inscription, ...rest }: { inscription: SupportedInscription }) {
   switch (inscription.type) {

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

@@ -21,8 +21,8 @@
 } from '@app/query/bitcoin/ordinals/inscription.hooks';
 import { useGetInscriptionsByOutputQuery } from '@app/query/bitcoin/ordinals/inscriptions-by-param.query';
 import { useCurrentAccountNativeSegwitAddressIndexZero } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks';
+import { BtcIcon } from '@app/ui/components/avatar-icon/btc-icon';
 import { BulletSeparator } from '@app/ui/components/bullet-separator/bullet-separator';
-import { BtcIcon } from '@app/ui/components/icons/btc-icon';
 import { Caption } from '@app/ui/components/typography/caption';
 
 import { TransactionItemLayout } from '../transaction-item/transaction-item.layout';
@@ -45,7 +45,7 @@
     },
   });
 
   const bitcoinAddress = useCurrentAccountNativeSegwitAddressIndexZero();
   const { handleOpenBitcoinTxLink: handleOpenTxLink } = useBitcoinExplorerLink();
   const analytics = useAnalytics();
   const caption = useMemo(() => getBitcoinTxCaption(transaction), [transaction]);

src/app/components/crypto-assets/bitcoin/brc20-token-asset-list/components/brc20-token-asset-item.layout.tsx

@@ -4,7 +4,7 @@ import { createMoney } from '@shared/models/money.model';
 
 import { formatBalance } from '@app/common/format-balance';
 import { Brc20Token } from '@app/query/bitcoin/ordinals/brc20/brc20-tokens.query';
-import { Brc20TokenIcon } from '@app/ui/components/icons/brc20-token-icon';
+import { Brc20TokenIcon } from '@app/ui/components/avatar-icon/brc20-token-icon';
 import { ItemInteractive } from '@app/ui/components/item/item-interactive';
 import { ItemLayout } from '@app/ui/components/item/item.layout';
 import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip';

src/app/components/crypto-assets/choose-crypto-asset/crypto-asset-list.tsx

@@ -6,7 +6,7 @@ import { BitcoinNativeSegwitAccountLoader } from '@app/components/account/bitcoi
 import { BitcoinBalanceLoader } from '@app/components/balance/bitcoin-balance-loader';
 import { Brc20TokensLoader } from '@app/components/brc20-tokens-loader';
 import { Brc20TokenAssetList } from '@app/components/crypto-assets/bitcoin/brc20-token-asset-list/brc20-token-asset-list';
-import { BtcIcon } from '@app/ui/components/icons/btc-icon';
+import { BtcIcon } from '@app/ui/components/avatar-icon/btc-icon';
 
 import { CryptoCurrencyAssetItemLayout } from '../crypto-currency-asset/crypto-currency-asset-item.layout';
 import { CryptoAssetListItem } from './crypto-asset-list-item';

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

@@ -1,7 +1,7 @@
 import type { Blockchains } from '@shared/models/blockchain.model';
 
 import { StxAvatar } from '@app/components/crypto-assets/stacks/components/stx-avatar';
-import { BtcIcon } from '@app/ui/components/icons/btc-icon';
+import { BtcIcon } from '@app/ui/components/avatar-icon/btc-icon';
 
 export function CryptoCurrencyAssetIcon(props: { blockchain: Blockchains }) {
   switch (props.blockchain) {

src/app/components/crypto-assets/choose-crypto-asset/send-btc-disabled.tsx

@@ -6,7 +6,7 @@ import { RouteUrls } from '@shared/route-urls';
 
 import { openInNewTab } from '@app/common/utils/open-in-new-tab';
 import { GenericError } from '@app/components/generic-error/generic-error';
-import { ExternalLinkIcon } from '@app/ui/components/icons/external-link-icon';
+import { ExternalLinkIcon } from '@app/ui/icons/external-link-icon';
 
 const body = 'Sending bitcoin is temporarily disabled';
 const helpTextList = [

src/app/components/crypto-assets/stacks/components/stx-avatar.tsx

@@ -1,6 +1,6 @@
 import { Circle, CircleProps } from 'leather-styles/jsx';
 
-import { StxIcon } from '@app/ui/components/icons/stx-icon';
+import { StxIcon } from '@app/ui/components/avatar-icon/stx-icon';
 
 export function StxAvatar({ ...props }: CircleProps) {
   return (

src/app/components/drawer/components/drawer-header.tsx

@@ -1,8 +1,8 @@
 import { Box, Flex, styled } from 'leather-styles/jsx';
 import { useHover } from 'use-events';
 
-import { ArrowLeftIcon } from '@app/ui/components/icons/arrow-left-icon';
-import { CloseIcon } from '@app/ui/components/icons/close-icon';
+import { ArrowLeftIcon } from '@app/ui/icons/arrow-left-icon';
+import { CloseIcon } from '@app/ui/icons/close-icon';
 
 import { HeaderActionButton } from './header-action-button';
 

src/app/components/error-label.tsx

@@ -1,7 +1,7 @@
 import { css } from 'leather-styles/css';
 import { HStack, HstackProps } from 'leather-styles/jsx';
 
-import { ErrorCircleIcon } from '@app/ui/components/icons/error-circle-icon';
+import { ErrorCircleIcon } from '@app/ui/icons/error-circle-icon';
 
 export function ErrorLabel({ children, ...rest }: HstackProps) {
   return (

src/app/components/fees-row/components/fee-estimate-item.tsx

@@ -2,9 +2,9 @@ import { useMemo } from 'react';
 
 import { HStack, styled } from 'leather-styles/jsx';
 
-import { CheckmarkIcon } from '@app/ui/components/icons/checkmark-icon';
-import { ChevronDownIcon } from '@app/ui/components/icons/chevron-down-icon';
 import { Link } from '@app/ui/components/link/link';
+import { CheckmarkIcon } from '@app/ui/icons/checkmark-icon';
+import { ChevronDownIcon } from '@app/ui/icons/chevron-down-icon';
 
 const labels = ['Low', 'Standard', 'High', 'Custom'];
 const testLabels = labels.map(label => label.toLowerCase());

src/app/components/fees-row/components/fees-row.layout.tsx

@@ -4,8 +4,8 @@ import { HStack, HstackProps, styled } from 'leather-styles/jsx';
 import { openInNewTab } from '@app/common/utils/open-in-new-tab';
 import { SponsoredLabel } from '@app/components/sponsored-label';
 import { WarningLabel } from '@app/components/warning-label';
-import { InfoIcon } from '@app/ui/components/icons/info-icon';
 import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip';
+import { InfoCircleIcon } from '@app/ui/icons/info-circle-icon';
 
 const feesInfo =
   'Higher fees increase the likelihood of your transaction getting confirmed before others. Click to learn more.';
@@ -30,7 +30,11 @@ export function FeesRowLayout(props: FeesRowLayoutProps) {
               <styled.span color="accent.text-subdued" textStyle="label.02">
                 Fee
               </styled.span>
-              <InfoIcon color="accent.text-subdued" onClick={() => openInNewTab(url)} size="xs" />
+              <InfoCircleIcon
+                color="accent.text-subdued"
+                onClick={() => openInNewTab(url)}
+                width="xs"
+              />
             </HStack>
           </BasicTooltip>
           {!isSponsored ? selectInput : null}

src/app/components/generic-error/generic-error.layout.tsx

@@ -4,8 +4,8 @@ import GenericError from '@assets/images/generic-error.png';
 import { Flex, FlexProps, HStack, styled } from 'leather-styles/jsx';
 
 import { openInNewTab } from '@app/common/utils/open-in-new-tab';
-import { ExternalLinkIcon } from '@app/ui/components/icons/external-link-icon';
 import { Link } from '@app/ui/components/link/link';
+import { ExternalLinkIcon } from '@app/ui/icons/external-link-icon';
 
 const supportUrl =
   'https://wallet.hiro.so/wallet-faq/where-can-i-find-support-for-the-stacks-wallet';

src/app/components/header.tsx

@@ -11,8 +11,8 @@ import { useViewportMinWidth } from '@app/common/hooks/use-media-query';
 import { LeatherLogo } from '@app/components/leather-logo';
 import { NetworkModeBadge } from '@app/components/network-mode-badge';
 import { Button } from '@app/ui/components/button/button';
-import { ArrowLeftIcon } from '@app/ui/components/icons/arrow-left-icon';
-import { HamburgerIcon } from '@app/ui/components/icons/hamburger-icon';
+import { ArrowLeftIcon } from '@app/ui/icons/arrow-left-icon';
+import { HamburgerIcon } from '@app/ui/icons/hamburger-icon';
 
 import { AppVersion } from './app-version';
 

src/app/components/inscription-preview-card/components/inscription-preview.tsx

@@ -2,7 +2,7 @@ import { BoxProps, Flex } from 'leather-styles/jsx';
 
 import { SupportedInscription } from '@shared/models/inscription.model';
 
-import { OrdinalIcon } from '@app/ui/components/icons/ordinal-icon';
+import { OrdinalIcon } from '@app/ui/components/avatar-icon/ordinal-icon';
 
 import { InscriptionImage } from './inscription-image';
 import { InscriptionPreviewContainer } from './inscription-preview-container';
@@ -31,7 +31,7 @@ export function InscriptionPreview({ inscription, ...props }: InscriptionPreview
       return (
         <InscriptionPreviewContainer {...props}>
           <Flex alignItems="center" height="100%" justifyContent="center">
-            <OrdinalIcon size="40px" />
+            <OrdinalIcon width="40px" />
           </Flex>
         </InscriptionPreviewContainer>
       );

src/app/components/leather-logo.tsx

@@ -2,7 +2,7 @@ import { memo } from 'react';
 
 import { styled } from 'leather-styles/jsx';
 
-import { LeatherIcon } from '@app/ui/components/icons/leather-icon';
+import { LogomarkIcon } from '@app/ui/icons/logomark-icon';
 
 interface LeatherLogoProps {
   onClick?(): void;
@@ -14,12 +14,10 @@ export const LeatherLogo = memo((props: LeatherLogoProps) => {
     <styled.button
       _hover={{ color: 'accent.action-primary-hover' }}
       color="accent.text-primary"
-      height="16px"
       onClick={onClick}
       type="button"
-      width="76px"
     >
-      <LeatherIcon />
+      <LogomarkIcon />
     </styled.button>
   );
 });

src/app/components/modal-header.tsx

@@ -8,8 +8,8 @@ import { RouteUrls } from '@shared/route-urls';
 
 import { NetworkModeBadge } from '@app/components/network-mode-badge';
 import { Button } from '@app/ui/components/button/button';
-import { ArrowLeftIcon } from '@app/ui/components/icons/arrow-left-icon';
-import { CloseIcon } from '@app/ui/components/icons/close-icon';
+import { ArrowLeftIcon } from '@app/ui/icons/arrow-left-icon';
+import { CloseIcon } from '@app/ui/icons/close-icon';
 
 interface ModalHeaderProps {
   actionButton?: React.JSX.Element;

src/app/components/sponsored-label.tsx

@@ -1,6 +1,6 @@
 import { HStack, Stack, styled } from 'leather-styles/jsx';
 
-import { ErrorCircleIcon } from '@app/ui/components/icons/error-circle-icon';
+import { ErrorCircleIcon } from '@app/ui/icons/error-circle-icon';
 
 // #4476 TODO - visually inspect this
 export function SponsoredLabel(): React.JSX.Element {
@@ -13,7 +13,7 @@ export function SponsoredLabel(): React.JSX.Element {
         height="48px"
         pl="space.04"
       >
-        <ErrorCircleIcon color="stacks" size="sm" />
+        <ErrorCircleIcon color="stacks" />
 
         <styled.span color="accent.text-primary">
           This transaction is sponsored, so no fee is charged

src/app/components/stacks-transaction-item/increase-fee-button.tsx

@@ -1,6 +1,6 @@
 import { HStack, styled } from 'leather-styles/jsx';
 
-import { ChevronsRightIcon } from '@app/ui/components/icons/chevrons-right-icon';
+import { ChevronsRightIcon } from '@app/ui/icons/chevrons-right-icon';
 
 interface IncreaseFeeButtonProps {
   isEnabled?: boolean;

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

@@ -2,10 +2,10 @@ import { BoxProps } from 'leather-styles/jsx';
 
 import { StacksTx } from '@shared/models/transactions/stacks-transaction.model';
 
+import { StxIcon } from '@app/ui/components/avatar-icon/stx-icon';
 import { DynamicColorCircle } from '@app/ui/components/dynamic-color-circle';
-import { AlertOctagonIcon } from '@app/ui/components/icons/alert-octagon-icon';
-import { ListIcon } from '@app/ui/components/icons/list-icon';
-import { StxIcon } from '@app/ui/components/icons/stx-icon';
+import { ErrorCircleIcon } from '@app/ui/icons';
+import { ListIcon } from '@app/ui/icons/list-icon';
 
 import { TransactionIconWrapper } from '../transaction/transaction-icon-wrapper';
 import { TransactionTypeIcon } from '../transaction/transaction-type-icon';
@@ -36,7 +36,7 @@ export function StacksTransactionIcon({ transaction, ...rest }: TransactionIconP
       return <TransactionIconWrapper icon={<StxIcon />} transaction={transaction} {...rest} />;
     case 'poison_microblock':
       return (
-        <TransactionIconWrapper icon={<AlertOctagonIcon />} transaction={transaction} {...rest} />
+        <TransactionIconWrapper icon={<ErrorCircleIcon />} transaction={transaction} {...rest} />
       );
     default:
       return null;

src/app/components/transaction/token-transfer-icon.tsx

@@ -1,15 +1,15 @@
 import { StacksTx } from '@shared/models/transactions/stacks-transaction.model';
 
 import { useCurrentAccountStxAddressState } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks';
-import { ArrowDownIcon } from '@app/ui/components/icons/arrow-down-icon';
-import { ArrowUpIcon } from '@app/ui/components/icons/arrow-up-icon';
+import { ArrowDownIcon } from '@app/ui/icons/arrow-down-icon';
+import { ArrowUpIcon } from '@app/ui/icons/arrow-up-icon';
 
 export function TokenTransferIcon(props: { tx: StacksTx }) {
   const { tx } = props;
   const currentAccountStxAddress = useCurrentAccountStxAddressState();
   const isSent = tx.sender_address === currentAccountStxAddress;
 
-  if (isSent) return <ArrowUpIcon size="xs" />;
+  if (isSent) return <ArrowUpIcon width="xs" />;
 
-  return <ArrowDownIcon size="xs" />;
+  return <ArrowDownIcon width="xs" />;
 }