refactor: new icons using icon gallery

.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

@@ -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" size="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,8 +3,8 @@ 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;

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/icons/ordinal-icon';
 
 export function InscriptionIcon({ inscription, ...rest }: { inscription: SupportedInscription }) {
   switch (inscription.type) {

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

@@ -22,8 +22,8 @@ import {
 import { useGetInscriptionsByOutputQuery } from '@app/query/bitcoin/ordinals/inscriptions-by-param.query';
 import { useCurrentAccountNativeSegwitAddressIndexZero } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks';
 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 { BtcIcon } from '@app/ui/icons/btc-icon';
 
 import { TransactionItemLayout } from '../transaction-item/transaction-item.layout';
 import { BitcoinTransactionIcon } from './bitcoin-transaction-icon';

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

@@ -4,10 +4,10 @@ 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 { 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';
+import { Brc20TokenIcon } from '@app/ui/icons/brc20-token-icon';
 
 interface Brc20TokenAssetItemLayoutProps {
   token: Brc20Token;

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/icons/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/icons/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 { StacksIcon } from '@app/ui/icons/stacks-icon';
 
 export function StxAvatar({ ...props }: CircleProps) {
   return (
@@ -11,7 +11,7 @@ export function StxAvatar({ ...props }: CircleProps) {
       size="36px"
       {...props}
     >
-      <StxIcon />
+      <StacksIcon />
     </Circle>
   );
 }

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)}
+                size="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/icons/ordinal-icon';
 
 import { InscriptionImage } from './inscription-image';
 import { InscriptionPreviewContainer } from './inscription-preview-container';

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;
@@ -19,7 +19,7 @@ export const LeatherLogo = memo((props: LeatherLogoProps) => {
       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 {

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

@@ -3,9 +3,9 @@ import { BoxProps } from 'leather-styles/jsx';
 import { StacksTx } from '@shared/models/transactions/stacks-transaction.model';
 
 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 { StacksIcon } from '@app/ui/icons/stacks-icon';
 
 import { TransactionIconWrapper } from '../transaction/transaction-icon-wrapper';
 import { TransactionTypeIcon } from '../transaction/transaction-type-icon';
@@ -33,10 +33,10 @@ export function StacksTransactionIcon({ transaction, ...rest }: TransactionIconP
         </DynamicColorCircle>
       );
     case 'token_transfer':
-      return <TransactionIconWrapper icon={<StxIcon />} transaction={transaction} {...rest} />;
+      return <TransactionIconWrapper icon={<StacksIcon />} 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,8 +1,8 @@
 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;

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

@@ -1,8 +1,8 @@
 import { StacksTx } from '@shared/models/transactions/stacks-transaction.model';
 
-import { CodeIcon } from '@app/ui/components/icons/code-icon';
-import { FunctionIcon } from '@app/ui/components/icons/function-icon';
-import { PlusIcon } from '@app/ui/components/icons/plus-icon';
+import { CodeIcon } from '@app/ui/icons/code-icon';
+import { FunctionIcon } from '@app/ui/icons/function-icon';
+import { PlusIcon } from '@app/ui/icons/plus-icon';
 
 import { TokenTransferIcon } from './token-transfer-icon';
 

src/app/components/warning-label.tsx

@@ -2,7 +2,7 @@ import { Box, BoxProps, styled } from 'leather-styles/jsx';
 import { token } from 'leather-styles/tokens';
 
 import { Flag } from '@app/ui/components/flag/flag';
-import { ErrorCircleIcon } from '@app/ui/components/icons/error-circle-icon';
+import { ErrorCircleIcon } from '@app/ui/icons/error-circle-icon';
 
 interface WarningLabelProps extends BoxProps {
   title?: string;

src/app/features/activity-list/components/submitted-transaction-list/submitted-transaction-icon.tsx

@@ -7,7 +7,7 @@ import { getTxSenderAddress } from '@app/common/transactions/stacks/transaction.
 import { TransactionIconWrapper } from '@app/components/transaction/transaction-icon-wrapper';
 import { TransactionTypeIcon } from '@app/components/transaction/transaction-type-icon';
 import { DynamicColorCircle } from '@app/ui/components/dynamic-color-circle';
-import { StxIcon } from '@app/ui/components/icons/stx-icon';
+import { StacksIcon } from '@app/ui/icons/stacks-icon';
 
 interface SubmittedTransactionIconProps extends CircleProps {
   transaction: StacksTransaction;
@@ -53,7 +53,7 @@ export function SubmittedTransactionIcon({ transaction, ...rest }: SubmittedTran
     case PayloadType.TokenTransfer:
       return (
         <TransactionIconWrapper
-          icon={<StxIcon />}
+          icon={<StacksIcon />}
           transaction={
             {
               tx_type: 'token_transfer',

src/app/features/activity-list/components/transaction-list/stacks-transaction/ft-transfer-item.tsx

@@ -17,8 +17,8 @@ import { StacksTransactionItem } from '@app/components/stacks-transaction-item/s
 import { useGetFungibleTokenMetadataQuery } from '@app/query/stacks/tokens/fungible-tokens/fungible-token-metadata.query';
 import { isFtAsset } from '@app/query/stacks/tokens/token-metadata.utils';
 import { useCurrentStacksAccount } 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';
 
 import { TxTransferIconWrapper } from './tx-transfer-icon-wrapper';